.mrg-tag {
    display: inline-block;
    margin: 0 auto;
}
        body {
            margin: 0;
            padding: 0;
            background-color: #121212;
            color: #fff;
        }

        /* Стили для контейнера с городами */
        #cities-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center; 
        }

        .city-container {
            margin: 5px;
            background-color: #1f1f1f;
            border-radius: 8px;
            box-shadow: none; /* Свечение отключено */
            overflow: hidden;
            width: 100%; 
            margin-bottom: 10px;
        }

        .city-container.tile-view {
            width: calc(50% - 20px); 
        }

        .city-image {
            display: block;
            width: 100%; 
            height: auto; 
        }

        @media (max-width: 560px) {
            .city-container.tile-view {
                width: 100%;
            }
        }

        .city-name {
            text-align: center;
            margin: 10px;
            word-break: break-all;
            hyphens: auto;
            font-size: 1vw;
        }

        @media (max-width: 560px) {
            .city-name {
                font-size: 12px;
            }
        }

        /* Стили для выпадающего блока */
        #dropdown-container {
            max-height: 0; 
            overflow: hidden; 
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }

        #dropdown-container.open { 
            max-height: 750px;
            width: 90%; /* Задайте нужную ширину */
            margin: 0 auto; /* Центрируем блок по горизонтали */
        }

/* Добавляем .offline-controls в этот список */
.zoom-controls, .sort-controls, .display-controls, .offline-controls {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 10px;
    justify-content: center; /* Это выравнивает по центру горизонтально */
	
}

        #image-zoom-control-label {
            margin-right: 10px;
        }
        #image-zoom-control-value {
            margin-left: 5px;
            margin-right: 10px;
        }

        /* Стили для кнопок */
        #buttons-container {
            display: flex; 
            justify-content: center;
            margin: 10px auto 7px; 
        }

        /* Стили для кнопок */
        #buttons-container button {
            background-color: transparent;
            color: #fff;
            border: none;
            padding: 10px 15px;
            margin: 0 5px;
            cursor: pointer;
            border-radius: 4px;
            font-size: 18px; 
        }

        #buttons-container button:hover {
            background-color: #333;
        }

        .sort-button { 
            background-color: transparent;
            color: #fff;
            border: none;
            padding: 5px 10px;
            margin: 5px;
            cursor: pointer;
            border-radius: 4px;
        }
        .sort-button:hover {
            background-color: #333;
        }
        .sort-button.active { 
            background-color: #333;
        }
        #dropdown-container > span {
            margin-right: 7px;
            margin: 10px auto 0; 
            max-height: none;
            width: 90%; /* Занимаем всю ширину страницы */
        }

        .sort-button .arrow {
            display: none;
        }
        .sort-button.active .arrow { 
            display: inline-block;
            margin-left: 5px;
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
        }
        .sort-button.active.asc .arrow {
            border-bottom: 7px solid #00a2ff;
            border-top: 0;
        }
        .sort-button.active.desc .arrow {
            border-top: 7px solid #00a2ff;
            border-bottom: 0;
        }

        /* Дополнительные стили для чекбоксов */
#cameras-content {
  display: flex;           
  flex-wrap: wrap;          
  align-items: flex-start; /* Выравнивание строк по верху контейнера */
  max-height: 450px;
  overflow: hidden; 
  width: 95%;
}

#cameras-content .cameras-row { 
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Центрируем элементы в строке */ 
  width: 100%;            /* Строка занимает всю ширину контейнера */ 
}

#cameras-content label {
  white-space: nowrap; 
  padding-right: 20px;
  margin-bottom: 10px;      
  display: flex;            /* Используем flexbox для выравнивания */
  align-items: center;      /* Выравниваем чекбокс и текст по вертикали */
}

#cameras-content label input[type="checkbox"] {
  margin-right: 5px; /* Увеличиваем расстояние до текста */
}

/* Стили для кнопки "Выбрать все" */
#select-all-button {
  background-color: transparent;
  color: #fff;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 4px;
  font-size: 12px;
  display: block; /* Важно! Делаем кнопку блочным элементом */
  margin: 10px auto; /* Отступ сверху и снизу 10px, по бокам - автоматический */
  width: fit-content; /* Ширина кнопки подстроится под текст */
}

#select-all-button:hover {
  background-color: #333;
}

.display-controls label, .offline-controls label {
  margin-right: 7px;
  font-size: 12px;
  display: flex;
  align-items: center;
  cursor: pointer; /* Чтобы было понятно, что можно нажать */
}

.display-controls span, .offline-controls span {
  margin-right: 8px;
}

/* Убираем лишние отступы у чекбоксов внутри лейблов */
.display-controls input[type="checkbox"], 
.offline-controls input[type="checkbox"] {
  margin: 0 5px 0 0;
}

@media (max-width: 400px) { /* Задайте максимальную ширину экрана, при которой будут применяться стили */

  .display-controls {
    flex-direction: column; /* Располагаем элементы вертикально */
  }

  .display-controls span {
    margin-bottom: 5px; /* Добавляем отступ снизу от надписи "Отображать" */
  }
}
        /* Стили для карусели */
        #promo-carousel {
            display: flex;
            overflow-x: auto;
            margin: 6px 0; /* Добавьте отступы сверху и снизу */
            width: 90%; /* Занимаем 95% ширины страницы */
            margin: 0 auto; /* Центрируем блок по горизонтали */
  justify-content: center; /* Центрирование по горизонтали */
        }

        /* Стили для заголовка и кнопки сворачивания */
        #promo-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
            width: 88%; /* Занимаем 95% ширины страницы */
            margin: 0 auto; /* Центрируем блок по горизонтали */
        }

        #promo-header h2 {
            margin: 0;
            font-size: 14px; /* Уменьшаем размер шрифта */
        }

#promo-container {
    margin-top: 15px; /*  Добавляем отступ сверху */
    /* ... (другие стили) ... */
}

        #promo-toggle-button {
            background-color: transparent;
            border: none;
            cursor: pointer;
            padding: 5px;
        }

        /* Стили для элементов карусели */
        .promo-item {
            min-width: 200px;
            flex: 1 0 200px;
            margin: 5px;
            background-color: #1f1f1f;
            border-radius: 8px;
            box-shadow: none; /* Свечение отключено */
            overflow: hidden;
            text-align: center;
            display: flex; /* Используем flexbox для позиционирования кнопки */
            flex-direction: column; /* Располагаем элементы вертикально */
        }

        .promo-item a {  /* Стили для ссылки, содержащей изображение */
            display: block;
            height: 140px; /* Задайте желаемую высоту контейнера */
            overflow: hidden; /* Скрываем выступающие части изображения */
        }

        .promo-item img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Обрезаем изображение по высоте контейнера */
        }

        .promo-item h3 {
            margin: 10px 10px 0 10px; /* Убираем нижний отступ */
            font-size: 16px;
        }

        /* Добавляем горизонтальную линию */
.promo-item hr {
    border: none;
    border-top: 1px solid #ccc;
    margin: 6px auto;;
    width: 80%; /* Ширина линии 80% от ширины контейнера */
}

        .promo-item p {
            margin: 0 10px 10px 10px; /* Убираем верхний отступ */
            font-size: 12px;
            flex-grow: 1; 
        }

        .promo-item button {
            background-color: #007bff; /* Добавляем фон */
            color: #fff;
            border: none;
            padding: 10px 15px; /* Увеличиваем высоту */
            margin: 10px;
            cursor: pointer;
            border-radius: 4px;
            font-size: 14px;
            margin-top: auto; /* Фиксируем кнопку внизу */
            width: 50%; /* Уменьшаем ширину */
            max-width: 150px; /* Ограничиваем максимальную ширину */
            margin-left: auto; /* Выравниваем кнопку по правому краю */
            margin-right: auto; /* Выравниваем кнопку по правому краю */
        }

        .promo-item button:hover {
            background-color: #0056b3; /* Изменяем фон при наведении */
        }

        /* Стили для надписи */
        #promo-toggle-label {
            font-size: 12px; /* Размер шрифта */
            margin-right: 6px; /* Отступ справа */
            cursor: pointer; /* Делаем надпись кликабельной */
        }

        /* Стили для контейнера надписи и кнопки */
        #promo-header > div { /* Выбираем div внутри #promo-header */
            display: flex; /* Используем flexbox для выравнивания */
            align-items: center; /* Выравниваем по вертикали */
					
        }
        /* Уменьшаем шрифты в карусели для мобильных устройств */
@media (max-width: 560px) {
    #promo-container h2,
    #promo-container span,
    #promo-container h3,
    #promo-container p {
        font-size: 66.67%; 
    }

    /* Увеличиваем размер значка кнопки */
    #promo-toggle-button {
        font-size: 14px; /* Или другой желаемый размер */
    }
}
@media (max-width: 560px) {
    .promo-item a {
        height: 100px; /* Уменьшаем высоту контейнера для мобильных устройств */
    }
}
/* Стили для десктопов */
@media (min-width: 768px) { /* Измените 768px на нужную вам ширину */
  #menu-primary-navigation {
    background-color: #1f1f1f;
    border-radius: 8px;
    box-shadow: none; /* Свечение отключено */
    padding: 10px;
    text-align: center; 
		font-family: 'Roboto', sans-serif; 
  }

  #menu-primary-navigation > li {
    display: inline-block;
    margin: 0 5px;
  }

  #menu-primary-navigation > li > a {
    color: #fff;
    text-decoration: none;
    padding: 8px 12px;
  }

  #menu-primary-navigation > li > a:hover {
    background-color: #333;
    border-radius: 4px;
  }
}
/* Медиа-запрос для маленьких экранов */
@media (max-width: 560px) {  /* Задайте максимальную ширину экрана, при которой будет применяться уменьшенный размер шрифта */
  #buttons-container button {
    font-size: 14px;  /* Уменьшенный размер шрифта */
  }
}
#description-container {
    max-width: 95%; 
    margin: 15px auto;
    background-color: #1f1f1f;
    border-radius: 8px;
    box-shadow: none; /* Свечение отключено */
    padding: 15px;
	  color: #eeeeee; /* Светло-серый цвет текста */
    font-size: 16px; /* Размер шрифта */
    line-height: 1.5; /* Межстрочный интервал */
}

.description-subheader {
    text-align: center;
    color: #fff;
    margin-bottom: 10px;
}

.description-text {
    text-align: justify;
    color: #fff;
    margin-bottom: 10px;
}

.description-hr {
    border: none;
    border-top: 1px solid #ccc;
    margin: 15px 0;
}
.description-header:hover {
    color: #007bff; /* Пример: синий цвет при наведении */
	  cursor: pointer;
}
.color-darkgreen { background-color: darkgreen !important; }
.color-green { background-color: green; }
.color-yellowgreen { background-color: yellowgreen !important; }
.color-yellow { background-color: yellow !important; }
.color-orange { background-color: orange !important; }
.color-red { background-color: red !important; }
.color-darkred { background-color: darkred !important; }
.color-white { background-color: white !important; }

/* Стили для кнопок */
#single-cam-buttons-container {
  display: flex; 
  justify-content: center;
  margin: 10px auto 7px; 
}

/* Стили для кнопок */
#single-cam-buttons-container button {
  background-color: transparent;
  color: #fff;
  border: none;
  padding: 10px 15px;
  margin: 0 5px;
  cursor: pointer;
  border-radius: 4px;
  font-size: 18px; 
}

#single-cam-buttons-container button:hover {
  background-color: #333;
}

/* Стили для выпадающего блока */
#single-cam-dropdown-container {
  max-height: 0; 
  overflow: hidden; 
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

#single-cam-dropdown-container.open { 
  max-height: 630px;
  width: 90%; /* Задайте нужную ширину */
  margin: 0 auto; /* Центрируем блок по горизонтали */
}

.single-city-container {
    margin: 5px auto; /* Изменено: автоматические отступы сверху/снизу и слева/справа */
    background-color: #1f1f1f;
    border-radius: 8px;
    box-shadow: none; /* Свечение отключено */
    overflow: hidden;
    width: 95%; /* Можно настроить ширину контейнера */
    margin-bottom: 15px;
	
}

.single-city-image {
    display: block;
    width: 90%; 
    height: auto; 
    margin: 0 auto; /* Центрируем изображение по горизонтали */
}

.single-city-name {
    text-align: center;
    margin: 10px;
    word-break: break-all;
    hyphens: auto;
    font-size: 1vw;
}

@media (max-width: 560px) {
    .single-city-name {
        font-size: 12px;
    }
}

/* Стили для контейнера информации */
#info {
  background-color: #1f1f1f;
  border-radius: 8px;
  box-shadow: none; /* Свечение отключено */
  overflow: hidden;
  width: 95%; 
  margin: 10px auto; 
  padding: 10px;
}

/* Стили для описания камеры */
#cam-info {
	text-align: center;
  color: #fff;
  margin-bottom: 5px;
}

/* Стили для контейнера партнеров */
#partners {
  display: flex;
  align-items: center; 
  justify-content: center;
  margin-bottom: 10px; 
}

/* Стили для логотипов партнеров */
#partners a { 
  margin: 0 5px; 
}

#partners {
  display: flex;
  align-items: center; 
  justify-content: center;
  margin-bottom: 0px; 
}

#partners img {
  aspect-ratio: auto 1 / 1; /* Соотношение сторон 1:1 (ширина = высота) */
  max-height: 120px; /* Установите желаемую максимальную высоту */
  width: auto; /* Ширина будет вычисляться автоматически */
}

/* Стили для ссылки на таймлапсы */
#yt {
  text-align: center;
}
#join {
  text-align: center;
}

/* #single-cam-geomagnetic-activity-content {
	  max-width: 100%;
} */

        /* Стили для карусели */
        #single-promo-carousel {
            display: flex;
            overflow-x: auto;
            margin: 6px 0; /* Добавьте отступы сверху и снизу */
            width: 95.5%; /* Занимаем 95% ширины страницы */
            margin: 0 auto; /* Центрируем блок по горизонтали */
        }

        /* Стили для заголовка и кнопки сворачивания */
        #single-promo-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
            width: 93%; /* Занимаем 95% ширины страницы */
            margin: 0 auto; /* Центрируем блок по горизонтали */
        }

        #single-promo-header h2 {
            margin: 0;
            font-size: 14px; /* Уменьшаем размер шрифта */
        }

#single-promo-container {
    margin-top: 15px; /*  Добавляем отступ сверху */
    /* ... (другие стили) ... */
}

        #single-promo-toggle-button {
            background-color: transparent;
            border: none;
            cursor: pointer;
            padding: 5px;
        }

        /* Стили для элементов карусели */
        .single-promo-item {
            min-width: 200px;
            flex: 1 0 200px;
            margin: 5px;
            background-color: #1f1f1f;
            border-radius: 8px;
            box-shadow: none; /* Свечение отключено */
            overflow: hidden;
            text-align: center;
            display: flex; /* Используем flexbox для позиционирования кнопки */
            flex-direction: column; /* Располагаем элементы вертикально */
        }

        .single-promo-item a {  /* Стили для ссылки, содержащей изображение */
            display: block;
            height: 140px; /* Задайте желаемую высоту контейнера */
            overflow: hidden; /* Скрываем выступающие части изображения */
        }

        .single-promo-item img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Обрезаем изображение по высоте контейнера */
        }

        .single-promo-item h3 {
            margin: 10px 10px 0 10px; /* Убираем нижний отступ */
            font-size: 16px;
        }

        /* Добавляем горизонтальную линию */
.single-promo-item hr {
    border: none;
    border-top: 1px solid #ccc;
    margin: 6px auto;;
    width: 80%; /* Ширина линии 80% от ширины контейнера */
}

        .single-promo-item p {
            margin: 0 10px 10px 10px; /* Убираем верхний отступ */
            font-size: 12px;
            flex-grow: 1; 
        }

        .single-promo-item button {
            background-color: #007bff; /* Добавляем фон */
            color: #fff;
            border: none;
            padding: 10px 15px; /* Увеличиваем высоту */
            margin: 10px;
            cursor: pointer;
            border-radius: 4px;
            font-size: 14px;
            margin-top: auto; /* Фиксируем кнопку внизу */
            width: 50%; /* Уменьшаем ширину */
            max-width: 150px; /* Ограничиваем максимальную ширину */
            margin-left: auto; /* Выравниваем кнопку по правому краю */
            margin-right: auto; /* Выравниваем кнопку по правому краю */
        }

        .single-promo-item button:hover {
            background-color: #0056b3; /* Изменяем фон при наведении */
        }

        /* Стили для надписи */
        #single-promo-toggle-label {
            font-size: 12px; /* Размер шрифта */
            margin-right: 6px; /* Отступ справа */
            cursor: pointer; /* Делаем надпись кликабельной */
        }

        /* Стили для контейнера надписи и кнопки */
        #single-promo-header > div { /* Выбираем div внутри #single-promo-header */
            display: flex; /* Используем flexbox для выравнивания */
            align-items: center; /* Выравниваем по вертикали */
					
        }
        /* Уменьшаем шрифты в карусели для мобильных устройств */

@media (max-width: 560px) {
  #single-promo-container { 
    .promo-item h2, 
    .promo-item	span,  
    .promo-item h3, 
    .promo-item p { 
      font-size: 66.67%; 
    }
  }
}

    /* Увеличиваем размер значка кнопки */
    #single-promo-toggle-button {
        font-size: 14px; /* Или другой желаемый размер */
    }
}
#select-all-button {

}
/* Стили для центрирования на маленьких экранах */
@media (max-width: 420px) { 
  #aurora-map {
		width: 92%; /* Адаптивная ширина */
    margin: 0 auto; /* Центрирование по горизонтали */
    display: block; /* Важно для корректного центрирования изображений */
		margin-bottom: 15px;
  }
}
/*
#description-container,
#description-subheader,
#description-sheader {
  font-family: 'Roboto', sans-serif; 
}
*/
@media (max-width: 500px) { /* или другое значение ширины экрана */
  #geotable {
    font-size: 90%; /* уменьшаем шрифт на 20% */
  }
}
.menu, .page_item a, .menu-item a, .wp-block-navigation, .wp-block-navigation-item__content {
    font-family: "Roboto Flex";
}