/* Calendar Container */
.calendar-container {
box-sizing: border-box;
font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
font-size: 13px;
font-weight: 400;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

}

/* Content Section */
.calendar-container .content {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
}

.calendar-container .content h2 {
    margin: 0;
    padding: 15px 0;
    font-size: 18px;
    border-bottom: 1px solid #ebebeb;
    color: #666;
}

/* Calendar Structure */
.calendar {
    display: flex;
    flex-direction: column;
}

/* Month & Year Header */
.calendar .header .month-year {
    font-size: 20px;
    font-weight: bold;
    color: #636e73;
    padding: 20px 0;
}

/* Days of the Week */
.calendar .days {
    display: flex;
    flex-wrap: wrap;
}

/* Day Name (e.g., Mon, Tue, etc.) */
.calendar .days .day_name {
    width: calc(100% / 7);
    border-right: 1px solid #2c7aca;
    padding: 20px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    background-color: #448cd6;
    text-align: center;
}

.calendar .days .day_name:nth-child(7) {
    border-right: none;
}

/* Day Numbers */
.calendar .days .day_num {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(100% / 7);
    border-right: 1px solid #e6e9ea;
    border-bottom: 1px solid #e6e9ea;
    padding: 15px;
    font-weight: bold;
    color: #7c878d;
    cursor: pointer;
    min-height: 100px;
    text-align: center;
    transition: background-color 0.3s ease;
}

/* Day Number (Date) */
.calendar .days .day_num span {
    display: block;
    width: 90%;
    font-size: 12px;
}

/* Event Styles */
.calendar .days .day_num .event {
    margin-top: 5px;
    font-weight: 400;
    font-size: 12px;
    padding: 5px 0px;
    border-radius: 3px;
    background-color: #f7c30d;
    color: #fff;
    word-wrap: break-word;
}

.calendar .days .day_num .event a {
    color: inherit;
    text-decoration: none;
}

/* Event Colors */
.calendar .days .day_num .event.green {
    background-color: #237158;
}

.calendar .days .day_num .event.blue {
    background-color: #c19f168a;
}

.calendar .days .day_num .event.red {
    background-color: #ec436b;
}

/* First Column (Sunday) */
.calendar .days .day_num:nth-child(7n+1) {
    border-left: 1px solid #e6e9ea;
}

/* Hover State */
.calendar .days .day_num:hover {
    background-color: #fdfdfd;
}

/* Ignore Day */
.calendar .days .day_num.ignore {
    background-color: #fdfdfd;
    color: #ced2d4;
    cursor: not-allowed;
}

/* Selected Day */
.calendar .days .day_num.selected {
    background-color: #f1f2f3;
    cursor: default;
}