.mathEditor {
    max-width: 100%;
    width: 100%;
}

.originalImageArea {
    width: 50%;
    margin: 0 0.5em 0.5em 0;
}

.latexInputArea {
    width: 100%;
}

.mathInputArea {
    width: 100%;
    overflow: auto;
    flex: 1 1 auto;
    position: relative;
}

.keyboardItem {
    margin: 2px;
    padding: 2px;
    font-size: 0.75em;
}

.searchBar {
    position: absolute;
    top: 0.5em;
    right: 0.5em;
}

.katex-display {
    margin: 0;
}

.mathEditorFirstRow {
    display: flex;
    flex-direction: row;
    color: black;
    height: 50%;
}

math-field::part(virtual-keyboard-toggle) {
    display: none;
}

math-field::part(menu-toggle) {
    display: none;
}


math-field::part(content) {
    justify-content: center;
    font-size: 2em;
}

math-field {
    border: none;
    width: 100%;
    border-radius: var(--pave-border-radius);
    margin-bottom: 0.5em;
    min-height: 3em;
}

.latexInput {
    width: 100%;
    border-radius: var(--pave-border-radius);
}

math-field:focus-within {
    outline: white;
}

.virtualKeyboard {
    position: relative;
    flex-direction: column;
    flex-shrink: 0;
}

.showVirtualKeyboard {
    text-align: center;
    width: 100%;
    margin: 0;
    padding: 0;
    --bs-btn-bg: transparent;
    border: 0;
    border-radius: 0;
}

.mathEditorInputArea {
    position: relative;
    margin: 0 0 0.5em 0;
}

.mathEditorButtons {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-bottom: .5em;
}

.alternativeTextInputArea {
    background-color: var(--pave-working-grey);
    border-color: var(--pave-working-grey);
    color: black;
}

.mathKeyboardTab {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}