/*
 * opzioni di base per le form
 */

/* aggiungo l'asterisco se è required */
label.required:before{
    content: '* ';
    color: red;
    white-space: nowrap;
}
/* all'hover mostro "campo obbligatorio" */
label.required:hover::after{
    content: "Campo obbligatorio";
    color: red;
    white-space: nowrap;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    top: 1em;
    left: 0;
    font-size: small;
}

/* la textarea è larga tutto lo spazio disponibile come le input di Bootstrap */
textarea{
    width: 100%;
}

/* opzioni per i colorPicker */
input[type="color"]{
    max-width: 40px;
    padding: .1rem .3rem;
}
input[type="color"][list]{
    max-width: 55px;
    padding: .1rem 0;
}
@media screen and (min--moz-device-pixel-ratio: 0){
    /* Se firefox resetto quello di prima, devo fare così perché FF-63 supporta -webkit-min-device-pixel-ratio */
    input[type='color'][list]{
        max-width: 40px;
        padding: .1rem .3rem;
    }
}

/* visualizzazione immagini */
img.preview{
    height: calc(1.5em + .75rem + 2px);
}
/* le input file disabilitate non le mostro */
input[type=file]:disabled,
input[type=file]:disabled ~ label.custom-file-label{
    display: none;
}

input.mac{
    max-width: 50px;
}