:root {
    --litepicker-month-width: 100%;
    --litepicker-day-width: calc( 100% / 7 );
}

.litepicker .container__months {
    box-shadow: none;
}

.litepicker .month-item {
    font-size: 16px;
}

.litepicker .day-item {
    border: solid 2px white !important;
    border-radius: 4px !important;
}

.litepicker .day-item:hover {
    box-shadow: none !important;
    border: solid 2px white !important;
}

.litepicker .day-item[data-type] {
    color: white !important;
    box-shadow: none !important;
}

.litepicker .day-item[data-type="busy"] {
    background-color: lightgray !important;
}

.litepicker .day-item[data-type="free"] {
    background-color: var(--color-primary) !important;
}

.litepicker .day-item[data-type="partial"] {
    background: linear-gradient(146deg, lightgray 0%, lightgray 50%, var(--color-primary) 51%, var(--color-primary) 100%) !important;
}

.litepicker .day-item[data-type="free"]:hover, .day-item[data-type="partial"]:hover {
    opacity: 0.8;
    cursor: pointer;
    border: none !important;
}

.litepicker .day-item.is-highlighted.is-start-date.is-end-date, .timepicker .times .time.selected .text {
    border: solid 2px var(--color-dark) !important;
}

.timepicker .time {
    text-align: center;
}

.timepicker .time .text {
    font-size: 15px;
    color: white;
    border-radius: 3px;
    margin: 3px;
    padding: 4px 20px;
    border: solid 2px transparent;
}

.timepicker .time[data-status="free"] .text {
    background-color: var(--color-primary);
}

.timepicker .time[data-status="free"] .text:hover {
    opacity: 0.8;
    cursor: pointer;
}

.timepicker .time[data-status="busy"] .text {
    background-color: lightgray;
}