@font-face {
    font-family: 'DINPro-Bold';
    src: url('/static/fonts/DINPro-Bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'DINPro';
    src: url('/static/fonts/DINPro-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}



/* Общий стиль для всей страницы */
body {
    background-color: #003C6F !important; /* Устанавливаем фон основного окна */
    font-family: 'DINPro', serif !important;
    margin: 0;
    padding: 0;
}

/* Стиль заголовков */
h1, h2, h3, h4, h5, h6 {
    font-family: 'DINPro-Bold', serif !important; 
    font-weight: bold; /* Жирный шрифт */
    font-size: 27px !important; 
    color: #ffffff; /* Черный цвет текста (можно изменить при необходимости) */
    margin: 0.5rem 0; /* Отступы для заголовков */
}



.training-summary h5 {
    font-size: 20px; /* Размер заголовка */
    font-weight: bold; /* Жирный текст */
    font-family: 'DINPro', serif !important;
    color: #673377; /* Цвет заголовка */
    margin-bottom: 15px; /* Отступ снизу */
}

/* Стили для текста внутри */
.training-summary p {
    font-size: 16px; /* Размер текста */
    font-family: 'DINPro', serif !important;
    color: #000000; /* Цвет заголовка */
    margin-bottom: 10px; /* Отступ между параграфами */
}

.form-group {
    font-family: 'DINPro', serif !important;
    font-size: 20px;
    font-weight: bold;
    color: #ffffff !important;
    margin: 0;
}

.calc-form-group {
    font-family: 'DINPro', serif !important;
    font-size: 20px;
    font-weight: bold;
    color: #000000 !important;
    margin: 0;
}

a {
    font-family: 'DINPro', serif !important; 
    font-style: italic;
    font-size: 16px !important; 
    color: #ffffff; /* Черный цвет текста (можно изменить при необходимости) */
    margin: 0.5rem 0; /* Отступы для заголовков */
}

/* --- Стили для header --- */
header {
    background-color: #673377; /* Цвет фона */
    font-family: 'DINPro-Bold', serif !important; 
    
    color: white; /* Цвет текста по умолчанию */
    padding: 20px;
    text-align: center;
}

header .project {
    color: #68C9E1; 
}

header .author {
    color: #68C9E1; 
}

header .location {
    color: #68C9E1; 
}

header strong {
    font-weight: bold;
}

/* Общие стили для простого текста */
p, span, div, li {
    font-family: 'DIN', serif; /* Основной шрифт */
    font-size: 16px; /* Размер шрифта */
    color: #ffffff; /* Цвет текста */
    line-height: 1.5; /* Межстрочный интервал */
    margin-bottom: 1rem; /* Отступ снизу для абзацев */
}


/* Адаптация header для экранов шириной до 1440px */
@media (max-width: 1440px) {
    header {
        
        background-size: cover;
        height: 140px;
    }
}

/* Адаптация header для планшетов (до 768px) */
@media (max-width: 768px) {
    header {
        
        background-size: cover;
        height: 70px;
    }
}

/* Адаптация header для телефонов (до 375px) */
@media (max-width: 375px) {
    header {
        
        background-size: cover;
        height: 60px;
    }
}


/* Общий стиль для контейнера календаря */
.calendar-container {
    background-color: #ffffff; /* Белый фон для календаря */
    border: 2px solid #68C9E1; /* Голубая рамка */
    border-radius: 10px; /* Скругленные углы */
    
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Тень для глубины */
    max-width: 100%;
    min-height: 1000;
    max-height: 100%; /* Или любая другая желаемая высота */
    overflow-y: auto; /* Позволяет прокручивать содержимое, если оно превышает заданную высоту */

    flex-grow: 1; /* Календарь растягивается на всё доступное пространство */
    overflow: auto; /* Позволяет прокручивать содержимое, если оно превышает высоту */
    height: 100%; /* Растягивается на всё доступное пространство */
    padding: 10px; /* Умеренные внутренние отступы */
    box-sizing: border-box; /* Учитываем padding при расчете размеров */
}



/* Стили заголовка календаря */
.fc-header-toolbar {
    background-color: #003C6F; /* Тёмно-синий фон */
    color: #ffffff; /* Белый текст */
    padding: 10px;
    border-radius: 8px; /* Скругление углов заголовка */
    margin-bottom: 10px;
}

/* Кнопки в заголовке */
.fc-button {
    font-family: 'DINPro-Bold', serif !important;
    font-size: 14px;
    color: #ffffff !important;
    background-color: #673377 !important;
    border: none;
    border-radius: 5px;
    padding: 5px 15px;
    margin: 0 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Тень для кнопок */
    transition: background-color 0.3s ease;
}

.fc-button:hover {
    background-color: #68C9E1 !important; /* Цвет кнопки при наведении */
    color: #003C6F !important; /* Текст при наведении */
}

/* Активная кнопка */
.fc-button-active {
    background-color: #68C9E1 !important;
    color: #003C6F !important;
    border: 2px solid #003C6F; /* Обводка активной кнопки */
}

/* Стили ячеек календаря */
.fc-daygrid-day {
    background-color: #003C6F; /* Лёгкий серый фон */
    color: #003C6F; /* Тёмно-синий текст */
    border: 1px solid #e3e6ea; /* Тонкая граница */
    font-family: 'DINPro', serif;
    font-size: 14px;
    text-align: center; /* Центрирование текста */
    height: 100%; /* Устанавливает высоту для ячеек */
    max-height: 50px; /* Максимальная высота */
    overflow: visible; /* Обрезка содержимого, если оно превышает высоту */

    padding: 2px; /* Добавляет немного отступов */
}

.fc-daygrid-day-frame {
    display: flex;
    align-items: center; /* Выравнивание содержимого по вертикали */
    justify-content: center; /* Выравнивание содержимого по горизонтали */
    height: 100%;
}

.fc-daygrid-day-events {
    margin-top: 2px; /* Минимизируем отступы между событиями */
}

.fc-daygrid-day:hover {
    background-color: #68C9E1; /* Голубой фон при наведении */
    color: #ffffff; /* Белый текст */
}

/* Стили текущего дня */
.fc-day-today {
    background-color: #673377 !important; /* Фиолетовый фон для текущего дня */
    color: #ffffff !important; /* Белый текст */
    font-weight: bold;
    border-radius: 5px; /* Скруглённые углы */
}

/* Стили событий */
.fc-event {
    background-color: #68C9E1 !important; /* Голубой фон событий */
    color: #ffffff !important; /* Белый текст */
    font-family: 'DINPro-Bold', serif !important;
    font-size: 14px;
    padding: 2px 8px; /* Внутренние отступы */
    border-radius: 5px;
    margin: 2px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Тень для событий */
}

.fc-event:hover {
    background-color: #673377 !important; /* Фиолетовый фон при наведении */
    color: #ffffff !important;
}

/* Стили выходных */
.fc-day-sun, .fc-day-sat {
    background-color: #673377; /* Светлый голубой фон */
    color: #003C6F; /* Тёмно-синий текст */
}

/* Ячейки без дат */
.fc-day-other {
    background-color: #000000; /* Светло-серый фон */
    color: #a0a0a0; /* Тусклый текст */
}


/* --- Основные стили для навигации --- */


/* Кнопка-гамбургер */
.navbar-toggler {
    margin-left: auto; /* Выравниваем гамбургер вправо */
    border: none; /* Убираем рамку кнопки */
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=UTF8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23CAAFC5' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Прозрачная навигация для экранов от 992px */
@media (min-width: 992px) {
    .navbar-collapse {
        background-color: transparent !important; /* Прозрачный фон */
        position: relative;
        padding: 0;
        top: auto;
        right: auto;
        width: auto;
        z-index: auto;
        border-radius: 0;
    }

    .navbar-nav {
        flex-direction: row; /* Горизонтальное расположение пунктов */
        align-items: center;
        margin: 0;
        background-color: transparent !important; /* Прозрачный фон */
    }

    .nav-link {
        color: #ffffff !important; /* Цвет текста */
        font-family: 'DIN_Pro', serif !important; /* Шрифт DIN_Pro */
        
        font-size: 18
        px; /* Размер шрифта */
        padding: 0.5rem 1rem;
        background-color: transparent !important; /* Прозрачный фон */
    }
    .btn-link{
        color: #ffffff !important; /* Цвет текста */
        font-family: 'DIN_Pro', serif !important; /* Шрифт DIN_Pro */
        
        font-size: 18
        px; /* Размер шрифта */
        padding: 0.5rem 1rem;
        background-color: transparent !important; /* Прозрачный фон */
    }

    .nav-link:hover {
        color: rgb(26, 20, 20) !important; /* Белый текст при наведении */
        text-decoration: none; /* Убираем подчеркивание */
    }
}

/* Серый фон для гамбургер-меню (до 991px) */
@media (max-width: 991px) {
    .navbar-collapse {
        background-color: #333 !important; /* Серый фон */
        position: absolute; /* Абсолютное позиционирование */
        top: 60px; /* Расположение меню под шапкой */
        right: 10px; /* Смещение вправо */
        width: auto;
        z-index: 1000;
        border-radius: 8px; /* Скругленные углы */
        padding: 0.5rem;
    }

    .navbar-nav {
        flex-direction: column; /* Вертикальное расположение пунктов */
        align-items: flex-start;
        margin: 0;
    }

    .nav-link {
        color: #CAAFC5 !important; /* Цвет текста */
        font-family: 'DIN_Pro', serif !important; /* Шрифт DIN_Pro */
        font-style: italic; /* Курсив */
        font-size: 22px; /* Размер шрифта */
    }

    .nav-link:hover {
        color: white !important; /* Белый текст при наведении */
        
    }

    .dropdown-menu {
        background-color: #444; /* Темный фон выпадающего меню */
        border-radius: 8px;
        padding: 0.5rem;
    }

    .dropdown-item {
        color: white;
        background-color: transparent !important;
    }

    .dropdown-item:hover {
        color: red;
        background-color: rgba(255, 255, 255, 0.1); /* Полупрозрачный фон */
    }
}

/* --- Стили иконок Dashboard --- */
.row {
    background-color: transparent !important;
    padding: 0 !important; /* Убираем отступы между элементами сетки */
}

.col {
    background-color: transparent !important;
    padding: 0 !important; /* Убираем отступы между элементами сетки */
}


.card {
    background-color: transparent !important; /* Фон прозрачный */
    border: none !important; /* Убираем рамку */
    display: flex !important; /* Flexbox для точного управления */
    flex-direction: column !important; /* Вертикальное расположение содержимого */
    align-items: center !important; /* Центрирование содержимого */
    justify-content: center !important; /* Центрирование по вертикали */
    text-align: center !important; /* Центрирование текста */
    margin: 0 auto !important; /* Центрируем карточку */
    padding: 0 !important; /* Убираем отступы */
}


/* Базовые стили для иконок */
.card-img-top {
    max-width: 256px; /* Максимальная ширина иконки */
    max-height: 256px; /* Максимальная высота иконки */
    width: 100%; /* Адаптивная ширина */
    height: auto; /* Сохраняем пропорции */
    object-fit: contain; /* Пропорциональное вписывание изображения */
    margin: 0 auto; /* Центрируем изображение */
}

/* Для экранов шириной до 1200px */
@media (max-width: 1200px) {
    .card-img-top {
        max-width: 180px; /* Уменьшаем размер иконок */
        max-height: 180px;
    }
}

/* Для экранов шириной до 768px */
@media (max-width: 768px) {
    .card-img-top {
        max-width: 120px; /* Еще меньше для мобильных устройств */
        max-height: 120px;
    }
}

/* Для экранов шириной до 576px (телефоны) */
@media (max-width: 576px) {
    .card-img-top {
        max-width: 90px; /* Минимальный размер */
        max-height: 90px;
    }
}

.card-body {
    display: flex !important; /* Включаем flexbox */
    justify-content: center !important; /* Центрируем текст по горизонтали */
    align-items: center !important; /* Центрируем текст по вертикали */
    text-align: center !important; /* Центрируем текст */
    padding: 100 !important; /* Убираем отступы */
    margin: 0 !important; /* Убираем внешние отступы */
}

.card-title {
    display: block !important; /* Гарантируем блочный элемент */
    font-family: 'DINPro', serif !important; 
    color: #ffffff !important; /* Черный цвет */
    font-size: 22px; /* Размер шрифта (можно изменить по необходимости) */
    font-weight: normal; /* Нормальный вес текста */
    width: 100% !important; /* Растягиваем на всю ширину контейнера */
    margin: 0 auto !important; /* Центрируем текст */
    padding: 0 !important; /* Убираем внутренние отступы */
    text-align: center !important; /* Центрируем текст */
    margin-top: 0px; /* Отступ сверху */
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8); /* Легкая тень для повышения читаемости */
}

/* --- Стили для основного контента --- */
main {
    padding: 20px;
}

/* --- Стили таблиц --- */

table {
    width: 100%;
    border-collapse: collapse;
}


/* Базовый стиль таблицы */
table {
    width: 100%;
    border-collapse: collapse; /* Убираем лишние промежутки */
    border: 1px solid #ddd; /* Рамка таблицы */
}

/* Общий стиль таблицы */
table {
    width: 100%;
    border-collapse: collapse;
}

/* Стиль для ячеек */
table td, table th {
    border: 1px solid #ddd; /* Рамка ячеек */
    padding: 8px; /* Внутренние отступы */
    font-family: 'DINPro', serif; /* Шрифт */
    font-size: 16px; /* Размер текста */
    color: #F0F7FC !important; /* Цвет текста */
    text-align: left; /* Выравнивание текста */
}

/* Стиль заголовков таблиц */
table th {
    background-color: #0376C4; /* Цвет фона заголовков таблиц */
    font-family: 'DINPro-Bold', serif; /* Жирный шрифт */
    font-weight: bold; /* Жирный текст */
    font-size: 21px; /* Размер текста */
    padding: 10px; /* Внутренние отступы */
    text-align: center; /* Центрирование текста */
}

/* Общий стиль для строк */
table tr {
    font-family: 'DINPro', serif; /* Шрифт для строк */
    font-size: 16px; /* Размер текста */
    background-color: #0376C4; /* Цвет фона строк */
    color: #F0F7FC; /* Цвет текста */
    transition: background-color 0.3s ease; /* Плавный переход цвета фона */
}

/* Цвет для активного пользователя */
tr.user-online {
    background-color: #FDAC2C; /* Оранжевый фон */
    color: #F0F7FC !important; /* Цвет текста */
}

/* Цвет для заблокированного пользователя */
tr.user-blocked {
    background-color: lightgray; /* Светло-серый фон */
    color: #F0F7FC !important; /* Цвет текста */
}

/* Контейнер таблицы с горизонтальной прокруткой */
.table-container {
    overflow-x: auto; /* Включаем горизонтальную прокрутку */
    -webkit-overflow-scrolling: touch; /* Плавный скролл для iOS */
    margin-bottom: 1rem; /* Отступ снизу */
}

/* Для текста с длинными строками */
.table-container th,
.table-container td {
    white-space: nowrap; /* Запрещаем перенос текста */
    overflow: hidden; /* Скрываем переполненный текст */
    text-overflow: ellipsis; /* Добавляем многоточие */
}

/* Для заголовков с длинным текстом */
.rotated-name {
    writing-mode: vertical-rl; /* Вертикальное направление текста */
    transform: rotate(180deg); /* Поворот текста на 180 градусов */
    justify-content: center; /* Горизонтальное выравнивание */
    align-items: center; /* Вертикальное выравнивание */
    text-align: center; /* Центрирование текста */
    padding: 8px;
}



/* Адаптация таблиц для мобильных устройств */
@media (max-width: 768px) {
    .table-container table {
        width: 100%;
        table-layout: auto; /* Позволяем содержимому влиять на ширину столбцов */
    }

    .table-container th,
    .table-container td {
        white-space: normal; /* Разрешаем перенос текста */
        word-wrap: break-word;
        padding: 6px;
    }
}

/* Ограничение ширины текста в колонках */
.role-access-level {
    min-width: 50px;
    text-align: center;
}

/* Общий стиль для модального окна */
.modal {
    display: none; /* Скрыто по умолчанию */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: transparent;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    width: auto; /* Автоматическая ширина */
    max-width: 500px; /* Максимальная ширина */
    height: auto; /* Автоматическая высота */
    max-height: 90vh; /* Максимальная высота для экрана */
    overflow-y: auto; /* Прокрутка при переполнении */
    z-index: 1050;
    padding: 0; /* Убираем лишние внутренние отступы */
}

/* Заголовок модального окна */
.modal-header {
    background-color: #673377; /* Цвет фона */
    padding: 0.8rem 1rem; /* Внутренние отступы */
    border-bottom: 1px solid #ddd; /* Граница снизу */
    display: flex;
    font-family: 'DINPro', serif !important; /* Шрифт для заголовка */
    font-size: 19px !important; /* Размер текста */
    color: #ffffff !important; /* Чёрный текст */
    justify-content: space-between; /* Пространство между элементами */
    align-items: center; /* Центрирование элементов по вертикали */
}

/* Заголовок текста */
.modal-title {
    font-family: 'DIN_Pro', serif;
    font-size: 20px;
    font-weight: bold;
    color: #000 !important; /* Чёрный текст */
    margin: 0;
}




/* Кнопка закрытия */
.modal-header .btn-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: #000 !important; /* Чёрный текст кнопки закрытия */
}

/* Контент модального окна */
.modal-body {
    padding: 1rem;
    font-family: 'DINPro', serif;
    font-size: 16px;
    color: #000000 !important; /* Чёрный текст в теле модального окна */
    line-height: 1.5;
    overflow-y: auto; /* Добавляем прокрутку, если содержимое превышает высоту */
}


.modal-title {
    background-color: #673377; /* Цвет фона */
    padding: 0.8rem 1rem; /* Внутренние отступы */
    border-bottom: 1px solid #ddd; /* Граница снизу */
    display: flex;
    font-family: 'DINPro', serif !important; /* Шрифт для заголовка */
    font-size: 19px !important; /* Размер текста */
    color: #ffffff !important; /* Чёрный текст */
    justify-content: space-between; /* Пространство между элементами */
    align-items: center; /* Центрирование элементов по вертикали */
}
.mb-3 {
    background-color: #ffffff; /* Белый цвет фона */
    font-family: 'DINPro', serif; /* Шрифт DINPro */
    color: #000 !important; /* Чёрный цвет текста */
    
    margin-bottom: 1rem; /* Отступ снизу */
}

.form-check-label {
    font-family: 'DINPro', serif; /* Унифицированный шрифт */
    font-size: 16px; /* Размер текста */
    color: #000; /* Чёрный текст */
    line-height: 1.5; /* Межстрочный интервал */
    margin-left: 0.5rem; /* Отступ слева от чекбокса */
    cursor: pointer; /* Указатель мыши при наведении */
    user-select: none; /* Отключение выделения текста */
}

/* Футер модального окна */
.modal-footer {
    background-color: #f8f9fa;
    padding: 0.8rem 1rem;
    border-top: 1px solid #ddd;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    color: #000 !important; /* Чёрный текст в футере */
}

/* Универсальные стили для кнопок */
.modal-footer .btn {
    padding: 0.5rem 1rem;
    font-size: 14px;
    font-weight: bold;
    border-radius: 4px;
    color: #ffffff !important; /* Чёрный текст кнопок */
}

.modal-footer .btn-secondary {
    background-color: #ccc;
    color: #ffffff !important; /* Чёрный текст */
}

.modal-footer .btn-secondary:hover {
    background-color: #b3b3b3;
}

.modal-footer .btn-primary {
    background-color: #1DDAC5;
    color: #ffffff !important; /* Чёрный текст */
}

.modal-footer .btn-primary:hover {
    background-color: #17B5A5;
}


/* Выравнивание и отступы для списков в модальном окне */
.roles-container {
    margin-top: 1rem;
    padding: 0.5rem;
    border: 1px solid #ddd; /* Граница для списка */
    border-radius: 4px;
    max-height: 300px; /* Ограничиваем высоту */
    overflow-y: auto; /* Добавляем прокрутку */
}

.role-item {
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center; /* Центрирование по вертикали */
}

.role-item input[type="checkbox"] {
    margin-right: 0.5rem; /* Отступ для чекбокса */
}

.role-item label {
    font-family: 'DIN_Pro', serif;
    font-size: 14px;
    color: #000;
}

.role-item .description {
    font-size: 12px;
    color: #6c757d;
    margin-left: 0.5rem;
}

/* Для маленьких экранов (мобильных устройств) */
@media (max-width: 768px) {
    .modal {
        width: 90%; /* Ширина модального окна на мобильных */
        max-width: 90%; /* Не больше ширины экрана */
        padding: 15px; /* Уменьшаем внутренние отступы */
        top: 50%; /* Центрируем вертикально */
        left: 50%; /* Центрируем горизонтально */
        transform: translate(-50%, -50%);
    }

    .modal h3 {
        font-size: 18px; /* Уменьшаем размер заголовка */
        text-align: center;
    }

    .modal-footer {
        flex-direction: column; /* Кнопки располагаются вертикально */
        gap: 10px; /* Расстояние между кнопками */
    }

    .modal-footer button {
        width: 100%; /* Кнопки растягиваются на ширину */
    }
}


/* Общий стиль для всех кнопок */
button {
    padding: 10px 15px; /* Универсальные отступы */
    font-family: 'DINPro-Bold', serif !important; /* Шрифт DIN_Pro */
    font-size: 14px; /* Размер шрифта */
    font-weight: bold; /* Жирный текст */
    border: none; /* Убираем рамку */
    border-radius: 4px; /* Скругленные углы */
    cursor: pointer; /* Указатель при наведении */
    display: inline-block; /* Гарантируем одинаковую ширину */
    text-align: center; /* Центрируем текст */
    box-sizing: border-box; /* Для одинаковых размеров */
    color: #000 !important; /* Черный текст */
    pointer-events: auto !important; /* Включает интерактивность кнопок */
}

/* --- Универсальный стиль для отключенных кнопок (disabled) --- */
button:disabled {
    background-color: #d6d6d6 !important; /* Светло-серый фон */
    color: #9a9a9a !important; /* Светло-серый текст */
    border: none !important; /* Без рамки */
    padding: 10px 15px !important; /* Отступы, совпадающие с активными кнопками */
    font-family: 'DINPro-Bold', serif !important; /* Шрифт DIN_Pro */
    font-size: 14px !important; /* Размер шрифта */
    font-weight: bold !important; /* Жирный текст */
    border-radius: 4px !important; /* Скругленные углы */
    cursor: not-allowed !important; /* Указатель для отключенных кнопок */
    display: inline-block !important; /* Гарантируем одинаковую ширину */
    text-align: center !important; /* Центрируем текст */
    box-sizing: border-box !important; /* Для одинаковых размеров */
}

/* --- Убираем уменьшенные размеры для btn-sm --- */
button.btn-sm:disabled {
    padding: 10px 15px !important; /* Отступы как у стандартных кнопок */
    font-size: 16px !important; /* Стандартный размер шрифта */
}

/* --- Кнопка Edit --- */
button.btn-edit {
    background-color: #68C9E1 !important; /* Голубой фон */
}

button.btn-edit:hover {
    background-color: #0099CC !important; /* Темно-голубой фон при наведении */
}

/* --- Кнопка Delete --- */
button.btn-delete {
    background-color: #FDAC2C !important; /* Розовый фон */
}

button.btn-delete:hover {
    background-color: #C3749E !important; /* Темно-розовый фон при наведении */
}

/* --- Кнопка Edit Functions --- */
button.btn-edit-functions {
    font-family: 'DINPro-Bold', serif !important; /* Шрифт DINPro */
    font-size: 16px !important; /* Размер шрифта */
    font-weight: bold !important; /* Жирный текст */
    background-color: #673377 !important; /* Зеленый фон */
}

button.btn-edit-functions:hover {
    background-color: #17B5A5 !important; /* Темно-зеленый фон при наведении */
}

/* --- Кнопка Add User --- */
button.btn-add-user {
    background-color: #673377 !important; 
    color: #ffffff !important;
    
}

button.btn-add-user:hover {
    background-color: #17B5A5 !important; /* Темно-зеленый фон при наведении */
}

/* --- Кнопка Add Client --- */
button.btn-add-client {
    background-color: #673377 !important; 
    color: #ffffff !important;
}

button.btn-add-client:hover {
    background-color: #17B5A5 !important; /* Темно-зеленый фон при наведении */
}

/* --- Кнопка Add Client --- */
button.btn-add-bulk {
    background-color: #673377 !important; /* Зеленый фон */
}

button.btn-add-bulk:hover {
    background-color: #17B5A5 !important; /* Темно-зеленый фон при наведении */
}

/* --- Кнопка Create Role --- */
button.create-role-button {
    background-color: #673377 !important; /* Зеленый фон */
    color: #ffffff !important;
}

button.create-role-button:hover {
    background-color: #17B5A5 !important; /* Темно-зеленый фон при наведении */
}

/* --- Кнопка Change Password --- */
button.btn-change-password {
    background-color: #981450 !important; 
    color: #ffffff !important;
}

button.btn-change-password:hover {
    background-color: #E8F276 !important; /* Светло-желтый фон при наведении */
}

/* --- Кнопки размера "sm" --- */
button.btn-sm {
    background-color: #673377 !important; 
    color: #ffffff !important;
    font-family: 'DINPro-Bold', serif !important;
    font-size: 18px !important; /* Уменьшенный размер шрифта */
    padding: 5px 10px !important; /* Уменьшенные отступы */
    border-radius: 4px; /* Скругленные углы */
}


button.btn-primary {
    background-color: #673377 !important; 
    color: #ffffff !important;
    font-family: 'DINPro-Bold', serif !important;
    font-size: 16px !important; /* Уменьшенный размер шрифта */
    padding: 5px 10px !important; /* Уменьшенные отступы */
    border-radius: 4px; /* Скругленные углы */
}

/* --- Кнопка Create Role --- */
button.btn-create-role {
    background-color: #673377 !important; /* Зеленый фон */
    color: #ffffff !important; /* Черный текст */
    font-family: 'DINPro-Bold', serif !important; /* Шрифт DIN_Pro */
    font-size: 16px; /* Размер текста */
    font-weight: bold; /* Жирный текст */
    padding: 10px 15px; /* Отступы */
    border: none; /* Без рамки */
    border-radius: 4px; /* Скругленные углы */
    cursor: pointer; /* Указатель при наведении */
    text-align: center;
}

button.btn-create-role:hover {
    background-color: #17B5A5 !important; /* Темно-зеленый фон при наведении */
}

/* --- Кнопка Edit Role --- */
button.btn-edit-role {
    font-size: 14px; /* Размер текста */
    background-color: #68C9E1 !important; /* Голубой фон */
    color: #000 !important; /* Черный текст */
}

button.btn-edit-role:hover {
    background-color: #0099CC !important; /* Темно-голубой фон при наведении */
}

/* --- Кнопка Edit Functions --- */
button.btn-edit-functions {
    background-color: #673377 !important; /* Зеленый фон */
    color: #ffffff !important; /* Черный текст */
}

button.btn-edit-functions:hover {
    background-color: #17B5A5 !important; /* Темно-зеленый фон при наведении */
}

/* --- Кнопка Delete Role --- */
button.btn-delete-role {
    background-color: #FDAC2C !important; /* Розовый фон */
    color: #000 !important; /* Черный текст */
}

button.btn-delete-role:hover {
    background-color: #C3749E !important; /* Темно-розовый фон при наведении */
}



/* Стили для футера */
.custom-footer {
    background-color: #f8f9fa; /* Светлый фон */
    padding: 1rem 0; /* Отступы сверху и снизу */
    margin-top: auto; /* Отодвигаем футер к нижней части страницы */
    text-align: center; /* Центрируем весь текст */
}

/* Стили для футера */
.custom-footer {
    background-color: #673377; /* Светло-зеленый фон */
    padding: 1rem 0; /* Отступы сверху и снизу */
    margin-top: auto; /* Отодвигаем футер к нижней части страницы */
    text-align: center; /* Центрируем весь текст */
}

/* Основной текст футера */
.footer-text {
    font-family: 'DIN_Pro', serif; /* Шрифт DIN_Pro */
    font-style: normal; /* Курсив */
    font-size: 18px; /* Размер шрифта */
    color: rgb(255, 255, 255); /* Черный текст */
    margin: 0.5rem 0; /* Отступы сверху и снизу */
}

/* Подзаголовок футера */
.footer-subtext {
    font-family: 'DIN_Pro', serif; /* Шрифт DIN_Pro */
    font-style: italic; /* Курсив */
    font-size: 16px; /* Размер шрифта */
    color: #ffffff; /* Черный текст */
    margin: 0.5rem 0; /* Отступы сверху и снизу */
}

/* Ссылка на сайт */
.footer-link a {
    font-family: 'DIN_Pro', serif; /* Шрифт DIN_Pro */
    font-size: 16px; /* Размер шрифта */
    font-style: italic; /* Курсив */
    color: #0000ff; /* Синий текст для ссылки */
    text-decoration: none; /* Убираем подчеркивание */
}

.footer-link a:hover {
    text-decoration: underline; /* Добавляем подчеркивание при наведении */
    color: #0056b3; /* Темно-синий цвет при наведении */
}

/* Логотип в футере */
.footer-logo {
    height: 30px; /* Высота логотипа */
    vertical-align: middle; /* Выравнивание логотипа с текстом */
    margin-right: 10px; /* Отступ справа от логотипа */
}


/* Стили для элемента "Warehouse" */
.list-group-item {
    cursor: pointer;
    background-color: #ffffff;
    transition: background-color 0.3s;
}

.list-group-item:hover {
    background-color: #f0f0f0;
}

/* Стили для контекстного меню */
#context-menu {
    position: absolute;
    z-index: 1000;
    background-color: #ffffff; /* Белый фон */
    border: 1px solid #ccc; /* Серая рамка */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Лёгкая тень */
    display: none;
    padding: 5px;
    border-radius: 5px; /* Скругленные углы */
}

#context-menu .dropdown-item {
    cursor: pointer;
    padding: 5px 10px;
    transition: background-color 0.2s;
    color: #000000; /* Чёрный текст */
    text-decoration: none;
    display: block; /* Элементы меню должны быть видимы */
}

#context-menu .dropdown-item:hover {
    background-color: #f0f0f0; /* Светло-серый фон при наведении */
    color: #000;
}

/* Сдвиг дочерних категорий */
.list-group-item {
    position: relative;
    padding-left: 20px; /* Отступ для всех элементов */
    transition: background-color 0.3s ease;
}

.list-group .list-group-item {
    margin-left: 20px; /* Дополнительный отступ для дочерних */
}

.list-group-item.inactive {
    background-color: #dcdcdc; /* Серый цвет для неактивных */
    color: #6c757d; /* Бледный текст */
    text-decoration: line-through; /* Зачеркнутый текст */
}

.toggle-btn {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
}

.toggle-btn:focus {
    outline: none;
}

.badge.bg-secondary {
    font-size: 0.85em;
}