:root {
  --ghelp_icon_size: 2.4em;
  --ghelp_size: 3.3em;
  --ghelp_icon_space: 0.7em;
}

.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;
}

.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%;
}

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

/* montserrat-200 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 200;
  src: url("../webfonts/montserrat/montserrat-v24-latin-200.701cc5a8857d.eot"); /* IE9 Compat Modes */
  src: local(''),
       url("../webfonts/montserrat/montserrat-v24-latin-200.701cc5a8857d.eot?#iefix") format('embedded-opentype'), /* IE6-IE8 */
       url("../webfonts/montserrat/montserrat-v24-latin-200.01307365f141.woff2") format('woff2'), /* Super Modern Browsers */
       url("../webfonts/montserrat/montserrat-v24-latin-200.0cda8b0e1b34.woff") format('woff'), /* Modern Browsers */
       url("../webfonts/montserrat/montserrat-v24-latin-200.3171a22ba7c1.ttf") format('truetype'), /* Safari, Android, iOS */
       url("../webfonts/montserrat/montserrat-v24-latin-200.71e65732b6e7.svg#Montserrat") format('svg'); /* Legacy iOS */
}
/* montserrat-regular - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url("../webfonts/montserrat/montserrat-v24-latin-regular.db560a8ec59b.eot"); /* IE9 Compat Modes */
  src: local(''),
       url("../webfonts/montserrat/montserrat-v24-latin-regular.db560a8ec59b.eot?#iefix") format('embedded-opentype'), /* IE6-IE8 */
       url("../webfonts/montserrat/montserrat-v24-latin-regular.c2a023838175.woff2") format('woff2'), /* Super Modern Browsers */
       url("../webfonts/montserrat/montserrat-v24-latin-regular.43fbfd3cabca.woff") format('woff'), /* Modern Browsers */
       url("../webfonts/montserrat/montserrat-v24-latin-regular.f776e99bf87a.ttf") format('truetype'), /* Safari, Android, iOS */
       url("../webfonts/montserrat/montserrat-v24-latin-regular.f59907d8d8a6.svg#Montserrat") format('svg'); /* Legacy iOS */
}
/* montserrat-300 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  src: url("../webfonts/montserrat/montserrat-v24-latin-300.5be6c8aff6ec.eot"); /* IE9 Compat Modes */
  src: local(''),
       url("../webfonts/montserrat/montserrat-v24-latin-300.5be6c8aff6ec.eot?#iefix") format('embedded-opentype'), /* IE6-IE8 */
       url("../webfonts/montserrat/montserrat-v24-latin-300.2d03e34d7b61.woff2") format('woff2'), /* Super Modern Browsers */
       url("../webfonts/montserrat/montserrat-v24-latin-300.faf8314d7c33.woff") format('woff'), /* Modern Browsers */
       url("../webfonts/montserrat/montserrat-v24-latin-300.519d5b5672bd.ttf") format('truetype'), /* Safari, Android, iOS */
       url("../webfonts/montserrat/montserrat-v24-latin-300.70ff271eb84c.svg#Montserrat") format('svg'); /* Legacy iOS */
}
/* montserrat-500 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  src: url("../webfonts/montserrat/montserrat-v24-latin-500.da6dd06a4dce.eot"); /* IE9 Compat Modes */
  src: local(''),
       url("../webfonts/montserrat/montserrat-v24-latin-500.da6dd06a4dce.eot?#iefix") format('embedded-opentype'), /* IE6-IE8 */
       url("../webfonts/montserrat/montserrat-v24-latin-500.0176b65a6686.woff2") format('woff2'), /* Super Modern Browsers */
       url("../webfonts/montserrat/montserrat-v24-latin-500.4d464113d50c.woff") format('woff'), /* Modern Browsers */
       url("../webfonts/montserrat/montserrat-v24-latin-500.ec4a9bdbad64.ttf") format('truetype'), /* Safari, Android, iOS */
       url("../webfonts/montserrat/montserrat-v24-latin-500.29818adb0193.svg#Montserrat") format('svg'); /* Legacy iOS */
}
/* montserrat-600 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  src: url("../webfonts/montserrat/montserrat-v24-latin-600.16dabe9924b0.eot"); /* IE9 Compat Modes */
  src: local(''),
       url("../webfonts/montserrat/montserrat-v24-latin-600.16dabe9924b0.eot?#iefix") format('embedded-opentype'), /* IE6-IE8 */
       url("../webfonts/montserrat/montserrat-v24-latin-600.2cf5a6461ec7.woff2") format('woff2'), /* Super Modern Browsers */
       url("../webfonts/montserrat/montserrat-v24-latin-600.4c5e4044e96d.woff") format('woff'), /* Modern Browsers */
       url("../webfonts/montserrat/montserrat-v24-latin-600.1513a084cbf2.ttf") format('truetype'), /* Safari, Android, iOS */
       url("../webfonts/montserrat/montserrat-v24-latin-600.bb0e09eec706.svg#Montserrat") format('svg'); /* Legacy iOS */
}
/* montserrat-700 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url("../webfonts/montserrat/montserrat-v24-latin-700.49f826f538ab.eot"); /* IE9 Compat Modes */
  src: local(''),
       url("../webfonts/montserrat/montserrat-v24-latin-700.49f826f538ab.eot?#iefix") format('embedded-opentype'), /* IE6-IE8 */
       url("../webfonts/montserrat/montserrat-v24-latin-700.eb7d03ac4d06.woff2") format('woff2'), /* Super Modern Browsers */
       url("../webfonts/montserrat/montserrat-v24-latin-700.3981ddcf7bb1.woff") format('woff'), /* Modern Browsers */
       url("../webfonts/montserrat/montserrat-v24-latin-700.f691756e62b0.ttf") format('truetype'), /* Safari, Android, iOS */
       url("../webfonts/montserrat/montserrat-v24-latin-700.e3b6de0d4c4e.svg#Montserrat") format('svg'); /* Legacy iOS */
}

@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 {
  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;
}

.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);
}

.figureone_captions {
  background-color: black;
  opacity: 0.5;
  color: white;
  font-size: 1.5em;
  text-align: center;
  width: 100%;
  position: absolute;
  left: 0;
  top: -1.5em;
}
/* 
.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.5c632a54d2e7.svg");
}

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

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

.dim {
  opacity: 0.6;
}

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

.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_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;
}

.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}
} */
#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_icon {
  padding-left: 2em;
}

.achievement_table_td_new {
  font-size: 1.4em;
  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;
}

.achievement_table_div_icon {
  width: fit-content;
}

.achievements_table_small,
.achievements_table_vsmall,
.achievements_table {
  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 {
  display: table-cell;
  vertical-align: top;
  padding-left: 1em;
  padding-right: 1em;
}

.achievements_table_columns {
  margin-left: auto;
  margin-right: auto;
  display: table;
}

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


.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%;
}

.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));
}


.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;
}

.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;
}