div.datetime > div.clock,
div.datetime > div.clock.mm > ul.hour-list,
div.datetime > div.clock.hh > ul.minute-list
{
    display: none;
}

div.datetime.time > div.clock,
div.datetime > div.clock.hh > ul.hour-list,
div.datetime > div.clock.mm > ul.minute-list
{
    display: block;
}

    div.datetime > div.clock > ul.time-list
    {
        margin: 0 auto 10px auto;
        padding: 0;
        height: 40px;
        text-align: center;
        display: block;
    }

        div.datetime > div.clock > ul.time-list > li
        {
            width: 30%;
            height: 40px;
            line-height: 35px;
            border-bottom: 5px solid transparent;
            color: var(--input-color-normal);
            cursor: pointer;
            display: inline-block;
        }
            div.datetime > div.clock.hh > ul.time-list > li.hh,
            div.datetime > div.clock.mm > ul.time-list > li.mm
            {
                border-bottom: 5px solid var(--input-border-highlight);
            }

            div.datetime > div.clock.mm > ul.time-list > li.hh:hover,
            div.datetime > div.clock.hh > ul.time-list > li.mm:hover,
            div.datetime > div.clock > ul.time-list > li.apm:hover
            {
                border-bottom: 4px solid var(--border-mid);
            }
                div.datetime > div.clock > ul.time-list > li.apm.now
                {
                    font-weight: bold;
                    font-size: 16px;
                    color: var(--input-border-highlight);
                }


    div.datetime > div.clock > ul.hour-list,
    div.datetime > div.clock > ul.minute-list
    {
        margin: 0 auto;
        text-align: center;
        display: block;
    }

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

            div.datetime > div.clock > ul.hour-list > li:hover,
            div.datetime > div.clock > ul.hour-list > li:active,
            div.datetime > div.clock > ul.minute-list > li:hover,
            div.datetime > div.clock > ul.minute-list > li:active
            {
                background-color: var(--input-background-normal);
                border: 2px solid var(--input-border-highlight);
            }

            div.datetime > div.clock > ul.hour-list > li.selected,
            div.datetime > div.clock > ul.minute-list > li.selected
            {
                border: 2px solid var(--input-border-highlight);
            }

            div.datetime > div.clock > ul.hour-list > li.now,
            div.datetime > div.clock > ul.minute-list > li.now
            {
                font-weight: bold;
                font-size: 16px;
                border: 2px solid var(--input-border-normal);
            }

            div.datetime > div.clock > ul.hour-list > li.selected.now,
            div.datetime > div.clock > ul.minute-list > li.selected.now
            {
                border: 2px solid var(--input-border-highlight);
                color: var(--input-border-highlight);
            }

/* Mobiles ----------- */
@media only screen and (max-width: 768px)
{
    div.datetime > div.clock > ul.hour-list,
    div.datetime > div.clock > ul.minute-list
    {
        text-align: center;
    }

        div.datetime > div.clock > ul.hour-list > li,
        div.datetime > div.clock > ul.minute-list > li
        {
            float: unset;
            min-width: 44px;
            width: 15%;
            height: 55px;
            line-height: 55px;
            border-radius: unset;
        }
}