:root {
    --dibal-key-width: calc(calc(100% / 16));
}

#dibal-keyboard-container {
    position: fixed;
    bottom: 0px;
    width: 100%;
    z-index: 999970;
}

.dibal-keyboard-row {
    display: flex;
    flex-direction: row;
}

.dibal-keyboard-key-container {
    display: inline;
}

.dibal-keyboard-key {
    display: flex;
    height: 60px;
    width: var(--dibal-key-width);
    min-width: var(--dibal-key-width);
    max-width: var(--dibal-key-width);
    justify-content: center;
    align-items: center;
    user-select: none;
    font-size: 2em;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 3.5vmax;
}

#dibal-keyboard-key-delete {
    width: calc(2 * var(--dibal-key-width));
    min-width: calc(2 * var(--dibal-key-width));
    max-width: calc(2 * var(--dibal-key-width));
}

#dibal-keyboard-key-enter {
    width: calc(2 * var(--dibal-key-width));
    min-width: calc(2 * var(--dibal-key-width));
    max-width: calc(2 * var(--dibal-key-width));
}

#dibal-keyboard-key-space {
    width: calc(7 * var(--dibal-key-width));
    min-width: calc(7 * var(--dibal-key-width));
    max-width: calc(7 * var(--dibal-key-width));
    background-size: 100% !important;
}