#calendar {
        width: 100%;
        margin: 0 auto;
        font-size: 10px;
    }
    .fc-header-title h2 {
        font-size: .9em;
        white-space: normal !important;
    }
    .fc-view-month .fc-event, .fc-view-agendaWeek .fc-event {
        font-size: 0;
        overflow: hidden;
        height: 2px;
    }
    .fc-view-agendaWeek .fc-event-vert {
        font-size: 0;
        overflow: hidden;
        width: 2px !important;
    }
    .fc-agenda-axis {
        width: 20px !important;
        font-size: .7em;
    }

    .fc-button-content {
        padding: 0;
    }
    .has-all-day {
        background-color: #acaeb0 !important;
      }
    .past-date {
        background-color: #f5f5f5 !important;
        color: #999 !important;
        opacity: 0.6;
    }
    .past-date .fc-daygrid-day-number {
        color: #999 !important;
    }
    .past-event {
        display: none !important;
    }
    .calendar-legend {
      margin-bottom: 15px;
      display: flex;
      gap: 20px;
      align-items: center;
    }

    .legend-item {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .legend-color {
      width: 16px;
      height: 16px;
      border-radius: 2px;
      display: inline-block;
    }

    .legend-color.unavailable {
      background-color: #acaeb0; /* Match your .has-all-day background color */
    }

    .legend-text {
      font-size: 14px;
      color: #333;
    }