@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--max-height: 34px !important;
    --common-modal-window__input--min-height: 34px !important;
    --common-modal-window__input--height: 34px !important;
    --common-modal-window__input--width: 100% !important;
    --common-modal-window__input--max-width: 394px !important;
    --common-modal-window__input--font-size: 16px;
    /* размер шрифта */
    --common-modal-window__input--font-family: "Rubik";
    --common-modal-window__input--bg-color: white;
    --common-modal-window__input--border-color: rgb(50, 206, 255);

    /* ! стили выпадающего списка начало */

    --common-modal-window__dropdown-dd-selected--bg-color: #ffffff;
    /* фон выпадающего списка */
    --common-modal-window__dropdown-dd-selected--font-style: italic;
    /* текст выпадающего списка */

    /* иконка синий треугольник вниз начало */
    --common-modal-window__dropdown-arrow-down-src: url('../images/blue-triangle-down.svg');
    --common-modal-window__dropdown-arrow-down--width: 17.320px;
    /* ширина иконки */
    --common-modal-window__dropdown-arrow-down--height: 15px;
    /* высота иконки */
    --common-modal-window__dropdown-arrow-down-offset-left: 35px;
    /* смещение иконки слева */
    --common-modal-window__dropdown-arrow-down-offset-top: 30%;
    /* смещение иконки сверху */
    --common-modal-window__dropdown-dd-pointer--margin: 0 !important;
    /* внешние отступы */
    /* иконка синий треугольник вниз конец */

    /* ! стили выпадающего списка конец */

    /* 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;
}

/* .modal-dialog.card-modal {
    min-width: initial;
} */

/* ! Сброс настроек стилей для формы обратной связи конец */

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

.common-modal-window-form::-webkit-scrollbar-track,
.common-modal-window-form .modal-body::-webkit-scrollbar-track,
.common-modal-window-form .dd-options::-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,
.common-modal-window-form .dd-options::-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,
.common-modal-window-form .dd-options:hover {
    background-color: rgb(50, 206, 255);
    /* Цвет ползунка при наведении */
}

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

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

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

.common-modal-window-form .common-modal-window__result-message {
    word-wrap: break-word;
    word-break: break-word;
    /* hyphens: auto; */
}

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


.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);
    padding: 0;
}

.common-modal-window-form .modal-header .card-block {
    background-color: #ffffff !important;
    /* border-bottom: 2px solid red; */
    padding: 50px 69px 10px 82px;

    margin-bottom: 27px;
}

.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;
    padding-top: 10px;
}

.common-modal-window-form .modal-header .btn-close {
    position: absolute;
    top: 52px;
    right: 60px;

    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;
}

.common-modal-window-form .common-modal-window__welcome-text {
    font-family: var(--common-modal-window__input--font-family) !important;
    font-weight: 300;
    font-size: 20px;
    line-height: 24px;
    color: #474747;
}

.common-modal-window-form .common-modal-window__welcome-text-blue-greet {
    margin-top: 14px;
    color: #0193C3;
    text-align: right;
}


.common-modal-window-form img.common-modal-window__logo {
    object-fit: contain;
    max-width: 250px;
    width: 100%;
}

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

/* ! Основная часть тела начало */
.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);
}

.common-modal-window-form input::placeholder,
.common-modal-window-form textarea::placeholder {
    color: #bdc6ce !important;
}

.common-modal-window-form textarea {
    max-width: 100%;
    width: 100%;
    border: none !important;
    border-radius: 20px;
    padding: 10px 1rem 10px 1rem;
}

.common-modal-window-form .common-modal-window__input-item input {
    background-color: var(--common-modal-window__input--bg-color);
    /* padding: 10px 20px; */
    padding: 10px 1rem 10px 1rem;
    max-height: 34px;
    width: 100% !important;
    margin-right: 0 !important;
    border: none;
    border-radius: 20px;
    outline: 0;
    font-size: 16px !important;
}

.common-modal-window-form .common-modal-window__input-item input:disabled {
    background-color: #e7e5e5;
}

.common-modal-window-form textarea {
    background-color: var(--common-modal-window__input--bg-color) !important;
    border-radius: 20px;
}



/* ! стили выпадающего списка начало */

.common-modal-window-form .dd-container {
    max-width: var(--common-modal-window__input--max-width);
    width: var(--common-modal-window__input-width);
    max-height: var(--common-modal-window__input--max-height);
    height: var(--common-modal-window__input--height);
    font-family: var(--common-modal-window__input--font-family) !important;
}

.common-modal-window-form .dd-select {
    box-sizing: border-box;
    max-width: var(--common-modal-window__input--max-width);
    width: var(--common-modal-window__input--width);
    max-height: var(--common-modal-window__input--max-height) !important;
    height: var(--common-modal-window__input--max-height) !important;
    line-height: normal;
    padding: 0;
    border-radius: 10px;
    background-color: var(--common-modal-window__input--bg-color) !important;
    font-style: italic;
    cursor: pointer;
    font-family: var(--common-modal-window__input--font-family) !important;
    border: none;
}

.common-modal-window-form .dd-selected {
    box-sizing: border-box;
    color: #BDC6CE !important;
    ;
    background-color: var(--common-modal-window__dropdown-dd-selected--bg-color);
    max-width: var(--common-modal-window__input--max-width);
    min-height: var(--common-modal-window__input--min-height);
    max-height: var(--common-modal-window__input--max-height) !important;
    height: var(--common-modal-window__input--height) !important;
    line-height: var(--common-modal-window__input--font-size);
    border-radius: 20px !important;
    /* padding: 0 1rem 0 1rem; */
    padding: 0 2rem 0 1rem;
    font-style: var(--common-modal-window__dropdown-dd-selected--font-style);
    display: flex;
    align-items: center;
    font-family: var(--common-modal-window__input--font-family) !important;
    font-size: var(--common-modal-window__input--font-size);
    font-weight: 300;
    font-style: normal !important;
}

.common-modal-window-form .dd-selected-text {
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    /* padding-right: 1rem; */
    font-family: var(--common-modal-window__input--font-family) !important;
    font-weight: 300;
    font-size: var(--common-modal-window__input--font-size);
    color: black;
    cursor: pointer;
    margin: 0;
}

.common-modal-window-form .dd-pointer {
    margin: var(--common-modal-window__dropdown-dd-pointer--margin);
}

.common-modal-window-form .dd-pointer.dd-pointer-down {
    border: none !important;
    background: var(--common-modal-window__dropdown-arrow-down-src);
    background-repeat: no-repeat;
    background-position: center center;
    top: var(--common-modal-window__dropdown-arrow-down-offset-top);
    transition: all 0.2s ease-out;
    width: var(--common-modal-window__dropdown-arrow-down--width);
    height: var(--common-modal-window__dropdown-arrow-down--height);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
}

.common-modal-window-form .dd-pointer-up {
    border: solid 0px transparent;
    transform-origin: center center;
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    transform: rotate(-180deg);
    margin: 0 !important;
}

.common-modal-window-form .dd-options {
    border-color: var(--common-modal-window__input--border-color);
    font-family: var(--common-modal-window__input--font-family) !important;
    font-weight: 300;
    font-size: var(--common-modal-window__input--font-size);
}

.common-modal-window-form .dd-option {
    border-color: var(--common-modal-window__input--border-color);
    font-family: var(--common-modal-window__input--font-family) !important;
}

.common-modal-window-form .dd-option:hover {
    background-color: var(--common-modal-window__input--border-color);
    font-family: var(--common-modal-window__input--font-family) !important;
    color: #ffffff;
}

.common-modal-window-form .dd-option-selected {
    background-color: var(--common-modal-window__input--border-color);
    font-family: var(--common-modal-window__input--font-family) !important;
    color: #ffffff;
    cursor: pointer;
}

.common-modal-window-form .dd-option-text {
    font-family: var(--common-modal-window__input--font-family) !important;
    margin: 0;
    cursor: pointer;
    line-height: normal;
}


.common-modal-window-form .common-modal-window-error .dd-selected {
    box-shadow: 0 0 10px #cc0000;
}

.common-modal-window-form .common-modal-window__input-item .common-modal-window-error {
    box-shadow: 0 0 10px #cc0000;
}

.common-modal-window-form .common-modal-window-comment .common-modal-window-error {
    box-shadow: 0 0 10px #cc0000;
}

.common-modal-window-form textarea {
    resize: none !important;
}

/* ! стили выпадающего списка конец */

.common-modal-window-main__client-block__title {
    font-family: var(--common-modal-window__input--font-family) !important;
    font-size: 20px;
    line-height: normal;
    font-weight: 300;
    color: #0193c3;
    margin-bottom: 14px;
}

.common-modal-window-main__client-block__checkboxes {
    margin-left: 8px;
}

/* Кнопка отправить начало */
.common-modal-window__btn-send {
    background-color: #ffffff;
    /* height: 41px; */
    border-radius: 25px;
    border: 1px solid #0193c3;
    outline: none;
    inset: none;
    text-decoration: none;
    font-family: var(--common-modal-window__input--font-family) !important;
    font-size: 20px;
    line-height: normal;
    font-weight: 400 !important;
    padding: 10px 23px 10px 23px;
    color: #0193c3;
    cursor: pointer;
    transition: all 0.5s ease-out;
}


.common-modal-window__btn-send:hover {
    border: 1px solid #00b0ff;
    background-color: #00b0ff;
    color: #ffffff;
}

/* Кнопка отправить конец */

.common-modal-window__attachment-indicator img {
    max-width: 40px;
    object-fit: contain;
    cursor: pointer !important;
}

.common-modal-window-max-size {
    font-family: var(--common-modal-window__input--font-family) !important;
    font-weight: 300;
    font-size: 14px;
    line-height: normal;
    color: #474747;
    margin-bottom: 5px;
}

.common-modal-window__acceptable-formats {
    font-family: var(--common-modal-window__input--font-family) !important;
    font-weight: 300;
    font-size: 14px;
    line-height: normal;
    color: #474747;
}

.common-modal-window-notification {
    margin-top: 18px;
    margin-bottom: 21px;
    font-family: var(--common-modal-window__input--font-family) !important;
    font-weight: 300;
    font-size: 16px;
    line-height: normal;
}

.common-modal-window-notification__blue {
    color: #0193c3;
}

.common-modal-window-notification__attention {
    font-weight: 400 !important;
}

/* ! медиазапросы начало */
@media screen and (max-width: 1092px) {
    .common-modal-window-form .modal-header .card-block {
        padding: 10px 69px 10px 82px;
    }

    .common-modal-window-form .modal-header .btn-close {
        top: 10px;
        right: 60px;
    }
}

@media screen and (max-width: 991px) {
    .common-modal-window-form .modal-header .btn-close {
        top: 10px;
        right: 30px;
    }
}

@media screen and (max-width: 800px) {
    .common-modal-window-form .modal-header .card-block {
        padding: 10px 35px 10px 25px;
    }

    .common-modal-window-form .modal-header .btn-close {
        top: 10px;
        right: 10px;
    }

    .common-modal-window-form .common-modal-window__welcome-text {
        font-weight: 300;
        font-size: 16px;
        line-height: normal;
    }

    .common-modal-window-form .common-modal-window__welcome-text-blue-greet {
        margin-top: 5px;
        font-weight: 300;
        font-size: 16px;
        line-height: normal;
    }

    .common-modal-window-form .common-modal-window {
        padding: 10px 10px 10px 10px;
    }
}

@media screen and (max-width: 600px) {
    .common-modal-window-form .common-modal-window {
        padding: 10px 5px 10px 5px;
    }

    .common-modal-window-form {
        /* фиксированная высота модального окна */
        /* --common-modal-window__content--height: 100vh; */
        --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 .modal-header .card-block {
        padding: 5px 35px 5px 20px;
        margin-bottom: 5px;
    }

    .common-modal-window-form .common-modal-window__welcome-text {
        padding: 0 !important;
    }

    .common-modal-window-form img.common-modal-window__logo {
        max-width: 200px;
    }
}

@media screen and (max-width: 576px) {
    .common-modal-window-form .common-modal-window__welcome-text {
        font-weight: 300;
        font-size: 12px;
        line-height: normal;
    }

    .common-modal-window-form .common-modal-window__welcome-text-blue-greet {
        margin-top: 5px;
        font-weight: 300;
        font-size: 12px;
        line-height: normal;
    }
}

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


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

.common-modal-window-form .calculator-caption {
    font-weight: 400 !important;
}

.common-modal-window-form input {
    font-weight: 400 !important;
}

.common-modal-window-form .calculator-input-icon-rub,
.common-modal-window-form .calculator-input-icon-rub-extra {
    margin-bottom: 5px;
}

.common-modal-window-form .calculator-input-icon-months {
    margin-bottom: 5px;
}

.common-modal-window-form .calculator-input-icon-rub::after,
.common-modal-window-form .calculator-input-icon-rub-extra::after {
    right: 50px;
}

.common-modal-window-form .calculator-input-icon-months::after {
    right: 50px;
}

.modal-windows-autocredit__input-paddings {
    padding-inline: 25px !important;
}

.modal-windows-autocredit__input-paddings-38px {
    padding-inline: 38px !important;
}

.modal-windows-autocredit__input-margins {
    margin-inline: 25px !important;
}

.common-modal-window-form .calculator-conditions__title {
    font-size: 16px;
    font-weight: 400 !important;
}

.common-modal-window-form .calculator-conditions__value,
.common-modal-window-form .calculator-conditions__value span {
    font-size: 30px;
    font-weight: 400 !important;
}

.common-modal-window-form .calculator-monthly-paid-title {
    font-size: 30px;
    font-weight: 400 !important;
}

.common-modal-window-form .calculator-conditions__monthly-paid-value {
    font-size: 40px;
    font-weight: 400 !important;
}

.common-modal-window-form .calculator__calculation-info {
    font-size: 12px;
    font-weight: 500 !important;
}

.common-modal-window-form .calculator-conditions__row {
    padding-inline: 1.6rem;
}

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

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

/* медиа запросы начало */
@media screen and (max-width: 500px) {

    .common-modal-window-form .calculator-input-icon-rub::after,
    .common-modal-window-form .calculator-input-icon-rub-extra::after {
        right: var(--calculator-input-icon-rub--offset-right);
    }

    .common-modal-window-form .calculator-input-icon-months::after {
        right: var(--calculator-input-icon-months--offset-right);
    }

    .modal-windows-autocredit__input-paddings {
        padding-inline: 10px !important;
    }

    .modal-windows-autocredit__input-paddings-38px {
        padding-inline: 18px !important;
    }

    .modal-windows-autocredit__input-margins {
        margin-inline: 25px !important;
    }

    .common-modal-window-form .calculator-conditions__row {
        padding-inline: 1rem;
    }

    .common-modal-window-form .calculator__info-title {
        font-size: 1em !important;
    }

    .common-modal-window-form .calculator-monthly-paid-title {
        font-size: 1em !important;
    }
}

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

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