/*NOTE: This file is intended for programmers. Aspro technical support is not advised to work with him.*/

/* Examples (uncomment to use):*/

/* Expand site width */
/* body .wrapper { max-width: 1400px !important;  } */

/* Set site background image */
/* body {  background: url(image_source) top no-repeat; }

/* Hide compare button */
/* a.compare_item { display: none !important;  }*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');


.sb_block_region {
    display: flex;
    align-items: center;
}

.sb_block_region .line-block__item {
    margin-right: 20px;
}

.sb_block_region .region_wrapper {
    font-size: 13px;
}


.sb_block_region_fix .svg {
    display: none;
}

.sb_block_region_fix .regions__name {
    margin-left: 0 !important;
}

.js-open-store-popup {
    /*text-decoration-line: none !important;*/
}

.store_chooser_small_frame .bx-yandex-view-layout {
    min-width: 50%;
    width: 57%;
}

.locations-list-popup-2 .popup-header {
    position: relative;
    display: flex;
    justify-content: space-between;

}


.popup-title {
    font-weight: 600;
    font-size: 22px;
    line-height: 26px;
    color: #424242;
    display: flex;
    align-items: center;
}

.locations-list-popup-2 .popup-header .close-popup-icon {
    position: absolute;
    display: block;
    right: -33px;
    top: -25px;
    padding: 5px;
    width: 20px;
    height: 20px
}

.locations-list-popup-2 .popup-header .close-popup-icon::before {
    content: '\2573';
    display: inline-block;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    transition: .2s ease-in-out
}

.locations-list-popup-2 .popup-header .close-popup-icon:hover::before {
    color: #FC8B1C
}

.popup-title.return-link::before {
    content: '';
    width: 16px;
    height: 16px;
    background: url(/images/arrow-left-icon.svg) center no-repeat;
    display: block;
    margin-right: 12px;
}

#headerfixed .line-block__item.flex-1 {
    width: 255px;
    flex: initial;
}

#headerfixed .line-block.line-block--gap.line-block--gap-32 {
    justify-content: space-between;
}

ul.stores-list>li::before {
    display: none
}

ul.stores-list .sb_name {
    display: flex;
    align-items: center;
    justify-content: space-between;

}

ul.stores-list .sb_address {
    margin-bottom: initial;
}

.regions__name {
    --underline-opacity: 16%;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: color-mix(in oklab, var(--white_text_black) var(--underline-opacity), transparent);
    text-underline-offset: 0.2em;
}

.line-block__item.flex-1.header__search {
    min-width: 400px;
}

/*.line-block.line-block--gap.line-block--gap-24{*/
/*    align-items: center;*/
/*    justify-content: space-between;*/
/*}*/
/*.sb_block_catalog_city{*/
/*    width:215px!important;*/
/*}*/

.b24-widget-button-wrapper.b24-widget-button-position-bottom-right.b24-widget-button-visible {
    bottom: 130px;
    right: 62px;
}

.mobilemenu .region_wrapper {
    padding: 0px 8px;
}

.mobilemenu .region_wrapper a:not(.no-decoration, .btn, .chip, .link, .dark_link) {
    text-decoration-line: unset;
}

.mobilemenu__menu--regions .ui-menu {
    padding: 0 0 0 0 !important;
    position: static !important;
}

/*
==========================================================================
  БЛОК 1: Стили ТОЛЬКО для ОСНОВНОЙ шапки (НЕ плавающей)
==========================================================================
*/

/* Стили для экранов МЕНЬШЕ 1250px */
@media (max-width: 1250px) {

    /* Уменьшаем отступ между основными блоками в шапке (лого, поиск и т.д.) */
    .part-with-search__inner {
        gap: 16px;
    }

    /* Уточняем, что меняем размер шрифта ТОЛЬКО у кнопки каталога в блоке с поиском */
    .part-with-search__inner .header-menu__title {
        font-size: 14px;
    }
}

/* Стили для экранов МЕНЬШЕ 1150px */
@media (max-width: 1150px) {

    /* 
     * Прячем текст кнопки "Каталог" только у основной шапки.
     * Селектор .part-with-search__inner гарантирует, что верхнее меню не будет затронуто.
    */
    .part-with-search__inner .header-menu__title-wrapper {
        display: none !important;
    }

    /* Убираем лишний отступ у иконки */
    .part-with-search__inner .header-menu__link--only-catalog .icon-block {
        gap: 0;
    }

    /* Делаем саму кнопку компактнее */
    .part-with-search__inner .header-menu__link--only-catalog {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/*
==========================================================================
  БЛОК 2: Стили ТОЛЬКО для ПЛАВАЮЩЕЙ (FIXED) шапки (Финальная Версия 8)
==========================================================================
*/

/* 
 * Этап 1: Стили для экранов 1410px и меньше.
 * Первоначальная адаптация: убираем жесткую ширину и прячем текст каталога.
*/
@media (max-width: 1410px) {

    /* Отменяем жесткую ширину в 255px у блока с каталогом */
    #headerfixed .line-block__item.flex-1 {
        width: auto !important;
    }

    /* Прячем текст кнопки "Каталог" */
    [data-ajax-load-block="HEADER_FIXED_MAIN_PART"] .header-menu__title-wrapper {
        display: none !important;
    }

    /* Убираем лишний отступ у иконки каталога */
    [data-ajax-load-block="HEADER_FIXED_MAIN_PART"] .header-menu__link--only-catalog .icon-block {
        gap: 0;
    }

    /* Делаем саму кнопку каталога компактнее */
    [data-ajax-load-block="HEADER_FIXED_MAIN_PART"] .header-menu__link--only-catalog {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Уменьшаем общий отступ между блоками */
    [data-ajax-load-block="HEADER_FIXED_MAIN_PART"]>.maxwidth-theme>.line-block--gap-32 {
        gap: 16px;
    }
}

/* 
 * Этап 2: НОВОЕ ПРАВИЛО для экранов 1350px и меньше.
 * Промежуточный шаг: немного уменьшаем поиск, чтобы пережить "серую зону" до 1200px.
*/
@media (max-width: 1350px) {
    [data-ajax-load-block="HEADER_FIXED_MAIN_PART"] .header__search {
        max-width: 360px;
        /* Можете подобрать это значение, если нужно */
        transition: max-width 0.2s ease-in-out;
    }

    /* 2. Немного уменьшаем логотип */
    [data-ajax-load-block="HEADER_FIXED_MAIN_PART"] .logo {
        max-width: 170px;
        /* Исходный размер ~180-200px, чуть уменьшаем */
        transition: max-width 0.2s ease-in-out;
    }
}

/* 
 * Этап 3: Стили для экранов 1150px и меньше.
 * Дополнительно уменьшаем логотип, так как места становится еще меньше.
*/
@media (max-width: 1150px) {
    [data-ajax-load-block="HEADER_FIXED_MAIN_PART"] .logo {
        max-width: 160px;
        /* Уменьшаем логотип, как вы и делали */
        transition: max-width 0.2s ease-in-out;
    }
}


.BIG_BANNER_INDEX.container {
    max-width: 1530px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


/*@media (max-width: 600px) {*/

    /* 
   * Используем тот же класс, который скрывает баннер, чтобы переопределить его.
   * Чаще всего это .hidden_narrow, но может быть и .banners-big или .BIG_BANNER_INDEX
  */
    .hidden_narrow {
        display: block !important;
        /* Используем !important, чтобы наше правило имело приоритет */
    }

    .b24-widget-button-wrapper.b24-widget-button-position-bottom-right.b24-widget-button-visible {
        right: 30px !important;
        left: auto !important;
        bottom: 95px !important; 
    }
    a.scroll-to-top {
        display: block !important;
        right: 40px !important; 
        bottom: 170px !important; 
  }
/*}*/




.topic__inner .switcher-title {
    margin-right: 20px;
}

.topic__heading.topic__heading.line-height-0 {
    display: initial;
    margin-right: 49px;
}

.topic__heading.line-height-0 .switcher-title {
    margin-right: 10px !important;
}

.topic__heading.line-height-0.flexbox--wrap-nowrap {
    display: flex;
    margin: 0;
}

.element-count {
    margin: 0;
}


.reverse-items ul.mobilemenu__menu-list {
    display: flex;
    flex-direction: column-reverse;
}

.reverse-items .schedule__text {
    color: var(--secondary);
}

/* .mobilemenu__menu-header {

} */
.current-store {
    padding-left: 12px;
}

.current-store .line-block--gap-16 {
    --gap: 8px;
}

/* --- Стили для кастомной верхней полосы в мобильной шапке --- */

.mobile-top-bar {
  background-color: #f2f2f2; /* Цвет фона полоски, можете поменять */
  border-bottom: 1px solid #e5e5e5; /* Нижняя граница */
  padding: 8px 15px; /* Внутренние отступы (сверху/снизу и по бокам) */
  font-size: 13px; /* Размер шрифта */
}

.mobile-top-bar__inner {
  display: flex; /* Включаем Flexbox для расположения элементов */
  justify-content: space-between; /* Элементы по краям */
  align-items: center; /* Выравнивание по центру по вертикали */
  max-width: 100%;
}

/* Стили для ссылок внутри полоски */
.mobile-top-bar a {
  text-decoration: none;
  color: #333; /* Цвет текста */
  border-bottom: 1px dashed #333; /* Пунктирное подчеркивание как у ссылок в Аспро */
}

.mobile-top-bar a:hover {
  border-bottom-color: transparent; /* Убираем подчеркивание при наведении */
}

/* Убираем лишние отступы у стандартного блока региона Аспро */
.mobile-top-bar .region_wrapper .line-block__item {
  padding-left: 0;
  padding-right: 0;
}
/* --- Конец стилей --- */

/* 
 * ШАГ 1: Глобальное обнуление отступов в шапке.
 * Убиваем автоматические отступы, которые все ломают.
*/
.mobileheader_1 .mobileheader__inner-part {
    gap: 0 !important;
    padding-left: 8px !important;  /* Минимальный отступ от края экрана */
    padding-right: 8px !important; /* Минимальный отступ от края экрана */
}

/* 
 * ШАГ 2: Жестко задаем размеры и отступы каждому элементу.
*/

/* Бургер-меню: компактный, с отступом справа */
.mobileheader_1 .mobileheader__burger {
    flex-shrink: 0; /* Не сжимать */
    padding: 0 !important;
    margin-right: 8px !important;
}

/* Логотип: тоже сжимаем и даем отступ */
.mobileheader_1 .logo {
    flex-shrink: 0; /* Не сжимать */
    max-width: 90px; /* Уменьшаем еще сильнее */
    margin-right: 8px !important;
}

/* 
 * ШАГ 3: ПОИСК. Убираем ВСЕ его внутренние и внешние отступы.
*/
.mobileheader_1 .header__search {
    flex-grow: 1; /* Растягиваем на все свободное место */
    padding-left: 0 !important;  /* <-- УБИРАЕМ ОТСТУП СЛЕВА */
    padding-right: 0 !important; /* <-- УБИРАЕМ ОТСТУП СПРАВА */
    margin: 0 !important;        /* Обнуляем внешние отступы на всякий случай */
}

/* Настраиваем само поле ввода, чтобы оно было красивым */
.mobileheader_1 .header__search .search-input {
    height: 38px !important;
    font-size: 14px;
    background-color: #f9f9f9 !important;
    border: 1px solid #e5e5e5 !important;
}

/* Убираем выбор "в каталоге/везде" */
.mobileheader_1 .header__search .search-input-div .dropdown-select {
    display: none !important;
}
.mobileheader_1 .header__search .search-input-div .search-input {
    padding-left: 12px !important;
}

/* 
 * ШАГ 4: Иконки справа. Делаем их крошечными.
*/
.mobileheader_1 .mobileheader__inner-part .line-block__item.no-shrinked {
    padding-left: 3px !important;  /* Минимально возможный отступ */
    padding-right: 3px !important; /* Минимально возможный отступ */
}
/* Отдельно для последней иконки убираем отступ справа */
.mobileheader_1 .mobileheader__inner-part .line-block__item.no-shrinked:last-child {
    padding-right: 0 !important;
}

/* 
 * ШАГ 5: Кнопка закрытия в попапе (остается без изменений).
*/
.search-popup.jqmWindow .popup__close {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    line-height: 32px !important;
    top: 15px;
    right: 15px;
}

.mobilemenu__menu--contacts .mobilemenu__menu-item > .link-wrapper {
    padding-inline: 0;
}

@media screen and (width < 601px) {
    .mobileheader__inner .mobileheader__inner-part {
        --gap: 11px;
    }
}

/* Увеличение размера мобильного логотипа (усиленная версия) */
@media screen and (width < 601px) {
    .mobileheader .logo img {
        height: 30px !important;      /* <<< Добавили !important */
        max-height: 30px !important;  /* <<< Добавили это свойство */
        width: auto !important;       /* <<< Добавили !important */
    }
}

@media screen and (width < 601px) {
    .mobileheader .header__search .search-input {
        /* background-color: #f5f5f5; 
        border-color: #e0e0e0;     
        color: #222222;             */
    }}


/* Стилизация кнопки выбора региона в мобильной шапке (финальная версия) */
@media screen and (width < 601px) {

    /* Стили для контейнера (ссылки), чтобы иконка и текст стояли в ряд */
    .mobile-top-bar__region .region-link-custom {
        display: inline-flex;
        align-items: center;
        gap: 6px;

        /* ===== КЛЮЧЕВОЕ ИСПРАВЛЕНИЕ ===== */
        /* Убираем ВСЕ виды подчеркиваний, включая пунктирное */
        text-decoration: none !important;
        border-bottom: none !important; 
    }

    /* Стили для текста региона */
    .mobile-top-bar__region .region-link-custom .region-text {
        font-family: "Golos Text", Arial, sans-serif;
        font-size: 15px;
        font-weight: 400;
        line-height: 22px;
        color: #222222;
        text-decoration: none !important;
    }

    /* Убираем подчеркивание и при наведении */
    .mobile-top-bar__region .region-link-custom:hover {
        text-decoration: none !important;
        border-bottom: none !important;
    }
    
    .mobile-top-bar__region .region-link-custom:hover .region-text {
        text-decoration: none !important;
    }
}

/*
 * ===================================================================
 * ПОКАЗЫВАЕМ ТОЛЬКО 2 НУЖНЫХ ПЕРЕКЛЮЧАТЕЛЯ ВИДОВ НА МОБИЛЬНЫХ
 * ===================================================================
 */
@media (max-width: 600px) {

    /* ШАГ 1: Делаем видимым родительский контейнер, перебивая .hide-600 */
    .filter-panel .filter-panel__part-right.hide-600 {
        display: flex !important;
        align-items: center;
    }

    /* ШАГ 2: Скрываем ВСЕ дочерние элементы внутри блока с иконками */
    .filter-panel .toggle-panel > * {
        display: none !important;
    }

    /* ШАГ 3: Теперь "включаем" обратно ТОЛЬКО нужные нам две кнопки,
       нацеливаясь на них по части URL в атрибуте href. */
    .filter-panel .toggle-panel > a[href*="display=tile"],
    .filter-panel .toggle-panel > a[href*="display=price"] {
        display: inline-flex !important; /* Используем inline-flex для лучшего выравнивания иконки */
        align-items: center;
        justify-content: center;
    }
}

.fill-dark-light-block use {
    fill: var(--fill_dark_light);
}


/*
==========================================================================
  ФИНАЛЬНОЕ РЕШЕНИЕ: Блокировка перерисовки логотипа при смене SRC
==========================================================================
*/
@media (max-width: 991px) {

    /*
     * 1. Жестко фиксируем РАЗМЕРЫ КОНТЕЙНЕРА мобильного логотипа.
     *    Это создает "жесткую рамку", из которой логотип не сможет вылезти.
    */
    .mobileheader .logo {
        width: 30px !important;      /* <-- ПОДБЕРИТЕ ЭТО ЗНАЧЕНИЕ */
        max-width: 30px !important;
        min-width: 30px !important;
        flex-basis: 30px !important;
        height: 30px !important;      /* Указываем высоту из ваших прошлых стилей */
        
        /* Важно: не даем контейнеру сжиматься или расти */
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        
        transition: none !important;
    }

    /*
     * 2. Заставляем саму КАРТИНКУ (<img>) внутри контейнера
     *    вести себя предсказуемо, даже если ее SRC меняется.
    */
    .mobileheader .logo img {
        width: 100% !important;         /* Растягиваем на всю ширину контейнера */
        height: 100% !important;        /* Растягиваем на всю высоту контейнера */
        object-fit: contain !important; /* <-- МАГИЯ! Сохраняет пропорции, вписывая картинку в рамку */
    }
}


.layout .checkbox.disabled,
.layout label.disabled {
    display: none !important;
}

.scroll-to-top {
    /* 
       Если ваша кнопка региона находится на bottom: 30px и имеет высоту ~40px,
       то кнопку "Наверх" нужно поднять примерно на 80-90px.
    */
    bottom: 60px !important; 
}



/* 1. Делаем саму карточку "точкой отсчета" для координат */
.store-item {
    position: relative !important;
    /* ВАЖНО: Добавляем отступ снизу, чтобы текст телефона не залез под кнопку */
    padding-bottom: 60px !important; 
}

/* 2. Перемещаем кнопку в правый нижний угол */
.store-item .sb_name button {
    position: absolute !important;
    bottom: 15px !important;  /* Отступ от нижнего края карточки */
    right: 15px !important;   /* Отступ от правого края карточки */
    top: auto !important;     /* Отключаем позиционирование сверху */
    margin: 0 !important;     /* Убираем старые отступы */
    z-index: 5;
    
    /* Опционально: если кнопка слишком маленькая, можно увеличить */
    /* min-width: 100px; */
}


.store-item .sb_name {
   
    display: block !important; 
    width: 100% !important;
}






/*стили хедера мобилки*/

.mobile-top-bar {
    /* Фон по умолчанию (белый) */
    background-color: #ffffff; 
    
    /* Рамка снизу */
    border-bottom: 1px solid #f2f2f2;
    
    padding: 8px 15px;
    width: 100%;
    box-sizing: border-box;
}

.mobile-top-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mobile-top-bar a {
    display: flex;
    align-items: center;
    text-decoration: none;
    gap: 6px;
    color: var(--white_text_black, #333333); 
}

/* ================================================================== */
/* НАСТРОЙКА ДЛЯ ТЕМНОЙ ТЕМЫ */
/* ================================================================== */

body.theme-dark .mobile-top-bar,
body.dark_theme .mobile-top-bar {
    
    background-color: var(--card_bg_black) !important;
    border-bottom: 1px solid var(--stroke_black) !important;
}

body.theme-dark .mobile-top-bar a,
body.theme-dark .mobile-top-bar span,
body.dark_theme .mobile-top-bar a {
    color: var(--white_text_black) !important;
}

body.theme-dark .mobile-top-bar svg,
body.theme-dark .mobile-top-bar svg use,
body.dark_theme .mobile-top-bar svg {
    fill: var(--white_text_black) !important;
}


@media (max-width: 991px){
    /* Запрещаем размытие для контейнеров шапки, найденных скриптом */
#headerfixed, 
.visible-991,
.mobileheader {
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 1 !important; /* На случай, если там еще и прозрачность */
}

/* 1. Делаем основное окно контейнером на всю высоту */
.store_chooser_small_frame {
    display: flex !important;
    flex-direction: column !important;
    height: 80vh !important; /* Или 90vh - высота окна на экране */
    max-height: 600px !important;
    overflow: hidden !important; /* Запрещаем скролл самому окну */
}

/* 2. Растягиваем внутреннюю форму */
.form.popup--regions,
.locations-list-popup-2 {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important; /* Убираем лишние скроллы */
}

/* 3. ШАПКА: Заголовок и кнопки делаем "жесткими" */
.stock-select-title,
.mobile-view-switcher {
    flex-shrink: 0 !important; /* Запрещаем сжиматься */
    z-index: 20;
    position: relative;
    background: #fff; /* Чтобы текст списка не просвечивал */
}

/* 4. СПИСОК: Разрешаем скроллиться только ему */
.regions-map__wrapper {
    overflow-y: auto !important; /* Включаем скролл ВНУТРИ списка */
    flex-grow: 1 !important;     /* Занимаем все свободное место */
    height: auto !important;
    display: block !important;   /* Исправляем возможный flex у обертки */
    -webkit-overflow-scrolling: touch; /* Плавность для iPhone */
    padding-bottom: 20px;
}

/* Корректировка для списка внутри обертки */
.regions-map__list {
    height: auto !important;
    overflow: visible !important;
}

/* Если карта скрыта/показана, нужно чтобы она тоже заполняла место */
#BX_YMAP_yam_1, .bx-yandex-view-layout, .bx-yandex-view-map {
    height: 100% !important;
    width: 100% !important;
}
/* Сдвигаем содержимое ВСЕХ всплывающих окон вниз на высоту шапки */
    .jqmWindow, 
    .popup {
        padding-top: 50px !important; /* 70px - примерная высота шапки. Подберите число, чтобы было красиво */
    }

   

}


/* полоска рейтинга по горизонтали */
.rating{display: flex !important;}




/*исправление горизонтального скролла в мобильной версии */
/* 1. Правильное исправление горизонтального скролла */
html {
    overflow-x: hidden !important;
}

body {
    overflow-x: hidden !important;
    width: 100% !important;
    /* Убрали position: relative !important; - он был виновником */
}
@media (max-width: 767px) {
/* 2. Принудительно возвращаем нижнюю панель на место */
.bottom-icons-panel.swipeignore {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 500 !important; /* Достаточный индекс, чтобы быть над контентом */
    display: block !important;
}

/* 3. Фикс для того, чтобы контент не перекрывался нижней панелью */
body {
    padding-bottom: 60px !important; /* Высота вашей нижней панели, чтобы она не закрывала футер */
}}

/* Специальные стили для мобильной версии подписки (до 767px) */
@media (max-width: 767px) {
    /* 1. Центрируем окно по центру экрана, отменяя растягивание Аспро */
    body .subscribe_frame.jqmWindow.show {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important; 
        
        width: 92% !important;
        max-width: 400px !important;
        height: auto !important;
        min-height: auto !important;
        margin: 0 !important;
        
        background: #fff !important;
        border-radius: 12px !important;
        box-shadow: 0 10px 40px rgba(0,0,0,0.4) !important;
        z-index: 100000 !important; /* Чтобы было точно выше мобильной шапки */
        
        display: block !important;
        opacity: 1 !important;
    }

    /* 2. Шапка формы (контейнер для крестика) */
    body .subscribe_frame.jqmWindow .form-header {
        position: relative !important;
        padding: 20px 50px 10px 20px !important; /* Место под крестик справа */
    }

    /* 3. КРЕСТИК (теперь он внутри заголовка благодаря JS) */
    body .subscribe_frame.jqmWindow .form-header .jqmClose.top-close {
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
        left: auto !important;
        
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 32px !important;
        height: 32px !important;
        
        background: #f2f2f2 !important;
        border-radius: 50% !important;
        z-index: 10 !important;
        margin: 0 !important;
    }

    /* 4. Тело формы */
    body .subscribe_frame.jqmWindow .form-body {
        padding: 0 20px 25px 20px !important;
    }

    /* 5. Заголовок */
    body .subscribe_frame.jqmWindow .title {
        font-size: 20px !important;
        line-height: 1.2 !important;
    }

    /* 6. Фикс для оверлея (темного фона), чтобы он не создавал скролл */
    .jqmOverlay {
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
        /*z-index: 99999 !important;*/
    }
    .jqmWindow.subscribe_frame {
    padding-top: 0 !important;
}
}


/* правила цветов для виджета b24 */
.b24-widget-button-inner-item svg,
.b24-widget-button-inner-item svg path,
.b24-crm-button-chat-icon,
.b24-crm-button-webform-icon,
.b24-crm-button-call-icon {
    fill: #6bc0ec !important;
}

/* правила цветов для виджета b24 */
.b24-widget-button-social-item.b24-widget-button-openline_livechat {
    background-color: #000000 !important; 
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2231%22%20height%3D%2228%22%20viewBox%3D%220%200%2031%2028%22%3E%3Cpath%20fill%3D%22%236bc0ec%22%20fill-rule%3D%22evenodd%22%20d%3D%22M23.29%2013.25V2.84c0-1.378-1.386-2.84-2.795-2.84h-17.7C1.385%200%200%201.462%200%202.84v10.41c0%201.674%201.385%203.136%202.795%202.84H5.59v5.68h.93c.04%200%20.29-1.05.933-.947l3.726-4.732h9.315c1.41.296%202.795-1.166%202.795-2.84zm2.795-3.785v4.733c.348%202.407-1.756%204.558-4.658%204.732h-8.385l-1.863%201.893c.22%201.123%201.342%202.127%202.794%201.893h7.453l2.795%203.786c.623-.102.93.947.93.947h.933v-4.734h1.863c1.57.234%202.795-1.02%202.795-2.84v-7.57c0-1.588-1.225-2.84-2.795-2.84h-1.863z%22/%3E%3C/svg%3E") !important;
}
/* правила цветов для виджета b24 */
.b24-widget-button-social-item.b24-widget-button-crmform {
    background-color: #000000 !important; 
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%236bc0ec%22%20fill-rule%3D%22evenodd%22%20d%3D%22M22.407%200h-21.1C.586%200%200%20.586%200%201.306v21.1c0%20.72.586%201.306%201.306%201.306h21.1c.72%200%201.306-.586%201.306-1.305V1.297C23.702.587%2023.117%200%2022.407%200zm-9.094%2018.046c0%20.41-.338.737-.738.737H3.9c-.41%200-.738-.337-.738-.737v-1.634c0-.408.337-.737.737-.737h8.675c.41%200%20.738.337.738.737v1.634zm7.246-5.79c0%20.408-.338.737-.738.737H3.89c-.41%200-.737-.338-.737-.737v-1.634c0-.408.337-.737.737-.737h15.923c.41%200%20.738.337.738.737v1.634h.01zm0-5.8c0%20.41-.338.738-.738.738H3.89c-.41%200-.737-.338-.737-.738V4.822c0-.408.337-.737.737-.737h15.923c.41%200%20.738.338.738.737v1.634h.01z%22/%3E%3C/svg%3E") !important;
}