div.datetime > div.calendar,
div.datetime > div.calendar.dd > ul.year-list,
div.datetime > div.calendar.dd > ul.month-list,
div.datetime > div.calendar.ym > ul.day-list,
div.datetime > div.calendar.ym > ul.date-list
{
    display: none;
}

    div.datetime.date > div.calendar,
    div.datetime > div.calendar.ym > ul.year-list,
    div.datetime > div.calendar.ym > ul.month-list,
    div.datetime > div.calendar.dd > ul.day-list,
    div.datetime > div.calendar.dd > ul.date-list
    {
        display: block;
    }

    /* Highlight now */
    div.datetime > div.calendar > ul.year-list li.now,
    div.datetime > div.calendar > ul.month-list li.now,
    div.datetime > div.calendar > ul.date-list li.now
    {
        font-weight: bold;
        font-size: 16px;
        border-color: var(--input-border-normal);
    }

    /* Highlight hover/active */
    div.datetime > div.calendar > ul.year-list li:hover,
    div.datetime > div.calendar > ul.year-list li:active,
    div.datetime > div.calendar > ul.month-list li:hover,
    div.datetime > div.calendar > ul.month-list li:active,
    div.datetime > div.calendar > ul.date-list li:hover,
    div.datetime > div.calendar > ul.date-list li.active
    {
        background-color: var(--input-background-normal);
        border: 2px solid var(--input-border-normal);
    }


    /* Highlight selected */
    div.datetime > div.calendar > ul.year-list li.selected,
    div.datetime > div.calendar > ul.date-list li.selected
    {
        border: 2px solid var(--input-border-highlight);
    }

        /* Highlight selected */
        div.datetime > div.calendar > ul.year-list li.selected.now,
        div.datetime > div.calendar > ul.date-list li.selected.now
        {
            border: 2px solid var(--input-border-highlight);
            color: var(--input-border-highlight);
        }

    div.datetime > div.calendar > ul.year-list,
    div.datetime > div.calendar > ul.month-list
    {
        float: left;
        width: 150px;
        height: 192px;
        overflow: hidden;
        display: inline-block;
    }

        div.datetime > div.calendar > ul.year-list > li,
        div.datetime > div.calendar > ul.month-list > li
        {
            margin: 2px;
            width: 44px;
            height: 44px;
            line-height: 42px;
            border-radius: 50%;
            border: 2px solid transparent;
            text-align: center;
            font-weight: bold;
            font-size: 12px;
            color: var(--input-color-normal);
            cursor: pointer;
            display: inline-block;
        }

    div.datetime > div.calendar > ul.day-list,
    div.datetime > div.calendar > ul.date-list
    {

    }

        div.datetime > div.calendar > ul.day-list > li,
        div.datetime > div.calendar > ul.date-list > li
        {
            width: 42px;
            border-radius: 50%;
            border: 2px solid transparent;
            text-align: center;
            font-weight: bold;
            font-size: 12px;
            cursor: pointer;
            display: inline-block;
        }

        div.datetime > div.calendar > ul.day-list > li
        {
            height: 30px;
            line-height: 30px;
            color: var(--color-low);
        }

        div.datetime > div.calendar > ul.date-list > li
        {
            height: 48px;
            line-height: 48px;
            color: var(--input-color-normal);
        }

            div.datetime > div.calendar > ul.date-list > li.faded:not(li.now)
            {
                opacity: 0.3;
            }

/* Mobiles ----------- */
@media only screen and (max-width: 768px)
{

    div.datetime > div.calendar > ul.date-list
    {

    }

        div.datetime > div.calendar > ul.day-list > li,
        div.datetime > div.calendar > ul.date-list > li {
            min-width: 42px;
            width: 14%;
            height: 55px;
            line-height: 55px;
            border-radius: unset;
        }

    div.datetime > div.calendar > ul.year-list,
    div.datetime > div.calendar > ul.month-list
    {
        width: 50%;
        text-align: center;
    }
        div.datetime > div.calendar > ul.year-list > li,
        div.datetime > div.calendar > ul.month-list > li
        {
            float: unset;
            min-width: 44px;
            width: 30%;
            height: 55px;
            line-height: 55px;
            border-radius: unset;
        }
}
/* Seven explicit columns avoid wrapping caused by borders and inline spacing. */
#ctxm-menu div.datetime > div.calendar.dd > ul.day-list,
#ctxm-menu div.datetime > div.calendar.dd > ul.date-list
{
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    padding: 0;
    margin: 0;
}
#ctxm-menu div.datetime > div.calendar > ul.day-list > li,
#ctxm-menu div.datetime > div.calendar > ul.date-list > li
{
    box-sizing: border-box;
    width: auto;
    min-width: 0;
}
#ctxm-menu div.datetime > div.calendar > ul.day-list > li
{
    height: 30px;
    line-height: 30px;
}
#ctxm-menu div.datetime > div.calendar > ul.date-list > li
{
    height: 44px;
    line-height: 40px;
}

#ctxm-menu div.datetime.date > div.calendar.ym
{
    display: flow-root;
}
#ctxm-menu div.datetime > div.calendar.ym > ul.year-list,
#ctxm-menu div.datetime > div.calendar.ym > ul.month-list
{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 50%;
    height: auto;
    padding: 0;
    margin: 0;
}
#ctxm-menu div.datetime > div.calendar.ym > ul.year-list > li,
#ctxm-menu div.datetime > div.calendar.ym > ul.month-list > li
{
    box-sizing: border-box;
    width: auto;
    min-width: 0;
    height: 44px;
    line-height: 40px;
}