body {
    font-size: 14pt;
}

p {
    display: flex;
    flex-wrap: wrap;
}

dialog {
    font-size: 14pt;
}
/* Base styles for all math content */
math {
    font-family: "Latin Modern Math", Cambria Math, serif; /* Good mathematical font choices */
    font-size: 1.1em; /* Slightly larger than body text for readability */
    line-height: 1.5; /* Can help with vertical spacing, especially for fractions */
    color: #333; /* Dark gray for good contrast */
    display: inline-block; /* Default for inline math, ensures consistent rendering */
    vertical-align: middle; /* Align inline math vertically with text */
    /* For block-level math, you'd use: */
    /* display: block; margin: 1em auto; text-align: center; */
}

    /* Ensure responsiveness for all math elements */
    /* This is particularly important for long equations on small screens */
    math[display="block"] {
        max-width: 100%;
        overflow-x: auto; /* Adds horizontal scrollbar if content overflows */
        padding-bottom: 0.5em; /* Prevent scrollbar from overlapping content */
    }

math .p-qti-error {
    font-size: 1.5em;
    color: red;
}

    math .p-qti-infocus {
        border: 2px solid red; 
    }

    math.p-qti-editbox {
        border: 2px solid #d1d5db; /* gray-300 - subtle border */
        border-radius: 0.75rem; /* rounded-xl - more rounded corners */
        min-width: 30em;
        padding-top: 3px;
        padding-bottom: 3px;
    }

/* Styling for specific MathML elements */
mi { /* Identifiers (variables, function names) */
    font-style: italic; /* Default for variables, can override if needed */
}

mn { /* Numbers */
    font-weight: normal; /* Numbers usually don't need bolding */
}

mo { /* Operators (+, -, =, etc.) */
    font-weight: bold;
}

mtext { /* Text within math (e.g., units, comments) */
    font-family: sans-serif; /* Use a readable sans-serif font for text */
    font-style: normal;
    color: #6c757d; /* Lighter color for annotations */
}

mo.p-qti-cursor {
    border: none;
    width: .2em;
    color: red;
    font-weight:lighter;
    z-index: 10;
}
mo.p-qti-cursor:focus {
    outline:none;
    font-weight: bold;
}

math msup.p-qti-cursor-highlight {
    color: red;
    font-weight: bold;
    border-color: red;
    border-style: dashed;
}

math .p-qti-selected,
table.p-qti-selected,
tr.p-qti-selected,
div.p-qti-output-table .p-qti-selected {
    background-color: yellow;
}

math .p-qti-template {
    font-family: Courier, monospace;
    font-weight: bold;
    color: gray;
    border: 2px dashed lightgrey;
    padding: 3px 3px 3px 3px;
}

math .p-qti-cursor-highlight {
    color: red;
    font-weight: bold;
    outline: red;
}
math .p-qti-cursor-highlight:focus {
    outline: red;
}

math .p-qti-cursor-highlight-block {
    color: black;
    font-weight: normal;
    outline: none;
}

img {
    max-width: 100%;
}
.p-qti-onscreen-keypad {
    width: fit-content;
    margin-top: 1em;
}
.p-qti-onscreen-keypad-key {
}

.p-qti-variable-name {
    font-family:Arial, Helvetica, sans-serif;
    font-style:oblique;
}

.p-qti-clickable {
    color: var(--blue);
    text-decoration: underline;
    text-decoration-color: var(--foreground);
}

.p-qti-tool-button.p-qti-disable {
    background-color: lightgray;
}

.p-qti-nonbutton:disabled,
.p-qti-nonbutton {
    border:none;
    background-color: inherit;
}

.p-qti-blank-key {
    background-color: lightgray;
}
.p-qti-close-button {
    background-image: url('/images/x-square.svg');
    background-repeat: no-repeat;
    background-size: contain;
    height: 2em;
    width: 2em;
    margin: .1em .1em .1em .1em;
    float: right;
}

.p-qti-columns {
    display: grid;
}

.p-qti-soft-break {
    display: block;
}

.p-qti-red-x {
    background-image: url('/images/red-x-circle.svg');
    background-repeat: no-repeat;
    background-size: contain;
    height: 1.5em;
    width: 1.5em;
    margin: .1em .1em .1em .1em;
}

.p-qti-add {
    background-image: url('/images/plus-square.svg');
    background-repeat: no-repeat;
    background-size: contain;
    height: 1.5em;
    width: 1.5em;
    margin: .1em .1em .1em .1em;
}

.p-qti-subtract {
    background-image: url('/images/minus-square.svg');
    background-repeat: no-repeat;
    background-size: contain;
    height: 1.5em;
    width: 1.5em;
    margin: .1em .1em .1em .1em;
}
.p-qti-multiply-button {
    background-image: url('/images/x.svg');
    background-repeat: no-repeat;
    background-size: contain;
    height: 1.5em;
    width: 1.5em;
    margin: .1em .1em .1em .1em;
}

.p-qti-divide-button {
    background-image: url('/images/divide.svg');
    background-repeat: no-repeat;
    background-size: contain;
    height: 1.5em;
    width: 1.5em;
    margin: .1em .1em .1em .1em;
}

.p-qti-enter-button {
    background-image: url('/images/corner-down-left.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-color: white;
    height: 2em;
    width: 2em;
    margin: .1em .1em .1em .1em;
    border: none;
}


.p-qti-green-check {
    background-image: url('/images/green-check-circle.svg');
    background-repeat: no-repeat;
    background-size: contain;
    height: 1.5em;
    width: 1.5em;
    margin: .1em .1em .1em .1em;
}

.p-qti-add-expression-button {
    background-image: url('/images/addExpression.svg');
    background-repeat: no-repeat;
    background-size: auto;
    height: 2em;
    width: 3em;
    margin: .1em .1em .1em .1em;
    border: none;
}
.p-qti-add-expression-button:disabled {
    background-color: grey;
    opacity: .5;

}

.p-qti-text-and-speak-button button, .p-qti-speak-button {
    background-image: url('/images/volume-2.svg');
    background-repeat: no-repeat;
    background-size: contain;
    height: 2em;
    width: 2em;
    margin: .1em .1em .1em .1em;
    background-color: white;
}

.p-qti-sign-button {
    background-image: url('/images/american-sign-language-interpreting.svg');
    background-repeat: no-repeat;
    background-size: contain;
    height: 2em;
    width: 2em;
    margin: .1em .1em .1em .1em;
    background-color: white;
}
.p-qti-braille-embossed-button {
    background-image: url('/images/printer.svg');
    background-repeat: no-repeat;
    background-size: contain;
    height: 2em;
    width: 2em;
    margin: .1em .1em .1em .1em;
    background-color: white;
}
.p-qti-calculator-button {
    background-image: url('/images/grid.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-color: white;
    height: 2em;
    width: 2em;
    margin: .1em .1em .1em .1em;
}

.p-qti-notepad-button {
    background-image: url('/images/file-text.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-color: white;
    height: 2em;
    width: 2em;
    margin: .1em .1em .1em .1em;
}

.p-qti-tool-button {
    background-color: white;
    height: 30px;
    width: 40px;
    margin: .1em .1em .1em .1em;
    border: none;
}
.p-qti-selecttool-button {
    background-image: url('/images/mouse-pointer.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-color: white;
    height: 2em;
    width: 2em;
    margin: .1em .1em .1em .1em;
    border: none;
}

.p-qti-trash-button {
    background-image: url('/images/trash-2.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-color: white;
    height: 2em;
    width: 2em;
    margin: .1em .1em .1em .1em;
    border: none;
}


.p-qti-delete-button {
    background-image: url('/images/delete.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-color: white;
    height: 2em;
    width: 2em;
    margin: .1em .1em .1em .1em;
    border: none;
}

.p-qti-rectangletool-button {
    background-image: url('/images/rectangletool.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-color: white;
    height: 2em;
    width: 2em;
    margin: .1em .1em .1em .1em;
    border: none;
}
.p-qti-arrowtool-button {
    background-image: url('/images/arrowtool.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-color: white;
    height: 2em;
    width: 2em;
    margin: .1em .1em .1em .1em;
    border: none;
}

    .p-qti-selecttool-button.p-qti-selected,
    .p-qti-tool-button.p-qti-selected {
        -webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
        -moz-box-shadow: inset 0px 0px 5px #c1c1c1;
        box-shadow: inset 0px 0px 5px #c1c1c1;
        outline: none;
    }

.p-qti-active {
    border: 2px solid black;
}

div.p-qti-numeric-keypad {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    width:fit-content;
    height: fit-content;
}

div.p-qti-number-display {
    min-height: 2.5rem;
    width: 100%;
    text-align: center;
    font-size: 2rem;
}

div.p-qti-object-repeater > div.p-qti-controls > button.p-qti-add,
div.p-qti-object-repeater > div.p-qti-controls > button.p-qti-subtract,
div.p-qti-object-repeater > div.p-qti-controls > button.p-qti-enter-button,
div.p-qti-numeric-keypad button.p-qti-numeric-keypad-key {
    width: 4rem;
    height: 4rem;
    border: 3px groove lightgrey;
    padding: 0px 0px 0px 0px;
    margin: auto;
    font-size: 2rem;
}

div.p-qti-object-repeater > div.p-qti-controls > button.p-qti-add:focus,
div.p-qti-object-repeater > div.p-qti-controls > button.p-qti-subtract:focus,
div.p-qti-object-repeater > div.p-qti-controls > button.p-qti-enter-button:focus,
div.p-qti-numeric-keypad button.p-qti-numeric-keypad-key:focus {
    border-color: goldenrod;
    border-width: 5px;
}

div.p-qti-object-repeater div.p-qti-display {
    position: relative;
    margin-top: 4em;
}

    .p-qti-context-menu-row {
        position: fixed;
        z-index: 100;
        display: inline-flex;
        flex-direction: row;
        margin: 0 0 0 0;
        padding: 0 0 0 0;
    }
.p-qti-context-menu-row li {
    list-style-type: none;
}

.p-qti-dialog {
    border: 1px solid black;
    background-color: white;
}
.p-qti-dialog-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
}


.p-qti-resize-handle {
    background: repeating-linear-gradient( 135deg, rgba(255,255,255,0) 0px, rgba(255,255,255,0) 4px, rgba(0,0,0,1) 6px );
    position: absolute;
    height: 15px;
    width: 15px;
    height: 15px;
    right: 0px;
    bottom: 0;
}

    .p-qti-resize-handle:focus, .p-qti-resize-handle:hover {
        cursor: nwse-resize;
    }

.p-qti-widget-title {
    width: 100%;
    height: 2em;
    background-color: lightgray;
    display: flex;
}
.p-qti-dialog-title {
    width: 100%;
    height: 2em;
    background-color: lightgray;
    display: block;
}
.p-qti-moveable {
    position: absolute;
    width: 30%;
    height: auto;
    z-index: 100;
    border: 2px solid grey;
    background-color: aliceblue;
}

.p-qti-dragging-span {
    background-image: url('/images/move.svg');
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    height: 2em;
    margin: 0px 0px 2px 2px;
    flex: 10;
}

.p-qti-moveable-display {
    position: relative;
    width: 100%;
    height: 80%;
}

.p-qti-fill-parent {
    height: 100%;
    width: 100%;
}

.p-qti-moveable-display .p-qti-fill-parent video {
    height: 100%;
}

.p-qti-text-and-speak-button {
    display: grid;
    grid-template-columns: 10fr 1fr;
}

.p-qti-waiter {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 99;
    background-color: rgba(0,0,0,.5);
    align-content: center;
    background-image: url(/Images/waiting.gif);
    background-size: 100px;
    background-repeat: no-repeat;
    background-position: center;
}
/* general presentation */
header.p-qti-stimulus-header {

}

div.p-qti-stimulus {
    height: calc(100vh - 40px);
    overflow:auto;
}

div.p-qti-item-container {
    height: calc(100vh - 40px);
    overflow: auto;
}

/*interactions*/

.p-qti-slider-interaction {
    display: grid;
    place-items: center;
    width: 100%;
    position: relative;
}

.p-qti-slider-interaction.p-qti-slider-vertical input[type=range] {
    appearance: slider-vertical;
    -webkit-appearance: slider-vertical;
    height: 250px;
    width: auto;
}

 div.p-qti-slider-interaction > div,
.p-qti-slider-interaction:first-child {
    width: 100%;
    position: relative;
    margin-top: 35px;
}

    div.p-qti-slider-interaction.p-qti-slider-vertical > div,
    .p-qti-slider-interaction.p-qti-slider-vertical:first-child {
       
        margin-top: 0px;
    }


    .p-qti-slider-interaction input[type=range] {
        -webkit-appearance: none; /* Override default CSS styles */
        appearance: none;
        width: 80%;
        height: 50px; /* Specified height */
        outline: none; /* Remove outline */
        opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
        -webkit-transition: .2s; /* 0.2 seconds transition on hover */
        transition: opacity .2s;
        margin-top: 0px;
        margin-bottom: 0px;
        padding: 0px 0px 0px 0px;
        padding-bottom: 0px;
        background: linear-gradient(.5turn,darkslategrey, white, darkslategrey);
    }
        .p-qti-slider-interaction input[type=range]::-webkit-slider-runnable-track {
            height: 100%;
            margin-top: 0px;
            margin-bottom: 0px;
        }
        .p-qti-slider-interaction input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none; /* Override default CSS styles */
            appearance: none;
            height: 100%;
            width: 15px;
            background-color: transparent;
            border-radius: 50%;
            border-left: 4px solid black;
            border-right: 3px solid darkslategrey;
            border-style: solid;
        }

        .p-qti-slider-interaction input[type=range]::-moz-range-thumb{
            appearance: none;
            height: 100%;
            width: 15px;
            background-color: transparent;
            border-radius: 50%;
            border: 1px solid #f50;
            border-style:double;
        }
        .p-qti-slider-interaction input[type=range]::-moz-range-track{
            background-color: yellow;
            height: 100%;
            margin-top: 0px;
            margin-bottom: 0px;
        }

        .p-qti-slider-interaction label {
            font-size: 25px;
            width: 10%;
            vertical-align: central;
        }
        .p-qti-slider-interaction.p-qti-slider-vertical .p-qti-slider-output {
            margin-top: 0px;
        }
        .p-qti-slider-interaction .p-qti-slider-output {
            border: none;
/*            height: 50px;
            width:  6em;
            border-radius: 50%;
*/            font-size: large;
            font-weight: bold;
/*            background-color: lightgray;
            text-align: center;
*/            position: absolute;
              width: min-content;
            margin-top: 5px;
        }
        .p-qti-slider-interaction .p-qti-slider-ticks {
            height: 80%;
            display:inline-flex;
            justify-content:space-evenly;
            position: absolute;
        }

.p-qti-graphic-interaction {
    margin:2em 2em 2em 2em;
}

.p-qti-graphic-interaction>svg {
    outline:groove;
}
.p-qti-graphic-interaction line.p-qti-added {
    color: red;
}

    .p-qti-graphic-interaction line.p-qti-added.p-qti-selected:focus,
    .p-qti-graphic-interaction line.p-qti-added.p-qti-selected {
        outline: none;
        marker-start: url('#dot1');
        marker-end: url('#dot1');
        stroke: black;
        stroke-width: 1;
    }

.p-qti-graphic-interaction marker.dot1 > circle:hover {
    cursor: nesw-resize;
}


.p-qti-graphic-interaction line.p-qti-arrow,
.p-qti-graphic-interaction line.p-qti-added.p-qti-arrow {
    marker-end: url('#arrow1');
}
    .p-qti-graphic-interaction line.p-qti-added.p-qti-arrow.p-qti-selected {
        outline: none;
        marker-start: url('#dot1');
        marker-end: url('#redarrow1');
    }


.p-qti-graphic-interaction svg line.p-qti-added.p-qti-arrow:focus {
    stroke-width: 1;
}
.p-qti-graphic-interaction svg line.p-qti-added.p-qti-arrow.p-qti-selected:focus {
    stroke-width: 1;
}


.p-qti-graphic-interaction svg line.p-qti-added:focus {
    outline: none;
    stroke-width: 5;
}
.p-qti-graphic-interaction polyline.p-qti-added.p-qti-selected {
    outline: none;
    marker-end: url('#dot1');
    marker-start: url('#dot1');
    marker-mid: url('#dot1');
}


.p-qti-graphic-interaction svg .p-qti-hotspot {
    fill: transparent;
    stroke: black;
}


.p-qti-graphic-interaction svg .p-qti-hotspot.p-qti-drop-ready {
    stroke: red;
    stroke-width: 3;
}

.p-qti-graphic-interaction svg image.p-qti-added.p-qti-selected {
    outline: 3px solid red;
}

.p-qti-graphic-interaction svg.p-qti-dot-cursor {
    cursor:url(#dot1);
}


@keyframes circleThrob {
    from {
        r: 5;
    }

    to {
        r: 15;
    }
}



.p-qti-graphic-interaction svg circle.p-qti-encircle {
    fill: red;
    stroke: red;
    stroke-width: 3px;
    animation-duration: .33s;
    animation-iteration-count: infinite;
    animation-name: circleThrob;
}

.p-qti-graphic-interaction qti-gap-img {
    display: flex;
    flex-direction: row;
    gap: 0.5em;
}

.p-qti-graphic-interaction qti-gap-img img {
    margin: 0.5em;
    border: 2px solid #ccc;
    border-radius: 4px;
    cursor: grab;
    transition: all 0.2s;
}

.p-qti-graphic-interaction qti-gap-img img:hover {
    border-color: #0066cc;
    transform: scale(1.05);
}

.p-qti-graphic-interaction qti-gap-img img:active {
    cursor: grabbing;
}

.p-qti-graphic-interaction .p-qti-drag-pallette,
.p-qti-graphic-interaction .p-qti-drag-palette {
    display: flex;
    flex-direction: row;
    gap: 0.5em;
    margin-top: 1em;
    padding: 0.5em;
    border: 2px dashed #ccc;
    border-radius: 4px;
    background: #f9f9f9;
}

/* Drag palette images */
.p-qti-graphic-interaction .p-qti-drag-pallette img,
.p-qti-graphic-interaction .p-qti-drag-palette img {
    margin: 0.5em;
    border: 2px solid #ccc;
    border-radius: 4px;
    cursor: grab;
    transition: all 0.2s;
}

.p-qti-graphic-interaction .p-qti-drag-pallette img:hover,
.p-qti-graphic-interaction .p-qti-drag-palette img:hover {
    border-color: #0066cc;
    transform: scale(1.05);
}

.p-qti-graphic-interaction .p-qti-drag-pallette img:active,
.p-qti-graphic-interaction .p-qti-drag-palette img:active {
    cursor: grabbing;
}

.p-qti-graphic-interaction .p-qti-prompt-container span.tq-image {
    display: inline-block;
    overflow: hidden;
}

.p-qti-graphic-interaction .p-qti-prompt-container span.tq-image img {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.p-qti-extended-text-interaction {
    margin: 1em 1em 1em 1em;
    width: 100%;
}

.p-qti-extended-text-interaction textarea{
    width: 90%;
    resize: none;
    overflow-y:auto;
}

.p-inline-entry {
    display: inline-block;
}


ol.p-qti-no-linefeed > li > label > span > span > div:nth-child(1) {
    display: inline;
    padding: 0px;
    margin: 0px;
    border: 0px;
}

.p-qti-universal-number-line-interaction .p-grab-region {
    cursor: grab;
    fill: transparent;
    pointer-events: all;
}
.p-qti-universal-number-line-interaction svg {
    width: 98%;
    padding: 5px 5px 5px 5px;
}
.p-qti-universal-number-line-interaction svg:focus {
    outline: none;
}

.p-qti-universal-number-line-interaction svg line.p-dragging-thumb-line {
    stroke: red;
}

.p-qti-rapid-decompose,
.p-qti-rapid-choice,
.p-qti-rapid-compare {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-content: center;
}
.p-qti-rapid-quantity {
    display: grid;
    justify-content: center;
}

.p-qti-shield {
    background-color: aqua;
    position: absolute;
    z-index: 5;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}

div.p-qti-rapid-decompose div.p-qti-quantity-stimulus,
div.p-qti-rapid-quantity div.p-qti-quantity-stimulus {
    display: grid;
    width: fit-content;
    height: fit-content;
}

div.p-qti-rapid-decompose div.p-qti-quantity-stimulus {
    text-align: center;
}

div.p-qti-rapid-compare div.p-qti-quantity-stimulus{
    display: flex;
    justify-content: center;
}
div.p-qti-rapid-quantity div.p-qti-quantity-stimulus > svg {
    margin: 10px;
}
div.p-qti-rapid-choice div.p-qti-response,
div.p-qti-rapid-quantity div.p-qti-response {
    display: grid;
    width: auto;
    height: fit-content;
}

div.p-qti-rapid-choice div.p-qti-quantity-stimulus > div {
    font-weight: bold;
    border: outset;
    text-align: center;
    height: fit-content;
    align-self: center;
}

 
div.p-qti-rapid-compare div.p-qti-quantity-stimulus > div,
div.p-qti-rapid-quantity div.p-qti-response > div {
    background-color: lightgray;
    font-weight: bold;
    border: outset;
    text-align: center;
    height: fit-content;
}
div.p-qti-rapid-choice div.p-qti-response > div,
div.p-qti-rapid-compare div.p-qti-quantity-stimulus > div {
    margin: 40px;
    padding-left: 15px;
    padding-right: 15px;
}

/* Simulation table empty row styling */
.p-qti-output-table tr.p-qti-output-table-row-empty {
    background-color: transparent;
    border: none;
}

.p-qti-output-table tr.p-qti-output-table-row-empty td {
    background-color: transparent;
    border: none;
    min-height: 1.5em;
    height: 1.5em;
}

/* ========== WCAG 2.1 AA Accessibility Enhancements ========== */

/* Visually hidden but accessible to screen readers */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* High contrast focus indicators for widgets */
.p-qti-range-widget:focus,
.p-qti-numeric-widget:focus,
.p-qti-select-widget:focus,
.p-qti-checkbox-widget:focus,
.p-qti-radio-widget-group input[type="radio"]:focus {
    outline: 3px solid #0078D4;
    outline-offset: 2px;
}

/* Focus indicators for dark mode */
@media (prefers-color-scheme: dark) {
    .p-qti-range-widget:focus,
    .p-qti-numeric-widget:focus,
    .p-qti-select-widget:focus,
    .p-qti-checkbox-widget:focus,
    .p-qti-radio-widget-group input[type="radio"]:focus {
        outline-color: #4CC2FF;
    }
}

/* Widget spacing for proper layout */
.p-qti-widget-wrapper {
    margin-bottom: 1rem;
}

/* Checkbox and radio spacing with minimum touch target size */
.p-qti-checkbox-wrapper,
.p-qti-radio-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
}

/* Delete button minimum touch target size */
.p-qti-delete-row-button {
    min-width: 44px;
    min-height: 44px;
}

/* Fieldset styling for radio groups */
.p-qti-radio-fieldset {
    border: 1px solid #ccc;
    padding: 0.5rem;
    margin-bottom: 1rem;
}

.p-qti-radio-fieldset legend {
    padding: 0 0.5rem;
    font-weight: bold;
}

/* Radio orientation: vertical (default) */
.p-qti-radio-widget-group.p-qti-radio-vertical {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Radio orientation: horizontal with wrapping */
.p-qti-radio-widget-group.p-qti-radio-horizontal {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

/* Button-style radio (hide input circles) */
.p-qti-radio-widget-group.p-qti-radio-hide-input input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.p-qti-radio-widget-group.p-qti-radio-hide-input .p-qti-radio-option {
    margin: 0;
}

.p-qti-radio-widget-group.p-qti-radio-hide-input label {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: 2px solid #ccc;
    border-radius: 0.375rem;
    background-color: #f9fafb;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.p-qti-radio-widget-group.p-qti-radio-hide-input label:hover {
    background-color: #f3f4f6;
    border-color: #9ca3af;
}

/* Selected (depressed) state for button-style radio */
.p-qti-radio-widget-group.p-qti-radio-hide-input input[type="radio"]:checked + label {
    background-color: #2563eb;
    border-color: #1d4ed8;
    color: white;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
    transform: translateY(1px);
}

/* Focus state for button-style radio */
.p-qti-radio-widget-group.p-qti-radio-hide-input input[type="radio"]:focus + label {
    outline: 3px solid #0078D4;
    outline-offset: 2px;
}

/* Dark mode support for button-style radio */
@media (prefers-color-scheme: dark) {
    .p-qti-radio-widget-group.p-qti-radio-hide-input label {
        background-color: #374151;
        border-color: #4b5563;
        color: #f9fafb;
    }

    .p-qti-radio-widget-group.p-qti-radio-hide-input label:hover {
        background-color: #4b5563;
        border-color: #6b7280;
    }

    .p-qti-radio-widget-group.p-qti-radio-hide-input input[type="radio"]:checked + label {
        background-color: #3b82f6;
        border-color: #2563eb;
        color: white;
    }

    .p-qti-radio-widget-group.p-qti-radio-hide-input input[type="radio"]:focus + label {
        outline-color: #4CC2FF;
    }
}

/* Button-style checkbox (hide input squares) */
.p-qti-checkbox-wrapper.p-qti-checkbox-hide-input input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.p-qti-checkbox-wrapper.p-qti-checkbox-hide-input label {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: 2px solid #ccc;
    border-radius: 0.375rem;
    background-color: #f9fafb;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.p-qti-checkbox-wrapper.p-qti-checkbox-hide-input label:hover {
    background-color: #f3f4f6;
    border-color: #9ca3af;
}

/* Checked state - shows as pressed/selected button */
.p-qti-checkbox-wrapper.p-qti-checkbox-hide-input input[type="checkbox"]:checked + label {
    background-color: #2563eb;
    border-color: #1d4ed8;
    color: white;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
    transform: translateY(1px);
}

/* Focus state for accessibility */
.p-qti-checkbox-wrapper.p-qti-checkbox-hide-input input[type="checkbox"]:focus + label {
    outline: 3px solid #0078D4;
    outline-offset: 2px;
}

/* Dark mode support for button-style checkbox */
@media (prefers-color-scheme: dark) {
    .p-qti-checkbox-wrapper.p-qti-checkbox-hide-input label {
        background-color: #374151;
        border-color: #4b5563;
        color: #f9fafb;
    }

    .p-qti-checkbox-wrapper.p-qti-checkbox-hide-input label:hover {
        background-color: #4b5563;
        border-color: #6b7280;
    }

    .p-qti-checkbox-wrapper.p-qti-checkbox-hide-input input[type="checkbox"]:checked + label {
        background-color: #3b82f6;
        border-color: #2563eb;
        color: white;
    }

    .p-qti-checkbox-wrapper.p-qti-checkbox-hide-input input[type="checkbox"]:focus + label {
        outline-color: #4CC2FF;
    }
}

/* Checkbox images - consistent sizing */
.p-qti-checkbox-wrapper.p-qti-checkbox-hide-input label img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

/* ========== Additional WCAG 2.1 AA Compliance Utilities ========== */

/* Screen reader only class (alias for .visually-hidden) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* General focus indicators for all interactive elements (WCAG 2.1 AA: 3:1 contrast) */
*:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(0, 95, 204, 0.2);
}

/* Touch targets for buttons within StandardInteractions only (WCAG 2.5.5: min 44x44px) */
[class*="p-qti-"] button,
[class*="p-qti-"] input[type="button"],
[class*="p-qti-"] input[type="submit"],
[class*="p-qti-"] input[type="reset"] {
    min-height: 44px;
    min-width: 44px;
/*    padding: 8px 16px;
*/}

[class*="p-qti-"] input[type="checkbox"],
[class*="p-qti-"] input[type="radio"] {
    width: 24px;
    height: 24px;
    margin: 10px; /* Creates 44x44 target with label */
}

/* Invalid state styling for form fields */
input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"] {
    border-color: #d32f2f;
    background-color: #ffebee;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    *:focus-visible {
        outline-width: 4px;
        outline-offset: 3px;
    }
}

/* Reduced motion support */
/*@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}
*/
/* Dark mode support for form inputs */
@media (prefers-color-scheme: dark) {
    input, select, textarea {
        background-color: #1e1e1e;
        color: #ffffff;
        border-color: #666;
    }

    input[aria-invalid="true"],
    textarea[aria-invalid="true"],
    select[aria-invalid="true"] {
        border-color: #f44336;
        background-color: #5c1a1a;
    }
}

/* ========== Interaction-Specific WCAG Styles ========== */

/* TextEntry wrapper and label styling */
.p-qti-text-entry-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.p-qti-text-entry-wrapper label {
    font-weight: 500;
}

.p-qti-text-entry-wrapper input {
    font-size: 1rem;
    padding: 0.5rem 0.5rem 0 0.5rem;
    margin-bottom: 0;
}

/* InlineChoice wrapper and label styling */
.p-qti-inline-choice-wrapper {
    display: inline-block;
    vertical-align: baseline;
}

.p-qti-inline-choice-wrapper .p-qti-custom-select {
    font-size: 1rem;
    margin-bottom: 0;
    width: auto;
}

.p-qti-inline-choice-wrapper .p-qti-custom-select-value img,
.p-qti-inline-choice-wrapper .p-qti-custom-select-option img {
    max-height: none;
    max-width: 100%;
    height: auto;
}

/* ExtendedText wrapper and character counter */
.p-qti-extended-text-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.p-qti-extended-text-wrapper label {
    font-weight: 500;
}

.p-qti-extended-text-wrapper textarea {
    font-size: 1rem;
    padding: 0.5rem;
    font-family: inherit;
}

.p-qti-character-counter {
    font-size: 0.875rem;
    color: #666;
    text-align: right;
}

@media (prefers-color-scheme: dark) {
    .p-qti-character-counter {
        color: #aaa;
    }
}

/* Choice fieldset styling */
.p-qti-choice-fieldset {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.p-qti-choice-fieldset legend {
    padding: 0 0.5rem;
    font-weight: 600;
    font-size: 1.1rem;
}

.p-qti-choice-fieldset ol {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0 0;
}

.p-qti-choice-fieldset li {
    padding: 0.5rem 0;
}

.p-qti-choice-fieldset label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
}

.p-qti-choice-fieldset input[type="radio"],
.p-qti-choice-fieldset input[type="checkbox"] {
    cursor: pointer;
}

/* Slider wrapper styling */
.p-qti-slider-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.p-qti-slider-wrapper label {
    font-weight: 500;
}

.p-qti-slider-output {
    font-weight: 600;
    font-size: 1.1rem;
    color: #005fcc;
    padding: 0.25rem 0.5rem;
    background-color: #e3f2fd;
    border-radius: 4px;
    display: inline-block;
    min-width: 3em;
    text-align: center;
}

@media (prefers-color-scheme: dark) {
    .p-qti-slider-output {
        color: #4CC2FF;
        background-color: #1a3a52;
    }
}

/* Match interaction wrapper and grid */
.p-qti-match-wrapper {
    margin-bottom: 1rem;
}

.p-qti-match-wrapper table {
    border-collapse: collapse;
    width: 100%;
    margin-top: 1rem;
}

.p-qti-match-wrapper caption {
    font-weight: 600;
    font-size: 1.1rem;
    text-align: left;
    padding: 0.5rem 0;
    caption-side: top;
}

.p-qti-match-wrapper th,
.p-qti-match-wrapper td {
    border: 1px solid #ccc;
    padding: 0.75rem;
    text-align: center;
}

.p-qti-match-wrapper th {
    background-color: #f5f5f5;
    font-weight: 600;
}

.p-qti-match-wrapper td.p-qti-active {
    outline: 3px solid #005fcc;
    outline-offset: -3px;
    background-color: #e3f2fd;
}

.p-qti-match-wrapper td input[type="checkbox"] {
    margin: 0;
}

@media (prefers-color-scheme: dark) {
    .p-qti-match-wrapper th {
        background-color: #2a2a2a;
    }

    .p-qti-match-wrapper td.p-qti-active {
        outline-color: #4CC2FF;
        background-color: #1a3a52;
    }
}

/* Hide table visually but keep accessible to screen readers */
.p-qti-hidden-visually {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Checkbox wrapper for hide table option */
.p-qti-hide-table-wrapper {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.p-qti-hide-table-checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.p-qti-hide-table-label {
    cursor: pointer;
    user-select: none;
}

/* Rendered HTML labels in widgets */
.p-qti-widget-wrapper label,
.p-qti-radio-fieldset legend,
.p-qti-checkbox-wrapper label {
    display: block;
}

/* Rendered HTML labels in tables */
.p-qti-output-table th {
    vertical-align: top;
}

    /* Image sizing in labels */
    .p-qti-widget-wrapper label img,
    .p-qti-radio-fieldset legend img,
    .p-qti-checkbox-wrapper label img,
    .p-qti-output-table th img {
        max-width: 100%;
        height: auto;
        vertical-align: middle;
    }

/* Radio button images - consistent sizing based on tallest image */
.p-qti-radio-widget-group.p-qti-radio-hide-input label img {
    width: var(--radio-image-size, auto);
    height: var(--radio-image-size, auto);
    max-width: var(--radio-image-size, 100%);
    max-height: var(--radio-image-size, 100%);
    object-fit: contain;
    display: block;
}

/* ========== CUSTOM SELECT WIDGET (Rich-Text Support) ========== */

.p-qti-custom-select {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 400px;
}

.p-qti-custom-select-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
    padding: 0.5rem;
    font-size: 1rem;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    text-align: left;
}

.p-qti-custom-select-button:hover {
    border-color: #999;
}

.p-qti-custom-select-button:focus {
    outline: 3px solid #0078D4;
    outline-offset: 2px;
}

.p-qti-custom-select-button[aria-expanded="true"] {
    border-color: #0078D4;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.p-qti-custom-select-value {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.p-qti-custom-select-value img {
    max-height: 1.5rem;
    vertical-align: middle;
}

.p-qti-custom-select-arrow {
    margin-left: 0.5rem;
    font-size: 0.75rem;
    color: #666;
    transition: transform 0.2s;
}

.p-qti-custom-select-button[aria-expanded="true"] .p-qti-custom-select-arrow {
    transform: rotate(180deg);
}

.p-qti-custom-select-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    max-height: 300px;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
    background: white;
    border: 1px solid #0078D4;
    border-top: none;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.p-qti-custom-select-option {
    min-height: 44px;
    padding: 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.p-qti-custom-select-option:hover,
.p-qti-custom-select-option.p-qti-focused {
    background-color: #f0f0f0;
}

.p-qti-custom-select-option[aria-selected="true"] {
    background-color: #e3f2fd;
    font-weight: bold;
}

.p-qti-custom-select-option[aria-selected="true"]::before {
    content: '? ';
    margin-right: 0.5rem;
    color: #0078D4;
}

.p-qti-custom-select-option img {
    max-height: 2rem;
    vertical-align: middle;
    margin-right: 0.5rem;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .p-qti-custom-select-button {
        background: #2a2a2a;
        border-color: #555;
        color: #e0e0e0;
    }

    .p-qti-custom-select-button:focus {
        outline-color: #4CC2FF;
    }

    .p-qti-custom-select-dropdown {
        background: #2a2a2a;
        border-color: #4CC2FF;
    }

    .p-qti-custom-select-option:hover,
    .p-qti-custom-select-option.p-qti-focused {
        background-color: #3a3a3a;
    }

    .p-qti-custom-select-option[aria-selected="true"] {
        background-color: #1a3a52;
    }
}

/* Disabled state */
.p-qti-custom-select-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* BabySim Prompt Container (Player) */
.p-qti-prompt-container {
    margin-bottom: 1.5rem;
    padding: 1rem;
    font-size: 1rem;
    line-height: 1.5;
}

.p-qti-prompt-container img {
    max-width: 100%;
    height: auto;
}

.p-qti-prompt-container p {
    margin: 0 0 0.5rem 0;
}

.p-qti-prompt-container p:last-child {
    margin-bottom: 0;
}

/* ========== GO BUTTON STYLING ========== */

.p-qti-go-button {
    background-color: #22c55e;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 0.5rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.p-qti-go-button:hover {
    background-color: #16a34a;
}

.p-qti-go-button:focus {
    outline: 3px solid #0078D4;
    outline-offset: 2px;
}

.p-qti-go-button:disabled {
    background-color: #9ca3af;
    cursor: not-allowed;
}

/* ========== HORIZONTAL WIDGET LAYOUT ========== */

/* Horizontal widget layout */
.p-qti-widget-container.p-qti-widgets-horizontal {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
}

.p-qti-widget-container.p-qti-widgets-horizontal .p-qti-widget-wrapper {
    margin-bottom: 0;
    flex: 0 1 auto;
}

/* Go button on its own line in horizontal layout */
.p-qti-widget-container.p-qti-widgets-horizontal .p-qti-go-button {
    flex-basis: 100%;
    width: auto;
    align-self: flex-start;
}

/* ========== LINE READER ========== */

.p-qti-line-reader-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 50;
    display: flex;
    flex-direction: column;
}

.p-qti-line-reader-shade-top,
.p-qti-line-reader-shade-bottom {
    background-color: rgba(0, 0, 0, 0.4);
    pointer-events: none;
}

.p-qti-line-reader-band {
    height: 2em;
    cursor: grab;
    pointer-events: auto;
    border: 2px solid;
    background-color: transparent;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 4px;
}

.p-qti-line-reader-band:focus {
    outline: 3px solid #0078D4;
    outline-offset: -2px;
}

.p-qti-line-reader-band .p-qti-close-button {
    pointer-events: auto;
}

.p-qti-line-reader-button {
    background-image: url('/images/align-left.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-color: white;
    height: 2em;
    width: 2em;
    margin: .1em .1em .1em .1em;
}

/* ========== NOTEPAD ========== */

.p-qti-notepad-textarea {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    resize: none;
    border: none;
    padding: 8px;
    font-size: 14px;
    font-family: sans-serif;
    box-sizing: border-box;
}

.p-qti-notepad-textarea:focus {
    outline: 3px solid #0078D4;
    outline-offset: -3px;
}

.p-qti-notepad-status {
    position: absolute;
    bottom: 4px;
    right: 8px;
    font-size: 12px;
    color: #555;
    pointer-events: none;
}

/* ========== CALCULATOR ========== */

.p-qti-calc-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 4px;
    padding: 4px;
}

.p-qti-calc-equations {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.p-qti-calc-eq-row {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 36px;
}

.p-qti-calc-color-swatch {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.p-qti-calc-eq-editor {
    flex: 1;
    min-width: 0;
}

.p-qti-calc-result {
    font-family: monospace;
    font-size: 14px;
    color: #333;
    padding: 0 4px;
    white-space: nowrap;
}

.p-qti-calc-graph {
    flex: 1;
    min-height: 200px;
    border-top: 1px solid #ccc;
}

.p-qti-calc-graph-canvas {
    width: 100%;
    height: 100%;
    cursor: grab;
}

.p-qti-calc-controls {
    display: flex;
    gap: 4px;
    padding: 2px 0;
}

.p-qti-calc-key {
    font-size: 14px;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    background-color: #f8f8f8;
}

.p-qti-calc-key:hover {
    background-color: #e0e0e0;
}

.p-qti-calc-key:focus {
    outline: 3px solid #0078D4;
    outline-offset: 1px;
}

.p-qti-calc-key-equals {
    background-color: #4285f4;
    color: white;
    border-color: #3367d6;
}

.p-qti-calc-key-equals:hover {
    background-color: #3367d6;
}

.p-qti-calc-range {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 2px 0;
    flex-wrap: wrap;
}

.p-qti-calc-range label {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 12px;
    color: #333;
}

.p-qti-calc-range-input {
    width: 60px;
    padding: 2px 4px;
    font-size: 12px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.p-qti-calc-range-input:focus {
    outline: 3px solid #0078D4;
    outline-offset: 0;
}

/* ========== TOOL BUTTONS (RULER, PROTRACTOR, DICTIONARY, THESAURUS) ========== */

.p-qti-ruler-button {
    background-image: url('/images/minus.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-color: white;
    height: 2em;
    width: 2em;
    margin: .1em .1em .1em .1em;
}

.p-qti-protractor-button {
    background-image: url('/images/activity.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-color: white;
    height: 2em;
    width: 2em;
    margin: .1em .1em .1em .1em;
}

.p-qti-dictionary-button {
    background-image: url('/images/book-open.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-color: white;
    height: 2em;
    width: 2em;
    margin: .1em .1em .1em .1em;
}

.p-qti-thesaurus-button {
    background-image: url('/images/book.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-color: white;
    height: 2em;
    width: 2em;
    margin: .1em .1em .1em .1em;
}

/* ========== TOOL CANVAS (RULER & PROTRACTOR) ========== */

.p-qti-tool-wrapper {
    position: fixed;
    z-index: 9000;
    cursor: grab;
}

.p-qti-tool-canvas {
    display: block;
    pointer-events: none;
}

.p-qti-tool-close {
    position: absolute;
    top: -8px;
    right: -8px;
    z-index: 2;
    pointer-events: auto;
}

.p-qti-rotate-handle {
    position: absolute;
    bottom: -22px;
    right: -22px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: transparent;
    border: none;
    cursor: grab;
    z-index: 1;
    pointer-events: auto;
}

.p-qti-rotate-handle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #4285f4;
    border: 2px solid white;
}

.p-qti-rotate-handle:hover::after {
    background-color: #3367d6;
}

.p-qti-rotate-handle:focus {
    outline: 3px solid #0078D4;
    outline-offset: 1px;
}

.p-qti-ruler-container,
.p-qti-protractor-container {
    transform-origin: center center;
    cursor: grab;
}

/* ========== DICTIONARY & THESAURUS ========== */

.p-qti-dictionary-container,
.p-qti-thesaurus-container {
    padding: 16px;
    font-size: 14px;
    color: #555;
}