/* Dual listbox container */
.dual-listbox-container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
}

/* Source and destination select */
.dual-listbox-container .select-source,
.dual-listbox-container .select-destination {
    width: 45%;
    height: 10em; /* Adjust height as needed */
    border: 1px solid #ced4da; /* Bootstrap's border color */
    border-radius: .25rem; /* Bootstrap's border radius */
    padding: .375rem .75rem; /* Bootstrap's padding */
    background-color: #fff; /* Bootstrap's background color */
    margin-bottom: 5px; /* Adjust margin as needed */
    overflow-y: auto;
}

/* Remove the default browser highlighting for selected options */
.dual-listbox-container .select-source option:focus,
.dual-listbox-container .select-destination option:focus,
.dual-listbox-container .select-source option:active,
.dual-listbox-container .select-destination option:active {
    background-color: transparent !important;
    color: inherit !important;
}

/* Style for options when hovered or clicked */
.dual-listbox-container .select-source option:hover,
.dual-listbox-container .select-destination option:hover {
    background-color: #f8f9fa;
}

/* Style for selected options (when actually selected for moving) */
.dual-listbox-container .select-source option:checked,
.dual-listbox-container .select-destination option:checked {
    background-color: #007bff !important;
    color: white !important;
}

/* Remove focus outline from select elements */
.dual-listbox-container .select-source:focus,
.dual-listbox-container .select-destination:focus {
    outline: none;
    box-shadow: none;
    border-color: #ced4da;
}

/* Ensure no highlighting on page load for pre-selected items */
.dual-listbox-container .select-destination option {
    background-color: transparent;
    color: inherit;
}

/* Only highlight when user actively selects */
.dual-listbox-container .select-destination option:active:checked {
    background-color: #007bff !important;
    color: white !important;
}

/* Button group */
.dual-listbox-container .btn-group {
    width: 10%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.dual-listbox-container .btn-add,
.dual-listbox-container .btn-remove,
.dual-listbox-container .btn-up,
.dual-listbox-container .btn-down {
    margin-bottom: 0.2em; /* Adjust margin as needed */
}
