/* Calender */
#cal-title{
    margin-top: 10px;
    margin-bottom: 5px;
    text-align: center;
    font-size: 20px;
    font-weight: bolder;
    color:rgb(0, 0, 0);
}

.calendar {
    display: grid;
    text-align: center;
    width: fit-content;
    
    
    grid-template-columns: repeat(6, 1fr);
    width: 100%;
    background-color:#ffffff;
    color:#eeeeee
}

div.month-box {
    border-radius: 5px;
    background-color:#156ac1;
    margin: 1px;
    height: fit-content;
}

div.month {
    
    width: auto;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    
}

.day {
    background-color:#00000080;
    height: fit-content;
    border-radius: 7px 7px 7px 7px;

    position: relative; /* Add relative positioning */
}
.day-last-month {
    background-color:#000000b6;
    height: fit-content;
    border-radius: 7px 7px 7px 7px;

    position: relative; /* Add relative positioning */
}

.day-reserved {
    background-color:#ff000080;
    height: fit-content;
    border-radius: 7px 7px 7px 7px;
    
    position: relative; /* Add relative positioning */
}
.day-reserved-last-month {
    background-color:#8f000080;
    height: fit-content;
    border-radius: 7px 7px 7px 7px;
    
    position: relative; /* Add relative positioning */
}


.weekend {
    background-color:#e59a37b9;
    height: fit-content;
    border-radius: 7px 7px 7px 7px;

    position: relative; /* Add relative positioning */
}
.weekend-last-month {
    background-color:#976423b9;
    height: fit-content;
    border-radius: 7px 7px 7px 7px;

    position: relative; /* Add relative positioning */
}

.weekend-reserved {
    background-color:#ff620080;
    height: fit-content;
    border-radius: 7px 7px 7px 7px;

    position: relative; /* Add relative positioning */
}
.weekend-reserved-last-month {
    background-color:#ab450680;
    height: fit-content;
    border-radius: 7px 7px 7px 7px;

    position: relative; /* Add relative positioning */
}


/* end of block*/