/*
 * Stile per le select multiple per mostrare un dropdownMenu
 */

/* impostazioni del contenuto esterno */
.multiple{
    flex: 1 1 auto;
    padding: .375rem .75rem;
}
/* nascondo il vero select */
.multiple-values{
    display: none!important;
}
/* questo è il box che mostra le opzioni selezionate */
.multiple-title{
    width: 100%;
    min-height: calc(1.5em + .75rem + 2px);
    border: 1px solid #ced4da;
    border-radius: .25rem;
    cursor: default;
    padding: 0 5px;
}
.multiple-title:empty:before{
    content: "Nessun elemento selezionato";
    font-style: italic;
}
/* aggiungo la freccia */
.multiple-title:after{
    font-family: "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
    content: "\f0dd";
    color: #555;
    padding: 0 5px;
    position: absolute;
    right: 13px;
}
.multiple-title.opened:after{
    content: "\f0de";
    top: .85rem;
}
/* se è disabilitato coloro il div in grigio */
fieldset:disabled .multiple-title{
    background-color: #e9ecef;
}
/* ogni elemento selezionato è un badge */
.multiple-title .badge{
    border: #000000 solid 1px;
    padding-right: 15px;
    font-size: 1em;
    margin-top: 5px;
}
/* il pulsante di chiusura del badge */
.multiple-title i:after{
    font-family: "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
    content: "\f00d";
    font-size: .75em;
    position: relative;
    top: -.25rem;
    right: -.5rem;
}
/* questo è il dropdown */
.multiple-body{
    border: 1px solid #ced4da;
    width: 100%;
}
/* la parte superiore per (de)selezionare tutti gli elementi */
.multiple-all{
    border-bottom: #000000 solid 1px;
    background-color: #e6e1e1;
}
/* contiene la lista: rimuovo lo stile di default delle liste */
.multiple-list{
    list-style-type: none;
    max-height: 300px;
    overflow: auto;
}
/* ogni elemento della lista gli aggiungo lo stile personalizzato */
.multiple-list li:before{
    font-family: "Font Awesome 5 Free", sans-serif;
    font-weight: 400;
    content: "\f0c8";
    position: relative;
    left: -1rem;
}
.multiple-list li.checked:before{
    content: "\f14a";
}
fieldset:disabled .multiple .pointer{
    cursor: default;
}