.select2-container {
    width: 100% !important;
}

.select2-field {
    display: none;
}

.dark .select2-container .select2-selection--multiple,
.dark .select2-container .select2-selection--single {
    min-height: 2.5rem;
    border: 1px solid #ced4da;
    border-radius: 0.5rem;
    background-color: rgb(55 65 81); /* Dark mode background */
    border-color: #4b5563; /* Dark mode border color */
    color: #d1d5db; /* Dark mode text color */
    text-color: rgb(255 255 255); /* Dark mode text color */
}

.select2-container .select2-selection--multiple,
.select2-container .select2-selection--single {
    min-height: 2.5rem;
    border: 1px solid #d1d5dc;
    background-color: #f9fafb; /* Light mode background */
    border-radius: 0.5rem;
    color: #000000; /* Light mode text color */
}

.select2-container .select2-selection--multiple .select2-selection__choice {
    background-color: #007bff; /* Light mode selected item background */
    border: 1px solid #007bff;
    color: white;
    padding: 0 10px;
    margin-top: 0.25rem;
}

.dark .select2-container .select2-selection--multiple .select2-selection__choice {
    background-color: white; /* Dark mode selected item background */
    border: 1px solid rgb(55 65 81);
    color: black;
    padding: 0 10px;
    margin-top: 0.25rem;
}

.select2-container .select2-selection--multiple .select2-selection__choice__remove {
    color: white;
    margin-right: 10px;
    border-right: 1px solid white !important;
}

.dark .select2-container .select2-selection--multiple .select2-selection__choice__remove {
    color: black;
    margin-right: 10px;
    border-right: 1px solid black !important;

}

.select2-container .select2-selection__rendered {
    color: rgb(0 0 0); /* Light mode text color */
}

.dark .select2-container .select2-selection__rendered {
    color: #d1d5db; /* Light mode text color */
}

.select2-container .select2-selection--single .select2-selection__arrow b {
    border-color: #d1d5db transparent transparent transparent;
}

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

.select2-container .select2-results__option--highlighted[aria-selected] {
    background-color: rgb(88 151 251) /* Light mode highlight background */
    color: white;
}

.select2-container .select2-selection__choice__display {
    margin-left: 10px;
}

/* Homogenize the inner border */
.select2-dropdown {
    border: 1px solid #d1d5dc; /* Light mode border color */
}

.dark .select2-dropdown {
    border: 1px solid #4b5563; /* Dark mode border color */
}

.select2-selection__rendered, .select2-selection__clear {
    margin: 0.25rem;
}

/* Adjust dropdown background and text color for dark mode */
.dark .select2-container .select2-dropdown {
    background-color: rgb(55 65 81); /* Dark mode dropdown background */
    color: #d1d5db; /* Dark mode text color */
}

/* Adjust search input background and border for dark mode */
.dark .select2-container .select2-search--dropdown .select2-search__field {
    background-color: rgb(55 65 81); /* Dark mode search input background */
    border: 1px solid #4b5563; /* Dark mode search input border */
    color: #d1d5db; /* Dark mode search input text color */
}

/* Adjust dropdown highlighted item for dark mode */
.dark .select2-container .select2-results__option--highlighted[aria-selected] {
    background-color: rgb(88 151 251); /* Dark mode highlight background */
    color: white; /* Highlight text color */
}

/* Adjust the selected option background and text color for dark mode */
.dark .select2-container .select2-results__option--selected {
    background-color: rgb(177 179 183); /* Dark mode selected background */
    color: white; /* Dark mode selected text color */
}