/* Ensure modal has a higher z-index */
.modal {
    z-index: 1050; /* Or adjust this based on your layout */
}

/* Ensure select2 dropdown appears correctly */
select {
    z-index: 1060 !important; /* Ensure select2 stays above other elements */
}


/* Ensure the outline is visible by default */
select {
    outline: 2px solid transparent; /* Make the outline initially transparent */
}

/* Make the outline appear when focused */
.select2-container--default .select2-selection--single:focus {
    outline: 2px solid blue; /* Change to your preferred color */
    outline-offset: 2px; /* Adjust the offset if needed */
}

/* Optional: Add focus and hover styling */
.select2-container--default .select2-selection--single:hover {
    outline: 2px solid blue; /* Same or different color for hover */
}

/* Add a box shadow on focus for better visibility */
.select2-container--default .select2-selection--single:focus {
    box-shadow: 0 0 5px rgba(0, 0, 255, 0.7); /* Example shadow */
}