/* ================================
   Datepicker – desktop
================================ */

#ui-datepicker-div {
    border: 1px solid #B8B8B8;
    border-radius: 3px;
    padding: 4px;
    width: 325px !important;

    background-color: #fff;

    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);

    z-index: 1500 !important;
}

/* Remove tap highlight on mobile touch */
#ui-datepicker-div a {
    -webkit-tap-highlight-color: transparent;
}

#ui-datepicker-div .ui-datepicker-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;
    border: 0;
    width: 315px;
    height: 42px;

    background-color: #414C7C;
}

/* [<], [>] base setting */
#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next {
    position: absolute;
    top: 50%;

    transform: translateY(-50%);

    display: inline-block;
    border: none; /* Remove class styles added on mouseover for [<], [>] */
    width: 26px;
    height: 26px;

    font-size: 16px;

    cursor: pointer;
}

/* Prev button */
#ui-datepicker-div .ui-datepicker-prev {
    left: 8px;

    background: url("https://static.todaysmoonphase.com/static/img/icons/icon-datepicker-arrow-left.svg") no-repeat center / 26px 26px;
}

/* Next button */
#ui-datepicker-div .ui-datepicker-next {
    right: 8px;

    background: url('https://static.todaysmoonphase.com/static/img/icons/icon-datepicker-arrow-right.svg') no-repeat center / 26px 26px;
}

/* [<], [>] hide span background-image */
#ui-datepicker-div .ui-datepicker-prev .ui-icon,
#ui-datepicker-div .ui-datepicker-next .ui-icon  {
    display: none;
}

/* [<], [>], [<]:hover ,[>]:hover preload images */
.hidden-preload-wrapper {
    position: absolute;
    left: -9999px;
    top: -9999px;
}

.hidden-preload {
    width: 1px;
    height: 1px;
}

/* [<], [>] / [<]:hover, [>]:hover icon preload */
.hidden-preload-left {
    background-image: url("https://static.todaysmoonphase.com/static/img/icons/icon-datepicker-arrow-left.svg");
}
.hidden-preload-right {
    background-image: url("https://static.todaysmoonphase.com/static/img/icons/icon-datepicker-arrow-right.svg");
}
.hidden-preload-left-hover {
    background-image: url("https://static.todaysmoonphase.com/static/img/icons/icon-datepicker-arrow-left-activated.svg");
}
.hidden-preload-right-hover {
    background-image: url("https://static.todaysmoonphase.com/static/img/icons/icon-datepicker-arrow-right-activated.svg");
}

@media (hover: hover) and (pointer: fine) {
    #ui-datepicker-div .ui-datepicker-prev:hover {
        background: url('https://static.todaysmoonphase.com/static/img/icons/icon-datepicker-arrow-left-activated.svg') no-repeat center / 26px 26px;
    }
    #ui-datepicker-div .ui-datepicker-next:hover {
        background: url('https://static.todaysmoonphase.com/static/img/icons/icon-datepicker-arrow-right-activated.svg') no-repeat center / 26px 26px;
    }
}

#ui-datepicker-div .ui-datepicker-title {
    display: flex;
    align-items: center;
    gap: 6px;

    margin: 0;
}

#ui-datepicker-div .ui-datepicker-title select {
    margin: 0;
    border: 0;
    padding: 0 4px 0 11px;
    width: 100px;
    height: 26px;

    font-size: 14px;
    font-weight: 500;
    font-family: 'Noto Sans', sans-serif;
    font-variant-numeric: tabular-nums;
    color: #444444;

    background:
            url("https://static.todaysmoonphase.com/static/img/icons/icon-datepicker-arrow-down.svg") no-repeat right 4px center / 18px 18px,
            #ffffff;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

#ui-datepicker-div .ui-datepicker-calendar {
    margin: 2px 1px 6px;
    width: auto;

    border-collapse: separate;
    border-spacing: 5px;
}

#ui-datepicker-div .ui-datepicker-calendar th {
    padding: 0 0 11px;

    font-size: 14px;
    font-weight: 500;
    font-family: 'Noto Sans', sans-serif;
    color: #444444;
}

#ui-datepicker-div .ui-datepicker-calendar td {
    padding: 0;
    width: 39px;
    height: 32px;
}

#ui-datepicker-div .ui-datepicker-calendar td a {
    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #333333;
    border-radius: 3px;
    padding: 0;
    width: 100%;
    height: 100%;

    font-size: 13px;
    font-weight: 400;
    font-family: 'Noto Sans', sans-serif;
    color: #444444;

    background-color: #EBEBEB;
}

#ui-datepicker-div .ui-datepicker-calendar td a.ui-state-active {
    color: #ffffff;

    background-color: #404B74;

    cursor: default;
}

#ui-datepicker-div .ui-datepicker-calendar td a.todaysmoonphase-datepicker-td-a--pointerdown {
    color: #ffffff;

    background-color: #404B74;
}



/* ================================
   Datepicker – mobile
================================ */

@media (max-width: 359px) {
    #ui-datepicker-div {
        width: 297px !important;
    }

    #ui-datepicker-div .ui-datepicker-header {
        width: 287px;
    }

    #ui-datepicker-div .ui-datepicker-title select {
        width: 98px;
    }

    #ui-datepicker-div .ui-datepicker-calendar td {
        width: 35px;
    }
}