/* Темная тема для всего body */
body {
    background-color: #343a40;
    color: #ffffff;
  }
  
  /* Темная тема для карточек */
  .card {
    background-color: #232323;
    border: 1px solid #444;
    
  }
  
  /* Темная тема для заголовков карточек */
  .card-header {
    background-color: #343a40;
    color: #ffffff;
    font-weight: bold;
  }
  
  /* Темная тема для панели аспектного соотношения */
  #aspectRatioPanel {
    background-color: #232323;
    border: 1px solid #444;
    color: #ffffff;
  }
  .d-flex.hidden {
    display: none !important;
}

.aspect-ratio-box {
  display: inline-block;
  background-color: #ccc;  /* Серый фон для прямоугольника */
  margin-left: 5px;  /* Отступ слева от кнопки */
  vertical-align: middle;  /* Выравнивание по вертикали с кнопкой */
}

.aspect-ratio-1-2 {
  width: 20px;   /* Фиксированная ширина */
  height: 40px;  /* Высота в 2 раза больше ширины */
}

.aspect-ratio-16-9 {
  width: 32px;   /* Ширина пропорциональна 16 */
  height: 18px;  /* Высота пропорциональна 9 */
}

.aspect-ratio-9-16 {
  width: 18px;   /* Ширина пропорциональна 9 */
  height: 32px;  /* Высота пропорциональна 16 */
}
.aspect-ratio-1-1 {
  width: 25px;   /* Фиксированная ширина */
  height: 25px;  /* Высота равна ширине, создавая квадрат */
}