/* Campo telefono: bandiera a sinistra, numero a destra, esito della verifica sotto.

   La libreria tiene la bandiera in posizione assoluta, alta quanto tutto il contenitore che
   avvolge il campo. Basta che li' dentro finisca dell'altro (la scritta di esito) o che il tema
   dia al campo un'altezza sua perche' la bandiera scivoli a meta' e il numero le vada sopra.
   Qui la riga diventa una fila: bandiera e campo affiancati, ognuno con il suo spazio. */

.iti,
.iti.iti--separate-dial-code,
.iti.iti--allow-dropdown {
    display: flex !important;
    align-items: stretch;
    position: relative;
    width: 100%;
    max-width: 100%;
}

/* la bandiera torna nel flusso, accanto al campo invece che sopra */
.iti .iti__flag-container,
.iti--allow-dropdown .iti__flag-container,
.iti--separate-dial-code .iti__flag-container {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    flex: 0 0 auto;
    padding: 0;
}

.iti .iti__selected-flag {
    height: auto;
    min-height: 100%;
    padding: 0 8px;
}

/* il campo si prende lo spazio che resta anche se il tema gli impone una larghezza fissa */
.iti input,
.iti input[type=text],
.iti input[type=tel],
.iti--separate-dial-code input,
.iti--separate-dial-code input[type=text],
.iti--separate-dial-code input[type=tel] {
    flex: 1 1 0%;
    width: auto !important;
    min-width: 0;
    padding-left: 10px !important;
    padding-right: 10px;
    margin: 0 !important;
}

/* l'elenco dei paesi si apre sotto la bandiera e sopra tutto il resto */
.iti .iti__country-list {
    top: 100%;
    left: 0;
    z-index: 1000;
    max-width: 90vw;
    text-align: left;
}

/* la scritta di esito sta fuori dal contenitore della libreria, sotto al campo */
.ma-tel-esito {
    display: block;
    clear: both;
    margin-top: 6px;
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.35;
}
.ma-tel-si { background: #e6f4ec; color: #00794c; border: 1px solid #b7e0c9; }
.ma-tel-no { background: #fdf6e3; color: #8a6100; border: 1px solid #f3e0a9; }
.ma-tel-attesa { background: #f3f4f5; color: #646970; border: 1px solid #dcdcde; }
.ma-tel-nulla { display: none; }