/* CALENDAR START */

.calendar_wrap {
	background-color: #F6F6EE;
	background: linear-gradient(to bottom, #F6F6EE, #EEF3F6);
	padding: 2px 10px 0 10px;
	border-radius: 10px;
	margin-bottom: 10px;
	}

.month {
    padding: 0;
    width: 100%;
    text-align: center;
}

.month ul li {
    color: #888;
    font-size: 1em;
}

.month p {
	color: #666;
    font-size: 1.1em;
	}

.month .prev, .month .next {
    float: left;
    color: #888;
    font-weight: bold;
    font-size: 1.3em;
	margin-top: 8px;
}

.month .prev:hover, .month .next:hover {
    cursor: pointer;
	color: #1ABC9C;
}

.month .next {
    float: right;
}


/* Styling for the weekdays header */
.weeks {
    display: flex; /* Use flexbox for equal spacing */
    padding: 0;
	margin: 2px;
}

.weeks li {
    color: #888;
    text-align: center;
    font-size: 0.8em;
    flex: 1; /* Ensure equal width for all days */
}

/* Styling for the days of the month */
.days {
    padding: 8px;
}

.days ul {
    display: flex; /* Use flexbox for equal spacing */
    justify-content: space-between; /* Space out items evenly */
}

.days li {
    color: #777;
	border: 2px solid #FFF;
   border-radius: 50%;
    text-align: center;
    font-size: 0.9em;
    flex: 1; /* Ensure equal width for all days */
	padding: 8px;
}

/* Specific styling for the current day */
.days li.current-day {
    background: #64B5F6; /* Blue background */
    color: #fff;
    border-radius: 50%;
}

.days li.inactive {
    color: #CCC; /* Light gray color for inactive days */
}

.days li:hover {
    background: #F1FEE6;
	border: 2px solid #26A1F4;
    color: #777;
    border-radius: 50%;
    cursor: pointer;
}

/* Media queries for responsive design */
@media screen and (max-width:720px) {
    .weekdays li, .days li {width: 13.1%;}
}

@media screen and (max-width: 420px) {
    .weekdays li, .days li {width: 12.5%;}
    .days li.current-day {padding: 2px;}
}

@media screen and (max-width: 290px) {
    .weekdays li, .days li {width: 12.2%;}
}

/* CALENDAR END */