.modal {
  display: none; /* Скрыть модальное окно по умолчанию */
  position: fixed; /* Фиксированное позиционирование */
  left: 0;
  top: 0;
  width: 100%; /* Ширина на весь экран */
  z-index: 1055 !important;
  height: 100%; /* Высота на весь экран */
  overflow: auto; /* В случае переполнения добавить прокрутку */
  background-color: rgb(0, 0, 0); /* Фон с небольшой прозрачностью */
  background-color: rgba(0, 0, 0, 0.4); /* Черный фон с прозрачностью */
}

.modal.show {
  display: block !important;
}

/* Стили для модального окна */
.modal-content {
  position: relative;
  background-color: #fff;
  margin: 10% auto;
  z-index: 1056 !important;
  padding: 25px;
  border-radius: 8px;
  width: 40%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* Стили для кнопки закрытия */
.close {
  color: #333 !important;
  font-size: 30px !important;
  position: absolute !important;
  top: 10px !important;
  right: 15px !important;
  cursor: pointer !important;
  z-index: 1057 !important;
}

.close:hover,
.close:focus {
  color: black !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

/* Стили для backdrop */
.modal-backdrop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 1050 !important;
  width: 100vw !important;
  height: 100vh !important;
  background-color: #000 !important;
  opacity: 0.5 !important;
}

.modal-backdrop.fade {
  opacity: 0 !important;
}

.modal-backdrop.show {
  opacity: 0.5 !important;
}

/* Стили для формы внутри модального окна */
.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
}

.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="email"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* Стили для кнопки "Обновить" */
.form-group button[type="button"] {
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.form-group button[type="button"]:hover {
  background-color: #0056b3;
}

/* Добавляем стили для прокрутки модального окна */
.modal-body {
  max-height: calc(100vh - 210px); /* Ограничиваем максимальную высоту */
  overflow-y: auto; /* Включаем прокрутку, если содержимое превышает максимальную высоту */
}


.comments-container {
  position: relative; /* Устанавливаем контейнер как относительно позиционированный */
  padding-bottom: 20px; /* Добавляем нижний отступ */
}

.comments-icon {
  position: absolute; /* Позиционируем иконку абсолютно внутри контейнера */
  bottom: 5px; /* Отступ от нижней границы контейнера */
  right: 5px; /* Отступ от правой границы контейнера */
  cursor: pointer; /* Изменяем вид курсора при наведении */
}

.last-comment {
  display: block; /* Отображаем как блочный элемент для обеспечения вертикального отступа */
  margin-bottom: 5px; /* Отступ снизу для текста комментария */
}


[data-column="comments"][contenteditable="true"] {
  /* Пример стилей для редактируемой ячейки */
  border: 1px solid #ddd; /* Граница для выделения редактируемой области */
  background-color: #f9f9f9; /* Цвет фона для редактируемой ячейки */
  padding: 5px; /* Внутренние отступы */
  min-height: 20px; /* Минимальная высота */
  cursor: text; /* Курсор в виде текста при наведении */
}

.last-comment[contenteditable="true"]:focus {
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  padding: 5px;
  min-height: 20px;
}

.file-item {
  padding: 5px;
  margin-bottom: 5px;
  border: 1px solid #ddd;
  cursor: pointer;
}