@font-face {
    font-family: "Golos";
    src: url("https://platform.crosshub.ru/newdesign/font/GolosText-VariableFont_wght.ttf") format('truetype');
}

:root {
    --CH-red: #FF6767;
}

/* Базовые сбросы */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    font-family: "Golos", "Golos Text", sans-serif;
    -webkit-text-size-adjust: 100%;
    color: #2B3033;
    line-height: 1.5;
    margin: 0;
}

img,
svg {
    user-select: none;
    -webkit-user-drag: none;
}

[data-toggle="modal"] {
    cursor: pointer;
}

/* Кнопка открытия и кнопка "Хорошо" */
.service-main_button-notification {
    background-color: #EFFE7D !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px !important;
    height: 56px;
    width: 332px;
    padding: 0 20px;
    text-align: center;
    line-height: 56px;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    user-select: none;
    color: #2B3033;
    cursor: pointer;
    margin: 25px auto 0;
    box-sizing: border-box;
    border: none;
    transition: all 0.3s ease !important;
    white-space: nowrap;
}

.service-main_button-notification:hover {
    background-color: #eaeaeb;
    color: #2B3033;
}

.service-main_button-notification:active {
    background-color: #d6d7d8 !important;
    color: #2B3033 !important;
}

.service-main_button-notification.disabled,
.service-main_button-notification:disabled {
    color: #2B303366 !important;
    background-color: #D3D9D7 !important;
    pointer-events: none;
}

.service-main_button-notification:focus {
    color: #2B3033 !important;
}

@media (max-width: 960px) {
    .service-main_button-notification {
        width: 100%;
        margin-bottom: 10px;
        margin-top: 10px;
    }
}

/* Карточки ошибок */
.message-card {
    display: block;
    min-width: 343px;
    min-height: 52px;
    width: max-content;
    padding: 14px 18px 14px 16px;
    border-radius: 8px;
    gap: 10px;
    background-color: #D3D9D7;
    margin: 0 auto;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #2B3033;
    position: relative;
}

.message-card--red {
    background-color: rgba(255, 103, 103, 0.2);
}

.message-card > div:first-child {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 7px;
}

.message-card > div:first-child::before {
    content: '';
    background-image: url("https://platform.crosshub.ru/newdesign/img/message-card_icon.svg");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    height: 24px;
    min-width: 24px;
}

.message-card--red > div:first-child::before {
    background-image: url("https://platform.crosshub.ru/newdesign/img/message-card_icon--red.svg");
}

.message-card__title {
    font-size: 16px;
    font-weight: 600;
    line-height: 18px;
}

.message-card__text {
    color: #616C72;
}

.message-card--red .message-card__text {
    color: #2B3033;
}

.message-card__version-section {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 12px 0;
}

.message-card__version {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.user-version__field {
    border-radius: 6px;
    padding: 8px 10px;
    font-weight: 600;
    font-size: 14px;
}

.user-version__field--white {
    background: #ffffff;
}

.user-version__field--yellow {
    background: #EFFE7D;
}

.message-card__textfield p {
    margin: 0 0 6px 0;
}

.message-card__textfield p:last-child {
    margin-bottom: 0;
}

/* Блок поддерживаемых браузеров */
.lokoRules {
    line-height: 1.5;
    border-radius: 8px;
    border: 1px solid #979797;
    font-size: 14px;
    font-weight: 400;
    width: 100%;
    padding: 17px 20px;
    background: none !important;
    text-align: left;
}

.lokoRules p {
    margin-bottom: 9px;
    line-height: 1.5;
}

.lokoRules p:last-child {
    margin-bottom: 6px;
}

.browser-container .message-card__text {
    margin-bottom: 10px;
}

.browsers {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 40px;
    margin-top: 8px;
}

.browser-column {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

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

.browser-line img {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.browser-card__text {
    font-size: 14px;
    color: #2B3033;
}

/* Модальное окно (bootstrap-подобное) */
.modal-open {
    overflow: hidden;
}

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    display: none;
    width: 100%;
    height: 100%;
    overflow: hidden;
    outline: 0;
}

.modal-dialog {
    position: relative;
    width: auto;
    margin: .5rem;
    pointer-events: none;
}

.modal.fade .modal-dialog {
    transition: transform .3s ease-out;
    transform: translate(0, -50px);
}

.modal.show .modal-dialog {
    transform: none;
}

@media (min-width: 576px) {
    .modal-dialog {
        max-width: 500px;
        margin: 1.75rem auto;
    }
}

/* Оболочка и контент модалки */
.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border-radius: 15px;
    box-shadow: 0 0 40px 0 rgba(177, 178, 180, .83);
    padding: 35px 35px;
}

@media (max-width: 700px) {
    .modal-content {
        padding: 25px 15px;
    }
}

/* Фон */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    width: 100vw;
    height: 100vh;
    background-color: #000;
}

.modal-backdrop.fade {
    opacity: 0;
}

.modal-backdrop.show {
    opacity: .4;
}

/* Шапка модалки (новый дизайн) */
.newDesignModal.modal {
    font-family: "Golos", "Golos Text", sans-serif !important;
    color: #2B3033 !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 24px;
}

.newDesignModal .modal-dialog {
    max-width: fit-content;
    height: auto;
}

.newDesignModal .modal-content {
    padding: 40px 42px !important;
    min-width: 703px;
    max-width: 703px;
}

.newDesignModal .modal-header {
    min-height: 48px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 16px !important;
    width: 100%;
    top: 0;
    left: 0;
    background: #fff !important;
    color: #2B3033 !important;
    z-index: 10;
    border-radius: 16px 16px 0 0 !important;
    border: none !important;
    position: relative;
}

.newDesignModal .modal-title,
.newDesignModal.modal .modal-header {
    text-transform: none;
    font-size: 16px;
    font-weight: 600;
    color: #2B3033;
    font-family: "Golos", "Golos Text", sans-serif;
    margin: 0 auto;
    padding: 0 30px;
}

/* Крестик закрытия */
.newDesignModal .modal-header .modal-close {
    height: 24px;
    width: 24px;
    padding: 0;
    position: absolute;
    right: 16px;
    background-color: transparent;
    background-image: url("https://platform.crosshub.ru/newdesign/img/modal_close.svg");
    background-repeat: no-repeat;
    background-position: center;
    margin: 0;
    background-size: 24px;
    top: 50%;
    transform: translate(0, -50%);
    border: none;
}

/* Тело модалки */
.newDesignModal .modal-body {
    padding-top: 30px;
    padding-bottom: 15px;
    font-family: "Golos", "Golos Text", sans-serif;
    color: #2B3033;
}

/* Адаптив: мобилка */
@media (max-width: 700px) {
    br.br-mobile {
        display: inline;
    }

    .message-card {
        min-width: unset;
        width: 100%;
    }

    .message-card__title {
        line-height: 20px;
    }
}

@media (max-width: 960px) {
    .newDesignModal.modal.fade .modal-dialog {
        transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
        transform: translate(0, 100%);
    }

    .newDesignModal.modal.show .modal-dialog {
        transform: translate(0, 0);
    }

    .newDesignModal .modal-content {
        border: none !important;
        border-radius: 16px 16px 0 0 !important;
        padding: 0 13px 0 16px !important;
        max-height: 85vh !important;
        min-width: unset;
        max-width: unset;
        width: 100%;
        min-height: 20vh;
    }

    .newDesignModal .modal-body {
        padding: 0 3px 32px 0 !important;
        overflow-y: auto !important;
    }

    .modal-dialog {
        position: fixed !important;
        margin: auto;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        bottom: 0;
        overflow-y: hidden !important;
    }
}
.modal-dialog {
    position: relative;
    width: auto;
    margin: 30px auto; /* было ~1.75rem auto */
    pointer-events: none;
}
.newDesignModal .modal-content {
    padding: 40px 42px !important;
    min-width: 703px;
    max-width: 703px;
    max-height: 97vh;        /* если было в исходнике */
    width: 703px;            /* чтобы не растягивалась */
}
@media (max-width:960px) {
    .newDesignModal.modal.fade .modal-dialog {
        transition: transform .7s cubic-bezier(0.4, 0, 0.2, 1);
        transform: translate(0, 100%);
    }

    .newDesignModal.modal.show .modal-dialog {
        transform: translate(0, 0);
    }

    .modal-dialog {
        position: fixed !important;
        margin: auto;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        bottom: 0;
        overflow-y: hidden !important;
    }

    .newDesignModal .modal-content {
        border: none !important;
        border-radius: 16px 16px 0 0 !important;
        padding: 0 13px 0 16px !important;
        height: auto !important;
        max-height: 85vh !important;
        min-width: unset;
        max-width: unset;
        width: 100%;
        min-height: 20vh;
    }

    .newDesignModal .modal-body {
        padding: 0 3px 32px 0 !important;
        overflow-y: auto !important;
    }
}


a,
a:after,
a:before,
button,
button:after,
button:before,
div,
div:after,
div:before,
form,
form:after,
form:before,
h1,
h1:after,
h1:before,
h2,
h2:after,
h2:before,
h3,
h3:after,
h3:before,
h4,
h4:after,
h4:before,
h5,
h5:after,
h5:before,
input,
input:after,
input:before,
label,
label:after,
label:before,
li,
li:after,
li:before,
ol,
ol:after,
ol:before,
p,
p:after,
p:before,
span,
span:after,
span:before,
table,
table:after,
table:before,
td,
td:after,
td:before,
textarea,
textarea:after,
textarea:before,
th,
th:after,
th:before,
tr,
tr:after,
tr:before,
ul,
ul:after,
ul:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block
}

audio,
canvas,
progress,
video {
    display: inline-block;
    vertical-align: baseline
}

audio:not([controls]) {
    display: none;
    height: 0
}

[hidden],
template {
    display: none
}

a {
    background-color: transparent
}

a:active,
a:hover {
    outline: 0
}

abbr[title] {
    border-bottom: 1px dotted
}

b,
strong {
    font-weight: 700
}

dfn {
    font-style: italic
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

mark {
    background: #ff0;
    color: #000
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sup {
    top: -.5em
}

sub {
    bottom: -.25em
}

img {
    border: 0
}

svg:not(:root) {
    overflow: hidden
}

figure {
    margin: 1em 40px
}

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0
}

pre {
    overflow: auto
}

code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    font-size: 1em
}

button,
input,
optgroup,
select,
textarea {
    color: inherit;
    font: inherit;
    margin: 0
}

button {
    overflow: visible
}

button,
select {
    text-transform: none
}

button,
html input[type=button],
input[type=reset],
input[type=submit] {
    -webkit-appearance: button;
    cursor: pointer
}

button[disabled],
html input[disabled] {
    cursor: default
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0
}

input {
    line-height: normal
}

input[type=checkbox],
input[type=radio] {
    box-sizing: border-box;
    padding: 0
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    height: auto
}

input[type=search] {
    -webkit-appearance: textfield;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

fieldset {
    border: 1px solid silver;
    margin: 0 2px;
    padding: .35em .625em .75em
}

legend {
    border: 0;
    padding: 0
}

textarea {
    overflow: auto
}

optgroup {
    font-weight: 700
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

td,
th {
    padding: 0
}

li,
ul {
    list-style: none
}

p {
    margin: 0;
    padding: 0
}

::-webkit-input-placeholder {
    color: #737373;
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1
}

::-moz-placeholder {
    color: #737373;
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1
}

:-moz-placeholder {
    color: #737373;
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1
}

:-ms-input-placeholder {
    color: #737373;
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1
}

:focus::-webkit-input-placeholder {
    color: transparent
}

:focus::-moz-placeholder {
    color: transparent
}

:focus:-moz-placeholder {
    color: transparent
}

:focus:-ms-input-placeholder {
    color: transparent
}





/* ===== IE‑совместимый вариант модалки ===== */

/* 1. Убираем transform-анимацию для IE (проще всего через хак) */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .modal.fade .modal-dialog,
    .modal.show .modal-dialog {
        -ms-transform: none !important;
        transform: none !important;
    }

   .modal-dialog {
        position: relative !important;
        margin: 30px auto !important;
        width: 100% !important;      /* тянется на всю ширину окна */
        max-width: 703px !important;  /* но не больше 703px */
        pointer-events: auto !important;
    }

    .newDesignModal .modal-dialog {
        width: 100% !important;
        max-width: 703px ;
    }

    .newDesignModal .modal-content {
        box-sizing: border-box;
        width: 100% ;      /* вместо фиксированных 703px */
        max-width: 703px ;
        min-width: 0 ;
        padding-bottom: 24px!important; 
        border-radius: 16px !important;
    } 

    .newDesignModal .modal-header {
        display: block !important;
        text-align: center;
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }

    .newDesignModal .modal-title {
        display: block;
        padding: 0;
    }

    .newDesignModal .modal-header .modal-close {
        top: 16px;
        right: 16px;
        transform: none;
    }

    .message-card > div:first-child {
        display: block;
    }

    .message-card__version-section {
        display: block;
    }

    .message-card__version {
        display: block;
        margin-bottom: 8px;
    }

    .browsers {
        display: block;
    }

    .browser-column {
        display: block;
        margin-bottom: 10px;
    }

    .browser-line {
        display: block;
        margin-bottom: 6px;
    }
    .modal-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1040;
        width: 100%;
        height: 100%;
        background-color: #000;
        opacity: 0.4;          /* уровень затемнения */
        filter: alpha(opacity=40);
        display: block;        /* иногда IE теряет display */
    }

    .modal-backdrop.fade {
        opacity: 0.4;
        filter: alpha(opacity=40);
    }

    .modal-backdrop.show {
        opacity: 0.4;
        filter: alpha(opacity=40);
    }
    .ie-show {
        display: block;
    }
    .message-card__title {
    display: inline-block;
    vertical-align: top;
    padding-top: 5px;       /* сдвигает только текст вниз */
}

.message-card > div:first-child::before {
    content: '';
    display: inline-block;
    height: 24px;
    width: 24px;
    margin-right: 8px;
    vertical-align: middle;

    background-repeat: no-repeat;
    background-position: center;
    background-size: 25px 25px; /* иконка визуально меньше */

    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 15H13V17H11V15ZM11 7H13V13H11V7Z' fill='%232B3033'/%3E%3C/svg%3E");
}

.message-card--red > div:first-child::before {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 15H13V17H11V15ZM11 7H13V13H11V7Z' fill='%23FF6767'/%3E%3C/svg%3E");
}
.message-card__version-section {
    /* padding-bottom: 16px; */
    font-size: 0; 
}

.message-card__version-section > * {
    display: inline-block;
    margin-right: 10px;   
    font-size: 16px;    
}

.message-card__version-section > *:last-child {
    margin-right: 0;
}

.browser-line {
    padding-bottom: 20px;
}

.browser-column {
    margin-right: 100px;
}

}
.ie-show {
    display: none;
}