/* Force Bootstrap form-control border and height */
.select2-selection.select2-selection--single {
    border: 1px solid #ced4da !important;
    height: calc(1.5em + 0.75rem + 2px) !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    min-height: calc(1.5em + 0.75rem + 2px) !important;
    max-height: calc(1.5em + 0.75rem + 2px) !important;
}

/* Fix arrow alignment */
.select2-selection--single .select2-selection__arrow {
    height: calc(1.5em + 0.75rem + 2px) !important;
}

/* Make sure your custom arrow appears on top */
.select2-selection.select2-selection--single::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 0.3em solid transparent;
    border-right: 0.3em solid transparent;
    border-top: 0.3em solid #495057;
    pointer-events: none;
    z-index: 10 !important;
}