/*******************************************/
/*  FINESTRA PICCOLA (SMARTPHONE) */
/*******************************************/

@media only screen and (max-width: 767px) {
    
    .nome-utente {
        padding-bottom: 10px;
    }
    
    h1 {
        font-size: 20px;
    }
    
    #dpa-logo {
        width: 50px;
    }
    
    h4 {
        font-size: 16px;
    }
    
    
    button i, button em {
        font-size: 14px;
    }
    
    .btn-index-admin em {
        font-size: 40px;
    }
    
    
    .btn-xl {
        height: 130px;
        width: 130px;
        border-radius: 15px;
        margin: 0 auto;
    }
    
    
    
    .area-pagina {
        margin-top: 20px !important;
        margin-bottom: 20px !important;
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
    
    #tabella-compilazione, #tabella-compilazione .btn {
        font-size: 12px !important;   
    }
    #tabella-classi, #tabella-classi .btn {
        font-size: 12px !important;   
    }
    #tabella-credenziali-smartphone, #tabella-credenziali-smartphone .btn {
        font-size: 12px !important;   
    }
    #tabella-credenziali-smartphone {
        display: block;
    }
    #tabella-credenziali {
        display: none;
    }
    
    .scritta-pulsante {
        display: none;   
    }
    
    /************************************************************************************/
    /* istruzioni per ruotare le modalità della tabella al restringimento dello schermo */
    
    /* Force table to not be like tables anymore */
    .no-more-tables table,
    .no-more-tables thead,
    .no-more-tables tbody,
    .no-more-tables th,
    .no-more-tables td,
    .no-more-tables tr {
        display: block;
        width: 100%;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    .no-more-tables thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .no-more-tables tr { 
        border: 1px solid #ccc; 
        padding: 10px;
    }

    .no-more-tables td {
        /* Behave like a "row" */
        border: none;
        padding: 0 !important;
        /* border-bottom: 1px solid #eee; */
        position: relative;
        padding-left: 10px;
        white-space: normal;
        text-align:left;
    }

    .no-more-tables td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        padding-left: 30px;
        /* padding-right: 10px; */
        white-space: nowrap;
        text-align:left;
        /* font-weight: bold; */
    }

    .no-more-tables td {
        text-align: left !important;
    }

    .no-more-tables td label {
        width: 100%;
        vertical-align: middle;
    }

    /* Label the data */
    .no-more-tables td:before { content: attr(data-title); }
    .no-more-tables td.title-spostato:before { content: attr(data-title); margin-left: 70px; padding-left: 0; }
    
    
    
    /************************************************************************************/
}