@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: normal;
    src:
/* url(OpenSansRegularWoffTwo) format('woff2'),
url(OpenSansRegularWoff) format('woff'); */
        url("./fonts/files/open-sans-v18-latin-regular.woff2") format("woff2"),
        url("./fonts/files/open-sans-v18-latin-regular.woff") format("woff");
}

@font-face {
    font-family: "Open Sans";
    font-style: italic;
    font-weight: normal;
    src:
        url("./fonts/files/open-sans-v18-latin-italic.woff2") format("woff2"),
        url("./fonts/files/open-sans-v18-latin-italic.woff") format("woff");
}

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 700;
    src:
        url("./fonts/files/open-sans-v18-latin-700.woff2") format("woff2"),
        url("./fonts/files/open-sans-v18-latin-700.woff") format("woff");
}

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 300;
    src:
        url("./fonts/files/open-sans-v18-latin-light.woff2") format("woff2"),
        url("./fonts/files/open-sans-v18-latin-light.woff") format("woff");
}

@font-face {
    font-family: "Open Sans";
    font-style: italic;
    font-weight: 300;
    src:
        url("./fonts/files/open-sans-v18-latin-light-italic.woff2")
            format("woff2"),
        url("./fonts/files/open-sans-v18-latin-light-italic.woff")
            format("woff");
}

@font-face {
    font-family: "Open Sans";
    font-style: italic;
    font-weight: 700;
    src:
        url("./fonts/files/open-sans-v18-latin-700italic.woff2") format("woff2"),
        url("./fonts/files/open-sans-v18-latin-700italic.woff") format("woff");
}
html {
    font-family: "Open Sans" !important;
    --menuWidth: 220px;
    --mainBlue: #1a5a99;
    --lightBlue: hsl(209, 54%, 82%);
    --solidLightBlue: #8fb8de;
    --mainGray: #e3e3e3;
    --donutBody: #eea177;
    --donutTopping: #6d4445;
    --mainBorder: 2px solid black;
    --mainBorderRadius: 5px;
    --mainRed: #c1292e;
    --lightRed: hsl(0, 54%, 82%);
    --mainGreen: #3e844a;
    --canvas: white;
    --canvasText: black;
    --lightGreen: #a6f19f;
    --lightYellow: #f5ed85;
    --whiteBlankLink: #6d4445;
    --mainYellow: #94610a;
    --lightOrange: #efab34;
    --mainOrange: #a36600;
    --mainPurple: #4a03d9;
}

[data-theme="dark"] {
    font-family: "Open Sans" !important;
    --menuWidth: 220px;
    --mainBlue: #1a5a99;
    --lightBlue: hsl(209, 54%, 82%);
    --solidLightBlue: #1a5a99;
    --mainGray: #a9a9a9;
    --donutBody: #eea177;
    --donutTopping: #6d4445;
    --mainBorder: 2px solid white;
    --mainBorderRadius: 5px;
    --mainRed: #c1292e;
    --lightRed: hsl(0, 54%, 82%);
    --mainGreen: #3e844a;
    --canvas: #121212;
    --canvasText: white;
    --lightGreen: #a6f19f;
    --lightYellow: #f5ed85;
    --whiteBlankLink: #a9abe5;
    --mainYellow: #efab34;
    --lightOrange: #efab34;
    --mainOrange: #a36600;
    --mainPurple: #4a03d9;
}
.doenet-viewer {
    font-family: "Open Sans" !important;
    color: var(--canvasText);
    overflow-x: auto;
}
.doenet-viewer h1 {
    font-size: 2em;
    font-weight: bold;
}
.doenet-viewer h2 {
    font-size: 1.5em;
    font-weight: bold;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
}
.doenet-viewer h3 {
    font-size: 1.17em;
    font-weight: bold;
    margin-block-start: 1em;
    margin-block-end: 1em;
}
.doenet-viewer h4 {
    font-weight: bold;
    margin-block-start: 1.33em;
    margin-block-end: 1.33em;
}
.doenet-viewer h5 {
    font-size: 0.83em;
    font-weight: bold;
    margin-block-start: 1.67em;
    margin-block-end: 1.67em;
}
.doenet-viewer p {
    margin-block-start: 1em;
    margin-block-end: 1em;
}
.doenet-viewer input {
    box-sizing: content-box;
    padding: 2px 1px;
}
div.jxgbox input {
    border-width: 2px;
}
div.jxgbox button {
    margin: 0;
    border-radius: 20px;
    border-width: 0px;
    border-style: hidden;
    padding: 0px 10px;
    color: white;
    height: 24px;
}
div.jxgbox input[type="checkbox"] {
    margin: 3px 3px 3px 4px;
    height: 18px;
    width: 18px;
}

/*
    Copyright 2008-2025
        Matthias Ehmann,
        Michael Gerhaeuser,
        Carsten Miller,
        Bianca Valentin,
        Andreas Walter,
        Alfred Wassermann,
        Peter Wilfahrt

    This file is part of JSXGraph.

    JSXGraph is free software dual licensed under the GNU LGPL or MIT License.

    You can redistribute it and/or modify it under the terms of the

      * GNU Lesser General Public License as published by
        the Free Software Foundation, either version 3 of the License, or
        (at your option) any later version
      OR
      * MIT License: https://github.com/jsxgraph/jsxgraph/blob/master/LICENSE.MIT

    JSXGraph is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Lesser General Public License for more details.

    You should have received a copy of the GNU Lesser General Public License and
    the MIT License along with JSXGraph. If not, see <https://www.gnu.org/licenses/>
    and <https://opensource.org/licenses/MIT/>.
 */

.jxgbox {
    /* for IE 7 */
    position: relative;
    overflow: hidden;
    background-color: #fff;
    border-style: solid;
    border-width: 1px;
    border-color: #356aa0;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    margin: 0;
    -ms-touch-action: none;
    /* "touch-action: none;" is set with JavaScript. */
}

.jxgbox svg text {
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.JXGtext {
    font-family: Courier, monospace;
    /*
     * The default font family is now set in
     * JXG.Options.text.cssdefaultstyle = 'font-family: Arial, Helvetica, Geneva, sans-serif;'
     */

    /* "background-color: transparent;" may produce artefacts in IE. Solution: setting a color explicitly. */
    background-color: transparent;
    padding: 0;
    margin: 0;
}

.JXGinfobox {
    border-style: none;
    border-width: 0;
    border-color: black;
}

/* CSS attributes will (permantely) overwrite attributes set in JSXGraph */
.JXGimage {
    /* opacity: 1.0; */
}

.JXGimageHighlight {
    /* opacity: 0.6; */
}

.jxgbox :focus {
    outline-width: 0.5px;
    outline-style: dotted;
}

/* CSS rules for the navigation bar */

.JXG_navigation {
    position: absolute;
    right: 5px;
    bottom: 5px;

    z-index: 100;

    background-color: transparent;
    padding: 2px;
    font-size: 14px;
    cursor: pointer;
}

.JXG_navigation_button {
    color: #666;
}

.JXG_navigation_button_left {
}

.JXG_navigation_button_right {
}

.JXG_navigation_button_up {
}

.JXG_navigation_button_down {
}

.JXG_navigation_button_out {
}

.JXG_navigation_button_100 {
}

.JXG_navigation_button_in {
}

.JXG_navigation_button_fullscreen {
}

.JXG_navigation_button_reload {
}

.JXG_navigation_button_cleartraces {
}

.JXG_navigation_button_screenshot {
}

.JXG_navigation_button:hover {
    border-radius: 2px;
    background: rgba(184, 184, 184, 0.5);
}

.JXG_navigation_button svg {
    top: 0.2em;
    position: relative;
    padding: 0;
}

/* CSS rules for the wrapping div in fullscreen mode */

.JXG_wrap_private:-moz-full-screen {
    background-color: #ccc;
    padding: 0;
    width: 100%;
    height: 100%;
}

.JXG_wrap_private:-webkit-full-screen {
    background-color: #ccc;
    padding: 0;
    width: 100%;
    height: 100%;
}

.JXG_wrap_private:fullscreen {
    background-color: #ccc;
    padding: 0;
    width: 100%;
    height: 100%;
}

.JXG_wrap_private:-ms-fullscreen {
    background-color: #ccc;
    padding: 0;
    width: 100%;
    height: 100%;
}

/* Classes forn smartlabels */

.smart-label-solid {
    padding: 1px 7px 1px 7px;
    margin: 0;
    color: white;
    border-radius: 150px;
    text-align: center;
    vertical-align: middle;
}

.smart-label-outline {
    padding: 1px 7px 1px 7px;
    margin: 0;
    border: solid 2px black;
    background-color: white;
    color: black;
    border-radius: 15px;
    text-align: center;
    vertical-align: middle;
}

.smart-label-pure {
    padding: 20px 7px 1px 7px;
    margin: 0;
    border: none;
    background-color: transparent;
    color: black;
    border-radius: 15px;
    text-align: center;
    vertical-align: middle;
}

.smart-label-line,
.smart-label-point {
    background-color: #0072b2;
    border-color: #0072b2;
}

.smart-label-point {
    margin-top: 12px;
}

.smart-label-angle {
    background-color: #e69f00;
    border-color: #e69f00;
    padding: 1px 7px 1px 7px;
}

.smart-label-polygon,
.smart-label-circle {
    background-color: #f0e442;
    color: black;
    border-color: #f0e442;
    padding: 1px 7px 1px 7px;
}

/* Fix: Ensure div-based paragraphs maintain standard paragraph spacing */
.doenet-viewer .para {
    margin-block-start: 1em;
    margin-block-end: 1em;
}

/**************************************************
 End JSXGraph styles 
 **************************************************/
.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;
}

/*
     * Right-edge footprint of this button (w-12 + me-4 = 4rem) is mirrored
     * by `--keyboard-tab-reserve-width` in
     * `packages/doenetml/src/EditorViewer/editor-viewer.css` so the editor
     * footer can shift its rightmost element inward to clear it. Keep the
     * two values in sync.
     */

#virtual-keyboard-tray .open-keyboard-button {
        position: absolute;
        top: -1.5rem;
        right: 0px;
        margin-inline-end: 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));
}
.doenet-button {
    box-sizing: border-box;
    --button-color: var(--mainBlue);
    --button-hover-color: oklch(
        from var(--button-color) calc(max(l * 1.6, 0.7)) calc(c * 0.75) h
    );
    --button-active-color: oklch(
        from var(--button-color) calc(max(l * 1.7, 0.8)) calc(c * 0.75) h
    );
    all: unset;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.5rem;

    padding: 0.25rem 0.75rem;
    min-height: 1.4rem;
    margin: 0 2px;

    font-size: 12px;
    background-color: var(--button-color);
    color: white;
    border-radius: 10rem;
    cursor: pointer;
    user-select: none;

    &:hover {
        background-color: var(--button-hover-color);
        color: black;
    }
    &:active {
        background-color: var(--button-active-color);
        color: black;
    }
    &:disabled {
        background-color: var(--mainGray);
        cursor: not-allowed;
    }
    &:focus {
        outline: 2px solid white;
        outline-offset: -4px;
    }
}
.doenet-button.alert {
    --button-color: var(--mainRed);
}
.doenet-button.action-button {
    border-radius: var(--mainBorderRadius);
}
.doenet-button .button-icon {
    padding: 0.25rem 0;
    transform: translateY(0.12rem);
}
.doenet-labelled-button {
    display: inline-flex;
    gap: 0.25rem;
    align-items: center;
}
.doenet-labelled-button.vertical {
    flex-direction: column;
    vertical-align: bottom;
}

.doenet-button-group {
    display: inline-flex;
    align-items: stretch;
    .doenet-button {
        --separator-color: oklch(
            from var(--button-color) calc(l * 1.8) calc(c * 0.5) h
        );
        border: 1px solid var(--separator-color);
    }
    &:not(.vertical) {
        flex-direction: row;
        .doenet-button {
            margin-left: 0;
            margin-right: 0;
            /* Remove border radius on all but the first and last buttons */
            &:not(:first-child):not(:last-child) {
                border-radius: 0;
            }
            &:first-child {
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
            }
            &:last-child {
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
            }
        }
    }
}
.doenet-button-group.vertical {
    flex-direction: column;
    .doenet-button {
        margin-top: 0;
        margin-bottom: 0;
        /* Remove border radius on all but the first and last buttons */
        &:not(:first-child):not(:last-child) {
            border-radius: 0;
        }
        &:first-child {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }
        &:last-child {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }
    }
}
.doenet-button {
    /* Hide the underlying checkbox */
    input[type="checkbox"],
    input[type="radio"] {
        appearance: none;
        width: 0;
        margin: 0;
        padding: 0;
        position: absolute;
        outline: none;
    }
    &:has(input) {
        border: 2px solid var(--button-color);
    }
    &:has(input:not(:checked, :focus)):hover {
        background-color: var(--button-active-color);
    }
    &:has(input:not(:checked)):hover {
        color: black;
    }
    &:has(input:checked):hover {
        color: black;
    }
    &:has(input:checked) {
        background-color: var(--button-color);
    }
    &:has(input:not(:checked)) {
        background-color: var(--canvas);
        color: var(--button-color);
    }
    &:has(input:focus) {
        outline: 2px solid white;
        outline-offset: -4px;
    }
    &:has(input:not(:checked):focus) {
        outline: 2px solid var(--button-color);
        outline-offset: -4px;
    }
}

/* Resizable Panel */
.doenet-resizable-panel-handle {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 10px;
    background-color: var(--mainGray);
    border: 1px solid oklch(from var(--mainGray) calc(l * 0.8) calc(c * 0.5) h);

    svg {
        flex-shrink: 0;
        margin-left: 1px;
    }

    &.vertical {
        width: 100%;
        height: 10px;
        svg {
            margin-left: 0;
            margin-top: 0.5px;
        }
    }
    &.collapsible:not(.isOpen) {
        height: 5px;
    }
}

/* UI Components */

.doenet-ui-button {
    --outline-offset: -1px;
    --background: white;
    --border: rgb(0 0 0 / 13%);
    --light: rgb(255 255 255 / 20%);
    --shadow: rgb(0 0 0 / 10%);
    --text: black;

    &:where(.dark, .dark *) {
        --background: rgb(255 255 255 / 5%);
        --border: rgb(255 255 255 / 10%);
        --light: rgb(255 255 255 / 5%);
        --shadow: rgb(0 0 0 / 25%);
        --text: white;
        box-shadow:
            inset 0 0 0 1px var(--border),
            inset 0 -1px 0 1px var(--shadow),
            inset 0 1px 0 var(--light);
    }

    &:not(:active):hover {
        --border: rgb(0 0 0 / 33%);
    }
    &:where(.dark, .dark *):not(:active):hover {
        --border: rgb(255 255 255 / 25%);
    }
    @layer theme {
        &[aria-disabled="true"] {
            opacity: 0.5;
        }
    }
    &:active,
    &[data-active] {
        box-shadow:
            inset 0 0 0 1px var(--border),
            inset 0 2px 0 var(--border);
    }
    &:active:where(.dark, .dark *),
    &[data-active]:where(.dark, .dark *) {
        box-shadow:
            inset 0 0 0 1px var(--border),
            inset 0 1px 1px 1px var(--shadow);
    }

    cursor: pointer;
    --size: 2rem;
    display: flex;
    max-width: 100%;
    height: var(--size);
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding-inline: 1rem;
    text-decoration-line: none;
    background-color: var(--background);
    color: var(--text, currentColor);
    border-style: none;
    scroll-margin: var(--padding, 0px);
    border-radius: calc(var(--rounded, 0.5rem) - var(--padding, 0px));
    font-size: 1rem;
    line-height: 1.5rem;
    box-shadow:
        inset 0 0 0 1px var(--border),
        inset 0 2px 0 var(--light),
        inset 0 -1px 0 var(--shadow),
        0 1px 1px var(--shadow);
    --outline-offset: 0;
    --outline: var(--color-primary);
    --depth: 1px;
    --padding-block: var(--depth);
    outline-width: 2px;
    outline-color: var(--outline);
    outline-offset: var(--outline-offset);
    user-select: none;
    white-space: nowrap;
    padding-block: var(--padding-block-start, var(--padding-block))
        var(--padding-block-end, var(--padding-block));
}
.cm-lint-tooltip .heading {
    margin-top: 0;
    margin-bottom: 0.25em;
    font-size: smaller;
}
.cm-lint-tooltip .heading.warning {
    color: #a26100;
}
.cm-lint-tooltip .heading.error {
    color: #900;
}
.cm-lint-tooltip .heading.accessibility-level-1 {
    color: #b42318;
}
.cm-lint-tooltip .heading.accessibility-level-2 {
    color: #6e3cbc;
}
.cm-lintRange.cm-doenet-accessibility-diagnostic {
    background-image: none !important;
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-thickness: 0.8px;
    text-underline-offset: 0.08em;
}

.cm-lintRange.cm-doenet-accessibility-diagnostic-level-1 {
    text-decoration-color: #b42318;
}

.cm-lintRange.cm-doenet-accessibility-diagnostic-level-2 {
    text-decoration-color: #6e3cbc;
}

.cm-tooltip-lint
    .cm-diagnostic.cm-diagnostic-warning:has(
        .cm-lint-tooltip .heading.accessibility-level-1
    ) {
    border-left-color: #b42318;
}

.cm-tooltip-lint
    .cm-diagnostic.cm-diagnostic-warning:has(
        .cm-lint-tooltip .heading.accessibility-level-2
    ) {
    border-left-color: #6e3cbc;
}

.cm-diagnostic {
    white-space: unset !important;
}
.cm-lint-body code {
    font-size: larger;
    white-space: pre-wrap;
    color: #d80085;
    padding: 0px 2px;
}
.cm-lint-body p {
    margin: 0.25em 0;
}
.cm-lint-body p:last-child {
    margin-bottom: 0;
}
.cm-lint-body p:first-child {
    margin-top: 0;
}
.editor-panel .help-panel {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.9rem;
    line-height: 1.5;
}

.editor-panel .help-panel-empty {
    color: #667085;
}

.editor-panel .help-placeholder {
    margin: 0;
    font-style: italic;
}

.editor-panel .help-placeholder code {
    background: var(--mainGray);
    /*
     * Help placeholder text inherits a muted color from `.help-panel-empty`
     * (#667085). On `var(--mainGray)` that yields ~3.5:1 — below WCAG 2 AA's
     * 4.5:1 minimum for normal text — and axe surfaces it when the panel
     * mounts open on help by default. Restore the canvas text color on the
     * code element so it sits on top of the gray chip with sufficient
     * contrast.
     */
    color: var(--canvasText);
    padding: 0 0.25rem;
    border-radius: 0.2rem;
    font-family: monospace;
    font-style: normal;
}

.editor-panel .help-title {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.editor-panel .help-element-name {
    font-family: monospace;
    font-weight: 600;
}

.editor-panel .help-attribute-name,
.editor-panel .help-property-name,
.editor-panel .help-snippet-name {
    font-family: monospace;
    color: var(--mainBlue);
}

.editor-panel .help-snippet-preview {
    margin: 0;
    padding: 0.5rem;
    background: var(--mainGray);
    border-radius: 0.25rem;
    font-family: monospace;
    font-size: 0.8rem;
    line-height: 1.4;
    overflow-x: auto;
    white-space: pre;
}

.editor-panel .help-kind-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #667085;
    letter-spacing: 0.5px;
}

.editor-panel .help-description {
    margin: 0;
}

.editor-panel .help-ref-sentence {
    margin: 0;
}

.editor-panel .help-description code,
.editor-panel .help-ref-sentence code {
    background: var(--mainGray);
    padding: 0 0.25rem;
    border-radius: 0.2rem;
    font-family: monospace;
    font-size: 0.85em;
}

.editor-panel .help-detail {
    display: flex;
    gap: 0.4rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.editor-panel .help-detail-label {
    font-weight: 500;
    color: #667085;
    flex-shrink: 0;
}

.editor-panel .help-detail-value {
    font-family: monospace;
    color: var(--mainBlue);
    word-break: break-word;
}

.editor-panel .help-values-list {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    align-items: center;
}

.editor-panel .help-value-item {
    background: var(--mainGray);
    border-radius: 0.2rem;
    padding: 0 0.3rem;
    font-family: monospace;
    font-size: 0.85rem;
}

/* Allowed-values row stacks label above the definition list. */
.editor-panel .help-allowed-values {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

/*
 * Two-column definition list: monospace value pill in column 1, description in
 * column 2. `margin: 0` overrides the browser default `<dl>` margin.
 */
.editor-panel .help-allowed-values-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 0.6rem;
    row-gap: 0.2rem;
    margin: 0;
    width: 100%;
}

.editor-panel .help-allowed-values-list dt {
    /* Inherits .help-value-item styling for the pill background. */
    align-self: start;
    justify-self: start;
}

.editor-panel .help-allowed-values-list dd {
    margin: 0;
    color: #344054;
    align-self: center;
}

.editor-panel .help-value-description code {
    background: var(--mainGray);
    padding: 0 0.25rem;
    border-radius: 0.2rem;
    font-family: monospace;
    font-size: 0.85em;
}

.editor-panel .help-docs-link {
    color: var(--mainBlue);
    text-decoration: none;
    width: fit-content;
}

.editor-panel .help-docs-link:hover,
.editor-panel .help-docs-link:focus {
    text-decoration: underline;
}
.variant-select {
    display: flex;
    margin-left: 0.5rem;

    * {
        box-sizing: border-box;
    }
    .button {
        --border: rgb(0 0 0/13%);
        --highlight: rgb(255 255 255/20%);
        --shadow: rgb(0 0 0/10%);
        display: flex;
        height: 2.5rem;
        user-select: none;
        align-items: center;
        gap: 0.25rem;
        white-space: nowrap;
        border-radius: 0.5rem;
        border-style: none;
        background-color: white;
        padding-left: 1rem;
        padding-right: 1rem;
        font-size: 1rem;
        line-height: 1.5rem;
        color: black;
        text-decoration-line: none;
        outline-width: 2px;
        outline-offset: 2px;
        outline-color: hsl(204 100% 40%);
        box-shadow:
            inset 0 0 0 1px var(--border),
            inset 0 2px 0 var(--highlight),
            inset 0 -1px 0 var(--shadow),
            0 1px 1px var(--shadow);
        justify-content: space-between;
    }

    .button:where(.dark, .dark *) {
        --border: rgb(255 255 255/10%);
        --highlight: rgb(255 255 255/5%);
        --shadow: rgb(0 0 0/25%);
        background-color: rgb(255 255 255 / 0.05);
        color: white;
        box-shadow:
            inset 0 0 0 1px var(--border),
            inset 0 -1px 0 1px var(--shadow),
            inset 0 1px 0 var(--highlight);
    }

    .button:not(:active):hover {
        --border: rgb(0 0 0/33%);
    }

    .button:where(.dark, .dark *):not(:active):hover {
        --border: rgb(255 255 255/25%);
    }

    .button[aria-disabled="true"] {
        opacity: 0.5;
    }

    .button[data-focus-visible] {
        outline-style: solid;
    }

    .button:active,
    .button[data-active] {
        padding-top: 0.125rem;
        box-shadow:
            inset 0 0 0 1px var(--border),
            inset 0 2px 0 var(--border);
    }

    @media (min-width: 640px) {
        .button {
            gap: 0.5rem;
        }
    }

    .button:active:where(.dark, .dark *),
    .button[data-active]:where(.dark, .dark *) {
        box-shadow:
            inset 0 0 0 1px var(--border),
            inset 0 1px 1px 1px var(--shadow);
    }

    .select-button {
        width: 12em;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        margin-right: 0;
    }
    .prev-next-button {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        margin-left: 0;
    }
    /* Make all .prev-next-button buttons except for the last one have zero border radius */
    .prev-next-button:not(:last-child) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .wrapper {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .popover {
        z-index: 50;
        display: flex;
        max-height: min(var(--popover-available-height, 300px), 300px);
        flex-direction: column;
        overflow: auto;
        overscroll-behavior: contain;
        border-radius: 0.5rem;
        border-width: 1px;
        border-style: solid;
        border-color: hsl(204 20% 88%);
        background-color: white;
        padding: 0.5rem;
        color: black;
        box-shadow:
            0 10px 15px -3px rgb(0 0 0 / 0.1),
            0 4px 6px -4px rgb(0 0 0 / 0.1);
        padding-top: 0px;
    }

    .popover:where(.dark, .dark *) {
        border-color: hsl(204 4% 24%);
        background-color: hsl(204 4% 16%);
        color: white;
        box-shadow:
            0 10px 15px -3px rgb(0 0 0 / 0.25),
            0 4px 6px -4px rgb(0 0 0 / 0.1);
    }

    .select-item {
        display: flex;
        cursor: default;
        scroll-margin: 0.5rem;
        align-items: center;
        gap: 0.5rem;
        border-radius: 0.25rem;
        padding: 0.5rem;
        outline: none !important;
        width: 100%;
        scroll-margin-top: 3.5rem;
    }

    .select-item[aria-disabled="true"] {
        opacity: 0.5;
    }

    .select-item[data-active-item] {
        background-color: hsl(204 100% 40%);
        color: white;
    }

    .combobox-wrapper {
        position: sticky;
        top: 0px;
        margin-bottom: 0.5rem;
        width: 100%;
        background-color: inherit;
        padding-top: 0.5rem;
        display: flex;
    }

    .combobox {
        height: 2.5rem;
        width: 100%;
        border-radius: 0.25rem;
        border-style: none;
        background-color: hsl(204 20% 94%);
        padding-left: 1rem;
        padding-right: 1rem;
        font-size: 1rem;
        line-height: 1.5rem;
        color: black;
    }

    .combobox:hover {
        background-color: hsl(204 20% 91%);
    }

    .popover:focus-visible,
    .popover[data-focus-visible],
    .combobox:focus-visible,
    .combobox[data-focus-visible] {
        outline: 2px solid hsl(204 100% 40%);
        outline-offset: -1px;
    }

    .combobox:where(.dark, .dark *) {
        background-color: hsl(204 4% 10%);
        color: white;
    }

    .combobox:hover:where(.dark, .dark *) {
        background-color: hsl(204 4% 8%);
    }
}
.editor-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.editor-panel .editor-and-collapsible-panel {
    flex-grow: 1;
    overflow: hidden;
}

.editor-panel .editor-footer {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    background-color: var(--mainGray);
}

.editor-panel .footer-menu-button {
    all: unset;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0 0.5rem;
    font-size: 1rem;

    &:hover {
        background-color: var(--lightBlue);
    }
    &:focus-visible {
        outline: 2px solid var(--mainBlue);
        outline-offset: -2px;
    }
}

/*
 * When the footer's right edge meets the virtual keyboard's open-keyboard
 * tab (showViewer={false} or viewerLocation in {"left","top"} with the
 * keyboard enabled), push the rightmost footer element inward so the icons
 * stay clickable. The reservation must match the keyboard tab's right-edge
 * footprint (`w-12` + `me-4` = 3rem + 1rem) defined in
 * `packages/virtual-keyboard/src/virtual-keyboard/keyboard-tray.css`. Keep
 * this value in sync if that footprint changes. Very narrow viewports may
 * still let the tab and the icons collide; that's accepted.
 */
.editor-panel .editor-footer.reserve-keyboard-button-space {
    --keyboard-tab-reserve-width: 4rem;
}
.editor-panel .editor-footer.reserve-keyboard-button-space .footer-menu-button {
    margin-right: var(--keyboard-tab-reserve-width);
}
.editor-panel
    .editor-footer.reserve-keyboard-button-space:not(:has(.footer-menu-button))
    .footer-icons {
    margin-right: var(--keyboard-tab-reserve-width);
}

.editor-panel .footer-menu {
    z-index: 50;
    background-color: white;
    border: 1px solid hsl(204 20% 88%);
    border-radius: 0.5rem;
    padding: 0.25rem;
    box-shadow:
        0 10px 15px -3px rgb(0 0 0 / 0.1),
        0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.editor-panel .footer-menu-item {
    display: block;
    padding: 0.4rem 0.75rem;
    cursor: pointer;
    border-radius: 0.25rem;
    font-size: 0.9rem;

    &[data-active-item] {
        background-color: var(--mainBlue);
        color: white;
    }
}

.editor-panel .doenetml-version {
    align-self: center;
    font-size: 0.8rem;
    padding: 0 0.75rem 0 0.5rem;
    min-width: 3.5rem;
    max-width: 5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.editor-panel .footer-icons {
    display: flex;
    flex-direction: row;
    align-items: stretch;

    button {
        all: unset;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        cursor: pointer;
        padding: 0.25rem 0.6rem;
        font-size: 0.9rem;

        &:hover {
            background-color: var(--lightBlue);
        }
        &:focus-visible {
            outline: 2px solid var(--mainBlue);
            outline-offset: -2px;
        }
    }
    /*
     * lightBlue on mainGray is ~1.2:1 contrast (well below WCAG 1.4.11's
     * 3:1 minimum for UI component state), so the background tint alone is
     * not a sufficient selected-state indicator. The inset box-shadow paints
     * a 3px mainBlue bottom edge that meets the contrast threshold and acts
     * as a non-color cue, while leaving the tab's flex height unchanged.
     */
    &.is-open button[aria-selected="true"] {
        background-color: var(--lightBlue);
        box-shadow: inset 0 -3px 0 var(--mainBlue);
    }
}

.editor-panel .footer-icons-group-gap {
    width: 1.25rem;
}

.editor-panel .diagnostic-tab-trigger {
    min-width: 3.2rem;
}

.editor-panel .diagnostic-tab-icon {
    display: inline-flex;
    font-size: 1rem;
}

.editor-panel .diagnostic-tab-icon.is-responses {
    color: #667085;
}

.editor-panel .diagnostic-tab-count {
    min-width: 1.5ch;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.editor-panel .diagnostic-tab-label {
    font-size: 0.9rem;
}

.editor-panel .diagnostic-tab-icon.is-help {
    font-size: 1.15rem;
}

.editor-panel .diagnostics-response-tabs-panels {
    flex-grow: 1;
    flex-basis: 0;
    overflow: auto;
}

.editor-panel .diagnostics-response-tabs-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0rem 0.4rem;
}

.editor-panel .diagnostic-panel {
    padding: 0.75rem 0.25rem 1rem;
}

.editor-panel .diagnostic-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.editor-panel .diagnostic-entry {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    line-height: 1.4;
}

.editor-panel .diagnostic-entry-icon {
    display: inline-flex;
    margin-top: 0.1rem;
    font-size: 1rem;
}

.editor-panel .diagnostic-tab-icon.is-error,
.editor-panel .diagnostic-entry-icon.is-error {
    color: #b42318;
}

.editor-panel .diagnostic-tab-icon.is-warning,
.editor-panel .diagnostic-entry-icon.is-warning {
    color: #c25a1a;
}

.editor-panel .diagnostic-tab-icon.is-info,
.editor-panel .diagnostic-entry-icon.is-info {
    color: #175cd3;
}

.editor-panel .diagnostic-tab-icon.is-accessibility-critical,
.editor-panel .diagnostic-entry-icon.is-accessibility-critical {
    color: #b42318;
}

.editor-panel .diagnostic-tab-icon.is-accessibility-advisory,
.editor-panel .diagnostic-entry-icon.is-accessibility-advisory {
    color: #6e3cbc;
}

.editor-panel .diagnostic-entry-location {
    font-weight: 600;
    margin-right: 0.35rem;
}

/* TODO: Add dark mode overrides for .diagnostic-entry-message code (background and color)
 * once dark mode is fully supported. See issue #966 (Complete dark mode). */
.editor-panel .diagnostic-entry-message code {
    font-family: monospace;
    background-color: #f5f5f5;
    color: #d80085;
    padding: 2px 4px;
    border-radius: 2px;
    white-space: pre-wrap;
}

.editor-panel .diagnostic-entry-message {
    display: inline;
}

.editor-panel .diagnostic-entry-message p {
    display: inline;
    margin: 0;
}

.editor-panel .diagnostic-editor-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.85rem;
    font-size: 0.9rem;
}

.editor-panel .diagnostic-editor-toggle input {
    margin: 0;
}

.editor-panel .accessibility-report {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.editor-panel .accessibility-report-section {
    border: 1px solid #d0d5dd;
    border-radius: 0.5rem;
    padding: 0.75rem;
    background: #fff;
}

.editor-panel .accessibility-report-heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.editor-panel .accessibility-report-heading h3 {
    margin: 0;
}

.editor-panel .accessibility-report-heading h3 a {
    color: inherit;
}

.editor-panel .accessibility-report-heading.critical {
    color: #b42318;
}

.editor-panel .accessibility-report-heading.advisory {
    color: #6e3cbc;
}

.viewer-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.viewer-panel .viewer-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.1rem 0.5rem;
    background-color: var(--mainGray);
    border-bottom: 1px solid #949494;
}

.viewer-panel .accessibility-status-button {
    all: unset;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    border-radius: 999px;
    padding: 0.35rem 0.75rem;
    font-weight: 600;

    &:focus-visible {
        outline: 2px solid var(--mainBlue);
        outline-offset: 2px;
    }
}

.viewer-panel .accessibility-status-button.has-level-1-issues {
    background: #fef3f2;
    color: #b42318;
    box-shadow: inset 0 0 0 1px #f04438;
}

.viewer-panel .accessibility-status-button.no-level-1-issues {
    background: #ecfdf3;
    color: #027a48;
    box-shadow: inset 0 0 0 1px #6ce9a6;
    font-weight: 500;
}

.viewer-panel .accessibility-status-button svg {
    font-size: 1rem;
}

.viewer-panel .viewer {
    flex-grow: 1;
    overflow: auto;
    background-color: var(--canvas);
}

.update-syntax-menu {
    z-index: 100;
}