/* Justificación: Select2 se renderiza en un momento que puede ser antes o después de el evento windows.onload, por lo tanto
                  no se puede añadir clases a sus componentes para darle el estilo de la página. En este caso, sería interesante
                  añadir la clase form-control.
                  
                  Tampoco se puede añadir por html porque es un elemento renderizado por Django
    
   Posible alternativa: Crear un THEME de select2. Hay poca documentación.

   Solución: Dar estilos a mano.
*/

.select2-selection  {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.4rem;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #d2d6da;
    appearance: none;
    border-radius: 0.5rem;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.select2-selection__arrow {
    top: 7px !important;
}

.select2-selection {
    min-height: 40.4px !important;
    border-radius: 0.5rem !important;
    border-color: #d2d6da !important;
}

.select2-selection--multiple {
    padding-top: 3px !important;
}

.select2-selection--single {
    padding-top: 4px !important;
}

.select2-selection__rendered{
    padding-left: 0px !important;
}

.select2-results__option {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.4rem;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
}

.select2-dropdown {
    border-color: #d2d6da !important;
}

.select2-search__field {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.4rem;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #d2d6da;
    appearance: none;
    border-radius: 0.5rem;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.select2-search__field:focus-visible {
    outline: solid 3px var(--form-outline-color);
}