ul.time_slots {
    display: block;
    list-style-type: none;
    margin: 0;
    li {
        display: inline-block;
        a {
            display: block;
            padding: 10px 20px;
            border: 2px solid #c2eae2;
            color: #111!important;
            &.active {
                background: green;
                color: #fff!important;
            }
            &.disable_time_before {
                border-color: red;
                background: #f76161;
            }
            &.disable_time {
                background: red;
                border-color: red;
                color: #fff!important;
            }
            &.disable_time_after {
                border-color: red;
                background: #f76161;
            }
        }
    }
}


.ui-datepicker {
    background-color: #fff;
    box-shadow: none;
    border: 1px solid rgba(0,0,0,0.1);
    padding: 15px;
    font-size: 1.6rem;
    font-family: var(--bodyFont);
}

.ui-datepicker-calendar {
    width: 100%;
}

.ui-datepicker-calendar a {
    color: inherit;
    text-decoration: none;
}

.ui-datepicker-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 1em;
    background: transparent;
    border: 0;
}

.ui-datepicker-prev,
.ui-datepicker-next {
    cursor: pointer;
    transition: all 0.25s;
    &:hover,
    &:focus,
    &:active {
        border: 0;
        background: transparent;
    }
}

.ui-datepicker-next {
    order: 1;
}

.ui-datepicker-prev .ui-icon,
.ui-datepicker-next .ui-icon {
    background-image: url("https://cdn.rawgit.com/marcobiedermann/playground/3027274a/ui/datepicker/jquery-ui-datepicker/dist/assets/images/datepicker-arrows.svg");
    background-repeat: no-repeat;
    background-size: 300%;
    display: inline-block;
    height: 1em;
    overflow: hidden;
    text-indent: -999px;
    width: 1em;
}

.ui-datepicker-prev:hover .ui-icon-circle-triangle-w {
    background-position: -1em 0;
}

.ui-datepicker-prev.ui-state-disabled .ui-icon-circle-triangle-w {
    background-position: -2em 0;
}

.ui-datepicker-next .ui-icon-circle-triangle-e {
    background-position: 0 -1em;
}

.ui-datepicker-next:hover .ui-icon-circle-triangle-e {
    background-position: -1em -1em;
}

.ui-datepicker-nextui-state-disabled .ui-icon-circle-triangle-e {
    background-position: -2em -1em;
}

.ui-datepicker-title {
    font-size: 1.8rem;
    font-weight: 700;
}

.ui-datepicker-calendar td,
.ui-datepicker-calendar th {
    text-align: center;
}

.ui-datepicker-calendar td a,
.ui-datepicker-calendar td span {
    background-color: #eee;
    display: block;
    padding: 0.5em 1em;
    background-image: none!important;
}

.ui-datepicker-calendar .ui-datepicker-unselectable {
    color: #c8c8ca;
}

.ui-datepicker-calendar .ui-datepicker-today a,
.ui-datepicker-calendar .ui-datepicker-today span {
    color: #bed62f;
    font-weight: 700;
}

.ui-datepicker-calendar .ui-datepicker-current-day a {
    background-color: #bed62f;
    color: #fff;
    font-weight: 700;
}

.ui-datepicker-buttonpane {
    margin-top: 1em;
}

.ui-datepicker-buttonpane button {
    background-color: #484a4e;
    color: #fff;
    font-size: 0.75rem;
    padding: 0.25em 0.5em;
}

.ui-datepicker-buttonpane button + button {
    margin-left: 0.5em;
}