.calendar-slots {
    position: relative;
}

.calendar-slots .prev, .calendar-slots .next {
    cursor: pointer;
    color: #186D7C;
}

.calendar-slots .header-date-item {
    flex: 0 0 14.28%;
    text-align: center;
}

.calendar-slots .header-date-item .dddd {
    font-weight: bold;
}

.calendar-slots .header-date-item .ddmmm {
    color: #7E7E7E;
}

.calendar-slots .slots {
    position: relative;
    background-color: #EAFCFE;
    width: 100%;
    min-height: 220px;
    border-radius: 5px;
    margin-top: 10px;
    padding: 5px 13px;
    font-weight: bold;
    color: rgb(51,108,122);
}

.calendar-slots .col {
    /*flex: 0 0 14.28%;*/
    padding: 0 5px;
}

.calendar-slots .slots.short .col {
    max-height: 180px;
    overflow: hidden;
}

.calendar-slots .short-text {
    position: absolute;
    bottom: 7px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--zv-primary);
    font-size: 12px;
    cursor: pointer;
}

.calendar-slots .slot {
    width: 100%;
    height: 40px;
    text-align: center;
    margin: 5px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3px;
}

.calendar-slots .slot-available {
    background-color: white;
    border: 1px solid transparent;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
}

.calendar-slots .slot-available:hover {
    border: 1px solid rgb(51,108,122);
}

.calendar-slots .slot-available.active {
    background-color: rgb(51,108,122);
    color: white;
}

.calendar-slots #next-slot-button {
    background-color: rgb(51,108,122);
    border-radius: 5px;
    color: white;
    padding: 10px 15px;
    position: absolute;
    cursor: pointer;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.calendar-slots #no-slot-available {
    background-color: #fbfbfb;
    border-radius: 5px;
    color: #525252;
    padding: 10px 15px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}