/**
 *
 * You can write your CSS code here, DO NOT touch the default JavaScript file
 * because it will make it harder for you to update.
 * 
 */

/*# sourceMappingURL=custom.css.map */

/* Select2 Custom Styling */
.select2-container--default .select2-selection--single {
    height: 38px;
    border: 1px solid #dce4ec;
    border-radius: 0.25rem;
    background-color: #fff;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 36px;
    padding-left: 12px;
    color: #495057;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px;
}

.select2-container--default .select2-dropdown {
    border: 1px solid #dce4ec;
    border-radius: 0.25rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #007bff;
    color: white;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #dce4ec;
    border-radius: 0.25rem;
    padding: 8px 12px;
}

.select2-container--default .select2-results__option {
    padding: 8px 12px;
}

.select2-container--default .select2-results__option[aria-selected] {
    background-color: #f8f9fa;
}

.select2-container--default .select2-results__option[aria-selected]:hover {
    background-color: #e9ecef;
}

/* Additional Select2 improvements */
.select2-container--default .select2-selection--single:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    color: #6c757d;
    margin-right: 20px;
}

.select2-container--default .select2-selection--single .select2-selection__clear:hover {
    color: #dc3545;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .select2-container {
        width: 100% !important;
    }
}