/* DAF INTERACTIVE CALENDAR */
    .daf_interactivecalendar {
        box-sizing: border-box;
        width: 750px;
        margin: auto;
        background-color: white; 
        display: grid; 
        grid-template-columns: 14.28% 14.28% 14.28% 14.28% 14.28% 14.28% 14.28%;
    }
    .daf_interactivecalendar .label-center {
        box-sizing: border-box;
        grid-column: 3 / span 3;
        width: 100%;
        height: auto; 
        background-color: var(--dark-color);
        color: white;
        font-size: 36px;
        text-align: center;
    }
    .daf_interactivecalendar .label-center #month_short {
        display: none;
    }
    .daf_interactivecalendar .label-left, .label-right {
        box-sizing: border-box;
        grid-column: span 2;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 10px;
        background-color: var(--dark-color);
    }
    .daf_interactivecalendar .label-left, .label-right  a {
        color: white;
        font-size: 22px;
    }
    .daf_interactivecalendar .label-left #previous {
        text-align: left;
    }
    .daf_interactivecalendar .label-right #next {
        text-align: right;
    }
    .daf_interactivecalendar .days {
        box-sizing: border-box;
        width: 100%;
        height: auto; 
        background-color: var(--light-color);
        color: var(--dark-color);
        font-size: 12px;
        text-align: center;
    }
    
    .daf_interactivecalendar .cell {
        box-sizing: border-box;
        width: 100%;
        height: 60px; 
        font-size: 12px;
        background-color: inherit; 
        border: 2px solid var(--dark-color);
    }
    .daf_interactivecalendar .cell .datetext {
        font-size: 12px;
        color: black;
    }
    .daf_interactivecalendar .cell .eventtext {
        box-sizing: border-box;
        width: 100%;
        height: 100px; 
        font-size: 12px;
        background-color: transparent; 
        text-align: center;
        padding-top: 4px;
    }

    .daf_interactivecalendar #sunday {
        grid-column-start: 1;
    }

    .daf_interactivecalendar .today {
        border:4px solid red
    }

    .daf_interactivecalendar .booked {
        background-color: var(--light-color);
    }

    .daf_interactivecalendar a {
        text-decoration: none;
    }

    .daf_interactivecalendar a:hover {
        text-decoration: underline;
    }
@media (max-width: 768px) {
    .daf_interactivecalendar {
        width: 100%;
    }
    .daf_interactivecalendar .label-center {
        font-size: 22px;
    }
    .daf_interactivecalendar .cell {
        width: 40px;
        height: 40px; 
        text-align: center;
        border: 4px solid #FFFFFF;
        border-radius: 50%;
        margin: 2px 0 2px 0;
        line-height: 33px;
    }
    .daf_interactivecalendar .cell .eventtext {
        display: none;
    }
    .daf_interactivecalendar .today {
        border:4px solid red
    }
    .daf_interactivecalendar .label-center #month_long {
        display: none;
    }
    .daf_interactivecalendar .label-center #month_short {
        display: inline;
    }
}
@media (min-width: 1200px) {
    .daf_interactivecalendar {
        width: 1200px;
    }
    .daf_interactivecalendar .label {
        font-size: 48px;
    }
    .daf_interactivecalendar .cell {
        height: 100px; 
    }
    .daf_interactivecalendar .cell .eventtext {
        font-size: 14px;
        font-weight: bold;
    }
}