@font-face {
    font-family: "Montserrat";
    src: url("../fonts/Montserrat/static/Montserrat-Regular.ttf");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Montserrat";
    src: url("../fonts/Montserrat/static/Montserrat-Medium.ttf");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Montserrat";
    src: url("../fonts/Montserrat/static/Montserrat-SemiBold.ttf");
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: "Montserrat";
    src: url("../fonts/Montserrat/static/Montserrat-Bold.ttf");
    font-weight: 700;
    font-style: normal;
}

* {
    font-family: "Montserrat", sans-serif;
}

body {
    min-width: 325px;
}

@media (max-width:375px) {
    .modal {
        width: 100%;
        padding-right: 0 !important;
    }

    .modal-backdrop {
        width: 100%;
        height: 100%;
    }
}

.modal-content {
    border: none !important;
}

.toast {
    margin-bottom: 16px !important;

    @media (max-width:575px) {
        margin-bottom: 10px !important;
    }
}

.section-title {
    font-weight: 700;
    font-size: clamp(32px, 6vw, 36px);
    margin-bottom: 0;
}

.form-control {
    background-color: #f4f4f4;
    font-size: 16px;
    border-radius: 10px;
    border: 1px solid #dcdcdc;
    width: 100%;
    box-sizing: border-box;
}

.form-control:focus {
    box-sizing: border-box;
    /* border: 1px solid #80d7d3 !important; */
    box-shadow: none !important;
}

.error-input {
    outline: 2px solid red;
    outline-offset: -2px;
}

.green-link {
    color: #80d7d3;
    text-decoration: none;
}

.green-link:hover {
    color: #38c4bd;
}

.modal .animation-height {
    position: absolute;
    display: block !important;
    opacity: 0;
    z-index: -5;
    height: 0 !important;
    max-height: 0 !important;
}

.modal .animation-height div,
.modal .animation-height label,
.modal .animation-height form,
.modal .animation-height p,
.modal .animation-height span,
.modal .animation-height h1,
.modal .animation-height h2,
.modal .animation-height h3,
.modal .animation-height h4,
.modal .animation-height h5,
.modal .animation-height h6,
.modal .animation-height a,
.modal .animation-height button,
.modal .animation-height input,
.modal .animation-height textarea,
.modal .animation-height select,
.modal .animation-height option {
    height: 0 !important;
    max-height: 0 !important;
}

.amo-button-holder {
    z-index: 1000 !important;
}

.footer_logo {
    width: 86px;

    @media (min-width:992px) {
        width: 148px;
    }
}

.footer-contacts {
    display: flex;
    flex-direction: column;
    gap: 6px; 
}

.footer-rosreestr {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 20px
}

.footer-rosreestr-link {
    display: block;
    text-decoration: none !important;
    color: rgba(108, 117, 125, 1) !important;
    cursor: pointer;
    width: fit-content;
}

.footer-rosreestr-logo {
    width: 110px;
    height: 25px;
    vertical-align: baseline !important;
}

.footer-rosreestr-text {
    font-size: 10px;
    font-weight: 400;
    margin: 0;
    color: rgba(108, 117, 125, 1);
    max-width: 276px;
}

.footer-divider {
    border: none;
    border-top: 1px solid #EBEFFF;
    margin: 30px 0;;
    opacity: 1;
}

.footer-address {
    margin: 0; 
    line-height: 1.5; 
}

.footer_utf {
    margin-left: 5px;
    width: 73px;
}

.footer_utf_wrapper {
    margin-left: auto;
}

.text-secondary {
    color: rgba(108, 117, 125, 1);
}

.text-secondary:hover .footer_utf {
    opacity: 0.7;
}

.error-tel-validation,
.error-verify-tel,
.error-verify-email,
.error-email-validation,
.error-promo-code-verify,
.password-check-error,
.password-validate-error,
.activation-code-error {
    position: relative;
}

.error-tel-validation input,
.error-verify-tel input,
.error-verify-email input,
.error-email-validation input,
.error-null-text input,
.error-promo-code-verify input,
.password-check-error input,
.password-validate-error input,
.activation-code-error input {
    border: red 1px solid;
}

.activation-code-error::after {
    content: "Сертификат не найден";
    position: absolute;
    font-size: 0.7rem;
    bottom: -18px;
    color: red;
}

.error-tel-validation::after {
    content: "Введите корректный номер телефона";
    position: absolute;
    font-size: 0.7rem;
    bottom: -18px;
    color: red;
}

.error-promo-code-verify::after {
    content: "промокод не действителен";
    position: absolute;
    font-size: 0.7rem;
    bottom: -18px;
    color: red;
}

.error-email-validation::after {
    content: "Введите корректный адрес электронной почты";
    position: absolute;
    font-size: 0.7rem;
    bottom: -18px;
    color: red;
}

.error-verify-tel::after {
    content: "Номер телефона уже занят";
    position: absolute;
    font-size: 0.7rem;
    bottom: -20px;
    color: red;
}



.error-verify-email::after {
    content: "Почта уже занята";
    position: absolute;
    font-size: 0.7rem;
    bottom: -20px;
    color: red;
}

.error-email-validation::after {
    content: "Введите корректную почту";
    position: absolute;
    font-size: 0.7rem;
    bottom: -20px;
    left: 0;
    color: red;
}

.error-email-verification::after {
    content: "Эта почта уже занята";
    position: absolute;
    font-size: 0.7rem;
    left: 0;
    bottom: -20px;
    color: red;
}

.password-check-error::after {
    content: "Пароли не совпадают";
    position: absolute;
    font-size: 0.7rem;
    bottom: -20px;
    left: 0;
    color: red;
}

.password-validate-error::after {
    content: "Ненадежный пароль";
    position: absolute;
    font-size: 0.7rem;
    bottom: -20px;
    left: 0;
    color: red;
}

.error-tel-validation,
.error-tel-busy,
.error-verify-tel,
.error-verify-email,
.error-russian-email,
.error-email-validation,
.error-email-busy,
.error-promo-code-verify,
.password-check-error,
.password-validate-error,
.activation-code-error {
    position: relative;
}

.error-tel-validation input,
.error-tel-busy input,
.error-verify-tel input,
.error-verify-email input,
.error-russian-email input,
.error-email-validation input,
.error-email-busy input,
.error-promo-code-verify input,
.password-check-error input,
.password-validate-error input,
.activation-code-error input {
    border: red 1px solid;
}

.activation-code-error::after {
    content: "Сертификат не найден";
    position: absolute;
    font-size: 0.7rem;
    bottom: -18px;
    color: red;
}

.error-tel-busy::after {
    content: "Номер телефона уже используется";
    position: relative;
    font-size: 0.7rem;
    bottom: 0px;
    color: red;
}

.error-tel-validation::after {
    content: "Введите корректный номер телефона";
    position: relative;
    font-size: 0.7rem;
    bottom: 0px;
    color: red;
}

.error-null-text::after {
    content: "Заполните поле";
    position: relative;
    font-size: 0.7rem;
    bottom: 0px;
    color: red;
}

.error-promo-code-verify::after {
    content: "Возможно промокод введен неверно или его срок действия истек";
    position: absolute;
    font-size: 0.7rem;
    bottom: -18px;
    color: red;
}

.error-email-validation::after {
    content: "Введите корректный адрес электронной почты";
    position: relative;
    font-size: 0.7rem;
    bottom: 0px;
    color: red;
}

.error-verify-tel::after {
    content: "Номер телефона уже занят";
    position: relative;
    font-size: 0.7rem;
    bottom: 0px;
    color: red;
}

.error-verify-email::after {
    content: "Почта уже занята";
    position: relative;
    font-size: 0.7rem;
    bottom: 0px;
    color: red;
}

.error-russian-email {
    line-height: 1;
}

.error-russian-email::after {
    content: "Адреса электронной почты в доменной зоне .com не поддерживаются. Укажите почту в зоне .ru.";
    position: relative;
    font-size: 0.7rem;
    bottom: 0px;
    color: red;
    margin: 0;
}

.error-email-validation::after {
    content: "Введите корректную почту";
    position: relative;
    font-size: 0.7rem;
    bottom: 0px;
    left: 0;
    color: red;
}

.input-files {
    display: none;
}

.error-email-busy::after {
    content: "Почта уже используется";
    position: relative;
    font-size: 0.7rem;
    bottom: 0px;
    left: 0;
    color: red;
}

.error-email-verification::after {
    content: "Эта почта уже занята";
    position: relative;
    font-size: 0.7rem;
    left: 0;
    bottom: 0px;
    color: red;
}

.password-check-error::after {
    content: "Пароли не совпадают";
    position: absolute;
    font-size: 0.7rem;
    bottom: -20px;
    left: 0;
    color: red;
}

.password-validate-error::after {
    content: "Ненадежный пароль";
    position: absolute;
    font-size: 0.7rem;
    bottom: -20px;
    left: 0;
    color: red;
}

.sort-arrow {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 5px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    vertical-align: middle;
}

.datepicker-trigger {
    position: absolute;
    background-color: transparent !important;
    right: 10px;
    padding: 0 !important;
    border: none !important;
    cursor: pointer;
    top: 20px;
}


.bi.bi-calendar::before {
    content: "";
    display: inline-block;
    background-image: url("../images/document/calendar.svg");
    width: 20px;
    height: 20px;
    background-position: center;
    background-repeat: no-repeat;
}

.sort-arrow_up {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-caret-up-fill' viewBox='0 0 16 16'%3E%3Cpath d='m7.247 4.86-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z'/%3E%3C/svg%3E");
}

.sort-arrow_down {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-caret-down-fill' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
}

.course-page-background {
    background-color: rgba(246, 247, 254, 1);
}

.autoschool-container {
    display: grid;
    grid-template-columns: 310px calc(100% - 330px);
    gap: 20px;
    margin-top: 20px;
    margin-bottom: 50px;
}

@media (max-width: 991px) {
    .autoschool-container {
        grid-template-columns: 100%;
    }

    .course-page-background#lesson-background {
        background-color: rgba(255, 255, 255, 1);
    }

    .footer-rosreestr {
        margin-top: 15px;
        margin-bottom: 18px;
    }

    .footer-separator {
        margin: 0 0 18px 0 !important;
    }

}


@media (max-width: 575px) {
    .error-promo-code-verify::after {
        bottom: -28px;
        line-height: 1.2;
    }

    .footer-mobile-links {
        display: flex;
        flex-direction: column;
    }
}