.custom-calendar {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
}
.custom-calendar th,
.custom-calendar td {
    padding: 10px;
    border: 1px solid #ddd;
    width: 14.28%;
}
.custom-calendar td {
    vertical-align: top;
}
.custom-calendar .event-detail {
    margin-top: 5px;
    font-size: 0.9em;
}
.custom-calendar .event-title {
    font-weight: bold;
    color: #0073aa;
}
.custom-calendar .event-time,
.custom-calendar .event-location {
    font-size: 0.8em;
    color: #555;
}
.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.calendar-header .prev-month,
.calendar-header .next-month {
    background: #0073aa;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
}
.calendar-header .current-month {
    font-size: 1.2em;
    font-weight: bold;
}