.ibridContainer{

    padding-top: 1rem;

    display: grid;
    width:100%;
    height: 100%;

    grid-template-columns: 2fr 1fr;
    gap: 1rem;
}


.box{
    width:100%;
    height: 100%;
}

.part{
    padding-bottom: 30px;

}


.box .anno{
    width: 100%;

    display: grid;
    grid-template-columns: 1fr 2fr;				

    place-items: center center;

    gap: 1rem;

    
}




.box #elencoMesi{
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat( 6, 1fr );
    grid-template-rows: 1fr;
    place-items: center center;

    margin-bottom: 10px;    
}


.box #elencoGiorni{
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat( 7, 1fr );
    grid-template-rows: 1fr;

    place-items: center center;
}



.box .mese{
    
    padding: 			0.3rem;
    font-size: 0.8rem;
    background-color: #EEE;

    border-radius: 		3px;
    text-align:		center;
    width:100%;

}


.box .giorno{
    
    padding: 0.3rem;
    font-size: 0.8rem;
    
    background-color: #444;
    color: #FFF;

    border-radius: 	3px;
    text-align:		center;
    width:			100%;
    height:			100%;
   
}

.box .giorno select{
    background-color: #003e75;
    color: #FFF;
    border:0px none;
    
}

.box .giorno select:disabled{
    background-color: #CCC;
    color: #444;
    border:0px none;
    
}

.attivo{
    background-color: #444 !important;
    color: #FFF;
}

.Sab, .Dom{ background-color:#777 !important}



#selezioneFinale{
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 1rem;
    
    width:100%;
    place-items: center center;
}


#selezioneEffettuata{
    place-self: center center;
    font-weight: 600;
    width:100%;
    
}

.colonnaDX{
    
    display:		grid;
    width:			100%;
    height:			100%;
    
    place-items: 	start center;		
}

.tastoAzione{
    display:none;
}

.shopButton{
    width: 350px!important;
}

.selezionato{
    background-color: #003e75 !important;
    box-shadow: 1px 2px 1px 1px #555;
}

.disabilitato{
    background-color: #EEE !important;
    color: #555 !important;;
}

#caricamentoRisultato{
    display:none;
    text-align: center;
    padding: 3rem;
    font-size:2rem;
    font-weight:bold;

}


.bordoNiente{

    border-bottom: 2px solid #222 ;
}

.canRead {
    border-bottom: 2px solid #060 ;
    background-color: #090 !important;
}



/*  animazione  */
@keyframes ruota{

    0%{     transform: rotate(0deg)     }
    100%{   transform: rotate(364deg)   }

}



.ruota2{

    transform-origin:           center center;
    
    animation-name:             ruota;
    animation-timing-function:  linear;
    animation-duration:         2s;
    animation-iteration-count:  infinite;

    display:block; float:left; 

}


@media( max-width:1024px){

    .ibridContainer{ 

        grid-template-columns: 1fr;
        grid-template-rows: 	1fr auto;
    }


    
    .box .anno{
    width: 100%;

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;

    place-items: center center;

    gap: 1rem;

    }

    #titoloAnno{
        display:none;
    }



        
    .box #elencoMesi{
        
        grid-template-columns: repeat( 4, 1fr );
        
    }

    
    .colonnaDX{
        
        display:		grid;
        
        grid-template-columns: 1fr 1fr;

        background-color:#EEE;
    }

    .giornale{
        
        display:		none;
    }

    .nomeGiorno{
        display:none;
    }
}