/* Стили для грида где располагаются фильтры */
.filter-buttons {
    display: grid;
    height: 50px;
    align-content: start;
    border-radius: 10px; /* Скругление углов контейнера */
    /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Тень контейнера */*/
    margin-top: 10px; /* Внешний отступ сверху */
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 10px;
    background-color: rgba(0, 0, 0, 0); /* Прозрачный цвет фона */
    /*background-color: #ffffff;*/
    padding: 10px;
}

/* Сами стили для фильтров */
.filter-buttons > div {
<!--        background-color: black;-->
    background-color: rgba(0, 0, 0, 0); /* Прозрачный цвет фона */
    box-shadow: none; /* Убираем тень */
    text-align: center;
    margin-top: -4px; /* Внешний отступ сверху */
    padding: 20px 0;
    font-size: 30px;
    height: 15px;
    width: 230px;
    margin-left: auto; /* Выравнивание по левой стороне от контейнера .container */
    margin-right: auto; /* Внешний отступ справа */
}



/* Стили при фокусе на нашем кастомном выпадающем списке */
.custom-select:focus {
  /* Цвет границы при фокусе */
  border-color: #66afe9;
  /* Убираем обводку */
  outline: 0;
  /* Создаем эффект тени */
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}


.grid-container.filter-buttons > div {
    display: flex;
    justify-content: center;
}

.filter-buttons {
    display: grid;
    place-items: center; /* центрирует по горизонтали и вертикали */
}

.filter-buttons select {
    width: 200px;
    height: 55px;
    width: 300px;
    border-radius: 5px; /* Скругление углов контейнера */
}

.filter-buttons select:focus {
    border-radius: 0; /* Убирает скругление углов при фокусировке */
}

.filter-buttons {
    position: relative; /* необходимо для позиционирования абсолютного элемента относительно этого контейнера */
}




.filter-buttons label {
    position: absolute; /* Позиционируем метку абсолютно относительно контейнера .filter-buttons */
    top: 8px; /* Размещаем метку в верхнем краю контейнера */
    left: 5px; /* Размещаем метку в левом краю контейнера */
    font-size: 13px; /* Устанавливаем размер шрифта */
    color: #727b82; /* Устанавливаем цвет текста */
    font-family: SBSans,SeroPro,sans-serif; /* Устанавливаем шрифт */
    -webkit-font-smoothing: antialiased; /* Устанавливаем сглаживание шрифта */
    pointer-events: none; /* Отключаем события мыши для метки */
    cursor: default; /* Устанавливаем курсор по умолчанию */
    user-select: none; /* Запрещаем выделение текста */
}

.filter-buttons select {
    display: block;
    padding-top: 13px; /* добавляем отступ сверху для элементов списка */
    padding-bottom: 0px; /* добавляем отступ снизу для элементов списка */
    padding-left: 0px;
    font-size: 14px; /* изменяем размер шрифта */
    color: black; /* изменяем цвет текста */
    font-family: SBSans,SeroPro,sans-serif;
    font-weight: bold;

}