/* Хедер */
/*.container-header {
/*    background-color: #004e89 !important; /* Цвет хедера */
/*    background-image: none !important; /* Убирает градиент если есть */
/*}
.header,
.container-header,
.site-header {
    height: 180px !important;
    overflow: visible !important;
}*/
.container-header {
    background-image: url('/media/templates/site/cassiopeia/images/Banner3.png') !important;
    background-size: cover !important;     /* картинка растягивается на весь хедер */
    background-position: center !important; /* центрируем */
    background-repeat: no-repeat !important; /* не повторяем */
    height: 180px !important;               /* ваша высота */
}

                                     /* Надпись в хедере */
.top-support-bar {
    background-color: #4682B4;
    color: #ffffff;
    text-align: center;
    font-size: 1rem;
    /*font-weight: bold;*/
    padding: 6px 0;            /* высота строки */
    margin: 0 !important; /* убираем отступы */
    position: relative; /* делаем шире и смещаем влево */
    top: -8px;  /* смещение вверх] */
    right: -18px;               /* смещение вправо */
    width: calc(100% + 790px);  /* ширина  */
}
                                      /* Логотип*/
.navbar-brand img {
    position: relative;
    top: 10px;      /* смещение вниз */
    left: -10px;    /* смещение влево */
}

.navbar-brand {
    overflow: visible !important;  /* разрешаем картинке выходить вниз */
}
                                        /* Фон всего сайта */
/*body {
    background-color: #4682B4 !important;
}*/
body {
    background: linear-gradient(
        to right,
        #335a84,
        #4682B4 50%,
        #335a84
    ) !important;
}

                                      /* Все заголовки в правой боковой панели */
.container-sidebar-right [class*="header"],
.container-sidebar-right [class*="title"],
.container-sidebar-right [class*="heading"] 
{
    font-size: 16px !important;
    line-height: 1.2 !important;      /* высота строки */
    padding: 6px 10px !important;     /* высота фона */ 
    color: #ffffff !important; /* Цвет заголовка */
    background-color: #4682B4 !important; /* Цвет фона заголовка */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;  /* Тень заголовка */
}

                                        /*     Правая боковая панель     */
/* Принудительно убираем вертикальные промежутки между модулями */
.container-sidebar-right > * {
    margin-top: 5px !important;
    margin-bottom: 0px !important;
    position: relative;
    left: 1px; /* двигаем на 1px вправо */
}
/* Уменьшаем расстояние между пунктами меню */
.container-sidebar-right ul li {
    font-size: 14px !important;
    margin-bottom: 0px !important; /* Отступ между пунктами */
    padding: 1px 0 !important;     /* Внутренние отступы */
}
/* Убираем лишние внутренние отступы меню в правой панели */
.container-sidebar-right ul {
    margin-top: -10px !important;    /* расстояние между заголовком и первым пунктом */
    margin-bottom: -5px !important; /* расстояние между последним пунктом и низом контейнера */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
/* Эффект наведения на пункты меню в правой панели */
.container-sidebar-right ul li a:hover {
    font-weight: bold !important;
    position: relative;
    right: -5px; /* смещение влево */
}
/* Активный пункт меню */
.container-sidebar-right ul li.current a,
.container-sidebar-right ul li.active a {
    font-weight: bold !important;
    position: relative;
}
/* На всякий случай: убираем дергание при наведении */
.container-sidebar-right ul li a {
    display: inline-block;
    transition: left 0.15s ease, font-weight 0.1s ease;
}

                                /* Все заголовки в левой боковой панели */
.container-sidebar-left [class*="header"],
.container-sidebar-left [class*="title"],
.container-sidebar-left [class*="heading"] {
    font-size: 16px !important;
    line-height: 1.2 !important;      /* высота строки */
    padding: 6px 10px !important;     /* высота фона */ 
    color: #ffffff !important; /* Цвет заголовка */
    background-color: #4682B4 !important; /* Цвет фона заголовка */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important; /* Тень заголовка */
}

                                      /*      Левая боковая панель      */
/* Принудительно убираем вертикальные промежутки между модулями */
.container-sidebar-left > * {
    margin-top: 5px !important;
    margin-bottom: 0px !important;
    position: relative;
    right: 1px; /* двигаем на 1px влево */
    width: calc(100% - 25px) !important; /* уменьшили ширину контейнера */
}
/* Уменьшаем расстояние между пунктами меню */
.container-sidebar-left ul li {
    font-size: 14px !important;
    margin-bottom: 0px !important; /* Отступ между пунктами */
    padding: 1px 0 !important;     /* Внутренние отступы */
}
/* Убираем лишние внутренние отступы меню в левой панели */
.container-sidebar-left ul {
    margin-top: -10px !important;    /* расстояние между заголовком и первым пунктом */
    margin-bottom: -5px !important; /* расстояние между последним пунктом и низом контейнера */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Эффект наведения на пункты меню в левой панели */
.container-sidebar-left ul li a:hover {
    font-weight: bold !important;
    position: relative;
    right: -5px; /* смещение влево */
}
/* Активный пункт меню */
.container-sidebar-left ul li.current a,
.container-sidebar-left ul li.active a {
    font-weight: bold !important;
    position: relative;
}
/* На всякий случай: убираем дергание при наведении */
.container-sidebar-left ul li a {
    display: inline-block;
    transition: left 0.15s ease, font-weight 0.1s ease;
}

                                 /* Белый фон в центре с отступами и тенями */
.container-component {
    background-color: #FFFFFF !important;
    border-radius: 8px;
    padding: 20px 30px 20px 15px !important; /* верх, прав, низ, лев (внутри контейнера)*/
    margin: 5px 0 !important;
    margin-left: -25px !important; /*двигаем контейнер влево*/
    width: calc(100% + 30px) !important; /*делаем контейнер шире*/
    border-top: 10px solid #F5F5F5 !important; /* Прямоугольник сверху и низу */
    border-bottom: 20px solid #F5F5F5 !important;
}
/* Просто добавляем фон к каждому элементу отдельно */
.container-sidebar-left,
.container-component,
.container-sidebar-right {
    background: #F5F5F5;
    border-radius: 8px;
    padding: 15px;
    padding-top: 2px !important;
    margin: 5px 0;
}

/* Чтобы создать видимость общего контейнера */
.container-sidebar-left {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin-right: -5px; /* Немного перекрываем */
}

.container-component {
    border-radius: 0;
    margin: 10px 0;
}

.container-sidebar-right {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -10px; /* Немного перекрываем */
}
/* Убираем стандартные отступы grid */
.site-grid {
    gap: 0 !important;
    row-gap: 0 !important;
    column-gap: 0 !important;
}

                                         /*   Горизонтальное меню   */
/* Сдвигаем меню вправо, чтобы совпадало с основным контентом */
.navbar-brand,
.container-nav {
    padding-left: 35px !important; /* Одинаковый отступ для выравнивания */
    position: relative;
    top: -20px; /* визуально опускаем меню вниз, НЕ растягивая хедер */
}
/* Базовый стиль пунктов горизонтального меню */
.container-nav ul li a {
    border: 2px solid #4682B4!important;
    border-radius: 6px !important;
    background: #4682B4;  
    padding: 4px 16px !important; /*вертикальный/горизонтальный отступ внутри*/
    color: #FFFFFF !important; /* цвет текста */
    display: inline-block;
    margin: 0 -11px; /* расстояние между пунктами */
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
/* При наведении */
.container-nav ul li a:hover {
    border-color: #5B94C4 !important;  /* светлее тон */
    background-color: #87CEEB !important; /* легкий светлый фон */
    color: #000000 !important; /* цвет текста */
}
/* Активный пункт меню */
.container-nav ul li.active a,
.container-nav ul li.current a {
    border-color: #5B94C4 !important;  /* светлее тон */
    background-color: #87CEEB !important;
    color: #000000 !important; /* цвет текста */
}
                                      /* Кнопка Личный кабинет Интернет*/
.lk-button {
    display: inline-block;  
    background: #FF4500;
    color: #fff;
    font-weight: bold;
    padding: 12px 25px;
    text-align: center;
    border-radius: 20px;
    font-size: 16px;
    text-decoration: none;
    border: 1px solid #000000;
    line-height: 1.2;
    letter-spacing: 0.5px;
    position: relative; /* Необходимо для позиционирования псевдоэлемента */
}
/* Создаем внутреннюю рамку */
.lk-button::before {
    content: '';
    position: absolute;
    top: 4px; /* Отступ от внешней границы */
    left: 4px;
    right: 4px;
    bottom: 4px;
    border: 1px solid white; /* Белая внутренняя рамка */
    border-radius: 16px; /* Немного меньше, чем основная кнопка */
    pointer-events: none; /* Чтобы не мешало кликам */
}

.lk-button:hover {
    background: #ff0000;
    color: #fff; 
    text-decoration: none;
}
                                        /* Кнопка Личный кабинет КТВ*/
.rk-button {
    display: inline-block;  
    background: #4682B4;
    color: #fff;
    font-weight: bold;
    padding: 12px 25px;
    text-align: center;
    border-radius: 20px;
    font-size: 16px;
    text-decoration: none;
    border: 1px solid #000000;
    line-height: 1.2;
    letter-spacing: 0.5px;
    position: relative; /* Необходимо для позиционирования псевдоэлемента */
}

/* Создаем внутреннюю рамку */
.rk-button::before {
    content: '';
    position: absolute;
    top: 4px; /* Отступ от внешней границы */
    left: 4px;
    right: 4px;
    bottom: 4px;
    border: 1px solid white; /* Белая внутренняя рамка */
    border-radius: 16px; /* Немного меньше, чем основная кнопка */
    pointer-events: none; /* Чтобы не мешало кликам */
}

.rk-button:hover {
    background: #3a5fc0; /* Меняем цвет при наведении */
    color: #fff;
    text-decoration: none;  
}
/* скрол бар справа*/
html {
    overflow-y: scroll;
}
/*абзац в тексте контента*/
.container-component p {
    text-indent: 20px; /* размер красной строки */
}
                                        /*Модуль кнопка Телеграмм*/
.tg-button {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    border: none !important;
}
.tg-button a {
    background: #0088CC !important; /* обычный цвет */
    border: 1px solid #0088CC !important; 
    transition: background 0.2s ease;
}

.tg-button a:hover {
    background: #24A1DE !important; /* цвет при наведении */
    border: 1px solid #0088CC !important; 
}
  
/* Поднимаем кнопку вверх */
.tg-button a {
    position: relative;
    top: -15px;
    left: 25px;