:root {
    --font-family: "Roboto", sans-serif;
    --controls-background-color: #f9f9f9;
    --osnovnoy: #f26722;
    --osnovnoy---hover: #d95515;
    --belyy: #fff;
    --seryy-100: #f5f6f8;
    --seryy-200: #eceef2;
    --seryy-300: #d9dee5;
    --seryy-500: #8c9198;
    --seryy-700: #4b5563;
    --seryy-900: #1a1d23;
    --podtverzhdeno---fon: #f2fbf5;
    --podtverzhdeno---tekst: #1e8a4b;
    --podtverzhdeno---tekst---hover: #177a40;
    --na-rassmotrenii---fon: #fff8e6;
    --na-rassmotrenii---tekst: #c57d11;
    --otkloneno---fon: #fff2f2;
    --otkloneno---tekst: #c0343a;
    --chernovik---fon: #f5f6f8;
    --chernovik---tekst: #6b7280;
    --osnovnoy---fon: #fcd1bf;
    --page--marge-horizontal: 26px;
    --page--marge-vertical: 80px;
    --page-header--marge-horizontal: 26px;
    --border-radius: 12px;
    --dt-order-arrow_color: var(--seryy-700);
    --dt-order-arrow_opacity: .3;
    --body-padding-top: 20px;
}

html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: auto;
    min-height: 100%;
}

body, html {
    padding: 0;
    margin: 0;
    font-family: var(--font-family);
}

body {
    width: 100%;
    /* min-width: 760px; */
    padding-top: var(--body-padding-top, 71px);
    height: auto;
    min-height: 100vh;
    background: var(--seryy-700);
    display: flex;
    flex-direction: column;
    gap: var(--page--marge-vertical);
}

    body > div {
        flex: 1;
    }

header {
    position: relative;
    padding-left: var(--page-header--marge-horizontal);
    padding-right: var(--page-header--marge-horizontal);
    display: flex;
    gap: 24px;
    flex-direction: column;
    justify-content: space-between;
}


    header .sec-exit {
        display: none;
    }

    header.with-exit .sec-exit {
        display: block;
        align-self: flex-end;
        flex: 0;
    }

    header .sec-spons {
        display: flex;
        gap: 20px;
        flex-direction: column;
        justify-content: flex-start;
    }

    header img.logo {
        display: block;
        width: 165px;
    }

    header .sec-spons-1 img.logo_org,
    header .sec-spons-2 img.logo_org {
        display: block;
        width: 327px;
        max-width: 100%;
    }


#content {
    padding-left: var(--page--marge-horizontal);
    padding-right: var(--page--marge-horizontal);
    padding-bottom: var(--page--marge-vertical);
    /* display: flex; */
    /* gap: 20px; */
    /* flex-direction: column; */
    background-image: url(/img/bg.png);
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: 100% auto;
}


footer {
    padding-bottom: var(--page--marge-vertical);
    color: black;
    position: relative;
    font-size: 13px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-left: var(--page-header--marge-horizontal);
    padding-right: var(--page-header--marge-horizontal);
    color: white;
}

    footer a {
        color: white;
        text-decoration: none;
    }

        footer a:hover {
            color: white;
            text-decoration: underline;
        }

    footer .media-br {
        display: none;
    }

    footer .dev {
        margin-top: 6px;
    }



.page-panel {
    background-color: white;
    padding: 20px 16px 16px 16px;
    border-radius: var(--border-radius);
}


.simple-table {
    caption-side: bottom;
    border-collapse: collapse;
    border-color: var(--seryy-100);
}

    .simple-table th,
    .simple-table td {
        padding: 16px 20px;
    }

    .simple-table th {
        background: var(--seryy-100);
    }

.simple-list {
    padding-left: 2.5em;
}



.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: +1500;
    display: none;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
    background: url('/img/modal-bg.png') 0 0 repeat;
}

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
}

.modal-dialog {
    display: -ms-flexbox;
    display: flex;
    position: relative;
    height: auto;
    padding: 0;
    background: white;
    width: 100%;
    max-width: 96%;
    margin: 2rem auto 0;
    max-height: calc(100vh - 5rem);
    border-radius: 10px;
}

    .modal-dialog .modal-content {
        position: relative;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        width: 100%;
        pointer-events: auto;
        outline: 0;
        max-height: calc(100vh - 5rem);
    }

    .modal-dialog .modal-header {
        padding: 12px 50px 12px 20px;
        position: relative;
        border-bottom: none;
    }

    .modal-dialog h1 {
        font-family: var(--font-family);
        font-weight: 700;
        font-size: 24px;
        color: #000;
        padding-top: 6px;
        margin-bottom: 0;
        margin-top: 3px;
    }

    .modal-dialog .close {
        position: absolute;
        right: 11px;
        top: 24px;
        font-size: 25px;
        line-height: 15px;
        /*! color: #F16036; */
        color: var(--osnovnoy);
        opacity: 1;
    }

        .modal-dialog .close:hover {
            color: var(--osnovnoy---hover);
        }

    .modal-dialog .modal-body {
        overflow-y: auto;
        padding: 12px 20px 0 20px;
        /* font-size: 14px; */
        margin-bottom: 24px;
    }

        .modal-dialog .modal-body ul,
        .modal-dialog .modal-body ol {
            padding-left: 2.5em;
        }

        .modal-dialog .modal-body ul,
        .modal-dialog .modal-body ol,
        .modal-dialog .modal-body p {
            margin: 1em 0;
        }

            .modal-dialog .modal-body ul:first-child,
            .modal-dialog .modal-body ol:first-child,
            .modal-dialog .modal-body p:first-child {
                margin-top: 0;
            }



@media (min-width: 576px) {
    footer {
        /* padding-bottom: 38px; */
        /* margin-top: 57px; */
        gap: 24px;
    }

        footer > div {
            text-align: center;
        }

        footer .media-br {
            display: block;
        }
}


@media (min-width: 700px) {
    header .sec-spons {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        flex: 1;
        flex-basis: 78%;
    }

    header .col-logo {
        flex: 1;
        flex-basis: 22%;
    }
}

@media (min-width: 768px) {

    footer {
        gap: 24px;
        flex-direction: row;
        align-items: end;
        justify-content: space-between;
    }

        footer > div {
            text-align: left;
        }

    #content .container .page-panel {
        padding: 40px;
    }
}

@media (min-width: 940px) {
    header {
        align-items: center;
        flex-direction: row;
        gap: 50px;
        justify-content: flex-start;
    }

    #content .container .page-panel {
        padding: 50px;
    }

    .modal-dialog .modal-header {
        padding: 12px 50px 12px 30px;
    }

    .modal-dialog .modal-body {
        padding: 12px 30px 0 30px;
        margin-bottom: 30px;
    }
}

@media (min-width: 980px) {
    .modal-dialog {
        max-width: 940px;
    }
}

@media (min-width: 1200px) {
    header img.logo {
        width: 100%;
        max-width: 243px !important;
    }

    header .sec-spons {
        justify-content: flex-start;
        max-width: 860px;
    }

    header .sec-spons-1,
    header .sec-spons-2 {
        flex: 1;
    }

        header .sec-spons-1 img.logo_org,
        header .sec-spons-2 img.logo_org {
            width: 100%;
        }

    .modal-dialog h1 {
        font-size: 32px;
    }

    .modal-dialog .modal-header {
        padding: 40px 120px 28px 40px;
    }

    .modal-dialog .modal-body {
        padding: 12px 40px 0 40px;
        margin-bottom: 40px;
    }

    .modal-dialog .close {
        right: 28px;
        top: 28px;
    }

    :root {
        --page--marge-horizontal: 90px;
        --page-header--marge-horizontal: 50px;
    }
}