.bookings-full{
    background-color: rgb(204, 53, 61);
    color: white;
}

.bookings-near{
    background-color: rgb(254, 195, 35);
}

.bookings-available{
    background-color: #6fc86f40;
    background-color: #8af98a40;
}

.bookings-full .calandar-date{
    color: lightgray;
}

.calendar th{
    width: 12.28%;
    text-align: center;
}

.calendar-date{
    text-align: left;
    font-size: 0.75em;
    color:darkslategrey;
    padding: 1px 1px;
}

.calendar-count{
    text-align: right;
    padding: 1px 3px;
}

table.calendar{
    width: 100%;
}

table.calendar td{
    width: 14.28%;
}

table.calendar tr div{
    min-height: 26px;
}

table.calendar td.cal-border{
    border: 1px solid darkorange;
}

.calendar-grid{
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 30px;
    grid-auto-rows: 45px;
}

.calendar-grid div:first-child {
    grid-column: span 7;
}

.calendar-grid > div{
    border-radius: 20px;
    margin: 1px;
}

.calendar-grid > div.text-color-light{
    color: var(--gray-300);
}

.calendar-grid > div.text-color-light > div.calendar-date{
    color: var(--gray-200);
}

.room_availability{
    position: relative;
    display: grid;
    gap: 0;
    width: fit-content;
    min-width: 100%;
}

.room_availability > div.room_grid_header{
    position: sticky;
    left: 0;
    background-color: var(--template-bg-dark-5);
    border: 1px solid var(--template-bg-dark-7);
    padding: 4px;
    font-weight: bold;
    z-index: 11;
    grid-column: 1;
}

.room_availability div.grid_month_row{
    background-color:  var(--template-bg-dark-5);
    border: 1px solid var(--template-bg-dark-7);
    padding: 4px;
    text-align: center;
    font-weight: bold;
    z-index: 10;
}

.room_availability .grid_month_row > .moveleft{
    position: absolute;
    left: 110px;
}

.room_availability .grid_month_row > .moveright{
    position: absolute;
    right: 10px;
}

.room_availability div.grid_day_room{
    position: sticky;
    left: 0;
    background-color: var(--template-bg-dark-5);
    border: 1px solid var(--template-bg-dark-7);
    padding: 4px;
    font-weight: bold;
    z-index: 11;
}

.room_availability div.grid_day_row{
    border: 1px solid var(--template-bg-dark-7);
    padding: 4px;
    text-align: center;
    font-weight: bold;
}

.room_availability div.grid_room_title{
    position: sticky;
    left: 0;
    background-color: var(--white);
    border: 1px solid var(--template-bg-dark-7);
    padding: 4px;
    font-weight: bold;
    z-index: 5;
}

.room_availability div.grid_day_cell{
    border: 0.5px solid var(--template-bg-dark-7);
    padding: 4px;
    text-align: center;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.room_availability div.grid_day_closed{
    border: none;
    padding: 4px;
    text-align: center;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.room_availability .bg-weekend{
    background-color: var(--template-bg-dark-3);
}