/* CSS Document */

/* Match the height and padding of the original select box */
.select2-container .select2-selection--single {
    height: 50px; /* Match the height of your original select */
    padding: 10px; /* Adjust padding for alignment */
    border-radius: 0.25rem; /* Match the border radius of Bootstrap's form-select */
    border: 1px solid #ced4da; /* Match the border color */
    font-size: 1rem; /* Match the font size */
    line-height: 1.5; /* Match the line height */
}

/* Center the placeholder text vertically */
.select2-container .select2-selection__rendered {
    line-height: 40px; /* Adjust to vertically center text */
    padding-left: 10px; /* Add padding for alignment */
    color: #6c757d; /* Match placeholder color */
}

/* Match the dropdown arrow style */
.select2-container .select2-selection__arrow {
    height: 50px; /* Match the height of the select box */
    right: 10px; /* Adjust arrow position */
    width: 30px; /* Adjust arrow width */
}

/* Style the dropdown menu */
.select2-container .select2-dropdown {
    border-radius: 0.25rem; /* Match the border radius */
    border: 1px solid #ced4da; /* Match the border color */
    font-size: 1rem; /* Match the font size */
}

/* Style the dropdown items */
.select2-container .select2-results__option {
    padding: 10px; /* Add padding for better spacing */
}

/* Highlight selected item */
.select2-container .select2-results__option--highlighted {
    background-color: #007bff; /* Match Bootstrap primary color */
    color: white; /* White text for contrast */
}