@font-face {
    font-family: fontpers;
    src: url(/alchimia/fontpers/spaceranger.ttf);
    }
@font-face {
    font-family: fonttitolo;
    src: url(/alchimia/fontpers/spaceranger.ttf);
    }
@font-face {
    font-family: fontfooter;
    src: url(/alchimia/fontpers/montserrat-semibold.ttf);
    }
@font-face {
    font-family: fontlista;
    src: url(/alchimia/fontpers/nunito-bold.ttf);
    font-display: swap; /* mostra font di riserva durante il caricamento del font personalizzato */
    }

body {
    height: 100%;
    margin: 0;
    background-color: rgb(240, 246, 246);
    font-family: Verdana, Arial, Tahoma, sans-serif;
    }
        
#recipiente {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    }

#titolo, #footerdiv {
    width:100%;
    color: #d7d6d4;
    background: -moz-linear-gradient(top, #64affb, #3399cc, #3366cc);

    }
        
#titolo {
    position: relative;
    height: 6vh;
    text-align: center;bottom: 0;
    font-family: fontpers;
    font-size: 2.5vw;font-weight: bold;
    text-shadow: 0.2vw 0.1vw 0.1vw #0e0e0e;
    border-bottom: 1px solid #929292;
    letter-spacing: 3px;
    }
    
#titolosx {
    position: absolute;
    width: 10%;
    margin-left: 0;
    padding-left: 10px;
    }
    
#titolocc {
    position: absolute;
    width: 80%;
    margin-left: 10%;
    }
    
#titolodx {
    position: absolute;
    width: 10%;
    margin-left: 90%;
    }
#includepagina {
    position: relative;
    width: 100%;
    height: 88vh;
    border-top: 2px solid #bbbaba;
    border-bottom: 2px solid #bbbaba;
    }
            
#footerdiv {
    position: fixed;
    z-index:10;
    text-align: center;
    bottom: 0px;
    height: 6vh;
    border-top: solid #929292 3px;
    font-family: fontfooter, Verdana, sans-serif;
    font-size: 2vh;
    }
        
#footersx, #footerdx {
    position: absolute;
    width: 10%;
    padding-top: 0.5vh;
    color: #2f2e2e;
    }
        
    #footersx {margin-left: 0;text-align: left;}        
    #footerdx {margin-left: 90%;}
    
#footercc {
    position: absolute;
    width: 80%;
    margin-left: 10%;
    text-shadow: 0.2vw 0.1vw 0.1vw #0e0e0e;
    }

/* pagine incluse */

#divmenu {  /* contiene icone menu, e tasti di scelta */
    position:relative;
    height: 5vh;
    width:100%;
    font-family : verdana;
    overflow:hidden;
    background: #e7e6e6;
    z-index:0;
    }

img {width:20px;height:auto;}
    .immagine1 {display: block;}
    .immagine2 {display: none;}

#cambio {
    width: 100%;
    padding: 6px;
    border-left: inset 1px #999999;
    border-right: inset 1px #999999;
    border-radius: 5px;
    }
    #cambio:hover .immagine1 {display: none;}
    #cambio:hover .immagine2 {display: block;}

label {
    display: block;
    margin-top: 8px;
    margin-left: 3px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 12px;
    }

::placeholder {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 9px;
    }

input, select, button {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    background: #fafafa;
    border: 1px solid #696868;
    border-radius: 5px;
    box-sizing: border-box;
    }

button {cursor: pointer;}

input[type="checkbox"] {
        background: #e0e0e0;
        border: 1px #9a9a9a;
        height: 20px;
        width: 20px;
    }
    
input[type="text"]:read-only  {
        background: #e0e0e0;
        cursor: no-drop;
    }
    
:disabled {background: #e0e0e0;cursor: no-drop;}
:required {border:1px solid #f93257;}

#center {
    text-align: center;
        }
#left   {
    text-align: left;
        }
            
    
/* -------------------------     tabella senza bordo       --------------------------------- */
table.include   {
    margin-top: auto;
    margin-left:0px; 
    border-collapse: collapse; /* Elimina lo spazio fra le celle della tabella. */
    width:100%;
    table-layout:fixed; 
    overflow:hidden;
    white-space:nowrap;
    font-family : verdana;
    z-index:1;
    }
table.include tr  {
    height: 3.8vh;
    font-size:10px;
    }
table.include td.cc {
    text-align:center;
    }
table.include td.sx {
    text-align:left;
    }
table.include td.dx {
    text-align:right;
    }
table.include td.fine {
    border-left:1px solid grey;
    text-align:center;
    }

/* -------------------------     tabella lista non cliccabile senza bordo       --------------------------------- */

#wwtablenoclik {  /* contiene intestazione liste senza scrollbars */
    position:relative;
    height: 5vh;
    width:100%;
    font-family: fontlista;text-shadow: 2px 2px 2px #999999;
    border-top: 2px solid #999999;
    }
table.noclik   {
    margin-top: auto;
    margin-left:0px; 
    border-collapse: collapse; /* Elimina lo spazio fra le celle della tabella. */
    width: 100%;
    table-layout:fixed; 
    overflow:hidden;
    white-space:nowrap;
    z-index:1;
    font-size: 16px;
    }
table.noclik tr  {
    height: 4.9vh;
    background: #cccccc;
    color:#4a4848;
    }
table.noclik td  {
    padding-left:5px;
    padding-right:5px;
    border:1px solid #a5a5a5;
    }
table.noclik td.cc {
    text-align:center;
    }
table.noclik td.ccnb { /* --- senza bordo --- */
    text-align:center;
    border-left:none;
    border-right:none;
    border-bottom:1px solid #a5a5a5;
    }

table.noclik td.sx {
     text-align:left;
     }
table.noclik td.dx {
     text-align:right;
     }

/* ------------------------ tabella lista cliccabile con bordo ------------------------ */

#wwtableclik {  /* corpo liste con scrollbars */
    position:relative;
    height: 77vh;
    width:100%;
    overflow: -moz-scrollbars-vertical; 
    overflow-y: scroll;
    font-family : verdana;
    border-top: 1px solid #999999;
    }
table.clik {
        margin-top: auto;
        margin-left:0px; 
        border-collapse: collapse; /* Elimina lo spazio fra le celle della tabella. */
        width:100%;
        table-layout:fixed; 
        overflow:hidden;
        white-space:nowrap;
        font-family : verdana;
        z-index:1;
        }
table.clik tr  {
        height: 4.5vh;
        font-size:12px;
        }
table.clik tr.hover:hover  {
        background:#c6e5f5;
        cursor: pointer;
        }
table.clik tr.hoverno:hover  {  /* evidenzia riga senza cambiare cursore */
        background:#c6e5f5;
        }
table.clik td  {
        padding-left:5px;
        padding-right:5px;
        border-left:1px solid #a5a5a5;
        border-right:1px solid #a5a5a5;
        border-bottom:1px solid #a5a5a5;
        overflow:hidden;
        }
table.clik td.cc {
        text-align:center;
        }
table.clik td.sx {
         text-align:left;
         }
table.clik td.dx {
         text-align:right;
         }
/* -------------------------     form       --------------------------------- */
.form-container {
    display: flex;
    justify-content: center; /* Centra orizzontalmente */
    align-items: center; /* Centra verticalmente */
    height: 87vh; /* Imposta l'altezza a tutta la viewport */
}
.centro {  /* form centrato */
    display: flex;
  flex-direction: column;
justify-content: flex-start;
    width: 98vw;
    padding: 10px;
    max-width: 500px;
    height: 70vh;
    border: solid 2px rgb(73, 72, 72);
    border-radius: 5px;
    background-color: #f4f4f4;
}
.largo {  /* form centrato per maschere larghe */
    width: 98vw;
    padding: 10px;
    max-width: 1200px;
    height: 75vh;
    border: solid 2px rgb(73, 72, 72);
    border-radius: 5px;
    background-color: #f4f4f4;
}
h2 {  /* intestazione form */
    text-align: center;
    font-size: 18px;
    color: #333;
    }
a {text-decoration: none;color:black;}

table.form   {
    margin-top: auto;
    margin-left:0px; 
    border-collapse: collapse; /* Elimina lo spazio fra le celle della tabella. */
    width:100%;
    table-layout:fixed; 
    overflow:hidden;
    white-space:nowrap;
    font-family : verdana;
    z-index:1;
    flex-grow: 1; /* si espande e spinge il footer in basso */
    }
table.form tr  {height: 7vh;}
table.form tr.dieci  {height: 1vh;font-size: 12px;}
table.form td.cc {
    text-align:center;
    }
table.form td.sx {
    text-align:left;
    }
table.form td.dx {
    text-align:right;
    }
.stampone {
    padding:10px;
    font-size: 18px;
    }
@media (max-width: 480px) {
    .stampone {font-size: 12px;}
    }

table.footer   {
    margin-bottom: 0;
    margin-left:0px; 
    border-collapse: collapse; /* Elimina lo spazio fra le celle della tabella. */
    width:100%;
    table-layout:fixed; 
    overflow:hidden;
    white-space:nowrap;
    font-family : verdana;
    z-index:1;
    }
table.footer tr  {height: 8vh;border:1px inset rgb(209, 208, 208);}
table.footer td.cc {text-align:center;}
table.footer td.sx {text-align:left;}
table.footer td.dx {text-align:right;}