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

a {
    text-decoration: none;
}

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%;
}
.disabled-link {
    pointer-events: none;
    color: gray!important; /* Вы можете настроить цвет или другие стили */
}
.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: 18px;
    color: #1C1C1C;
    margin: 0;
    font-weight: bold;
}

.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: -webkit-fill-available;
}

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



.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: 600;
}

.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;
    margin-top: 8px;
}

.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 28px;
    height: 520px;
}

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

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

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

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

.price_box button {
    margin: 24px 0;
    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: 24px;
}

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

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

.table_body .cell img {
    width: 20px;
    height: 18px;
}

@keyframes rotateAnimation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.rotate {
    animation: rotateAnimation 2s infinite linear;
    /* Анимация длится 2 секунды и повторяется бесконечно */
}

#modalAlertDatabase img {
    margin-bottom: 30px;
}

.tooltip {
    background-color: rgba(255, 255, 255, 0.9);
    color: black;
    padding: 5px 10px;
    border-radius: 4px;
    display: none;
    z-index: 100;
    top: -10px;
    left: 50%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

#modalPayment .modal-content {
    width: 491px;
    border-radius: 24px;
}

.payment_content .d-flex {
    justify-content: space-between;
    gap: 16px;
}

.payments_type {
    width: 33%;
    text-align: center;
    border: 1px solid #767676;
    border-radius: 12px;
    padding: 12px;
    cursor: pointer;
}

.payments_type p {
    font-size: 12px;
    margin: 0;
}

.other_price {
    margin: 0;
    font-weight: 500;
}

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

.options_4 li:nth-child(8)::before {
    display: none;
}

#save {
    padding: 0;
    height: 36px;
    width: 85%;
}

.about_entity ul {
    list-style: none;
    display: flex;
    gap: 16px;
    padding-inline-start: 0 !important;
    margin-bottom: 0;
}

.about_entity ul>li {
    display: flex;
    align-items: center;
    gap: 4px;
}

.about_entity ul>li>img {
    width: 20px
}

.warning_icon {
    width: 38px;
    text-align: center;
    height: 100%;
    display: flex !important;
    align-items: center;
    justify-content: center
}

.warning_icon img {
    width: 20px
}

.actions_btn {
    justify-content: space-evenly !important;
}

.actions_btn p {
    font-size: 20px;
    color: #767676 !important;
    font-weight: 800;
}

.actions_btn a {
    margin: 0 !important;
    padding: 0 !important;
    height: 100%;
    display: contents;
}

.jus-evenly {
    justify-content: space-evenly;
    align-items: center;
}

.jus-evenly h3 {
    width: 100%;
}

.copyright {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px 0;
}

.copyright p {
    margin: 0;
}

.copyright a {
    font-size: 14px;
    color: #333;
}

.copyright .linkss .circle {
    margin: 0px 5px;
    color: #ccc
}

.nav>.nav-links>.link>a.active {
    color: #12806A;
    /* Желаемый цвет для активного элемента */
}

.box_1 .discount {
    display: none !important;
}

.discount {
    position: absolute;
    top: 10px;
    right: -20px;
    background: #12806A;
    width: 80px;
    text-align: center;
    height: 20px;
    transform: rotate(45deg);
}

.discount p {
    margin: 0;
    color: #fff;
    font-weight: 600;
}



#amount_selected {
    display: none;
}

.box_checkbox {
    display: none;
}

.tooltip_copy_link {
    position: absolute;
    top: -10px;
    background: #ececec;
    padding: 2px 9px;
    border-radius: 5px;
    color: #000;
    /* box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); */
}

.cell {
    position: relative;
}

/* Preloader #1 */

.preloader-dots {
    width: 80px;
    text-align: center;
}

.preloader-dots .dot {
    display: inline-block;
    background: #666;
    height: 8px;
    width: 8px;
    opacity: 0.3;
    border-radius: 50%;
    animation: moveit 1.8s infinite;
}

.dot:nth-child(2) {
    animation-delay: .15s;
}

.dot:nth-child(3) {
    animation-delay: .3s;
}

.dot:nth-child(4) {
    animation-delay: .45s;
}

.dot:nth-child(5) {
    animation-delay: .6s;
}

@keyframes moveit {
    0% {
        transform: translateY(0px);
    }

    35% {
        transform: translateY(0px);
        opacity: 0.3;
    }

    50% {
        transform: translateY(-10px);
        opacity: 0.8;
    }

    70% {
        transform: translateY(3px);
        opacity: 0.8;
    }

    85% {
        transform: translateY(-3px);
    }
}

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

.close {
    position: absolute;
    top: 12px;
    right: 20px;
}

#modal_info h3 {
    margin: 0;
}

.primary_btn {
    padding: 4.5px 18px;
    background-color: #12806A;
    border-radius: 12px;
    border: none;
    color: #fff;
    border: 1px solid #12806A;
    font-size: 14px;
    white-space: nowrap;
    cursor: pointer;
}

.primary_btn:hover {
    background-color: #0f6453;
}

.secondary_btn {
    border: 1px solid #12806A;
    padding: 4.5px 18px;
    border-radius: 12px;
    color: #12806A;
    font-size: 14px;
    background-color: transparent;
    transition: background-color 0.3s, color 0.3s;
}

.secondary_btn:hover {
    border: 1px solid #12806A;
    padding: 4.5px 18px;
    background-color: #12806A;
    color: #fff;
}

.full_btn {
    border-radius: 12px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    gap: 8px;
    height: 37px;
    white-space: nowrap;
    width: 100%;
}

.full_btn:hover {
    background-color: #0f6453;
}

.modal_header .input_group {
    margin: 12px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 50%;
}

.modal_header .input_group input {
    border-radius: 12px;
    padding: 4px 16px;
    width: -webkit-fill-available;
    border: 1px solid #333;
    font-size: 14px;
}

.selected_button {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
}

.modal_header .selected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 8px;
    border-bottom: 1px solid #F6F6F6;
}

.modal_header .selected_info {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 8px;
    width: 30%;
}

.modal_header .selected_info p {
    margin: 0;
}

.modal_header .selected_info label {
    margin: 0;
}

.modal_footer {
    padding-top: 10px;
}

.modal_footer p {
    font-weight: 600;
    margin-bottom: 0;
}

.modal_body {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px 0;
    flex-direction: column;
}

.modal_body .box_checkbox {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 32.5%;
}

.modal_body .box_checkbox label {
    margin: 0;
}

.modal_body .box_checkbox p {
    margin: 0;
    font-size: 12px;
}

.date {
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    width: 50%;
}

.date input {
    border: 1px solid #767676;
    border-radius: 12px;
    width: 100%;
    padding: 4px 16px;
    font-size: 14px;

}

.account_info .tarif button {
    height: auto;
}

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

/* Loader 4 */
.loader-4 {
    height: 32px;
    width: 32px;
}

.loader-4::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 12px;
    height: 12px;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    background: #ccc;
    border-radius: 50%;
    -webkit-animation: loader-4-1 2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
    animation: loader-4-1 2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
}

@-webkit-keyframes loader-4-1 {
    0% {
        -webkit-transform: scale(0);
        opacity: 0;
    }

    50% {
        -webkit-transform: scale(1);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(0);
        opacity: 0;
    }
}

@keyframes loader-4-1 {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    50% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(0);
        opacity: 0;
    }
}

.loader-4 span {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    height: 32px;
    width: 32px;
    -webkit-animation: loader-4-2 2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
    animation: loader-4-2 2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
}

@-webkit-keyframes loader-4-2 {
    0% {
        -webkit-transform: rotate(0deg);
    }

    50% {
        -webkit-transform: rotate(180deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes loader-4-2 {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(180deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loader-4 span::before,
.loader-4 span::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    height: 12px;
    width: 12px;
    background: #ccc;
    border-radius: 50%;
    -webkit-animation: loader-4-3 2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
    animation: loader-4-3 2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
}

@-webkit-keyframes loader-4-3 {
    0% {
        -webkit-transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        -webkit-transform: translate3d(-16px, 0, 0) scale(.5);
    }

    100% {
        -webkit-transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes loader-4-3 {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(-16px, 0, 0) scale(.5);
    }

    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
}

.loader-4 span::after {
    -webkit-animation: loader-4-4 2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
    animation: loader-4-4 2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
}

@-webkit-keyframes loader-4-4 {
    0% {
        -webkit-transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        -webkit-transform: translate3d(16px, 0, 0) scale(.5);
    }

    100% {
        -webkit-transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes loader-4-4 {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(16px, 0, 0) scale(.5);
    }

    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
}


.checkbox input {
    width: var(--input-width, 16px);
    height: var(--input-height, 16px);
}

.modal-content {
    margin: 2% auto;
}

#modal_info h3 {
    font-size: 1.25rem;
}

.box_switch_one {
    justify-content: end;
}

.box_switch {
    justify-content: center;
}

.count_records {
    font-size: 14px;
    font-weight: 500;
}

.entries {
    font-size: 14px;
    font-weight: 500;
}

.font_style {
    font-size: 14px;
    font-weight: 500;
}

#modalAlertTwo .modal-content {
    width: 536px !important;
    border-radius: 24px;
}

#modalAlertTwo .content {
    padding: 0 !important;
}

.l_btn {
    background-color: #12806A;
    border-radius: 12px;
    color: #fff;
    text-decoration: none;
    width: 100%;
    display: flex;
    height: 54px;
    justify-content: center;
    align-items: center;
}

.l_btn:hover {
    color: #fff !important;
}

#modalAlertTwo img,
h3,
p {
    margin-bottom: 16px;
}

#modalAlert .modal-content {
    width: 536px !important;
    border-radius: 24px;
}

#modalAlert .content {
    padding: 0 !important;
}

#modalAlert img,
h3,
p {
    margin-bottom: 16px;
}

.info_box {
    display: flex;
    align-items: center;
    gap: 8px;
}

.copy_token {
    height: 36px;
    padding: 0px 21px;
}

a[data-tooltip].top:before,
a[data-tooltip].top:after {
    transform: translateY(10px);

}

a[data-tooltip].top:hover:after,
a[data-tooltip].top:hover:before {
    transform: translateY(0px);
}

a[data-tooltip] {
    position: relative;
}

a[data-tooltip]:after {
    box-shadow: none !important;
}

a[data-tooltip]:after,
a[data-tooltip]:before {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    transition: transform 200ms ease, opacity 200ms;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    z-index: 99;

}

a[data-tooltip]:before {
    content: attr(data-tooltip);
    background: #F6F6F6;
    color: #000;
    font-size: 8px;
    font-weight: bold;
    padding: 12px 20px;
    border-radius: 12px;
    width: 280px;
    text-decoration: none;

}

a[data-tooltip]:after {
    width: 0;
    height: 0;
    border: 6px solid transparent;
    content: "";
}

a[data-tooltip]:hover:after,
a[data-tooltip]:hover:before {
    visibility: visible;
    opacity: 1;
    transform: translateY(0px);
}

a[data-tooltip][data-position=top]:before {
    bottom: 100%;
    left: -130%;
    margin-bottom: 10px;
    font-size: 11px;
}

a[data-tooltip][data-position=top]:after {
    border-top-color: #F6F6F6;
    border-bottom: none;
    bottom: 101%;
    left: calc(50% - 6px);
    margin-bottom: 4px;
}


button[data-tooltip].top:before,
button[data-tooltip].top:after {
    transform: translateY(10px);
}

button[data-tooltip].top:hover:after,
button[data-tooltip].top:hover:before {
    transform: translateY(0px);
}

button[data-tooltip] {
    position: relative;
}

button[data-tooltip]:after {
    box-shadow: none !important;
}

button[data-tooltip]:after,
button[data-tooltip]:before {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    transition: transform 200ms ease, opacity 200ms;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    z-index: 99;
}

button[data-tooltip]:before {
    content: attr(data-tooltip);
    background: #F6F6F6;
    color: #000;
    font-size: 8px;
    font-weight: bold;
    padding: 12px 20px;
    border-radius: 12px;
    white-space: nowrap;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
}

button[data-tooltip]:after {
    width: 0;
    height: 0;
    border: 6px solid transparent;
    content: "";
}

button[data-tooltip]:hover:after,
button[data-tooltip]:hover:before {
    visibility: visible;
    opacity: 0.85;
    transform: translateY(0px);
}

button[data-tooltip][data-position=top]:before {
    bottom: 100%;
    left: 0%;
    margin-bottom: 10px;
    font-size: 11px;
}

button[data-tooltip][data-position=top]:after {
    border-top-color: #F6F6F6;
    border-bottom: none;
    bottom: 101%;
    left: calc(50% - 6px);
    margin-bottom: 4px;
}

a.copy_btns[data-tooltip].top:before {
    transform: translateY(10px);
}


a.copy_btns[data-tooltip].top:hover:before {
    transform: translateY(0px);
}

a.copy_btns[data-tooltip] {
    position: relative;
}



a.copy_btns[data-tooltip]:before {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    transition: transform 200ms ease, opacity 200ms;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    z-index: 99;
}

a.copy_btns[data-tooltip]:before {
    content: attr(data-tooltip);
    background: #F6F6F6;
    color: #000;
    font-size: 8px;
    font-weight: bold;
    padding: 12px 20px;
    border-radius: 12px;
    width: fit-content;
    white-space: nowrap;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
}

a.copy_btns[data-tooltip]:after {
    width: 0;
    height: 0;
    border: 6px solid transparent;
    content: "";
}

a.copy_btns[data-tooltip]:hover:after,
a.copy_btns[data-tooltip]:hover:before {
    visibility: visible;
    opacity: 0.85;
    transform: translateY(0px);
}

a.copy_btns[data-tooltip][data-position=top]:before {
    bottom: 66%;
    left: -36%;
    margin-bottom: 10px;
    font-size: 11px;
}




/*  */





.update_status[data-tooltip][data-position=top]:before {
    bottom: 100%;
    left: 31%;
    margin-bottom: 10px;
    font-size: 11px;
    width: 120px;
    text-align: center;
}

.update_status[data-tooltip][data-position=top]:after {
    border-top-color: #F6F6F6;
    border-bottom: none;
    bottom: 100%;
    left: calc(58% - 0px);
    margin-bottom: 4px;
    text-align: center;
}


#warning_icon[data-tooltip][data-position=top]:before {
    bottom: 100%;
    left: 53%;
    margin-bottom: 10px;
    font-size: 11px;
    width: 120px;
    text-align: center;
}

#warning_icon[data-tooltip][data-position=top]:after {
    border-top-color: #F6F6F6;
    border-bottom: none;
    bottom: 100%;
    left: calc(79% - 0px);
    margin-bottom: 4px;
    text-align: center;
}








/* ТАРИФЫ */

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

}

.title_block {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px
}

.title_block h2 {
    margin: 0;
}

.type_payment {
    border: 1px solid #767676;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
}

.type_payment a {
    padding: 4px 16px;
    color: #767676;
    border-radius: 8px;
}

.type_payment a.active {
    background-color: #12806A;
    color: #fff;
}

.type_payment a.active:hover {
    background-color: #0f6453;
}

.type_payment a:hover {
    text-decoration: none;
}

.clicker {
    cursor: pointer;
}

.clicker:hover {
    background-color: #0f6453;
}

#amount_selected {
    padding: 8px 4px;
    border-radius: 12px;
}

.price_box {
    position: relative;
    overflow: hidden;
    height: auto !important;
}

.price_box h2 {
    font-weight: 700;
}

.price_box h3 {
    font-weight: 400;
    margin-top: 4px;
}

.price_box ul>li>p>span {
    font-weight: 700;
}

.price_box ul>li>p {
    margin: 0;
}

.price_box ul li::before {
    content: "";
    /* Здесь нет контента, потому что мы используем изображение через background-image */
    background-image: url('https://toolpack.masnaget.digital/storage/connector/images/gal.svg');
    background-repeat: no-repeat;
    background-position: left;
    display: inline-block;
    /* Необходимо для отображения псевдоэлемента */
    width: 16px;
    height: 16px;
    padding-right: 26px;
    /* Пример: задание отступа между псевдоэлементом и текстом */
}

.price_box ul {
    padding-inline-start: 0;
}

.price_box ul>li {
    display: flex;
    align-items: center;
}

.preloader.full-width {
    width: 100%;
    height: 120px;
    margin-left: 0px;
    margin-right: 0px;
}

.preloader {
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50%;
    width: 45%;
    margin: 5%;

    position: relative;
}

/* preloader pacman */

.preloader-pacman .dot {
    display: inline-block;
    background: #666;
    height: 5px;
    width: 5px;
    margin-right: 20px;
    opacity: 0.7;
    border-radius: 50%;
    animation: fade-out 14s linear infinite;
}

.preloader-pacman .pacman {
    display: inline-block;
    background: #666;
    height: 20px;
    vertical-align: bottom;
    width: 20px;
    margin-right: 20px;
    opacity: 1;
    border-radius: 50%;
    position: relative;
    animation: move-forward 14s linear infinite;
    transform: translateX(-40px);
}

.preloader-pacman .dot:nth-child(1) {
    animation-delay: .4s;
}

.preloader-pacman .dot:nth-child(2) {
    animation-delay: .8s;
}

.preloader-pacman .dot:nth-child(3) {
    animation-delay: 1.2s;
}

.preloader-pacman .dot:nth-child(4) {
    animation-delay: 1.6s;
}

.preloader-pacman .dot:nth-child(5) {
    animation-delay: 2.0s;
}

.preloader-pacman .dot:nth-child(6) {
    animation-delay: 2.4s;
}

.preloader-pacman .dot:nth-child(7) {
    animation-delay: 2.8s;
}

.preloader-pacman .dot:nth-child(8) {
    animation-delay: 3.2s;
}

.preloader-pacman .dot:nth-child(9) {
    animation-delay: 3.6s;
}

.preloader-pacman .dot:nth-child(10) {
    animation-delay: 4.0s;
}

.preloader-pacman .dot:nth-child(11) {
    animation-delay: 4.4s;
}

.preloader-pacman .dot:nth-child(12) {
    animation-delay: 4.8s;
}

.preloader-pacman .dot:nth-child(13) {
    animation-delay: 5.2s;
}

.preloader-pacman .dot:nth-child(14) {
    animation-delay: 5.6s;
}

.preloader-pacman .dot:nth-child(15) {
    animation-delay: 6.0s;
}

.preloader-pacman .dot:nth-child(16) {
    animation-delay: 6.4s;
}

.preloader-pacman .dot:nth-child(17) {
    animation-delay: 6.8s;
}

.preloader-pacman .pacman:before {
    content: '';
    display: inline-block;
    background: transparent;
    vertical-align: bottom;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    right: 0px;
    border-right: 10px solid #fff;
    opacity: 1;
    position: absolute;
    animation: eat .4s infinite;
}

.preloader-pacman .ghost {
    height: 25px;
    width: 25px;
    background: #669;
    top: -22px;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    position: relative;
    transform: translateX(550px);
    animation: move-back 14s linear infinite;
    animation-delay: 7s;
    opacity: 0;
}

.preloader-pacman .ghost:before {
    height: 5px;
    content: '';
    width: 3px;
    background: #fff;
    top: 7px;
    left: 7px;
    z-index: 10;
    position: absolute;

}

.preloader-pacman .ghost:after {
    height: 5px;
    content: '';
    width: 3px;
    background: #fff;
    top: 7px;
    right: 7px;
    z-index: 10;
    position: absolute;
}

@keyframes eat {
    50% {
        transform: translateX(10px) scale(0.1)
    }
}

@keyframes move-back {
    3% {
        opacity: 1
    }

    35% {
        opacity: 1
    }

    49% {
        opacity: 0
    }

    50% {
        transform: translateX(0px);
    }
}

@keyframes move-forward {
    50% {
        transform: translateX(500px);
    }

    50.1% {
        transform: translateX(500px) scaleX(-1);
        opacity: 1;
    }

    100% {
        transform: translateX(-40px) scaleX(-1);
    }
}

@keyframes fade-out {
    0% {
        opacity: 0;
    }

    40% {
        opacity: 0;
    }

    89.99% {
        opacity: 0;
    }

    90% {
        opacity: 0.5;
    }
}



/* DB SWITCH */


.modal_footer {
    display: flex;
    justify-content: space-between;
    align-items: end;
    width: 100%;
    gap: 16px;
}


.period_inputs_box {
    width: 100%;
    box-sizing: border-box;
    /* учитываем padding и border внутренних блоков */
}

.db_sync_box {
    width: 100%;
}

.date {
    width: 50%;
}


.db_time_utc {
    color: rgba(118, 118, 118, 1);
    font-size: 14px;
    font-weight: 500;


}


#save {
    width: 180px;
    padding: 8px 24px 8px 24px;
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    margin-bottom: 8px;
}



#date_from,
#date_to {
    height: 36px;
}




.modal_footer_inputs {
    display: flex;
    width: 100%;
}

.modal-title-box {
    display: flex;
    gap: 8px;
    align-items: center;
}

.db_sync_switch_input_box {
    width: 100%;

}

.pad-4 {
    padding: 4px 0;
    gap: 16px;
}

.db_sync_switch_input {
    width: 100%;
    border: 1px solid rgba(118, 118, 118, 1);
    border-radius: 12px;
    height: 36px;
    padding: 4px 16px;
    padding-right: 40px;
    cursor: pointer;
}

.db_sync_switch_label {
    margin-bottom: 0;
}

.db_sync_switch_input-image {
    cursor: pointer;
    position: absolute;
    margin-top: 8px;
    transform: translateX(-35px);

    transition: opacity ease-in .1s;

}

.db_sync_switch_input-image:hover {
    opacity: .8;
}





/* DATABASE PAGE */

.db_settings-header {
    display: flex;
    justify-content: space-between;
}

.db_settings-title {
    font-weight: 600;
    font-size: 32px;
    text-transform: uppercase;
}

.db_settings-warning {
    display: flex;
    background-color: rgba(242, 221, 30, 0.2);
    min-height: 64px;

    border-radius: 12px;

    align-items: center;

    margin-top: 20px;



}

.db_settings-warning:before {
    content: "";
    position: absolute;
    background-color: rgba(242, 221, 30, 1);
    min-height: 104px;

    width: 12px;


    border-radius: 12px 0 0 12px;
}

.db_settings-warning_box {
    display: flex;
    margin-left: 32px;
    align-items: flex-start;
    padding: 10px 10px 10px 0px;
}

.db_settings-warning_icon {
    margin-right: 15px;
}


.db_settings-warning_text {
    font-size: 14px;
    font-weight: 500;
    margin: 0;
}

.db_settings-warning_text span {
    font-weight: 600;
}

.db_setting {
    display: flex;
    margin-top: 30px;
    height: 270px;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 20px;
}



.button-primary:hover {
    background-color: #0f6453;
}

.button_secondary {
    border: 2px solid #12806A;
    background-color: transparent;
    color: #12806A;
    margin-right: 10px;
}

.button_secondary:hover {
    background: #12806A;
    color: white;
}

.button_danger {
    background-color: transparent !important;
    border: 2px solid rgba(210, 0, 0, 1) !important;
    color: rgba(210, 0, 0, 1) !important;
}

.button_danger:hover {
    background-color: rgba(210, 0, 0, 1) !important;
    color: white !important;
}

.db_settings-buttons .button_settings-container {
    display: flex;
    position: relative;
}

#alert {
    display: none;
    position: absolute;
    top: -34px;
    right: 0;

}

.db_settings-button.button_disconnect {
    order: -1;
    /* Помещаем первую кнопку в начало */
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.7);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes fadeOutOpacity {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fadeOut {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.5);
    }
}

@keyframes fadeInOpacity {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.db_settings-popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    border: 1px solid #ccc;
    z-index: 600;

    width: 500px;

    border-radius: 24px;

    animation: fadeIn 0.3s ease forwards;
    /* Анимация появления */


}

.db_settings-popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* Полупрозрачный чёрный цвет */
    backdrop-filter: blur(13px);
    /* Размытие */
    -webkit-backdrop-filter: blur(13px);
    /* Для совместимости с браузерами на базе WebKit */
    z-index: 500;
    animation: fadeInOpacity 0.3s ease forwards;
    /* Анимация появления */

}

.db_settings-popup-box {
    text-align: center;

    padding: 10px;
}

.db_settings-popup-box p {
    font-size: 14px;
    font-weight: 500;
}

.db_settings-popup-box h3 {
    font-size: 24px;
    font-weight: 600;

    margin-top: 15px;
}

.db_settings-popup-disconnect {
    height: 55px;
}

.db_settings-popup-buttons {
    display: flex;
    gap: 15px;

    margin-bottom: 15px;
}

.db_settings-popup-cancel {
    height: 55px;
}

.db_settings-popup-img {
    display: flex;
    margin: 0 auto;
}


.period_inputs_box {
    width: 72% !important;
}

.date {
    justify-content: normal;
}

.db_sync_switch_input {}

.db_settings-input input,
select {
    background-color: white;
    border-radius: 12px;
    padding: 8px 16px 8px 16px;
    border: 1px solid rgba(118, 118, 118, 1);
    width: 100%;

}

.db_settings-input select {
    padding: 10px 18px 10px 18px;
    appearance: none;
    background: url('https://toolpack.masnaget.digital/storage/connector/images/chevron_down.svg') no-repeat right;
    background-position-x: calc(100% - 16px);
}

.db_settings-input_password {
    width: 100%;
}

.db_settings-input_password_img {
    position: absolute;
    transform: translate(-40px, 10px);
    cursor: pointer;
    transition: opacity ease-in .1s;
}

.db_settings-input_password_img:hover {
    opacity: .66;
}

.db_settings-buttons {
    display: flex;
    justify-content: space-between;
    text-align: right;
    margin-top: 50px;
}

.db_settings-button {
    width: 300px;
    background-color: #12806A;
    transition: all ease-in-out .2s;
    border-radius: 12px;

    border: none;

    height: 40px;

    color: white;

    font-weight: 600;

    cursor: pointer;

}

.button_save:hover {
    background-color: #0f6453;
}

.button_check {
    border: 2px solid #12806A;
    background-color: transparent;
    color: #12806A;
    margin-right: 5px;
}

.button_check:hover {
    background: #12806A;
    color: white;
}

/* --- DATABASE PAGE --- */
#db_settings-status {
    display: none;
    padding: 8px 20px;
    border-radius: 12px;
    height: fit-content;
}

#db_settings-status p {
    margin: 0;
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 16px;
}

#db_settings-status p img {
    margin-left: 5px;
    width: 20px;
}

/* --- DB SWITCH --- */
.info_cron_db {
    padding-inline-start: 0;
    border: 1px solid #000;
    border-radius: 12px;
    margin-top: 28px;
}

.info_cron_db li:first-child {
    font-weight: 700;
}

.info_cron_db li:last-child {
    border-bottom: none;
}

.info_cron_db li {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    height: 60px;
    padding: 0 12px;
    border-bottom: 1px solid #ccc;
}

.info_cron_db li>div:first-child {
    width: 100%;
}

.info_cron_db li>div:last-child {
    width: 100%;
}


.time-picker {
    display: none;
    position: absolute;
    background: white;
    border: 1px solid #ccc;
    padding: 5px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 9999;
    border-radius: 12px;
    /* Радиус границы */
    column-count: 4;
    /* Количество колонок */
    z-index: 1000;
    /* To ensure dropdown appears above other content */
    width: auto;

    padding: 8px 16px 8px 16px;
    box-sizing: border-box;
    /* Учитываем границы и отступы внутри ширины элемента */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    margin-top: 5px;
}

.time-picker label {
    display: block;
    margin-bottom: 5px;
}

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

.time_input button {
    width: 165px;
}