/* Calendar CSS */
.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.calendar-nav {
    background-color: #00247D;
    color: white;
    border: none;
    padding: 5px 20px;
    cursor: pointer;
    font-size: 20px;
    border-radius: 0;
    margin: 0 5px;
    transition: background-color 0.3s ease;
}

.calendar-nav:hover {
    background-color: #FFD700;
}

#prev-month {
    margin-right: auto; /* Align left */
}

#next-month {
    margin-left: auto; /* Align right */
}

#month-year {
    font-family: 'Roboto', sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin: 0 10px;
    text-align: center;
}

.list-none {
	list-style-type: none;
}

.fs-small {
	font-size: 14px;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
}

.day, .empty {
    border: 1px solid #e6e9ea;
    padding: 10px;
    background: #ffffff;
    min-height: 100px;
    font-weight: bold;
    color: #6f7b81;
}

.day:hover {
	background-color: #e6e9ea;
}

.current-day {
    background-color: #e6e9ea;
    font-weight: bold;
}

.day-header {
	border-right: 1px solid #e8eaee;
    border-top: 1px solid #e8eaee;
    border-bottom: 1px solid #e8eaee;
    padding: 20px;
    background-color: #00247D;
    min-height: 75px;
    width: 100%;
    color: #ffffff;
    text-align: center;
}

@media (max-width: 768px) {
	.empty, .day-header {
		display: none !important;
	}
	
    .calendar-grid {
        display: block;
    }
    
    .day {
        display: flex;
        min-height: 25px;
        justify-content: space-between;
        margin-bottom: 5px;
    }
    
    .event-list {
    	padding-left: 10px !important;
    	padding-right: 10px !important;
    }
}
/* End Calendar CSS */