.calendar {
    width: 330px;
}

.calendar>.days-grid>.day .day-price {
    font-size: 80%;
    color: #5cb1f7;
}

.calendar>.days-grid>.day .day-price-green, .span-green {
    font-size: 80%;
    color: #fff;
    background-color: #3eeb12ef;
}

.calendar>.days-grid>.day .day-price-blue, .span-blue {
    font-size: 80%;  
    color: #fff;
    background-color: #21e9f0;  
}
.calendar>.days-grid>.day .day-price-yellow, .span-yellow {
    font-size: 80%;
    color: #d6a607fb;
    background-color: #d6a607fb; 
}

.calendar>.days-grid>.day .day-price-red, .span-red{
    font-size: 80%;
    color: #f82727;
    background-color: #f82727;
}

.calendar>.days-grid>.day .day-price-grey {
    font-size: 80%;
    color: #fff;
    background-color: #686363;
}

.calendar>.days-grid>.day.selected .day-price {
    color: #fff;
}

.container.range-plugin .calendar>.days-grid>.day.start,
.container.range-plugin .calendar>.days-grid>.day.end {
    z-index: 1;
}

:host {
    --color-fg-primary: #fa5738;
    --color-bg-inrange: #faf6f6;
}