:root {
  --ghelp_icon_size: 2.4em;
  --ghelp_size: 3.3em;
  --ghelp_icon_space: 0.7em;
  /* Gap between the figure and the helper tool columns beside it. */
  --ghelp_side_gap: 0.5em;
  /* Scene zoom pan overview in the helper icon row: corner radius, and size
     (icon height, 3:2 like the question window). */
  --scene-pan-map-radius: 3px;
  --scene-pan-map-height: var(--ghelp_icon_size);
  --scene-pan-map-width: calc(var(--scene-pan-map-height) * 1.5);
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.figureone-container {
  margin-bottom: 10em;
}

/* Questions occupy one screen unless a keyboard or open scratchpad extends it. */
/* Class set by setupKeyboardViewport (keyboardViewport.ts). */
html.question-viewport-locked {
  overflow: hidden;
  overscroll-behavior: none;
}

body.question_page:not(.demonstration) {
  position: fixed;
  /* Longhand: the inset shorthand is above the browser floor. */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}

body.question_page:not(.demonstration) #vertical-flex-wrapper {
  height: 100%;
  min-height: 0;
}

/* Compact top bar: 40% of the site-wide calc(4vh + 2.5rem) (grokkoli_base.css), to
   give the question more room. --question-bar-height also sizes the lesson
   progress pill that sits in it (grokkoli_system.css / heliomath_system.css).
   --question-bar-padding pads the bar above and below, the same for every brand;
   #main clears the padding too. */
body.question_page:not(.demonstration) {
  --question-bar-height: calc(1.6vh + 1rem);
  --question-bar-padding: 0.3rem;
}
body.question_page:not(.demonstration) .header.navbar {
  min-height: calc(var(--question-bar-height) + 2 * var(--question-bar-padding, 0px));
  padding-top: var(--question-bar-padding, 0px);
  padding-bottom: var(--question-bar-padding, 0px);
}
/* When the logo, pill and name don't fit side by side, questionHeaderFit.ts sets
   .question-header-compact: the logo goes and the name becomes a user icon
   (account_icon.css). */
body.question_page:not(.demonstration) .header.question-header-compact .navbar-brand {
  display: none;
}
body.question_page:not(.demonstration) .header.question-header-compact .lesson-progress-area-container {
  /* Centre in the space left of the icon rather than on the page. */
  left: calc(50% - 1.25rem);
}
/* The name becomes a user icon here, and below 500px on every signed-in page
   (account_icon.css); smaller than elsewhere to fit this bar. */
body.question_page:not(.demonstration) .header {
  --account-icon-size: 1.28rem;
}
@media screen and (max-width: 400px) {
  body.question_page:not(.demonstration) .header.question-header-compact {
    padding-right: 4px;
  }
}
body.question_page:not(.demonstration) .header .navbar-brand {
  /* Flex, so the line box doesn't sit the logo above the bar's centre. */
  display: flex;
  align-items: center;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
}
body.question_page:not(.demonstration) .header .navbar-logo {
  height: calc(0.95 * var(--question-bar-height));
  width: auto;
}
/* Grokkoli's wordmark fills its image, where Heliomath's has room around it. */
body.question_page:not(.demonstration) .header .navbar-logo--grokkoli {
  height: calc(0.65 * var(--question-bar-height));
}
body.question_page:not(.demonstration) .header .navbar-nav .nav-link {
  padding-top: 0;
  padding-bottom: 0;
  font-size: 0.85em;
}

body.question_page:not(.demonstration) #main {
  padding-top: calc(var(--question-bar-height) + 2 * var(--question-bar-padding, 0px));
  min-height: 0;
  /* Keep the fallback explicit for browsers without overflow: clip. */
  overflow: hidden;
  /* Unlike hidden, clip also prevents scrollIntoView from moving the page. */
  overflow: clip;
}

body.question_page:not(.demonstration) #main.question-keyboard-overflow {
  /* Allow reaching an overflowing keyboard or open scratchpad without
     jumping to the bottom. The viewport controller limits the scroll range. */
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-behavior: auto;
}

body.question_page:not(.demonstration) #main.question-keyboard-overflow::after {
  /* Allow the same adjustment when the visual viewport is shorter than main. */
  content: '';
  position: absolute;
  top: calc(100% + var(--keyboard-scroll-offset) - 1px);
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

body.question_page:not(.demonstration) .figureone-container {
  margin-bottom: 0;
}

/* Retain responsive sizing, but cap the main figure to the visible space.
   The controller updates this limit when Safari's browser controls change. */
body.question_page:not(.demonstration) .question-figure-fit {
  --question-safe-bottom: env(safe-area-inset-bottom, 0px);
  --question-safe-left: env(safe-area-inset-left, 0px);
  --question-safe-right: env(safe-area-inset-right, 0px);
  max-width: min(2000px, var(--question-figure-max-width, 2000px));
}

body.question_page:not(.demonstration) #footer,
body.question_page:not(.demonstration) #speed_test_container,
body.question_page:not(.demonstration) #workpad_spacer,
body.question_page:not(.demonstration) .demo-question-call-to-action,
body.question_page:not(.demonstration) .demonstration-title,
body.question_page:not(.demonstration) .demo-logged-in-title,
body.question_page:not(.demonstration) .demo-tiles-question {
  display: none;
}

body.question_page:not(.demonstration) #workpadContainer.workpad_hide {
  /* Keep measurable dimensions for the workpad's FigureOne initialization. */
  position: absolute;
  left: -10000px;
  visibility: hidden;
  pointer-events: none;
}

body.question_page:not(.demonstration) .figureone-container.scratchpad-open #workpad_spacer {
  display: block;
}

.f1_wrapper {
  margin-left: auto;
  margin-right: auto;
  width: 90vw;
  max-width: 2000px;
  /* margin-top: 11vh; */
  margin-top: calc(max(13vh, 3.5em));
}

.speed_test_container {
  margin-top: 0;
  position: relative;
  width: 85vw;
  max-width: 2000px;
}

#speed_test_bar {
  /* background-color: var(--main-green); */
  background-color: grey;
  width: 100%;
  height: 10px;
}
#speed_test_bar_dim {
  /* position: absolute; */
  width: 100%;
  height: 10px;
  background-color: lightgray;
}

#speed_test_value {
  color: var(--main-green);
  font-size: 2em;
}

#speed_test_fastest {
  position: absolute;
  top: 10px;
}

.speed_test_fastest_icon {
  /* position: absolute; */
  width: 20px;
  height: 20px;
  /* background-repeat: no-repeat; */
  /* background-position: center; */
  /* background-image: url("../img/chevron-single-up-grey.a3baa17a904b.svg"); */
  /* background-size: contain; */
  transform: translate(-10px, 0);
  /* color: green; */
  /* filter: brightness(0) saturate(100%)invert(43%) sepia(64%) saturate(4370%) hue-rotate(118deg) brightness(100%) contrast(104%); */
  filter: brightness(0) saturate(100%) invert(30%) sepia(47%) saturate(0%) hue-rotate(138deg) brightness(88%) contrast(81%);
}

.speed_test_label {
  width: 100px;
  transform: translate(-50px, 0);
  white-space: nowrap;
  text-align: center;
}

.speed_test_sublabel {
  width: 100px;
  text-align: center;
  transform: translate(-50px, -5px);
  white-space: nowrap;
  font-size: 0.7em;
}

.col_to_green {
  animation: col_to_green 1s;
  animation-fill-mode: forwards;
}

@keyframes col_to_green {
  0% {
    filter: brightness(0) saturate(100%) invert(30%) sepia(47%) saturate(0%) hue-rotate(138deg) brightness(88%) contrast(81%);
  }
  100% {
    filter: brightness(0) saturate(100%)invert(43%) sepia(64%) saturate(4370%) hue-rotate(118deg) brightness(100%) contrast(104%);
  }
}

#speed_test_average {
  /* width: 2px;
  height: 10px;
  background-color: rgb(246, 247, 247);
  position: absolute;
  top: 0px; */
  position: absolute;
  bottom: 0;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../img/chevron-double-up-grey.e38b30677718.svg");
  background-size: contain;
  transform: translate(-10px, 0);
}

@media (min-aspect-ratio: 8/7) {
  .f1_wrapper_3_2 {
    width: calc((83vh - 3em)/0.667);
  }
  .f1_wrapper_1_1 {
    width: 90vw;
    max-width: 2000px;
  }
}

/* @media (min-aspect-ratio: 1/4) {
  .f1_workpad_wrapper_3_2 {
    width: calc((83vh - 6em)/0.667);
  }
} */
@media (min-aspect-ratio: 7/7) {
  .f1_workpad_wrapper_3_2 {
    /* width: calc((83vh - 6em)/0.667); */
    width: 90vw;
    max-width: 2000px;
    /* max-width: 800px; */
  }
}

@media (min-aspect-ratio: 8/7) {
  .f1_workpad_wrapper_3_2 {
    width: calc((90vh - 6em)/0.667);
    max-width: 90vw;
    /* max-width: 800px; */
  }
}

@media (min-aspect-ratio: 10/7) {
  .f1_workpad_wrapper_3_2 {
    width: calc((100vh - 4em)/0.667);
    max-width: 90vw;
    /* max-width: 800px; */
  }
}

.f1_container {
  width: 100%;
  background-color: white;
}

.f1_container_3_2 {
  padding-bottom: 66.67%;
  /* padding-bottom: 100%; */
}

.f1_container_1_1 {
  padding-bottom: 100%;
}

/* External Submit layout experiment. Real submit controls remain in place. */
.external-submit-wrapper {
  position: relative;
}

.external-submit-wrapper[data-submit-placement="below"] {
  margin-bottom: var(--external-submit-reserve);
}

.external-submit-preview {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  box-sizing: border-box;
  width: max-content;
  height: calc(0.2 * var(--external-submit-unit));
  padding: 0 0.55em;
  white-space: nowrap;
  border: 0;
  border-radius: calc(0.06 * var(--external-submit-unit));
  background: #0000ff;
  color: white;
  -webkit-text-fill-color: white;
  font-family: arial, sans-serif;
  font-size: calc(0.095 * var(--external-submit-unit));
  font-weight: 300;
  line-height: 1;
  letter-spacing: normal;
  opacity: 1;
  cursor: default;
  appearance: none;
}

.external-submit-wrapper[data-submit-placement="right"] .external-submit-preview {
  top: auto;
  right: auto;
  bottom: 0;
  left: calc(100% + 12px);
}

/* Invisible measuring box; dvh tracks mobile browser chrome when available. */
.external-submit-bounds {
  position: fixed;
  top: 0;
  left: max(12px, env(safe-area-inset-left));
  right: max(12px, env(safe-area-inset-right));
  height: calc(100vh - max(12px, env(safe-area-inset-bottom)));
  height: calc(100dvh - max(12px, env(safe-area-inset-bottom)));
  visibility: hidden;
  pointer-events: none;
}

.figureone__gl {
  pointer-events: auto;
  background-blend-mode: rgb(246, 247, 247);
}

/* Chrome applies the canvas element's computed CSS letter-spacing to canvas 2D
   text; Safari 26 does not (iOS Safari 18.5 still did, so this is a WebKit
   version change). FigureOne MEASURES text on .figureone__text via
   ctx.measureText, so `body { letter-spacing: 1px }` (grokkoli_base.css) was
   silently widening every string by 1 CSS px per character in Chrome only —
   a layout input, not a cosmetic one. Any layout whose spacing came from text
   width then differed per engine; on
   01105 "comparing numbers within 1200"/discover/1/question_5 it moved two
   base-ten block piles from -0.107 to -0.354 figure units of overlap.
   Pinning this to `normal` makes the two engines agree. Note FigureOne's own
   font.letterSpacing (constants.py `letter_spacing`) is NOT an alternative
   here: it is only consumed by the atlas/WebGL glyph path, never by the '2d'
   render path these questions use. */
.figureone__canvas {
  letter-spacing: normal;
}

@font-face {
  font-family: 'TeXGyreTermes';
  src: url("../webfonts/texgyretermes_bold/texgyretermes-bold-webfont.1db0aaf0b888.eot");
  src: url("../webfonts/texgyretermes_bold/texgyretermes-bold-webfont.1db0aaf0b888.eot?#iefix") format('embedded-opentype'),
       url("../webfonts/texgyretermes_bold/texgyretermes-bold-webfont.a364b40ae09b.woff") format('woff'),
       url("../webfonts/texgyretermes_bold/texgyretermes-bold-webfont.6404ba99e73a.ttf") format('truetype'),
       url("../webfonts/texgyretermes_bold/texgyretermes-bold-webfont.ec49414681d3.svg#tex_gyre_termesbold") format('svg');
  font-style: normal;
  font-weight: 700;
}
@font-face {
  font-family: 'TeXGyreTermes';
  src: url("../webfonts/texgyretermes_bolditalic/texgyretermes-bolditalic-webfont.e36e6a22a277.eot");
  src: url("../webfonts/texgyretermes_bolditalic/texgyretermes-bolditalic-webfont.e36e6a22a277.eot?#iefix") format('embedded-opentype'),
       url("../webfonts/texgyretermes_bolditalic/texgyretermes-bolditalic-webfont.0c2c82262ca8.woff") format('woff'),
       url("../webfonts/texgyretermes_bolditalic/texgyretermes-bolditalic-webfont.b8c027103e52.ttf") format('truetype'),
       url("../webfonts/texgyretermes_bolditalic/texgyretermes-bolditalic-webfont.fc8722744fab.svg#tex_gyre_termesbold_italic") format('svg');
  font-style: italic;
  font-weight: 700;

}
@font-face {
  font-family: 'TeXGyreTermes';
  src: url("../webfonts/texgyretermes_italic/texgyretermes-italic-webfont.2b65426d2558.eot");
  src: url("../webfonts/texgyretermes_italic/texgyretermes-italic-webfont.2b65426d2558.eot?#iefix") format('embedded-opentype'),
       url("../webfonts/texgyretermes_italic/texgyretermes-italic-webfont.a9a868671e94.woff") format('woff'),
       url("../webfonts/texgyretermes_italic/texgyretermes-italic-webfont.910f10aa25c7.ttf") format('truetype'),
       url("../webfonts/texgyretermes_italic/texgyretermes-italic-webfont.e2cf5d562d43.svg#tex_gyre_termesitalic") format('svg');
  font-style: italic;
  font-weight: 400;

}
@font-face {
  font-family: 'TeXGyreTermes';
  src: url("../webfonts/texgyretermes_regular/texgyretermes-regular-webfont.50eeb45a9711.eot");
  src: url("../webfonts/texgyretermes_regular/texgyretermes-regular-webfont.50eeb45a9711.eot?#iefix") format('embedded-opentype'),
       url("../webfonts/texgyretermes_regular/texgyretermes-regular-webfont.4f8d56dd3937.woff") format('woff'),
       url("../webfonts/texgyretermes_regular/texgyretermes-regular-webfont.9014b8d50651.ttf") format('truetype'),
       url("../webfonts/texgyretermes_regular/texgyretermes-regular-webfont.f00dcb68e2ec.svg#tex_gyre_termesregular") format('svg');
  font-style: normal;
  font-weight: 400;
}

/* courier-prime-regular - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'courier_prime';
  font-style: normal;
  font-weight: 400;
  src: url("../webfonts/courier_prime/courier-prime-v9-latin_latin-ext-regular.0c3b19d75653.woff2") format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url("../webfonts/courier_prime/courier-prime-v9-latin_latin-ext-regular.aec6de4350d7.ttf") format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* courier-prime-italic - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'courier_prime';
  font-style: italic;
  font-weight: 400;
  src: url("../webfonts/courier_prime/courier-prime-v9-latin_latin-ext-italic.822e530bd23b.woff2") format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url("../webfonts/courier_prime/courier-prime-v9-latin_latin-ext-italic.1422c8fd2fb7.ttf") format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* courier-prime-700 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'courier_prime';
  font-style: normal;
  font-weight: 700;
  src: url("../webfonts/courier_prime/courier-prime-v9-latin_latin-ext-700.3755f89df2ae.woff2") format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url("../webfonts/courier_prime/courier-prime-v9-latin_latin-ext-700.a1657f539844.ttf") format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* courier-prime-700italic - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'courier_prime';
  font-style: italic;
  font-weight: 700;
  src: url("../webfonts/courier_prime/courier-prime-v9-latin_latin-ext-700italic.76245e43cedc.woff2") format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url("../webfonts/courier_prime/courier-prime-v9-latin_latin-ext-700italic.45011d28a776.ttf") format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}


.f1_keyboard.keyboard_stay_hidden {
  visibility: hidden !important;
}

.f1_keyboard {
  position: absolute;
  background-color: white;
  padding: 0.3em;
  border-radius: 0.3em;
  border: solid #aaa 1px;
  top: 40%;
  left: 30%;
  font-family: arial;
  z-index: 2;
}

.entryfield_keyboard {
  position: absolute;
  background-color: white;
  padding: 0.3em;
  border-radius: 0.3em;
  border: solid #aaa 1px;
  /* top: 40%; */
  left: 30%;
  font-family: arial;
  z-index: 2;
}



/* .rowContainer {
  position: absolute;
} */

.keyboard_row {
  margin: 0;
  /* margin-right: 1.5em */
}

.keyboard_button_container {
  display: inline-block;
  margin: 0.05em;
}

.keyboard_button {
  border-radius: 0.2em;
  display: table;
  background-color: #ddd;
  /* cursor: pointer; */
}

.entry_field_keyboard_button_container {
  display: inline-block;
}
.entry_field_keyboard_button {
  border-radius: 0.2em;
  display: table;
  background-color: #ddd;
  /* cursor: pointer; */
  width: 100%;
  height: 100%;
}

.keyboard_button_submit {
  background-color: blue;
}

.keyboard_button_label {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  color: blue;
  font-size: 1em;
  background-position: center;
}

.keyboard_button_label_submit {
  color: #fff;
}

.keyboard_triangle_top {
  position: absolute;
  width: 0; 
  height: 0; 
  border-left: 1em solid transparent;
  border-right: 1em solid transparent;
  border-bottom: 1em solid #aaa;
  top: -1em;
  /* top: 50%; */
}

.keyboard_triangle_right {
  position: absolute;
  width: 0; 
  height: 0; 
  border-top: 1em solid transparent;
  border-bottom: 1em solid transparent;
  border-right: 1em solid #aaa;
  left: -1em;
  /* top: calc(50% - 1em); */
  /* top: 50%; */
}

.keyboard_triangle_left {
  position: absolute;
  width: 0; 
  height: 0; 
  border-top: 1em solid transparent;
  border-bottom: 1em solid transparent;
  border-left: 1em solid #aaa;
  right: -1em;
  /* top: calc(50% - 1em); */
  /* top: 50%; */
}


.keyboard_triangle_bottom {
  position: absolute;
  width: 0; 
  height: 0; 
  border-left: 1em solid transparent;
  border-right: 1em solid transparent;
  border-top: 1em solid #aaa;
  top: 100%;
  /* top: 50%; */
}

.keyboard_triangle_background_top {
  border-bottom: 1em solid white;
  top: calc(-1em + 2px);
}

.keyboard_close_button {
  position: absolute;
  display: table;
  /* right: -1em;
  top: -1em; */
  right: 0.1em;
  top: 0.1em;
  width: 1.6em;
  height: 1.6em;
  /* background-color: white; */
  /* border: 1px solid #aaa; */
  /* border-radius: 0.5em; */
  padding: 0.2em;
  font-family: helvetica arial sans-serif;
  font-weight: 100;
  color: #aaa;
}


.keyboard_close_button_label {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  background-image: url("../img/close_cross.2c88d50f5459.svg");
  background-size: 50%;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid #bbb;
  border-radius: 1em;
  padding: 0.2em;
}

.keyboard_close_button_label svg path {
  /* fill: #888 !important; */
  
}


.keyboard_triangle_background_right {
  border-right: 1em solid white;
  left: calc(-1em + 2px);
  /* top: calc(50% - 1em); */
}

.keyboard_triangle_background_left {
  border-left: 1em solid white;
  right: calc(-1em + 1.5px);
  /* top: calc(50% - 1em); */
}

.keyboard_triangle_background_bottom {
  border-top: 1em solid white;
  top: calc(100% - 2px);
}
/* 
.keyboard_triangle_center {
  left: calc(50% - 1em);
}

.keyboard_triangle_right {
  left: calc(100% - 2.5em);
} */

.keyboard_disabled {
  filter: grayscale(100%);
  background-color: #eee;
  border: solid #ccc 1px
}

.keyboard_disabled .keyboard_button_label {
  opacity: 0.7;
  filter: grayscale(100%);
}

.keyboard_disabled .keyboard_button_submit{
  opacity: 0.7;
  filter: grayscale(100%);
}
.keyboard_disabled .keyboard_triangle_top{
  border-bottom: 1em solid #ccc;
}
.keyboard_disabled .keyboard_triangle_background_top{
  border-bottom: 1em solid #eee;
}
.keyboard_disabled .keyboard_triangle_bottom{
  border-top: 1em solid #ccc;
}
.keyboard_disabled .keyboard_triangle_background_bottom{
  border-top: 1em solid #eee;
}
.keyboard_disabled .keyboard_triangle_right{
  border-right: 1em solid #ccc;
}
.keyboard_disabled .keyboard_triangle_background_right{
  border-right: 1em solid #eee;
}



.bubble {
  border-radius: 0.2em;
  /* background-color: green; */
  /* color: white; */
  position: absolute;
  padding: 0.5em;
  min-width: 3em;
  text-align: center;
  z-index: 2;
}

.bubble_correct {
  background-color: var(--main-green);
  color: var(--main-green);
}

.bubble_invalid {
  background-color: var(--main-dark-steel);
  color: var(--main-dark-steel);
}

.bubble_incorrect {
  background-color: var(--main-orange);
  color: var(--main-orange);
}

.bubble_text {
  color: white;
  font-size: 0.8em;
}

.bubble_technically_correct_top { 
  background-image: linear-gradient(0deg, var(--main-gold), var(--main-green));
  color: var(--main-gold);
}
/* --main-green: #00b432;
--main-gold: #fbbb00; */

.bubble_technically_correct_bottom { 
  background-image: linear-gradient(180deg, var(--main-gold), var(--main-green));
  color: var(--main-gold);
}

.bubble_triangle_top {
  position: absolute;
  width: 0; 
  height: 0; 
  border-left: 0.7em solid transparent;
  border-right: 0.7em solid transparent;
  border-top: 0.7em solid;
  bottom: -0.65em;
  transform-origin: bottom;
}

.bubble_triangle_hide {
  visibility: hidden;
}

.bubble_triangle_bottom {
  position: absolute;
  width: 0; 
  height: 0; 
  border-left: 0.7em solid transparent;
  border-right: 0.7em solid transparent;
  border-bottom: 0.7em solid;
  top: -0.65em;
}

.bubble_pulse_scale_top {
  -webkit-transform : scale(0.5);
  -moz-transform : scale(0.5);
  -o-transform : scale(0.5);
  -ms-transform : scale(0.5);
  transform : scale(0.5);

  -webkit-transform-origin : 50% 100%;
  -moz-transform-origin : 50% 100%;
  -o-transform-origin : 50% 100%;
  -ms-transform-origin : 50% 100%;
  transform-origin : 50% 100%;
}

.speaker_container {
  position: absolute;
  left: calc(100% - 2.5em);
  top: 0em;
  width: 2.5em;
  height: 2.5em;
  background-color: lightgrey;
  border-radius: 1.25em;
}

.speaker {
  border-radius: 0.2em;
  color: white;
  position: absolute;
  left: 0.37em;
  top: 0.35em;
  width: 1.8em;
  height: 1.8em;
  background-image: url("../img/speaker.287f35b3e763.svg");
}

.speaker_container_workpad {
  left: calc(100% - 3.5em);
  top: 0.25em;
  background-color: rgb(246, 244, 242) !important;
  border: 1px solid rgb(204, 204, 204);
}

.speaker_white {
  background-image: url("../img/speaker-white.fac5173e37bd.svg");
}

.speaker_container_white {
  background-color: blue;
}

.speaker-ring {
  display: inline-block;
  position: relative;
  width: 3em;
  height: 3em;
}
.ghelp-speaker-ring {
  display: block;
  position: absolute;
  width: 3em;
  height: 3em;
  left: var(--ghelp_icon_space);
  top: 0;
}

.speaker-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 2.5em;
  height: 2.5em;
  /* margin: 8px; */
  border: 0.15em solid blue;
  border-radius: 50%;
  animation: speaker-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: blue transparent transparent transparent;
}
.ghelp-speaker-ring div {
  width: var(--ghelp_icon_size);
  height: var(--ghelp_icon_size);
}
.play-ring {
  left: 1.8em;
  top: 1.35em;
}
.play-ring div {
  width: 1.2em;
  height: 1.2em;
  border: 0.12em solid #eee;
  border-color: #eee transparent transparent transparent;
}
.speaker_container_white .speaker-ring div {
  border: 0.15em solid #fff;
  border-color: #fff transparent transparent transparent;
}
.speaker-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.speaker-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.speaker-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes speaker-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.little-pulse {
  animation: little-pulse 0.3s linear;
}

@keyframes little-pulse {
  0% { scale: 1; }
  50% { scale: 0.85; }
  100% { scale: 1; }
}

.little-fadeout-pulse {
  animation: little-fadeout-pulse 0.3s linear;
}

@keyframes little-fadeout-pulse {
  0% {
    scale: 1;
    opacity: 1;
  }
  25% {
    scale: 0.925;
    opacity: 1;
  }
  50% {
    scale: 0.85;
    opacity: 0;
  }
  75% {
    scale: 0.925;
    opacity: 1;
  }
  100% {
    scale: 1;
    opacity: 1;
  }
}


.icon-keyboard-down {
  background-image: url("../img/keyboard-down.4868779a395b.svg");
}

.icon-keyboard-up {
  background-image: url("../img/keyboard-up.8431932bd20d.svg");
}
.icon-keyboard-left {
  background-image: url("../img/keyboard-left.4fa24c91c25b.svg");
}
.icon-keyboard-right {
  background-image: url("../img/keyboard-right.b0a3567aee23.svg");
}

.icon-keyboard-frac {
  background-image: url("../img/keyboard-frac.c9ddf1986ee6.svg");
}
.icon-keyboard-pow {
  background-image: url("../img/keyboard-pow.81b6d62c92f3.svg");
}

.icon-keyboard-mfrac {
  background-image: url("../img/keyboard-mfrac.f97b4ce34e5f.svg");
}

.icon-keyboard-repeater {
  background-image: url("../img/keyboard-repeater.1130a92e1773.svg");
}
.icon-keyboard-delete {
  background-image: url("../img/keyboard-delete.18a72f69de54.svg");
  background-repeat: no-repeat;
  background-size: 50%;
}

.keyboard-hide-label {
  font-size: 0;
}

@keyframes pulse_top_anim {
  0% {
    transform-origin: bottom;
    transform: scale(1, 1);
  }

  50% {
    transform-origin: bottom;
    transform: scale(1.1, 1.2);
  }

  100% {
    transform-origin: bottom;
    transform: scale(1, 1);
  }
}

@keyframes pulse_bottom_anim {
  0% {
    transform-origin: top;
    transform: scale(1, 1);
  }

  50% {
    transform-origin: top;
    transform: scale(1.1, 1.2);
  }

  100% {
    transform-origin: top;
    transform: scale(1, 1);
  }
}

@keyframes shake_anim {
  0% {transform: translateX();}
  12% {transform: translateX(-7px);}
  39% {transform: translateX(7px);}
  62% {transform: translateX(-7px);}
  87% {transform: translateX(7px);}
  100% {transform: translateX(0);}
}
.pulse_top_invalid,
.pulse_top_correct {
  animation: pulse_top_anim 0.6s ease-in-out;
}

.pulse_bottom_invalid,
.pulse_bottom_correct {
  animation: pulse_bottom_anim 0.6s ease-in-out;
}

.pulse_top_technically_correct {
  animation: pulse_top_anim 0.6s ease-in-out;
}

.pulse_bottom_technically_correct {
  animation: pulse_bottom_anim 0.6s ease-in-out;
}

.pulse_top_incorrect, .pulse_bottom_incorrect {
  animation: shake_anim 0.6s ease-in-out;
}

/* @keyframes pulse_anim {
  0% {transform: scale(1);}
  20% {transform: scale(1.15);}
  40% {transform: scale(0.85);}
  60% {transform: scale(1.15);}
  80% {transform: scale(0.85);}
  100% {transform: scale(1);}
} */

@keyframes pulse_anim {
  0% {transform: translateX();}
  10% {transform: translateX(-5px);}
  15% {transform: translateX(5px);}
  20% {transform: translateX(-5px);}
  25% {transform: translateX(5px);}
  30% {transform: translateX(-5px);}
  35% {transform: translateX(5px);}
  40% {transform: translateX(-5px);}
  45% {transform: translateX(5px);}
  50% {transform: translateX(-5px);}
  55% {transform: translateX(5px);}
  60% {transform: translateX(-5px);}
  65% {transform: translateX(5px);}
  70% {transform: translateX(-5px);}
  75% {transform: translateX(5px);}
  80% {transform: translateX(0);}
  100% {transform: translateX(0);}
}

@keyframes pulse_anim_y {
  0% {transform: translateY();}
  10% {transform: translateY(-5px);}
  15% {transform: translateY(5px);}
  20% {transform: translateY(-5px);}
  25% {transform: translateY(5px);}
  30% {transform: translateY(-5px);}
  35% {transform: translateY(5px);}
  40% {transform: translateY(-5px);}
  45% {transform: translateY(5px);}
  50% {transform: translateY(-5px);}
  55% {transform: translateY(5px);}
  60% {transform: translateY(-5px);}
  65% {transform: translateY(5px);}
  70% {transform: translateY(-5px);}
  75% {transform: translateY(5px);}
  80% {transform: translateY(0);}
  100% {transform: translateY(0);}
}

@keyframes pulse_anim_accentuated {
  0% {transform: translateX();}
  10% {transform: translateX(-8px);}
  15% {transform: translateX(8px);}
  20% {transform: translateX(-8px);}
  25% {transform: translateX(8px);}
  30% {transform: translateX(-8px);}
  35% {transform: translateX(8px);}
  40% {transform: translateX(-8px);}
  45% {transform: translateX(8px);}
  50% {transform: translateX(-8px);}
  55% {transform: translateX(8px);}
  60% {transform: translateX(-8px);}
  65% {transform: translateX(8px);}
  70% {transform: translateX(-8px);}
  75% {transform: translateX(8px);}
  80% {transform: translateX(0);}
  100% {transform: translateX(0);}
}

.speaker_pulse {
  animation: pulse_anim_accentuated 3s ease-in-out;
}

.manipulatives_icon_pulse {
  animation: pulse_anim_y 3s ease-in-out;
}

@keyframes pulse_anim_y_short {
  0% {transform: translateY(0);}
  20% {transform: translateY(-0.6em);}
  40% {transform: translateY(0.6em);}
  60% {transform: translateY(-0.6em);}
  80% {transform: translateY(0.6em);}
  100% {transform: translateY(0);}
}
@keyframes pulse_anim_y_mag_short {
  0% {transform: translateY(0) scale(1);}
  20% {transform: translateY(-0.6em) scale(1.3);}
  40% {transform: translateY(0.6em) scale(1.5);}
  60% {transform: translateY(-0.6em) scale(1.5);}
  80% {transform: translateY(0.6em) scale(1.3);}
  100% {transform: translateY(0) scale(1);}
}

.manipulatives_icon_short_pulse {
  animation: pulse_anim_y_short 0.8s ease-in-out;
}

.manipulatives_icon_short_y_mag_pulse {
  animation: pulse_anim_y_mag_short 0.8s ease-in-out;
}

@keyframes scale_pulse {
  0% {transform: scale(1);}
  50% {transform: scale(1.6);}
  100% {transform: scale(1);}
}

.manipulatives_icon_scale_pulse {
  animation: scale_pulse 0.8s ease-in-out;
}

.hide {
  visibility: hidden;
}

.fade_out {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 0.5s, opacity 0.5s linear;
}


.debug_history__table {
  /* text-align: center; */
  margin-left: auto;
  margin-right: auto;
  padding: 1em;
}

.debug_history__table td {
  padding: 10px;
}

.debug_history__new_row td {
  background-color: yellow;
  height: 4em;
}

/* .debug_history__table td:first-child {
  color: red;
} */
.debug_history__table td:nth-child(4) {
  color: grey;
}

.debug_history__table .debug_history__record a {
  color: white;
}

.debug_history__table .debug_history__record td:nth-child(4) {
  color: white;
}

.debug_history__record {
  background-color: #00A2FF;
  color: white;
}

.debug_history__speed_FAST {
  background-color: green;
  color: white;
}

.debug_history__result_CORRECT {
  background-color: green;
  color: white;
}

.debug_history__speed_SLOW {
  background-color: red;
  color: white;
}

.debug_history__result_INCORRECT {
  background-color: red;
  color: white;
}

.debug_history__speed_NEUTRAL, .debug_history__question_path {
  color: grey;
}

.debug_history__mode_NEW_LEARNING {
  background-color: #00A2FF;
  color: white;
}

.debug_history__mode_GENERALIZING {
  background-color: violet;
  color: white
}

.debug_history__mode_TROUBLESHOOTING {
  background-color: coral;
  color: white;
}

.debug_history__mode_REMEDIATION {
  color: white;
  background-color: lightcoral
}
.debug_history__mode_CONFIRM_CONFUSION {
  color: white;
  background-color: grey
}
.debug_history__mode_REASK_QUESTION {
  color: white;
  background-color: grey
}
.debug_history__mode_REMEDIATION_COMPREHENSION_1 {
  color: white;
  background-color: grey
}
.debug_history__mode_REMEDIATION_COMPREHENSION_2 {
  color: white;
  background-color: grey
}
.debug_history__mode_REASK_QUESTION_ANSWER_SHOWN {
  color: white;
  background-color: grey
}
.debug_history__mode_REINFORCING {
  color: white;
  background-color: grey
}
.debug_history__mode_READY {
  color: white;
  background-color: grey
}
.debug_history__mode_HONING_INTRO {
  color: white;
  background-color: grey
}
.debug_history__mode_HONING {
  color: white;
  background-color: grey
}
.debug_history__mode_HONING_SUMMARY {
  color: white;
  background-color: grey
}
.debug_history__mode_PRACTICE {
  color: white;
  background-color: grey
}
.debug_history__mode_GENERALIZE_REINFORCEMENT_CHECK {
  color: white;
  background-color: grey
}
.debug_history__mode_QUESTION_REASKED_ANSWER_SHOWN {
  color: white;
  background-color: grey
}
.debug_history__mode_TAKE_A_BREAK_QUESTION_ASKED {
  color: white;
  background-color: grey
}
.debug_history__mode_ASK_TAKE_A_BREAK_QUESTION {
  color: white;
  background-color: grey
}

.debug_history__mode_GENERALIZE_ACTIVITY_MATH_FACT_PRACTICE,
.debug_history__mode_ACTIVITY_MATH_FACT_PRACTICE {
  color: white;
  background-color: green
}

.debug_history__mode_GENERALIZE_ACTIVITY_MATH_FACT_FOCUS,
.debug_history__mode_ACTIVITY_MATH_FACT_FOCUS {
  color: white;
  background-color: red
}

.debug_history__mode_GENERALIZE_ACTIVITY_MATH_FACT_TRIAGE,
.debug_history__mode_ACTIVITY_MATH_FACT_TRIAGE {
  color: white;
  background-color: blue
}

.debug_history__action_row {
  background-color: white;
  color: white;
}
.debug_history__action_cell {
  background-color: orange;
  color: white;
}

.exception_message {
  text-align: center;
}

.exception_message__container {
  padding: 1em;
  margin-left: auto;
  margin-right: auto;
  max-width: 500px;
}

.exception_message__title {
  margin-top: 1em;
  margin-bottom: 1em
}

.summary_container {
  margin-left: auto;
  margin-right: auto;
  margin-top: 2em;
  width: fit-content;
}

.summary_container h1 {
  text-align: center;
  margin-bottom: 1em;
  max-width: 100vw;
}

.summary_container h2 {
  font-size: 2em;
  font-weight: 900;
  color: var(--main-green);
  padding-left: 0.5em;
  margin-top: 1em;
}

.summary_container h3 {
  font-size: 1.3em;
  padding-left: 1em;
}

.summary_container h4 {
  font-size: 1em;
  padding-left: 1.3em;
  color: grey;
}

.summary_learner_container {
  background-color: white;
  border: 1px solid var(--main-steel-grey);
  padding-left: 2em;
  padding-right: 2em;
}

.summary_container_hide {
  display: None;
}

.day_summary_parent {
  position: relative;
}

.day_summary_tile_container {
  display: inline-block;
}
.day_summary_tile {
  /* padding: 1em;
  background-color: lightcyan;
  margin-top: 0.5em;
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
  border-radius: 1em; */
  /* border: 1px grey solid; */
  /* background-color: lightcyan; */
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
  /* min-width: 500px;
  min-height: 300px; */
  border-radius: 0.5em;
  display: table;
  position: relative;
  /* background-color: #eaeaea; */
  background-color: white;
  /* box-shadow: 0.3em 0.3em 0.1em 0.1em grey; */
  /* box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; */
}

.day_summary_answer_verbose_container {
  font-size: 1em;
  margin-left: 1em;
  color: #888;
}

.day_summary_verbose_title {
  color: #888;
  display: inline-block;
  width: 17em;
}

.day_summary_verbose_label {
  color: grey;
  display: inline-block;
  margin-left: 1em;
}

.day_summary_verbose_label_link {
  color: blue;
}

#summary_session_container {
  margin-top: 2em;
}

.day_summary_item_time_container {
  /* position: absolute;
  top: 1em; */
  /* bottom: 0.5em; */
  /* left: 1em; */
  color: #aaa;
}
.day_summary_tile_stack {
  /* margin-left: 1em; */
  /* margin-right: 0; */
}
.day_summary_item_time_stamp {
  font-size: 0.7em;
  display: inline-block;
}
.day_summary_item_date_stamp {
  font-size: 0.7em;
  display: inline-block;
  margin-left: 1em;
}

.day_summary_tile_NEW_LEARNING {
  /* background-color: #C4ECBC; */
  /* background-color: #D3ECCE; */
}

.day_summary_tile_GENERALIZING {
  /* background-color: lightgoldenrodyellow; */
  /* background-color: #FAFACE; */
  /* background-color: #CEDAFA; */
}

.day_summary_tile_TROUBLESHOOTING {
  /* background-color: lightgoldenrodyellow; */
  /* background-color: #FAD1CE; */
}

.day_summary_hider {
  /* background-color: red; */
  width: 1em;
  height: 1em;
  background-image: url("../img/arrow.09123c232002.svg");
  position: absolute;
  left: -1.2em;
  top: 1em;
  transform: rotate(90deg);
  /* width: 0; 
  height: 0; 
  border-left: 1em solid transparent;
  border-right: 1em solid transparent;
  border-top: 1em solid #222; */
}

.day_summary_hider__hide {
  top: 1em;
  transform: rotate(0deg);
}

.day_summary_compressed {
  width: calc(12em + 450px);
  height: 3em;
  padding-top: 0.25em;
  padding-bottom: 0.25em;
  margin-top: 0.5em;
  display: table;
}

.day_summary_compressed_math_step_path {
  display: table-cell;
  margin-left: 1em;
  color: grey;
  font-size: 0.5em;
  vertical-align: middle;
}

.day_summary_collapse_all {
  color: blue;
  width: 100%;
  max-width: 90vw;
  text-align: right;
}

.day_summary_compressed_title {
  display: table-cell;
  margin-left: 1em;
  font-size: 0.5em;
  vertical-align: middle;
  padding-right: 0.5em;
}

.day_summary_compressed_mode {
  margin-left: 1em;
  display: table-cell;
  vertical-align: middle;
  padding-right: 0.5em;
}

.day_summary_stack_0 {
  margin-left: 1em;
}

.day_summary_stack_1 {
  margin-left: 2em;
}
.day_summary_stack_2 {
  margin-left: 3em;
}
.day_summary_stack_3 {
  margin-left: 4em;
}
.day_summary_stack_4 {
  margin-left: 5em;
}
.day_summary_stack_5 {
  margin-left: 6em;
}

.tile_hide {
  display: None;
}


.day_summary_label {
  display: inline-block
}

.day_summary_tile_hide {
  /* width: 100%; */
  text-align: center;
  /* width: 5em; */
  width: 100%;
}
.day_summary_tile_hide_label {
  border-radius: 1em;
  height: 2em;
  background-color: #eee;
  width: 5em;
}

.day_summary_tile_hider {
  position: absolute;
  right: 0em;
  top: 0;
  padding: 0.25em;
  color: grey;
}

/* .day_summary_tile_CORRECT {
  background-color: var(--main-light-green);
} */

.day_summary_answer_time_result {
  color: grey;
  font-size: 0.8em;
}

.day_summary_img img, .day_summary_img_temp {
  max-width: 94vw;
  border-radius: 0.5em;
  /* box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; */
  /* box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; */
  /* box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px; */
  /* box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; */
  /* box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px; */
  /* box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; */
  /* box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px; */
  /* width: 500px;
  height: 360px; */
  /* height: 100%; */
  /* height: 400px; */
  /* background-color: white; */
  position: absolute;
  width: 100%;
}

.day_summary_img_wp {
  margin-top: 0.5em;
}

.day_summary_page_loading_label {
  width: 100%;
  text-align: center;
  color: #777;
  left: 0.25em;
  font-size: 1.3em;
  margin-top: 3em;
  margin-bottom: 0.4em;
}

.day_summary_img_loading_label {
  position: absolute;
  width: 100%;
  text-align: center;
  /* top: 55%; */
  top: calc(50% - 0.9em);
  color: #777;
  left: 0.25em;
}

.day_summary_img {
  padding-bottom: 66.4%;
  position: relative;
  background-color: #ccc;
  max-width: 94vw;
  border-radius: 0.5em;
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

.day_summary_img_container {
  display: table-cell;
  padding: 1em;
  width: 450px;
  max-width: calc(100vw - 3em);
  position: relative;
}

.day_summary_tile_stack .day_summary_img_container {
  /* width: 400px;
  /* font-size: 0.8em; */
  /* margin-right: 0; */
  /* margin-left: auto; */
  margin-left: auto;
  margin-right: auto;
}

.day_summary_img_container_loader {
  position: absolute;
  left: 50%;
  top: 42%;
}

.day_summary_summary {
  /* display: table-cell;
  vertical-align: middle;
  width: 10em;
  padding-left: 1.7em;
  margin-right: 1em; */

  display: table-cell;
  vertical-align: top;
  width: 12em;
  padding-left: 1em;
  margin-right: 1em;
  padding-top: 0.8em;
}
.day_summary_mode {
  display: block;
  font-size: 1.3em;
  /* margin-left: 1em; */
}
.day_summary_answer_time {
  display: block;
  font-size: 1.3em;
  /* margin-left: 1em; */
}

.day_summary_answer_time_speech {
  display: block;
  font-size: 0.7em;
  color: #888;
  /* margin-left: 1em; */
}

.day_summary_path {
  display: block;
  font-size: 0.6em;
  color: #888;
  user-select: all;
  /* padding-top: 0.5em; */
  /* margin-left: 1em; */
}

.day_summary_response_speech {
  display: block;
  font-size: 0.6em;
  user-select: all;
}

.day_summary_response_speech .day_summary_verbose_label {
  color: magenta;
}

.day_summary_trigger_helpfulness,
.day_summary_trigger_speech,
.day_summary_trigger_id {
  display: block;
  font-size: 0.6em;
  user-select: all;
}

/* .day_summary_trigger_id .day_summary_verbose_label {
  color: magenta;
} */

.day_summary_item_container {
  display: block;
}

.day_summary_title {
  margin-top: 1em;
  display: block;
  /* width: 7em; */
  font-size: 0.7em;
  color: var(--main-dark-steel);
  display: None;
}

.day_summary_table {
  display: table;
}


.day_summary_mark {
  display: inline-block;
  vertical-align: middle;
  font-size: 4em;
  line-height: 1em;
  padding-top: 0.2em;
  font-size: 3em;
  text-align: center;
  margin-top: 1em;
  width: 100%;
}

.day_summary_mark_correct {
  color: var(--main-green);
}

.day_summary_mark_incorrect {
  color: var(--main-orange);
}

.day_summary_mark_incorrect_first_attempt {
  color: #888;
}

.day_summary_mark_dontknow {
  color: #888;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: lighter;
}

.day_summary_mark_help {
  color: purple;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: lighter;
}

.day_summary_mark_decision {
  color: black;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: lighter;
  font-size: 1em;
}


.day_summary_mark_label {
  font-size: 0.8em;
  text-align: center;
}
.day_summary_mark_label_dontknow {
  color: #888;
}
.day_summary_mark_label_selected {
  color: #aaa;
  margin-top: 0.2em;
}
.day_summary_mark_label_firstattempt {
  color: #888;
}
.day_summary_mark_label_incorrect_attempts {
  color: #888;
}



/* .day_summary_attempts {
  color: var(--main-orange);
} */

.day_summary_file_name {
  position: absolute;
  bottom: 0;
  left: 0.4em;
  font-size: 0.7em;
  display: none;
}

.honing_summary_table {
  font-size: 0.8em;
  border-collapse: collapse;
}

.honing_summary_table td {
  width: 1em;
  height: 1em;
  border: 1px solid lightgrey;
  border-collapse: collapse;
}

.honing_summary_table td:first-child {
  width: auto;
}

.honing_summary_table_correct {
  background-color: green;
}

.honing_summary_table_correct_cache {
  background-color: #D3ECCE;
}

.honing_summary_table_incorrect {
  background-color: red;
}

.honing_summary_table_incorrect_cache {
  background-color: #FAD1CE;
}

.honing_summary_table_found {
  background-color: black;
}
.honing_summary_table_separator {
  background-color: yellow;
}

@media (max-width: 650px) {
  .day_summary_summary {
    display: block;
    padding-left: 1.4em;
    width: 100%;
    padding-top: 0;
  }
  .day_summary_img_container {
    display: block;
    /* margin-bottom: 1.5em; */
    /* padding-top: 0; */
  }
  .day_summary_item_container {
    display:  block;
    /* display: inline-block; */
    /* margin-left: 0;
    margin-right: 1.5em; */
    /* margin-right: 1.5em; */
  }
  .day_summary_mark {
    /* left: calc(100% - 1.5em); */
    /* left: 0;
    top: 0; */
    margin-left: 0;
    text-align: center;
    width: auto;
    /* position: absolute; */
    right: 0;
    top: -0.4em;
    font-size: 2.5em;
    margin-top: 0;
    display: block;
  }
  .day_summary_item_time_container {
    margin-top: 0em;
    /* margin-left: 1.4em; */
    /* margin-bottom: 0.5em; */
    /* position: relative; */
    display: inline-block;
    position: unset;
  }
  .day_summary_item_time_stamp {
    display: inline-block;
    /* padding-left: 1.4em; */
    font-size: 0.6em;
  }
  .day_summary_item_date_stamp {
    display: inline-block;
    margin-left: 0.5em;
    font-size: 0.6em;
  }
  .day_summary_title {
    margin-top: 0em;
  }
  .day_summary_answer_time_container {
    /* margin-left: 1.5em; */
  }
  .day_summary_mark_container {
    position: absolute;
    right: 1em;
    margin-right: 0;
    top: 2em;
  }
  .day_summary_mark_label {
    font-size: 0.5em;
    text-align: center;
  }
  .day_summary_mark_decision {
    font-size: 0.7em;
  }
}

.fade_in_fast {
  animation: fadeIn 0.5s linear;
}

.fade_out_fast {
  animation: fadeOut 0.5s linear;
}

.fade_in_fast_delay {
  animation: delayFadeIn50 0.8s linear;
}

.fade_in {
  animation: fadeIn 1s linear;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.fade_out {
  animation: fadeOut 1s linear;
}

@keyframes fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

.delay_fade_in {
  animation: delayFadeIn 1.5s linear;
}

@keyframes delayFadeIn {
  0% { opacity: 0; }
  20% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes delayFadeIn50 {
  0% { opacity: 0; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

.wait_loader {
  background-color: var(--main-color);
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  display: block;
  margin: 0em auto;
  position: relative;
  color: #777;
  box-sizing: border-box;
  animation: animloader 1s linear infinite alternate;
}

@keyframes animloader {
  0% {
    box-shadow: -1.5em -0.6em ,  -0.5em 0,  0.5em 0, 1.5em 0;
  }
  33% {
    box-shadow: -1.5em 0px, -0.5em -0.6em,  0.5em 0, 1.5em 0;
  }
  66% {
    box-shadow: -1.5em 0px , -0.5em 0, 0.5em -0.6em, 1.5em 0;
  }
  100% {
    box-shadow: -1.5em 0 , -0.5em 0, 0.5em 0 , 1.5em -0.6em;
  }
}


.skills_summary_table__skill_label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  height: 20em;
}

.skills_summary_table {
  font-size: 0.8em;
  border-collapse: collapse;
  position: relative;
}

.skills_summary_table td, .skills_summary_table th {
  border: 1px solid lightgrey;
  border-collapse: collapse;
  text-align: center;
  overflow-wrap: break-word;
}

.skills_summary_table th {
  position: sticky;
  top: 0;
  background-color: white;
}

.skills_summary_table__answer {
  max-width: 10em;
}

.skills_summary_table__path {
  font-size: 0.8em;
  width: 12em;
  max-width: 13em;
  color: grey;
}

.skills_summary_table__index {
  font-size: 0.8em;
  width: 4em;
  max-width: 4em;
  color: grey;
}

.skills_summary_table__question_type {
  font-size: 0.8em;
  width: 6em;
  max-width: 6em;
  color: grey;
}

.skills_summary_table__time {
  width: 5em;
  max-width: 5em;
  font-size: 0.8em;
}

.skills_summary_table__answer_subtext {
  font-size: 0.8em;
  color: grey;
}

.skills_summary_table__negative_subtext {
  font-size: 0.8em;
  color: white;
}

.skills_summary_table__ls_record {
  max-width: 5em;
}

.skills_summary_table__result {
  max-width: 8em;
}

.skills_summary_table__CORRECT, .skills_summary_table__FAST {
  background-color: lightgreen;
}

.skills_summary_table__NEUTRAL {
  color: lightgrey;
}

.skills_summary_table__ACTION {
  background-color: orange;
  color: white;
}

.skills_summary_table__row_ACTION {
  display: table-row;
}

.skills_summary_table__INCORRECT, .skills_summary_table__INCORRECT_FIRST_ATTEMPT, .skills_summary_table__SLOW {
  background-color: #fcc;
}

.skills_summary_table__row_CORRECT {
  display: table-row;
}

.skills_summary_table__row_INCORRECT {
  display: table-row;
}

.skills_summary_table__row_INCORRECT_FIRST_ATTEMPT {
  display: table-row;
}

.skills_summary_table__row_CORRECT {
  display: table-row;
}

.skills_summary_table__row_FAST {
  display: table-row;
}

.skills_summary_table__row_SLOW {
  display: table-row;
}

.skills_summary_table__row_NEUTRAL {
  display: table-row;
}

.debug_history__spacer {
  height: 3em;
}

.debug_history__filter_container {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 10;
}

.debug_history__filter {
  background-color: blue;
  color: white;
  /* height: 1em; */
  border-radius: 2em;
  display: inline-block;
  padding: 1em;
  cursor: pointer;
}
.debug_history__filter_label {
  /* margin-top: 0.4em; */
}

.debug_history_table__hide {
  display: None;
}

.debug_history__filter_disable {
  background-color: grey;
}

#help_container {
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  /* top: 100%; */
  top: 2em;
  /* left: calc(50% - 17em / 2); */
  left: 2em;
  font-size: 0.8em;
  /* top: calc(100% - 7em); */
  z-index: 100;
}
#help_bubble {
  border: 1px solid #e1e1e1;
  border-radius: 1.4em;
  width: 13em;
  padding: 1em;
  background-color: #ffffff;
  position: relative;
  /* top: 100%; */
  /* top: 0; */
  /* left: calc(50% - 17em / 2); */
  /* left: 0; */
  font-size: 0.8em;
  /* top: calc(100% - 7em); */
}

@keyframes helper_animate_in {
  0% {
    transform-origin: center;
    transform: scale(0, 0);
  }

  50% {
    transform-origin: center;
    transform: scale(1.5, 1.5);
  }
  100% {
    transform-origin: center;
    transform: scale(1, 1);
  }
}

@keyframes help_bubble_animate_in {
  0% {
    transform-origin: top left;
    /* transform: scale(0, 0) translate(0, -7em); */
    transform: scale(0, 0);
  }

  70% {
    transform-origin: top left;
    transform: scale(0, 0);
  }

  100% {
    transform-origin: top left;
    transform: scale(1, 1);
  }
}

@keyframes help_bubble_animate_in_immediate {
  0% {
    transform-origin: top left;
    transform: scale(0, 0);
  }

  100% {
    transform-origin: top left;
    transform: scale(1, 1);
  }
}

@keyframes help_bubble_animate_out {
  0% {
    transform-origin: top left;
    transform: scale(1, 1);
  }

  100% {
    transform-origin: top left;
    transform: scale(0, 0);
  }
}


.help_bubble_animate_in {
  animation: help_bubble_animate_in 1.5s ease-in-out;
}

.help_bubble_animate_in_immediate {
  animation: help_bubble_animate_in_immediate 0.5s ease-in-out;
}

.help_bubble_animate_out {
  animation: help_bubble_animate_out 0.5s ease-in-out;
}
.help_bubble_hide {
  transform: scale(0, 0);
}
.helper_animate_in {
  animation: helper_animate_in 1s ease-in-out;
}



/* 
.help_slide_down {
  animation: help_slide_down 3s ease-in-out;
} */

.help_container_show_bottom {
  top: 100%;
}

.help_answer {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

#help_container_AnswerNo, #help_container_AnswerYes {
  display: inline-block;
  /* border: 1px solid #e1e1e1; */
  border-radius: 1em;
  width: fit-content;
  width: 6em;
  text-align: center;
  margin-top: 1em;
  font-size: 0.8em;
  padding-top: 0.3em;
  padding-bottom: 0.3em;
}

#help_container_AnswerNo {
  background-color: #e1e1e1;
  color: #091FA9;
}

#help_container_AnswerYes {
  background-color: var(--main-green);
  color: white;
}

.help_button_space {
  width: 1em;
  display: inline-block;
}

.help_text {
  text-align: center;
  font-size: 1.5em;
  color: var(--main-green);
  position: relative;
  z-index: 10;
}

.help_grokkoli {
  position: absolute;
  left: -2em;
  top: -2em;
  border-radius: 1.5em;
  border: 1px solid #e1e1e1;
  width: 3em;
  height: 3em;
  background-color: white;
  background-image: url("/static/img/grokkoli.c57621e1638b.png");
  background-position: center;
  background-size: 60%;
  background-repeat: no-repeat;
}


.help_bubble_pointer_border {
  border: 1px solid #e1e1e1;
  width: 2em;
  height: 2em;
  position: absolute;
  left: -1px;
  top: -1px;
}

.help_bubble_pointer_fill {
  background-color: white;
  width: 2.1em;
  height: 2.1em;
  position: absolute;
  left: 0px;
  top: 0px;
}

.helpBubblePointer {
  position: relative;
}

.interstitial_message_background {
  background-image: linear-gradient(to bottom left, #00a050, #001090);
}

body.question_page:not(.demonstration) #main.interstitial_message_background {
  /* Paint the former, taller gradient without adding any scrolling space. */
  background-size: 100% var(--message-gradient-height, 100%);
  background-repeat: no-repeat;
}

.figureone_captions {
  background-color: black;
  opacity: 0.85;
  color: white;
  border-radius: 0.2em;
  /* 24px, and the same 24px it has always been - the nav bar inherits the 16px
     root font size. Grows on desktop only, see the min-width blocks below. */
  font-size: 1.5rem;
  text-align: center;
  position: absolute;
  /* Sits at the top of the screen, inside the nav bar, so the caption never
     covers the question. A one-line caption stays within the bar; a longer one
     grows down past it. Offsets resolve against the nav bar (it is fixed-top),
     whose padding box starts at the top of the viewport. */
  top: 10px;
  z-index: 10000;
  /* Centred and only as wide as its text, so a short caption leaves the logo
     and the account menu visible either side of it. Sized with fit-content and
     auto margins rather than left: 50% + translateX(-50%): with left: 50% a
     shrink-to-fit box can only use the space from the centre to the right edge,
     which caps it at half the screen and wraps short captions on a phone.
     -moz-fit-content is for Firefox before 94; Safari and Chrome take the
     unprefixed value well below our floor. */
  left: 0;
  right: 0;
  margin: 0 auto;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 90%;
  padding: 0.2em;
  /* The caption can still overlap the nav bar's controls - keep them clickable. */
  pointer-events: none;
}

/* Phones and tablets keep 24px, which reads well at arm's length. Desktops are
   further away and have the room, so grow from 24px at 1024px wide to 36px at
   1920px, then stop. The ramp is written to hit exactly 24px at 1024px so there
   is no jump at the breakpoint - same fluid-then-freeze pattern as #main in
   grokkoli_base.css. Padding is in em, so it scales with the text.
   36px is the ceiling because a one-line caption is ~1.9x its font size tall
   (measured), and the nav bar is only calc(4vh + 2.5rem) - at 36px the caption
   is ~68px against a ~78px bar on a 1920x1080 desktop. */
@media (min-width: 1024px) {
  .figureone_captions {
    font-size: calc(0.64rem + 1.34vw);
  }
}

@media (min-width: 1920px) {
  .figureone_captions {
    font-size: 2.25rem;
  }
}

@media (max-aspect-ratio: 3.5/4) {
  .figureone_captions {
    /* top: -5.2em; */
    z-index: 10000;
  }
}
/* 
.play_container {
  position: absolute;
  width: 5em;
  padding: 0.35em;
  border-radius: 2em;
  background-color: #091FA9;
  color: white;
  text-align: center;
  font-family: 'Montserrat', arial, sans-serif;
  font-weight: 300;
} */

/* .play_container {
  position: absolute;
  width: 0; 
  height: 0; 
  border-top: 1.5em solid transparent;
  border-bottom: 1.5em solid transparent;
  border-left: 3em solid #091FA9;
} */

.play_container {
  position: absolute;
  height: 4em;
  width: 3em;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60%;
}

.simple_play_container {
  /* background-color: #0020b0; */
  background-color: #091FA9;
  color: white;
  border-radius: 1.1em;
  text-align: center;
  height: 2.2em;
  padding: 0.33em;
  font-family: 'Montserrat', arial, sans-serif;
  font-weight: 300;
}

.play_image {
  background-image: url("../img/play.bde77969f97c.svg");
}

.pause_image {
  background-image: url("../img/pause.9c539952325f.svg");
}

.stop_image {
  background-image: url("../img/stop.bdb3cba4d7f5.svg");
}

.dim {
  opacity: 0.6;
}

.dim_play {
  filter: grayscale(100%) brightness(4);
}

/* A guide training's Play button, when audio can't start until the learner
   presses something (waitForTrainingPlay in loadQuestion.ts). The overlay
   takes every other press on the page. */
.training_play_overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
}

.training_play {
  width: 6em;
  height: 6em;
  border: 0.25em solid #091FA9;
  border-radius: 50%;
  background-color: white;
  background-image: url("../img/play.bde77969f97c.svg");
  background-repeat: no-repeat;
  background-position: 58% center;
  background-size: 45%;
  box-shadow: 0 0.2em 0.8em rgba(0, 0, 0, 0.25);
  cursor: pointer;
  animation: training-play-pulse 1.6s ease-in-out infinite;
}

@keyframes training-play-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.seek_container {
  position: absolute;
  left: 20%;
}
.seek_div {
  position: relative;
}

.seek_bar {
  position: absolute;
  /* translate: -50%, -50%; */
  top: -0.05em;
  height: 0.1em;
  background-color: var(--main-medium-light-grey);
}

.seek_bar_enabled {
  background-color: #888;
}

.seek_point {
  position: absolute;
  height: 0.8em;
  width: 0.8em;
  top: -0.4em;
  left: -0.4em;
  border: 0.1em var(--main-medium-light-grey) solid;
  /* top: -0.25em; */
  /* translate: -50% -50%; */
  border-radius: 0.4em;
  background-color: #f6f7f7;
  /* background-color: var(--main-medium-light-grey); */
  
}

.seek_bar_current {
  background-color: var(--main-green);
}

.seek_point_enabled {
  /* height: 0.8em;
  width: 0.2em; */
  /* top: -0.4em; */
  /* border-radius: 0.1em; */
  background-color: #888;
  border: 0.1em #888 solid;
}

.seek_point_current {
  position: absolute;
  /* height: 0.8em;
  width: 0.2em; */
  /* top: -0.1em; */
  border-radius: 0.4em;
  background-color: var(--main-green);
  border: 0.1em var(--main-green) solid;
}

.seek_point_selected {
  height: 1.2em;
  width: 1.2em;
  top: -0.6em;
  left: -0.6em;
  /* top: -0.6em; */
  border-radius: 0.6em;
  background-color: var(--main-green);
  border: 0.1em var(--main-green) solid;
}

.seek_touch {
  position: absolute;
  /* background-color: #66f1; */
  height: 3em;
  top: -1.5em;
}

.icon_repeat_yellow {
  background-image: url("../img/repeat-yellow.afefa61f3c79.svg");
  background-position: center;
  background-size: contain;
}

.icon_rewind_yellow {
  background-image: url("../img/rewind-yellow.069913643a4e.svg");
  background-position: center;
  background-size: contain;
}

.icon_pencil_paper_blue {
  background-image: url("../img/pencil-square-blue.cc71864dc5fd.svg");
  background-position: center;
  background-size: contain;
}

.icon_trash_blue {
  background-image: url("../img/trash-blue.50f1f0c15961.svg");
  background-position: center;
  background-size: contain;
  background-size: 80%;
  background-repeat: no-repeat;
}
.icon_arrow_right_blue {
  background-image: url("../img/arrow_right_blue.7ce2cbc23b33.svg");
  background-position: center;
  background-size: contain;
  background-size: 80%;
  background-repeat: no-repeat;
}
.icon_arrow_left_blue {
  background-image: url("../img/arrow_left_blue.6687455f5cae.svg");
  background-position: center;
  background-size: contain;
  background-size: 80%;
  background-repeat: no-repeat;
}
.icon_arrow_down_blue {
  background-image: url("../img/arrow_down_blue.0107e7866b75.svg");
  background-position: center;
  background-size: contain;
  background-size: 80%;
  background-repeat: no-repeat;
}
.icon_arrow_up_blue {
  background-image: url("../img/arrow_up_blue.10f377237389.svg");
  background-position: center;
  background-size: contain;
  background-size: 80%;
  background-repeat: no-repeat;
}
.icon_grid_blue {
  background-image: url("../img/grid-blue.40dce60c3993.svg");
  background-position: center;
  background-size: contain;
  background-size: 80%;
  background-repeat: no-repeat;
}
.icon_eraser_blue {
  background-image: url("../img/eraser-blue.747ac34a5fd5.svg");
  background-position: center;
  background-size: contain;
  background-size: 80%;
  background-repeat: no-repeat;
}

.icon_grid_selected {
  background-image: url("../img/grid-white.b794bcd0a087.svg");
  background-position: center;
  background-size: contain;
  background-size: 80%;
  background-color: #222;
  background-repeat: no-repeat;
  border-radius: 0.2em;
}

.icon_trash_selected {
  background-image: url("../img/trash-white.a8f7d017b5b4.svg");
  background-position: center;
  background-size: contain;
  background-size: 80%;
  background-color: #222;
  background-repeat: no-repeat;
  border-radius: 0.2em;
}

.icon_star_empty {
  background-image: url("../img/star-empty-yellow.a82ab221f288.svg");
  background-position: center;
  background-size: contain;
}

.icon_star_filled {
  background-image: url("../img/star-filled-yellow.edd0fb941704.svg");
  background-position: center;
  background-size: contain;
}

.icon_pencil_paper_yellow {
  background-image: url("../img/pencil-square-yellow.7748e2231aca.svg");
  background-position: center;
  background-size: contain;
}

.icon_speed_test_yellow {
  background-image: url("../img/speed-test-yellow.eedaf597f864.svg");
  background-position: center;
  background-size: contain;
}

.icon_graduation_cap_yellow {
  background-image: url("../img/graduation-cap-yellow.05a5aeac9c50.svg");
  background-position: center;
  background-size: contain;
}

.icon_exclamation_circle_red {
  background-image: url("../img/exclamation-circle-red.7f5d1c8df65c.svg");
  background-position: center;
  background-size: contain;
}

.icon_exclamation_circle_grey {
  background-image: url("../img/exclamation-circle-grey.19acf93a3da9.svg");
  background-position: center;
  background-size: contain;
}

.icon_question_yellow {
  background-image: url("../img/question-yellow.e533d9a38422.svg");
  background-position: center;
  background-size: contain;
}
.icon_question_mark_darkgrey {
  background-image: url("../img/question_mark-darkgrey.ea69b5cac938.svg");
  background-position: center;
  background-size: contain;
}

.icon_shuffle_yellow {
  background-image: url("../img/shuffle-yellow.a0c4c9d3364d.svg");
  background-position: center;
  background-size: contain;
}

.icon_search_yellow {
  background-image: url("../img/search-yellow.395171547f06.svg");
  background-position: center;
  background-size: contain;
}
.icon_search_blue {
  background-image: url("../img/search-blue.63f2d1f783dd.svg");
  background-position: center;
  background-size: contain;
}
.icon_broccoli_poly {
  background-image: url("../img/grokkoli_broccoli.261da2cd56d9.png");
  background-position: center;
  background-size: contain;
}
.icon_grokkoli_logo {
  background-image: url("../img/logo-large.b31d28220f9f.png");
  background-position: center;
  background-size: contain;
}
.icon_emoji_smile {
  background-image: url("../img/emoji-smile.2e9f89e14a48.svg");
  background-position: center;
  background-size: contain;
}
.icon_emoji_frown {
  background-image: url("../img/emoji-frown.ca186c870cfa.svg");
  background-position: center;
  background-size: contain;
}
.icon_emoji_angry {
  background-image: url("../img/emoji-angry.9d6abc8fc674.svg");
  background-position: center;
  background-size: contain;
}
.icon_emoji_astonished {
  background-image: url("../img/emoji-astonished.32e66c1ea5f4.svg");
  background-position: center;
  background-size: contain;
}
.icon_grokkoli_logo_honing {
  z-index: 10;
}
.icon_constellation {
  background-image: url("../img/icon-constellation.e939c1a3882b.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.infinite-pulse {
  animation: little-pulse_1 2s ease-in-out;
  animation-iteration-count: infinite;
}

.infinite-medium-pulse {
  animation: medium-pulse_1 2s ease-in-out;
  animation-iteration-count: infinite;
}

.slow-infinite-pulse {
  animation: little-pulse_1 3.5s ease-in-out;
  animation-iteration-count: infinite;
}

.slow-star-rotate {
  animation: star-rotate 4s ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes little-pulse_1 {
  0% { scale: 1; }
  50% { scale: 0.9; }
  100% { scale: 1; }
}

@keyframes medium-pulse_1 {
  0% { scale: 1.07; }
  50% { scale: 0.9; }
  100% { scale: 1.07; }
}

@keyframes star-rotate {
  0% { scale: 1; -webkit-transform: rotate(0deg); transform: rotate(0deg);}
  10% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  25% { scale: 0.7;}
  40% { -webkit-transform: rotate(72deg); transform: rotate(72deg); }
  50% { -webkit-transform: rotate(72deg); transform: rotate(72deg); scale: 1}
  60% { -webkit-transform: rotate(72deg); transform: rotate(72deg); }
  75% { scale: 0.7;}
  90% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  0% { scale: 1; -webkit-transform: rotate(0deg); transform: rotate(0deg);}
}
/* @keyframes star-rotate {
  0% { scale: 1.2; -webkit-transform: rotate(0deg); transform: translate(-2px, -1px) rotate(0deg);}
  20% { -webkit-transform: rotate(0deg); transform: translate(-2px, -1px) rotate(0deg); }
  50% { scale: 0.8;}
  80% { -webkit-transform: rotate(72deg); transform: translate(0px, 0px) rotate(72deg); }
  100% { -webkit-transform: rotate(72deg); transform: translate(0px, 0px) rotate(72deg); scale: 1.2}
} */

.voice-buttons-container {
  position: absolute;
  bottom: calc(15% + 40px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.voice-buttons-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 0.5em;
}

.voice-button {
  border: none;
  border-radius: 9999px;
  background-color: rgb(230, 230, 230);
  color: rgb(0, 32, 176);
  font-size: 1em;
  padding: 0.6em 1.2em;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
  outline: none;
  white-space: nowrap;
}

.voice-button:hover {
  background-color: rgb(215, 215, 215);
}

.voice-button-selected,
.voice-button-selected:hover {
  background-color: rgb(255, 255, 255);
  color: rgb(0, 32, 176);
  cursor: default;
}

.voice-submit-button {
  display: block;
  margin: calc(1em + 15px) auto 0;
  transform: translate(160px, 30px);
  border: none;
  border-radius: 160px;
  background-color: rgb(0, 32, 208);
  color: rgb(255, 255, 255);
  font-family: "Quicksand", "Helvetica Neue", arial, sans-serif;
  font-size: 27.6px;
  font-weight: 900;
  letter-spacing: 2.4px;
  line-height: 41.4px;
  padding: 11.5px 38.4px;
  cursor: pointer;
  transition: opacity 0.2s;
  opacity: 0.9;
  visibility: hidden;
}

.voice-submit-button.voice-submit-visible {
  visibility: visible;
}

.voice-submit-button:hover {
  opacity: 1;
}

.math-feelings-button {
  display: flex;
  align-items: center;
  gap: 0.2em;
  padding: 0.5em 0.8em 0.5em 0.7em;
}

.math-feelings-emoji {
  font-size: 1.3em;
  line-height: 1;
}

.math-feelings-label {
  font-size: 0.85em;
  white-space: nowrap;
}

.emoticon-face {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4em;
  transform: rotate(90deg);
  color: rgb(33, 37, 41);
}

.emoticon-happy::after {
  content: ':)';
}

.emoticon-sad::after {
  content: ':(';
}

#progress_container,
#achievements_container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.progress_container,
.achievements_container {
  color: white;
  font-size: 1.1em;
  /* width: 100%; */
  /* padding-left: 4em;
  padding-right: 4em; */
  /* padding-top: 0.5em; */
}

.progress_container {
  padding-left: 4em;
  padding-right: 4em;
}


.progress_title,
.achievements_title {
  text-align: center;
  font-size: 1.6em;
  color: white;
  margin-bottom: 0.5em;
}

.progress_title {
  color: white;
}

.progress_sub_title {
  /* color: #EBF55A; */
  font-size: 0.4em;
  opacity: 0.8;
}

.progress_inline,
.achievement_inline { 
  display: inline-block;
}

.progress_hide,
.achievement_hide {
  visibility: hidden;
  /* transform: scaleY(0); */
}

.achievement_item {
  padding-top: 0.5em;
  width: fit-content;
}

.progress_item {
  padding-bottom: 1em;
  /* width: fit-content; */
}

.achievement_item_new {
  color: #EBF55A;
}

.achievement_new {
  color: #EBF55A;
  font-weight: bold;
}

.achievement_item_text {
  display: inline-block;
}

.achievement_highlight {
  font-size: 1.3em;
  display: inline-block;
  min-width: 0.7em;
}

.achievement_item__skill_title {
  width: fit-content;
}

.achievement_item__skill_titles {
  font-size: 0.8em;
  padding-left: 2.4em;
}

.achievement_old_star {
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../img/star-filled-white.68d9f3b06e0a.svg");
  background-size: contain;
  width: 1em;
  height: 1em;
  display: inline-block;
  margin-right: 0.8em;
  margin-left: 0.2em;
  transform: translateY(0.1em);
}

.achievement_new_star {
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../img/star-empty-gold.849fd5cf328a.svg");
  background-size: contain;
  width: 1.5em;
  height: 1.5em;
  display: inline-block;
  margin-right: 0.5em;
  transform: translateY(0.2em);
}


.achievement_tile_old_icon {
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../img/star-empty-white.c5d799c1775b.svg");
  background-size: contain;
  width: 1.5em;
  height: 1.5em;
  display: inline-block;
  margin-top: 0.5em;
  margin-right: 3px;
}

.achievement_tile_new_icon {
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../img/star-empty-yellow.a82ab221f288.svg");
  background-size: contain;
  width: 1.5em;
  height: 1.5em;
  display: inline-block;
  margin-top: 0.5em;
  margin-right: 3px;
}


.achievement_fade_in {
  /* animation: fadeInRight 2s ease-in-out; */
  /* animation: achievement_counter_pulse_frames 1s ease-in-out; */
  /* animation-iteration-count: infinite; */
  animation: fadeInRight 0.4s linear forwards;
  opacity: 0;
}
@keyframes fadeInRight {
  0% {
     opacity: 0;
     /* transform: translateX(10em); */
  }
  1% {
     opacity: 0;
     /* transform: translateX(10em); */
  }
  100% {
     opacity: 1;
     /* transform: translateX(0); */
  }
}
.achievement_star_fade_in_pulse {
  animation: starFadeInPulse 0.3s linear forwards;
  opacity: 0;
}
@keyframes starFadeInPulse {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  1% {
    opacity: 1;
    transform: scale(0);
 }
  100% {
    opacity: 1;
    transform: scale(1.07);
  }
}

.achievement_fade_in_pulse {
  /* animation: fadeInRight 2s ease-in-out; */
  /* animation: achievement_counter_pulse_frames 1s ease-in-out; */
  /* animation-iteration-count: infinite; */
  animation: fadeInPulse 0.6s linear forwards;
  opacity: 0;
}
@keyframes fadeInPulse {
  0% {
     opacity: 0;
     transform: scale(0.1);
     /* transform: translateX(10em); */
  }
  1% {
     opacity: 0;
     transform: scale(0.1);
     /* transform: translateX(10em); */
  }
  /* 60% {
     opacity: 1;
     transform: scale(1.1);
     /* transform: translateX(0); */
  /* } */
  30% {
    transform: scale(1.2);
    opacity: 1;
  }
  55% {
    transform: scale(0.85);
    opacity: 1;
  }
  75% {
    transform: scale(1.05);
    opacity: 1;
  }
  90% {
    transform: scale(0.97);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }

} 

.achievement_counter_pulse {
  animation: fadeIn 2s linear;
  /* animation: achievement_counter_pulse_frames 1s ease-in-out; */
  /* animation: fadeInRight 2s ease-in-out; */
}

@keyframes achievement_counter_pulse_frames {
  0% { scale: 1; }
  50% { scale: 1.5; }
  100% { scale: 1; }
}

.progress_bar {
  display: inline-block;
  width: 100%;
  /* width: 20em; */
  /* background-color: #ffffff44; */
  /* position: relative; */
  /* height: 0.4em; */
  margin-bottom: 1.3em;
  margin-top: 0.2em;
  /* border: 1px solid #888888 */
}

.progress_bar_segments {
  width: 100%;
}


.progress_bar_bar {
  position: relative;
}

.progress_bar_segment_label {
  font-size: 0.65em;
  text-align: center;
  color: #fffc;
}

.progress_bar_background {
  position: absolute;
  height: 0.4em;
  background-color: #ffffff44;
  border-radius: 0.2em;
}

.progress_bar_title {
  padding-bottom: 0.1em;
  font-size: 0.8em;
  width: fit-content;
}

.progress_bar_title_value {
  display: inline-block;
  font-size: 1.5em;
  margin-right: 0.3em;
}

.progress_bar_title_label {
  display: inline-block;
  font-size: 0.8em;
  opacity: 0.8
}

.progress_bar_base {
  position: absolute;
  left: 0;
  background-color: var(--main-lavender);
  height: 0.4em;
  border-right: 1px solid green;
  border-radius: 0.2em 0 0 0.2em;
}

.progress_bar_delta {
  position: absolute;
  left: 0;
  background-color: #EBF55A;
  height: 0.4em;
  border-radius: 0 0.2em 0.2em 0;
}

.progress_bar_label {
  position: absolute;
  color: #EBF55A;
  font-size: 0.8em;
  translate: -50% 40%;
}

.progress_bar_segment {
  height: 1em;
  /* background-color: #ddd; */
  border-left: 1px solid #fff8;
  border-right: 1px solid #fff8;
  display: inline-block;
}

.progress_bar_label_number {
  text-align: center;
}

.progress_bar_label_suffix {
  text-align: center;
  font-size: 0.7em;
  opacity: 0.7;
  margin-top: -0.2em;
}

.html_buttons {
  text-align: center;
  margin-top: 0.5em;
}

.html_button {
  display: inline-block;
  border-radius: 1em;
  background-color: #ffffff33;
  margin-left: 0.5em;
  margin-right: 0.5em;
}

.html_button_label {
  padding-top: 0.25em;
  padding-bottom: 0.25em;
  padding-left: 1em;
  padding-right: 1em;
}

.html_button_disable {
  opacity: 0.7;
}

.achievements_tiles {
  text-align: center;
}

.achievement_tile {
  width: 7em;
  height: 6em;
  border: 1px solid #ffffff88;
  border-radius: 0.3em;
  text-align: center;
}

.achievement_tile_label {
  font-size: 1em;
}

.achievement_tile_sub_label {
  font-size: 0.7em;
}

.achievement_table_icon {
  display: inline-block;
}

.achievement_table_td_new,
.achievement_table_td_label,
.achievement_table_td_icon {
  vertical-align: top;
}

.achievement_table_td_icon {
  width: 35%;
  padding-left: 0.7em;
}

.achievement_table_td_new {
  width: 0.9em;
  /* Match the label's line box so the plus centers on its first text line. */
  font-size: 1.2em;
  padding-right: 0.5em;
}
.achievement_table_td_label {
  /* display: inline-block; */
  margin-left: 0.4em;
  font-size: 1.2em;
}

.achievement_table_div_label {
  width: fit-content;
  overflow-wrap: break-word;
}

.achievement_table_div_icon {
  display: flex;
  flex-wrap: wrap;
}

.achievement_table_div_icon > .achievement_inline {
  flex: 0 0 auto;
}

.achievements_table_small,
.achievements_table_vsmall,
.achievements_table {
  width: 100%;
  table-layout: fixed;
  font-size: 1em;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1em;
}

.achievements_table_small {
  font-size: 0.85em;
  /* margin-left: auto;
  margin-right: auto; */
}

.achievements_table_vsmall {
  font-size: 0.75em;
  /* margin-left: auto;
  margin-right: auto; */
}

.achievement_table_column {
  /* Wrap based on the figure's available width, including height-based fitting. */
  flex: 1 1 24em;
  min-width: 0;
  box-sizing: border-box;
  padding-left: 1em;
  padding-right: 1em;
}

.achievement_table_column:only-child {
  max-width: 30em;
  margin-left: auto;
  margin-right: auto;
}

.achievements_table_columns {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: wrap;
  max-width: 60em;
}

.achievement_grow {
  /* transform: scale(1.4); */
  animation: achievement_grow_frames 0.5s ease-in-out forwards;
  /* color: rgb(226, 128, 226); */
}

.achievement_speech_highlight {
  color: rgb(233, 158, 233);
}

@keyframes achievement_grow_frames {
  /* 0% { font-size: 1em; }
  100% { font-size: 1.1em; } */
  0% { scale: 1; }
  100% { scale: 1.1; }
  /* 0% { font-weight: 400; }
  100% { font-weight: 900; } */
  /* 0% { padding-bottom: 0; padding-top: 0; }
  100% { padding-bottom: 1em; padding-top: 1em; } */
}

.achievement_shrink {
  /* transform: font-size(1);em */
  animation: achievement_shrink_frames 0.5s ease-in-out forwards;
}

@keyframes achievement_shrink_frames {
  /* 0% { font-size: 1.1em; }
  100% { font-size: 1em; } */
  0% { scale: 1.1; }
  100% { scale: 1; }
  /* 0% { font-weight: 900; }
  100% { font-weight: 400; } */
  /* 0% { padding-bottom: 1em; padding-top: 1em; }
  100% { padding-bottom: 0; padding-top: 0; } */
}

.skill_star_celebrate {
  animation: skill_star_celebrate_frames 0.8s linear forwards;
  opacity: 1;
  transform-origin: 50% 53%;
}

@keyframes skill_star_celebrate_frames {
  0%   { rotate: 0deg; }
  100% { rotate: 144deg; }
}


.vertical_pulse {
  animation: vpulse 1s ease-in-out;
}

@keyframes vpulse {
  0% { transform: translateY(0); }
  10% { transform: translateY(-0.3em); }
  30% { transform: translateY(0.3em); }
  50% { transform: translateY(-0.3em); }
  70% { transform: translateY(0.3em); }
  90% { transform: translateY(-0.3em); }
  100% { transform: translateY(0); }
}

.grow_x_2 {
  animation: grow_x 1.1s linear forwards;
  transform-origin: 0% 50%;
}


@keyframes grow_x {
  0% { transform: scaleX(0) scaleY(0); }
  30% { transform: scaleX(0) scaleY(1); }
  50% { transform: scaleX(0.4) scaleY(1.5); }
  70% { transform: scaleX(0.8) scaleY(1.5); }
  90% { transform: scaleX(1) scaleY(1.3); }
  100% { transform: scaleX(1); }
}

.progress_info_sessions_label {
  color: white;
}

.progress_info_session_block {
  display: inline-block;
  margin-right: 0.3em;
}

.progress_info_sessions_label {
  margin-right: 0.6em;
}

.progress_info_sessions_number {
  font-size: 1.3em;
  color: #EBF55A
}

.achievement_speech_highlight .progress_info_sessions_number {
  color: rgb(226, 128, 226)
}
.achievement_speech_highlight .progress_info_sessions_label {
  color: rgb(226, 128, 226)
}

#figureOneWrapperContainer {
  /* background-color: #f2f2e1; */
  /* background-color: #ececd6; */
  background-color: #fdfdf3;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  /* border-left: 30px solid white; 
  border-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI0MS44NnB4IiBoZWlnaHQ9IjUyLjMyNnB4IiB2aWV3Qm94PSIwIDAgNDEuODYgNTIuMzI2IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA0MS44NiA1Mi4zMjYiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0wLDB2MjUuMTYzaDcuMDk3YzAuNTAxLTQuOTg5LDQuNzEyLTguODg0LDkuODMzLTguODg0YzUuNDU4LDAsOS44ODQsNC40MjUsOS44ODQsOS44ODRzLTQuNDI1LDkuODg0LTkuODg0LDkuODg0Yy01LjEyMSwwLTkuMzMyLTMuODk1LTkuODMzLTguODg0SDB2MjUuMTYzaDQxLjg2VjBIMHoiLz48L3N2Zz4=) 5% 100% repeat;
  border-image-width: 0px 0px 0px 30px; */
  /* transform: translateY(100%); */
}

.figureOneWrapperContainer {
  margin-top: 0.1em;
}

/* .workpad_shortcut {
  width: 2em;
  height: 2em;
  background-image: url("../img/pencil-square-blue.cc71864dc5fd.svg");
  background-position: center;
  background-size: contain;
  position: absolute;
  bottom: 0
} */
.workpad_shortcut {
  background-image: url("../img/pencil-square-blue.cc71864dc5fd.svg");
  background-color: white;
  border-radius: 50%;
  border: 1px solid lightgrey;
  width: 2.5em;
  height: 2.5em;
  background-repeat: no-repeat;
  position: absolute;
  bottom: 0;
  background-position: center;
  background-size: 65%;
}

/* Added to the workpad icon when the workpad figure failed to build
   (see js/src/question/workpad_new/safeWorkPad.ts): the icon keeps its look,
   with a red ring
   and a "!" badge, like the helper speaker when audio fails. Tapping retries
   the build (capped); once out of retries it is inert. */
.workpad_shortcut_failed {
  box-shadow: 0 0 0 2px #d9534f;
}

.workpad_shortcut_inert {
  cursor: default;
}

.workpad_failed_badge {
  position: absolute;
  top: -0.25em;
  right: -0.25em;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background-color: #d9534f;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  animation: fadeIn 0.3s ease-out;
}

.workpad_failed_badge span {
  font-size: 0.75em;
  font-weight: bold;
  line-height: 1;
}

.workpad_up_shortcut {
  width: 2em;
  height: 2em;
  background-image: url("../img/pencil-square-blue.cc71864dc5fd.svg");
  background-position: center;
  background-size: contain;
  position: absolute;
  bottom: 0
}

.workpad_shortcut_linearBlocks {
  background-image: url("../img/manipulative-linearBlocks.c4e8c99dc597.png");
}

.workpad_shortcut_baseTenBlocks {
  background-image: url("../img/manipulative-baseTenBlocks.1a3f49c9b878.png");
}

.workpad_shortcut_rekenrek {
  background-image: url("../img/manipulative-rekenrek.601a945470ac.png");
}

.workpad_shortcut_timesTables {
  background-image: url("../img/manipulative-timesTables.11b52637db90.png");
}

.workpad_shortcut_keypad {
  background-image: url("../img/pencil-square-blue.cc71864dc5fd.svg");
}

.workpad_hide {
  /* height: 0; */
  position: absolute;
  left: 10000px;
}

#workpad_spacer {
  height: 5em;
}


/* .workpad_shortcut_button_up {
  background-color: blue;
} */

/* .workpad_shortcut_up {
  position: absolute !important;
  top: 3em;
  left: 0em;
} */

.workpad_background {
  background-color: rgb(253, 253, 243);
}

.workpad_controls_tile {
  display: table;
  width: 100%;
  height: 100%;
}

.workpad_controls_tile_cell {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  font-size: 2.3em;
  color: blue;
  font-family: "courier_prime"
}

.workpad_tile {
  background-position: 50% 50%;
  background-size: contain;
  background-size: 110%;
  background-repeat: no-repeat;
  z-index: 1;
}

.workpad_tile_icon {
  background-size: 90%;
}

.workpad_moving_tile {
  background-color: rgba(204, 204, 204, 0.8);
  border-radius: 0.3em;
}

.workpad_controls_background {
  /* background-color: rgba(246, 244, 242, 0.95); */
  background-color: rgba(246, 244, 242, 0.95);
  border-radius: 0.2em;
  border: 1px solid #aaa;
  z-index: 0;
}

.workpad_tile_courier_prime_400_blue_0 {
  background-image: url("../img/courier-prime-400-blue-0.946e97fed005.png");
}
.workpad_tile_courier_prime_400_blue_1 {
  background-image: url("../img/courier-prime-400-blue-1.3f4be401baba.png");
}
.workpad_tile_courier_prime_400_blue_2 {
  background-image: url("../img/courier-prime-400-blue-2.ea43ab7946da.png");
}
.workpad_tile_courier_prime_400_blue_3 {
  background-image: url("../img/courier-prime-400-blue-3.feb40890d219.png");
}
.workpad_tile_courier_prime_400_blue_4 {
  background-image: url("../img/courier-prime-400-blue-4.b29b2b5b43af.png");
}
.workpad_tile_courier_prime_400_blue_5 {
  background-image: url("../img/courier-prime-400-blue-5.bb902b4ec8d9.png");
}
.workpad_tile_courier_prime_400_blue_6 {
  background-image: url("../img/courier-prime-400-blue-6.109a689e07e4.png");
}
.workpad_tile_courier_prime_400_blue_7 {
  background-image: url("../img/courier-prime-400-blue-7.e00f468ed201.png");
}
.workpad_tile_courier_prime_400_blue_8 {
  background-image: url("../img/courier-prime-400-blue-8.c969fdb3b20a.png");
}
.workpad_tile_courier_prime_400_blue_9 {
  background-image: url("../img/courier-prime-400-blue-9.b0be7b405d50.png");
}
.workpad_tile_courier_prime_400_blue_\+ {
  background-image: url("../img/courier-prime-400-blue-+.27f19645bed5.png");
}
.workpad_tile_courier_prime_400_blue_- {
  background-image: url("../img/courier-prime-400-blue--.8fc9ffc85365.png");
}
.workpad_tile_courier_prime_400_blue_÷ {
  background-image: url("../img/courier-prime-400-blue-÷.17ae4b5a1724.png");
}
.workpad_tile_courier_prime_400_blue_× {
  background-image: url("../img/courier-prime-400-blue-×.56842bfd6a6c.png");
}
.workpad_tile_courier_prime_400_blue_equals {
  background-image: url("../img/courier-prime-400-blue-equals.c465bd04b7c5.png");
}
.workpad_tile_courier_prime_400_blue_decimal {
  background-image: url("../img/courier-prime-400-blue-decimal.cbe69cc525fb.png");
}

.workpad_tile_arial_400_blue_0 {
  background-image: url("../img/arial-400-blue-0.0f03826fcd87.png");
}
.workpad_tile_arial_400_blue_1 {
  background-image: url("../img/arial-400-blue-1.fd28829fbfc3.png");
}
.workpad_tile_arial_400_blue_2 {
  background-image: url("../img/arial-400-blue-2.defe6761fe84.png");
}
.workpad_tile_arial_400_blue_3 {
  background-image: url("../img/arial-400-blue-3.e5e213eb79b4.png");
}
.workpad_tile_arial_400_blue_4 {
  background-image: url("../img/arial-400-blue-4.ed8fd0fb251c.png");
}
.workpad_tile_arial_400_blue_5 {
  background-image: url("../img/arial-400-blue-5.caf1a6e5f6fa.png");
}
.workpad_tile_arial_400_blue_6 {
  background-image: url("../img/arial-400-blue-6.af901340897d.png");
}
.workpad_tile_arial_400_blue_7 {
  background-image: url("../img/arial-400-blue-7.a0606ee5a62b.png");
}
.workpad_tile_arial_400_blue_8 {
  background-image: url("../img/arial-400-blue-8.e2440f63131e.png");
}
.workpad_tile_arial_400_blue_9 {
  background-image: url("../img/arial-400-blue-9.ed666c2644dd.png");
}
.workpad_tile_arial_400_blue_+ {
  background-image: url("../img/arial-400-blue-+.3cd04358cae2.png");
}
.workpad_tile_arial_400_blue_- {
  background-image: url("../img/arial-400-blue--.4e5ff5174056.png");
}
.workpad_tile_arial_400_blue_÷ {
  background-image: url("../img/arial-400-blue-÷.7c913a4b9c1c.png");
}
.workpad_tile_arial_400_blue_× {
  background-image: url("../img/arial-400-blue-×.a62949200222.png");
}
.workpad_tile_arial_400_blue_equals {
  background-image: url("../img/arial-400-blue-equals.fceb8b7f7c10.png");
}
.workpad_tile_arial_400_blue_decimal {
  background-image: url("../img/arial-400-blue-decimal.e58aa70dca5c.png");
}

.workpad_tile_hline {
  background-image: url("../img/courier-prime-400-blue-hline.279c6dd3e71b.png");
}
.workpad_tile_strike {
  background-image: url("../img/courier-prime-400-blue-strike.4f1d719cb97b.png");
}

.workpad_tile_divide {
  background-image: url("../img/courier-prime-400-blue-divide.8982c0c8aaf0.png");
}

.workpad_tile_courier_prime_400_blue__STRIKE,
.workpad_tile_courier_prime_400_blue__DIVIDE,
.workpad_tile_courier_prime_400_blue__HLINE{
  /* background-image: none; */
  background: none;
}
.workpad_tile_arial_400_blue__DIVIDE,
.workpad_tile_arial_400_blue__STRIKE,
.workpad_tile_arial_400_blue__HLINE{
  /* background-image: none; */
  background: none;
}

.workpad_tile_courier_prime_400_blue__DIVIDE .g_html_child_container,
.workpad_tile_courier_prime_400_blue__STRIKE .g_html_child_container,
.workpad_tile_courier_prime_400_blue__HLINE .g_html_child_container {
  position: relative;
  width: 100%;
  height: 100%;
}

.workpad_tile_courier_prime_400_blue__STRIKE .g_html_child,
.workpad_tile_courier_prime_400_blue__DIVIDE .g_html_child,
.workpad_tile_courier_prime_400_blue__HLINE .g_html_child {
  width: 200%;
  height: 100%;
  position: absolute;
  background-image: url("../img/courier-prime-400-blue-hline-move.f6c82b04eae0.png");
  background-position: center;
  background-size: 100%;
  background-repeat: no-repeat;
  left: -3%;
  bottom: -50%;
}

.workpad_tile_courier_prime_400_blue__STRIKE .g_html_child {
  width: 200%;
  height: 200%;
  background-image: url("../img/courier-prime-400-blue-strike-move.d9e002a31f6f.png");
  left: 0%;
  bottom: -75%;
}

.workpad_tile_courier_prime_400_blue__DIVIDE .g_html_child {
  width: 200%;
  height: 200%;
  background-image: url("../img/courier-prime-400-blue-divide-move.a08421cc993d.png");
  left: 0%;
  bottom: -20%;
}

.workpad_tile_arial_400_blue__DIVIDE .g_html_child_container,
.workpad_tile_arial_400_blue__STRIKE .g_html_child_container,
.workpad_tile_arial_400_blue__HLINE .g_html_child_container {
  position: relative;
  width: 100%;
  height: 100%;
}

.workpad_tile_arial_400_blue__DIVIDE .g_html_child,
.workpad_tile_arial_400_blue__STRIKE .g_html_child,
.workpad_tile_arial_400_blue__HLINE .g_html_child {
  width: 200%;
  height: 100%;
  position: absolute;
  background-image: url("../img/arial-400-blue-hline-move.f6c82b04eae0.png");
  background-position: center;
  background-size: 100%;
  background-repeat: no-repeat;
  left: -3%;
  bottom: -50%;
}

.workpad_tile_arial_400_blue__STRIKE .g_html_child {
  /* background-image: url("../img/arial-400-blue-hline-move.f6c82b04eae0.png"); */
  width: 200%;
  height: 200%;
  background-image: url("../img/arial-400-blue-strike-move.afa3604a9580.png");
  /* left: -50%;
  bottom: -120%; */
  left: 0%;
  bottom: -50%;
}
.workpad_tile_arial_400_blue__DIVIDE .g_html_child {
  /* background-image: url("../img/arial-400-blue-hline-move.f6c82b04eae0.png"); */
  width: 200%;
  height: 200%;
  background-image: url("../img/arial-400-blue-divide-move.a08421cc993d.png");
  /* left: -50%;
  bottom: -120%; */
  left: 0%;
  bottom: -50%;
}

.workpad_tile_hidden {
  display: None;
}

.workpad_disabled {
  filter: grayscale(100%);
  opacity: 0.5 !important;
}

.palette_table {
  padding: 1em;
  border: 1px solid lightgrey;
  background-color: #fdfdf3;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.palette-td-container {
  padding: 2px;
}

.palette_icon {
  width: 2.2em;
  height: 2.2em;
  background-position: center;
  background-size: 70%;
  background-repeat: no-repeat;
  border: 2px solid #fdfdf3;
  /* border: 2px solid rgba(0, 0, 0, 0); */
  /* background-color: white; */
}

.palette_icon_linearBlocks {
  background-image: url("../img/manipulative-linearBlocks.c4e8c99dc597.png");
}
.palette_icon_linearHBlocks {
  background-image: url("../img/manipulative-linearHBlocks.c4e8c99dc597.png");
}
.palette_icon_baseTenBlocks {
  background-image: url("../img/manipulative-baseTenBlocks.1a3f49c9b878.png");
}
.palette_icon_linearVBlocks {
  background-image: url("../img/manipulative-linearVBlocks.5ae08d31dd5f.png");
}
.palette_icon_keypad {
  background-image: url("../img/manipulative-keypad.7c11b2559800.png");
}
.palette_icon_timesTables {
  background-image: url("../img/manipulative-timesTables.11b52637db90.png");
}
.palette_icon_rekenrek {
  background-image: url("../img/manipulative-rekenrek.601a945470ac.png");
}

.palette_icon_selected {
  border: 2px solid darkgrey;
  border-radius: 0.2em;
}
/* .palette_table_col {
  padding: 1em;
} */

@keyframes animation-fade-in {
  0% {
    opacity: 0;
  }
  /* 80% {
    opacity: 0;
  } */
  100% {
    opacity: 1;
  }
}

.figureone_shaddow {
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  animation: animation-fade-in 0.4s ease-in-out;
}

#question-main {
  width: 100%;
  height: 100%;
}


.ghelp_grokkoli_mask {
  position: absolute;
  left: 0;
  top: 0;
  /* border: 1px solid #e1e1e1; */
  width: 2.4em;
  height: 2.4em;
  background-color: white;
  /* background-color:  var(--off-white);; */
  /* background-image: url("/static/img/grokkoli.c57621e1638b.png"); */
  /* background-position: center; */
  /* background-size: 60%; */
  /* background-repeat: no-repeat; */
  transform-origin: center;
}

.ghelp_grokkoli_white,
.ghelp_grokkoli {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: calc(var(--ghelp_size) / 2);
  border: 1px solid #e1e1e1;
  width: var(--ghelp_size);
  height: var(--ghelp_size);
  background-color: white;
  /* background-image: url("/static/img/grokkoli.c57621e1638b.png"); */
  /* background-position: center; */
  background-size: 60%;
  /* background-repeat: no-repeat; */
  transform-origin: center;
}

.ghelp_grokkoli_white {
  background-color: #FFF4
}

.ghelp_grokkoli_icon_white,
.ghelp_grokkoli_icon {
  width: var(--ghelp_size);
  height: var(--ghelp_size);
  background-image: url("/static/img/grokkoli_icon_green.700c1d6fd7fc.png");
  background-position: center;
  background-size: 70%;
  background-repeat: no-repeat;
  transform-origin: center;
  transition: transform 0.2s;
}

.ghelp_grokkoli_icon_white {
  background-image: url("/static/img/grokkoli_icon_grey.8a4de1983a07.png");
}

.ghelp_menu {
  position: absolute;
  left: var(--ghelp_size);
  top: calc((var(--ghelp_size) - var(--ghelp_icon_size)) / 2);
  /* background-color: white; */
  /* border: 1px solid #e1e1e1; */
  /* border-radius: 0.5em; */
  display: table;
  /* border-spacing: 0.5em 0; */
}

@keyframes ghelp_bubble_press {
  0% {
    transform-origin: center;
    transform: scale(1, 1);
  }

  50% {
    transform-origin: center;
    transform: scale(0.9, 0.9);
  }

  100% {
    transform-origin: center;
    transform: scale(1, 1);
  }
}

/* @keyframes ghelp_menu_talking {
  0% {
    left: var(--ghelp_size)
  }

  50% {
    left: calc(var(--ghelp_size) * 1.1)
  }

  100% {
    left: var(--ghelp_size)
  }
} */
@keyframes ghelp_menu_line_talking {
  0% {
    width: calc(100% - calc(var(--ghelp_icon_size) * 1) - var(--ghelp_icon_space));
    left: 0;
  }

  50% {
    width: calc(100% - calc(var(--ghelp_icon_size) * 1.1) - var(--ghelp_icon_space));
    left: calc(var(--ghelp_icon_size) * 1.12 - var(--ghelp_icon_size));
  }

  100% {
    width: calc(100% - calc(var(--ghelp_icon_size) * 1) - var(--ghelp_icon_space));
    left: 0;
  }
}
@keyframes ghelp_talking {
  0% {
    transform-origin: center;
    transform: scale(1, 1);
  }

  50% {
    transform-origin: center;
    transform: scale(1.2, 1.2);
  }

  100% {
    transform-origin: center;
    transform: scale(1, 1);
  }
}

@keyframes ghelp_menu_animate_show {
  0% {
    transform-origin: center left;
    transform: scale(0, 0);
  }
  100% {
    transform-origin: center left;
    transform: scale(1, 1);
  }
}

@keyframes ghelp_animate_show {
  0% {
    transform-origin: 1.3em 1.3em;
    transform: scale(0, 0);
  }

  50% {
    transform-origin: 1.3em 1.3em;
    transform: scale(1.5, 1.5);
  }
  100% {
    transform-origin: 1.3em 1.3em;
    transform: scale(1, 1);
  }
}

@keyframes ghelp_menu_animate_hide {
  0% {
    transform-origin: top left;
    transform: scale(1, 1);
  }

  100% {
    transform-origin: top left;
    transform: scale(0, 0);
  }
}

.ghelp_menu_hide {
  transform: scale(0, 0);
}

.ghelp_menu_animate_hide {
  animation: ghelp_menu_animate_hide 1s ease-in-out;
}

.ghelp_menu_animate_show {
  animation: ghelp_menu_animate_show 1s ease-in-out;
}
.ghelp_animate_show {
  animation: ghelp_animate_show 0.5s ease-in-out;
}
.ghelp_animate_press {
  animation: ghelp_bubble_press 0.2s ease-in-out;
}
.ghelp_talking {
  animation: ghelp_talking 2s infinite ease-in-out;
}
.ghelp_menu_line_talking {
  animation: ghelp_menu_line_talking 2s infinite ease-in-out;
}

.ghelp {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: calc(-1 * var(--ghelp_size));
}

/* Right cluster — mirrors .ghelp but anchors to the RIGHT edge of the figure
   window, in the strip above it (already reserved by .f1_wrapper's top margin,
   so nothing here adds page height). Holds the honing Don't-know button.
   Vertically centered against the brain the
   same way .ghelp_menu is. pointer-events:none on the wrapper so only the
   controls themselves are interactive. */
.gright {
  position: absolute;
  right: 0;
  top: calc((var(--ghelp_size) - var(--ghelp_icon_size)) / 2 - var(--ghelp_size));
  height: var(--ghelp_icon_size);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--ghelp_icon_space);
  pointer-events: none;
}
.gright > * {
  pointer-events: auto;
}

/* Helper tools beside the question. When the screen is wide enough for the
   question to grow to the top bar with room to spare either side,
   keyboardViewport.ts sets .question-tools-side on the .f1_wrapper: the strip
   above the figure goes, the brain and its icons stack in a column to the
   left of the figure, and .gright (Don't know) stacks to its right.
   The 12px top margin and the gap/brain sizes are mirrored in keyboardViewport.ts. */
.f1_wrapper.question-tools-side {
  /* The offset centres a question that is width-limited in the height left. */
  margin-top: calc(12px + var(--question-tools-side-offset, 0px));
  /* Not the landscape calc((83vh - 3em)/0.667) width: the fit's max-width
     (--question-figure-max-width) sizes it to the height now available. */
  width: 90vw;
}
.question-tools-side .ghelp {
  /* keyboardViewport.ts centres the column beside the figure and lifts it
     into any space above the figure. */
  top: var(--question-tools-side-left-top, 0px);
  left: calc(-1 * var(--ghelp_size) - var(--question-tools-side-left-gap, var(--ghelp_side_gap)));
  width: var(--ghelp_size);
}
.question-tools-side .ghelp_menu {
  left: 0;
  top: var(--ghelp_size);
  width: var(--ghelp_size);
  display: block;
}
.question-tools-side .ghelp_menu_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: 0;
  padding-top: calc(var(--ghelp_icon_space) / 2);
}
/* The connector runs down from the brain instead of across. */
.question-tools-side .ghelp_menu_line {
  top: 0;
  left: 50%;
  width: 0;
  height: calc(100% - var(--ghelp_icon_size) - var(--ghelp_icon_space) / 2);
  border-top: none;
  border-left: 1px solid #e1e1e1;
  animation: none;
}
.question-tools-side .ghelp_menu_line_hide {
  border-left: none;
}
.question-tools-side .ghelp_icon_container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.question-tools-side .ghelp_speech_icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Spacers between icons become vertical, and half as deep so a full set of
   icons still fits beside the figure. */
.question-tools-side .ghelp_icon_space {
  display: block;
  width: auto;
  height: calc(var(--ghelp_icon_space) / 2);
  animation: none;
}
/* Positioned against .ghelp_icon_container, after its first spacer. */
.question-tools-side .ghelp_icon_speaker,
.question-tools-side .ghelp-speaker-ring {
  left: 0;
  top: calc(var(--ghelp_icon_space) / 2);
}
.question-tools-side .ghelp_audio_failed_badge {
  left: calc(var(--ghelp_icon_size) - var(--badge_size) * 0.75);
  top: calc(var(--ghelp_icon_space) / 2 - var(--badge_size) * 0.25);
}
.question-tools-side .ghelp_tool_slot {
  display: block;
}
.question-tools-side .ghelp_tool_slot > * {
  margin: calc(var(--ghelp_icon_space) / 2) 0;
}
.question-tools-side .ghelp_menu_animate_show {
  animation-name: ghelp_menu_animate_show_side;
}
.question-tools-side .ghelp_menu_animate_hide {
  animation-name: ghelp_menu_animate_hide_side;
}
@keyframes ghelp_menu_animate_show_side {
  0% { transform-origin: top center; transform: scale(0, 0); }
  100% { transform-origin: top center; transform: scale(1, 1); }
}
@keyframes ghelp_menu_animate_hide_side {
  0% { transform-origin: top center; transform: scale(1, 1); }
  100% { transform-origin: top center; transform: scale(0, 0); }
}
.question-tools-side .gright {
  top: var(--question-tools-side-right-top, 0px);
  right: auto;
  left: calc(100% + var(--question-tools-side-right-gap, var(--ghelp_side_gap)));
  height: auto;
  flex-direction: column;
  align-items: flex-start;
}

/* Honing "Don't know" pill (helper/dontKnowButton.tsx). Same palette as the
   FigureOne button it replaced: light grey fill, Grokkoli blue text. */
.gdontknow {
  box-sizing: border-box;
  height: var(--ghelp_icon_size);
  line-height: var(--ghelp_icon_size);
  padding: 0 1em;
  border-radius: calc(var(--ghelp_icon_size) / 2);
  border: 1px solid #e1e1e1;
  background-color: #e6e6e6;
  color: #0020b0;
  font-size: 1em;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  /* Opacity (and the fade duration, --gdontknow_fade) are set inline by the
     component: 0.6 when disabled, whatever question JS asked for otherwise. */
  transition: transform 0.15s ease, opacity var(--gdontknow_fade, 0s) ease;
}
.gdontknow:active { transform: scale(0.95); }
/* Disabled (interaction off / answer submitted) or faded out by question JS.
   A faded pill keeps its box so the fade is visible and the cluster doesn't
   reflow. */
.gdontknow_inactive {
  pointer-events: none;
  cursor: default;
}
/* Attention pulse (figure.custom.dontKnow.pulse()), the HTML stand-in for the
   FigureOne element pulse speech used to trigger with |v:dontknow|. */
@keyframes gdontknow_pulse {
  0% { transform: scale(1); }
  25% { transform: scale(1.12); }
  50% { transform: scale(1); }
  75% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.gdontknow_pulse {
  animation: gdontknow_pulse 0.8s ease-in-out;
}

/* Scratchpad and calculator slots in the helper icon row (helper.tsx). Each
   is a table cell like .ghelp_icon_container; the margin matches the
   IconSpace either side of the speaker/guide icons, and an empty or hidden
   slot collapses to nothing. */
.ghelp_tool_slot {
  display: table-cell;
  position: relative;
  z-index: 1;
  vertical-align: middle;
}
.ghelp_tool_slot > * {
  margin: 0 var(--ghelp_icon_space);
}
.ghelp_tool_slot .workpad_shortcut {
  position: relative;
  bottom: auto;
  box-sizing: border-box;
  width: var(--ghelp_icon_size);
  height: var(--ghelp_icon_size);
  border-color: #e1e1e1;
}
.ghelp_tool_slot .workpad_hide {
  display: none;
}

.gcalc_icon {
  box-sizing: border-box;
  width: var(--ghelp_icon_size);
  height: var(--ghelp_icon_size);
  border-radius: calc(var(--ghelp_icon_size) / 2);
  border: 1px solid #e1e1e1;
  background-color: white;
  background-image: url("../img/calculator.be3c56447786.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 55%;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.gcalc_icon:active { transform: scale(0.95); }
.gcalc_icon_active { background-color: #eef0ff; border-color: #c7ccf5; }

.question-scene-zoom-toggle {
  box-sizing: border-box;
  width: var(--ghelp_icon_size);
  height: var(--ghelp_icon_size);
  padding: 0.48em;
  border: 1px solid #d3d9e5;
  border-radius: 50%;
  background: #fff;
  color: #0000ff;
  cursor: pointer;
  touch-action: none;
}
.question-scene-zoom-toggle svg { display: block; width: 100%; height: 100%; }
.question-scene-zoom-toggle-active { background: #def5ed; border-color: #68a998; }
/* A frame outside the question makes scene zoom visible even when the current
   content has few obvious size cues. Outline and shadow do not affect layout. */
#figureOneContainer.question-scene-zoomed {
  /* The help and zoom controls extend above the figure, so the container
     must remain unclipped. Its outline follows this radius. */
  border-radius: var(--scene-zoom-radius, 0px);
  outline: 1px solid var(--scene-zoom-outline, rgba(45, 45, 45, 0.32));
  outline-offset: 0;
  box-shadow: var(--scene-zoom-halo, 0 0 9px 3px rgba(30, 30, 30, 0.48));
}
/* A fine highlight and underside shade give the rounded frame a glass rim. */
#figureOneContainer.question-scene-zoomed::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: var(--scene-zoom-radius, 0px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 -1px 0 rgba(30, 30, 30, 0.08);
  pointer-events: none;
}
/* Keep floating HTML controls, including the calculator, above the rim. */
#figureOneContainer.question-scene-zoomed > .figureone__html {
  z-index: 1;
}
/* Round only the drawing surfaces; the HTML layer holds controls outside the
   figure and must keep its normal overflow. */
#figureOneContainer.question-scene-zoomed > .figureone__gl,
#figureOneContainer.question-scene-zoomed > .figureone__text {
  border-radius: var(--scene-zoom-radius, 0px);
}
/* Keep one wider drawing buffer while the visible window opens around it. */
#figureOneContainer.question-scene-wide > .figureone__gl,
#figureOneContainer.question-scene-wide > .figureone__text {
  left: 50%;
  width: var(--scene-draw-width);
  transform: translateX(-50%);
}
/* Center the HTML layer as the drawing area widens during scene zoom. */
#figureOneContainer.question-scene-wide > .figureone__html {
  left: calc(50% - var(--scene-draw-width) / 2);
  width: var(--scene-draw-width);
  transform: none;
}
/* Keep help and zoom controls anchored to the original window. */
#figureOneContainer.question-scene-wide > .figureone__html #question-main {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--scene-base-width);
  height: 100%;
  transform: translateX(-50%);
}
#figureOneContainer.question-scene-wide.question-scene-zoomed {
  outline: none;
  box-shadow: none;
}
#figureOneContainer.question-scene-wide.question-scene-zoomed::after {
  inset: 0 auto 0 50%;
  width: var(--scene-visible-width);
  box-sizing: border-box;
  transform: translateX(-50%);
  border: 1px solid var(--scene-zoom-outline);
  box-shadow: var(--scene-zoom-halo), inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 -1px 0 rgba(30, 30, 30, 0.08);
}
.question-scene-pan-map {
  position: relative;
  flex: 0 0 auto;
  width: var(--scene-pan-map-width);
  height: var(--scene-pan-map-height);
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid rgba(45, 45, 45, 0.55);
  border-radius: var(--scene-pan-map-radius);
  background: rgba(255, 255, 255, 0.62);
  box-shadow: 0 2px 6px rgba(30, 30, 30, 0.12);
  opacity: 0;
  pointer-events: none;
  touch-action: none;
  cursor: grab;
  user-select: none;
  transition: opacity 0.2s ease;
}
/* Not zoomed: no room taken in the helper icon row. Displayed again before
   mountSceneZoom measures it (it mounts after the enabling render). */
.question-scene-pan-map-collapsed { display: none; }
/* Grow into / shrink out of the icon row like the guide audio icons
   (animate_icon_grow / animate_icon_shrink), including the slot margin. */
.question-scene-pan-map-grow { animation: scene_pan_map_grow 0.5s ease-in-out forwards; }
.question-scene-pan-map-shrink { animation: scene_pan_map_shrink 0.5s ease-in-out forwards; }
@keyframes scene_pan_map_grow {
  0% { transform: scale(0, 0); width: 0; margin: 0; border-width: 0; }
  100% { transform: scale(1, 1); width: var(--scene-pan-map-width); margin: 0 var(--ghelp_icon_space); border-width: 1px; }
}
@keyframes scene_pan_map_shrink {
  0% { transform: scale(1, 1); width: var(--scene-pan-map-width); margin: 0 var(--ghelp_icon_space); border-width: 1px; }
  100% { transform: scale(0, 0); width: 0; margin: 0; border-width: 0; }
}
.question-scene-pan-map-visible { opacity: 1; pointer-events: auto; }
.question-scene-pan-map-panning { cursor: grabbing; }
.question-scene-pan-map:focus-visible { outline: 2px solid #006d63; outline-offset: 2px; }
.question-scene-pan-map-view {
  position: absolute;
  box-sizing: border-box;
  border: 2px solid rgba(0, 109, 99, 0.8);
  border-radius: 3px;
  background: rgba(0, 109, 99, 0.16);
}
@media (prefers-reduced-motion: reduce) {
  .question-scene-pan-map { transition: none; }
  .question-scene-pan-map-grow { animation: none; }
  .question-scene-pan-map-shrink { animation: none; display: none; }
}
.question-scene-keyboard-clip,
.question-scene-keyboard-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.question-scene-keyboard-clip { overflow: visible; }
.question-scene-keyboard-stage { transform-origin: center center; }
/* Keyboard and scratchpad tile positions use the original FigureOne window. */
#figureOneContainer.question-scene-wide .question-scene-keyboard-stage {
  left: calc((100% - var(--scene-base-width)) / 2);
  right: auto;
  width: var(--scene-base-width);
}
#figureOneContainer.question-scene-zoomed .question-scene-keyboard-clip {
  overflow: hidden;
  border-radius: var(--scene-zoom-radius, 0px);
}
.question-scene-keyboard-stage .f1_keyboard,
.question-scene-keyboard-stage .entryfield_keyboard,
.question-scene-keyboard-stage .play_container,
.question-scene-keyboard-stage .workpad_tile,
.question-scene-keyboard-stage .workpad_controls_background { pointer-events: auto; }
.question-scene-keyboard-stage .workpad_tile { touch-action: none; }
/* No touch-action: none on the zoomed .figureone__html layer: its .ghelp
   overlay extends up over the help strip, and touch-action applies to every
   descendant, which stopped the page scrolling from above the figure. The
   zoom code cancels in-figure pan/pinch touches in JS instead. */
#figureOneContainer.question-scene-pan-ready > .figureone__html { cursor: grab; }
#figureOneContainer.question-scene-panning > .figureone__html { cursor: grabbing; }
.question-scene-zoom-toggle:focus-visible { outline: 2px solid #27416b; outline-offset: 3px; }


.ghelp_question_mark_container {
  font-weight: bolder;
}

.ghelp_question_mark {
  background-image: url("../img/question_mark-blue.88c9a21c3e61.svg");
  background-repeat: no-repeat;
  background-size: 80%;
  background-position: center;
  width: 100%;
  height: 100%;
  display: block;
}


.ghelp_menu_hide_complete {
  display: none;
}

/* The question's audio failed to load after all retries (helper.tsx
   Speaker, figure.helper.audioFailed): a red ring on the speaker and a "!"
   badge over its top-right. Tapping the speaker plays again, re-fetching the
   audio.
   No `position` on the icon: the speaker strokes (.ghelp_icon_speaker) and
   the badge are absolutely positioned against .ghelp_icon_container, and
   making the icon their containing block shifted the strokes right by
   --ghelp_icon_space. */
.ghelp_icon_audio_failed {
  box-shadow: 0 0 0 2px #d9534f;
}

.ghelp_audio_failed_badge {
  --badge_size: calc(var(--ghelp_icon_size) * 0.42);
  position: absolute;
  /* Top-right of the icon, which sits after an IconSpace in the container. */
  left: calc(var(--ghelp_icon_space) + var(--ghelp_icon_size) - var(--badge_size) * 0.75);
  top: calc(var(--badge_size) * -0.25);
  z-index: 2;
  width: var(--badge_size);
  height: var(--badge_size);
  border-radius: 50%;
  background-color: #d9534f;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  animation: fadeIn 0.3s ease-out;
}

/* Sized on a child: the size variables are em-based, so a font-size on the
   badge itself would rescale the badge and move it. */
.ghelp_audio_failed_badge span {
  font-size: calc(var(--ghelp_icon_size) * 0.32);
  font-weight: bold;
  line-height: 1;
}

.ghelp_icon_container {
  display: table-cell;
  z-index: 1;
  position: relative;
  vertical-align: middle;
}

.ghelp_icon_white,
.ghelp_icon {
  display: table-cell;
  width: var(--ghelp_icon_size);
  height: var(--ghelp_icon_size);
  font-size: 1em;
  border-radius: calc(var(--ghelp_icon_size) / 2);
  border: 1px solid #e1e1e1;
  vertical-align: middle;
  background-color: white;
}

.ghelp_icon_white {
  background-color: #FFF4
}

.ghelp_icon_speaker {
  background-repeat: no-repeat;
  background-size: 70%;
  background-position: center;
  /* background-image: url("../img/speaker.287f35b3e763.svg"); */
  /* width: 100%;
  height: 100%; */
  width: var(--ghelp_icon_size);
  height: var(--ghelp_icon_size);
  position: absolute;
  left: var(--ghelp_icon_space);
  top: 0;
}
.ghelp_icon_speaker-0 {
  background-image: url("../img/speaker-step-1.f16a8002c49b.svg");
}
.ghelp_icon_speaker-1 {
  background-image: url("../img/speaker-step-2.88a1d8089f65.svg");
}
.ghelp_icon_speaker-2 {
  background-image: url("../img/speaker-step-3.7e3a10f79fcf.svg");
}
.ghelp_icon_speaker-3 {
  background-image: url("../img/speaker.287f35b3e763.svg");
}

.ghelp_icon_speaker-0-white {
  background-image: url("../img/speaker-step-1-white.b8e0ca5b8684.svg");
}
.ghelp_icon_speaker-1-white {
  background-image: url("../img/speaker-step-2-white.d388d2ad46f0.svg");
}
.ghelp_icon_speaker-2-white {
  background-image: url("../img/speaker-step-3-white.323cab6b5b71.svg");
}
.ghelp_icon_speaker-3-white {
  background-image: url("../img/speaker-white.fac5173e37bd.svg");
}

.ghelp_icon_grow {
  animation: animate_icon_grow 0.5s ease-in-out forwards;
}

.ghelp_icon_hide {
  display: none;
}

.ghelp_icon_shrink {
  animation: animate_icon_shrink 0.5s ease-in-out forwards;
}

.ghelp_icon_space {
  width: var(--ghelp_icon_space);
  display: table-cell;
}

.ghelp_icon_space_grow {
  animation: animate_icon_space_grow 0.5s ease-in-out forwards;
}
.ghelp_icon_space_shrink {
  animation: animate_icon_space_shrink 0.5s ease-in-out forwards;
}

@keyframes animate_icon_grow {
  0% {
    transform-origin: center;
    transform: scale(0, 0);
    width: 0;
    border: 0px solid #e1e1e1;
  }
  100% {
    transform-origin: center;
    transform: scale(1, 1);
    width: var(--ghelp_icon_size);
    border: 1px solid #e1e1e1;
  }
}

@keyframes animate_icon_shrink {
  0% {
    transform-origin: center;
    transform: scale(1, 1);
    width: var(--ghelp_icon_size);
    display: table-cell;
    border: 1px solid #e1e1e1;
  }
  100% {
    transform-origin: center;
    transform: scale(0, 0);
    width: 0;
    display: table-cell;
    border: 0px solid #e1e1e1;
  }
}

@keyframes animate_icon_space_grow {
  0% {
    transform-origin: center;
    transform: scale(0, 0);
    width: 0;
  }
  100% {
    transform-origin: center;
    transform: scale(1, 1);
    width: 0.7em;
  }
}

@keyframes animate_icon_space_shrink {
  0% {
    transform-origin: center;
    transform: scale(1, 1);
    width: 0.7em;
    display: table-cell;
  }
  100% {
    transform-origin: center;
    transform: scale(0, 0);
    width: 0;
    display: table-cell;
  }
}

.ghelp_speech_icon {
  background-repeat: no-repeat;
  background-size: 80%;
  background-position: center;
}

.ghelp_icon_speaker_anim {
  animation: animate_speaker_waves 1.6s linear infinite;
}

.ghelp_icon_speaker_anim-0 {
  animation: animate_speaker_waves-0 1.6s linear infinite;
}
.ghelp_icon_speaker_anim-1 {
  animation: animate_speaker_waves-1 1.6s linear infinite;
}
.ghelp_icon_speaker_anim-2 {
  animation: animate_speaker_waves-2 1.6s linear infinite;
}
.ghelp_icon_speaker_anim-3 {
  animation: animate_speaker_waves-3 1.6s linear infinite;
}

@keyframes animate_speaker_waves-0 {
  0% { opacity: 0; }
  75% { opacity: 0; }
  80% { opacity: 1 };
}
@keyframes animate_speaker_waves-1 {
  0% { opacity: 0; }
  25% { opacity: 0; }
  30% { opacity: 1 };
}
@keyframes animate_speaker_waves-2 {
  0% { opacity: 0; }
  50% { opacity: 0; }
  55% { opacity: 1 };
}
@keyframes animate_speaker_waves-3 {
  0% { opacity: 0; }
  75% { opacity: 0; }
  80% { opacity: 1 };
}
@keyframes animate_speaker_waves {
  20% {
    background-image: url("../img/speaker-step-1.f16a8002c49b.svg");
  }
  40% {
    background-image: url("../img/speaker-step-2.88a1d8089f65.svg");
  }
  60% {
    background-image: url("../img/speaker-step-3.7e3a10f79fcf.svg");
  }
  80% {
    background-image: url("../img/speaker.287f35b3e763.svg");
  }
}

.ghelp_speech_icon_strokes {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.2em;
}

.ghelp_speech_icon_stroke_width {
  display: block;
  margin: 0 0.03em;
  width: 0.1em;
}
.ghelp_menu_container {
  position: relative;
  padding-left: 0.7em;
}
.ghelp_menu_line {
  width: calc(100% - var(--ghelp_icon_size) - var(--ghelp_icon_space));
  position: absolute;
  top: 50%;
  left: 0;
  border-top: 1px solid #e1e1e1;
  height: 0; 
}
.ghelp_menu_line_hide {
  border-top: none;
}
.ghelp_hide {
  display: none;
}
/* .ghelp_speech_icon .ghelp_speech_icon_stroke,
.ghelp_speech_icon .ghelp_speech_icon_stroke_anim {
  display: block;
  height: 100%;
  border-radius: 0.05em;
} */
.ghelp_speech_icon_4 {
  background: #00EDDA;
}
.ghelp_speech_icon_2 {
  background: #FFA601
}
.ghelp_speech_icon_3 {
  background: #9E01FF
}
.ghelp_speech_icon_0 {
  background: #0701FF
}
.ghelp_speech_icon_6 {
  background: #52C643
}
.ghelp_speech_icon_1 {
  background: #FF40E6
}
.ghelp_speech_icon_7 {
  background: #01A2FF
}
.ghelp_speech_icon_5 {
  background: #FF0105
}

.ghelp_speech_icon_stroke_width_grow {
  animation: animate_speech_icon_stroke_width_grow 0.5s ease-in-out forwards;
}

@keyframes animate_speech_icon_stroke_width_grow {
  0% {
    width: 0;
    margin: 0 0;
  }
  100% {
    width: 0.1em;
    margin: 0 0.03em;
  }
}

.ghelp_speech_icon_stroke_width_shrink {
  animation: animate_speech_icon_stroke_width_shrink 0.5s ease-in-out forwards;
}
@keyframes animate_speech_icon_stroke_width_shrink {
  0% {
    width: 0.1em;
    margin: 0 0.03em;
    display: block;
  }
  100% {
    width: 0em;
    margin: 0 0;
    display: block;
  }
}

.ghelp_speech_icon_stroke_wave_1,
.ghelp_speech_icon_stroke_wave_2,
.ghelp_speech_icon_stroke_wave_3,
.ghelp_speech_icon_stroke_wave_4 {
  animation: animate_speech_icon_stroke 1.2s linear infinite;
}

.ghelp_speech_icon_stroke_1 {
  display: block;
  height: 0.2em;
  border-radius: 0.05em;
}

.ghelp_speech_icon_stroke_2 {
  display: block;
  height: 0.5em;
  border-radius: 0.05em;
}
.ghelp_speech_icon_stroke_3 {
  display: block;
  height: 0.8em;
  border-radius: 0.05em;
}
.ghelp_speech_icon_stroke_4 {
  display: block;
  height: 1em;
  border-radius: 0.05em;
}

@keyframes animate_speech_icon_stroke {
  0% {
    height: 1em;
    border-radius: 0.05em;
  }
  50% {
    height: 0.2em;
    border-radius: 0.05em;
  }
  100% {
    height: 1em;
    border-radius: 0.05em;
  }
}

.ghelp_speech_icon_stroke_wave_1 {
  display: block;
  animation-delay: -0.6s;
}

.ghelp_speech_icon_stroke_wave_2 {
  display: block;
  animation-delay: -0.8s;
}
.ghelp_speech_icon_stroke_wave_3 {
  display: block;
  animation-delay: -1s;
}
.ghelp_speech_icon_stroke_wave_4 {
  display: block;
  animation-delay: -1.2s;
}

@keyframes flashBackground {
  0% {
    background-color: rgb(246, 247, 247);
  }
  10% {
    background-color: #eee;
  }
  100% {
    background-color: rgb(246, 247, 247);
  }
}

/* Apply the animation to the desired element */
.flash-disabled {
  animation: flashBackground 1s ease-in-out !important;
}