footer#html-footer div.w-keypad
{
    visibility: hidden;
}

/* Keypad */
div.w-keypad
{
    width: 300px;
}

    div.w-keypad > h2
    {
        padding-right: 25px;
        height: 50px;
        line-height: 50px;
        text-align: right;
        display: block;
    }

    /* Keypad */
    div.w-keypad > ul
    {
        width: 300px;
    }

        div.w-keypad > h2.expanded,
        div.w-keypad > ul.expanded
        {
            padding-right: 75px;
        }

        div.w-keypad > ul > li
        {
            width: 100px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-weight: bold;
            font-size: 24px;
            color: var(--input-color-normal);
            cursor: pointer;
            display: inline-block;
                touch-action: manipulation;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
        }

            div.w-keypad > ul.expanded > li
            {
                width: 75px;
            }
                div.w-keypad > ul > li.tool
                {
                    display: none;
                }
                    div.w-keypad > ul.expanded > li.tool
                    {
                        display: block;
                    }

            div.w-keypad > ul > li:nth-child(3n+3)
            {
                float: right;
            }

            div.w-keypad > ul > li.pressed
            {
                background-color: var(--input-background-highlight);
                color: var(--input-color-highlight);
            }

/* Mobiles ----------- */
/* Icon glyphs occupy the same full-height line box as the numeric keys. */
div.w-keypad > ul > li > i
{
    display: inline-block;
    width: 100%;
    line-height: inherit;
    vertical-align: top;
    pointer-events: none;
}

@media only screen and (max-width: 768px)
{
    /* Keypad */
    div.w-keypad
    {
        width: 100%;
    }

        /* Keypad */
        div.w-keypad > ul
        {
            width: 100%;
            padding-bottom: 50px;
        }

            div.w-keypad > ul > li
            {
                position: relative;
                width: 33%;
                text-align: center;
            }

        div.w-keypad > ul.expanded
        {
            padding-right: 75px;
        }

            div.w-keypad > ul.expanded > li
            {
                width: 33%;
            }
                div.w-keypad > ul.expanded > li.tool
                {
                    width: 75px;
                }
}
/* PIN uses the same keys without numeric formatting or extended tools. */
div.w-keypad.pin-keypad
{
    width: min(300px, 100%);
    margin: 12px auto;
    box-sizing: border-box;
}
div.w-keypad.pin-keypad > h2 { display: none; }
div.w-keypad.pin-keypad > ul
{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
}
div.w-keypad.pin-keypad > ul > li
{
    float: none;
    width: auto;
    min-width: 0;
    height: 50px;
    line-height: 50px;
    border-radius: 6px;
}
div.w-keypad.pin-keypad > ul > li:focus-visible
{
    outline: 2px solid var(--input-color-highlight, #2eabff);
    outline-offset: -2px;
}

/* Use explicit columns instead of mixed floats/inline baselines for every keypad. */
div.w-keypad > ul
{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    position: relative;
}

div.w-keypad > ul > li:not(.tool)
{
    display: flex;
    align-items: center;
    justify-content: center;
    float: none;
    width: auto;
    min-width: 0;
    box-sizing: border-box;
    height: 50px;
    line-height: 50px;
}