.calendar { width:100%; line-height: 14px; font-size: 13px; margin-top:35px; }
/*
.calendar .days { width: calc( 100% / 7); float:left; border: 1px solid #ddd; margin-top: -1px; color: #4f4f4f; font-size:1.1em; line-height:1.5em; }
*/

.calendar .days { border: 1px solid #ddd; margin-top: -1px; color: #4f4f4f; font-size:1.1em; line-height:1.5em; }
.calendar .day-labels .days { text-align:center; }
.calendar .days:not(:nth-child(7)) { border-right:0px; }
.calendar .dates .days { min-height: 50px; position:relative; }
/* .calendar .dates .days.mask { background-color:#bababa; } */
.calendar .dates .days .daynumber { position:absolute; top:4px; right: 4px; }
.calendar .dates .days .evt { border-radius: 3px; background-color: #009ee0; color: #fff; margin: 1px 3px; }
.calendar .dates .days .evt .moreinfo { display:none; }
.calendar .dates .days .evt-first { height:30px; }
.calendar .header .title { text-align: center; margin:auto; font-size: 2em; line-height: 2em; font-weight: bold; margin-bottom:26px; }
.calendar .header a button { background-color: #009ee0; border: 0px; color: #fff; font-size: 2em; line-height: 1.8em; width: 36px; }
.calendar .header a.prev button { border-radius: 3px 0px 0px 3px; }
.calendar .header a.next button { border-radius: 0px 3px 3px 0px; }


.calendar .box-content { height: 100%;
    display: flex;
    flex-flow: column nowrap;
    align-items: stretch;
}
.calendar .week { flex: 30px 0 0; opacity:0.9; }
.calendar .week { display: flex; }
.calendar .dates .week:hover { background-color: #bababa; opacity:1; }
.calendar .dates .week.has-data { background-color: #e2edf3; opacity:1; }
.calendar .dates .week.has-data:hover { background-color: #b7d2e5; opacity:1; }
.calendar .week.with-data { background-color: #bababa; }
.calendar .week>div {
    width: 100%;
    color: #333;
}
.calendar .week>div::after {
    content: attr(data-date);
    display: block;
    position: absolute;
    top: 0; right: 2px;
    color: #000;
}
.calendar .week>div.mask::after {
    color: #bababa;
}