/* Стиль для мастера на смене */
.absent-master {
  color: red; /* Красный цвет */
  font-weight: bold; /* Жирный текст */
  animation: blink 1s infinite; /* Мигающая анимация */
}

/* Анимация для мигания */
@keyframes blink {
  0%,
  100% {
    opacity: 1; /* Полная видимость */
  }
  50% {
    opacity: 0; /* Полная прозрачность */
  }
}

.close span {
  color: black; /* Меняем цвет на черный */
}

.modal-dialog {
  max-width: 45%;
  /* Измените ширину окна по вашему усмотрению */
}

.size-table {
  width: 1700px;
}

.scrollable-content {
  max-height: 400px;
  /* Уменьшим на высоту заголовка, закрывающего значка и возможных отступов */
  overflow-y: auto;
  padding-right: 10px;
  /* Добавим место для полосы прокрутки */
}

/* Задний фон для затемнения */
#overlay {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  /* Под диалогом, но над остальным контентом */
}

#userInput {
  width: 100%;
  /* Ширина textarea */
  height: 200px;
  /* Высота textarea */
  resize: none;
  /* Отключить возможность изменения размера */
}

/* Общий стиль для всей таблицы */
.table {
  width: 1600px;
  border-collapse: collapse;
}
.table-striped {
  border-collapse: collapse; /* Убираем зазоры между ячейками */
}

.table-striped tbody tr:nth-child(odd) {
  background-color: #92f07a; /* Светло-серый для нечетных строк */
}

.table-striped tbody tr:nth-child(even) {
  background-color: #e6f7ff; /* Светло-голубой для четных строк */
}

.table-striped tbody tr:hover {
  background-color: #f79438; /* Цвет строки при наведении - светло-зеленый */
}

.table-striped td {
  padding: 10px; /* Отступы в ячейках */
  border: 1px solid #dee2e6; /* Цвет границы ячейки таблицы */
}

/* Стиль для каждой ячейки заголовка */
.table th {
  padding: 2px;
  font-size: 14px;
  border: 1px solid #ccc;
}

/* Стиль для каждого содержимого ячейки */
.table td {
  padding: 5px;
  font-size: 15px;
  border: 1px solid #ccc;
}

.btn-size {
  padding: 0px 8px;
  margin: 0px;
  /* Уменьшаем внутренние отступы */
  font-size: 14px;
  /* Меньший шрифт */
  border-radius: 4px;
  /* Скругление углов */
  margin-right: 5px;
}




.close-icon {
  position: absolute;
  top: 5px;
  /* Расстояние от верхнего края диалогового окна */
  right: 10px;
  /* Расстояние от правого края диалогового окна */
  font-size: 24px;
  /* Размер крестика */
  cursor: pointer;
  color: #000;
  /* Цвет крестика, можно изменить на другой */
}

label {
  font-weight: bold;
  margin-bottom: 5px;
}

div.user,
div.user_department,
div.user_position {
  margin: 0 0 10px 0;
  /* Уменьшаем отступы между дивами */
  padding: 5px;
  background-color: #f0f0f0;
  /* Светлый фон для выделения */
  border-radius: 4px;
}

textarea {
  resize: none;
  /* Запретить изменение размеров */
  width: 100%;
  /* Фиксированная ширина */
  height: 100%;
  /* Фиксированная высота */
}

.table-custom {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
}

.table-custom thead th {
  background-color: #f8f9fa;
  color: #333;
  padding: 12px 15px;
  text-align: left;
  border-bottom: solid 2px #dee2e6;
}

.table-custom tbody tr:hover {
  background-color: #f1f1f1;
}

.table-custom tbody td {
  padding: 10px 15px;
  border-bottom: solid 1px #dee2e6;
}

.table-custom {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  overflow: hidden;
}

.table-custom tbody tr:nth-child(odd) {
  background-color: #f9f9f9;
}

.table-custom tbody tr:nth-child(even) {
  background-color: #ffffff;
}

img {
  cursor: pointer;
  transition: 0.3s;
}

/* На увеличение фотографии */
.modal-set {
  display: none;
  /* Скрыто по умолчанию */
  position: fixed;
  z-index: 2000;
  /* Более высокий z-index */
  padding-top: 60px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.9);
}

.modal-content-zoom {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 500px;
}

.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* Добавляем стили для названия изображения */
.modal-caption {
  text-align: center;
  color: #f1f1f1;
  font-size: 20px;
  margin: 10px;
}

.prev,
.next {
  background-color: rgba(255, 255, 255, 0.5);
  border: none;
  color: black;
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  transition: 0.6s ease;
  user-select: none;
  z-index: 1000; /* Чтобы кнопки были над модальным окном */
}

.prev {
  left: 0;
}

.next {
  right: 0;
}

.prev:hover,
.next:hover {
  background-color: rgba(255, 255, 255, 0.8);
}

.img-operators-photo {
  width: 90%;
}

/* Стили для модального окна на мобильных устройствах. Модальные окна: Настроек, операторов */
/* Стили для модального окна на мобильных устройствах в портретном режиме */
@media (max-width: 576px) {
  .modal-fullscreen-sm-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }

  .modal-fullscreen-sm-down .modal-content {
    height: 100%;
    border-radius: 0;
  }

  .modal-fullscreen-sm-down .modal-header,
  .modal-fullscreen-sm-down .modal-footer {
    border-radius: 0;
  }

  .modal-fullscreen-sm-down .modal-body {
    overflow-y: auto;
  }
}

/* Стили для модального окна на мобильных устройствах в альбомном режиме */
@media (max-width: 740px),
  (max-width: 915px),
  (max-width: 932px),
  (max-width: 1368px) {
  .modal-fullscreen-sm-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }

  .modal-fullscreen-sm-down .modal-content {
    height: 100%;
    border-radius: 0;
  }

  .modal-fullscreen-sm-down .modal-header,
  .modal-fullscreen-sm-down .modal-footer {
    border-radius: 0;
  }

  .modal-fullscreen-sm-down .modal-body {
    overflow-y: auto;
  }
}
/* Операторы модальное окно высота его */
.width-operators {
  width: 820px;
  border-collapse: collapse;
}
/* Стиль на поле добавления причины простоя */
#editField1 {
  height: 400px;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 1368px) {
  .width-operators {
    width: 1300px;
  }
  #editField1 {
    height: 400px;
    width: 100%;
    box-sizing: border-box;
  }
}
@media (max-width: 1280px) {
  .width-operators {
    width: 1220px;
  }
  #editField1 {
    height: 400px;
    width: 100%;
    box-sizing: border-box;
  }
}
@media (max-width: 1180px) {
  .width-operators {
    width: 1130px;
  }
  #editField1 {
    height: 400px;
    width: 100%;
    box-sizing: border-box;
  }
}

@media (max-width: 1024px) {
  .width-operators {
    width: 980px;
  }
  #editField1 {
    height: 400px;
    width: 100%;
    box-sizing: border-box;
  }
}

@media (max-width: 932px) {
  .width-operators {
    width: 890px;
  }
  #editField1 {
    height: 400px;
    width: 100%;
    box-sizing: border-box;
  }
}
@media (max-width: 915px) {
  .width-operators {
    width: 870px;
  }
  #editField1 {
    height: 400px;
    width: 100%;
    box-sizing: border-box;
  }
}
@media (max-width: 896px) {
  .width-operators {
    width: 860px;
  }
  #editField1 {
    height: 220px;
    width: 100%;
    box-sizing: border-box;
  }
}
@media (max-width: 853px) {
  .width-operators {
    width: 800px;
  }
  #editField1 {
    height: 400px;
    width: 100%;
    box-sizing: border-box;
  }
}
@media (max-width: 820px) {
  .width-operators {
    width: 780px;
  }
  #editField1 {
    height: 400px;
    width: 100%;
    box-sizing: border-box;
  }
}
@media (max-width: 768px) {
  .width-operators {
    width: 730px;
  }
  #editField1 {
    height: 400px;
    width: 100%;
    box-sizing: border-box;
  }
}

@media (max-width: 740px) {
  .width-operators {
    width: 710px;
  }
  #editField1 {
    height: 400px;
    width: 100%;
    box-sizing: border-box;
  }
}
@media (max-width: 720px) {
  .width-operators {
    width: 680px;
  }
  #editField1 {
    height: 400px;
    width: 100%;
    box-sizing: border-box;
  }
}
@media (max-width: 667px) {
  .width-operators {
    width: 610px;
  }
  #editField1 {
    height: 200px;
    width: 100%;
    box-sizing: border-box;
  }
}

/* Полноэкранный режим для мобильных устройств */
@media (max-width: 767px) {
  .modal-fullscreen-info {
    max-width: 100%;
    /* width: 100%; */
    height: 100%;
    margin: 0;
    padding: 0;
  }

  .modal-fullscreen-info .modal-content {
    height: 100%;
    width: 100%;
    border: none;
    border-radius: 0;
  }

  .modal-fullscreen-info .modal-header,
  .modal-fullscreen-info .modal-body {
    height: auto; /* Автоматическая регулировка высоты */
  }

  .modal-fullscreen-info .modal-header {
    position: relative;
    align-items: flex-start; /* Выровнять заголовок по верхнему краю */
  }

  .modal-fullscreen-info .close {
    position: absolute;
    right: 15px;
    top: 15px;
  }
}

/* Стили для ПК-версии */
@media (min-width: 768px) {
  .modal-fullscreen-info {
    min-width: 100%;
    /* max-width: 800px; 
    width: 80%;  */
    height: 100vh; /* Установите высоту во всю высоту видимого окна */
    margin: 0 auto; /* Центрирование по горизонтали */
    padding: 0; /* Удалите отступы, чтобы не было лишнего места */
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box; /* Учет границ и отступов в общей ширине/высоте */
  }

  .modal-fullscreen-info .modal-content {
    border: none;
    border-radius: 4px; /* Установите радиус границы по желанию */
    width: 100%; /* Займите всю ширину модального окна */
    height: 100%; /* Займите всю высоту модального окна */
    overflow: auto; /* Позволяет прокручивать содержимое, если оно слишком большое */
  }
}


@media (min-width: 768px) {
  .modal-fullscreen-info-signature {
    max-width: 500px; /* Установите необходимую максимальную ширину, это опционально */
    width: 80%; /* Можно оставить в процентах или задать фиксированное значение */
    height: 320px; /* Установите высоту во всю высоту видимого окна */
    margin: 0 auto; /* Центрирование по горизонтали */
    padding: 0; /* Удалите отступы, чтобы не было лишнего места */
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box; /* Учет границ и отступов в общей ширине/высоте */
    box-shadow: 20px 20px 30px rgba(0, 0, 0, 1);
    border-radius: 10px;
  }

  .modal-fullscreen-info-signature .modal-content {
    border: none;
    border-radius: 10px; /* Установите радиус границы по желанию */
    width: 100%; /* Займите всю ширину модального окна */
    height: 100%; /* Займите всю высоту модального окна */
    overflow: hidden; /* Отключаем прокрутку */
  }
}

/* для окна просмотра причин */
.custom-height-views {
  max-height: 650px;
  overflow-y: auto;
}
.custom-width-views {
  width: 750px;
}

@media (max-width: 767px) {
  .custom-height-views {
    max-height: 400px;
    overflow-y: auto;
  }
  .custom-width-views {
    width: 330px;
  }
}
/* Стили для общего оформления */
.modal-fullscreen-info {
  position: fixed; /* Зафиксируйте его относительно окна */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1050; /* Убедитесь, что оно находится поверх других элементов */
  background-color: rgba(
    0,
    0,
    0,
    0.5
  ); /* Полупрозрачный фон для эффекта затенения */
  display: flex;
  align-items: center;
  justify-content: center;
}

.data-item {
  line-height: 1.5;
  margin-bottom: 5px;
  color: black;
}

.additional-data {
  color: black; /* Если нужно задать черный цвет и для параграфа */
}

.btn-danger {
  background-color: red;
  border-color: red;
}

/* на прогресс бар */
#loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  background-color: rgba(255, 255, 255, 0.8);
  position: fixed;
  padding-top: 40vh;
  top: 0;
  left: 0;
  z-index: 9999;
}

.loading-content {
  display: flex;
  flex-direction: column;
  /* Вертикальное выравнивание */
  align-items: center;
  /* Центрируем по горизонтали */
  justify-content: center;
  /* Центрируем по вертикали */
  text-align: center;
  /* Текст по центру */
}

.spinner {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100px;
  /* Ширина спиннера */
  height: 100px;
  /* Высота спиннера */
  border: 10px solid #f3f3f3;
  /* Серый цвет рамки */
  border-top: 10px solid #3498db;
  /* Синяя часть спиннера */
  border-radius: 50%;
  /* Округлая форма */
  animation: spin 1s linear infinite;
  /* Анимация вращения */
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.loader {
  text-align: center;
  font-size: 16px;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.custom-scroll-container {
  overflow-y: auto; /* Прокрутка по вертикали для содержимого */
  /* overflow-x: auto; */
}

/* Стили для ПК-версии */
@media (min-width: 768px) {
  .custom-scroll-container {
    max-height: 780px; /* Ограничение высоты на ПК */
    overflow-x: hidden;
  }
}



/* стиль на выборку истории простоев */

#selected_shift {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.form-header-container {
  display: flex;
  align-items: center; /* Для выравнивания по центру вертикально */
  gap: 20px; /* Расстояние между формой и заголовком (можно изменить) */
}

/* Стили для мобильной версии */
@media (max-width: 768px) {
  .form-header-container {
    flex-direction: column; /* Элементы выстраиваются друг под другом */
    gap: 10px; /* Уменьшаем расстояние между элементами */
  }
}

input[type="date"] {
  padding: 10px;
  margin-right: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

#message {
  border-radius: 5px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #000;
  background-color: #a3a3a35e;
  width: 230px;
  height: 35px;
  text-align: center;
  font-weight: bold;
  line-height: 35px;
}

/* для формы выбора даты и время смены */
/* Основные стили для формы */
#selected_shift {
  display: flex;
  /* Используем flexbox для размещения элементов в ряд */
  align-items: center;
  /* Центрирование по вертикали */
  gap: 15px;
  /* Промежуток между элементами */
  margin-bottom: 20px;
  /* Отступ снизу */
}

/* Стили для полей ввода */
input[type="date"] {
  padding: 5px;
  margin-right: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.hint {
  color: grey;
  font-size: 0.9em; /* маленький размер шрифта для подсказки */
  margin-top: 5px; /* небольшой отступ сверху */
}

/* Для модального окна на весь экран с полной инфомрацией об оборудовании */
.full-info-device-modal {
  display: none; /* Изначально модальное окно скрыто */
  position: fixed; /* Фиксированное положение */
  z-index: 2000; /* Поверх всех элементов */
  left: 0;
  top: 0;
  width: 100%; /* На всю ширину экрана */
  height: 100%; /* На всю высоту экрана */
  overflow: auto; /* Если контента много, добавить скролл */
  background-color: rgba(0, 0, 0, 0.7); /* Темный полупрозрачный фон */
}

/* Содержимое модального окна */
.full-info-device-content {
  background-color: white;
  margin: 0; /* Убираем отступы */
  padding: 20px; /* Внутренние отступы по-прежнему могут быть полезны */
  border: none; /* Убираем границу для эффекта растяжения */
  width: 100%; /* 100% ширины экрана */
  height: 100vh; /* Растягиваем по высоте экрана */
  max-width: none; /* Убираем ограничение максимальной ширины */
  max-height: none; /* Убираем ограничение максимальной высоты */
  border-radius: 0; /* Убираем закругления */
  box-shadow: none; /* Убираем тени */
  position: fixed; /* Фиксируем относительно видимой области */
  top: 0; /* Привязываем к верхнему краю */
  left: 0; /* Привязываем к левому краю */
  overflow: auto; /* Добавляем прокрутку, если контент больше экрана */
}

/* Кнопка закрытия */
.full-info-device-close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  position: absolute;
  right: 10px;
  top: 10px;
}

.full-info-device-close:hover,
.full-info-device-close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* Скрыть кнопку на мобильных устройствах (максимум 768px) для внесения причин простоев */
@media (max-width: 1100px) {
  .display-none {
    display: none; /* Полностью скрываем кнопку */
  }
}

.info-block-simple-reason {
  border: 1px solid #cccccc; /* Серый цвет рамки */
  border-radius: 8px; /* Скругленные углы */
  padding: 15px; /* Внутренние отступы */
  margin-bottom: 15px; /* Отступ между блоками */
  background-color: #f9f9f9; /* Легкий фон за текстом */
  color: #000; /* Черный цвет текста */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Легкая тень */
}

/* Стили для текста внутри блока */
.info-block-simple-reason p {
  margin: 0px 0; /* Сокращенные отступы между строками */
  font-size: 14px; /* Размер шрифта (по желанию можно увеличить) */
}

/* Дополнительно: выделение важных элементов */
.info-block-simple-reason strong {
  color: #333333; /* Темно-серый цвет выделенного текста */
  font-weight: bold; /* Жирный текст */
}
/* Эффекты при наведении */
.info-block-simple-reason:hover {
  border-color: #007bff; /* Становится синяя рамка */
  background-color: #e9f5ff; /* Легкий голубой фон */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Более заметная тень */
  transform: scale(1.02); /* Легкое увеличение блока */
}

/*  отключение анимации на кнопках внесения причин и просмотра*/
.edit-btn,
.view-btn {
  transition: none !important; /* Отключаем анимацию */
}