.belegungskalender .belegungskalender-title{
    text-align: center;
}
.belegungskalender .belegungskalender-title h2{
    display: inline-block;
    padding: .2em 1em .2em 1em;
}
.belegungskalender .belegungskalender-legende{
    text-align: center;
}
.belegungskalender .belegungskalender-legende i{
    margin-left: 15px;
    position: relative;
}
.belegungskalender .belegungskalender-legende i:before{
    content: "";
    height: 20px;
    width: 20px;
    display: inline-block;
    margin-right: 5px;
}
.belegungskalender-date-select{
    display:flex;
    justify-content:center;
}
.belegungskalender-date-select select{
    margin-left: 15px;
    margin-right: 15px;
}
.belegungskalender-date-select select option.current{
    color: #2c72c7;
    background: #eee;
}
.belegungskalender .belegungskalender-legende i.free:before{
    background-color: #bde0b7;
}
.belegungskalender .belegungskalender-legende i.reserved:before{
    background-color: #f4a142;
}
.belegungskalender .belegungskalender-legende i.booked:before{
    background-color: #ef8888;
}
.belegungskalender .calendar{
    display: block;
}
.belegungskalender .calendar.loading{
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBzdHlsZT0ibWFyZ2luOiBhdXRvOyBiYWNrZ3JvdW5kOiB0cmFuc3BhcmVudDsgZGlzcGxheTogYmxvY2s7IHNoYXBlLXJlbmRlcmluZzogYXV0bzsgYW5pbWF0aW9uLXBsYXktc3RhdGU6IHJ1bm5pbmc7IGFuaW1hdGlvbi1kZWxheTogMHM7IiB3aWR0aD0iMjAwcHgiIGhlaWdodD0iMjAwcHgiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCI+CjxjaXJjbGUgY3g9IjUwIiBjeT0iNTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzJjNzJjNyIgc3Ryb2tlLXdpZHRoPSIxMCIgcj0iMzUiIHN0cm9rZS1kYXNoYXJyYXk9IjE2NC45MzM2MTQzMTM0NjQxNSA1Ni45Nzc4NzE0Mzc4MjEzOCIgc3R5bGU9ImFuaW1hdGlvbi1wbGF5LXN0YXRlOiBydW5uaW5nOyBhbmltYXRpb24tZGVsYXk6IDBzOyIgdHJhbnNmb3JtPSJyb3RhdGUoMzAuMDc0OSA1MCA1MCkiPgogIDxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0icm90YXRlIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgZHVyPSIxcyIgdmFsdWVzPSIwIDUwIDUwOzM2MCA1MCA1MCIga2V5VGltZXM9IjA7MSIgc3R5bGU9ImFuaW1hdGlvbi1wbGF5LXN0YXRlOiBydW5uaW5nOyBhbmltYXRpb24tZGVsYXk6IDBzOyI+PC9hbmltYXRlVHJhbnNmb3JtPgo8L2NpcmNsZT4KPCEtLSBbbGRpb10gZ2VuZXJhdGVkIGJ5IGh0dHBzOi8vbG9hZGluZy5pby8gLS0+PC9zdmc+");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 75px;
    height: 75px;
    width: 100%;
    margin-top: 20px;
    text-align: center;
    display: block !important;
}
.belegungskalender .calendar .month-title{
    text-align: center;
    border: 1px solid #000;
    background: #f3f1f1;
}
.belegungskalender .calendar .days {
    display: flex;
    background: #f3f1f1;
}

.belegungskalender .calendar .day {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
}
.belegungskalender .calendar .week {
    display: flex;
    background: #fff;
}
.belegungskalender .calendar .empty {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
}
.belegungskalender .calendar .month {
    display: block;
    margin: 10px auto;
}

.belegungskalender .calendar .week {
    border-top: 1px solid #000;
    border-left: 1px solid #000;
    border-collapse: collapse;
}
.belegungskalender .calendar .week:last-of-type{
    border-bottom: 1px solid #000;
}
.belegungskalender .calendar .days .day{
    text-align:center;
    border-left: 1px solid #000;
}
.belegungskalender .calendar .days .day:last-of-type{
    border-right: 1px solid #000;
}
.belegungskalender .calendar .week .day{
    color: #000;
    padding: 5px;
    border-right: 1px solid #000;
    border-collapse: collapse;
    text-align: center;
}
.belegungskalender .calendar .week .day.empty{
    background: transparent;
}
.belegungskalender .calendar .week .day.over{
    color: #aaaaaa;
}
.belegungskalender .calendar .day.booked {
    background-color: #ef8888;
}
.belegungskalender .calendar .day.reserved{
    background: #f4a142;
}

.belegungskalender .calendar .day.bookedtofree {
    background: linear-gradient(to bottom right, #ef8888 50%, #bde0b7 50.001%);
}
.belegungskalender .calendar .day.bookedtobooked {
    background: linear-gradient(to bottom right, #ef8888 50%, #ef8888 50.001%);
}
.belegungskalender .calendar .day.bookedtoreserved {
    background: linear-gradient(to bottom right, #ef8888 50%, #f4a142 50.001%);
}

.belegungskalender .calendar .day.freetofree {
    background: linear-gradient(to bottom right, #bde0b7 50%, #bde0b7 50.001%);
}
.belegungskalender .calendar .day.freetobooked {
    background: linear-gradient(to bottom right, #bde0b7 50%, #ef8888 50.001%);
}
.belegungskalender .calendar .day.freetoreserved {
    background: linear-gradient(to bottom right, #bde0b7 50%, #f4a142 50.001%);
}

.belegungskalender .calendar .day.reservedtofree {
    background: linear-gradient(to bottom right, #f4a142 50%, #bde0b7 50.001%);
}
.belegungskalender .calendar .day.reservedtobooked {
    background: linear-gradient(to bottom right, #f4a142 50%, #ef8888 50.001%);
}
.belegungskalender .calendar .day.reservedtoreserved {
    background: linear-gradient(to bottom right, #f4a142 50%, #f4a142 50.001%);
}
.belegungskalender .bkp-copyright{
    text-align: center;
    font-size: 14px;
}

@media (min-width: 596px) {
    .belegungskalender .calendar.g1{
        display: grid;
        grid-column-gap: 10px;
        grid-template-columns: repeat(1, 1fr);
    }
    .belegungskalender .calendar.g2{
        display: grid;
        grid-column-gap: 10px;
        grid-template-columns: repeat(2, 1fr);
    }
    .belegungskalender .calendar.g3{
        display: grid;
        grid-column-gap: 10px;
        grid-template-columns: repeat(1, 1fr);
    }
    .belegungskalender .calendar.g4{
        display: grid;
        grid-column-gap: 10px;
        grid-template-columns: repeat(2, 1fr);
    }
    .belegungskalender .calendar.g5{
        display: grid;
        grid-column-gap: 10px;
        grid-template-columns: repeat(1, 1fr);
    }
    .belegungskalender .calendar.g6{
        display: grid;
        grid-column-gap: 10px;
        grid-template-columns: repeat(3, 1fr);
    }

    .belegungskalender .calendar .month {
        width: 100%;
        margin: 10px auto;
        flex: 1 0 40%;
    }
}
@media (min-width: 792px) { 
    .belegungskalender .calendar.g4{
        grid-template-columns: repeat(2, 1fr);
    }
    .belegungskalender .calendar.g5{
        grid-template-columns: repeat(2, 1fr);
    }
    .belegungskalender .calendar.g6{
        grid-template-columns: repeat(3, 1fr);
    }

}
@media (min-width: 992px) { 
    .belegungskalender .calendar.g1{
        grid-template-columns: repeat(1, 1fr);
    }
    .belegungskalender .calendar.g2{
        grid-template-columns: repeat(2, 1fr);
    }
    .belegungskalender .calendar.g3{
        grid-template-columns: repeat(3, 1fr);
    }
    .belegungskalender .calendar.g4{
        grid-template-columns: repeat(2, 1fr);
    }
    .belegungskalender .calendar.g5{
        grid-template-columns: repeat(4, 1fr);
    }
    .belegungskalender .calendar.g6{
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (min-width: 1296px) { 
    .belegungskalender .calendar.g4{
        grid-template-columns: repeat(4, 1fr);
    }
    .belegungskalender .calendar.g5{
        grid-template-columns: repeat(5, 1fr);
    }
    .belegungskalender .calendar.g6{
        grid-template-columns: repeat(6, 1fr);
    }
}