/* Fix the white background in permission selector */
.selector {
    background-color: #2d3748 !important;  /* Dark background */
    color: #f7fafc !important;  /* Light text */
    border-color: #4a5568 !important;  /* Dark border */
}

.selector select {
    background-color: #2d3748 !important;
    color: #f7fafc !important;
}

.selector-available, .selector-chosen {
    background-color:black !important;
}

.selector-filter {
    background-color: black !important;
    color: white !important;
    border-color: black !important;
}

/* Style the permission checkboxes */
.selector input[type="checkbox"] {
    filter: invert(80%);
}
/* Make the permissions selector box larger */
.selector {
    width: 800px !important;  /* Adjust width as needed */
}

.selector select {
    height: 500px !important;  /* Adjust height as needed */
    width: 100% !important;
    font-size: 14px !important;  /* Make text slightly larger */
}

/* Make the two columns wider */
.selector-available, .selector-chosen {
    width: 48% !important;  /* Nearly half the container each */
}

/* Make the permission items taller for better readability */
.selector select option {
    padding: 8px 12px !important;
    line-height: 1.5 !important;
}

/* Adjust the filter boxes at the top */
.selector-filter {
    width: 95% !important;
    padding: 8px !important;
    font-size: 14px !important;
}