* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

}

*:disabled, .cpq-option[aria-disabled="true"], .figure[aria-disabled="true"] {
    pointer-events: none;
}

[contenteditable] {
    user-select: text;
    -moz-user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
    -o-user-select: text;
}

[hidden] {
    display: none !important;
}

b {
    font-weight: bold;
}

body, form, input, button, select, textarea, optgroup, option, fieldset, table, tr, td, img {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    background-color: inherit;
    color: inherit;
}

html {
    overflow: hidden;
    block-size: 100%;
    font-family: "DM Sans", "Noto Sans", sans-serif !important;
    text-rendering: optimizeLegibility;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    -webkit-font-smoothing: antialiased;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

textarea, input[type=text], input[type=list], input[type=number] {
    user-select: text;
    -moz-user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
    -o-user-select: text;
}

html, body, input, button, select, option, textarea {
    vertical-align: top;
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: stretch;
    overflow: hidden;
    block-size: 100%;
    inline-size: 100%
}

input, button, select, option, textarea {
    padding-block-start: 4px;
    padding-block-end: 4px;
    padding-inline-start: 8px;
    padding-inline-end: 8px;
    touch-action: manipulation;
    outline: none;
}

table {
    border-style: double;
    border-color: /*blue70*/#1d5bbf;
    border-width: 3px;
    padding: 0;
    margin-block-start: 0;
    margin-block-end: 16px;
    margin-inline-start: 0;
    margin-inline-end: 0;
    border-collapse: collapse;
    table-layout: auto;

}

thead th {
    text-align: center;
}

th {
    font-weight: bold;
    border: 1.5px solid /*blue70*/#1d5bbf;
    padding: 16px;
    vertical-align: top;
}

td {
    border: 1.5px solid /*blue70*/#1d5bbf;
    padding: 16px;
    overflow: auto;
}

::-moz-focus-inner {
    border: 0 !important;
    padding: 0 !important;
}

svg {
    block-size: 1em;
    inline-size: 1em;
    display: inline-block;
    margin: 0;
}

p {
    margin-block-start: 0;
    margin-block-end: 8px;
    margin-inline-start: 0;
    margin-inline-end: 0;
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

.choose-instructions {
    margin-block-end: 32px;
    text-align: start;
}

.debug-log {
    color: darkblue;
}

.error-log {
    color: darkred;
}

.worker-log {
    color: darkgreen;
}

#content {
    overflow-x: auto;
    overflow-y: hidden;
    flex:1;
    color:white;
}

.transparent-border-focus:focus {
    border-color: transparent;
}

.content-panel {
    display: flex;
    flex-flow: column;
    align-items: stretch;
    align-content: stretch;
    overflow: hidden;
    block-size: 100%; /* okay because parent is not a flex container */
    /*min-inline-size: min-content;*/
}

.login-panel {
    text-align: start;
    border-radius: 4px;
    display: flex;
    flex-flow: column;
    align-items: stretch;
    flex: 0 0 auto;
    overflow: hidden;
    border: none;
    inline-size: 100%;
    max-inline-size: 42rem;
}

.login-risr-box {
    inline-size: 100%;
    text-align: start;
}

.login-risr-logo {
    block-size: 2.5rem;
    padding: 0;
    margin: 1rem;
    object-fit: contain;
}

.login-logo-panel {
    flex: 0 0 auto;
    text-align: center;
    padding: 0;
}

.client-logo {
    max-inline-size: 9rem;
    max-block-size: 8rem;
    object-fit: contain;
    display: none;
}

@media (max-width: 42rem) {
    .login-body-box {
        display: flex;
        flex-flow: column;
        align-items: stretch;
        justify-content: stretch;
        border-radius: 0 0 2px 2px;
        padding: 1rem;
    }

    .client-logo {
        padding: 0;
    }

    .login-logo-panel {
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: auto;
        margin-inline-end: auto;
    }
}

@media (min-width: 42rem) {
    .login-body-box {
        display: flex;
        flex-flow: row;
        align-items: flex-start;
        border-radius: 0 0 2px 2px;
        padding: 1rem;
    }

    .client-logo {
        margin-inline-start: 0;
        margin-inline-end: 1rem;
        padding: 0;
    }

    .login-logo-panel {
        margin-block-start: auto;
        margin-block-end: auto;
        margin-inline-start: 0;
        margin-inline-end: 0;
    }

}

.login-text-group {
    flex: 1;
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    background: none;
}

.login-header > h1 {
    font-size: 1.32rem;
    font-weight: bold;
    margin-block-start: 0;
    margin-block-end: 2rem;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-block-start: 1rem;
    padding-block-end: 0;
    padding-inline-start: 0;
    padding-inline-end: 0;
}

.login-label {
    inline-size: 100%;
    display: flex;
    flex-direction: column;
}

.login-label > :not(:last-child) {
    margin-block-end: 0.33rem !important;
}

.login-field {
    flex-grow: 1;
    border-style: solid;
    border-radius: 2px;
    border-width: 1.5px;
    margin-block-end: 1rem;
    padding: 0.64rem;
    inline-size: 100%;
}

.login-error {
    margin-block-start: 0;
    margin-block-end: 1rem;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding: 1rem;
    inline-size: 100%;
    border-radius: 2px;
    border-style: solid;
    border-width: 1.5px;
}

input[type="button"].login-button {
    border-width: 2px;
    margin-block-start: 0;
    margin-block-end: 1rem;
    margin-inline-start: 0;
    margin-inline-end: 0;
    font-size: 1.125rem;
    padding-block-start: 0.8rem;
    padding-block-end: 0.8rem;
    padding-inline-start: 1.6rem;
    padding-inline-end: 1.6rem;
    min-block-size: 48px;
    min-inline-size: 48px;
}

.login-buttons {
    inline-size: 100%;
    padding: 0;
    display: flex;
    flex-flow: row wrap;
    align-content: center;
    justify-content: flex-start;
    margin-block-start: 1rem;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
}

.login-buttons > :not(:last-child) {
    margin-inline-end: 1rem !important;
}

.login-footer {
    margin-block-start: 1rem;
    margin-block-end: 1rem;
    margin-inline-start: 0;
    margin-inline-end: 0;
}

.app-bar {
    background-color: black;
    color: white;
    margin: 0;
    padding-block-start: 0;
    padding-block-end: 0;
    padding-inline-start: 8px;
    padding-inline-end: 8px;
    display: flex;
    flex: 0 0 auto;
    justify-content: space-between;
}

.app-space {
    flex: 1 0 0px;
}

.tool-bar-vbox {
    display: flex;
    flex-flow: column;
    align-items: stretch;
    justify-content: flex-start;
}

.tool-bar-hbox {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
    justify-content: flex-start;
}

.status-bar {
    padding-block-start: 0;
    padding-block-end: 0;
    padding-inline-start: 1px;
    padding-inline-end: 1px;
    margin: 0;
    display: inline-flex;
    flex-flow: row wrap;
    align-items: center;
    overflow-x: visible;
    flex: 0 0 auto;
}

.message-container {
    position: relative;
}

.message-hidden {
    display: none;
}

.message-warning {
    background-color: /*amber400*/#ffca28;
    color: black;
    padding-block-start: 8px;
    padding-block-end: 8px;
    padding-inline-start: 16px;
    padding-inline-end: 16px;
    margin: 0;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
}

.sub-control {
    padding-block-start: 0;
    padding-block-end: 0;
    padding-inline-start: 0;
    padding-inline-end: 2px;
    margin: 0;
    display: flex;
    flex-flow: column;
    align-items: stretch;
    justify-content: flex-start;
}

.sub-control-bar {
    padding: 0;
    margin: 0;
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
    justify-content: flex-start;
    inline-size: 100%;
}

.device-bar {
    margin-block-start: 16px;
    margin-block-end: 0;
    margin-inline-start: 2px;
    margin-inline-end: 2px;
    padding-block-start: 0;
    padding-block-end: 0;
    padding-inline-start: 8px;
    padding-inline-end: 8px;
    inline-size: 100%;
    font-size: 12px;
}

.meeting-bar {
    padding-block-start: 0;
    padding-block-end: 0;
    padding-inline-start: 0;
    padding-inline-end: 2px;
    margin: 0;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    inline-size: 100%;
    overflow-x: auto;
}

.meeting-bar[hidden="true"] {
    display: none;
}

.vsize-grip {
    border-block-start: 1px solid white;
    border-block-end: 1px solid white;
    block-size: 5px;
    margin-block-end: 2px;
    display: block;
    cursor: ns-resize;
}

.vsize-grip[hidden="true"] {
    display: none;
}

.video-tile {
    margin-block-start: 0;
    margin-block-end: 2px;
    margin-inline-start: 2px;
    margin-inline-end: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    flex: 0 1;
}

.video-tile-fullscreen {
    margin-block-start: 0;
    margin-block-end: 2px;
    margin-inline-start: 2px;
    margin-inline-end: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    background: black;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    color: white;
}

.video-element {
    background: black;
    object-fit: contain;
    flex: 1 1 auto;
}

.video-caption {
    text-align: center;
    font-size: 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-block-start: 2px;
    padding-block-end: 2px;
    padding-inline-start: 2px;
    padding-inline-end: 0;
    flex: 0 0 auto;
}

.call-timer-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.call-timer {
    padding-inline-start: 8px;
    padding-inline-end: 8px;
    padding-block-start: 8px;
    padding-block-end: 0;
    /*font-size: 16px;*/
    text-align: center;
}

.call-timer-caption {
    padding-block-start: 4px;
    padding-block-end: 8px;
    padding-inline-start: 8px;
    padding-inline-end: 8px;
    font-size: 12px;
    text-align: center;
}

.notes-bar {
    padding-block-start: 0;
    padding-block-end: 2px;
    padding-inline-start: 0;
    padding-inline-end: 0;
    margin: 0;
    display: block;
    flex-direction: column;
}

.notes-bar[hidden] {
    display: none;
}

.notes-text {
    padding: 0;
    margin-block-start: 8px;
    margin-block-end: 8px;
    margin-inline-start: 16px;
    margin-inline-end: 16px;
    border-width: 1.5px;
    border-style: solid;
    border-radius: 3px;
    text-align: start;
    resize: none;
    display: block;
}

.pell {
    box-sizing: border-box;
}

.pell-content {
    padding-block-start: 0;
    padding-block-end: 0;
    padding-inline-start: 4px;
    padding-inline-end: 4px;
    box-sizing: border-box;
    outline: 0;
    overflow-y: auto;
    block-size: 4.5em;
    min-block-size: 4.5em;
    max-block-size: 80%;
}

[contenteditable] {
    outline: 0px solid transparent;
}

.pell blockquote {
    border-inline-start: solid white 1px;
    padding-inline-start: 4px;
}

.calculator-bar {
    padding-block-start: 0;
    padding-block-end: 8px;
    padding-inline-start: 16px;
    padding-inline-end: 16px;
    margin: 0;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-end;
}

.calculator-bar[hidden] {
    display: none;
}

.calc-text {
    padding-block-start: 0;
    padding-block-end: 0;
    padding-inline-start: 16px;
    padding-inline-end: 16px;
    margin: 0;
    border-width: 1.5px;
    border-style: solid;
    border-radius: 3px;
    text-align: end;
    flex: 1 0 auto;
}

.calc-button {
    display: inline-block;
    padding: 0;
    margin: 0;
    border-width: 1.5px;
    border-style: solid;
    border-radius: 3px;
    box-shadow: none;
    text-shadow: none;
    flex: 0 0 auto;
    min-inline-size: 48px;
    min-block-size: 48px;
}

/*
.no-touch .calc-button:hover {
    background-color: blue90 #103570;
}
*/

.h-panel {
    flex: 1;
    flex-flow: row;
    align-items: stretch;
    overflow: hidden;
    display: flex;
    /*min-inline-size: min-content;*/
}

.review-panel {
    display: block;
    flex: 0 1 auto;
    margin-block-start: 16px;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    min-inline-size: max-content;
}

.review-panel-inner {
    display: block;
    padding-block-start: 1px;
    padding-block-end: 1px;
    padding-inline-start: 0;
    padding-inline-end: 0;
    min-block-size: max-content;
    transform: translate3d(0,0,0);
    margin-block-end: 100px;
}

.review-heading {
    font: inherit;
    padding-block-start: 8px;
    padding-block-end: 8px;
    padding-inline-start: 16px;
    padding-inline-end: 16px;
    margin: 0;
}

.question-review {
    border-block-end: 1px solid grey;
}

.question-review,
.empty-saved-locally,
.empty-saved-remotely {
    padding: 8px;
    margin-block-start: 1px;
    display: flex;
    border: none;
    inline-size: 100%;
    text-align: start;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    min-block-size: 48px;
    min-inline-size: 48px;
    font-weight: normal;
}

.question-review[aria-selected="true"],
.empty-saved-locally[aria-selected="true"],
.empty-saved-remotely[aria-selected="true"] {
    font-weight: bold;
}

.question-saved-locally {
    background-color: /*amber400*/#ffca28;
    padding: 8px;
    border-block-end: 1px solid grey;
}

.no-touch .question-saved-locally:hover, .question-saved-locally[aria-pressed="true"] {
    background-color: #cc9a00 !important;
    cursor: pointer;
}

.question-saved-remotely {
    background-color: /*blue400*/#42a5f5;
    padding: 8px;
    border-block-end: 1px solid grey;
}

.no-touch .question-saved-remotely:hover, .question-saved-remotely[aria-pressed="true"] {
    background-color: #0f72c3 !important;
    cursor: pointer;
}

.question-review-selected {
    background-color: /*blue80*/#114599;
    color: /*white*/#ffffff;
    padding: 8px;
    border-block-end: 1px solid grey;
}

.no-touch .question-review-selected:hover, .question-review-selected[aria-pressed="true"] {
    background-color: /*blue90*/#103570;
    cursor: pointer;
}

/* Exam Login */

.exam-group {
    display: flex;
    flex-direction: column;
}

.exam-choice {
    text-align-last: center;
    margin: 0 !important;
    inline-size: 100%;
    padding-block-start: 1rem !important;
    padding-block-end: 1rem !important;
    padding-inline-start: 2.5rem !important;
    padding-inline-end: 1rem !important;
}

.exam-text-group {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding-block-start: 0;
    padding-block-end: 0;
    padding-inline-start: 16px;
    padding-inline-end: 16px;
}

.exam-label {
    flex-grow: 0;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    color: black;
}

.exam-pin {
    flex-grow: 1;
    border-style: solid;
    border-radius: 2px !important;
    border-width: 1px !important;
    margin-inline-start: 0 !important;
    margin-inline-end: 8px !important;
    margin-block-start: 8px !important;
    margin-block-end: 8px !important;
    padding: 2px !important;
    min-block-size: 48px;
    min-inline-size: 48px;
}

.exam-cid {
    flex-grow: 1;
    border-style: solid;
    border-radius: 2px !important;
    border-width: 1px !important;
    margin-inline-start: 0 !important;
    margin-inline-end: 8px !important;
    margin-block-start: 8px !important;
    margin-block-end: 8px !important;
    padding: 2px !important;
    min-block-size: 48px;
    min-inline-size: 48px;
}

.exam-error {
    border-color: /*red70*/#b80d0d !important;
    border-width: 0 0 1.5px 0 !important;
}

.exam-error-text {
    color: /*red70*/#b80d0d;
}

.exam-back {
    flex-grow: 1;
    border-radius: 5px 5px 5px 5px !important;
    border-width: 0px !important;
    margin-block-start: 16px;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
    inline-size: 100%;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5) !important;
    background-color: /*red70*/#b80d0d;
}

.exam-go {
    flex-grow: 1;
    border-radius: 5px 5px 5px 5px !important;
    border-width: 1.5px;
    margin-block-start: 16px !important;
    margin-block-end: 0 !important;
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
    inline-size: 100%;
    border-width: 1.5px;
    border-style: solid;
}

/* Navigation */

.flat-button-light {
    border: 0;
    border-radius: 2px;
    margin-block-start: 0;
    margin-block-end: 8px;
    margin-inline-start: 0;
    margin-inline-end: 8px;
    padding-block-start: 6px;
    padding-block-end: 6px;
    padding-inline-start: 16px;
    padding-inline-end: 16px;
    font-weight: 700;
    min-inline-size: 48px;
    min-block-size: 48px;
    color: rgba(13, 71, 161, 1.0);
    background-color: transparent;
}

.no-touch .flat-button-light:hover {
    background-color: rgba(13, 71, 161, 0.12);
}

.flat-button-light:active {
    background-color: rgba(13, 71, 161, 0.40) !important;
}

.flat-button-light:disabled {
    color: rgba(13, 71, 161, 0.26);
}

.flat-button-dark {
    border: 0;
    border-radius: 2px;
    border: 1.5px solid transparent;
    margin-block-start: 0;
    margin-block-end: 8px;
    margin-inline-start: 0;
    margin-inline-end: 8px;
    padding-block-start: 6px;
    padding-block-end: 6px;
    padding-inline-start: 16px;
    padding-inline-end: 16px;
    font-weight: 700;
    min-inline-size: 48px;
    min-block-size: 48px;
    color: rgba(255, 255, 255, 1.0);
    background-color: transparent;
}

.no-touch .flat-button-dark:hover {
    background-color: rgba(255, 255, 255, 0.12);
    cursor: pointer;
}

.flat-button-dark:active {
    background-color: rgba(255, 255, 255, 0.25) !important;
}

.flat-button-dark:disabled {
    color: rgba(255, 255, 255, 0.30);
}

.flat-button-dark:focus {
    border-color: white;
}

.info-button {
    position: absolute;
    inset-block-start: 4px;
    inset-inline-start: 4px;
    font-size: 32px;
}

.app-version {
    color: white;
    background-color: darkred;
    padding: 4px;
}

.app-version[hidden] {
    display: none;
}

.info-panel {
    position: absolute;
    inset-block-end: 0;
    inset-inline-end: 0;
    border-radius: 2px;
    border: 0;
    margin: 8px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.7);
    z-index: 99;
    padding-block-start: 8px;
    padding-block-end: 0;
    padding-inline-start: 8px;
    padding-inline-end: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.info-text {
    color: black;
}

.navigation-panel {
    display: block;
    float: inline-end;
    min-block-size: min-content;
}

.application-name {
    /*display: inline-block;*/
    padding-block-start: 12px;
    padding-block-end: 12px;
    padding-inline-start: 0;
    padding-inline-end: 0;
    /*font-size: 16px;*/
    flex: 0 0 auto;
    /*min-inline-size: 0;
    white-space: nowrap;
    text-overflow: ellipsis;*/
    white-space: nowrap;
    overflow: hidden;
    /*line-height: 0;*/
}

.app-together {
    display: flex;
    flex: 1;
}

.app-button {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    border: none;
    border-radius: 3px;
    padding: 8px;
    margin-block-start: 4px;
    margin-block-end: 4px;
    margin-inline-start: 1px;
    margin-inline-end: 1px;
    min-inline-size: 48px;
    min-block-size: 48px;
}

.app-button-text {
    font-size: 12px;
}

/*
.no-touch .app-button:hover, .app-button:active {
    background-color: #103570;
}
*/

.keyboard .app-button:focus {
    box-shadow: 0 0 0 2px white;
}

.app-button:disabled, .app-button[aria-disabled="true"] {
    opacity: 0.66;
}

.app-button[hidden] {
    display: none !important;
}

.navbutton {
    border-width: 1.5px;
    border-style: solid;
    border-radius: 3px;
    margin-block-start: 4px;
    margin-block-end: 4px;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-block-start: 8px;
    padding-block-end: 8px;
    padding-inline-start: 16px;
    padding-inline-end: 16px;
    box-shadow: none;
    text-shadow: none;
    flex-shrink: 0;
    min-inline-size: 48px;
    min-block-size: 48px;
    font-size: 1.125rem;
}

.navigation {
    background-color: /*blue80*/#114599;
    border-color: white;
    border-width: 1.5px;
    border-style: solid;
    border-radius: 3px;
    color: white;
    margin-block-start: 4px;
    margin-block-end: 4px;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-block-start: 8px;
    padding-block-end: 8px;
    padding-inline-start: 16px;
    padding-inline-end: 16px;
    box-shadow: none;
    text-shadow: none;
    flex-shrink: 0;
    min-inline-size: 48px;
    min-block-size: 48px;
}

.navigation-primary {
    background-color: /*green70*/#056b2e;
    border-color: white;
    border-width: 1.5px;
    border-style: solid;
    border-radius: 3px;
    color: white;
    margin-block-start: 4px;
    margin-block-end: 4px;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-block-start: 8px;
    padding-block-end: 8px;
    padding-inline-start: 16px;
    padding-inline-end: 16px;
    box-shadow: none;
    text-shadow: none;
    flex-shrink: 0;
    min-inline-size: 48px;
    min-block-size: 48px;
}

.navigation-warning {
    background-color: /*red70*/#b80d0d;
    /*background-clip: padding-box;
    -webkit-background-clip: padding-box;
    border-color: transparent;*/
    border-color: white;
    border-width: 1.5px;
    border-style: solid;
    border-radius: 3px;
    color: white;
    margin-block-start: 4px;
    margin-block-end: 4px;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-block-start: 8px;
    padding-block-end: 8px;
    padding-inline-start: 16px;
    padding-inline-end: 16px;
    box-shadow: none;
    text-shadow: none;
    flex-shrink: 0;
    min-inline-size: 48px;
    min-block-size: 48px;
}

.nav-pad-left {
    margin-inline-start: 4px;
}

.nav-pad-right {
    margin-inline-end: 4px;
}

.navigation-text {
    border-color: white;
    border-width: 1.5px;
    border-style: solid;
    color: black;
    margin-block-start: 4px;
    margin-block-end: 4px;
    margin-inline-start: 8px;
    margin-inline-end: 0;
    padding-block-start: 8px;
    padding-block-end: 8px;
    padding-inline-start: 16px;
    padding-inline-end: 16px;
    box-shadow: none;
    text-shadow: none;
}

.error {
    background-color: /*red90*/#661414;
    color: white;
}

.no-touch .navigation:hover {
    border-color: #ddd;
    cursor: pointer;
}

.no-touch .navigation-primary:hover {
    background-color: /*green90*/#09401f;
    cursor: pointer;
}

.no-touch .navigation-warning:hover {
    background-color: /*red90*/#661414;
    cursor: pointer;
}

.navigation:disabled {
    color: #ddd;
    border-color: #ddd;
    border-style: dashed;
}

.navigation-primary:disabled {
    color: #ddd;
    border-color: #ddd;
    border-style: dashed;
}

.navigation-warning:disabled {
    color: #ddd;
    border-color: #ddd;
    border-style: dashed;
}

.keyboard .navigation:focus {
    box-shadow: 0 0 0 2px white;
}

.keyboard .navigation-primary:focus {
    box-shadow: 0 0 0 2px white;
}

.keyboard .navigation-warning:focus {
    box-shadow: 0 0 0 2px white;
}

.view {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    border: 0;
    margin: 0;
    padding-block-start: 8px;
}



/*@media screen and (orientation:landscape) {*/
@media all and (min-aspect-ratio:12/9) {
    .exam-panel {
        flex: 1 10 auto;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        overflow: hidden;
        margin-block-start: 16px;
        /*min-inline-size: min-content;*/
    }

    .qna-panel {
        display: flex;
        flex-flow: row;
        /*flex-wrap: wrap;*/
        align-items: stretch;
        flex: 1;
        overflow-y: hidden;
    }

    .question {
        display: block;
        margin: 0;
        padding: 0;
        flex: 1 0 60%;
        overflow-y: scroll;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .question-inner {
        display: block;
        margin: 0;
        overflow: hidden;
        min-block-size: min-content;
        /*min-inline-size: min-content;*/
        padding-block-start: 1px;
        padding-block-end: 1px;
        padding-inline-start: 0;
        padding-inline-end: 0;
        box-sizing: content-box;
        transform: translate3d(0,0,0);
    }

    .answers {
        display: none;
        margin: 0;
        padding: 0;
        flex: 1 0 40%;
        overflow-y: scroll;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .answers-inner {
        flex-flow: column nowrap;
        justify-content: flex-start;
        align-items: stretch;
        margin-block-start: 0;
        margin-block-end: 100px;
        margin-inline-start: 0;
        margin-inline-end: 0;
        overflow: hidden;
        min-block-size: min-content;
        min-inline-size: min-content;
        padding-block-start: 1px;
        padding-block-end: 1px;
        padding-inline-start: 0;
        padding-inline-end: 0;
        box-sizing: content-box;
        transform: translate3d(0,0,0);
    }

    .answer-panel {
        display: block;
        margin: 0;
        padding: 0;
        overflow: visible;
    }

    .log-panel {
        block-size:  100vh;
        background-color: white;
        inline-size: 100%;
        overflow: auto;
        color: black;
    }
}

/*@media screen and (orientation:portrait) {*/
@media not all and (min-aspect-ratio:12/9) {
    .exam-panel {
        display: block;
        margin-block: 16px 0;
        margin-inline: 0;
        padding: 0;
        flex: 1 10 auto;
        overflow-y: scroll;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        /*min-inline-size: min-content;*/
    }

    .qna-panel {
        display: block;
        margin-block-start: 0;
        margin-block-end: 94px;
        margin-inline-start: 0;
        margin-inline-end: 0;
        overflow: hidden;
        min-block-size: min-content;
        /*min-inline-size: min-content;*/
        padding-block-start: 1px;
        padding-block-end: 1px;
        padding-inline-start: 0;
        padding-inline-end: 0;
        box-sizing: content-box;
        transform: translate3d(0,0,0);
    }

    .question {
        display: block;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    .question-inner {
        /*min-inline-size: min-content;*/
        min-block-size: min-content;
    }

    .answers {
        display: block;
        margin: 0;
        padding: 0;
        overflow: visible;
    }

    .answers-inner {
        min-inline-size: min-content;
        min-block-size: min-content;
    }

    .answer-panel {
        display: block;
        margin: 0;
        padding: 0;
        overflow: visible;
    }

    .qna-panel::after {
        content: "";
        clear: both;
        display: table;
    }

    .log-panel {
        block-size:  100%;
        inline-size: 100%;
        overflow: auto;
        color: black;
    }
}

.lightbox-panel {
    position: relative;
    padding-block-start: 0;
    padding-block-end: 16px;
    padding-inline-start: 0;
    padding-inline-end: 0;
    margin: 0;
    display: none;
    min-block-size: 48px;
    min-inline-size: 48px;
    margin-block-end: 16px;
}

.lightbox-panel[aria-hidden="false"] {
    display: block;
}

.title {
    padding-block-start: 8px;
    padding-block-end: 8px;
    padding-inline-start: 16px;
    padding-inline-end: 16px;
    margin-inline-start: 0;
    margin-inline-end: 0;
    margin-block-start: 0;
    margin-block-end: 16px;
    border-inline-start-width: 16px;
    font: inherit;
    border-inline-start-style: solid;
}

.answer-label-col > .viewer-panel {
    margin-inline-start: -16px;
}

.answer-title {
    font: inherit;
    padding-block-start: 8px;
    padding-block-end: 8px;
    padding-inline-start: 16px;
    padding-inline-end: 16px;
    margin-block-start: 0;
    margin-block-end: 16px;
    margin-inline-start: 0;
    margin-inline-end: 0;
    border-inline-start-width: 16px;
    border-inline-start-style: solid;
}

.stem {
    display: block;
    padding: 0;
    margin-block-start: 0;
    margin-block-end: 16px;
    margin-inline-start: 16px;
    margin-inline-end: 16px;
    overflow-x: hidden;
    overflow-y: auto;
    min-inline-size: 48px;
    user-select: text;
    -moz-user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
    -o-user-select: text;
}

.thumbs {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
}

.question-inner > .thumbs {
    margin-inline-start: 16px;
}

.thumbs-hidden {
    display: none;
}

.thumbnail {
    display: block;
    background-color: black;
    outline: none;
    margin-block-end: 8px;
}

.figure[aria-disabled='true'] .thumbnail, .no-touch .figure[aria-disabled='true']:hover .thumbnail {
    filter: blur(4px);
}

.pvsa-top-label {
    overflow: visible;
    margin-inline-start: 16px;
    margin-block-end: 24px;
}

.pvsa-label {
    flex: 1 0 auto;
    overflow: hidden;
    margin-block-end: 8px;
}

.pvsa-error {
    flex: 0 0 auto; /*7.2rem;*/
    font-size: 14px;
}

.pvsa-pair {
    flex: 1 0 480px;
    overflow: visible;
    display: flex;
    flex-direction: row;
    column-gap: 8px;
    align-items: stretch;
}

.pvsa-small-item {
    flex: 1 0 240px;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    margin-inline-start: 0;
    margin-block-end: 8px;
}

.pvsa-item {
    flex: 1 0 480px;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    margin-inline-start: 0;
    margin-block-end: 8px;
}

.pvsa-answer {
    flex: 0 0 auto;
    display: block;
    inline-size: 100%;
    border-width: 1.5px;
    border-style: solid;
    border-radius: 5px;
    box-shadow: none;
    overflow: hidden;
    resize: none;
    margin-block-end: 16px;
    user-select: text;
    -moz-user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
    -o-user-select: text;
    font-weight: bold;
    min-inline-size: 48px;
    min-block-size: 48px;
}

.pvsa-answer:disabled {
    border-style: dashed;
}

.pvsa-block {
    inline-size: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 8px;
}

.answer-block {
    inline-size: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.answer-item {
    display: block;
    padding-block-start: 16px;
    padding-block-end: 0;
    padding-inline-start: 0;
    padding-inline-end: 16px;
}

.answer-label-col-compact > .answer-item {
    padding: 0;
}

.answer-label-row > .answer-item {
    padding-block-start: 0;
    padding-block-end: 0;
    padding-inline-start: 0;
    padding-inline-end: 16px;
    flex: 1;
}

.answer-label {
    overflow: visible;
}

.answer-label-row {
    overflow: visible;
    margin: 0;
    padding-block-start: 16px;
    padding-block-end: 16px;
    padding-inline-start: 0;
    padding-inline-end: 0;
    font-weight: normal;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-flow: row;
}

.answer-label-row:first-child {
    padding-block-start: 0;
}

.answer-label-panel {
    margin-inline-end: 16px;
}

.answer-label-panel-compact {
    margin-block-end: -8px;
}

.answer-label-panel-compact > * {
    margin-block-end: 8px !important;
}

.answer-label-row > .answer-label-panel {
    flex: 1;
}

.answer-label-panel::after {
    content: "";
    clear: both;
    display: table;
}

.answer-label-id {
    flex: 0;
    margin-inline-end: 8px;
}

.answer-label-col {
    flex: 1 0 0;
    min-inline-size: 0;
}

.answer-label-col-compact {
    float: inline-end;
    padding-block-start: 0;
    padding-block-end: 0;
    padding-inline-start: 16px;
    padding-inline-end: 0;
}

.answer-label-text {
    /*flex: 1;*/
    user-select: text;
    -moz-user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
    -o-user-select: text;
    white-space: pre-line;
    /*display: inline;*/
}

.answer-label-row > .answer-label-text {
    margin-inline-end: 16px;
    margin-inline-start: 0;
    margin-block: 0;
}

.answer-label-notes {
    display: block;
    text-align: end;
    font-style: italic;
    margin-block-start: 8px;
}

.flag {
    border-width: 1.5px;
    border-style: solid;
    border-radius: 5px;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 16px;
    margin-inline-end: 0;
    box-shadow: none;
    text-shadow: none;
    min-inline-size: 48px;
    min-block-size: 48px;
    overflow: hidden;
    display: block;
}

.flag[hidden] {
    display: none;
}

.answer-label-panel > .flag {
    float: inline-end;
}

.answer-label-row > .flag {
    float: inline-end;
    margin-inline-start: 0;
}

.flag:disabled {
    opacity: 0.33;
}

.short-answer {
    display: block;
    inline-size: 100%;
    border-width: 1.5px;
    border-style: solid;
    border-radius: 5px;
    overflow: hidden;
    resize: none;
    margin: 0;
    -webkit-user-select: text;
    user-select: text;
    font-weight: bold;
    background-color: transparent;
    min-inline-size: 33vw;
    min-block-size: 48px;
}

.short-answer:disabled {
    border-style: dashed;
}

.long-answer {
    display: block;
    inline-size: 100%;
    border-width: 1.5px;
    border-style: solid;
    border-radius: 5px;
    overflow: hidden;
    resize: none;
    margin: 0;
    user-select: text;
    -moz-user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
    -o-user-select: text;
    font-weight: bold;
    background-color: transparent;
    min-block-size: 48px;
}

.long-answer:disabled {
    border-style: dashed;
}

.wordcount {
    text-align: end;
    font-style: italic;
}

/* VARIANT_DROPDOWN */

.variant-dropdown {
    display: inline;
    border: none;
    border-radius: 3px;
    padding: 8px;
    margin-block-start: 4px;
    margin-block-end: 4px;
    margin-inline-start: 1px;
    margin-inline-end: 1px;
    min-inline-size: 48px;
    min-block-size: 48px;
}

.variant-dropdown-selected {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

.variant-dropdown-selected-text {
    text-transform: uppercase;
    font-size: 12px;
}

.variant-dropdown:disabled {
    opacity: 0.66;
}

.variant-dropdown[hidden] {
    display: none !important;
}

.variant-dropdown-options {
    display: table;
    inline-size: 100%;
    border: none;
    margin: 0;
    padding: 0;
}

.variant-dropdown-item {
    border: none;
    overflow: hidden;
    padding: 0;
    min-inline-size: 45px;
    min-block-size: 45px;
    font-weight: normal;
    font-size: 12px;
    text-transform: uppercase;
    justify-content: center;
}

/* LANGUAGE_DROPDOWN */

.language-dropdown-panel {
    margin-block-start: 4px;
    margin-block-end: 8px;
    margin-inline-start: 4px;
    margin-inline-end: 4px;
    font-size: 1.5rem;
    border: none;
    border-radius: 2px;
    font-weight: 700;
    min-inline-size: min-content;
    min-block-size: 48px;
    color: rgba(255, 255, 255, 1.0);
    background-color: #00000033;
    white-space: nowrap;
}

.language-dropdown-panel ul > li[aria-selected="true"] {
    background-color: #00000066;
}

.language-dropdown-panel .option-name {
    direction: inherit;
}

.language-dropdown-panel > div {
    border-width: 0;
}

.language-dropdown-panel > div:focus {
    outline-color: white;
    outline-style: dashed;
    outline-width: max(2px, 0.08em);
    outline-offset: -0.32em;
}

/* ANSWER_DROPDOWN */

.answer-dropdown {
    inline-size: 100%;
    display: flex;
    align-items: centre;
    border-width: 1px;
    border-style: solid;
    border-radius: 5px;
    overflow: hidden;
    min-inline-size: 48px;
    min-block-size: 48px;
    outline: none;
}

.answer-dropdown[aria-disabled="true"] {
    border-style: dashed;
}

.answer-dropdown[aria-expanded="true"] {
    background-color: transparent !important;
}

.answer-dropdown-selected {
    inline-size: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding-block-start: 8px;
    padding-block-end: 8px;
    padding-inline-start: 16px;
    padding-inline-end: 16px;
    font-weight: bold;
    min-inline-size: 45px;
    min-block-size: 45px;
    border-start-start-radius: 5px;
    border-start-end-radius: 5px;
    border: none;
}

.answer-dropdown-selected[aria-expanded="true"] {
    display: none;
}

.answer-dropdown-options {
    display: table;
    inline-size: 100%;
    border: none;
    margin: 0;
    padding: 0;
}

.answer-dropdown-options[hidden] {
    display: none;
}

.answer-dropdown-item {
    border: none;
    inline-size: 100%;
    align-items: center;
    overflow: hidden;
    padding: 0;
    min-inline-size: 45px;
    min-block-size: 45px;
    display: table-row;
}

.answer-dropdown-item:disabled {
    opacity: 0.3;
}

.answer-dropdown-icon {
    margin-inline-end: 16px
}

.answer-dropdown-icon[hidden="false"] {
    visibility: visible;
    display: inline !important;
}

.answer-dropdown-icon[hidden="true"] {
    visibility: hidden;
    display: inline !important;
}

.option-name {
    display: table-cell;
    font-weight: bold;
    padding-block-start: 8px;
    padding-block-end: 8px;
    padding-inline-start: 16px;
    padding-inline-end: 16px;
    margin: 0;
    inline-size: fit-content;
    text-align: start;
}

.option-details {
    display: table-cell;
    margin-inline-start: 16px;
    padding-block-start: 8px;
    padding-block-end: 8px;
    padding-inline-start: 0;
    padding-inline-end: 16px;
    margin: 0;
    text-align: start;
}

/* SBA QUESTIONS */

.sba-option-row {
    display: flex;
    flex-direction: row;
}

.sba-option-del {
    border-width: 1.5px;
    border-style: solid;
    border-radius: 5px;
    padding: 8px;
    margin-block-end: 8px;
    margin-inline-start: 8px;
    min-inline-size: 48px;
    min-block-size: 48px;
    overflow: hidden;
}

.sba-option-del:disabled {
    opacity: 0.3;
}

.sba-option {
    display: flex;
    flex: 1;
    align-items: center;
    border-width: 1.5px;
    border-style: solid;
    border-radius: 5px;
    padding-block-start: 0;
    padding-block-end: 0;
    padding-inline-start: 8px;
    padding-inline-end: 8px;
    margin-block-end: 8px;
    min-inline-size: 48px;
    min-inline-size: min-content;
    min-inline-size: max(48px, min-content);
    min-block-size: 48px;
    text-align: start
}

.sba-option[aria-disabled="true"] {
    text-decoration: line-through;
}

.sba-option[aria-readonly="true"] {
    border-style: dashed;
}

/* CPQ QUESTIONS */

.cpq-row {
    display: flex;
    align-items: center;
    margin-block-end: 8px;
}

.cpq-option {
    display: flex;
    align-items: center;
    border-width: 1.5px;
    border-style: solid;
    border-radius: 5px;
    padding-block-start: 8px;
    padding-block-end: 8px;
    padding-inline-start: 16px;
    padding-inline-end: 16px;
    flex: 1;
    min-inline-size: 48px;
    min-block-size: 48px;
}

.cpq-option[aria-disabled='true'] {
    border-style: dashed;
}

.cpq-reset-panel {
    display: block;
    text-align: end;
}

.cpq-button, .cpq-button:active {
    display: inline-block;
    border-radius: 5px;
    border-width: 1.5px;
    border-style: solid;
    color: white;
    padding: 8px;
    box-shadow: none;
    text-shadow: none;
    min-inline-size: 48px;
    min-block-size: 48px;
    flex: 0 0 auto;
    margin-block-start: 2px;
    margin-block-end: 2px;
    margin-inline-start: 8px;
    margin-inline-end: 0;
    text-align: center;
    text-align-last: center;
}

.cpq-button:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 white !important;
}

.cpq-button:disabled {
    opacity: 0.3;
}

.cpq-button-warning, .cpq-button-warning:active {
    display: inline-block;
    background-color: /*bronze70*/#8a4d03;
    border-radius: 5px;
    color: white;
    padding: 8px;
    box-shadow: none;
    text-shadow: none;
    min-inline-size: 48px;
    min-block-size: 48px;
    flex: 0 0 auto;
    margin-block-start: 2px;
    margin-block-end: 2px;
    margin-inline-start: 8px;
    margin-inline-end: 0;
    text-align: center;
    text-align-last: center;
}

.cpq-button-warning:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 white !important;
}

.cpq-button-warning:disabled {
    opacity: 0.3;
}

.cpq-danger-button {
    display: inline-flex;
    align-items: center;
    border-radius: 5px;
    padding-block-start: 8px;
    padding-block-end: 8px;
    padding-inline-start: 16px;
    padding-inline-end: 16px;
    box-shadow: none;
    text-shadow: none;
    min-inline-size: 48px;
    min-block-size: 48px;
    margin-block-start: 2px;
    margin-block-end: 2px;
    margin-inline-start: 0;
    margin-inline-end: 0;
}

.cpq-danger-button:disabled {
    opacity: 0.3;
}

.no-touch .cpq-danger-button:hover {
    cursor: pointer;
}

.boolean-button {
    border-width: 1.5px;
    border-style: solid;
    border-radius: 5px;
    padding: 8px;
    margin: 0;
    min-inline-size: 48px;
    min-block-size: 48px;
    overflow: hidden;
}

.boolean-button:disabled {
    border-style: dashed;
}

.boolean-button + .boolean-button {
    margin-left: 8px;
}

.test {
    background-color: /*red70*/#b80d0d;
}

img {
    display: block;
    padding: 0;
    margin: auto;
}

.figure {
    flex: 0;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin-block-start: 0;
    margin-block-end: 16px;
    margin-inline-start: 0;
    margin-inline-end: 16px;
    padding-block-start: 0;
    padding-block-end: 0;
    padding-inline-start: 16px;
    padding-inline-end: 16px;
    border-width: 1.5px;
    border-style: solid;
    outline: none;
}

.figure[aria-disabled='true'], .no-touch .figure[aria-disabled='true']:hover {
    opacity: 0.3;
}

.figure[hidden] {
    display: none;
}

.figure-open {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin-block-start: 0;
    margin-block-end: 16px;
    margin-inline-start: 0;
    margin-inline-end: 16px;
    padding-block-start: 0;
    padding-block-end: 0;
    padding-inline-start: 16px;
    padding-inline-end: 16px;
    background-color: /*blue400*/#42a5f5;
    border: 1.5px solid /*blue70*/#1d5bbf;
}

.figcaption {
    font-style: italic;
    text-align: center;
    flex: 1;
}

.figinfo {
    text-align: center;
}

.figure-buttons {
    display: flex;
    flex-flow: row;
    align-content: center;
    justify-content: space-between;
    inline-size: 100%;
    white-space: nowrap;
}

.figure-buttons > * {
    margin-block-start: 0;
    margin-block-end: 8px;
    margin-inline-start: 8px;
    margin-inline-end: 0;
}

.figure-buttons > *:first-child {
    margin-inline-start: 0;
}

.figure-button {
    border-width: 1.5px;
    border-style: solid;
    border-radius: 5px;
    padding: 8px;
    min-inline-size: 48px;
    min-block-size: 48px;
    overflow: hidden;
}

.figure-button:disabled {
    opacity: 0.3;
}

.welcome-viewport {
    block-size:  100%;
    inline-size:  100%;
    display: block;
    overflow-y: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.welcome-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-inline-size: min-content;
    block-size:  100%;
    inline-size:  100%;
}

.progress {
    font-size: 28px;
    max-inline-size: 80%;
    margin-inline: auto;
    flex: 0 0 auto;
}

.progress-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.progress-title {
    flex: 0 0 auto;
    display: block;
    font-size: 28px;
    text-align: center;
    margin-block-end: 16px;
}

.progress-subtext {
    flex: 0 0 auto;
    display: block;
    font-size: 14px;
    text-align: center;
    margin-block-end: 48px;
}

.progress-text {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 64px;

}

.spinner { /*, .spinner:after {*/
    flex: 0 0 auto;
    display: block;
    border-radius: 50%;
    inline-size: 320px;
    block-size: 320px;
}
.horiz-split {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
}

.choose-exam {
    margin-block: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    align-content: center;
    min-inline-size: min-content;
    inline-size: 100%;
}

/* LOGOUT */

.logout-background {
    display: none;
    position: absolute;
    z-index: 999999;
    inset-inline-start: 0;
    inset-block-start: 0;
    inline-size:  100%;
    block-size:  100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.3);
    flex-direction: column;
    align-items: center;
}

.shield {
    display: none;
    position: absolute;
    z-index: 999999;
    inset-inline-start: 0;
    inset-block-start: 0;
    inline-size: 100%;
    block-size: 100%;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.3);
    text-align: center;
}

.logout-box {
    text-align: start;
    border-radius: 2px;
    display: flex;
    flex-flow: column;
    align-items: stretch;
    flex: 0 0 auto;
    overflow: hidden;
    border: solid 2px;
    max-inline-size: 42rem;
    margin-block-start: 15%;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
}

.logout-panel {
    flex: 1;
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    border-radius: 0 0 2px 2px;
    padding: 1rem;
}

.logout-title {
    font-size: 1.32rem;
    font-weight: bold;
    margin-block-end: 1rem;
    padding: 0;
}

.logout-text {
    margin-block-start: 0;
    margin-block-end: 1rem;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding: 0;
    inline-size: 100%;
    overflow: auto;
    max-block-size: 50%;
}

.logout-text > h1 {
    font-size: 1.32rem;
    font-weight: bold;
    margin-block-start: 0;
    margin-block-end: 2rem;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-block-start: 1rem;
    padding-block-end: 0;
    padding-inline-start: 0;
    padding-inline-end: 0;
}

.logout-error {
    margin-block-end: 1rem;
    padding: 1rem;
    inline-size: 100%;
    border-radius: 2px;
    border-style: solid;
    border-width: 2px;
}

.logout-cancel {
    border-radius: 5px 5px 5px 5px !important;
    border-width: 0px !important;
    margin-block-start: 16px !important;
    margin-block-end: 16px !important;
    margin-inline-start: 16px !important;
    margin-inline-end: 8px !important;
    inline-size: 320px !important;
    padding: 8px !important;
}

.logout-okay {
    border-radius: 5px 5px 5px 5px !important;
    border-width: 0px !important;
    margin-block-start: 16px !important;
    margin-block-end: 16px !important;
    margin-inline-start: 8px !important;
    margin-inline-end: 16px !important;
    inline-size: 320px !important;
    padding: 8px !important;
}

.logout-okay:disabled {
    background-color: rgba(183, 28, 28, 0.3) !important;
}

.logout-buttons {
    inline-size: 100%;
    padding: 0;
    display: flex;
    flex-flow: row wrap;
    align-content: center;
    justify-content: flex-start;
    margin-block-start: 1rem;
}

.logout-buttons > input[type="button"] {
    border-width: 2px;
    margin-block-end: 1rem;
    font-size: 1.125rem;
    padding-block-start: 0.8rem;
    padding-block-end: 0.8rem;
    padding-inline-start: 1.6rem;
    padding-inline-end: 1.6rem;
    min-block-size: none;
    min-inline-size: none;
}

.logout-buttons > :disabled {
    opacity: 0.3;
}

.logout-buttons > :not(:last-child) {
    margin-inline-end: 1rem !important;
}

label.modal {
    flex-grow: 0;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    color: #767676 !important;
    font-weight: 400;
    text-rendering: optimizeLegibility;
}

input.modal {
    flex-grow: 1;
    border-color: #ccc !important;
    border-radius: 0 0 0 0 !important;
    border-width: 0 0 1.5px 0 !important;
    margin-block-start: 8px !important;
    margin-block-end: 8px !important;
    margin-inline-start: 8px !important;
    margin-inline-end: 0 !important;
    padding-block-start: 0 !important;
    padding-block-end: 2px !important;
    padding-inline-start: 0 !important;
    padding-inline-end: 0 !important;
}

.slider-label {
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 8px;
    margin-inline-end: 8px;
}

.slider-canvas {
    block-size: 28px;
    border-radius: 3px;
    touch-action: manipulation;
}

.tool-bar-vbox > .slider-canvas {
    margin-block-start: 0;
    margin-block-end: 8px;
    margin-inline-start: 8px;
    margin-inline-end: 8px;
}

.tool-bar-vbox > .slider-canvas:last-child {
    margin-block-end: 16px;
}

.colour-preset :hover {
    border: 1px solid #ffffff;
    border-radius: 5px;
}

/* Colour picker button focus styles */
.tool-bar-hbox button[data-colour]:focus,
.tool-bar-hbox button[data-colour]:focus-visible {
    outline: 2px dashed rgb(212, 228, 255) !important;
    outline-offset: 3px !important;
}

.icon-left {
    margin-inline-end: 8px;
}