/*
ATTENZIONE le istruzioni sotto sono indispensabili.
Servono per unire il pulsante premuto al corpo
del contenitore
*/
#li-calendario {
    margin-right: 0;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
   /* background: rgb(156, 37, 37);*//*da mettere a natale*/
    background: #ccccff;/*da mettere dopo Natale*/
    margin-top: 0;
}

/*
ATTENZIONE le istruzioni sotto sono indispensabili.a
Servono per modificare il colore del testo quando
un pulsante è premuto.
*/
#a-calendario{
        font-size: 1em;
        /*color: blue;*//*da mettere Natale*/
    }

/*
flex-box Mobile(lo troveremo in ogni pagina con una diversa impostazione)
è il punto dove si espone i contenuti all'utente.
*/
#main > article {
        -webkit-justify-content: center;
                  -ms-flex-pack: center;
                justify-content: center;

        -webkit-align-content: flex-start;
                -ms-flex-line-pack: start;
                align-content: flex-start;

        /*background-image: url("../Foto/Natale-Regali.jpg");*/ /*da mettere a natale*/
        background-repeat: no-repeat;
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -ms-background-size: cover;
        -o-background-size: cover;
    }

    article > h2#prenota-aula{
        text-align: center;
        margin-top: 1.5em;

        -webkit-flex: 1 1 100%;
        -ms-flex: 1 1 100%;
        flex: 1 1 100%;

        -webkit-order: 1;
        -ms-flex-order: 1;
        order: 1;
}

    /****************************************
    flex contenitore - contiene i paragrafi
    *****************************************/
    article div#prenota-tabella {
         -webkit-order: 2;
        -ms-flex-order: 2;
        order: 2;

        /*per spostare la tabella a sinistra (flex: 1 1 100%;)*/
        -webkit-flex: 0 1 auto;
        -ms-flex: 0 1 auto;
        flex: 0 1 auto;

        margin-top: 1.5em;
        position: relative;
    }

/*
imposta le proprietà della tabella
*/
table#prenota-calendario {
    table-layout: fixed;
    min-width: 44em;
    background: white;
    text-align: center;    
    border-collapse: collapse;
    border: 3px solid blue;
    box-shadow: -5px -10px 15px grey;
}

/*
Dimensionamento celle tabella
*/
tbody>tr>td {
    width:4em;
    height:4em;
    border: 1px solid blue;
    text-align: right;
    vertical-align: top;
    cursor: cell;
}

/*
giorni della settimana tabella(Prima riga)
*/
thead .intestazione>th{
    height: 25px;
}

thead .strumenti {
    height: 60px;
    text-align: center;
    font-size: 20pt;
}

/*----------le istruzioni sotto sono scatenate dal codice javascript------------*/

/* inizio css3 finestra modale */
.chiudi{ 
    font-size:18px; 
    color:#000; 
    font-weight:bold; 
    position:absolute; 
    right:2%; 
    top:0%;  
    cursor:pointer;
}

/* 
Div che occupa tutto il display per visualizzare
un'altro div con Id '#box' div MODALE
*/
.overlay{
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    right:0;
    z-index:100;
    cursor:pointer;
    background-color: rgba(0,0,0,.8); /*da ripristinare dopo natale*/
    /*background-image: url("../Foto/Natale-Regali.jpg");*//*da mettere a natale*/
    background-size: 0;
    background-repeat: no-repeat;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -ms-background-size:cover;
    -o-background-size:cover;
}

/* 
Div dove dentro viene inserito tramite jS i dettagli
dell'evento div MODALE
*/
#box{
    position: absolute;
    display: none;
    min-width:400px;
    min-height:300px;
    top:50%;
    left:50%; 
    margin:-150px 0 0 -200px;
    background-color:#FFF; 
    z-index:+300;
    -moz-border-radius: 15px;  
    -webkit-border-radius: 15px;
    border-radius: 15px;
}

.sinistra, .destra{
    width: 100%;
    height: 60px;
    background : rgb(152, 152, 245);
    color: white;
    font-weight: bold;
}

/*
quando si posiziona il mouse sopra una freccia per cambiare il
mese il button si colora di blue intenso.
*/
.sinistra:hover, .destra:hover{
    background: blue;
    cursor: pointer;
}

/* cella data attuale(oggi) JS*/
.coloreCella{
    background: red;
    /* cursor: cell; */
}

/* 
classe inizializzata quando la cella
fa parte di un evento.
*/
.cellaOccupata{
    background: #00ffff;
    cursor: pointer;
    color: black;
}

/*
quando l'utente posiziona il mouse su una cella della tabella
la tabella si colora di blue (evento MouseOver)
*/
.cellaCorrenteIn{
    background: blue;
    color:white;
    cursor: cell;
    /*z-index: -1;*/
}

/*quando l'utente con il mouse esce da una cella della tabella
  la cella si colora di bianco (evento MouseOut)
*/
.cellaCorrenteOut{
    background: white;
    color: black;
}

.cellaCorrente{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 4em;
}

/*
la data che inserisco nel div modale
*/
p#inizioP{
    font-size: 15pt;
    text-align: center;
    color: red;
}

/* 
Didascalie per voci div modale
*/
.PrimaDidascalia{
    display: inline-block;
    text-align: left;
    margin-left: 5px;
    width: 140px;
    line-height: 25px;
}

/* 
valori impostati per voci div modale
*/
.SecondaDidascalia{
    display: inline-block;
    color: green;
    text-align: left;
}

/*
 quando viene posizionato il mouse sulla cella
 della tabella dove cè il mese e l'anno 
*/
th#meseInCorso:hover{
    cursor: pointer;
    font-weight: unset;
}

#dataScaduta{
    text-align: center;
    color: darkorange;
    cursor: not-allowed;
    height: 3,5em;

}

/* 
questo è il div che creo con js e lo faccio diventare un cerchio
per far vedere all'utente che quello è il giorno corrente con 
evento associato
*/
.mettiCerchioDiv{
    width:40px;
    height:40px;    
    border-radius:50px;
    background:rgb(256,0,0);
    color:black;
    font-size: x-large;
    text-align: center;
    padding-top: 3px;
    border: 3px solid white;
}
#whatsApp{
    color: red;
    font-weight: 900;
    text-align: center;
    font-size: 16pt;
    margin-bottom: 10px;
}

.tooltip {
    position: relative;
    display: inline-block;
   /* border-bottom: 1px dotted black;If you want dots under the hoverable text */
  }

/* mette la freccia al div che visualizza il tool tip */
.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 100%; 
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: blue transparent transparent transparent;
 }

  /* Tooltip text */
  .tooltip .tooltiptext {
    width: 128px;
    background-color: blue;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    margin-left: -105px;
    bottom: 100%;
    left: 50%;

    /* Posiziona il tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
  } 
  
  /* apre il tooltip quando il mouse è sopra l'elemento */
  .tooltip:hover .tooltiptext {
    visibility: visible;
  }