#calendar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 400px;
    height: 570px;
    /* margin: 40px auto; */
}

:root {
    --fc-small-font-size: .85em;
    --fc-page-bg-color: #ffffff;
    --fc-neutral-bg-color: hsla(0, 0%, 82%, .3);
    --fc-neutral-text-color: grey;
    --fc-border-color: #ddd;
    --fc-button-text-color: #fff;
    --fc-button-bg-color: #286B57;
    --fc-button-border-color: #286B57;
    --fc-button-hover-bg-color: #495057;
    --fc-button-hover-border-color: #495057;
    --fc-button-active-bg-color: #495057;
    --fc-button-active-border-color: #495057;
    --fc-event-bg-color: rgb(142, 223, 130, 0.4);
    --fc-event-border-color: #286b5700;
    --fc-event-text-color: #ffffff;
    --fc-event-selected-overlay-color: rgba(0, 0, 0, .25);
    --fc-more-link-bg-color: #d0d0d0;
    --fc-more-link-text-color: inherit;
    --fc-event-resizer-thickness: 8px;
    --fc-event-resizer-dot-total-width: 8px;
    --fc-event-resizer-dot-border-width: 1px;
    --fc-non-business-color: hsla(0, 0%, 84%, .3);
    --fc-bg-event-color: #8edf82;
    --fc-bg-event-opacity: 0.3;
    --fc-highlight-color: rgba(188, 232, 241, 0.3);
    --fc-today-bg-color: rgba(255, 219, 40, 0.15);
    --fc-now-indicator-color: red;
}

.fc .fc-button {
    border-radius: 30px;
    padding: 0 0.7rem;
    font-size: 0.875rem;
    font-weight: 300;
}



.fc .fc-toolbar-title {
    font-size: 1.20em;
    margin: 0;
}

.fc .fc-daygrid-month-start {
    font-size: 0.9em;
    font-weight: 800;
    text-align: center;
}

#calendar a {
    color: inherit;
    text-decoration: none;
    color: #286B57;
}

#calendar a:hover {
    color: inherit;
    text-decoration: none;
    color: #286B57;
}

.fc .fc-daygrid-day-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: auto;
    border-radius: 50%;
    background-color: white;
    color: black;
    border: 0.5px solid rgb(191, 191, 191);
}

.fc .fc-button:focus {
    box-shadow: 0 0 0 0 rgba(44, 62, 80, 0);
    outline: 0;
}

.fc .fc-button-primary:focus {
    box-shadow: 0 0 0 0 rgba(44, 62, 80, 0);
    outline: 0;
}

.fc .fc-button-primary:not(:disabled).fc-button-active:focus,
.fc .fc-button-primary:not(:disabled):active:focus {
    box-shadow: rgba(76, 91, 106, 0.5) 0px 0px 0px 0.0rem;
}


.fc-direction-ltr .fc-daygrid-event.fc-event-start,
.fc-direction-rtl .fc-daygrid-event.fc-event-end {
    margin-left: 28.57px
}

.fc-direction-ltr .fc-daygrid-event.fc-event-end,
.fc-direction-rtl .fc-daygrid-event.fc-event-start {
    margin-right: 28.57px
}