/* Start:/university/materialno-tekhnicheskoe-obespechenie/basseyn/bassyin1.css?172864109417799*/
<?
require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");
$APPLICATION->SetTitle("Title");
?>.cd-main-header {
    /* Добавляем отступы для главного контейнера, если необходимо */
    padding: 20px 0; /* Отступы сверху и снизу */
    display: flex; /* Используем Flexbox для центрирования содержимого */
    flex-direction: column; /* Вертикальное выравнивание */
    justify-content: center; /* Центрируем по вертикали */
    align-items: center; /* Центрируем по горизонтали */
}
.mobile-schedule {
    display: none; /* Скрываем мобильную версию по умолчанию */
}

.desktop-schedule {
    display: block; /* Отображаем настольную версию по умолчанию */
}

.time-block {
  display: flex;
  align-items: center;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.event-block {
  display: flex;
  flex-direction: column;
  padding: 5px;
  margin-left: 10px;
  border: 1px solid #eee;
  border-radius: 5px;
  background-color: #f0f0f0;
}


.cd-main-header{
 background-color:  #3b4762;
 height: 7em;
display: flex;          /* Включаем Flexbox */
    justify-content: center; /* Центрируем по горизонтали */
    align-items: center;
}

.cd-main-header h1 {
    color: white;
    font-weight: 500;
    margin: 0px 0; /* Отступы сверху и снизу для заголовка */
}

.text-xl {
    font-size: 28 px; /* Размер шрифта */
    text-align: center; /* Центрирование текста */
    color: #fff; /* Цвет текста */
}

.break {
            text-align: center;
            font-weight: bold;
        }

        /* Стили для жирного шрифта времени сеансов */
        .time-text {
            font-weight: bold;
        }


/* Контейнер фильтров */
.filter-container {
    display: flex;
    gap: 15px; /* Отступы между элементами */
    justify-content: center; /* Центрируем элементы по горизонтали */
    align-items: center; /* Центрируем элементы по вертикали */
    margin: 20px 0; /* Отступы сверху и снизу для отделения от других элементов */
}

/* Стили для меток фильтров */
.filter-container label {
    color: black; /* Цвет текста меток */
    font-weight: bold;
    font-size: 1em; /* Размер шрифта для меток */
}

/* Стили для выпадающих списков */
.filter-container select {
    padding: 10px; /* Внутренний отступ */
    border: 1px solid #ccc; /* Обводка */
    border-radius: 0px; /* Закругленные углы */
    background-color: #fff; /* Цвет фона выпадающего списка */
    font-size: 14px; /* Размер шрифта */
    color: #333; /* Цвет текста */
}

/* Стили для кнопки сброса */
#reset-filters {
    padding: 10px 15px; /* Отступы для кнопки */
    background-color: #B99F6E; /* Цвет кнопки */
    color: white; /* Цвет текста кнопки */
    border: none; /* Без обводки */
    border-radius: 5px; /* Закругленные углы */
    cursor: pointer; /* Указатель для кликабельности */
    transition: background-color 0.3s; /* Плавный переход для фона */
}

/* Изменение фона кнопки сброса при наведении */
#reset-filters:hover {
    background-color: #A78D5B; /* Темнее при наведении */
}

/* Основные стили для контейнера расписания */
.schedule-container {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Отступы между элементами */
}
/* Заголовок расписания */
.schedule-header {}

.date-display {
    display: flex; /* Используем flex для расположения стрелок и даты */
    align-items: center; /* Центрируем элементы по вертикали */
    justify-content: center; /* Центрируем элементы по горизонтали */
    margin: 20px; /* Отступы сверху  */

}

/* Стили для стрелок */
#prev-day,
#next-day {
    background: none; /* Убираем фон */
    border: 10px; /*  обводку */
    font-size: 1.7em; /* размер кнопок */
    cursor: pointer; /* Указываем, что кнопки кликабельные */
    font-family: Montserrat;
    font-weight: bold;
}

/* Стили для текущей даты */
    #current-date {
        margin: 0 20px;
        text-align: center;
        font-weight: bold;
    }


/* Навигация по дням */
.day-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* Используем Flexbox для кнопок навигации дней */
    justify-content: center; /* Центрируем кнопки дней по горизонтали */
    margin-bottom: 10px;
}

/* Стили для контейнера дней недели */
.week-days {
    display: flex; /* Используем Flexbox для расположения дней недели */
    width: 100%; /* Занимают всю доступную ширину */
}

/* Стили для каждого дня */
.day-button {

    font-weight: bold;
    flex: 1; /* Каждый элемент занимает равное пространство */
    text-align: center; /* Центрирование текста по горизонтали */
    padding: 10px 0; /* Вертикальные отступы для лучшего восприятия */
    border-bottom: 2px solid #ddd; /* Нижняя граница для отделения */
    cursor: pointer; /* Курсор для кликабельности */
}

/* Делайте границу справа у каждой кнопки, кроме последней */
.day-button {
    border-right: 1px solid #ccc; /* Разделяющая линия между кнопками */
}

/
.day-button:last-child {
    border-right: 1px solid #ccc; 
}

/* Стили для активной кнопки дня */
.day-button.active {
    background-color: #B99F6E; /* Цвет фона для активной кнопки */
    color: #fff; /* Цвет текста для активной кнопки */
}

.break {
    text-align: center; /* Центруем текст */
    font-weight: bold; /* Жирный текст для перерыва */
}

/* Стили для расписания */
.schedule {
    width: 100%; /* Ширина таблицы */
    border-collapse: collapse; /* Убираем двойные границы ячеек */
}

/* Стили для заголовков и ячеек таблицы */
.schedule th,
.schedule td {
    border: 1px solid #ddd; /* Обводка ячеек */padding: 15px; /* Увеличенные отступы внутри ячеек */
    text-align: center; /* Выравнивание текста по центру */
    min-height: 80px; /* Устанавливаем минимальную высоту ячеек */
}

/* Фон для заголовков таблицы */
.schedule th {
    background-color: #f2f2f2; /* Цвет фона для заголовков */
}

/* Стили для событий */
.event {
    display: block; /* Используем блочное отображение для двух строк */
    margin-bottom: 1px; /* Уменьшены отступы между событиями */
    padding: 8px; /* Уменьшены отступы внутри события */
    background-color: #CED1D8; /* Цвет для событий */
    border-radius: 5px; /* Сглаженные углы */
    height: auto; /* Позволяем высоте адаптироваться под содержимое */
    overflow: hidden; /* Скрываем переполнение, если текст выходит за пределы */
    transition: background-color 0.3s ease; /* Плавный переход цвета */
}

/* Изменение цвета при наведении */
.event:hover {
    background-color: #EEE7DB; /* Изменение цвета фона при наведении */
}

/* Стили для времени события */
.event-time {
    font-weight: bold; /* Жирный текст для времени события */
    color: #333; /* Цвет текста для времени события */
}

/* Стиль текста внутри события */
.event div {
    line-height: 1.2; /* Увеличение межстрочного расстояния для читаемости */
    margin: 2px 0; /* Отступы между строками текста */
    white-space: normal; /* Позволяет перенос строки */
}


/* Стили для компьютерной версии */
@media (min-width: 769px) {
  .time-filter-container {
    display: none; /* Скрываем фильтр по времени */
  }
}

/* Медиазапросы для мобильной версии */
@media (max-width: 768px) {


    /* Основной шапки */
    .cd-main-header {
        height: auto; /* Высота автоматически адаптируется под содержимое */
        padding: 30px 10px; /* Уменьшаем отступы */
        font-size: 15px;
    }

    /* Уменьшение шрифта для заголовков */
    .text-xl {
        font-size: 1.5em; /* Уменьшение шрифта на мобильных устройствах */
    }

    /* Отображение даты */
    .date-display {
        flex-direction: row; /* Горизонтальное выравнивание стрелок и даты */
        align-items: center; /* Центрируем элементы по вертикали */
        justify-content: center; /* Центрируем элементы по горизонтали */

    }



.filter-container {
 display: flex;
 gap: 15px; 
 justify-content: center; 
 align-items: center; 
 margin: 20px 0; 
}

.filter-container label {
 display: block;
 margin-bottom: 0px; 
 color: black; 
 font-weight: bold;
 font-size: 1em; 
}

.filter-container select {
 width: 100%;
 padding: 10px;
 border: 1px solid #ccc; 
 border-radius: 0px;
 background-color: #fff;
 font-size: 14px;
 color: black;
}

  /* Контейнер для фильтров по времени */
  .time-filter-container {
    display: flex; /* Используем flexbox для размещения элементов */
    flex-direction: column; /* Изменяем направление на вертикальное */
    gap: 15px; /* Отступы между элементами */
    justify-content: center; /* Центрируем элементы по горизонтали */
    align-items: center; /* Центрируем элементы по вертикали */
    margin: 0px 0; /* Отступы сверху и снизу */
  }

  /* Место для выпадающего списка */
  .time-filter-container select {
    width: 100%; /* Занимает всю доступную ширину */
    padding: 10px; /* Внутренний отступ */
    border: 1px solid #ccc; /* Обводка */
    border-radius: 0px; /* Закругленные углы */
    background-color: #fff; /* Цвет фона выпадающего списка */
    font-size: 14px; /* Размер шрифта */
    color: #333; /* Цвет текста */
  }

  /* Место для метки выпадающего списка */
  .time-filter-container label {
    display: block; /* Делаем метку блочным элементом для удобства */
    margin-bottom: 0px; /* Отступ снизу от метки */
    color: black; /* Цвет текста метки */
    font-weight: bold;
    font-size: 1em; /* Размер шрифта для меток */
  }

  /* Кнопка сброса */
  #reset-filters {
    width: 100%; /* Кнопка на всю ширину */
    padding: 10px 15px; /* Отступы для кнопки */
    background-color: #B99F6E; /* Цвет кнопки */
    color: white; /* Цвет текста кнопки */
    border: none; /* Без обводки */
    border-radius: 5px; /* Закругленные углы */
    cursor: pointer; /* Указатель для кликабельности */
    transition: background-color 0.3s; /* Плавный переход для фона */
  }

  .hidden {
    display: none;
  }


    /* Стрелки навигации */
    #prev-day,
    #next-day {
        font-size: 1.8em; /* Уменьшаем размер стрелок */
    }

    #current-date {
        font-size: 0.9em; /* Дополнительно уменьшаем текст даты */
        margin: 0 5px; /* Уменьшаем отступы вокруг даты */
    }

    /* Контейнер для фильтров */
    .filter-container {
        flex-direction: column; /* Изменяем направление на вертикальное */
        align-items: stretch; /* Растягиваем элементы до полной ширины */
    }

    /* Контейнер для фильтров */
    .time-filter-container {
        flex-direction: column; /* Изменяем направление на вертикальное */
        align-items: stretch; /* Растягиваем элементы до полной ширины */
    }

    #reset-filters {
        width: 100%; /* Кнопка на всю ширину */
    }

    /* Мобильное отображение для дней недели в виде блоков */
    .week-days {
        display: flex; /* Используем flex для расположения кнопок в строку */
        overflow-x: auto; /* Добавляем горизонтальную прокрутку */
        white-space: nowrap; /* Запрещаем перенос на следующую строку */
        padding: 10px 0; /* Добавляем отступы сверху и снизу */
    }

    .day-button {
        flex: 0 0 auto; /* Каждая кнопка имеет автоматическую ширину */
        padding: 10px; /* Отступы внутри кнопки */
        border: 1px solid #ccc; /* Пример границы для видимости */
        background-color: #f0f0f0; /* Цвет фона для кнопок */
        margin: 0 5px; /* Горизонтальные отступы между кнопками */
        border-radius: 5px; /* Сглаживание углов */
        min-width: 60px; /* Минимальная ширина кнопки */
        text-align: center; /* Выравнивание текста по центру */
    }

    .day-button.hidden {
        display: none; /* Скрываем элемент, если есть класс hidden */
    }

    .day-button.active {
        background-color: #B99F6E; /* Цвет для активной кнопки */
    }

    /* Стили для навигационных кнопок */
    .nav-button {
        background-color: #B99F6E; /* Цвет кнопки */
        color: white; /* Цвет текста */
        border: none; /* Убираем обводку для кнопок */
        cursor: pointer; /* Указатель при наведении */
        padding: 10px; /* Отступы внутри кнопки */
    }

    /* Привязка для кнопок */
    .day-button {
        scroll-snap-align: start; /* Привязка для кнопок */
    }

    /* Скрываем мобильную версию, показываем десктопную */
    .mobile-schedule {
        display: none;
    }

    .desktop-schedule {
        display: block;
    }
.mobile-schedule {
  display: flex; /* Отображаем мобильную версию по умолчанию */
  flex-direction: column;
  gap: 10px;
}

.desktop-schedule {
  display: none; /* Скрываем настольную версию по умолчанию */
}

.event-block {
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 10px 15px;
  margin-bottom: 10px;
  background-color: #f5f5f5; /* Светло-серый фон */
  margin-left: 0px;
}

.track-text {
  font-weight: bold; /* Жирный текст для дорожки */
  color: #333; /* Темно-серый цвет текста */
  margin-bottom: 5px; /* Отступ снизу */
}

.time-text {
  font-size: 0.9em; /* Меньший размер шрифта для времени */
  color: #666; /* Более светлый серый цвет для времени */
}
@media (max-width: 768px) {
    /* ... */
    .mobile-schedule {
        display: block; /* Отображаем мобильную версию на мобильных устройствах */
    }

    .desktop-schedule {
        display: none; /* Скрываем настольную версию на мобильных устройствах */
    }
}<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php");?>
/* End */
/* /university/materialno-tekhnicheskoe-obespechenie/basseyn/bassyin1.css?172864109417799 */