:root {
        --main-light-color: #dedede;
        --main-dark-color: #595959;
        --main-active-color: #333333;
    }
    .datepicker-dropdown {
        border-radius: 8px !important;
        border: 0 !important;
        -webkit-box-shadow: 0px 48px 88px rgba(51, 51, 51, 0.08);
        box-shadow: 0px 48px 88px rgba(51, 51, 51, 0.08);
        box-sizing: border-box;
    }
    .datepicker-panel>ul[data-view="week"]>li:hover {
        background-color: var(--main-light-color);
        color: var(--main-dark-color);
        border-radius: 0px;
    }
    .datepicker-panel>ul>li.picked,
    .datepicker-panel>ul>li.highlighted,
    .datepicker-panel>ul>li.picked:hover {
        color: var(--main-active-color);
        background: var(--main-light-color);
        border-radius: 8px;
        font-style: normal;
        font-weight: 500;
        font-size: 14px;
    }
    li[data-view="month current"],
    li[data-view="year current"] {
        text-align: left;
        color: var(--main-dark-color);
        font-style: normal;
        font-weight: 500;
        font-size: 14px;
        padding-left: 15px;
        border-radius: 10px;
    }
    .datepicker-panel>ul>li:hover {
        background: var(--main-light-color);
        border-radius: 10px;
    }
    .datepicker-panel > ul > li.disabled.highlighted,
    .datepicker-panel > ul > li.disabled:hover.highlighted {
    background-color: rgb(236 236 236);
		}	
    
    @media screen and (max-width: 768px) {
        .datepicker-panel {
            transform: scale(0.97);
        }
    }