/**
 * Select2 Bootstrap4 theme overrides (applies to all Select2 with theme: bootstrap4).
 * Removes focus ring; uses neutral border.
 */

/* Remove blue focus border and box-shadow */
.select2-container--bootstrap4.select2-container--focus .select2-selection {
    border-color: #6c757d;
    box-shadow: none;
}

.select2-container--bootstrap4 .select2-selection {
    background-color: #fff;
    border: 1px solid #ced4da;
}
.dark-mode .select2-container--bootstrap4 .select2-selection {
    background-color: #343a40;
    border: 1px solid #6c757d;
}
.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered{
    color: #343a40;
}
.dark-mode .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered{
    color: #fff;
}
.dark-mode input:-webkit-autofill, .dark-mode input:-webkit-autofill:focus, .dark-mode input:-webkit-autofill:hover, .dark-mode select:-webkit-autofill, .dark-mode select:-webkit-autofill:focus, .dark-mode select:-webkit-autofill:hover, .dark-mode textarea:-webkit-autofill, .dark-mode textarea:-webkit-autofill:focus, .dark-mode textarea:-webkit-autofill:hover{
    -webkit-text-fill-color:#343a40
}

/*
 * Vertically center the Select2 caret when selection height/min-height is overridden
 * (e.g. report filters, PCI forms). Fixed arrow heights push the chevron below the box.
 */
.select2-container--bootstrap4 .select2-selection--single {
    position: relative;
}

.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow {
    top: 0 !important;
    bottom: 0 !important;
    height: auto !important;
    width: 1.75rem;
    right: 0.25rem !important;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: none !important;
}

.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b {
    position: static !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
    transform: none !important;
}