/*

CSS for together.science-math

*/

:root {
    --md-sys-typescale-body-large-font: var(--font-dialog);
    --md-filled-button-label-text-font: var(--font-dialog);

    --color-paper: whitesmoke;
    --color-hover: whitesmoke;
    --color-drag-hover: #c3edb8;
    --mathline-color: whitesmoke;
    --given-color: rgb(224, 233, 251);
    --givens-frame-color: rgb(128,128,255);
    --menubar-color: rgb(238, 237, 254);
    --menubar-border-color: rgb(188, 184, 243);
    --mathline-color-focus: rgb(250, 250, 250);
    --mathline-color-success: #4fdb56;

    --color-false: red;
    --color-true: green;
    --color-syntax: purple;
    --color-relative: orange;
    --color-partial: rgb(184, 248, 184);
    --color-assert: rgb(0, 66, 0);
    --color-scorebg-green: #a0f7d9;
    --color-scorebg-red: #ffc2e8;
    --color-scorebg-yellow: #ffeb99;
    --color-score-green: #03bf62;
    --color-score-red: #dd4640;
    --color-score-blue: #2677b9;
    --color-score-orange: orange;

    --color-dragdrop-marker: rgba(0,0,255,0.3);
    --color-dragdrop-border: blue;
    --color-score-marker: blue;
    --color-drop-ok: rgba(77, 130, 189, 0.8);
    --color-drop-ok-same: rgba(180, 214, 254,0.8);;
    --color-text: rgb(33, 33, 33);
    --color-settings-alert: red;
    --color-core-alert: red;
    --color-guide-highlight: gold;
    --color-drag-border: rgba(0,0,255,0.5);
    --color-drop-error: rgba(255,0,0,0.5);
    --color-markup-border: rgba(0,0,255,0.3);
    --color-hint-line: #e0e0f0;
    --color-answer-field: #e0e0f0;
    --color-answer-line: #d0d0f0;
    --color-answer-wrong: #ffc2e8;
    --color-answer-warning: rgb(255, 214, 139);
    --color-text-mathfield: azure;

    --z-viewport: 1;
    --z-cover: 10;
    --z-mathfield: 10;
    --z-bubble: 11;
    --z-drag-scrim: 12;
    --z-drag-block: 12;
    --z-play-button: 14;
    --z-help: 20;
    --z-settings-icon:29;
    --z-menubar: 30;
    --z-markup:40;
    --z-stats:993;
    --z-header:993;
    --z-modal-background:993;
    --z-modal-dialog:994;
    --z-dialog: 994;
    --z-guide:995;
    --z-menu:996;
    --z-menu-item:997;
    --z-blocker: 998;
    --z-snackbar: 999;

    --vh: 1vh;
    --mobile: false;
    --portrait: false;

    --markup-stroke-width: 8px;
    --radius-markup-tile: 8px;

    --header-height: calc(min(7vh, 4em));
}

#tm-header {
    z-index: var(--z-header);
}

.TSMain {
    position: relative;
    display: grid;
    grid-auto-rows: auto;
    height: 100%;
    box-sizing: border-box;
    grid-template-areas: 
        "menubar"
        "viewport";
    grid-template-rows: auto 1fr;
    grid-area: main;
}

.TSMain.TSMenuTop {
    grid-template-areas: 
        "menubar"
        "viewport";
    grid-template-rows: auto 1fr;
}

.TSMain.TSMenuBottom {
    grid-template-areas: 
        "viewport"
        "menubar";
    grid-template-rows: 1fr auto;
}

body.TSMenuPaper {
    grid-template-areas: 
        "viewport";
    grid-template-rows: 1fr;
}

.TSHeaderAndAds {
    grid-template-areas: 
        "header ads"
        "main ads";
    grid-template-rows: var(--header-height) calc(100vh - var(--header-height));
    grid-template-columns: 80% auto;
}

.TSHeaderNoAds {
    grid-template-areas: 
        "header"
        "main";
    grid-template-rows: var(--header-height) calc(100vh - var(--header-height));
    grid-template-columns: 100%;
}

.TSAdsNoHeader {
    grid-template-areas: 
        "main ads";
    grid-template-columns: 80% auto;
    grid-template-rows: 100%;
}

.TSSection {
    position: relative;
    display: block;
    padding: 0.5em 0.5em 0.5em 0.5em;
    width: calc(100%-4em);
    margin: 0;
}


.TSMathSection {
    display: block;
    padding: 0.5em 0.5em 0.5em 0.5em;
}

.TSTitleSection {
    display: block;
    padding: 2em 2em 2em 2em;
    width: calc(100% - 4em);
    text-align: center;
}

.TSCommentLine {
    position: relative;
    background-color: var(--mathline-color);
    display: block;
    border-radius: 2px;
    border: 2px solid transparent;
    padding-top: 10px;
    padding-bottom: 5px;
    font-family: var(--font-ts-default);
}

.TSMiniGraphLine {
    position: relative;
    background-color: var(--mathline-color);
    display: block;
    padding-top: 5px;
    padding-bottom: 5px;
    font-family: var(--font-ts-default);
}


.TSMiniGraphOuter {
    width:100%;
    height:auto;
    display:flex;
    flex-direction:row; 
    flex-wrap:wrap; 
    justify-content: space-between;
    box-sizing: border-box;
    padding:10px; 
    background-color: var(--color-paper);
}

MdMenu {
    font-family: var(--font-dialog);
}

.TSMiscLine {
    position: relative;
    background-color: var(--mathline-color);
    display: block;
    border-radius: 2px;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 5px;
}

.TSComment {
    display: block;
    padding-left: 2px;
    padding-right:2px;
    position:relative;
    top: -1px;
}

.TSMultilineComment {
    display: block;
    background-color: var(--mathline-color);
    padding-left: 2px;
    padding-right:2px;
    position:relative;
    top: -1px;
}

.TSHeadingLine {
    position: relative;
    font-family: var(--font-ts-default);
    font-size: x-large;
    display: block;
    border-radius: 2px;
    margin-bottom: 10px;
    width: 88%; /* room for section settings and givens status */
}

.TSTitleHeadingLine {
    position: relative;
    display: block;
    font-family: var(--font-ts-default);
    font-size: 16px;
    border-radius: 2px;
    text-align: center;
    margin-left: 6%;
    width: 88%; /* room for doc settings */
}

.TSMathLine {
    position: relative;
    display: grid;
    box-sizing: border-box;
    background-color: var(--mathline-color);
    color: #d7e3e9;
    width: 100%;
    row-gap: 0.1em;
    padding-top: 0.25em;
    padding-bottom: 0.25em;
    padding-left: 2px;
    padding-right: 2px;
    align-items: center;
    border-radius: 2px;
    page-break-inside:avoid;
    border: 2px solid transparent;
}

.TSMathBox {
    display: inline;
    overflow: hidden;
}

.TSMathTermLabel {
    display: flex;
    align-items: center;
    position: absolute;
    height: 100%;
    right: 0px;
    padding-bottom: 3px;
    box-sizing: border-box;
    z-index: var(--z-bubble);
}

.TSMathComment {
    display: inline;
    height: auto;
}

.TSDragHandle {
    display: flex;
    color: var(--mathline-color);
    z-index: var(--z-drag-block);
    align-items: center;
    position: absolute;
    top: 0px;
    left: -20px;
    height: 100%;
    width: 20px;
    box-sizing: border-box;
    border: 2px solid transparent;
}

.TSSectionDragHandle {
    display: flex;
    color: var(--mathline-color);
    z-index: var(--z-drag-block);
    align-items: center;
    position: absolute;
    top: 5px;
    left: 5px;
    height: 20px;
    width: 20px;
    box-sizing: border-box;
    border: 2px solid transparent;
}

.TSDragHandle img {
    opacity: 0.05;
}

.TSDragHandle:hover img {
    opacity: 1.0;
}

.TSDragHandleOver {
    opacity: 1.0;
}

.TSDragInsertBefore::after {
    content: " ";
    display: inline-block;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 20px;
    width: 50px;
    z-index: var(--z-drag-block);
    /* border-top-left-radius: 3px; */
    border-left: 2px solid var(--color-dragdrop-border);
    border-top: 2px solid var(--color-dragdrop-border);
}

.TSDragInsertAfter::after {
    content: " ";
    display: inline-block;
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: 20px;
    width: 50px;
    z-index: var(--z-drag-block);
    /* border-bottom-left-radius: 3px; */
    border-left: 2px solid var(--color-dragdrop-border);
    border-bottom: 2px solid var(--color-dragdrop-border);
}

.TSMenuBar {
    position: relative;
    left: 0;
    display: block;
    z-index: var(--z-menubar);
    justify-content: space-between;
    background-color: var(--menubar-color);
    color: var(--color-text);
    border-radius: 5px;
    border: 3px solid var(--menubar-border-color);
    padding: 2px 2px 2px 2px;
    box-sizing: border-box;
    width: 100%;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    grid-area: menubar;
    overflow: hidden;
}

.TSMenuButton {
    opacity: 0.5;
}

.TSComboButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: thin solid white;
    border-radius: 3px;
    padding-left: 5px;
    padding-right: 5px;
    background-color: rgba(255, 255, 255, 0.2);
}

.TSComboButton:hover {
    cursor: pointer;
}

.TSMenuComboButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: thin solid white;
    border-radius: 3px;
    padding-left: 5px;
    padding-right: 5px;
    /* background-color:rgba(0, 0, 0, 0.1); */
    opacity: 1;
}

.TSMenuComboButton:hover {
    opacity: 1;
}

.TSMarker {
    position: absolute;
    display: block;
    color: gold;
    overflow: visible;
}

.TSMarkerLabel {
    display: inline;
    position: absolute;
    background-color: gold;
    color: black;
}

.TSMarkupTile {
    background-color: transparent;
    box-sizing: border-box;
    z-index: var(--z-markup);
    overflow: visible;
    position: absolute;
    border-radius: var(--radius-markup-tile);
    border: var(--radius-markup-tile) solid transparent;
}

.TSMarkupTileFocused {
    background-color: rgba(255, 255, 255, 0.5);
    border: var(--radius-markup-tile) solid var(--color-markup-border);
}

.TSMarkupTileCommentPresent {
    border: var(--radius-markup-tile) solid var(--color-markup-border);
}

.TSMarkupTile:hover {
    background-color: rgba(255, 255, 255, 0.5);
    border: var(--radius-markup-tile) solid var(--color-markup-border);
}

.TSMarkupComment {
    display: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    position: absolute;
    left: -5px;
    width: 200px;
    height: 80px;
    overflow: auto;
    outline: none;
    box-sizing: border-box;
    border: var(--radius-markup-tile) solid var(--color-markup-border);
    border-radius: var(--radius-markup-tile);
    resize:none;
}

.TSMarkupCommentFocused {
    display: block;
}

.TSMarkupDelete {
    display: none;
    position: absolute;
    background-color: white;
    bottom: -8px;
    left: -33px;
    width: 25px;
    height: 25px;
    box-sizing: border-box;
    border: 1px solid black;
    /* border-radius: 2px; */
    border-radius: 50%;
}

.TSMarkupDeleteFocused {
    display: block;
}

.TSHeaderSpace {
    display: flex;
    height: 100%;
    align-items: center;
}

.TSMarkupToolbar {
    display: grid;
    grid-template-columns: repeat(10, 1fr) 4fr 1fr;
    grid-template-rows: 100%;
    grid-template-areas: "select rect freehand star normal error good great prev next . submit";
    height: 60%;
    width: 100px;
    gap: 5px;
    background: linear-gradient(270deg, rgba(2, 0, 36, 1) 0%, rgba(49, 5, 160, 1) 12%, rgba(0, 212, 255, 1) 100%);
    margin-left: 10px;
    box-sizing: border-box;
    border-radius: var(--radius-markup-tile);
}

.media-simple .TSResizeBox {
    width: 100% !important;
    height: auto !important;
    border: none !important;
    padding: 0 !important;
    resize: none !important;
}

.media-simple .TSMediaTitle {
    display: none !important;
}

.media-simple .TSMediaText {
    display: none !important;
}

.TSSubmissionTotal {
    font-size: 20px;
    color: white;
    text-align: center;
    align-self: center;
}

.TSAnswerWrong {
    background-color: var(--color-answer-wrong) !important;
}

.TSAnswerUnitWarning {
    background-color: var(--color-answer-warning) !important;
}

.TSMarkupToolbarDisabled {
    grid-template-columns: repeat(3, 1fr) 4fr;
    grid-template-areas: "select prev next total";
}

.TSMarkupButton {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-radius: 3px;
}

.TSMarkupButtonColor {
    width: 100%;
    height: 80%;
    box-sizing: border-box;
    border-radius: 3px;
}

.TSMarkupButtonFrame {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 1px;
    border-radius: 5px;
    border: 5px solid transparent;
}

.TSMarkupButtonFrameActive {
    border: 5px solid gold;
}

.TSSubmitButton {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 1px;
    border-radius: 5px;
    border: 5px solid transparent;
    background-color: transparent;
}

.TSSubmitButton:active {
    transform: scale(0.95);
    box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
    border: 5px solid gold;
}

/* .TSQRFrame {
    display: block;
    position: absolute;
    top: var(--margins);
    right: var(--margins);
} */

.TSNoStats {
    display: none;
}

.TSGiven {
    background-color: var(--given-color);
    border: none;
}

.TSGivenLabel::after {
    content: "Given:";
    position: absolute;
    top: -10px;
    font-size: 15px;
    left: 10px;
    background-color: var(--given-color);
    border: 1px solid black;
    border-radius: 2px;
    padding-left: 3px;
    padding-right: 3px;
}

.ts-dragdropmode {
    background-color: red;
}

ts-mathfield {
    background-color: transparent;
    border: none;
    --text-font-family: var(--font-ts-default);
}

ts-mathfield:host {
    background-color: transparent;
}

ts-mathfield::part(virtual-keyboard-toggle) {
    display: none;
}

ts-mathfield::part(menu-toggle) {
    display: none;
}

ts-mathfield:focus-within {
    outline: none;
}

ts-mathfield:disabled {
    color: var(--color-text);
}

/* quill */
ts-quillmathfield {
    background-color: rgb(245,245,255);
    border: none;
    padding: 0;
    --text-font-family: var(--font-ts-default);
}

ts-quillmathfield:host {
    background-color: rgb(245,245,255);
}

ts-quillmathfield::part(virtual-keyboard-toggle) {
    display: none;
}

ts-quillmathfield::part(menu-toggle) {
    display: none;
}

ts-quillmathfield:focus-within {
    outline: none;
}

ts-quillmathfield:disabled {
    color: var(--color-text);
}

.tsimportant {
    background-color: navy;
    color: white !important;
    font-weight: bold;
}

.tsexpired {
    color: var(--color-core-alert);
    font-weight: bold;
}

.tsdeleted {
    background: rgb(247, 210, 215);
}

ts-switch {
    top: 2px;
}


/* Answer lines */

ts-question {
    border-radius: 3px;
    height: 100%;
    padding-left: 5px;
    background-color:var(--color-answer-field);
    overflow: hidden;
    min-height: 21 px;
    width: auto !important;
}

ts-textspec {
    border-radius: 3px;
    height: 100%;
    padding-left: 5px;
    background-color:var(--color-answer-field);
    overflow: hidden;
    min-height: 30px;
    width: auto !important;
}

ts-mcspec {
    border-radius: 3px;
    height: 100%;
    padding-left: 5px;
    background-color:var(--color-answer-field);
    overflow: hidden;
    min-height: 30px;
    width: auto !important;
}

ts-question textarea {
    position: relative !important;
}

ts-textanswer {
    display: block;
    border-radius: 3px;
    background-color:var(--color-answer-field);
    overflow: hidden;
    width: auto !important;
    height: 100%;
}

ts-answerline.creator ts-textanswer {
    display: none;
}

ts-answerspec {
    border-radius: 3px;
    background-color:var(--color-answer-field);
    overflow: hidden;
    width: auto !important;
    height: 100%;
}

ts-mcanswer {
    border-radius: 3px;
    background-color:var(--color-answer-field);
    overflow: hidden;
    width: fit-content !important;
    height: 100%;
}


ts-correctanswer {
    font-size: 100% !important;
    padding-left: 5px;
    border-radius: 3px;
    background-color:var(--color-answer-field);
    overflow: hidden;
    width: auto !important;
}

ts-fullpoints {
    border-radius: 3px;
    min-height: 20px;
    padding-left: 5px;
    background-color:var(--color-answer-field);
    overflow: hidden;
    width: auto !important;
}

ts-fullpoints input {
    position: relative !important;
    top: -1px !important;
    min-height: 20px;
}

ts-answer {
    font-size: 100% !important;
    padding-left: 5px;
    border-radius: 3px;
    background-color:var(--color-answer-field);
    width: auto !important;
}

ts-answer-success {
    background-color:var(--mathline-color-success) !important;
}

ts-points {
    border-radius: 3px;
    min-height: 20px;
    /* padding-left: 5px; */
    overflow: hidden;
    background-color:var(--color-answer-field);
    /* width: auto !important; */
    width: 40px;
}

ts-points input {
    position: relative !important;
    top: -1px !important;
    background-color:var(--color-answer-field);
    min-height: 20px;
}


ts-difficulty {
    border-radius: 3px;
    min-height: 20px;
    /* padding-left: 5px; */
    overflow: hidden;
    background-color:var(--color-answer-field);
    width: 40px;
}

ts-difficulty input {
    position: relative !important;
    top: -1px !important;
    background-color:var(--color-answer-field);
    min-height: 20px;
    box-sizing: border-box;
    padding-right: 5px !important;
    text-align: right !important;
}

ts-minwork {
    border-radius: 3px;
    min-height: 20px;
    /* padding-left: 5px; */
    overflow: hidden;
    background-color:var(--color-answer-field);
    width: 40px;
}

ts-minwork input {
    position: relative !important;
    top: -1px !important;
    background-color:var(--color-answer-field);
    min-height: 20px;
    box-sizing: border-box;
    padding-right: 5px !important;
    text-align: right !important;
}

ts-requireunits {
    position: relative;
    top: 2px;
}

ts-closeisok {
    position: relative;
    top: 2px;
}

ts-accuracy {
    background-color:var(--color-answer-field);
    border-radius: 3px;
    min-height: 20px;
    padding-left: 8px;
    overflow: hidden;
    align-items: center;
    width: auto !important;
}

ts-accuracy input {
    position: relative !important;
    top: -1px !important;
    min-height: 20px;
}

ts-scoreline {
    display: flex;
    padding: 10px;
    min-height: 40px;
    align-items: center;
    justify-content: space-between;
    background-color: var(--color-answer-line);
    color: var(--color-text);
    border-radius: 15px;
    margin-top: 5px;
    margin-bottom: 5px;
    overflow:hidden;
    border: 5px solid #a0a0f0;
}

ts-scoreline-inputs {
    display: flex;
    gap: 5px;
    align-items: center;
}

ts-scoreline.reviewer #ts-scoreline-inputs {
    display: flex;
    position: absolute;
    bottom: 80px;
    right:20px;
    /* border: 1px solid red; */
}

ts-scoreline.viewer #ts-scoreline-inputs {
    display: none;
}

ts-scoreline.creator #ts-scoreline-inputs {
    flex-direction: row;
    justify-content: left;
    width: 70%;
}

ts-scoreline.student #ts-scoreline-inputs {
    flex-direction: row;
    justify-content: left;
    width: 70%;
}

.ts-score-summary table {
    border-collapse: collapse;
    font-size: 0.8rem;
    letter-spacing: 1px;
    table-layout: fixed;
    width: 100%;
}

.TSScoreDisplay {
    width: 100%;
}

.TSInputSpan {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

ts-scoreline.student #ts-scoreline-inputs .TSInputSpan {
    justify-content: left;
}

ts-scoreline.creator #ts-scoreline-inputs .TSInputSpan {
    justify-content: left;
}

ts-scoreline table {
    border-collapse: collapse;
    font-size: 0.8rem;
    letter-spacing: 1px;
    table-layout: fixed;
    width: 100%;
}

.ts-summary-section-name {
    width: 25%;
}

.ts-summary-measure {
    width: 25%;
}

.ts-scoreline-work {
    width: 100%;
}

.ts-scoreline-answers {
    width: 50%;
}

.ts-summary-points {
    width: 10%;
}

.TSChip {
    padding: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    border-radius: 10px;
    color: black;
    text-align: center;
    line-height: 20px;
}

ts-points input {
    box-sizing: border-box;
    padding-right: 5px !important;
    text-align: right !important;
}

.TSSummarySectionLink {
    font-size: 15px;
    text-decoration: underline;
}

.TSScoringHeaderChip {
    background-color:  #a0a0f0;
    color: black;
    font-weight: bold;
}

.TSScoringIcon {
    font-size: 30px;
    font-weight: 700;
}

.TSScoringIconSmall {
    position: relative;
    top: 5px;
    font-size: 20px;
    font-weight: 700;
}

.ts-table-wrapper {
    border: 5px solid #a0a0f0;
    border-radius: 15px;
    padding: 5px;
    font-size: 0.8rem;
    letter-spacing: 1px;
}

.ts-score-summary caption {
    caption-side: bottom;
    padding: 10px;
    font-weight: bold;
}

.ts-score-summary thead,
tfoot {
    background-color: var(--color-answer-line);
}

.ts-score-summary th,
td {
    border: 1px solid rgb(160 160 160);
    padding: 8px 10px;
}

.ts-score-summary td {
    text-align: right;
}

.ts-score-summary td:first-of-type {
    text-align: left;
}

.ts-score-summary td:last-of-type {
    text-align: center;
}

.ts-score-summary tbody > tr:nth-of-type(even) {
    background-color: rgb(237 238 242);
}

.ts-score-summary tfoot th {
    text-align: right;
}

.ts-score-summary tfoot td {
    font-weight: bold;
}

.ts-collapsible-header {
    display:flex;
    align-items: center;
    font-size:large;
}

.ts-normally-collapsed {
    display: none;
    /* margin-left: 40px; */
}

.ts-expanded .ts-normally-collapsed {
    display: block;
    font-size: large;
}

.ts-arrow {
    position: relative;
    left: -5px;
    font-size: 30px;
    /* width: 40px; */
}

.ts-expanded .ts-arrow {
    transform: rotate(90deg);
}

ts-answerline {
    display: grid;
    gap: 10px;
    padding: 10px;
    align-items: center;
    background-color: var(--color-answer-line);
    color: var(--color-text);
    border-radius: 15px;
    margin-top: 5px;
    margin-bottom: 5px;
    overflow:hidden;
    border: 5px solid #a0a0f0;
}

ts-answerline.creator {
    grid-template-columns: 4fr 2fr 8fr 1fr 4fr 6fr 2fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:    'questionlabel question question question question question question'
                            'answertypelabel answertype answertype answertype answertype answertype answertype'
                            'correctanswerlabel correctanswer correctanswer requireunits requireunitslabel . .'
                            'fullpointslabel fullpoints . closeisok closeisoklabel accuracylabel accuracy';
}

ts-answerline.student {
    grid-template-columns: 1fr 5fr 1.1fr 1.1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas:    'questionlabel question question fullpointslabel fullpoints'
                            'answerlabel answer requireunitslabel requireunitslabel submit';
}

ts-answerline.student.simple {
    grid-template-columns: 1fr 7fr auto;
    grid-template-rows: auto;
    grid-template-areas: 'answerlabel answer submit';
}

ts-answerline.student ts-answerspec {
    display: none;
}

.ts-submitbutton {
    display: none;
    justify-content: center;
    align-items: center;
    width: auto;
    grid-area: submit;
}

.TSLabeledBubble {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: left;
    font-size: 10px;
    height: 50px;
    width: 100%;
}

.TSPercentageBubble {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 30px;
    width: 100%;
    border-radius: 5px;
    border: 2px solid transparent;
    outline: 2px solid black;
    outline-offset: -2px;
    overflow: hidden;
}

.TSPercentageBar {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    border-radius: 3px;
    box-sizing: border-box;
}

.TSPercentageBar.TSExtra::after {
    content: "+";
    position: absolute;
    display: block;
    color: whitesmoke;
    font-size: x-large;
    font-weight: 700;
}



.ts-answercheck.student .ts-submitbutton {
    display: flex;
}

.TSAnswerContainer {
    font-family: var(--font-ts-default);
}

.ts-embedded ts-answerline.student.simple .ts-submitbutton {
    display: flex;
}

ts-answerline.reviewer {
    grid-template-columns: 4fr 2fr 8fr 1.1fr 4fr 5fr 2fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:    'questionlabel question question question question question question'
                            'correctanswerlabel correctanswer correctanswer requireunits requireunitslabel . .'
                            'fullpointslabel fullpoints . closeisok closeisoklabel accuracylabel accuracy'
                            'answerlabel answer answer . . pointslabel points';
}

ts-answerline.viewer {
    grid-template-columns: 4fr 2fr 8fr 1.1fr 4fr 5fr 2fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:    'questionlabel question question question question question question'
                            'correctanswerlabel correctanswer correctanswer requireunits requireunitslabel . .'
                            'fullpointslabel fullpoints . closeisok closeisoklabel accuracylabel accuracy'
                            'answerlabel answer answer . . pointslabel points';
}

ts-answerline.viewer.simple {
    grid-template-columns: 2fr 6fr;
    grid-template-rows: auto auto;
    grid-template-areas:    'correctanswerlabel correctanswer'
                            'answerlabel answer';
}

ts-quill {
    display: flex;
    flex-direction: column;
    overflow: visible;
    position:relative;
}

.TSQuillFocus {
    background-color: var(--mathline-color-focus);
}

.TSQuillFocusFromMathfield {
    background-color: var(--mathline-color-focus);
}

.TSQuillToolbar {
    display: block;
    color: black !important;
    border-color: white !important;
    background-color: var(--menubar-color);
    border: 1px solid white;
    border-radius: 2px;
    flex: 8in;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
}

.ql-menu-item:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    top: attr(data-tooltip-top);
    display: block;
    color: whitesmoke;
    background-color: gray;
    font-size: smaller;
    padding: 10px;
    text-align: center;
    z-index: var(--z-snackbar);
}

.ql-menu-item-offset:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 40px;
    display: block;
    color: whitesmoke;
    background-color: gray;
    font-size: smaller;
    padding: 10px;
    text-align: center;
    z-index: var(--z-snackbar);
}

.ql-menu-item-list:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 80%;
    display: block;
    color: whitesmoke;
    background-color: gray;
    font-size: smaller;
    padding: 10px;
    text-align: center;
    z-index: var(--z-snackbar);
}

.ql-picker.ql-mathlive {
    width: 118px;
}

.ql-picker.ql-mathlive > span.ql-picker-label::before {
    content: 'Math';
}

.ql-picker.ql-mathlive > span.ql-picker-options > span.ql-picker-item::before {
    content: attr(data-label);
}

ts-quill .ql-editor {
    padding: 2px;
}

.ql-container.ql-snow {
    border: none;
    padding: 0;
}

.ql-toolbar.ql-snow {
    padding: 4px;
}

ts-question .ql-editor {
    padding: 2px;
}

ts-question .ql-container.ql-snow {
    border: none;
    padding: 0;
}

ts-mathrightcomment {
    position: relative;
}

ts-mathrightcomment .ql-editor {
    padding: 2px;
}

ts-mathrightcomment .ql-container.ql-snow {
    width: 100%;
    border: none;
    padding: 0;
}

ts-mathrightcomment p {
    line-height: 28px;
}

.TSLineHighlight {
    box-sizing: border-box;
    border: 3px solid gold;
}

.TSHintLine {
    display: grid;
    grid-template-columns: auto 1fr 0.5in 1.5in;
    gap: 10px;
    padding: 15px;
    align-items: center;
    background-color: var(--color-hint-line);
    color: white;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    margin-top: 5px;
    margin-bottom: 5px;
    overflow:hidden;
}

.TSHintLineOpen {
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
}

@media screen {
    .triangle-border {
        position:relative;
        padding:15px;
        margin:1em 0 3em;
        border:5px solid #b0100e;
        color:#333;
        background:#fff;
        /* css3 */
        -webkit-border-radius:10px;
        -moz-border-radius:10px;
        border-radius:10px;
      }

      /* Variant : for left positioned triangle
      ------------------------------------------ */

      .triangle-border.left {
        margin-left:30px;
      }

      /* Variant : for right positioned triangle
      ------------------------------------------ */

      .triangle-border.right {
        margin-right:30px;
      }

      /* THE TRIANGLE
      ------------------------------------------------------------------------------------------------------------------------------- */

      .triangle-border:before {
        content:"";
        position:absolute;
        bottom:-20px; /* value = - border-top-width - border-bottom-width */
        left:40px; /* controls horizontal position */
        border-width:20px 20px 0;
        border-style:solid;
        border-color:#b0100e transparent;
        /* reduce the damage in FF3.0 */
        display:block;
        width:0;
      }

      /* creates the smaller  triangle */
      .triangle-border:after {
        content:"";
        position:absolute;
        bottom:-13px; /* value = - border-top-width - border-bottom-width */
        left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */
        border-width:13px 13px 0;
        border-style:solid;
        border-color:#fff transparent;
        /* reduce the damage in FF3.0 */
        display:block;
        width:0;
      }

      /* Variant : top
      ------------------------------------------ */

      /* creates the larger triangle */
      .triangle-border.top:before {
        top:-20px; /* value = - border-top-width - border-bottom-width */
        bottom:auto;
        left:40px; /* controls horizontal position */
        border-width:0 20px 20px;
      }

      /* creates the smaller  triangle */
      .triangle-border.top:after {
        top:-13px; /* value = - border-top-width - border-bottom-width */
        bottom:auto;
        left:47px; /* value = (:before right) + (:before border-right) - (:after border-right) */
        border-width:0 13px 13px;
      }

      /* Variant : left
      ------------------------------------------ */

      /* creates the larger triangle */
      .triangle-border.left:before {
        top:10px; /* controls vertical position */
        bottom:auto;
        left:-30px; /* value = - border-left-width - border-right-width */
        border-width:15px 30px 15px 0;
        border-color:transparent #b0100e;
      }

      /* creates the smaller  triangle */
      .triangle-border.left:after {
        top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
        bottom:auto;
        left:-21px; /* value = - border-left-width - border-right-width */
        border-width:9px 21px 9px 0;
        border-color:transparent #fff;
      }

      /* Variant : right
      ------------------------------------------ */

      /* creates the larger triangle */
      .triangle-border.right:before {
        top:10px; /* controls vertical position */
        bottom:auto;
        left:auto;
        right:-30px; /* value = - border-left-width - border-right-width */
        border-width:15px 0 15px 30px;
        border-color:transparent #b0100e;
      }

      /* creates the smaller  triangle */
      .triangle-border.right:after {
        top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
        bottom:auto;
        left:auto;
        right:-21px; /* value = - border-left-width - border-right-width */
        border-width:9px 0 9px 21px;
        border-color:transparent #fff;
      }


    .syntax-error{
        position:absolute;
    }

    .TSMathSection {
        border: lightgray 1px solid;
    }

    .TSAd {
        display: block;
        padding: 5px;
        border-radius: 5px;
        border: solid 1px darkgray;
        background-color: gold;
        margin-bottom: 0.25in;
        height: 1.5in;
        overflow: hidden;
    }

    .TSStats {
        display: block;
    }

    .TSWorking {
        display: flex;
        flex-direction: column;
        justify-content: center;
        justify-items: center;
        align-content: center;
        align-items: center;
        background-color: rgba(255, 255, 255, 0.8);
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        z-index: 900;
    }

    .TSWorkingLabel {
        display: block;
        font-family: var(--font-dialog);
        font-size: 32px;
        margin-top: 1in;
        border-radius: 2px;
        text-align: center;
    }

    .TSAdsSidebar {
        grid-area: ads;
        display: none;
        position: relative;
        padding: 0.5em 0.5em;
        /* top: calc(7*var(--vh)); */
        bottom: 0;
        /* left: 80vw; */
        /* width: calc(20vw - 1em); */
        background-color: black;
        justify-content: center;
        overflow: auto;
        scrollbar-gutter: auto;
        background: linear-gradient(0deg, rgba(2, 0, 36, 1) 0%, rgba(49, 5, 160, 1) 12%, rgba(0, 212, 255, 1) 100%);
    }


    .TSHintTerminator {
        display: none;
    }

    .TSHintTerminatorOpen {
        display: block;
        margin-top: 5px;
        margin-bottom: 5px;
        height: 30px;
        background-color: var(--color-hint-line);
        border-top-left-radius: 2px;
        border-top-right-radius: 2px;
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
    }

    ts-hintdescription {
        border-radius: 3px;
        /* height: 100%; */
        padding-left: 5px;
        background-color:var(--color-answer-field);
        overflow: hidden;
        width: auto !important;
    }

    ts-hintdescription .ql-editor {
        padding: 2px;
    }

    ts-hintdescription .ql-container.ql-snow {
        border: none;
        padding: 0;
    }


    .TSSettingsIcon {
        position: absolute;
        display: flex;
        align-items: center;
        justify-items: center;
        color: lightgray;
        visibility: var(--settings-visibility);
        top: 2em;
        right: 2em;
        z-index: var(--z-settings-icon);
    }

    .TSSettingsAlert {
        color: var(--color-settings-alert) !important;
    }

    .TSMathCore {
        margin-right: 1em;
    }

    .TSMathCore:hover {
        color: var(--mathline-color-success);
    }

    .TSCoreAlert {
        color: var(--color-core-alert) !important;
    }

    /* Subscriptions */
    .TSSubscriptionRenew {
        border: green solid 2px;
        padding: 2px;
        display: inline-block;
    }

    .TSSubscriptionCancel {
        border: orange solid 2px;
        padding: 2px;
        display: inline-block;
    }

    .TSSubscriptionIssue {
        border: red solid 2px;
        padding: 2px;
        display: inline-block;
    }

    .TSFreeTrial {
        font-weight: bold;
        font-style: italic;
    }

    .TSKeysNotCopied {
        border: orange solid;
        padding: 5px
    }

    .TSKeysCopied {
        border: green solid;
        padding: 5px
    }

    .TSLicensedContent {
        border: black solid;
        padding: 5px
    }

    .TSSettingsIcon:hover {
        /* visibility: visible; */
        color: black;

    }

    .TSMenuButton:hover {
        display: none;
        visibility: hidden;
    }

    .TSRequiresSubscription {
        /* mimic disabled */
        color:#bdbdbd;
        background-color: transparent,
    }

    .TSRequiresSubscription:hover {
        text-decoration: underline
    }

    .ts-header {
        height: calc(7*var(--vh));
        position: relative;
        width: 100vw;
        z-index: 20;
        display: grid;
        grid-template-columns: min(35vw,50vh)  1fr auto auto min(3vh, 3vw);
        align-items: center;
        background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(49, 5, 160, 1) 12%, rgba(0, 212, 255, 1) 100%);
    }

    .ts-doc-options {
        visibility: visible;
    }

    .ts-logo {
        padding-left: min(3vh, 3vw);
        color: white;
        text-decoration: none;
        height: calc(7*var(--vh));
        display: flex;
        align-items: center;
    }

    .ts-logo-img {
        width: 70%;
    }

    .TSNoDisplayInPortrait {
        display: block;
    }

    .TSDisplayInPortraitOnly {
        display: none;
    }


    .TSReport {
        display: none;
    }

    .TSReportHeader {
        display: none;
    }

    .TSVisibleInPrintOnly {
        visibility: hidden;
    }

    .viewport {
        box-sizing: border-box;
        position: relative;
        grid-area: viewport;
        /* top: 0; */
        /* bottom: 0; */
        /* left: 0; */
        height: 100%;
        width: 100vw;
        display: flex;
        justify-content: center;
        overflow: auto;
        scrollbar-gutter: auto;
        background-color: black;
    }

    /* .ts-not-on-small-screens {
        display: block;
    } */

    .ts-on-small-screens {
        display: none;
    }

    .ts-screen-blocker {
        width:100vw;
        height:calc(100*var(--vh));
        display:flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        background: linear-gradient(135deg, rgba(2, 0, 36, 1) 0%, rgba(49, 5, 160, 1) 12%, rgba(0, 212, 255, 1) 100%);
    }

    .ts-visible-with-scrolling {
        display: none
    }

    .tsguide {
        background: #FFFFFF;
        box-shadow: 0px 4px 9px rgba(0, 0, 0, 0.3);
        border-radius: 15px;
        padding: 1rem;
        padding-bottom: 1.5rem;
        width: 357px;
        position: relative;
        font-family: 'Montserrat', sans-serif;
    }

    .tsguide .mdl-card__title {
        padding:1em;
      }

    .tsguide .mdl-card__supporting-text {
        background: #FFFFFF;
        display: grid;
        grid-template-areas: 'img title'
            'text text';
        grid-template-columns: 40% 60%;
        /* justify-content: space-between; */
        align-items: center;
    }

    .tsguide .tsdialogx {
        position: absolute;
        right: 10px;
        top: 10px;
        width: 20px;
        height: 20px;
        cursor: pointer;
      }

    .tsguide .tsguideimg {
        grid-area: img;
    }

    .tsguide .mdl-card__supporting-text .img {
        width: 151px;
        height: 130px;
    }

    .tsguide .tsguidetitle {
        grid-area: title;
        padding: 1em;
    }

    .tsguide .mdl-card__supporting-text h2 {
        font-weight: 800;
        font-size: 28px;
        line-height: 32px;
        margin-bottom: 0px;
        color: black;
    }

    .tsguide .mdl-card__supporting-text p {
        font-weight: 500;
        font-size: 22px;
        line-height: 25px;
        color: #2934CC;
        padding-top: 10px;
    }

    .tsguide .tsguidetext {
        grid-area: text;
        font-weight: 500;
        font-size: 18px;
        line-height: 22px;
        color: #2934CC;
        padding-top: 10px;
        font-weight: 400;
        font-size: 16px;
        line-height: 22px;
        color: rgba(0, 0, 0, 0.7);
        padding-bottom: 12px;
    }

    .tsguide .mdl-card__actions {
        display: flex;
        justify-content: right;
        align-items: center;
        padding-top: 2rem;
      }

    .tsguide .tsguidebutton {
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(180deg, #8E2EBF 0%, #4D4ADD 100%);
        border-radius: 5px;
        font-weight: 400;
        font-size: 16px;
        line-height: 17px;
        color: #FFFFFF;
      }
}

@media screen and (max-width: 567px) {
    .ts-not-on-small-screens {
        display: none !important;
    }

    .ts-on-small-screens {
        display: block;
    }

    .TSHintLine {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    ts-answerline.student.simple {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        grid-template-areas: 'answerlabel'
            'answer'
            'submit';
    }
}

@media screen and (max-width: 1299px) {
    .ts-not-on-small-screens {
        display: none;
    }

    .TSReducedScale {
        transform: scale(0.6);
        transform-origin: bottom left;
        max-height: inherit !important;
    }

    .TSReducedWide {
        width: 160%;
    }

    .TSReducedFont {
        font-size: 70%;
    }
    :root {
        --mobile: true;
    }

    .redblock {
        width: 20px;
        height: 20px;
        border: 3px solid red;
    }

    .TSTileTitle {
        font-size: large;
    }

    .container-heading {
        font-size: large;
        margin: 4px 2em;
    }
}

@media screen and (max-height: 300px) {
    .MLK__rows > .MLK__row div {
        --_keycap-height: 25px;
        --_keycap-font-size: 15px;
      }
}