/**
 * -------------------------------------------------------------------------
 *
 * Стили сайта.
 *
 * -------------------------------------------------------------------------
 *
 * @package    MimimiFramework
 * @subpackage Examples / Repost Vacancies
 * @license    GPL-2.0
 *             https://opensource.org/license/gpl-2-0/
 * @copyright  2022 MiMiMi Community
 *             https://mimimi.software/
 *
 * -------------------------------------------------------------------------
 */

    :root {
        --minimalFontSize: 16px;

        --anchor_color: inherit;
        --anchor_hover_color: #07f;
        --anchor_focus_color: #084;

        --text_background: white;
        --text_border_color: #111;
        --text_color: #111;

        --blockquote_background: #eee;
        --blockquote_border_color: #eee;
        --blockquote_color: #111;

        --pre_background: #111;
        --pre_border_color: #111;
        --pre_color: #eee;

            --pre_code_color: #fe0;
            --pre_em_color: #0e0;

        --report_background: #eee;
        --report_border_color: transparent;
        --report_color: #111;

        --error_background: #fdb;
        --error_border_color: #fdb;
        --error_color: #c60;

        --success_background: #cfd;
        --success_border_color: #cfd;
        --success_color: #396;

        --input_background: white;
        --input_border_color: #111;
        --input_color: #111;

        --input_span_focus_color: #0a5;

        --checkbox_background: white;
        --checkbox_border_color: #111;
        --checkbox_color: #111;

        --checkbox_focus_background: white;
        --checkbox_focus_border_color: #0a5;
        --checkbox_focus_color: #0a5;

        --button_background: white;
        --button_border_color: #07f;
        --button_color: #07f;

        --button_Secondary_background: white;
        --button_Secondary_border_color: #777;
        --button_Secondary_color: #777;

        --button_Admin_background: white;
        --button_Admin_border_color: #f42;
        --button_Admin_color: #f42;

        --button_focus_background: #cf9;
        --button_focus_border_color: #084;
        --button_focus_color: #084;

        --button_hover_background: #07f;
        --button_hover_border_color: #07f;
        --button_hover_color: white;

        --warning_background: #111;
        --warning_border_color: #111;
        --warning_color: #eee;

        --menu_background: white;
        --menu_border_color: #07f;
        --menu_color: #07f;

        --menu_focus_background: #cf9;
        --menu_focus_border_color: #084;
        --menu_focus_color: #084;

        --menu_hover_background: #07f;
        --menu_hover_border_color: #07f;
        --menu_hover_color: white;

        --menu_open_background: #111;
        --menu_open_border_color: #111;
        --menu_open_color: white;

            --menu_nav_background: white;
            --menu_nav_border_color: #07f;

                --menu_a_background: transparent;
                --menu_a_color: #07f;

                --menu_a_focus_background: #cf9;
                --menu_a_focus_color: #084;

                --menu_a_hover_background: #07f;
                --menu_a_hover_color: white;

        --salary_color: #f08;
    }

    * {
        background: transparent;
        box-sizing: border-box;
        border: none;
        border-radius: 0;
        outline: none;
        font-weight: normal;
        font-style: normal;
        max-width: 100%;
        margin: 0 auto;
        padding: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        position: relative;
    }

    a {
        color: var(--anchor_color);
    }

    a:focus {
        color: var(--anchor_focus_color);
    }

    a:hover,
    a:active {
        color: var(--anchor_hover_color);
    }

    html {
        font-family: monospace;
        font-size: max(var(--minimalFontSize), 2vmin);
        overflow-y: auto;
    }

        body {
            background-color: var(--text_background);
            color: var(--text_color);
            line-height: 1.4;
            min-height: 100vh;
            padding: 2rem;
            place-content: center;
        }

            main,
            form,
            .form {
                background-color: var(--text_background);
                border: 0.25rem solid var(--text_border_color);
                box-shadow: 0.25rem 0.25rem 1rem rgba(0, 0, 0, 0.1);
                display: block;
                width: 50rem;
                max-width: 90vw;
                padding: 2rem;
            }

                @media (max-width: 511px) {
                    body {
                        padding: 0;
                    }
                        main,
                        form,
                        .form {
                            border: none;
                            box-shadow: none;
                            width: 100%;
                            max-width: 100%;
                            padding: 1rem;
                        }
                }

            form,
            .form {
                text-align: center;
            }

                h1 {
                    border-bottom: 0.25rem solid var(--text_border_color);
                    margin-bottom: 2rem;
                    padding-bottom: 1rem;
                    text-align: center;
                }

                h2 {
                    margin-bottom: 1rem;
                    text-align: left;
                }

                    a.silent {
                        color: inherit !important;
                        cursor: default !important;
                        text-decoration: none !important;
                        pointer-events: none;
                    }

                p {
                    margin-bottom: 1rem;
                    text-align: left;
                }

                ul,
                ol {
                    margin-bottom: 1rem;
                    margin-left: 2rem;
                }

                    li {
                    }

                    li + li {
                        margin-top: 0.5em;
                        padding-top: 0.5em;
                    }

                blockquote {
                    background-color: var(--blockquote_background);
                    border: 1px solid var(--blockquote_border_color);
                    color: var(--blockquote_color);
                    margin: 1.5rem auto;
                    padding: 1rem;
                }

                    blockquote > *:last-child {
                        margin-bottom: 0;
                    }

                pre {
                    background-color: var(--pre_background);
                    border: 1px solid var(--pre_border_color);
                    color: var(--pre_color);
                    font-family: monospace;
                    white-space: pre;
                    margin: 1.5rem auto;
                    padding: 1rem;
                    overflow-x: auto;
                    text-overflow: initial;
                }

                    pre code {
                        color: var(--pre_code_color);
                        display: inline-block;
                        font-family: inherit;
                        vertical-align: top;
                    }

                    pre em {
                        color: var(--pre_em_color);
                        display: inline-block;
                        font-family: inherit;
                        vertical-align: top;
                    }

                .faq-item {
                    display: block;
                }

                    .faq-item summary {
                        cursor: pointer;
                    }

                    .faq-item summary:focus {
                        color: var(--button_focus_color);
                    }

                    .faq-item summary:hover,
                    .faq-item summary:active {
                        color: var(--button_color);
                    }

                        .faq-item h2 {
                            display: inline-block;
                            margin-left: 0.5em;
                            vertical-align: top;
                        }

                .error,
                .success {
                    font-size: 0.85rem;
                    max-width: 75%;
                    margin: 1.5rem auto;
                    padding: 1rem;
                    text-align: center;
                }

                .error:empty,
                .success:empty,
                p:empty,
                blockquote:empty,
                li:empty {
                    display: none;
                }

                .error {
                    background-color: var(--error_background);
                    border: 1px solid var(--error_border_color);
                    color: var(--error_color);
                }

                .success {
                    background-color: var(--success_background);
                    border: 1px solid var(--success_border_color);
                    color: var(--success_color);
                }

                label {
                    display: block;
                    margin-bottom: 0.5rem;
                    text-align: left;
                }

                label:has(input[type="checkbox"]) {
                    cursor: pointer;
                    text-align: center;
                }

                    label span {
                        display: block;
                    }

                    label:has(input[type="checkbox"]) span {
                        cursor: inherit;
                        display: inline-block;
                    }

                    label:has(input:focus) span,
                    label:has(select:focus) span,
                    label:has(textarea:focus) span {
                        color: var(--input_span_focus_color);
                    }

                    input[type="checkbox"] {
                        appearance: none;
                        background-color: var(--checkbox_background);
                        border: 0.25rem solid var(--checkbox_border_color);
                        color: var(--checkbox_color);
                        cursor: inherit;
                        width: 1.25rem;
                        height: 1.25rem;
                        vertical-align: top;
                    }

                    input[type="checkbox"]:focus {
                        background-color: var(--checkbox_focus_background);
                        border-color: var(--checkbox_focus_border_color);
                        color: var(--checkbox_focus_color);
                    }

                    input[type="checkbox"]:checked {
                        background-color: var(--checkbox_border_color);
                        box-shadow: var(--checkbox_background) 0 0 0 0.15rem inset;
                    }

                    input[type="text"],
                    input[type="password"],
                    input[type="number"],
                    input[type="url"],
                    select,
                    textarea {
                        background-color: var(--input_background);
                        border: 0.25rem solid var(--input_border_color);
                        color: var(--input_color);
                        font: inherit;
                        width: 100%;
                        height: 3rem;
                        line-height: 1.5;
                        margin: 0.5rem auto 1rem;
                        padding: 0 0.5rem;
                    }

                    textarea {
                        height: 12rem;
                        min-height: 3rem;
                        max-height: 100vh;
                        resize: vertical;
                    }

                nav {
                    padding: 0.5rem;
                    text-align: center;
                }

                .menu {
                    display: block;
                }
                .menu.sticky {
                    text-align: right;
                    position: fixed;
                    top: 0;
                    right: 0;
                }

                    .menu summary {
                        background-color: var(--menu_background);
                        border: 0.25rem solid var(--menu_border_color);
                        box-shadow: var(--text_background) 0 0 0 0.5rem;
                        color: var(--menu_color);
                        cursor: pointer;
                        display: inline-block;
                        font-size: 110%;
                        font-weight: bold;
                        width: 3rem;
                        height: 3rem;
                        line-height: 2rem;
                        margin: 0.5rem;
                        text-align: center;
                        vertical-align: top;
                    }

                    .menu[open] summary {
                        background-color: var(--menu_open_background);
                        border-color: var(--menu_open_border_color);
                        color: var(--menu_open_color);
                    }

                    .menu summary:focus {
                        background-color: var(--menu_focus_background);
                        border-color: var(--menu_focus_border_color);
                        color: var(--menu_focus_color);
                    }

                    .menu summary:active,
                    .menu summary:hover {
                        background-color: var(--menu_hover_background);
                        border-color: var(--menu_hover_border_color);
                        color: var(--menu_hover_color);
                    }

                    .menu nav {
                        background-color: var(--menu_nav_background);
                        border: 0.25rem solid var(--menu_nav_border_color);
                        box-shadow: var(--text_background) 0 0 0 0.5rem;
                        display: block;
                        margin: 0 0.5rem 0.5rem;
                        padding: 0;
                        text-align: left;
                    }

                        .menu a {
                            background-color: var(--menu_a_background);
                            color: var(--menu_a_color);
                            cursor: pointer;
                            display: block;
                            padding: 0.5rem 1rem;
                            text-decoration: none;
                        }

                        .menu a:focus {
                            background-color: var(--menu_a_focus_background);
                            color: var(--menu_a_focus_color);
                        }

                        .menu a:active,
                        .menu a:hover {
                            background-color: var(--menu_a_hover_background);
                            color: var(--menu_a_hover_color);
                        }

                .footer {
                    display: block;
                    font-size: var(--minimalFontSize);
                    margin-bottom: -1em;
                    text-align: center;
                    opacity: 0.5;
                }

                .footer:hover,
                .footer:active,
                .footer:focus-within {
                    opacity: 1.0;
                }

                    .footer a {
                        display: inline-block;
                        vertical-align: top;
                    }

                .messengers:has(h3:last-child) {
                    display: none;
                }

                    button,
                    .btn {
                        background-color: var(--button_background);
                        border: 0.25rem solid var(--button_border_color);
                        color: var(--button_color);
                        cursor: pointer;
                        display: inline-block;
                        font: inherit;
                        margin: 0.5rem;
                        padding: 0.5rem 1rem;
                        text-decoration: none;
                        vertical-align: top;
                    }

                    button.admin,
                    .btn.admin {
                        background-color: var(--button_Admin_background);
                        border-color: var(--button_Admin_border_color);
                        color: var(--button_Admin_color);
                    }

                    button.secondary,
                    .btn.secondary {
                        background-color: var(--button_Secondary_background);
                        border-color: var(--button_Secondary_border_color);
                        color: var(--button_Secondary_color);
                    }

                    button:focus,
                    .btn:focus {
                        background-color: var(--button_focus_background);
                        border-color: var(--button_focus_border_color);
                        color: var(--button_focus_color);
                    }

                    button:active,
                    button:hover,
                    .btn:active,
                    .btn:hover {
                        background-color: var(--button_hover_background);
                        border-color: var(--button_hover_border_color);
                        color: var(--button_hover_color);
                    }

                    button + p,
                    .btn + p {
                        margin-top: 1rem;
                    }

                hr {
                    border-bottom: 0.25rem solid var(--text_border_color);
                    margin: 1rem 0 1.5rem;
                }

                .card {
                    margin-bottom: 1rem;
                    text-align: left;
                }

                .card.task    { }
                .card.vacancy { }

                    .card nav {
                        font-size: 70%;
                        float: right;
                        margin-top: -0.5rem;
                        padding: 0;
                        text-align: right;
                    }

                        @media (max-width: 767px) {
                            .card nav {
                                max-width: 14rem;
                            }
                        }

                        @media (max-width: 399px) {
                            .card nav {
                                width: min-content;
                            }
                        }

                        .card.vacancy .btn[href*="/copy/"],
                        .card.vacancy .btn[href*="/copy?"] {
                            display: none;
                        }

                    .report {
                        background-color: var(--report_background);
                        border: 0.25rem solid var(--report_border_color);
                        color: var(--report_color);
                        clear: both;
                        display: block;
                        font-size: 80%;
                        margin: 0 auto 1rem;
                        padding: 1rem;
                    }

                        .report li {
                            display: block;
                            line-height: normal;
                            white-space: pre;
                        }

                        .report li + li {
                            margin-top: 0;
                            padding-top: 0;
                        }

                        .report li:empty {
                            border-bottom: 1px solid var(--text_border_color);
                            margin-bottom: 0.75rem;
                            padding-bottom: 0.75rem;
                        }

                            .report hr {
                                border-width: 1px;
                                margin: 0.75rem 0;
                            }

                            .modname {
                                display: inline-block;
                                text-transform: capitalize;
                                vertical-align: top;
                            }

                            .code {
                                display: inline-block;
                                width: calc(100% - 12rem);
                                vertical-align: top;
                            }

                            .salary {
                                color: var(--salary_color);
                                display: inline-block;
                                vertical-align: top;
                            }

                            .html {
                                display: inline-block;
                                width: calc(100% - 13rem);
                                white-space: normal;
                                vertical-align: top;
                            }

                                .html p,
                                .html ul,
                                .html ol,
                                .html li {
                                    display: block;
                                    margin: 0;
                                }

                               .html li + li {
                                   margin-top: 0;
                                   padding-top: 0;
                               }

                            .chatid {
                                display: inline-block;
                                vertical-align: top;
                            }
                            .chatid:not(:empty)::before {
                                content: "@";
                            }

                            .chatname {
                                display: inline-block;
                                vertical-align: top;
                            }
                            li:has(.chatname:empty) {
                                display: none;
                            }

                            .filterid {
                                display: inline-block;
                                vertical-align: top;
                            }

                            .filtername {
                                display: inline-block;
                                vertical-align: top;
                            }
                            li:has(.filtername:empty) {
                                display: none;
                            }

                            .experience {
                                display: inline-block;
                                vertical-align: top;
                            }
                            .experience[data-value]::before {
                                content: attr(data-value);
                            }

                            li:has(.experience[data-value="0"]),
                            li:has(.experience[data-value=""]) {
                                display: none;
                            }

                            .training {
                                display: inline-block;
                                vertical-align: top;
                            }
                            .training[data-value]::before {
                                content: attr(data-value);
                            }

                            li:has(.training[data-value="0"]),
                            li:has(.training[data-value=""]) {
                                display: none;
                            }

                            .if-present {
                                display: inline-block;
                                vertical-align: top;
                            }
                            li:has(.if-present:empty) {
                                display: none;
                            }

                            .label-none {
                                display: inline-block;
                                vertical-align: top;
                            }
                            .label-none:empty::before {
                                content: "Не указано";
                            }

                            .report .btn {
                                font-size: var(--minimalFontSize);
                                margin: 1em 0 0;
                                padding: 0.5em 0.75em;
                            }

                .warning,
                noindex {
                    background-color: var(--warning_background);
                    border: 1px solid var(--warning_border_color);
                    color: var(--warning_color);
                    display: block;
                    margin: 1.5rem auto;
                    padding: 1rem;
                }

                .warning:last-child,
                .warning *:last-child,
                noindex:last-child {
                    margin-bottom: 0;
                }

    .stopwatch[data-value]::before {
        content: attr(data-value);
    }

    .stopwatch[data-value^="-"]::before {
        content: "[Перезагрузка...]";
    }