/* Основной контейнер, использующий flexbox для размещения контента и нижнего колонтитула */
.schedule-general-container {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    justify-content: center; /* Центрирование по вертикали */
    align-items: center; /* Центрирование по горизонтали */
    z-index: 2;
    position: relative;
    color: white;
}

/* Область контента */
.content-wrapper {
    flex: 1 0 auto;
    padding: 20px;
    text-align: center; /* Центрирование текста */
}

/* Группировка селектов в одну строку */
.select-row {
    display: flex;
    justify-content: center; /* Центрирование селектов по горизонтали */
    margin-bottom: 20px; /* Отступ снизу для разделения от кнопки */
}

.select-group {
    margin-right: 10px; /* Отступ между селектами */
}

/* Стилизация для метки, выпадающего списка и кнопки */
label, select, button {
    font-size: 30px;
    margin: 10px; /* Добавление отступов вокруг элементов */
}

/* Стилизация выпадающего списка */
select {
    padding: 6px; /* Внутренние отступы */
    border-radius: 8px; /* Закругленные углы */
    border: 1px solid #ccc; /* Граница вокруг элемента */
    width: auto; /* Ширина элемента */
    appearance: none; /* Убирает стандартный вид */
    background-color: #f8f8f8; /* Цвет фона */
    transition: background-color 0.3s ease; /* Плавный переход цвета фона */
    cursor: pointer; /* Указывает, что это элемент для клика */
}

select:hover {
    background-color: #e2e2e2; /* Цвет фона при наведении */
}

/* Стилизация кнопки */
button {
    padding: 20px 35px;
    border-radius: 8px;
    border: none;
    background-color: #007BFF;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

button:hover {
    background-color: #0056b3; /* Цвет фона при наведении */
    transform: scale(1.05); /* Увеличение кнопки при наведении */
}

table {
  margin: 40px auto; /* Устанавливаем авто отступы для центрирования */
  width: auto; /* Ширина таблицы по содержимому */
  border-collapse: separate; /* Используем separate для поддержки закругленных углов */
  border-spacing: 0; /* Убираем промежутки между ячейками */
  color: white;
  border-radius: 10px; /* Закругляем углы таблицы */
  overflow: hidden; /* Добавляем, чтобы закругление было заметно */
}

th, td {
  padding: 25px;
  text-align: center; /* Центрирование текста в ячейках */
  font-size: 21px;
  color: #ffffff;
  border: none; /* Убираем границы ячеек */
}

th {
  background-color: black;
  padding: 30px; /* Увеличиваем отступ для заголовков */
  font-size: 25px; /* Увеличиваем размер шрифта для заголовков */
  font-weight: bold; /* Делаем шрифт жирным для заголовков */
  border-bottom: 1px solid white; /* Добавляем нижнюю белую границу */
  text-align: center;
}

td {
  background-color: #333; /* Темно-серый фон для ячеек */
  color: #ffffff;
}

tr {
  border-bottom: none; /* Убираем нижнюю границу для всех строк */
}

tr:nth-child(odd) td {
  border-top: 1px solid #494949; /* Граница сверху для ячеек внутри нечетных строк */
  border-bottom: 1px solid #494949; /* Граница снизу для ячеек внутри нечетных строк */
}

tr:nth-child(even) td {
  background-color: black; /* Черный фон для четных строк */
  color: #ffffff;
  border-top: none; /* Убираем верхнюю границу для четных строк */
  border-bottom: none; /* Убираем нижнюю границу для четных строк */
}

/* Убираем верхнюю и нижнюю границу у последней строки */
tr:last-child td {
  border-bottom: none;
}
.schedule-message {
    color: red;
    position: relative;
    z-index: 3;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 25px;
    width: 100%;
    border-radius: 5px;
    display: inline-block;
    margin-top: 20px; /* Добавляем отступ сверху для разделения, если необходимо */
    font-size: 70px;
    font-weight: bold; /* Делаем шрифт жирным для заголовков */
}


/* Основной стиль для мобильных устройств */
@media screen and (max-width: 767px) {
    /* Основной контейнер */
    .schedule-general-container {
        margin-top: 15px;
    }

    /* Область контента */
    .content-wrapper {
        padding: 10px;
        width: 100%
    }

    /* Группировка селектов в одну строку */
    .select-row {
        margin-bottom: 10px;
    }

    .select-group {
        margin-right: 5px;
    }

    /* Стилизация для метки, выпадающего списка и кнопки */
    label, select, button {
        font-size: 16px;
        margin: 10px;
    }

    /* Стилизация выпадающего списка */
    select {
        padding: 8px;
        border-radius: 5px;
        font-size: 18px;
    }

    /* Стилизация кнопки */
    button {
        margin-top: 0px;
        padding: 15px 30px;
        font-size: 22px;
    }

    /* Таблица */
    table {
        width: 98%; /* Таблица занимает всю ширину */
        margin-left: 3px;
        margin-right: 3px;
        margin-top: 40px;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
    }

    th, td {
        padding: 5px;
        font-size: 0.6em;
    }

    th {
        padding: 5px;
        font-size: 0.7em;
    }

    .schedule-message {
        font-size: 30px; /* Уменьшаем размер шрифта на мобильных устройствах */
        padding: 15px;
        width: 90%; /* Увеличиваем ширину для мобильных, сохраняя авто-центрирование */
    }
}
@media (min-width: 4000px) {
/* Основной контейнер, использующий flexbox для размещения контента и нижнего колонтитула */
.schedule-general-container {
    margin-top: 60px;
}

/* Область контента */
.content-wrapper {
    padding: 40px;
}

/* Группировка селектов в одну строку */
.select-row {
    margin-bottom: 40px; /* Отступ снизу для разделения от кнопки */
}

.select-group {
    margin-right: 20px; /* Отступ между селектами */
}

/* Стилизация для метки, выпадающего списка и кнопки */
label, select, button {
    font-size: 60px;
    margin: 20px; /* Добавление отступов вокруг элементов */
}

/* Стилизация выпадающего списка */
select {
    padding: 12px; /* Внутренние отступы */
    border-radius: 16px; /* Закругленные углы */
    border: 2px solid #ccc; /* Граница вокруг элемента */
}

/* Стилизация кнопки */
button {
    padding: 40px 70px; /* Внутренние отступы */
    border-radius: 16px; /* Закругленные углы */
}


table {
  margin: 80px auto; /* Устанавливаем авто отступы для центрирования */
  border-radius: 20px; /* Закругляем углы таблицы */
}

th, td {
  padding: 50px;
  font-size: 42px;
}

th {
  background-color: black;
  padding: 60px; /* Увеличиваем отступ для заголовков */
  font-size: 50px; /* Увеличиваем размер шрифта для заголовков */
  border-bottom: 2px solid white; /* Добавляем нижнюю белую границу */
}



tr:nth-child(odd) td {
  border-top: 2px solid #494949; /* Граница сверху для ячеек внутри нечетных строк */
  border-bottom: 2px solid #494949; /* Граница снизу для ячеек внутри нечетных строк */
}

.schedule-message {
    padding: 50px;
    border-radius: 10px;
    margin-top: 40px; /* Добавляем отступ сверху для разделения, если необходимо */
    font-size: 140px;
}

}