/* Dropdown menu styling */
.multiselect-filter {
    display: flex;
    flex-direction: column;
    opacity: 1;
    transform: translateY(0);
}

/* Checkbox group inside the dropdown */
.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px;
    flex-grow: 1;
}

/* Label styles to ensure single-line display */
.checkbox-group label {
    white-space: nowrap;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    padding: 0.5px;
    border-radius: 3px;
    transition: background-color 0.2s ease; /* Smooth background change */
}

.checkbox-group label:hover {
    background-color: #f1f1f1; /* Light hover effect */
}

/* Customizing scrollbar */
.checkbox-group::-webkit-scrollbar {
    width: 8px;
}

.checkbox-group::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.checkbox-group::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.checkbox-group::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Styling for the select/deselect and apply buttons */
.filter-select-deselect-btn,
.filter-apply-btn {
    background-color: #444f64;
    color: #ffffff;
    padding: 6px 8px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    width: calc(100% - 20px); /* Accounting for padding */
    margin: 7px;
    font-weight: 600;
    font-size: 13px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    position: sticky;
    z-index: 2;
}

.filter-select-deselect-btn {
    top: 0;
}

.filter-apply-btn {
    bottom: 0;
    background-color: #4CAF50; /* Green color for apply button */
    color: white;
}

.filter-select-deselect-btn:hover,
.filter-apply-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.filter-select-deselect-btn:hover {
    background-color: #e0e0e0;
    color: #444f64;
}

.filter-apply-btn:hover {
    background-color: #45a049;
}

.filter-select-deselect-btn:active,
.filter-apply-btn:active {
    transform: translateY(1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.filter-select-deselect-btn:hover,
.filter-apply-btn:hover {
    animation: subtle-pulse 1.5s infinite;
}