:root {
}

#calasync .but { margin-top: 20px; }
#calasync,
div#calendar_wrapper,
#calendar_cont,
.contmese,
.contmese td,
.sx_calendar,
.dx_calendar,
a.close_calendar_bt,
.intestazione_mese,
#calendar_header {
    --calendar-width: 100vw;
    --calendar-height: 100vh;
    --calendar-container-width: 90vw;
    --calendar-numero-mesi: 1;
    --calendar-container-height: auto;
    --calendar-month-border: 10px;
    --calendar-month-width: calc(((var(--calendar-container-width) - ( var(--calendar-month-border) * var(--calendar-numero-mesi) * 2)) / var(--calendar-numero-mesi)) );
    --calendar-cell-width: calc(var(--calendar-month-width) / 7);
    --calendar-cell-height: 40px;
    --calendar-header-width: var(--calendar-container-width);
}

.op0{opacity: 0;}
  /* Larghezze e altezze*/

    #calasync.onopenclass {
        width: var(--calendar-width);
        height: var(--calendar-height);
        left: 0px;
    }
#calendar_cont {
    width: var(--calendar-container-width);
    height: var(--calendar-container-height);
}
.contmese {
    width: var(--calendar-month-width);
    border-left: var(--calendar-month-border) solid #fff;
    border-right: var(--calendar-month-border) solid #fff;
}
#calendar {
    width: auto !important;
}

.contmese td, .sx_calendar, .dx_calendar, a.close_calendar_bt {
    width: var(--calendar-cell-width);
    height: var(--calendar-cell-height);
}


.intestazione_mese {
    width: calc((var(--calendar-cell-width)) * 4);
    margin-left: var(--calendar-cell-width);
}



#calendar_header {
    height: var(--calendar-cell-height);
    width: 100%;
    width: var(--calendar-header-width);
}

.intestazione_mese {
    height: var(--calendar-cell-height);
}
div#calendar_wrapper {
    width: var(--calendar-width);
    height: calc(var(--calendar-cell-height) * 8);
    overflow: hidden;
}
    /* fine larghezza e altezze*/



#calasync.end.start {
        display: flex !important;
}

#calasync {
    display: flex !important;
    z-index: 200000;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    background-color: rgba(15, 19, 19, 0.57);
    top: 0px;
    left: -100vh;
    position: fixed;
}

#calendar_cont {
    overflow:hidden;
}



#calendar_cont {
    background-color: #ffff;
}

#calendar {
    display: flex;
    position: absolute;
}


.contmese {
    display: flex;
    flex-direction: column;
    align-content: center;
    text-align: center;
}



.intestazione_mese {
    font-size: 16px;
    
    color: #024648;
    text-transform: capitalize;
}
table.intestazione_settimane {
    text-transform: uppercase;
    color: #0F1313;
    font-size: 13px;
    background-color: #EBEDF0;
    height: 31px;
}
.contmese table a {
    color: #024648;
}


.sx_calendar, .dx_calendar, .intestazione_mese, a.close_calendar_bt {
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    flex-wrap: nowrap;
}

#calendar_header a {
    text-decoration: none;
    background-color:#fff;
}

div#calendar_wrapper {
    background-color: #fff;
    position: relative;

}
.riepilogocalendario { width: calc(100% - 0px); padding: 10px 0px; font-size: 14px; display: flex; justify-content: center; align-items: center; }

.sc_l, .sc_r { display: flex; flex-direction: column; flex: 1; margin: 0px 10px; }

.sc_l {  align-items: flex-end; }
.sc_r { align-items: flex-start; }

.sceltacalendario {
    width: 100%;
    text-align: center;
    padding: 5px 0px 5px 0px;
    margin-bottom: 10px;
    background-color: #D6F43F;
    
    display:none!important;
}
.fromcal {
    text-align: right!important;
    padding-right: 10px;
}
.tocal {
    text-align: left!important;
    padding-left: 10px;
}

.fromcal, .tocal {
    display: block;
    /* width: calc(50% - 10px); */
    float: left;
    text-align: center;
    margin-top: 10px;
    height: 60px;
    display: flex;
    flex-direction: column;
}
    
.c_t { margin: 0px 10px; border: 1px solid #9BB5B5; border-radius: 20px; padding: 0px 10px; background-color: #fff; }

.c_t select { border: none; margin: 3px 5px; }

.contmese table {
    border-collapse: collapse;
}

    .contmese table td {
        border:none;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

.giorno.permadisabled {
    color: #cacccd;
}

td.giorno_blank {
    border: none;
}

.giorno.disable, .permadisabled, #calendat_cont {
    cursor: default;
}

.contmese table a {
    height: 100%;
    display: flex;
    text-decoration: none;
    align-items: center;
    justify-content: center;
}

giorno.enabled {
    color: #565a5c;
}

.enabled:hover {
    background-color: #009882;
}

.enabled:hover {
    color: #000;
}

.contmese table a.rangeSelezionato {
    /* background-color: rgba(0, 152, 130, 0.6); */
    background-color: #024648;
    color: #fff;
}

.contmese table a.rangestart.rangeSelezionato {
    /* background-color: #009882 !important; */
    background-color: #024648;
    color: #fff;
}

.contmese table a.rangeend.rangeSelezionato {
    /* background-color: #009882 !important; */
    background-color: #024648;
    color: #fff;
}
.riepilogocalendario strong {
    background-color: #9BB5B5;
    padding: 5px 10px;
    border-radius: 10px;
    color: #024648;
}

.rangestart {
   /* border-radius: 20px 0px 0px 20px; */
}

.rangeend {
  /*  border-radius: 0px 20px 20px 0px; */
}

.mid_calendar {
    display: none;
}



#calendar_header {
    border-collapse:collapse;
    margin: 0px;
}

#calendar_header {
    position: absolute;
    z-index: 11111111111;
}

a.close_calendar_bt {
    float:right;
}

.sx_calendar, .dx_calendar {
    background-color: #fff;
}

.sx_calendar {
    /*border-left: 0px solid #e4e7e7;
    border-right: 1px solid #e4e7e7;*/
}
 .dx_calendar {
    /*border-left: 1px solid #e4e7e7;
    border-right: 1px solid #e4e7e7;*/
}
.sx_calendar {
    float: left;
}

.dx_calendar {
    float: right !important;
}

div#calendar_cont .search_button { padding-bottom: 20px; margin: 0px auto; }



 .i_back_cal::after, .i_forward_cal::after {
    content: "";
    position: relative;
    display: inline-block;
    border-color: #0F1313;
    border-style: outset;
    border-width: 2px 2px 0 0;
    height: 10px;
    width: 10px;
}



.i_forward_cal::after {
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.i_back_cal::after {
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    transform: rotate(225deg);
}

.i_back_cal, i_forward_cal {
    width: var(--calendar-cell-width);
    height: var(--calendar-cell-height);
    display: flex;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
}



@media (min-width:600px) {
    #calasync,
    div#calendar_wrapper,
    #calendar_cont,
    .contmese,
    .contmese td,
    .sx_calendar,
    .dx_calendar,
    a.close_calendar_bt,
    .intestazione_mese,
    #calendar_header {
        --calendar-numero-mesi: 2;
    }
}
@media (min-width:1024px) {
    #calasync,
    div#calendar_wrapper,
    #calendar_cont,
    .contmese,
    .contmese td,
    .sx_calendar,
    .dx_calendar,
    a.close_calendar_bt,
    .intestazione_mese,
    #calendar_header {
        --calendar-numero-mesi: 3;
    }
}
@media (min-width:1480px) {
    #calasync,
    div#calendar_wrapper,
    #calendar_cont,
    .contmese,
    .contmese td,
    .sx_calendar,
    .dx_calendar,
    a.close_calendar_bt,
    .intestazione_mese,
    #calendar_header {
        --calendar-container-width: 1326px;
        --calendar-numero-mesi: 4;
    }
}


.occupato {background-color: #f00}
.tempdisable {cursor:default !important;}
.tempdisable:hover {background-color: transparent !important}
.rangestart, .rangeend{background-color: #024648 !important;  color:#FFF !important}