.overline {
        text-decoration-line: overline;
}

.blur {
        --tw-blur: blur(8px);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.keyboard-button {
        display: inline-flex;
        height: 2.5rem;
        max-width: 4em;
        flex-grow: 1;
        flex-basis: 1rem;
        justify-content: center;
        align-items: center;
        border-radius: 0.375rem;
        border-width: 1px;
        --tw-border-opacity: 1;
        border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
}

.keyboard-button:hover {
        --tw-bg-opacity: 1;
        background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}

.keyboard-button:active {
        --tw-bg-opacity: 1;
        background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
}

.special-button {
        --tw-border-opacity: 1;
        border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
        --tw-bg-opacity: 1;
        background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}

.special-button:hover {
        --tw-border-opacity: 1;
        border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
        --tw-bg-opacity: 1;
        background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
}

.special-button:active {
        --tw-border-opacity: 1;
        border-color: rgb(148 163 184 / var(--tw-border-opacity, 1));
        --tw-bg-opacity: 1;
        background-color: rgb(148 163 184 / var(--tw-bg-opacity, 1));
        --tw-text-opacity: 1;
        color: rgb(248 250 252 / var(--tw-text-opacity, 1));
}

.virtual-keyboard {
        display: flex;
        max-width: 42rem;
        justify-content: center;
        row-gap: 0.25rem;
        -moz-column-gap: 0.75rem;
             column-gap: 0.75rem;
}

@media (min-width: 640px) {

        .virtual-keyboard {
                row-gap: 0.5rem;
        }
}

.virtual-keyboard {
        flex-wrap: wrap;
}

@media (min-width: 640px) {

        .virtual-keyboard {
                flex-wrap: nowrap;
        }
}

.virtual-keyboard .row {
        display: flex;
        flex-basis: 100%;
        justify-content: center;
        -moz-column-gap: 0.25rem;
             column-gap: 0.25rem;
}

@media (min-width: 640px) {

        .virtual-keyboard .row {
                -moz-column-gap: 0.5rem;
                     column-gap: 0.5rem;
        }
}

.virtual-keyboard .keyboard-region {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        -moz-column-gap: 0.25rem;
             column-gap: 0.25rem;
        row-gap: 0.25rem;
}

@media (min-width: 640px) {

        .virtual-keyboard .keyboard-region {
                -moz-column-gap: 0.5rem;
                     column-gap: 0.5rem;
                row-gap: 0.5rem;
        }
}

.virtual-keyboard .keyboard-region .key {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
}

@media (min-width: 640px) {

        .virtual-keyboard .keyboard-region .key {
                padding-left: 1rem;
                padding-right: 1rem;
        }
}

.virtual-keyboard .sub-keyboard {
        display: flex;
        max-width: 42rem;
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 0.25rem;
}

@media (min-width: 640px) {

        .virtual-keyboard .sub-keyboard {
                row-gap: 0.5rem;
        }
}

.virtual-keyboard .sub-keyboard {
        height: 100%;
}

.virtual-keyboard button {
        background-color: #fff;
        display: inline-flex;
        height: 2.5rem;
        max-width: 4em;
        flex-grow: 1;
        flex-basis: 1rem;
        justify-content: center;
        align-items: center;
        border-radius: 0.375rem;
        border-width: 1px;
        --tw-border-opacity: 1;
        border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
    }

.virtual-keyboard button:hover {
        --tw-bg-opacity: 1;
        background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}

.virtual-keyboard button:active {
        --tw-bg-opacity: 1;
        background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
}

.virtual-keyboard .break {
        height: 0px;
        flex-basis: 100%;
}

.virtual-keyboard .key {
        font-weight: 700;
}

.virtual-keyboard .key.math {
        font-weight: 400;
}

.virtual-keyboard .key-space,
    .virtual-keyboard .key-backspace,
    .virtual-keyboard .key-left,
    .virtual-keyboard .key-right,
    .virtual-keyboard .key-shift,
    .virtual-keyboard .key-enter {
        --tw-border-opacity: 1;
        border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
        --tw-bg-opacity: 1;
        background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}

.virtual-keyboard .key-space:hover,
    .virtual-keyboard .key-backspace:hover,
    .virtual-keyboard .key-left:hover,
    .virtual-keyboard .key-right:hover,
    .virtual-keyboard .key-shift:hover,
    .virtual-keyboard .key-enter:hover {
        --tw-border-opacity: 1;
        border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
        --tw-bg-opacity: 1;
        background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
}

.virtual-keyboard .key-space:active,
    .virtual-keyboard .key-backspace:active,
    .virtual-keyboard .key-left:active,
    .virtual-keyboard .key-right:active,
    .virtual-keyboard .key-shift:active,
    .virtual-keyboard .key-enter:active {
        --tw-border-opacity: 1;
        border-color: rgb(148 163 184 / var(--tw-border-opacity, 1));
        --tw-bg-opacity: 1;
        background-color: rgb(148 163 184 / var(--tw-bg-opacity, 1));
        --tw-text-opacity: 1;
        color: rgb(248 250 252 / var(--tw-text-opacity, 1));
}

.virtual-keyboard .key-shift,
    .virtual-keyboard .key-backspace {
        max-width: none;
        flex-grow: 1;
}

.virtual-keyboard .key-space {
        max-width: none;
        flex-grow: 1;
}

.virtual-keyboard .svg-inline--fa {
        display: inline-block;
        height: 1em;
    }

.virtual-keyboard.numeric .key-backspace {
        max-width: 4em;
}
.virtual-keyboard.alpha,
.virtual-keyboard.greek {
        flex-wrap: wrap;
}
.virtual-keyboard.symbol .keyboard-region {
        grid-template-columns: repeat(5, minmax(0, 1fr));
}

.virtual-keyboard-tab-list {
        display: flex;
        flex-wrap: nowrap;
}

.virtual-keyboard-tab-list button {
        margin-bottom: 0.75rem;
        border-bottom-width: 2px;
        padding: 0.25rem;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
        padding-bottom: 0.25rem;
}

@media (min-width: 640px) {

        .virtual-keyboard-tab-list button {
                padding: 0.5rem;
                padding-left: 0.75rem;
                padding-right: 0.75rem;
        }
}

.virtual-keyboard-tab-list button[aria-selected="true"] {
        --tw-border-opacity: 1;
        border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
        --tw-text-opacity: 1;
        color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
/*
Tailwind base is purposely not included because we want all styles to be prefixed. We manually copy in whatever is needed from tailwind preflight.
@tailwind base;
*/
.overline {
        text-decoration-line: overline;
}
.blur {
        --tw-blur: blur(8px);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

/*
 * Some styles from tailwind preflight need to be included here
 */
:where(#virtual-keyboard-tray, .virtual-keyboard) button {
        -webkit-appearance: button;
        border-width: 0;
        border-style: solid;
        background: transparent;
        cursor: pointer;
    }

#virtual-keyboard-tray {
    /*
     * Some styles from tailwind preflight need to be included here
     */
    box-sizing: border-box;
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-scroll-snap-strictness: proximity;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-border-opacity: 1;

    --keyboard-tray-height: 280px;

    border-top: 1px solid black;

    position: fixed;

    bottom: 0px;

    width: 100%;

    overflow: visible;

    padding-left: 0.5rem;

    padding-right: 0.5rem;

    padding-bottom: 0.5rem;

    --tw-translate-y: 100%;

    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

    transition-property: transform;

    transition-duration: 300ms;

    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    min-height: var(--keyboard-tray-height);
    max-height: calc(100vh - 1.5rem);
    z-index: 10000;
    background-color: white;
}

#virtual-keyboard-tray .close-keyboard-button {
        position: absolute;
        top: 0px;
        right: 0px;
        margin: 0.5rem;
        border-radius: 0.25rem;
}

#virtual-keyboard-tray .close-keyboard-button:hover {
        --tw-bg-opacity: 1;
        background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
}

#virtual-keyboard-tray .close-keyboard-button:active {
        --tw-bg-opacity: 1;
        background-color: rgb(148 163 184 / var(--tw-bg-opacity, 1));
}

#virtual-keyboard-tray .close-keyboard-button {
        display: flex;
        height: 1.5rem;
        width: 1.5rem;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        line-height: 2rem;
}

#virtual-keyboard-tray .open-keyboard-button {
        position: absolute;
        top: -1.5rem;
        left: 0px;
        margin-inline-start: 1rem;
        border-top-left-radius: 0.25rem;
        border-top-right-radius: 0.25rem;
        border-bottom-width: 1px;
        --tw-border-opacity: 1;
        border-bottom-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
}

#virtual-keyboard-tray .open-keyboard-button:hover {
        --tw-bg-opacity: 1;
        background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
}

#virtual-keyboard-tray .open-keyboard-button:active {
        --tw-bg-opacity: 1;
        background-color: rgb(148 163 184 / var(--tw-bg-opacity, 1));
}

#virtual-keyboard-tray .open-keyboard-button {
        display: flex;
        height: 1.5rem;
        width: 3rem;
        align-items: center;
        justify-content: center;
        border-width: 1px;
        --tw-bg-opacity: 1;
        background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

#virtual-keyboard-tray .virtual-keyboard-tab-list {
        margin-left: 1.25rem;
        margin-right: 1.25rem;
}

@media (min-width: 640px) {
        #virtual-keyboard-tray .virtual-keyboard-tab-list {
                margin-left: 5rem;
                margin-right: 5rem;
        }
}

#virtual-keyboard-tray .virtual-keyboard {
        margin-left: auto;
        margin-right: auto;
}

#virtual-keyboard-tray.open {
        --tw-translate-y: 0px;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
