/* _Date Display */
div.datetime
{
    position: relative;
    width: 300px;
}

    div.datetime > ul.display
    {
        position: relative;
        width: 300px;
        height: 30px;
        background-color: var(--input-background-normal);
        overflow: hidden;
    }

        div.ctxm.datetime > ul.display > li
        {
            position: relative;
            float: left;
            width: 40px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background-color: var(--input-background-normal);
            color: var(--input-color-normal);
            cursor: pointer;
            display: inline-block;
        }

            div.ctxm.datetime > ul.display > li:active,
            div.ctxm.datetime.date > ul.display > li.fa-calendar-days,
            div.ctxm.datetime.time > ul.display > li.fa-clock
            {
                background: var(--input-background-highlight);
                color: var(--input-color-highlight);
            }

                div.ctxm.datetime.time > ul.display > li.title,
                div.ctxm.datetime.time > ul.display > li.fa-caret-left,
                div.ctxm.datetime.time > ul.display > li.fa-caret-right,
                div.ctxm.datetime > ul.display > li.fa-calendar-days.disabled,
                div.ctxm.datetime > ul.display > li.fa-clock.disabled
                {
                    background: var(--input-background-normal);
                    color: var(--input-color-normal);
                    opacity: 0.3;
                    cursor: default;
                }

/* Mobiles ----------- */
@media only screen and (max-width: 768px)
{
    div.datetime
    {
        max-width: unset;
        width: 100%;
    }

    div.datetime > ul.display
    {
        position: relative;
        margin: 0 auto;
        width: 100%;
        height: 50px;
        background-color: var(--input-background-normal);
        text-align: center;
        overflow: hidden;
    }
        div.ctxm.datetime > ul.display > li
        {
            position: relative;
            float: unset;
            height: 50px;
            line-height: 50px;
        }
}

/* One row at every popup width; the title takes the remaining space. */
#ctxm-menu div.datetime { width: 300px; max-width: 100%; }
#ctxm-menu div.datetime > ul.display
{
    display: flex;
    align-items: center;
    width: 100%;
    height: 44px;
    margin: 0;
    padding: 0;
}
#ctxm-menu div.datetime > ul.display > li
{
    float: none;
    flex: 0 0 36px;
    min-width: 0;
    height: 44px;
    line-height: 44px;
    box-sizing: border-box;
}
#ctxm-menu div.datetime > ul.display > li.title
{
    flex: 1 1 auto;
    white-space: nowrap;
    font-size: 14px;
}
@media (max-width: 767px)
{
    #ctxm-menu div.datetime { width: 100%; }
}