/* Файл для формирования стилей для окна просмотра графика и таблицы с простоями оборудования */

/* позволяет раположить график и таблицу простоев в строку в модальном окне просмтра простоев */
@media (min-width: 768px) {
  .flex-container-show-simple-reason {
    display: flex; /* Flexbox для размещения элементов в строку */
    justify-content: space-between; /* Распределяем пространство равномерно */
    align-items: flex-start; /* Выравниваем элементы по верхнему краю */
  }
}
@media (max-width: 1024px) {
  .flex-container-show-simple-reason {
    flex-direction: column; /* Устанавливаем вертикальное направление */
    align-items: stretch; /* Элементы растягиваются на всю ширину контейнера */
  }
}

@media (min-width: 768px) {
  .container-canvas {
    position: relative; /* Устанавливаем контейнер как относительный */
    display: flex;
    justify-content: flex-start;
    border: 1px solid gray; /* Задаёт цвет и толщину рамки */
    padding: 0px; /* Добавляет отступы внутри контейнера */
    margin-bottom: 5px;

    margin-right: 10px;
  }
}

@media (max-width: 767px) {
  .container-canvas {
    border: 1px solid gray; /* Задаёт цвет и толщину рамки */
    padding: 0px; /* Добавляет отступы внутри контейнера */
    margin-bottom: 5px;
    width: 340px;
  }
}

.canvas-wrapper.size-diagrams-c {
  position: absolute; /* Абсолютное позиционирование для наложения */
  top: 8px; /* Устанавливаем верхнюю грань */
  left: 50px; /* Устанавливаем левую грань */
}

.canvas-wrapper {
  margin-right: 5px;
}

@media (max-width: 767px) {
  .size-diagrams-g {
    width: 330px; /* Значение для мобильной версии */
  }
  .size-diagrams-c {
    width: 100px;
  }
}

@media (min-width: 768px) {
  .size-diagrams-c {
    width: 130px;
  }
  .size-diagrams-g {
    width: 800px;
    padding-top: 0px;
    margin-top: 0px;
  }
}


.size-container{
    max-width: 1050px
  }

  /* Стили для мобильной версии */
@media (max-width: 767px) {
    .custom-scroll-container {
      max-height: 350px; /* Ограничение высоты на мобильных */
    }
    .size-container{
      max-width: 200px
    }
  }
  @media (max-width: 1024px) {
    
    .size-container{
      max-width: 900px
    }
  }