:root {
    --c-active: #12806A;
    --c-active-inner: #FFFFFF;
    --c-default: #D2D6E9;
    --c-default-dark: #C7CBDF;
    --c-black: #1B1B22;
}

body {
    margin: 0;
    padding: 0;
    background-color: #F6F6F6;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
}

p {
    font-size: 14px;
    color: #1C1C1C;
}

/* NAVBAR */
header {
    width: 100%;
}

.nav {
    margin-top: 24px;
    padding: 0 40px;
    height: 100px;
    width: 100%;
    background-color: #fff;
    border-radius: 24px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
}

.nav>.nav-header {
    display: inline;
    width: max-content;
    margin-right: 40px;
}

.nav>.nav-header>.nav-title {
    display: flex;
    align-items: center;
    justify-content: flex-start;

}

.nav>.nav-header>.nav-title h2 {
    white-space: nowrap;
    font-size: 32px;
    color: #1C1C1C;
    margin: 0;
}

.nav>.nav-header>.nav-title img {
    width: 52px;
    margin-right: 8px;
}

.nav>.nav-btn {
    display: none;
}

.nav>.nav-links {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;


}

.nav>.nav-links>.link>a {
    display: inline-block;
    /*padding: 0px 40px 0px 0px;*/
    text-decoration: none;
    color: #1C1C1C;
    font-weight: 600;
    font-size: 16px;
}


.link {
    display: flex;
    gap: 32px;
}



.nav>#nav-check {
    display: none;
}

.account_info {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-align: right;
    gap: 4px;
}

.account_info .info {
    font-size: 12px;
    color: #767676;
}

.account_info .info p {
    white-space: nowrap;
    margin: 0;
}

.account_info .info span {
    color: #1C1C1C;
    font-weight: 600;
}

.account_info .tarif button {
    background-color: #12806A;
    height: 40px;
    border-radius: 12px;
    border: none;
    color: #fff;
    padding: 10px 12px;
    font-size: 16px;
    font-weight: 600;
}

@media (max-width:600px) {
    .nav>.nav-btn {
        display: inline-block;
        position: absolute;
        right: 0px;
        top: 0px;
    }

    .nav>.nav-btn>label {
        display: inline-block;
        width: 50px;
        height: 50px;
        padding: 13px;
    }

    .nav>.nav-btn>label:hover,
    .nav #nav-check:checked~.nav-btn>label {
        background-color: rgba(0, 0, 0, 0.3);
    }

    .nav>.nav-btn>label>span {
        display: block;
        width: 25px;
        height: 10px;
        border-top: 2px solid #eee;
    }

    .nav>.nav-links {
        position: absolute;
        display: block;
        width: 100%;
        background-color: #333;
        height: 0px;
        transition: all 0.3s ease-in;
        overflow-y: hidden;
        top: 50px;
        left: 0px;
    }

    .nav>.nav-links>a {
        display: block;
        width: 100%;
    }

    .nav>#nav-check:not(:checked)~.nav-links {
        height: 0px;
    }

    .nav>#nav-check:checked~.nav-links {
        height: calc(100vh - 50px);
        overflow-y: auto;
    }
}

/* CONTENT */
.content {
    margin-top: 8px;
    background-color: #fff;
    border-radius: 24px;
    padding: 32px 40px;
}

.content_info {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.content_info p {
    margin: 0;
}

.content_info span {
    font-weight: 600;
}

/* TABLE */
.table_content {
    margin-top: 12px;
}

.table_head {
    height: 60px;
    border: 1px solid #767676;
    border-radius: 12px;
    margin-bottom: 12px;
}

.table_head .row {
    align-items: center;
    height: 60px;
}

.table_head h3 {
    font-size: 14px;
    text-align: center;
    font-weight: 600;
    padding: 20px 0;
    margin-bottom: 0;
}

.table_body .t_border {
    border: 1px solid #767676;
    border-radius: 12px;
    margin-bottom: 12px;
}

.table_body .cell {
    align-items: center;
    justify-content: center;
    height: 60px;
}

.table_body .cell label {
    margin: 0;
}

.table_body .cell img {
    cursor: pointer;
}

#chevron_btn {
    margin-left: 12px;
}

.table_body .cell p {
    color: #000;
    margin: 0;
    font-weight: 500;
}

.box_switch {
    display: flex;
    width: 55px;
    justify-content: right;
}

.box_switch_one {
    display: flex;
    width: 55px;
    justify-content: left;
}

.txt-left {
    text-align: left !important;
}

.jus-left {
    justify-content: flex-start !important;
}

.save_btn {
    text-align: right;
}

.save_btn button {
    padding: 8px 106px;
    background-color: #12806A;
    border-radius: 12px;
    font-weight: 600;
    font-size: 16px;
    border: none;
    color: #fff;
}

/* Switch */

.radio,
.checkbox,
.switch {
    display: table;
    border-radius: var(--border-radius, 12px) var(--border-radius-corner, 12px) var(--border-radius, 12px) var(--border-radius, 12px);
    position: relative;
}

.radio input,
.checkbox input,
.switch input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    border: none;
    background: var(--input-background, none);
    display: block;
    cursor: pointer;
    margin: 0;
    padding: 0;
    border-radius: inherit;
    width: var(--input-width, 24px);
    height: var(--input-height, 24px);
}

.radio svg,
.checkbox svg,
.switch svg {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    pointer-events: none;
    fill: var(--c-active-inner);
    transform: scale(1.01) translateZ(0);
}

.radio input,
.checkbox input {
    --border-color: var(--c-default);
    --border-width: 2px;
    box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
}

.radio input:checked,
.checkbox input:checked {
    --border-color: var(--c-active);
}

.radio input:not(:checked),
.checkbox input:not(:checked) {
    transition: box-shadow 0.25s;
}

.radio input:not(:checked):hover,
.checkbox input:not(:checked):hover {
    --border-width: 3px;
    --border-color: var(--c-active);
}

.radio input:checked {
    --border-width: 6.75px;
}

.radio input+svg {
    --top-y: 0;
    --dot-y: -17px;
    --drop-y: -14px;
    --top-s-x: 1.75;
    --top-s-y: 1;
}

.radio input+svg .top {
    transform-origin: 12px -12px;
    transform: translateY(var(--top-y)) scale(var(--top-s-x), var(--top-s-y)) translateZ(0);
}

.radio input+svg .dot {
    transform: translateY(var(--dot-y)) translateZ(0);
}

.radio input+svg .drop {
    transform: translateY(var(--drop-y)) translateZ(0);
}

.checkbox {
    --border-radius: 5px;
    --border-radius-corner: 5px;
}

.checkbox input:checked {
    --border-width: 12px;
}

.checkbox input:checked+svg {
    --tick-offset: 46.5px;
}

.checkbox input+svg {
    --dot-x: 14px;
    --dot-y: -14px;
    --dot-s: 1;
    --tick-offset: 20.5px;
    --tick-array: 16px;
    --tick-s: 1;
    --drop-s: 1;
}

.checkbox input+svg .tick {
    fill: none;
    stroke-width: 3px;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke: var(--c-active-inner);
    stroke-dasharray: var(--tick-array) 33px;
    stroke-dashoffset: var(--tick-offset);
    transform-origin: 10.5px 16px;
    transform: scale(var(--tick-s)) translateZ(0);
}

.checkbox input+svg .dot {
    transform-origin: 10.5px 15.5px;
    transform: translate(var(--dot-x), var(--dot-y)) scale(var(--dot-s)) translateZ(0);
}

.checkbox input+svg .drop {
    transform-origin: 25px -1px;
    transform: scale(var(--drop-s)) translateZ(0);
}

.switch {
    --input-width: 38px;
}

.switch input {
    --input-background: var(--c-default);
}

.switch input:checked {
    --input-background: var(--c-active);
}

.switch input:checked+svg {
    --default-s: 0;
    --default-x: 8px;
    --dot-s: 1;
    --dot-x: 0px;
}

.switch input+svg {
    --input-background: var(--c-default);
    --default-s: 1;
    --default-x: 0px;
    --dot-s: 0;
    --dot-x: -8px;
}

.switch .default {
    transform-origin: 12px 12px;
    transform: translateX(var(--default-x)) scale(var(--default-s)) translateZ(0);
}

.switch .dot {
    transform-origin: 26px 12px;
    transform: translateX(var(--dot-x)) scale(var(--dot-s)) translateZ(0);
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
    background-color: #fff;
    margin: 10% auto;
    padding: 24px;
    width: 80%;
}

.close {
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    position: absolute;
    top: 24px;
    right: 24px;
}

/* footer */
footer {
    width: 100%;
    background-color: #fff;
    margin-top: 8px;
    border-radius: 25px;
    padding: 32px 40px;
    margin-bottom: 20px;
}

.heading_footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
}

.heading_footer h2 {
    font-size: 32px;
    text-transform: uppercase;
    font-weight: 700;
}

.heading_footer a {
    font-weight: 600;
}

.footer_body label {
    font-size: 16px;
    font-weight: 500;
}

.input_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
}

.input_box input {
    border-radius: 12px;
    border: 1px solid #333;
    padding: 5px 16px;
    width: -webkit-fill-available;
    min-width: 10px;
}

.input_box .rewrite {
    background-color: #12806A;
    border-radius: 12px;
    border: none;
    padding: 10px 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    gap: 8px;
}

.input_box .download {
    background-color: #12806A;
    border-radius: 12px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    gap: 8px;
    height: 37px;
    white-space: nowrap;
}

.input_box .closes {
    background-color: #D20000;
    border-radius: 12px;
    border: none;
    padding: 11px 11px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer_body .col-md-4 {
    border-right: 2px solid #f6f6f6;
}

.footer_body .col-md-4:last-child {
    border-right: none;
}

.input_box:last-child {
    justify-content: flex-start;
}

/* ТАРИФЫ */
.price_box {
    border: 1px solid #767676;
    border-radius: 12px;
    padding: 24px 24px;
    height: 520px;
}

.price_box ul {
    padding-inline-start: 20px;
    list-style-image: url('../images/gal.svg');
}

.price_box ul>li {
    margin-bottom: 8px;
}

.price_box ul>li>p {
    font-size: 13px;
}

.price_box ul::marker {
    margin-top: 10px;
}

.price_box button {
    margin-top: 24px;
    background-color: #12806A;
    padding: 17px 28px;
    border: none;
    border-radius: 24px;
    color: #fff;
    font-weight: 500;
    font-size: 16px;
}

.price_box h3 {
    margin: 0;
    font-weight: 600;
    font-size: 20px;
}

.price_box h2 {
    margin: 0;
    font-size: 20px;
}

.parrent_switch:checked {
    background-color: #12806A;
}




/*CHECKBOX*/
/*:root {*/
/*    --c-active: #12806A;*/
/*    --c-active-inner: #FFFFFF;*/
/*    --c-default: #D2D6E9;*/
/*    --c-default-dark: #C7CBDF;*/
/*    --c-black: #1B1B22;*/
/*}*/

/*.radio,*/
/*.checkbox,*/
/*.switch {*/
/*    display: table;*/
/*    border-radius: var(--border-radius, 12px) var(--border-radius-corner, 12px) var(--border-radius, 12px) var(--border-radius, 12px);*/
/*    position: relative;*/
/*    input {*/
/*        appearance: none;*/
/*        outline: none;*/
/*        border: none;*/
/*        background: var(--input-background, none);*/
/*        display: block;*/
/*        cursor: pointer;*/
/*        margin: 0;*/
/*        padding: 0;*/
/*        border-radius: inherit;*/
/*        width: var(--input-width, 24px);*/
/*        height: var(--input-height, 24px);*/
/*    }*/
/*    svg {*/
/*        display: block;*/
/*        position: absolute;*/
/*        left: 0;*/
/*        right: 0;*/
/*        bottom: 0;*/
/*        top: 0;*/
/*        pointer-events: none;*/
/*        fill: var(--c-active-inner);*/
/*        transform: scale(1.01) translateZ(0);*/
/*    }*/
/*}*/

/*.radio,*/
/*.checkbox {*/
/*    input {*/
/*        --border-color: var(--c-default);*/
/*        --border-width: 2px;*/
/*        box-shadow: inset 0 0 0 var(--border-width) var(--border-color);*/
/*        &:checked {*/
/*            --border-color: var(--c-active);*/
/*        }*/
/*        &:not(:checked) {*/
/*            transition: box-shadow .25s;*/
/*            &:hover {*/
/*                --border-width: 3px;*/
/*                --border-color: var(--c-active);*/
/*            }*/
/*        }*/
/*    }*/
/*}*/

/*.radio {*/
/*    input {*/
/*        &:checked {*/
/*            --border-width: 6.75px;*/
/*        }*/
/*        & + svg {*/
/*            --top-y: 0;*/
/*            --dot-y: -17px;*/
/*            --drop-y: -14px;*/
/*            --top-s-x: 1.75;*/
/*            --top-s-y: 1;*/
/*            .top {*/
/*                transform-origin: 12px -12px;*/
/*                transform: translateY(var(--top-y)) scale(var(--top-s-x), var(--top-s-y)) translateZ(0);*/
/*            }*/
/*            .dot {*/
/*                transform: translateY(var(--dot-y)) translateZ(0);*/
/*            }*/
/*            .drop {*/
/*                transform: translateY(var(--drop-y)) translateZ(0);*/
/*            }*/
/*        }*/
/*    }*/
/*}*/

/*.checkbox {*/
/*    --border-radius: 5px;*/
/*    --border-radius-corner: 5px;*/
/*    input {*/
/*        &:checked {*/
/*            --border-width: 12px;*/
/*            & + svg {*/
/*                --tick-offset: 46.5px;*/
/*            }*/
/*        }*/
/*        & + svg {*/
/*            --dot-x: 14px;*/
/*            --dot-y: -14px;*/
/*            --dot-s: 1;*/
/*            --tick-offset: 20.5px;*/
/*            --tick-array: 16.5px;*/
/*            --tick-s: 1;*/
/*            --drop-s: 1;*/
/*            .tick {*/
/*                fill: none;*/
/*                stroke-width: 3px;*/
/*                stroke-linecap: round;*/
/*                stroke-linejoin: round;*/
/*                stroke: var(--c-active-inner);*/
/*                stroke-dasharray: var(--tick-array) 33px;*/
/*                stroke-dashoffset: var(--tick-offset);*/
/*                transform-origin: 10.5px 16px;*/
/*                transform: scale(var(--tick-s)) translateZ(0);*/
/*            }*/
/*            .dot {*/
/*                transform-origin: 10.5px 15.5px;*/
/*                transform: translate(var(--dot-x), var(--dot-y)) scale(var(--dot-s)) translateZ(0);*/
/*            }*/
/*            .drop {*/
/*                transform-origin: 25px -1px;*/
/*                transform: scale(var(--drop-s)) translateZ(0);*/
/*            }*/
/*        }*/
/*    }*/
/*}*/

/*.switch {*/
/*    --input-width: 38px;*/
/*    input {*/
/*        --input-background: var(--c-default);*/
/*        &:checked {*/
/*            --input-background: var(--c-active);*/
/*            & + svg {*/
/*                --default-s: 0;*/
/*                --default-x: 8px;*/
/*                --dot-s: 1;*/
/*                --dot-x: 0px;*/
/*            }*/
/*        }*/
/*        & + svg {*/
/*            --input-background: var(--c-default);*/
/*            --default-s: 1;*/
/*            --default-x: 0px;*/
/*            --dot-s: 0;*/
/*            --dot-x: -8px;*/
/*        }*/
/*    }*/
/*    .default {*/
/*        transform-origin: 12px 12px;*/
/*        transform: translateX(var(--default-x)) scale(var(--default-s)) translateZ(0);*/
/*    }*/
/*    .dot {*/
/*        transform-origin: 26px 12px;*/
/*        transform: translateX(var(--dot-x)) scale(var(--dot-s)) translateZ(0);*/
/*    }*/
/*}*/



/*CHECKBOX*/