/**
 * Содержит стили CSS для элементов интерфейса меню веб-страницы, адаптированные для различных размеров экрана.
 */

/**
 * Определяет отступы сверху для элементов.
 */

#structure-input-box,
#potreb2-input-box,
#potreb-input-box {
    width: 100%;
    height: 2.2rem;
 }

.margin-5 {
    margin-top: 5px;
    /* Отступ сверху 5px */
}

.margin-20 {
    margin-top: 20px;
    /* Отступ сверху 20px */
}

.margin-50 {
    margin-top: 50px;
    /* Отступ сверху 50px */
}

/**
 * Стилизует текст меток меню.
 */
.menu-label-text {
    text-align: center;
    /* Выравнивание текста по центру */
    color: white;
    /* Цвет текста белый */
}

/**
 * Определяет стили выпадающего списка.
 */
.dropdown {
    text-align: left;
    /* Выравнивание текста по левому краю */
    color: #212529;
    /* Цвет текста темно-серый */
}

/**
 * Устанавливает тень для элементов выпадающего списка.
 */
.menu-drop-down-wrap>* {
    box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
}

/**
 * Стилизует элементы чеклиста.
 */
.checklist-label-style {
    padding: 1rem;
    /* Внутренний отступ 1rem */
}

.checklist_input {
    cursor: pointer;
    /* Курсор в виде указателя */
    display: none;
    /* Элемент не отображается */
}

.form-check {
    display: flex;
    /* Включение flex-контейнера */
    flex-direction: column;
    /* Элементы располагаются в колонку */
    padding: 0;
    /* Без внутренних отступов */
    margin-bottom: 0;
    /* Без внешних отступов снизу */
    height: 100%;
    /* Высота 100% */
}

/**
 * Определяет интерактивные стили для элементов чеклиста.
 */
.checklist-label-style {
    display: flex;
    /* Включение flex-контейнера */
    align-items: center;
    /* Выравнивание элементов по центру */
    justify-content: center;
    /* Распределение содержимого по центру */
    width: 100%;
    /* Ширина 100% */
    height: 100%;
    /* Высота 100% */
    border-radius: 0.5rem;
    /* Скругление углов */

    transition: background-color 0.3s;
    /* Плавное изменение фона */
}

.checklist-label-style:hover {
    background-color: #fc7e65;
    /* Фон при наведении курсора */
    cursor: pointer;
    /* Курсор в виде указателя */
    transform: scale(1.08);
    /* Увеличение размера */
}

.checklist-label-style:active {
    box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
    /* Тень при нажатии */
    background-color: #bb2d3b;
    /* Фон при нажатии */
}

/**
 * Стилизует метки формы проверки.
 */
.form-check-label {
    justify-content: flex-end;
    /* Выравнивание содержимого в конце */
    align-content: stretch;
    /* Растягивание содержимого */
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    /* Тень элементов */
}

/**
 * Определяет стили для обертки меню.
 */
.menu-style-div {
    margin: 10% 10% 0 10%;
    /* Внешние отступы */
    display: flex;
    /* Включение flex-контейнера */
    flex-direction: column;
    /* Элементы располагаются в колонку */
    height: 98%;
    /* Высота 98% */
}


/**
 * Изменяет стили при наведении на элементы списка.
 */
.VirtualizedSelectFocusedOption {
    background: #fc9581;
}

/**
 * Определяет отступы для кнопок.
 */
.dwn-pdf-btn-div {
    margin-top: 2.5rem;
    /* Внешний отступ сверху 2.5rem */
}

.logout-button-div {
    margin-top: auto;
    /* Автоматический внешний отступ сверху */
}

/**
 * Стилизует кнопки.
 */
#iogv-logout-button,
#iogv-search-btn,
#potreb-search-btn,
#potreb2-search-btn,
#structure-search-btn,
#potreb-logout-button,
#potreb-clear-btn,
#potreb2-logout-button,
#potreb2-clear-btn,
#structure-logout-button,
#structure-clear-btn,
#iogv-dwn-pdf-btn,
#potreb-dwn-pdf-btn,
#potreb2-dwn-pdf-btn,
#structure-dwn-pdf-btn,
#clear-btn {
    width: 100%;
    /* Ширина 100% */
    transition: background-color .3s;
    /* Плавное изменение фона */
}

#clear-btn {
    margin: 10px 0 20px 0;
    /* Внешние отступы */
}

/**
 * Устанавливает стили для текста меток меню.
 */
.menu-label-text {
    -ms-user-select: none;
    /* Отключение выделения текста для IE */
    -moz-user-select: none;
    /* Отключение выделения текста для Firefox */
    -webkit-user-select: none;
    /* Отключение выделения текста для Chrome, Safari */
    -webkit-touch-callout: none;
    /* Отключение контекстного меню для iOS Safari */
    -khtml-user-select: none;
    /* Отключение выделения текста для Konqueror */
    user-select: none;
    /* Отключение выделения текста */
}

/**
 * Стилизует метку типа GRBS.
 */
#grbs-type-label {
    font-size: 1rem;
    /* Размер шрифта 1rem */
    margin-top: 0;
    /* Без внешнего отступа сверху */
    margin-bottom: 0;
    /* Без внешнего отступа снизу */
}

/**
 * Определяет стили для колонки с меню.
 */
.menu-collection-col {
    background-color: #1092A7;
    /* Фоновый цвет */
    flex: 1;
    /* Flex-параметры */
    min-width: 300px;
    /* Минимальная ширина */
    overflow-y: auto;
    /* Прокрутка по вертикали */
    scrollbar-width: thin;
    /* Ширина полосы прокрутки */
    scrollbar-color: #1092A7 #f5f5f5;
    /* Цвет полосы прокрутки */
}

/**
 * Медиа-запросы для экранов с максимальной шириной 1300px.
 * Адаптирует размер шрифта меток меню.
 */
@media screen and (max-width: 1300px) {

    #grbs-type-label,
    .menu-label-text {
        font-size: .9rem;
        /* Уменьшение размера шрифта */
    }
}

/**
 * Медиа-запросы для экранов с максимальной шириной 1000px.
 * Адаптирует стили для меньших экранов.
 */
@media screen and (max-width: 1000px) {

    .menu-collection-col {
        min-width: 270px;
        /* Уменьшение минимальной ширины колонки с меню */
    }

    #grbs-type-label,
    #iogv-dwn-pdf-btn,
    #potreb-dwn-pdf-btn,
    #clear-btn,
    #potreb-clear-btn,
    #iogv-logout-button,
    #potreb-logout-button,
    .menu-drop-down,
    #potreb2-dwn-pdf-btn,
    #potreb2-clear-btn,
    #potreb2-logout-button,
    #structure-dwn-pdf-btn,
    #structure-clear-btn,
    #structure-logout-button,
    #potreb-search-btn,
    #potreb2-search-btn,
    #structure-search-btn {
        font-size: .8rem;
        /* Уменьшение размера шрифта */
    }

    .menu-label-text>h4 {
        font-size: 1.2rem;
        /* Увеличение размера шрифта заголовков */
    }

    .form-check {
        height: 4rem;
        /* Уменьшение высоты формы проверки */
    }

    .menu-style-div {
        margin: 0;
        /* Убираем внешние отступы */
        padding: 5% 0 0 5%;
        /* Устанавливаем внутренние отступы */
    }

    .menu-style-div>* {
        align-self: center;
        /* Выравнивание элементов по центру */
        width: 80%;
        /* Оптимизация ширины элементов для меньших экранов */
    }

    .menu-label-text {
        margin-top: .5rem;
        /* Установка верхнего отступа для текста меток меню */
    }

    #clear-btn {
        margin: 0;
        /* Убираем отступы для кнопки очистки */
    }

    .margin-5 {
        margin-top: 0;
        /* Убираем верхний отступ для элементов с классом .margin-5 */
    }

    .dwn-pdf-btn-div,
    .logout-button-div {
        margin-top: 1rem;
        /* Установка верхнего отступа для областей с кнопками */
    }

    .offset-3 {
        margin-left: 0;
    }

    #potreb2-dropdown-block-row {
        margin-top: 15px !important;
    }


}

/**
 * Медиа-запросы для экранов с максимальной шириной 500px.
 * Дополнительно адаптирует стили для очень маленьких экранов, таких как мобильные телефоны.
 */
@media screen and (max-width: 500px) {


    #potreb-tab-row > div {
        flex-basis: 100%;
    }

    #iogv-tab-row,
    #potreb-tab-row,
    #potreb2-tab-row,
    #structure-tab-row {
        width: auto !important;
        /* Автоматическая ширина для строки вкладок */
        flex-wrap: wrap !important;
        /* Перенос элементов при нехватке пространства */
        margin-right: unset;
        /* Сброс правого отступа */
    }

    #checklist {
        display: flex;
        /* Включение flex-контейнера для чеклиста */
        flex-flow: column wrap;
        /* Установка направления элементов и их переноса */
        height: 100%;
        /* Высота контейнера 100% */
        justify-content: flex-start;
        /* Выравнивание содержимого в начале контейнера */
        align-items: center;
        /* Центрирование элементов по горизонтали */
    }

    #potreb-checklist,
    #structure-checklist {
        display: flex;
        /* Включение flex-контейнера для чеклиста */
        flex-wrap: wrap;
        /* Установка направления элементов и их переноса */
        gap: 1rem;
        flex-direction: unset !important;
    }

    #structure-checklist {
        flex-flow: column wrap;
        flex-direction: column;
        height: 100%;
        justify-content: flex-start;
        align-items: center;
    }

    #checklist>* {
        width: 40%;
        /* Ширина элементов чеклиста 40% */
        height: 40%
            /* Высота элементов чеклиста 40% */
    }

    #potreb-checklist>*,
    /*#potreb2-checklist>*,*/
    #structure-checklist>* {
        flex: 1 1 calc(50% - 1rem);
        box-sizing: border-box;
        width: 20%;
    }

    div.form-check:nth-child(5) {
        flex: 1 1 100% !important;
    }

    #structure-tab-row > div:nth-child(1) > div:nth-child(1) > div:nth-child(3) {
        height: unset;
    }

    .menu-style-div>div:nth-child(3) {
        height: 200px;
        /* Установка высоты для третьего дочернего элемента */
    }


    .menu-label-text {
        margin-top: .2rem;
        /* Установка верхнего отступа для текста меток меню */
    }

    .menu-style-div {
        margin: 0;
        /* Убираем внешние отступы */
        padding: 3% 0 0 5%;
        /* Устанавливаем внутренние отступы */
    }

    #dropdown-block-row {
        display: flex;
        /* Включение flex-контейнера для строки выпадающих блоков */
        flex-flow: column wrap;
        /* Установка направления элементов и их переноса */
        align-items: center;
        /* Центрирование элементов по горизонтали */
        height: 240px;
        /* Высота строки выпадающих блоков */
        margin-top: -25px;
        /* Установка верхнего отступа */
    }

    #potreb-dropdown-block-row,
    #potreb2-dropdown-block-row,
    #structure-dropdown-block-row {
        display: flex;
        /* Включение flex-контейнера для строки выпадающих блоков */
        flex-wrap: wrap;
        /* Установка направления элементов и их переноса */
        align-items: center;
        /* Центрирование элементов по горизонтали */
        height: 240px;
        /* Высота строки выпадающих блоков */
        margin-top: 50px;
        /* Установка верхнего отступа */
    }

    #dropdown-block-row>.menu-label-text,
    #potreb-dropdown-block-row>.menu-label-text,
    #potreb2-dropdown-block-row>.menu-label-text,
    #structure-dropdown-block-row>.menu-label-text {
        height: 20px !important;
        /* Установка высоты для текста меток меню */
    }

    #dropdown-block-row>* {
        width: 50%;
        /* Ширина элементов 50% */
        height: 21%;
        /* Высота элементов 21% */
    }

    #potreb-dropdown-block-row>*,
    #potreb2-dropdown-block-row>*,
    #structure-dropdown-block-row>* {
        width: 50%;
        /* Ширина элементов 50% */
    }

    .dwn-pdf-btn-div {
        margin-top: .5rem;
        /* Установка верхнего отступа для области с кнопкой загрузки PDF */
    }

    .logout-button-div {
        margin-bottom: 1rem;
        /* Установка нижнего отступа для области с кнопкой выхода */
    }
}