@font-face {
    font-family: 'Rubik';
    src: url('../fonts/Rubik-Variable/Rubik-Variable.woff2') format('woff2');
    font-weight: 100 1000;
    font-optical-sizing: auto;
    font-stretch: 0% 200%;
    font-style: normal;
    font-display: swap;
}

.common-modal-window-form {

    /* максимальная ширина модального окна */
    --common-modal-window--max-width: 1200px;
    --common-modal-window--width: 100%;


    /* фиксированная высота модального окна */
    --common-modal-window__content--height: 92vh;

    /* --common-modal-window__header--max-height: auto; */
    --common-modal-window__header--max-height: 250px;
    /* максимальная высота заголовка модального окна */

    --common-modal-window__body--scroll: auto;
    /* полоса прокрутки внутри тела окна */

    /* размер шрифта */
    --common-modal-window__input--font-family: "Rubik";

    /* max-width: var(--common-modal-window--max-width); */
    /* width: var(--common-modal-window--width); */

}

/* ! Сброс настроек стилей для модального окна начало */
/* .common-modal-window-form img {
    all: initial;
} */

.common-modal-window-form b {
    font-family: var(--common-modal-window__input--font-family);
    font-weight: 500;
}

/* ! Сброс настроек стилей для модального окна конец */

.common-modal-window-form__wrapper * {
    box-sizing: border-box;
    font-family: "Rubik" !important;
}

.common-modal-window-form__wrapper {
    --common-modal-window-form__container--max-width: 1200px;

    /* семейства шрифтов начало */
    --font-family-rubik: "Rubik" !important;
    /* семейства шрифтов конец */

    /* цвета начало */

    /* цвета шрифтов начало */
    --common-modal-window-form__font-color-white-1: #ffffff;
    --common-modal-window-form__font-color-black-1: #000000;
    --common-modal-window-form__font-color-blue-1: #43aaff;


    /* цвета шрифтов конец */

    /* цвета фонов начало */


    /* цвета фонов конец */

    /* цвета конец */

    font-family: var(--font-family-rubik);
    font-weight: 300;
    line-height: normal;
    margin: 0 auto;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    /* margin-bottom: 90px; */
}

.common-modal-window-form__container {
    font-family: var(--font-family-rubik);
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0 auto;
    box-sizing: border-box;
    justify-content: center;
    max-width: var(--common-modal-window-form__container--max-width);
    width: 100%;
    padding-inline: 20px;
}

.common-modal-window-form__title {
    font-family: var(--font-family-rubik);
    font-weight: 400;
    font-size: 40px;
    line-height: normal;
    color: var(--common-modal-window-form__font-color-black-1);
    text-align: center;
}

.common-modal-window-form__title span {
    color: var(--common-modal-window-form__font-color-blue-1);
}

/* ! стилизация скролла начало */
/* Стилизация скроллбара для браузеров на базе WebKit */
.common-modal-window-form::-webkit-scrollbar,
.common-modal-window-form .modal-body::-webkit-scrollbar {
    width: 10px;
    /* Ширина скроллбара */
}

.common-modal-window-form::-webkit-scrollbar-track,
.common-modal-window-form .modal-body::-webkit-scrollbar-track {
    background-color: #f1f1f1;
    /* Цвет трека скроллбара */
    border-radius: 6px;
    /* Скругление углов трека */
}

.common-modal-window-form::-webkit-scrollbar-thumb,
.common-modal-window-form .modal-body::-webkit-scrollbar-thumb {
    background-color: rgb(50, 206, 255);
    /* Цвет ползунка */
    border-radius: 6px;
    /* Скругление углов ползунка */
    border: 2px solid #f1f1f1;
    /* Отступ для создания эффекта внутренней тени */
}

.common-modal-window-form::-webkit-scrollbar-thumb:hover,
.common-modal-window-form .modal-body::-webkit-scrollbar-thumb:hover {
    background-color: rgb(50, 206, 255);
    /* Цвет ползунка при наведении */
}

.common-modal-window-form::-webkit-scrollbar-corner,
.common-modal-window-form .modal-body::-webkit-scrollbar-corner {
    background-color: #f1f1f1;
    /* Цвет углового элемента */
}

/* Стилизация скроллбара для Firefox */
.common-modal-window-form,
.common-modal-window-form .modal-body {
    scrollbar-width: thin;
    /* Устанавливаем тонкий скроллбар */
    scrollbar-color: rgb(50, 206, 255) #f1f1f1;
    /* Цвет ползунка и трека */
}

/* ! стилизация скролла конец */

.common-modal-window-form * {
    font-family: var(--common-modal-window__input--font-family);
}


.common-modal-window-form .modal-dialog.card-modal {
    min-width: initial;
}

.common-modal-window-form .modal-dialog {
    max-width: var(--common-modal-window--max-width);
    width: var(--common-modal-window--width);
}


/* ! Шапка окна начало */

/* максимальная высота заголовка модального окна */
.common-modal-window-form .modal-header {
    /* max-height: var(--common-modal-window__header--max-height); */
    max-height: fit-content;
    padding: 0;
}

.common-modal-window-form__btn-close__container {
    display: flex;
    justify-content: right;
}

.common-modal-window-form__btn-close {
    font-family: var(--common-modal-window__input--font-family) !important;
    font-size: 36px !important;
    line-height: 43px;
    font-weight: 500;
    color: #0CB4FF !important;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.5s ease-out;
    text-align: right;
}

/* ! Шапка окна конец */

/* ! Основная часть тела начало */
.common-modal-window-form .common-modal-window {
    /* padding: 10px 69px 10px 93px; */
    padding: 10px 40px 10px 40px;
    transition: 0.5s all ease-out;
}

/* ! Основная часть тела конец */

.common-modal-window-form .common-modal-window__input-item input {
    max-height: 34px !important;
    /* высота текстового поля */
}

/* 
 ! фиксировнная шапка модального окна 
 * сделать полосу прокрутки внутри тела окна 
*/
.common-modal-window-form .modal-dialog-scrollable .modal-body {
    overflow-y: var(--common-modal-window__body--scroll);
}

/*
 фиксированная высота модального окна
*/
.common-modal-window-form .modal-content-height {
    height: var(--common-modal-window__content--height);
    /* height: fit-content; */
}

/* ! медиазапросы начало */

@media screen and (max-width: 800px) {
    .common-modal-window-form__title {
        font-size: 36px;
    }

    .common-modal-window-form__container {
        padding-inline: 5px;
    }
}

@media screen and (max-width: 600px) {
    .common-modal-window-form {
        /* фиксированная высота модального окна */
        --common-modal-window__content--height: calc(100vh - 50px);
        --common-modal-window__content--height: 100dvh;
        --common-modal-window__content--height: calc(100dvh - max(env(safe-area-inset-top, 0px)) - max(env(safe-area-inset-bottom, 0px)));

        /* --common-modal-window__header--max-height: auto; */
        --common-modal-window__header--max-height: 150px;
        /* максимальная высота заголовка модального окна */
    }

    .common-modal-window-form__wrapper {
        margin-top: 0 !important;
    }

    .common-modal-window-form__title {
        font-size: 30px;
    }
}

@media screen and (max-width: 500px) {
    .common-modal-window-form__title {
        font-size: 26px;
    }

}

@media screen and (max-width: 400px) {
    .common-modal-window-form__title {
        font-size: 24px;
    }
}


/* ! медиазапросы конец */


/* ! расширение функционала для карточек кредитов фл начало */

.modal-header__title {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.modal-header__title .btn-close {
    position: static;
}

/* медиа запросы начало */


/* медиа запросы конец */

/* ! расширение функционала для карточек кредитов фл конец */