/* Общий контейнер */
.filter-container {
    position: relative;
}

/* Кнопка для открытия/закрытия фильтра */
.toggle-button {
    cursor: pointer; /* Указатель при наведении */
    padding: 10px; /* Отступы для кнопки */
    background-color: #f9f9f9; /* Цвет фона, как у фильтров */
    color: rgba(51, 51, 51, 0.5); /* Бледный цвет текста */
    border: 1px solid #ccc; /* Рамка, как у полей ввода */
    border-radius: 5px; /* Закругленные углы */
    position: relative; /* Для позиционирования полей ввода */
    white-space: nowrap; /* Не переносим текст */
    overflow: hidden; /* Скрываем переполнение */
    text-overflow: ellipsis; /* Многоточие для длинного текста */
    width: 200px; /* Фиксированная ширина кнопки */
    display: inline-block; /* Чтобы кнопка не растягивалась */
    transition: border-color 0.3s ease, color 0.3s ease; /* Плавный переход для рамки и цвета текста */
    text-align: left; /* Выравнивание текста по левому краю */
    font-size: 14px; /* Размер шрифта */
}


.toggle-button:hover {
    border-color: #f39c12; /* Цвет рамки при наведении */
}

.toggle-button:focus {
    outline: none; /* Убираем стандартный контур */
    border-color: #f39c12; /* Цвет рамки при фокусе */
}

/* Поля ввода */
.input-fields {
    display: none;
    position: absolute;
    background-color: white;
    padding: 10px;
    border: 1px solid #ccc;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 10;
    border-radius: 10px;
    white-space: nowrap;
}

.input-fields input {
    width: 80px;
    margin-right: 5px;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    font-size: 14px;
}

.input-fields input:focus {
    border-color: #f39c12;
    outline: none;
}

/* Кнопка применения фильтра */
.apply-button {
    cursor: pointer;
    padding: 5px 10px;
    background-color: #f39c12;
    color: white;
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.apply-button:hover {
    background-color: #e67e22;
}

.areaUnit {
    width: 76px; /* Установите желаемую ширину */
    padding: 5px; /* Отступы для удобства */
    font-size: 14px; /* Размер шрифта */
    border: 1px solid #ccc; /* Рамка */
    border-radius: 5px; /* Закругленные углы */
    outline: none; /* Убираем стандартный контур */
    transition: border-color 0.3s ease; /* Плавный переход для рамки */
}