/* You can apply your own color! 
    --main-light-color is the light grey, 
    --main-dark-color is the text
    --main-active-color is the highlight
    you can just add like red, or blue or any helx you like! */
    :root {
        --main-light-color: var(--_theme---theme--background);
        --main-dark-color: var(--_theme---theme--button-bg-hover);
        --main-active-color: var(--_theme---theme--brand-accent-1);
    }

    .datepicker-dropdown {
        border-radius: 0px !important;
        border: 0 !important;
        -webkit-box-shadow: 0px 48px 88px rgba(23, 9, 54, 0.08);
        box-shadow: 0px 48px 88px rgba(23, 9, 54, 0.08);
        box-sizing: border-box;
    }

    .datepicker-panel>ul[data-view="week"]>li {
        background-color: var(--main-light-color);
        color: var(--main-dark-color);
        font-weight: bold;
        text-transform: uppercase;
        margin: 0;
        height: initial;
        padding-top: 3px;
        margin-bottom: 4px;
    }

    .datepicker-panel>ul[data-view="week"]>li:hover {
        background-color: var(--main-light-color);
        color: var(--main-dark-color);
        border-radius: 0;
    }

    .datepicker-panel>ul[data-view="week"] li:first-child {
        border-radius: 0 0 0 0;
    }

    .datepicker-panel>ul[data-view="week"] li:last-child {
        border-radius: 0 0 0 0;
    }

    .datepicker-top-left::before,
    .datepicker-top-left::after {
        display: none;
    }

    .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: 2px;
        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;
        /* line-height: 24px; */
        padding-left: 15px;
        border-radius: 2px;
    }

    .datepicker-panel>ul>li:hover {
        background: var(--main-light-color);
        border-radius: 2px;
    }

    li[data-view="month current"],
    li[data-view="year current"],
    li[data-view="years current"] {
        margin-bottom: 4px !important;
    }

    @media screen and (min-width: 768px) {
        .datepicker-dropdown {
            width: 364px;
            padding: 12px;
        }

        .datepicker-panel>ul>li {
            width: 48px;
            height: 48px;
            padding-top: 10px;
        }

        li[data-view="month next"],
        li[data-view="year next"],
        li[data-view="years next"] {
            position: absolute;
            right: 18px
        }

        li[data-view="month prev"],
        li[data-view="year prev"],
        li[data-view="years prev"] {
            position: absolute;
            right: 66px
        }

        ul[data-view="months"] li,
        ul[data-view="years"] li {
            padding-top: 0px;
            width: 57px !important;
        }
    }

    @media screen and (max-width: 768px) {
        .datepicker-panel {
            transform: scale(0.97);
        }
    }