.calendar {
    display              : grid;
    grid-template-columns: repeat(7, 1fr);
    gap                  : 5px;
    padding              : 5px 0px;
    font-family          : 'karla', sans-serif;
    font-weight          : 400;
    font-size            : 16px;
    line-height          : 24px;
}

.calendar-day {
    width          : 32px;
    height         : 32px;
    line-height    : 35px;
    text-align     : center;
    border-radius  : 50%;
    cursor         : pointer;
    margin         : auto;
    font-weight    : 400;
    color          : #12100B;
    display        : flex;
    align-items    : center;
    justify-content: center;
}

.calendar-day.disabled {
    pointer-events: none;
    color         : #12100B;
    opacity       : 0.7;
    cursor        : not-allowed;
}

.calendar-day.available {
    border: 2px solid #FBBA00;
    cursor: pointer;
}

.calendar-day.selected {
    background-color: #FBBA00;
    color           : #12100B;
    font-weight     : bold;
}

.calendar-header {
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    padding        : 5px 20px;
    flex-wrap      : wrap;
}

.calendar-header .month-year {
    display    : flex;
    align-items: center;
    gap        : 10px;
}

.calendar-header .month-year h5 {
    font-weight: 700;
    font-size  : 12px;
    font-family: 'karla', sans-serif;
}

.calendar-header .month-year .form-select {
    padding      : 3px 6px !important;
    margin-bottom: 0 !important;
    font-size    : 12px !important;
    font-weight  : 500 !important;
    border-radius: 4px !important;
    width        : 80px !important;
}

.calendar-header .controls {
    display    : flex;
    align-items: center;
    gap        : 10px;
}

.calendar-header .controls .btn {
    border: none;
    padding: 5px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.calendar-header .controls .btn:hover {
    background-color: #FBBA00;
}

.calendar-container {
    padding: 0 20px 20px;
}

.day-labels {
    display              : grid;
    grid-template-columns: repeat(7, 1fr);
    text-align           : center;
    color                : #12100B;
    padding              : 5px 0px;
    font-family          : 'karla', sans-serif;
    font-weight          : 500;
    font-size            : 14px;
    line-height          : 20px;
}