/* Add to your CSS file */
.calendar {
    margin: 0;
    padding: 10px;
    /* padding: 10px; */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: "Roboto", sans-serif;
    background-color: rgba(106, 133, 255, 0.603);

}

.session-counter{
    width: 90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: white; /* Reset default to white */
    border-radius: 10px;
    margin-top: 10px;
}

.session-counter h1{
    font-size: 15px;
    color:rgb(92, 92, 92);
}

.session-counter p{
    font-size: 20px;
    padding: 10px;
    margin: 0;
}


.display-month{
    margin: 10px;
    color: white;
}

.calendar-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 0.95rem;
    table-layout: fixed; /* Ensures columns fit evenly */
}

.calendar-table {
    width: 240px; /* 7 columns x 34px each + padding/margins */
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 0.95rem;
    table-layout: fixed;
    cursor: pointer;
}

.calendar-table th,
.calendar-table td {
    text-align: center;
    padding: 4px;
    width: 34px;
    height: 34px;
    box-sizing: border-box;
    word-break: break-all;
    
}

.calendar-table th{ 
    color: white;
}


.calendar-table td > div {
    width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    padding: 4px;
}



/* CHANING BG COLOR DEPENDS ON SESSION */
.date-today      > div { color: white;} /* 0 sessions */
.date-today-1    > div { background: #23d3ff20; color: white; border: 1px solid #67faff; } /* 1 */
.date-today-2    > div { background: #23d3ff40; color: white; border: 1px solid #67faff; } /* 2 */
.date-today-3    > div { background: rgba(22, 83, 124, 0.76); color: white; border: 1px solid #67faff; } /* 3 */
.date-today-4    > div { background: rgb(22, 83, 124); color: white; border: 1px solid #67faff; } /* 4 */
.date-today-5    > div { background: rgba(35, 211, 255, 0.342); color: white; border: 1px solid #67faff; } /* 5 */
.date-today-6    > div { background: rgba(35, 211, 255, 0.582); color: white; border: 1px solid #67faff; } /* 6 */
.date-today-7    > div { background: #33e0ecc7; color: white; border: 1px solid #67faff; } /* 7 */
.date-today-8    > div { background: #33e0ec;   color: white; border: 1px solid #67faff; } /* 8+ */
    
/* Tooltip styling */
/* .calendar-table td[title] {
    cursor: pointer;
    position: relative;
}

.calendar-table td[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
} */

.bottom-calendar{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    color: white;
}

.bgcolor{
    display: flex;
    gap: 5px;
    height: 10px;
}

.bgcolor span{
    width: 10px;
    border-radius: 5px;
}

.span1{
    background-color: #23d3ff20;;
    border: 1px solid #67faff;
}

.span2{
    background-color: #23d3ff40;
    border: 1px solid #67faff;
}

.span3{
    background-color: rgb(45, 151, 221);
    border: 1px solid #67faff;
}

.span4{
    background-color: rgba(35, 211, 255, 0.582);
    border: 1px solid #67faff;
}

.span5{
    background-color: #33e0ec;
    border: 1px solid #67faff;
}

@media (max-width: 480px) {
    .calendar-table{
        width: 300px;
    }

    .calendar-table th{
        border-radius: 10%;
    }

    .calendar{
        height: 60%;
        margin-bottom: 20px;
    }
}