/* Общие стили для контейнера */
.container-fluid {
    padding: 0; /* Избавляемся от отступов */
}

.container1 {
    width: 100%;
	min-height: 100%;
    width: 100vw;
    max-width: 100%;
    padding: 50px;
    margin: 0px; /* Используем единицы измерения для отступа */

}
.teza {
	color:white;
}
.schedule-container {
    margin-top: 20px; /* Отступ сверху */
    padding: 0px; /* Внутренние отступы */
    background-color: #fff; /* Цвет фона блока */
    border-radius: 5px; /* Небольшие закругления углов */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Тень для выделения блока */
}
/* Новые стили для поля с последним временем изменения */

.lastModifiedTimeDisplay {
    font-size: 1.2rem; /* Увеличиваем размер текста */
    margin-top: 10px; /* Отступ сверху */
}
/* Стили для кнопок выбора группы */
.group-btn {
    width: 200px; /* Устанавливаем максимальную ширину кнопок */
    margin-left: 3px; /* Добавляем отступ между кнопками */
	margin-bottom: 10px; /* Отступ снизу */
}

/* Стили для темного текста в ночном режиме */
.dark-text {
    color: #fff; /* Белый цвет текста */
}
.row {
    display: flex;
    flex-wrap: wrap;
	
}



.tabsw .col {
    padding: 10px; /* Добавляем внутренние отступы */
    border: 1px solid #ccc; /* Добавляем рамку для визуального разделения */
	
}

/* Задаем фиксированную ширину для первой колонки */
.tabsw .col:first-child {
    flex: 0 0 100px; /* Устанавливаем фиксированную ширину в 100px */
	
}

/* Обновленные стили для таблицы и ее контейнера */
.tabsw table {
    width: 100%; /* Занимает все доступное пространство */
    border-collapse: separate; /* Убираем отступы между ячейками */
	border-radius: 8px;
	background-color: hsla(180,0%,100%,0.756);
	border-spacing: 4px;
}

.tableleg {
	/* width: 100%;  Занимает все доступное пространство */
   /* border-collapse: separate;  Убираем отступы между ячейками */
	border-radius: 8px;
	background-color: hsla(180,0%,100%,0.756);
	
border-spacing: 4px;
}

.dark-mode .tabsw table {
    width: 100%; /* Занимает все доступное пространство */
    border-collapse: separate; /* Убираем отступы между ячейками */
	border-radius: 8px;
	background-color: hsla(180,0%,0%,0.512);
	border-spacing: 4px;
}

.tabsw th, .tabsw td {
    padding: 8px; /* Увеличиваем внутренние отступы */
    text-align: center; /* Выравниваем содержимое по центру */
	/*border-radius: 10px;*/
	border-radius: 4px;
}



/* Новые стили для основного блока с заголовком */
.col:nth-child(1) {
    background-color: #f8d7da; /* Цвет фона */
    height: 50px; /* Фиксированная высота */
    display: flex;
    justify-content: center; /* Выравниваем текст по центру */
    align-items: center; /* Выравниваем вертикально по центру */
}


/* Стили для таблицы расписания */
.scheduleContainer-xxl table {
    width: 95%; /* Использовать доступное пространство полностью */
    table-layout: auto; /* Размеры таблицы настраиваются автоматически */
	
}

.scheduleContainer table td,
.scheduleContainer table th {
    padding: px; /* Уменьшаем внутренний отступ ячеек */
    text-align: left;
	border-radius: 8px;
}



.scheduleContainer table td {
    background-color: #fff;
    color: #333;
	border-radius: 8px;
}
.dark-mode .otht{
    
    color: white; /* Светлый цвет текста */
}
.dark-mode .tabsw table th{
    
	/*background-color: hsla(180,0%,0%,0.068); /* Темный фон */
    color: white;
padding: 12px;
	
}
.dark-mode .tabsw table td{
    /*background-color: hsla(180,0%,0%,0.068); /* Темный фон */
    color: wite;
	
}



.dark-mode{
    position: relative;
	overflow-x: hidden;
	background-image: url('index.php?id=3&timestamp=<?php echo time(); ?>');
	background-size: cover; /* Заполнить размером */
	background-repeat: no-repeat; /* Запретить повторяться */
	background-attachment: fixed;
}

/* Добавление стилей для ночного режима */
.dark-mode .scheduleContainer{
    background-color: #333; /* Темный фон */
    color: #050505; /* Светлый цвет текста */
}

.dark-mode .scheduleContainer table th {
    background-color: #333; /* Цвет фона для заголовков колонок в темном режиме */
    color: #050505; /* Цвет текста для заголовков колонок в темном режиме */
}

.dark-mde .table-bordered {
  border: 0px solid @table-border-color;
  > thead,
  > tbody,
  > tfoot {
    > tr {
      > th,
      > td {
        border: 0px solid @table-border-color;
      }
    }
  }
  > thead > tr {
    > th,
    > td {
      border-bottom-width: 0px;
    }
  }
}

.dark-mode .scheduleContainer table td {
    background-color: #333; /* Цвет фона для ячеек таблицы в темном режиме */
    color: #050505; /* Цвет текста в ячейках таблицы в темном режиме */
}

.dark-text table-bordered,
.dark-text th,
.dark-text td {
    color: #050505 !important; /* Цвет текста в таблице и других элементах */
}

body {
  position: relative;
  overflow-x: hidden;
  background-image: url('index.php?id=2&timestamp=<?php echo time(); ?>');
  background-size: cover; /* Заполнить размером */
  background-repeat: no-repeat; /* Запретить повторяться */
	 background-attachment: fixed;
}
body,
html { height: 100%;}
.nav .open > a, 
.nav .open > a:hover, 
.nav .open > a:focus {background-color: transparent;}
/* Wrappers */
#wrapper {
 padding-left: 0;
 -webkit-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;
 transition: all 0.5s ease;
}
#wrapper.toggled {
 padding-left: 220px;
}
#sidebar-wrapper {
 z-index: 1000;
 left: 220px;
 width: 0;
 height: 100%;
 margin-left: -220px;
 overflow-y: auto;
 overflow-x: hidden;
 background: #1a1a1a;
 -webkit-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;
 transition: all 0.5s ease;
}
#sidebar-wrapper::-webkit-scrollbar {
 display: none;
}
#wrapper.toggled #sidebar-wrapper {
 width: 220px;
}
#page-content-wrapper {
 width: 100%;
 padding-top: 15px;
}
#wrapper.toggled #page-content-wrapper {
 position: absolute;
 margin-left: -220px;
}
/* Sidebar nav styles */
.sidebar-nav {
 position: absolute;
 top: 0;
 width: 220px;
 margin: 0;
 padding: 0;
 list-style: none;
}
.sidebar-nav li {
    width: 150px;
    height: 50px; /* Фиксированная высота */
    justify-content: center; /* Выравниваем текст по центру */
    align-items: center; /* Выравниваем вертикально по центру */
}
.sidebar-nav li:before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 z-index: -1;
 height: 100%;
 width: 3px;
 background-color: #1c1c1c;
 -webkit-transition: width .2s ease-in;
 -moz-transition: width .2s ease-in;
 -ms-transition: width .2s ease-in;
 transition: width .2s ease-in;

}

.sidebar-nav li:hover:before,
.sidebar-nav li.open:hover:before {
 width: 100%;
 -webkit-transition: width .2s ease-in;
 -moz-transition: width .2s ease-in;
 -ms-transition: width .2s ease-in;
 transition: width .2s ease-in;

}
.sidebar-nav li a {
 display: block;
 color: #ddd;
 text-decoration: none;
 padding: 10px 15px 10px 30px; 
}
.sidebar-nav li a:hover,
.sidebar-nav li a:active,
.sidebar-nav li a:focus,
.sidebar-nav li.open a:hover,
.sidebar-nav li.open a:active,
.sidebar-nav li.open a:focus{
 color: #fff;
 text-decoration: none;
 background-color: transparent;
}
.sidebar-nav > .sidebar-brand {
 height: 65px;
 font-size: 20px;
 line-height: 44px;
}
.sidebar-nav .dropdown-menu {
 position: relative;
 width: 100%;
 padding: 0;
 margin: 0;
 border-radius: 0;
 border: none;
 background-color: #222;
 box-shadow: none;
}
/* Hamburger-Cross */
.hamburger {
 position: static;
 top: 2px; 
 z-index: 999;
 display: block;
 width: 32px;
 height: 32px;
 margin-left: 15px;
 background: transparent;
 border: none;
}
.hamburger:hover,
.hamburger:focus,
.hamburger:active {
 outline: none;
}
.hamburger.is-closed:before {
 content: '';
 display: block;
 width: 100px;
 font-size: 14px;
 color: #fff;
 line-height: 32px;
 text-align: center;
 opacity: 0;
 -webkit-transform: translate3d(0,0,0);
 -webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed:hover:before {
 opacity: 1;
 display: block;
 -webkit-transform: translate3d(-100px,0,0);
 -webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed .hamb-top,
.hamburger.is-closed .hamb-middle,
.hamburger.is-closed .hamb-bottom,
.hamburger.is-open .hamb-top,
.hamburger.is-open .hamb-middle,
.hamburger.is-open .hamb-bottom {
 position: absolute;
 left: 0;
 height: 4px;
 width: 100%;
}
.hamburger.is-closed .hamb-top,
.hamburger.is-closed .hamb-middle,
.hamburger.is-closed .hamb-bottom {
 background-color: #1a1a1a;
}
.hamburger.is-closed .hamb-top { 
 top: 5px; 
 -webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed .hamb-middle {
 top: 50%;
 margin-top: -2px;
}
.hamburger.is-closed .hamb-bottom {
 bottom: 5px; 
 -webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed:hover .hamb-top {
 top: 0;
 -webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed:hover .hamb-bottom {
 bottom: 0;
 -webkit-transition: all .35s ease-in-out;
}
.hamburger.is-open .hamb-top,
.hamburger.is-open .hamb-middle,
.hamburger.is-open .hamb-bottom {
 background-color: #1a1a1a;
}
.hamburger.is-open .hamb-top,
.hamburger.is-open .hamb-bottom {
 top: 50%;
 margin-top: -2px; 
}
.hamburger.is-open .hamb-top { 
 -webkit-transform: rotate(45deg);
 -webkit-transition: -webkit-transform .2s cubic-bezier(.73,1,.28,.08);
}
.hamburger.is-open .hamb-middle { display: none; }
.hamburger.is-open .hamb-bottom {
 -webkit-transform: rotate(-45deg);
 -webkit-transition: -webkit-transform .2s cubic-bezier(.73,1,.28,.08);
}
.hamburger.is-open:before {
 content: '';
 display: block;
 width: 100px;
 font-size: 14px;
 color: #fff;
 line-height: 32px;
 text-align: center;
 opacity: 0;
 -webkit-transform: translate3d(0,0,0);
 -webkit-transition: all .35s ease-in-out;
}
.hamburger.is-open:hover:before {
 opacity: 1;
 display: block;
 -webkit-transform: translate3d(-100px,0,0);
 -webkit-transition: all .35s ease-in-out;
}
/* Overlay */
.overlay {
 position: fixed;
 display: none;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 left: 0;
 bottom: 0;
 background-color: rgba(250,250,250,.8);
 z-index: 1;
}

/*clock*/
main.container-fluid {margin:0;padding:0;}
.nightmode {
 text-shadow:1px 1px 1px black;
}
.daymode {
 background-color: #87ceeb;
 background-image: linear-gradient(to bottom left, #87ceeb 0%,#fff 100%);
 color:#333;
 text-shadow:1px 1px 10px white;
}
.clocktext {
 display:block;
 margin:0;
 padding:1px 25 0 0;
 width:100%;
 text-align:right;
 line-height:1.2;
 white-space:nowrap;
}
#date {
 font-size:1.3rem;
 padding-top:15px;
}
#time {
 font-size:5rem;
 margin:1px 0 0 0;
}
#time span {
 display:inline-block;
 padding:0;
 vertical-align: baseline;
 text-align:left;
 width: 2em;
 margin:0 0 0 0.5em;
 font-size:1.5rem;
 line-height:1.5;
 white-space:normal;
}
@media (min-width: 325px) {
#date {font-size:2rem;}
#time {font-size:8rem;}
#time span {font-size:2rem;line-height: 2;}
}
/*end clock*/

/* Новые стили для цвета текста в ночном режиме */
.nightmode table th,
.nightmode table td {
    color: #333; /* Изначально устанавливаем цвет текста */
}

.nightmode.dark-mode table th,
.nightmode.dark-mode table td {
    color: white; /* Цвет текста при включенном ночном режиме */
}
.dark-mode .tabsw table {
    color: white; /* Белый цвет текста */
}
.dark-mode .container-fluid {
	padding: 5px; /* Добавляем внутренние отступы */
	color: white;
	background-color: hsla(180,0%,0%,0.679);
}

.dark-mode .text-container {
	padding: 10px; /* Добавляем внутренние отступы */
	color: white;
	background-color: hsla(180,0%,0%,0.679);
}

.dark-mode .container-fluid table{
	padding: 5px; /* Добавляем внутренние отступы */
	color: white;
	background-color: hsla(180,0%,0%,0.679);
}

.container-fluid {
  padding: 5px;
  color: black;
  background-color: hsla(180, 0%, 100%, 0.679);
  border-radius: 10px; /* Закругляем углы */
}

.dark-mode .container-message {
	padding: 5px; /* Добавляем внутренние отступы */
	color: white;
	background-color: hsla(180,0%,0%,0.679);
}

.dark-mode .container-message h1{
	padding: 5px; /* Добавляем внутренние отступы */
	color: white;
}

.dark-mode .container-message h2{
	padding: 5px; /* Добавляем внутренние отступы */
	color: white;
}

.dark-mode .container-message h3{
	padding: 5px; /* Добавляем внутренние отступы */
	color: white;
}

.dark-mode .container-message h4{
	padding: 5px; /* Добавляем внутренние отступы */
	color: white;
}

.dark-mode .container-message p{
	padding: 5px; /* Добавляем внутренние отступы */
	color: white;
}

.container-message {
  padding: 5px;
  color: black;
  background-color: hsla(180, 0%, 100%, 0.900);
  border-radius: 10px; /* Закругляем углы */
}

.text-container {
  padding: 10px;
  color: black;
  background-color: hsla(180, 0%, 100%, 0.679);
  border-radius: 10px; /* Закругляем углы */
}


.bright-red-cell {
    background-color: hsla(0, 80%, 70%, 1); /* Ярко-красный цвет, вы можете настроить его по своему вкусу */
    color: #fff; /* Цвет текста для четкости */
}


/* Стили для переключателя */
.switch {
  position: relative;
  display: inline-block;
  width: 40px; /* Уменьшаем размер */
  height: 20px; /* Задаём высоту */
}

/* Иконки для режимов */
.icon {
  background-image: url('./pics/icons/sun.svg'); /* По умолчанию - иконка солнца */
  background-size: cover;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 22px;
}

/* Позиция иконки при включенном состоянии */
input:checked + .slider + .icon {
  background-image: url('./pics/icons/moon.svg');  /* Иконка луны при включенном состоянии */
}

/* Переключатель */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc; /* Серый цвет фона */
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 20px; /* Делаем круглый */
}

/* Внутренний слайдер (круглый) */
.slider:before {
  position: absolute;
  content: "";
  height: 16px; /* Высота круга */
  width: 16px; /* Ширина круга */
  top: 2px; /* Отступ сверху */
  left: 2px; /* Отступ слева */
  background-color: white; /* Цвет круга */
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%; /* Делаем круглый */
}

/* Стили для включенного переключателя */
input:checked + .slider {
  background-color: #2196F3; /* Цвет при включенном состоянии */
}

/* Стили для внутреннего слайдера при включенном состоянии */
input:checked + .slider:before {
  -webkit-transform: translateX(20px); /* Смещаем вправо */
  -ms-transform: translateX(20px);
  transform: translateX(20px);
}

/*preloader*/
#preloader {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  overflow: visible;
  background: rgba(251, 251, 251, 0.8);
}

.visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 2s linear;
}

.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
}

/* Чистый CSS для спиннера, аналогичный спиннеру, используемому Apple */
#preloader:after {
  content: "";
  width: 40px;
  height: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}