/* Стили для выпадающего списка */
.select {
    position: relative; /* Позиционирование для абсолютного позиционирования выпадающего списка */
    display: inline-block; /* Отображение в строку */
/*  width: 250px;  Ширина выпадающего списка */
/* 	margin-bottom: 20px; Отступ снизу */
}

/* Стиль для выбранного элемента выпадающего списка */
.select-select {
    display: flex; /* Использование flexbox для выравнивания */
    align-items: center; /* Вертикальное выравнивание по центру */
    justify-content: space-between; /* Распределение пространства между элементами */
    padding: 8px; /* Отступы внутри элемента */
    border: 1px solid #ccc; /* Граница */
    border-radius: 15px; /* Закругленные углы */
    background-color: #f0f0f0; /* Фоновый цвет */
    cursor: pointer; /* Курсор в виде указателя */
    min-width: 150px; /* Минимальная ширина */
    max-width: 550px; /* Максимальная ширина */
    overflow: hidden; /* Скрыть переполнение */
    white-space: nowrap; /* Запрет на перенос строк */
    text-overflow: ellipsis; /* Добавить многоточие */
}

/* Стиль для стрелки выпадающего списка */
.select-arrow {
    margin-left: 10px; /* Отступ слева */
    border: solid transparent; /* Прозрачные границы для создания стрелки */
    border-width: 5px 5px 0 5px; /* Размеры границ для создания треугольника */
    border-top-color: #000; /* Цвет верхней границы (стрелка) */
    transition: transform 0.2s; /* Плавный переход при вращении стрелки */
}

/* Поворот стрелки при открытом выпадающем списке */
.select.open .select-arrow {
    transform: rotate(180deg); /* Поворот стрелки на 180 градусов */
}

/* Стили для выпадающего списка опций */
.select-options {
    display: none; /* Скрытие по умолчанию */
    position: absolute; /* Абсолютное позиционирование */
    background-color: white; /* Фоновый цвет выпадающего списка */
    border: 1px solid #ccc; /* Граница */
    border-radius: 15px; /* Закругленные углы */
    width: 100%; /* Ширина равна 100% от родительского элемента */
    min-width: 150px; /* Минимальная ширина */
    max-width: 550px; /* Максимальная ширина */
    z-index: 1; /* Установка порядка отображения */
    max-height: 400px; /* Максимальная высота видимой области */
    overflow-y: auto; /* Полоса прокрутки по вертикали, если содержимое превышает максимальную высоту */
    text-align: left; /* Выравнивание текста по левому краю */
}

/* Стиль для каждой опции в выпадающем списке */
.select-option {
    padding: 10px; /* Отступы внутри опции */
    cursor: pointer; /* Курсор в виде указателя */
    text-align: left; /* Выравнивание текста по левому краю */
}

/* Стиль для выбранной опции */
.select-option.selected {
    background-color: #A0D3FF; /* Фоновый цвет выбранной опции */
    color: #000; /* Цвет текста выбранной опции */
}

/* Стиль для опции при наведении */
.select-option:hover {
    background-color: #ddd; /* Фоновый цвет при наведении */
}

/* Стиль для обертки количества */
.select-count-wrap {
    display: inline-flex; /* Размещение элементов в строку */
    align-items: center; /* Вертикальное выравнивание */
}

/* Стиль для скобок */
.select-count-bracket {
    color: gray; /* Серый цвет для скобок */
    font-size: 14px; /* Размер шрифта */
}

/* Стиль для числа */
.select-count-number {
    color: #4EA0ED; /* Синий цвет для числа */
    font-weight: bold; /* Жирный шрифт */
    margin: 0 2px; /* Отступы между скобками и числом */
    font-size: 80%; /* Уменьшение размера шрифта на 10% */
}