/*!**********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./clients/app/src/shared/components/Toast/styles/toast.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************/
@keyframes iconInAnimation {
  from {
    transform: scale(0);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

.status-icon {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  animation: iconInAnimation 0.2s ease-out forwards;
  border-radius: 50%;
  opacity: 0;
}

.animated-icon {
  display: block;
  position: relative;
  position: relative;
  min-width: 24px;
  height: 100%;
  animation: iconInAnimation 150ms ease-out forwards;
  animation-timing-function: cubic-bezier(0.1, -0.6, 0.2, 0);
  font-size: 18px;
}

.animated-icon > span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.dismiss-toast {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  padding: 0;
  transition: 150ms all ease-in-out;
  border: 0;
  border-radius: 50%;
  outline: none;
  background: rgba(255, 255, 255, 0.25);
  cursor: pointer;
}

.dismiss-toast > svg {
  transform: scale(0.86);
}

.dismiss-toast:hover {
  opacity: 0.8;
}
/*!*********************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/less-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./clients/shared/less/student.less ***!
  \*********************************************************************************************************************************************************************************************************************************************************/
/* ========================================================================
   Component: Base
 ========================================================================== */
/*
 * 1. Normalizes default `font-family` and sets `font-size` here to support `rem` units
 * 2. Prevents iOS text size adjust after orientation change, without disabling user zoom
 * 3. Style
 */
html {
  /* 1 */
  font: normal 14px / 20px "Open Sans", Arial, sans-serif;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  /* 3 */
  background: #fff;
  color: #273B4C;
  width: 100%;
  height: 100%;
}
/*
 * Removes default margin.
 * Make the body full screen
 */
body {
  margin: 0;
  width: 100%;
  height: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
* {
  box-sizing: border-box;
}
/* Links
 ========================================================================== */
/*
 * Remove the gray background color from active links in IE 10.
 */
a {
  background: transparent;
}
/*
 * Improves readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
  outline: 0;
}
/*
 * Style
 */
a,
.link {
  color: #6d9ec4;
  text-decoration: underline;
  cursor: pointer;
  transition: color 0.2s ease;
}
a.special,
.link.special {
  text-decoration: underline;
}
a:hover,
.link:hover {
  text-decoration: none;
  background-color: none;
  /*padding: @base-link-hover-padding;*/
}
/* Text-level semantics
 ========================================================================== */
/*
 * Addresses style set to `bolder` in Firefox
 */
b,
strong {
  font-weight: bold;
}
/*
 * 1. Address odd `em`-unit font size rendering in all browsers.
 * 2. Consolas has a better baseline in running text compared to `Courier`
 */
:not(pre) > code,
:not(pre) > kbd,
:not(pre) > samp {
  /* 1 */
  font-size: 12px;
  /* 2 */
  font-family: Consolas, monospace, serif;
  /* 3 */
  color: #D05;
  white-space: nowrap;
}
/*
 * Prevents `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
/* Images
 ========================================================================== */
/*
 * 1. Responsiveness: Sets a maximum width relative to the parent and auto scales the height
 * 2. Corrects `max-width` behavior if padding and border are used
 * 3. Remove border when inside `a` element in IE 8/9/10.
 * 4. Remove the gap between images and the bottom of their containers
 */
img {
  /* 1 */
  max-width: 100%;
  height: auto;
  /* 2 */
  /* Android ≤ 2.3, iOS ≤ 4 */
  /* Firefox ≤ 28 */
  box-sizing: border-box;
  /* Chrome, Firefox 29+, IE 8+, Opera, Safari 5.1 */
  /* 3 */
  border: 0;
  /* 4 */
  vertical-align: middle;
}
/**
 * Correct overflow not hidden in IE 9/10/11.
 * Not applied to SVG elements using `.overflow-visible` utility.
 */
svg:not(:root):not(.overflow-visible) {
  overflow: hidden;
}
/* Block elements
 ========================================================================== */
/*
 * Margins
 */
p,
ul,
ol,
pre {
  margin: 0 0 0 0;
}
* + p,
* + ul,
* + ol,
* + pre {
  margin-top: 0;
}
/* Headings
 ========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 0 0;
  font-family: "Open Sans", Arial, sans-serif;
  font-weight: normal;
  color: #273B4C;
  text-transform: none;
}
/*
 * Margins
 */
* + h1,
* + h2,
* + h3,
* + h4,
* + h5,
* + h6 {
  margin-top: 25px;
}
/*
 * Sizes
 */
h1,
.h1 {
  font-size: 30px;
  line-height: 36px;
}
h2,
.h2 {
  font-size: 24px;
  line-height: 30px;
}
h3,
.h3 {
  font-size: 18px;
  line-height: 24px;
}
h4,
.h4 {
  font-size: 16px;
  line-height: 22px;
}
h5,
.h5 {
  font-size: 14px;
  line-height: 20px;
}
h6,
.h6 {
  font-size: 12px;
  line-height: 18px;
}
/* Lists
 ========================================================================== */
ul,
ol {
  padding-left: 0px;
  list-style: none;
}
/*
 * Reset margin for nested lists
 */
ul > li > ul,
ul > li > ol,
ol > li > ol,
ol > li > ul {
  margin: 0;
}
/* Horizontal rules
 ========================================================================== */
/*
 * 1. Address differences between Firefox and other browsers.
 * 2. Style
 */
hr {
  /* 1 */
  box-sizing: content-box;
  height: 0;
  /* 2 */
  margin: 0 0;
  border: 0;
  border-top: 1px solid #AFCBE0;
}
/* Preformatted text
 ========================================================================== */
/*
 * 1. Contain overflow in all browsers.
 */
pre {
  font-family: "Open Sans", Arial, sans-serif;
  white-space: pre-wrap;
  /* CSS 3 */
  white-space: -moz-pre-wrap;
  /* Mozilla, since 1999 */
  white-space: -pre-wrap;
  /* Opera 4-6 */
  white-space: -o-pre-wrap;
  /* Opera 7 */
  word-wrap: break-word;
  /* Internet Explorer 5.5+ */
}
/* Selection pseudo-element
 ========================================================================== */
::selection {
  background: #39f;
  color: #fff;
  text-shadow: none;
}
/* HTML5 elements
 ========================================================================== */
/*
 * Corrects `block` display not defined in IE 8/9.
 */
footer {
  display: block;
}
/*
 * Address `[hidden]` styling not present in IE 8/9.
 * Hide the `template` element in IE and Safari
 */
[hidden] {
  display: none;
}
/* Iframe
 ========================================================================== */
iframe {
  border: 0;
}
/* Fix viewport for IE10 snap mode
 ========================================================================== */
@media screen and (max-width: 400px) {
  @-ms-viewport {
    width: device-width;
  }
}
.disabled {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
  opacity: 0.4;
  cursor: default;
  -webkit-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -ms-touch-select: none;
}
/* ========================================================================
   Component: Utility
 ========================================================================== */
/* Clearing
 ========================================================================== */
/*
 * Micro clearfix
* `table-cell` is used with `:before` because `table` creates a 1px gap when it becomes a flex item, only in Webkit
 * `table` is used again with `:after` because `clear` only works with block elements.
 * Note: `display: block` with `overflow: hidden` is currently not working in the latest Safari
 */
.clearfix:before {
  content: "";
  display: table-cell;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
/* Box sizing border-box
=============================================*/
/* Alignment of block elements
 ========================================================================== */
/*
 * Float blocks
 * 1. Prevent content overflow on small devices
 */
.float-left {
  float: left;
}
.float-right {
  float: right;
}
/* 1 */
[class*='float-'] {
  max-width: 100%;
}
/* Alignment of images and objects
 ========================================================================== */
/*
 * Alignment
 */
[class^='align-'] {
  display: block;
  margin-bottom: 0;
}
.align-left {
  margin-right: 0;
  float: left;
}
.align-right {
  margin-left: 0;
  float: right;
}
.align-center {
  margin-left: auto;
  margin-right: auto;
}
/* Vertical alignment
 ========================================================================== */
/*
 * Remove whitespace between child elements when using `inline-block`
 */
.vertical-align {
  font-size: 0.001px;
}
/*
 *  The `vertical-align` container needs a specific height
 */
.vertical-align:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
/*
 * Sub-object which can have any height
 * 1. Reset whitespace hack
 */
.vertical-align-middle,
.vertical-align-bottom {
  text-align: center;
  display: inline-block;
  max-width: 100%;
  /* 1 */
  font-size: 1rem;
}
.vertical-align-middle {
  vertical-align: middle;
}
.vertical-align-bottom {
  vertical-align: bottom;
}
/* Height
 ========================================================================== */
/*
 * More robust if padding and border are used
 */
[class*='height'] {
  /* Android ≤ 2.3, iOS ≤ 4 */
  /* Firefox ≤ 28 */
  box-sizing: border-box;
  /* Chrome, Firefox 29+, IE 8+, Opera, Safari 5.1 */
}
/* Margin
 ========================================================================== */
/*
 * Create a block with the same margin of a paragraph
 * Add margin if adjacent element
 */
.margin {
  margin-bottom: 0;
}
* + .margin {
  margin-top: 0;
}
.margin-top {
  margin-top: 0 !important;
}
.margin-bottom {
  margin-bottom: 0 !important;
}
.margin-left {
  margin-left: 0 !important;
}
.margin-right {
  margin-right: 0 !important;
}
/* Remove from the flow and screen readers on any device */
.old-hidden {
  display: none !important;
  visibility: hidden !important;
}
/* Text
 ========================================================================== */
.text-center {
  text-align: center;
}
/* ========================================================================
   Component: Form
 ========================================================================== */
/*
 * Except for `submit` and `reset` because specificity is to high for button component
 * 1. Define consistent box sizing.
 *    Default is `content-box` with following exceptions set to `border-box`
 *    `button`, `select`, `input[type="checkbox"]` and `input[type="radio"]`
 *    `input[type="search"]` in Chrome, Safari and Opera
 *    `input[type="color"]` in Firefox
 * 2. Address margins set differently in Firefox/IE and Chrome/Safari/Opera.
 * 3. Remove `border-radius` in iOS.
 * 4. Correct `font` properties and `color` not being inherited.
 */
.form input:not([type="submit"]),
.form input:not([type="reset"]),
.form select,
.form textarea {
  /* 1 */
  /* Android ≤ 2.3, iOS ≤ 4 */
  /* Firefox ≤ 28 */
  box-sizing: border-box;
  /* Chrome, Firefox 29+, IE 8+, Opera, Safari 5.1 */
  /* 2 */
  margin: 0;
  /* 3 */
  border-radius: 0;
  /* 4 */
  font: inherit;
  color: inherit;
}
/*
 * Address inconsistent `text-transform` inheritance which is only inherit in Firefox
 */
.form select {
  text-transform: none;
}
/*
 * Removes inner padding and border in Firefox 4+.
 */
.form input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
/*
 * Removes input focus icons in IE and Safari.
 */
input[type=text]::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}
input[type=text]::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}
input[type=email]::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}
input[type=email]::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}
input[type=password]::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}
input[type=password]::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}
input[type=search]::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}
input[type=search]::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}
/*
 * Removes excess padding in IE 8/9/10.
 */
.form input[type="checkbox"],
.form input[type="radio"] {
  padding: 0;
}
/*
 * Improves consistency of cursor style for clickable elements
 */
.form input[type="checkbox"]:not(:disabled),
.form input[type="radio"]:not(:disabled) {
  cursor: pointer;
}
/*
 * Remove default style in iOS.
 */
.form textarea,
.form input:not([type]),
.form input[type="text"],
.form input[type="password"],
.form input[type="email"],
.form input[type="url"],
.form input[type="search"],
.form input[type="tel"],
.form input[type="number"],
.form input[type="datetime"] {
  -webkit-appearance: none;
  -moz-appearance: textfield;
}
/*
 * Remove inner padding and search cancel button in Chrome, Safari and Opera on OS X.
 */
.form input[type="search"]::-webkit-search-cancel-button,
.form input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
/*
 * Remove Chrome's increment/decrement buttons.
 */
.form input[type="number"]::-webkit-inner-spin-button,
.form input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/*
 * 1. Remove default vertical scrollbar in IE 8/9/10/11.
 * 2. Improve readability and alignment in all browsers.
 */
.form textarea {
  /* 1 */
  overflow: auto;
  /* 2 */
  vertical-align: top;
}
/*
 * Removes placeholder transparency in Firefox.
 */
.form ::-moz-placeholder {
  opacity: 1;
}
/*
 * Removes `box-shadow` for invalid controls in Firefox.
 */
.form :invalid {
  box-shadow: none;
}
/*
 * Vertical alignment
 */
.form input:not([type="radio"]):not([type="checkbox"]),
.form select {
  vertical-align: middle;
}
/* Style
 ========================================================================== */
/*
 * Remove margin from the last-child
 */
.form > :last-child {
  margin-bottom: 0;
}
/*
 * Controls
 * Except for `range`, `radio`, `checkbox`, `file`, `submit`, `reset`, `button` and `image`
 * 1. Must be `height` because `min-height` is not working in OSX
 * 2. Responsiveness: Sets a maximum width relative to the parent to scale on narrower viewports
 * 3. Vertical `padding` needed for `select` elements in Firefox
 * 4. Style
 */
.form select,
.form textarea,
.form input:not([type]),
.form input[type="text"],
.form input[type="password"],
.form input[type="datetime"],
.form input[type="datetime-local"],
.form input[type="date"],
.form input[type="month"],
.form input[type="time"],
.form input[type="week"],
.form input[type="number"],
.form input[type="email"],
.form input[type="url"],
.form input[type="search"],
.form input[type="tel"],
.form input[type="color"] {
  /* 1 */
  height: 44px;
  /* 2 */
  max-width: 100%;
  /* 3 */
  padding: 0 14px;
  /* 4 */
  border: 1px solid #BBBBBB;
  background: #fff;
  color: #333;
  transition: all linear 0.2s;
}
.form select:focus,
.form textarea:focus,
.form input:not([type]):focus,
.form input[type="text"]:focus,
.form input[type="password"]:focus,
.form input[type="datetime"]:focus,
.form input[type="datetime-local"]:focus,
.form input[type="date"]:focus,
.form input[type="month"]:focus,
.form input[type="time"]:focus,
.form input[type="week"]:focus,
.form input[type="number"]:focus,
.form input[type="email"]:focus,
.form input[type="url"]:focus,
.form input[type="search"]:focus,
.form input[type="tel"]:focus,
.form input[type="color"]:focus {
  border-color: #BBBBBB;
  outline: 0;
  background: #fff;
  color: #444;
}
.form select:disabled,
.form textarea:disabled,
.form input:not([type]):disabled,
.form input[type="text"]:disabled,
.form input[type="password"]:disabled,
.form input[type="datetime"]:disabled,
.form input[type="datetime-local"]:disabled,
.form input[type="date"]:disabled,
.form input[type="month"]:disabled,
.form input[type="time"]:disabled,
.form input[type="week"]:disabled,
.form input[type="number"]:disabled,
.form input[type="email"]:disabled,
.form input[type="url"]:disabled,
.form input[type="search"]:disabled,
.form input[type="tel"]:disabled,
.form input[type="color"]:disabled {
  border-color: #ddd;
  background-color: #f5f5f5;
  -webkit-text-fill-color: #999;
  /* Override iOS / Android font color change */
  -webkit-opacity: 1;
  /* Override iOS opacity change affecting text & background color */
  color: #999;
}
/*
* Checkbox styling
*
* we use the same thing for the radio and override some of it
*/
.form input[type="checkbox"],
.form input[type="radio"] {
  position: relative;
  border-radius: 3px;
  border: 2px solid #ccc;
  background: white;
  width: 18px;
  height: 18px;
  vertical-align: middle;
  -webkit-appearance: none;
  -mox-appearance: none;
  appearance: none;
  cursor: pointer;
}
.form input[type="checkbox"]:checked,
.form input[type="radio"]:checked {
  background-color: #8CB4D2;
  border-color: #8CB4D2;
  transition: all ease 250ms;
}
.form input[type="checkbox"]:checked:before,
.form input[type="radio"]:checked:before {
  content: "";
  position: absolute;
  top: -1px;
  left: 3px;
  display: table;
  width: 5px;
  height: 10px;
  border: 2px solid #fff;
  border-top-width: 0;
  border-left-width: 0;
  transform: rotate(45deg);
}
.form input[type="checkbox"]:focus,
.form input[type="radio"]:focus {
  outline: none;
}
/*
* Radio
* override some styling inherited from the checkbox
*/
.form input[type="radio"] {
  border-radius: 50%;
}
.form input[type="radio"]:checked:before {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  top: -2px;
  left: -2px;
  border: 2px solid #fff;
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -ms-transform: scale(0.8);
  -o-transform: scale(0.8);
}
/*
 * Placeholder
 */
.form :-ms-input-placeholder {
  color: #BBBBBB !important;
}
.form ::-moz-placeholder {
  color: #BBBBBB;
}
.form ::-webkit-input-placeholder {
  color: #BBBBBB;
}
.form :disabled:-ms-input-placeholder {
  color: #999 !important;
}
.form :disabled::-moz-placeholder {
  color: #999;
}
.form :disabled::-webkit-input-placeholder {
  color: #999;
}
/* Size modifiers
 * Higher specificity needed to override defaults
 ========================================================================== */
select.form-small,
textarea.form-small,
input[type].form-small,
input:not([type]).form-small {
  height: 25px;
  padding: 3px 3px;
  font-size: 12px;
}
select.form-large,
textarea.form-large,
input[type].form-large,
input:not([type]).form-large {
  height: 40px;
  padding: 8px 6px;
  font-size: 16px;
}
/* Reset height
 * Must be after size modifiers
 ========================================================================== */
.form textarea,
.form select[multiple],
.form select[size] {
  height: auto;
}
/* Validation states
 * Using !important to keep the selector simple
 ========================================================================== */
/*
 * Error state
 */
.form-danger {
  border-color: #dc8d99 !important;
  background: white !important;
  color: #d85030 !important;
}
body {
  padding: 0;
  margin: 0;
}
@media (max-width: 767px) {
  body {
    padding: 0;
  }
}
.unselectable {
  -webkit-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -ms-touch-select: none;
}
.true-false-toggle .true-false-toggle-button {
  position: relative;
  display: inline-block;
  height: 4em;
  width: 50%;
  padding: 0;
  background-color: #dfeaf3;
  border: 2px solid #6f9fc2;
  font-size: 1.5em;
  font-weight: 700;
  cursor: pointer;
  transition: 0.3s ease all;
}
.true-false-toggle .true-false-toggle-button .toggle-heavy {
  font-weight: 700;
}
.true-false-toggle .true-false-toggle-button:hover {
  background-color: #AFCBE0;
}
@media only screen and (max-width: 768px) {
  .true-false-toggle .true-false-toggle-button {
    font-size: 1.3em;
  }
}
@media only screen and (max-width: 480px) {
  .true-false-toggle .true-false-toggle-button {
    width: 50%;
  }
}
.true-false-toggle .true-toggle {
  position: relative;
  display: inline-block;
  height: 4em;
  width: 50%;
  padding: 0;
  background-color: #dfeaf3;
  border: 2px solid #6f9fc2;
  font-size: 1.5em;
  font-weight: 700;
  cursor: pointer;
  transition: 0.3s ease all;
}
.true-false-toggle .true-toggle .toggle-heavy {
  font-weight: 700;
}
.true-false-toggle .true-toggle:hover {
  background-color: #AFCBE0;
}
@media only screen and (max-width: 768px) {
  .true-false-toggle .true-toggle {
    font-size: 1.3em;
  }
}
@media only screen and (max-width: 480px) {
  .true-false-toggle .true-toggle {
    width: 50%;
  }
}
.true-false-toggle .false-toggle {
  position: relative;
  display: inline-block;
  height: 4em;
  width: 50%;
  padding: 0;
  background-color: #dfeaf3;
  border: 2px solid #6f9fc2;
  font-size: 1.5em;
  font-weight: 700;
  cursor: pointer;
  transition: 0.3s ease all;
}
.true-false-toggle .false-toggle .toggle-heavy {
  font-weight: 700;
}
.true-false-toggle .false-toggle:hover {
  background-color: #AFCBE0;
}
@media only screen and (max-width: 768px) {
  .true-false-toggle .false-toggle {
    font-size: 1.3em;
  }
}
@media only screen and (max-width: 480px) {
  .true-false-toggle .false-toggle {
    width: 50%;
  }
}
.true-false-toggle .true-false-toggle-on {
  background-color: #AFCBE0;
}
.toggle-slider {
  position: relative;
  width: 60px;
  -webkit-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -ms-touch-select: none;
}
.toggle-slider-checkbox {
  display: none;
}
.toggle-slider-label {
  display: block;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 17px;
  background-clip: padding-box;
  height: 32px;
}
.toggle-slider-inner {
  width: 200%;
  margin-left: -100%;
  transition: margin 0.3s cubic-bezier(0.23, 1, 0.32, 1) 0s;
}
.toggle-slider-inner:before,
.toggle-slider-inner:after {
  float: left;
  width: 50%;
  height: 2.3em;
  padding: 0;
  line-height: 2.3em;
  font-size: 1.2em;
  color: #333;
  box-sizing: border-box;
}
.toggle-slider-inner:before {
  content: "";
  padding-left: 0.9em;
}
.toggle-slider-inner:after {
  content: "";
  padding-right: 0.9em;
  background-color: white;
  text-align: right;
}
.toggle-slider-switch {
  width: 28px;
  height: 28px;
  margin: 0;
  background: #ccc;
  position: absolute;
  top: 2px;
  bottom: 0;
  right: 30px;
  border-radius: 50%;
  background-clip: padding-box;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1) 0s;
}
.toggle-slider-checkbox:checked + .toggle-slider-label .toggle-slider-inner {
  margin-left: 0;
}
.toggle-slider-checkbox:checked + .toggle-slider-label {
  border-color: #8CB4D2;
}
.toggle-slider-checkbox:checked + .toggle-slider-label .toggle-slider-switch {
  right: 2px;
  background: #8CB4D2;
}
.toggle-slider-checkbox:disabled + .toggle-slider-label {
  border-color: rgba(204, 204, 204, 0.5);
  cursor: default;
}
.toggle-slider-checkbox:disabled + .toggle-slider-label .toggle-slider-switch {
  background: rgba(204, 204, 204, 0.5);
  cursor: default;
}
.toggle-slider-checkbox:checked.toggle-slider-checkbox:disabled + .toggle-slider-label {
  border-color: rgba(140, 180, 210, 0.5);
  cursor: default;
}
.toggle-slider-checkbox:checked.toggle-slider-checkbox:disabled + .toggle-slider-label .toggle-slider-switch {
  background: rgba(140, 180, 210, 0.5);
}
.toggle-label {
  cursor: pointer;
}
.toggle-label-disabled {
  cursor: default;
  opacity: 0.5;
}
.custom-select {
  position: relative;
}
.custom-select .custom-select-container {
  position: relative;
}
.custom-select .custom-select-container .custom-select-text-label {
  color: #bbbbbb;
}
.custom-select .custom-select-container .custom-select-text-label:focus {
  color: #bbbbbb;
}
.custom-select .custom-select-container .custom-select-arrows {
  cursor: pointer;
  position: absolute;
  right: 14px;
  top: 14px;
}
.custom-select .custom-select-container .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.custom-select .custom-select-container .selected-option-tag {
  cursor: pointer;
  left: 11px;
  position: absolute;
  top: 13px;
}
.custom-select .custom-select-container .selected-option-tag-text {
  cursor: pointer;
  left: 43px;
  position: absolute;
  top: 11px;
}
.custom-select .custom-select-container-error input {
  border: 1px solid #ce0000;
  box-shadow: 0 0 0 2px rgba(206, 0, 0, 0.4);
}
.custom-select .custom-select-container-error .select-error-icon {
  cursor: pointer;
  pointer-events: none;
  position: absolute;
  right: 34px;
  top: 13px;
}
.custom-select input {
  display: block;
  width: 100%;
}
.custom-select input:hover {
  cursor: pointer;
}
.custom-select input:disabled {
  background-color: white!important;
}
.custom-select .custom-select-list {
  max-height: 300px;
  overflow-y: auto;
  width: 100%;
  border: 1px solid #bbb;
  position: absolute;
  left: 0;
  top: 43px;
  background: white;
  z-index: 1000;
  /* custom hover effects for fixing bugs on iPad */
}
.custom-select .custom-select-list li {
  padding: 12px;
  position: relative;
  margin: 0;
  width: 100%;
}
.custom-select .custom-select-list li .selected-checkmark {
  color: #8cb4d2;
  position: absolute;
  right: 10px;
  font-size: 14px;
}
.custom-select .custom-select-list li:hover {
  background: #eee;
  cursor: pointer;
}
.custom-select .custom-select-list li.active,
.custom-select .custom-select-list li:active,
.custom-select .custom-select-list li.highlighted-option {
  background: #eeeeee;
}
.custom-select .custom-select-list li.parent:hover ul {
  background: white;
}
.custom-select .custom-select-list li.no-hover:hover {
  background: inherit;
}
.custom-select .custom-select-list li.list-title {
  height: auto;
  padding: 0;
}
.custom-select .custom-select-list li.list-title .list-title-text {
  cursor: default;
  font-weight: bold;
  padding: 0.8em;
  display: block;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
.custom-select .custom-select-list li.list-title li {
  padding-left: 1em;
}
.custom-select .custom-select-list li.list-title:hover {
  background: transparent;
}
.custom-select .custom-select-list li .option-tag {
  display: inline-block;
  margin-top: 2px;
}
.custom-select .custom-select-list li .option-tag-quizzes-text {
  left: 46px;
  position: absolute;
  top: 11px;
}
.custom-select .custom-select-list li .tag-checkmark {
  top: 13px;
}
.custom-select .custom-select-list.no-hover-effect {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
.custom-select .custom-select-list.no-hover-effect li:hover {
  background: transparent;
}
.custom-select .option-tag-text {
  width: 15px;
}
.input-container {
  display: inline-block;
}
.space-race-icon {
  padding: 0.33em;
  height: 2em;
  width: 2em;
  background-color: transparent;
  border-radius: 50%;
  border: 0.2em solid white;
  background-repeat: no-repeat;
  /* Android ≤ 2.3, iOS ≤ 4 */
  /* Firefox ≤ 28 */
  box-sizing: border-box;
  /* Chrome, Firefox 29+, IE 8+, Opera, Safari 5.1 */
  background-size: 55%;
  background-position: 50% 45%;
  border: 0;
  border-radius: 0;
  background-size: 100%;
  background-position: 50%;
}
.email-icon-default {
  fill: #8cb4d2;
  height: 22px;
  width: 28px;
}
.download-icon-default {
  fill: #8cb4d2;
  height: 19px;
  width: 14px;
}
.quiz-icon-default {
  fill: #cccccc;
  height: 20px;
  width: 18px;
}
.back-arrow-icon-default {
  fill: #8cb4d2;
  height: 20px;
  width: 22px;
}
.edit-icon-default {
  fill: #8cb4d2;
  height: 24px;
  width: 24px;
}
.empty-folder-icon-default {
  fill: #cccccc;
  height: 79px;
  width: 104px;
}
.folder-icon-default {
  fill: #cccccc;
  height: 20px;
  width: 24px;
}
.folder-icon-current {
  fill: #8cb4d2;
}
.toggle-folder-nav-icon-default {
  fill: #cccccc;
  height: 24px;
  width: 24px;
}
.move-icon-default {
  fill: #cccccc;
  height: 22px;
  width: 24px;
}
.new-folder-icon-default {
  fill: #cccccc;
  height: 23px;
  width: 24px;
}
.restore-icon-default {
  fill: #cccccc;
  height: 25px;
  width: 22px;
}
.right-chevron-default {
  fill: #ff0000;
  height: 20px;
  width: 12px;
}
.right-chevron-thin-default {
  fill: #cccccc;
  height: 12px;
  width: 6px;
}
.down-chevron-icon-default {
  height: 6px;
  width: 10px;
}
.trash-icon-large-default {
  height: 83px;
  width: 76px;
}
.title-tooltip-default {
  background-color: #ffffff;
  border: solid 1px #cccccc;
  border-radius: 4px;
  box-shadow: 0 0 2px #aaaaaa;
  padding: 4px 7px 5px 8px;
  position: absolute;
}
.title-tooltip-default-above {
  bottom: 40px;
}
.title-tooltip-default-below {
  top: 40px;
}
.title-tooltip-arrow {
  border-right: 14px solid transparent;
  border-top: 14px solid #ffffff;
  box-shadow: -2px -2px 2px 0px #cccccc;
  height: 0;
  left: 7px;
  position: absolute;
  width: 0;
  z-index: 2;
}
.title-tooltip-arrow-above {
  left: 0;
  margin: auto;
  right: 0;
  transform: rotate(225deg);
  top: 17px;
}
.title-tooltip-arrow-below {
  transform: rotate(45deg);
}
.title-tooltip-text-default {
  font-size: 12px;
  position: relative;
  white-space: nowrap;
  z-index: 3;
}
.loader-container {
  width: 68px;
}
.loader-container .loading-text {
  color: rgba(85, 85, 85, 0.5);
  display: block;
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 15px;
  padding-left: 1px;
}
.loader-container .dot1,
.loader-container .dot2,
.loader-container .dot3 {
  -webkit-animation: dotdelay 1.4s infinite ease-in-out;
  -webkit-animation-fill-mode: both;
  animation: dotdelay 1.4s infinite ease-in-out;
  animation-fill-mode: both;
  background-color: #6d9ec4;
  border-radius: 50%;
  display: inline-block;
  height: 16px;
  margin: 0 3px 0;
  width: 16px;
}
.loader-container .dot1 {
  animation-delay: -0.32s;
}
.loader-container .dot2 {
  animation-delay: -0.16s;
  background-color: rgba(108, 157, 196, 0.5);
}
.loader-container .dot3 {
  background-color: rgba(108, 157, 196, 0.25);
}
@keyframes dotdelay {
  0%,
  80%,
  100% {
    transform: scale(0);
    -webkit-transform: scale(0);
  }
  40% {
    transform: scale(1);
    -webkit-transform: scale(1);
  }
}
#banner-container {
  position: relative;
  overflow: hidden;
  font-size: 14px;
}
#info-banner {
  background: #ffa100;
  padding: 10px 0 11px 53px;
  text-align: left;
  color: white;
  position: relative;
  transition: top 200ms cubic-bezier(0.2, 0, 1, 0.9);
}
@media screen and (max-width: 768px) {
  #info-banner {
    padding: 12px 16px;
  }
}
#info-banner .info-banner-icon {
  position: absolute;
  top: 22px;
  left: 18px;
}
@media screen and (max-width: 768px) {
  #info-banner .info-banner-icon {
    display: none;
  }
}
#info-banner .close-banner-icon {
  position: absolute;
  top: 22px;
  right: 22px;
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  #info-banner .close-banner-icon {
    right: 16px;
  }
}
#info-banner .banner-content .content {
  max-width: 55%;
}
@media screen and (max-width: 960px) {
  #info-banner .banner-content .content {
    max-width: 45%;
  }
}
@media screen and (max-width: 768px) {
  #info-banner .banner-content .content {
    max-width: 100%;
    padding-right: 40px;
  }
}
#info-banner .banner-content h1 {
  font-size: 14px;
  line-height: 20px;
  color: white;
  font-weight: 600;
  padding-bottom: 3px;
}
#info-banner .banner-content .link {
  color: white;
}
#info-banner .banner-content .link.learn-more {
  font-weight: 600;
  margin-left: 10px;
  white-space: nowrap;
}
#info-banner .banner-content .link.remind-later {
  float: right;
  margin: 10px 60px 0;
}
@media screen and (max-width: 768px) {
  #info-banner .banner-content .link.remind-later {
    margin: 7px 30px 0;
  }
}
@media screen and (max-width: 480px) {
  #info-banner .banner-content .link.remind-later {
    width: 100%;
    text-align: right;
    margin-right: 0;
  }
}
#renewal-notify-container {
  position: relative;
  overflow: hidden;
  font-size: 14px;
  color: white;
}
#renewal-notify {
  background: rgba(48, 155, 255, 0.9);
  min-height: 54px;
  position: relative;
  padding: 10px 0 11px 53px;
  transition: top 200ms cubic-bezier(0.2, 0, 1, 0.9);
}
#renewal-notify span {
  color: white;
  padding: 8px 240px 0 0;
  display: block;
}
#renewal-notify .info-renewal-icon {
  position: absolute;
  top: 18px;
  left: 18px;
}
#renewal-notify .close-renewal-icon {
  position: absolute;
  right: 22px;
  top: 18px;
  cursor: pointer;
}
#renewal-notify .renew-now-button {
  position: absolute;
  right: 60px;
  top: 8px;
  border-radius: 3px;
  border: solid 1px #ffffff;
  padding: 10px 50px;
  text-align: center;
  min-width: 150px;
  background: transparent;
  font-weight: bold;
  color: white;
  outline: none;
  text-transform: uppercase;
  font-size: 12px;
  transition: 0.3s;
}
#renewal-notify .renew-now-button:hover {
  background: rgba(255, 255, 255, 0.1);
  cursor: pointer;
}
#renewal-notify.expired .close-renewal-icon {
  display: none;
}
#renewal-notify.expired .renew-now-button {
  right: 16px;
}
#renewal-notify.expired span {
  padding-right: 210px;
}
@media only screen and (max-width: 480px) {
  #renewal-notify.expired span {
    padding: 0 16px 0 30px;
  }
}
@media only screen and (max-width: 768px) {
  #renewal-notify .close-renewal-icon {
    right: 16px;
  }
  #renewal-notify span {
    padding: 0 240px 0 0;
  }
}
@media only screen and (max-width: 480px) {
  #renewal-notify {
    padding: 10px;
  }
  #renewal-notify .info-renewal-icon,
  #renewal-notify .close-renewal-icon {
    top: 11px;
  }
  #renewal-notify .info-renewal-icon {
    left: 10px;
  }
  #renewal-notify span {
    padding: 0 35px 0 30px;
  }
  #renewal-notify .actions-container {
    text-align: center;
    margin-top: 10px;
  }
  #renewal-notify .renew-now-button {
    position: inherit;
    width: 60%;
    float: none;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 414px) {
  #renewal-notify .renew-now-button {
    width: 100%;
  }
}
footer#footer {
  margin-bottom: -70px;
  font-size: 12px;
  height: 70px;
  width: 100%;
  background: #F3F3F3;
  color: #555;
  text-align: center;
  position: relative;
}
footer#footer .footer {
  width: 100%;
  padding-left: 7em;
  padding-right: 7em;
}
footer#footer .footer-content {
  font-size: 14px;
}
footer#footer .socrative {
  font-weight: 700;
}
footer#footer .align-left {
  margin-top: 7px;
}
@media only screen and (max-width: 480px) {
  footer#footer .align-left,
  footer#footer .align-right {
    width: 100%;
    float: none;
    text-align: center;
    font-size: 0.9em;
  }
}
footer#footer .pro-badge-icon-container {
  position: relative;
  margin-right: 4px;
  top: 5px;
}
footer#footer .link {
  position: relative;
  margin-left: 10px;
  top: -1px;
}
/**
 * Types of buttons
 */
/* ========================================================================
   Component: Button
 ========================================================================== */
/*
 * Removes inner padding and border in Firefox 4+.
 */
.button::-moz-focus-inner {
  border: 0;
  padding: 0;
}
/*
 * 1. Correct inability to style clickable `input` types in iOS.
 * 2. Remove margins in Chrome, Safari and Opera.
 * 3. Remove borders for `button`.
 * 4. Address `overflow` set to `hidden` in IE 8/9/10/11.
 * 5. Correct `font` properties and `color` not being inherited for `button`.
 * 6. Address inconsistent `text-transform` inheritance which is only inherit in Firefox and IE
 * 7. Style
 * 8. `line-height` is used to create a height
 * 9. `min-height` is necessary for `input` elements in Firefox and Opera because `line-height` is not working.
 * 10. Reset button group whitespace hack
 * 11. Required for `a`.
 */
.button {
  /* 1 */
  -webkit-appearance: none;
  /* 2 */
  margin: 0;
  /* 3 */
  border: none;
  /* 4 */
  overflow: visible;
  /* 5 */
  font-family: 'Open Sans', Arial, sans-serif;
  color: #333;
  /* 6 */
  text-transform: uppercase;
  /* 7 */
  display: inline-block;
  /* Android ≤ 2.3, iOS ≤ 4 */
  /* Firefox ≤ 28 */
  box-sizing: border-box;
  /* Chrome, Firefox 29+, IE 8+, Opera, Safari 5.1 */
  padding: 0 12px;
  background: #eee;
  vertical-align: middle;
  /* 8 */
  line-height: 30px;
  /* 9 */
  min-height: 30px;
  /* 10 */
  font-size: 12px;
  /* 11 */
  text-decoration: none;
  text-align: center;
  font-weight: 700;
  border-radius: 3px;
  min-width: 100px;
}
.button span {
  font: inherit;
  color: inherit;
  font-size: 12px;
}
.button.pill {
  border-radius: 30px;
  height: 44px;
  min-width: 144px;
  padding: 0 24px;
}
.button:not(:disabled) {
  cursor: pointer;
}
.button:disabled {
  opacity: 0.7;
}
/*
 * Hover
 * 1. Apply hover style also to focus state
 * 2. Remove default focus style
 * 3. Required for `a` elements
 */
.button:hover {
  /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6  */
  transition: all 0.3s ease-out;
  /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+  */
}
.button:hover,
.button:focus {
  background-color: #f5f5f5;
  color: #333;
  /* 2 */
  outline: none;
  /* 3 */
  text-decoration: none;
}
/* Active */
.button:active,
.button.active {
  background-color: #ddd;
  color: #333;
}
/* TYPES OF BUTTONS
 ========================================================================== */
/*
 * Modifier: `button-primary`
 */
.button-primary {
  background-color: #ffa100;
  color: white;
  border: 1px solid #ffa100;
  text-transform: uppercase;
}
.button-primary span {
  color: white;
}
/* Hover */
.button-primary:hover {
  background-color: #cb7e00;
  border: 1px solid #cb7e00;
  color: white;
}
/* Active */
.button-primary:active,
.button-primary:focus {
  background-color: #f59b00;
  color: white;
}
/*
 * Modifier: `button-primary-common`
 */
.button-primary-common {
  background-color: white;
  color: #ffa100;
  border: 1px solid #ffa100;
  text-transform: uppercase;
}
/* Hover */
.button-primary-common:hover,
.button-primary-common:focus {
  background-color: #cb7e00;
  border: 1px solid #cb7e00;
  color: white;
}
/* Active */
.button-primary-common:active,
.button-primary-common.active {
  background-color: white;
  color: #eb9400;
}
/*
 * Modifier: `button-secondary`
 */
.button-secondary,
.button-secondary:focus {
  background-color: #6D9EC4;
  color: white;
  border: 1px solid #6D9EC4;
  text-transform: uppercase;
}
.button-secondary span,
.button-secondary:focus span {
  color: white;
}
/* Hover */
.button-secondary:hover {
  background-color: #65849b;
  color: white;
}
.button-secondary:disabled:hover {
  background-color: #6D9EC4;
}
/* Active */
.button-secondary:active,
.button-secondary.active {
  background-color: #5e94be;
  color: white;
}
/*
 * Modifier: `button-secondary-common`
 */
.button-secondary-common {
  background-color: white;
  color: #6D9EC4;
  border: 1px solid #6D9EC4;
  text-transform: uppercase;
}
/* Hover */
.button-secondary-common:hover,
.button-secondary-common:focus {
  background-color: #65849b;
  color: white;
}
/* Active */
.button-secondary-common:active,
.button-secondary-common.active {
  background-color: white;
  color: #5e94be;
}
/*
 * Modifier: `button-link`
 */
.button-link {
  background-color: transparent;
  padding: 0;
  color: #8CB4D2;
  text-transform: uppercase;
}
/* Hover */
.button-link:hover,
.button-link:focus {
  color: #6f9fc2;
  background-color: transparent;
}
/* Active */
.button-link:active,
.button-link.active {
  color: white;
}
/* sizes
 ========================================================================== */
.button-mini {
  min-height: 30px;
  padding: 0 6px;
  line-height: 30px;
  font-size: 11px;
}
.button-small {
  min-height: 35px;
  padding: 0 30px;
  line-height: 30px;
  font-size: 12px;
}
.button-large {
  min-height: 42px;
  padding: 0 15px;
  line-height: 42px;
  font-size: 12px;
}
/* custom button with fropdown  
 ========================================================================== */
.button-container {
  position: relative;
  display: inline-block;
}
.button-container .button-dropdown-container {
  position: absolute;
  width: auto;
  text-align: right;
  background: white;
  z-index: 10;
  top: 45px;
  right: 0;
  border-radius: 2px;
  background-clip: padding-box;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.33);
}
.button-container .button-dropdown-container li {
  text-align: left;
  padding: 12px 15px;
  transition: 0.3s;
  white-space: nowrap;
}
@media only screen and (max-width: 768px) {
  .button-container .button-dropdown-container li {
    padding: 1em;
  }
}
.button-container .button-dropdown-container li:hover {
  background: #ddd;
  cursor: pointer;
}
.action-button {
  background-color: #ffa100;
  border: 1px solid #ffa100;
  border-radius: 3px;
  color: #ffffff;
  cursor: pointer;
  font-family: 'Open Sans', Arial, sans-serif;
  font-weight: 600;
  font-size: 12px;
  height: 44px;
  text-transform: uppercase;
}
.special-btn {
  background: white;
  color: #ffa100;
  border: 2px solid #ffa100;
  border-radius: 5px;
}
.special-btn :hover {
  background: #ffa100;
  color: white;
}
.btn-wrapper {
  display: flex;
  box-sizing: border-box;
  flex-direction: row;
  width: -webkit-min-content;
  width: min-content;
  margin: 20px auto 20px auto;
  justify-content: center;
  width: 100%;
}
.btn-wrapper button {
  margin: 0 14px;
}
@media (max-width: 600px) {
  .btn-wrapper {
    flex-direction: column;
  }
  .btn-wrapper button {
    width: 100%;
    margin: 5px 0;
  }
}
.action-button:hover,
.secondary-action-button:hover {
  background-color: #CB7E00;
  border: 1px solid #CB7E00;
  color: white;
}
.action-button:focus,
.secondary-action-button:focus,
.action-button-disabled:focus {
  outline: none;
}
.action-button-100 {
  width: 100px;
}
.action-button-132 {
  min-width: 132px;
  width: auto;
}
.action-button-200 {
  width: 200px;
}
.action-button-282 {
  width: 282px;
}
.action-button-full {
  width: 100%;
}
.action-button-disabled {
  background-color: #ffa100;
  border: 1px solid #ffa100;
  border-radius: 3px;
  color: #ffffff;
  cursor: pointer;
  font-family: 'Open Sans', Arial, sans-serif;
  font-weight: 600;
  font-size: 12px;
  height: 44px;
  text-transform: uppercase;
  background-color: rgba(255, 161, 0, 0.5);
  border: 1px solid rgba(255, 161, 0, 0.5);
  cursor: default;
}
.secondary-action-button {
  background-color: #ffa100;
  border: 1px solid #ffa100;
  border-radius: 3px;
  color: #ffffff;
  cursor: pointer;
  font-family: 'Open Sans', Arial, sans-serif;
  font-weight: 600;
  font-size: 12px;
  height: 44px;
  text-transform: uppercase;
  background-color: #ffffff;
  color: #ffa100;
}
.google-login-button {
  background-color: #ffffff;
  border: none;
  border-radius: 2px;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  cursor: pointer;
  font-family: 'Roboto';
  font-size: 14px;
  height: 44px;
  letter-spacing: 0.2px;
  position: relative;
}
.google-login-button .google-login-icon {
  position: absolute;
  left: 11px;
  top: 13px;
}
.google-login-button:hover,
.google-login-button:active {
  background-color: #eeeeee;
}
.google-login-button:focus {
  outline: none;
}
.edit-button-default {
  background-color: transparent;
  border: none;
  cursor: pointer;
  height: 36px;
  outline: none;
  width: 36px;
}
.edit-button-default:hover {
  background-color: #eeeeee;
}
.input-container {
  font-size: 14px;
}
.input-container .input-block {
  border: 1px solid rgba(0, 0, 0, 0);
  position: relative;
  max-width: 100%;
}
.input-container .input-block input:focus,
.input-container .input-block input[type="text"]:focus {
  border: 1px solid #8bb4d3;
  box-shadow: 0 0 0 2px rgba(139, 179, 211, 0.4);
}
.input-container .input-block-error input,
.input-container .input-block-error input:focus,
.input-container .input-block-error input[type="email"],
.input-container .input-block-error input[type="email"]:focus,
.input-container .input-block-error input[type="password"],
.input-container .input-block-error input[type="password"]:focus,
.input-container .input-block-error input[type="text"],
.input-container .input-block-error input[type="text"]:focus {
  border: 1px solid #ce0000;
  box-shadow: 0 0 0 2px rgba(206, 0, 0, 0.4);
}
.input-container .input-error-icon {
  position: absolute;
  top: 12px;
  right: 16px;
}
.tooltip-container-above {
  bottom: 51px;
  position: absolute;
  right: 0;
}
.tooltip-container-below {
  position: absolute;
  right: 0;
  top: 51px;
}
@media only screen and (max-width: 768px) {
  .tooltip-container-above,
  .tooltip-container-below {
    max-width: 300px;
  }
}
.tooltip {
  background-color: #ffffff;
  border: solid 1px #ce0000;
  max-width: 425px;
  padding-top: 11px;
  padding-right: 15px;
  padding-bottom: 12px;
  padding-left: 15px;
  position: relative;
  z-index: 999;
}
.tooltip-title {
  width: 350px;
  border-top: 2px solid #ce0000;
}
.tooltip-title-text {
  vertical-align: top;
  margin-left: 8px;
  font-weight: bold;
  color: #ce0000;
}
.triangle-left-above,
.triangle-right-above {
  background-color: #ffffff;
  bottom: -8px;
  height: 18px;
  position: absolute;
  width: 18px;
  z-index: 2;
}
.triangle-left-above {
  border-left: solid 1px #ce0000;
  right: 14px;
  transform: rotate(-127deg);
  -webkit-transform: rotate(-127deg);
}
.triangle-right-above {
  border-right: solid 1px #ce0000;
  right: 18px;
  transform: rotate(127deg);
  -webkit-transform: rotate(127deg);
}
.triangle-left-below,
.triangle-right-below {
  background-color: #ffffff;
  height: 18px;
  position: absolute;
  width: 18px;
  top: -8px;
  z-index: 2;
}
.triangle-left-below {
  border-left: solid 1px #ce0000;
  right: 18px;
  transform: rotate(53deg);
  -webkit-transform: rotate(53deg);
}
.triangle-right-below {
  border-right: solid 1px #ce0000;
  right: 14px;
  transform: rotate(-53deg);
  -webkit-transform: rotate(-53deg);
}
.tooltip-text {
  color: #ce0000;
  z-index: 3;
}
body,
html {
  min-height: 100%;
  padding: 0;
  margin: 0;
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 12px;
}
p,
span,
button {
  font-weight: 400;
}
p em,
span em,
button em {
  font-style: italic;
}
p strong,
span strong,
button strong,
p b,
span b,
button b {
  font-weight: 700;
}
.underline {
  text-decoration: underline;
}
.main-padding {
  padding: 2% 0;
}
#page-container {
  background: white;
  min-height: 100%;
  margin-bottom: -70px;
  width: 100%;
  font-size: 14px;
}
#page-container.mobile-menu-active {
  position: fixed;
  z-index: 1;
}
#page-container.space-race {
  background: #262628;
}
#student-page-container {
  background: white;
  padding: 68px 0 70px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 14px;
}
@media only screen and (min-width: 768px) {
  #student-page-container {
    padding: 92px 0 70px;
  }
}
#header-container {
  height: 110px;
}
#main-content,
#content-container {
  min-height: 100%;
  width: 100%;
  padding: 0;
}
/* --------------- fonts ----------------- */
@font-face {
  font-family: "socrative-icon-font";
  src: url(https://assets-dev.socrative.com/4.12.390/js/805475ea2016b354b2cd.eot);
  src: url(https://assets-dev.socrative.com/4.12.390/js/805475ea2016b354b2cd.eot?#iefix) format("embedded-opentype"), url(https://assets-dev.socrative.com/4.12.390/js/9dfa6ef9565bf7210414.woff) format("woff"), url(https://assets-dev.socrative.com/4.12.390/js/38a291af85c67f016279.ttf) format("truetype"), url(https://assets-dev.socrative.com/4.12.390/js/a4e572c339db6b33217d.svg#socrative-icons) format("svg");
  font-weight: normal;
  font-style: normal;
}
[data-icon]:before {
  font-family: "socrative-icon-font" !important;
  content: attr(data-icon);
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: "socrative-icon-font" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/*---------- SOCRATIVE PRO TEACHER HEADER ----------*/
.hand-animation {
  transition: 0.3s;
  animation: handshake 5s ease-in 2s infinite;
}
@keyframes handshake {
  8% {
    transform: rotate(8deg);
    transform-origin: 30% 100%;
  }
  18% {
    transform: rotate(-10deg);
    transform-origin: 30% 100%;
  }
  22% {
    transform: rotate(0deg);
    transform-origin: 30% 100%;
  }
  100% {
    transform: rotate(0deg);
    transform-origin: 30% 100%;
  }
}
#header-container,
#student-header-container {
  background-color: #8CB4D2;
  border-bottom: 1px solid #cccccc;
  height: 68px;
  width: 100%;
  z-index: 6;
}
@media only screen and (min-width: 768px) {
  #header-container,
  #student-header-container {
    height: 133px;
  }
}
#header-container #base-header,
#student-header-container #base-header {
  height: 100%;
  margin: 0 auto;
  position: relative;
  width: 100%;
}
#header-container #base-header #header-room-name-container,
#student-header-container #base-header #header-room-name-container {
  position: absolute;
  text-align: center;
  top: 24px;
  width: 100%;
  z-index: 6;
}
@media only screen and (max-width: 480px) {
  #header-container #base-header #header-room-name-container.long-room-name #header-room-name span,
  #student-header-container #base-header #header-room-name-container.long-room-name #header-room-name span {
    font-size: 1em;
  }
}
@media only screen and (max-width: 400px) {
  #header-container #base-header #header-room-name-container.long-room-name #header-room-name span,
  #student-header-container #base-header #header-room-name-container.long-room-name #header-room-name span {
    font-size: 0.8em;
  }
}
#header-container #base-header #header-room-name,
#student-header-container #base-header #header-room-name {
  cursor: pointer;
  display: inline-block;
  position: relative;
}
#header-container #base-header #header-room-name.no-menu,
#student-header-container #base-header #header-room-name.no-menu {
  cursor: default;
}
#header-container #base-header #header-room-name i,
#student-header-container #base-header #header-room-name i {
  color: white;
  display: inline-block;
  font-size: 2em;
  position: absolute;
  right: -8px;
  top: 13px;
  z-index: 501;
}
#header-container #base-header #header-room-name i:before,
#student-header-container #base-header #header-room-name i:before {
  display: block;
  text-align: left;
  width: 1em;
}
#header-container #base-header #header-room-name span,
#student-header-container #base-header #header-room-name span {
  color: #ffffff;
  font-size: 16px;
  position: relative;
  text-transform: uppercase;
  -webkit-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -ms-touch-select: none;
}
#header-container #base-header .header-down-chevron-large,
#student-header-container #base-header .header-down-chevron-large {
  margin-left: 9px;
  margin-bottom: 2px;
}
#header-container #base-header .header-menu-button,
#student-header-container #base-header .header-menu-button {
  cursor: pointer;
  display: block;
  float: right;
  margin-top: 12px;
  padding: 14px;
  position: relative;
  z-index: 6;
}
#header-container #base-header .header-menu-button .hand-raised-mobile,
#student-header-container #base-header .header-menu-button .hand-raised-mobile {
  display: block;
  width: 14px;
  height: 14px;
  background: #ffa100;
  border: 2px solid #8CB4D2;
  right: 10px;
  top: 6px;
  position: absolute;
  border-radius: 50%;
  z-index: 10;
}
#header-container #base-header .header-menu-close,
#student-header-container #base-header .header-menu-close {
  margin-right: 4px;
  margin-top: -1px;
}
#header-container #base-header #header-user-name-container,
#student-header-container #base-header #header-user-name-container {
  display: none;
}
#header-container #base-header #header-user-name,
#student-header-container #base-header #header-user-name {
  cursor: pointer;
  display: inline-block;
}
#header-container #base-header #header-user-name span,
#student-header-container #base-header #header-user-name span {
  color: #ffffff;
  font-size: 15px;
  letter-spacing: 0.5px;
  position: relative;
  -webkit-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -ms-touch-select: none;
}
#header-container #base-header #header-user-name .username-chevron,
#student-header-container #base-header #header-user-name .username-chevron {
  margin-bottom: 2px;
  margin-left: 9px;
}
#header-container #base-header #account-menu-container,
#student-header-container #base-header #account-menu-container {
  position: absolute;
  right: 0;
}
#header-container #base-header #account-menu-container #account-menu,
#student-header-container #base-header #account-menu-container #account-menu {
  background: white;
  cursor: default;
  height: auto;
  min-width: 13em;
  position: absolute;
  right: -17px;
  top: 5px;
  z-index: 500;
  transition: all ease 0.75s;
  box-shadow: 0 0 8px #888;
}
#header-container #base-header #account-menu-container #account-menu i,
#student-header-container #base-header #account-menu-container #account-menu i {
  font-size: 2em;
  position: absolute;
  color: white;
  top: -16px;
  right: 8px;
  display: inline-block;
}
#header-container #base-header #account-menu-container #account-menu i:before,
#student-header-container #base-header #account-menu-container #account-menu i:before {
  text-align: left;
  display: block;
  width: 1em;
}
#header-container #base-header #account-menu-container #account-menu li,
#student-header-container #base-header #account-menu-container #account-menu li {
  cursor: pointer;
  padding: 14px;
  position: relative;
  -webkit-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -ms-touch-select: none;
}
#header-container #base-header #account-menu-container #account-menu li .app-version,
#student-header-container #base-header #account-menu-container #account-menu li .app-version {
  position: absolute;
  text-align: right;
  padding: 0.2em;
  line-height: 9pt;
  font-size: 9pt;
  color: #b1b1b1;
  right: 0.2em;
  bottom: 0.2em;
}
#header-container #base-header #account-menu-container #account-menu li.student-handraise.disabled,
#student-header-container #base-header #account-menu-container #account-menu li.student-handraise.disabled {
  display: none;
}
#header-container #base-header #account-menu-container #account-menu li.student-handraise #handraise-overlay,
#student-header-container #base-header #account-menu-container #account-menu li.student-handraise #handraise-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 100;
  top: 0;
  left: 0;
}
#header-container #base-header #account-menu-container #account-menu li.student-handraise .handraise,
#student-header-container #base-header #account-menu-container #account-menu li.student-handraise .handraise {
  position: absolute;
  top: 4px;
  right: 10px;
}
#header-container #base-header #account-menu-container #account-menu li.student-handraise .handraise.handraise-off,
#student-header-container #base-header #account-menu-container #account-menu li.student-handraise .handraise.handraise-off {
  top: 10px;
}
#header-container #base-header #account-menu-container #account-menu li.student-handraise .handraise.handraise-off path,
#student-header-container #base-header #account-menu-container #account-menu li.student-handraise .handraise.handraise-off path {
  fill: #CCC;
}
#header-container #base-header #account-menu-container #account-menu li.student-handraise .handraise.handraise-on,
#student-header-container #base-header #account-menu-container #account-menu li.student-handraise .handraise.handraise-on {
  right: 5px;
  top: 4px;
  transition: 0.3s;
  animation: handshake 5s ease-in 2s infinite;
}
@keyframes handshake {
  8% {
    transform: rotate(8deg);
    transform-origin: 30% 100%;
  }
  18% {
    transform: rotate(-10deg);
    transform-origin: 30% 100%;
  }
  22% {
    transform: rotate(0deg);
    transform-origin: 30% 100%;
  }
  100% {
    transform: rotate(0deg);
    transform-origin: 30% 100%;
  }
}
#header-container #base-header #account-menu-container #account-menu li.student-handraise .handraise.handraise-on path,
#student-header-container #base-header #account-menu-container #account-menu li.student-handraise .handraise.handraise-on path {
  fill: #FFA100;
}
#header-container #base-header #account-menu-container #account-menu li:hover,
#student-header-container #base-header #account-menu-container #account-menu li:hover {
  background-color: #eeeeee;
}
#header-container #base-header #account-menu-container #account-menu li.renew-notify,
#student-header-container #base-header #account-menu-container #account-menu li.renew-notify {
  background: #44a5ff;
  position: relative;
  padding: 5px 10px 5px 44px;
}
#header-container #base-header #account-menu-container #account-menu li.renew-notify svg,
#student-header-container #base-header #account-menu-container #account-menu li.renew-notify svg {
  width: 28px;
  height: 25px;
  fill: white;
  position: absolute;
  top: 10px;
  left: 10px;
}
#header-container #base-header #account-menu-container #account-menu li.renew-notify span,
#student-header-container #base-header #account-menu-container #account-menu li.renew-notify span {
  font-size: 14px;
  font-weight: 100;
}
#header-container #base-header #account-menu-container #account-menu li.renew-notify .date,
#student-header-container #base-header #account-menu-container #account-menu li.renew-notify .date {
  display: block;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}
#header-container #base-header #account-menu-container #account-menu li.renew-notify:hover,
#student-header-container #base-header #account-menu-container #account-menu li.renew-notify:hover {
  background-color: #0084ff;
}
#header-container #base-header #account-menu-container #account-menu li.renew-notify:hover span,
#student-header-container #base-header #account-menu-container #account-menu li.renew-notify:hover span {
  color: white;
  text-shadow: 0px 0 #fff, 0 0px #fff;
}
#header-container #base-header #account-menu-container #account-menu,
#student-header-container #base-header #account-menu-container #account-menu {
  width: 200px;
}
@media only screen and (max-width: 768px) {
  #header-container #base-header #account-menu-container #account-header-menu,
  #student-header-container #base-header #account-menu-container #account-header-menu {
    width: 33%;
  }
  #header-container #base-header #account-menu-container #account-header-menu i,
  #student-header-container #base-header #account-menu-container #account-header-menu i {
    right: 6.5%;
  }
}
@media only screen and (max-width: 480px) {
  #header-container #base-header #account-menu-container #account-header-menu,
  #student-header-container #base-header #account-menu-container #account-header-menu {
    width: 53%;
  }
  #header-container #base-header #account-menu-container #account-header-menu i,
  #student-header-container #base-header #account-menu-container #account-header-menu i {
    right: 4.5%;
  }
}
#header-container #base-header #header-nav,
#student-header-container #base-header #header-nav {
  bottom: 0;
  display: none;
  position: absolute;
}
#header-container #base-header #header-nav ul,
#student-header-container #base-header #header-nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}
#header-container #base-header #header-nav ul li,
#student-header-container #base-header #header-nav ul li {
  border-bottom: 2px solid transparent;
  cursor: pointer;
  display: inline-block;
  letter-spacing: 0.5px;
  margin-right: 2px;
  padding: 8px 12px 6px 12px;
  text-align: center;
  text-transform: uppercase;
  -webkit-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -ms-touch-select: none;
  min-width: 100px;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #ffffff;
}
#header-container #base-header #header-nav ul li span,
#student-header-container #base-header #header-nav ul li span {
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
}
#header-container #base-header #header-nav ul li:hover,
#student-header-container #base-header #header-nav ul li:hover,
#header-container #base-header #header-nav ul li.selected,
#student-header-container #base-header #header-nav ul li.selected {
  border-bottom: 2px solid #ffffff;
}
#header-container #base-header #header-nav ul li:hover span,
#student-header-container #base-header #header-nav ul li:hover span,
#header-container #base-header #header-nav ul li.selected span,
#student-header-container #base-header #header-nav ul li.selected span {
  color: #ffffff;
}
#header-container #base-header #header-nav ul li.selected span,
#student-header-container #base-header #header-nav ul li.selected span {
  font-weight: 700;
}
#header-container #base-header #header-nav ul li.disabled,
#student-header-container #base-header #header-nav ul li.disabled {
  border-bottom: 2px solid transparent;
  cursor: default;
}
#header-container #base-header #header-nav ul li.disabled span,
#student-header-container #base-header #header-nav ul li.disabled span {
  color: rgba(255, 255, 255, 0.875);
}
@media only screen and (min-width: 768px) {
  #header-container #base-header .teacher-header-logo,
  #student-header-container #base-header .teacher-header-logo {
    margin-left: 33px;
    margin-top: 23px;
    transform: scale(1);
    -webkit-transform: scale(1);
  }
  #header-container #base-header #header-room-name-container,
  #student-header-container #base-header #header-room-name-container {
    top: 33px;
  }
  #header-container #base-header #header-room-name span,
  #student-header-container #base-header #header-room-name span {
    font-size: 22px;
    letter-spacing: 0.5px;
  }
  #header-container #base-header .header-down-chevron-large,
  #student-header-container #base-header .header-down-chevron-large {
    margin-left: 14px;
    margin-bottom: 4px;
  }
  #header-container #base-header .header-menu-button,
  #student-header-container #base-header .header-menu-button {
    display: none;
  }
  #header-container #base-header #header-user-name-container,
  #student-header-container #base-header #header-user-name-container {
    display: block;
    float: right;
    margin-right: 33px;
    margin-top: 33px;
    position: relative;
    z-index: 6;
  }
  #header-container #base-header #header-user-name-container .pro-badge-icon,
  #student-header-container #base-header #header-user-name-container .pro-badge-icon {
    left: -38px;
    position: absolute;
    top: -4px;
  }
  #header-container #base-header #header-user-name-container .pro-badge-icon-path,
  #student-header-container #base-header #header-user-name-container .pro-badge-icon-path {
    stroke: #ffffff;
  }
  #header-container #base-header #header-nav,
  #student-header-container #base-header #header-nav {
    display: block;
  }
}
@media only screen and (min-width: 960px) {
  #header-container #base-header #header-room-name span,
  #student-header-container #base-header #header-room-name span {
    font-size: 24px;
  }
}
#header-container #base-header #mobile-student-header-menu,
#student-header-container #base-header #mobile-student-header-menu {
  background-color: #ffffff;
  bottom: 0;
  overflow-y: scroll;
  position: fixed;
  right: -100%;
  top: 67px;
  width: 100%;
  z-index: 100;
  transition: right 250ms cubic-bezier(0.2, 0.2, 0.38, 0.9);
}
#header-container #base-header #mobile-student-header-menu .app-version,
#student-header-container #base-header #mobile-student-header-menu .app-version {
  text-align: right;
  padding: 0.4em 0.2em;
  font-size: 9pt;
  line-height: 9pt;
  color: #b1b1b1;
}
#header-container #base-header #mobile-student-header-menu #mobile-user-menu,
#student-header-container #base-header #mobile-student-header-menu #mobile-user-menu,
#header-container #base-header #mobile-student-header-menu #mobile-student-menu,
#student-header-container #base-header #mobile-student-header-menu #mobile-student-menu {
  border-top: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
}
#header-container #base-header #mobile-student-header-menu #mobile-user-menu .mobile-header-up-chevron,
#student-header-container #base-header #mobile-student-header-menu #mobile-user-menu .mobile-header-up-chevron,
#header-container #base-header #mobile-student-header-menu #mobile-student-menu .mobile-header-up-chevron,
#student-header-container #base-header #mobile-student-header-menu #mobile-student-menu .mobile-header-up-chevron,
#header-container #base-header #mobile-student-header-menu #mobile-user-menu .mobile-header-down-chevron,
#student-header-container #base-header #mobile-student-header-menu #mobile-user-menu .mobile-header-down-chevron,
#header-container #base-header #mobile-student-header-menu #mobile-student-menu .mobile-header-down-chevron,
#student-header-container #base-header #mobile-student-header-menu #mobile-student-menu .mobile-header-down-chevron {
  position: absolute;
  right: 15px;
  top: 25px;
}
#header-container #base-header #mobile-student-header-menu #mobile-user-menu .mobile-user-menu-header,
#student-header-container #base-header #mobile-student-header-menu #mobile-user-menu .mobile-user-menu-header,
#header-container #base-header #mobile-student-header-menu #mobile-student-menu .mobile-user-menu-header,
#student-header-container #base-header #mobile-student-header-menu #mobile-student-menu .mobile-user-menu-header,
#header-container #base-header #mobile-student-header-menu #mobile-user-menu .mobile-student-menu-header,
#student-header-container #base-header #mobile-student-header-menu #mobile-user-menu .mobile-student-menu-header,
#header-container #base-header #mobile-student-header-menu #mobile-student-menu .mobile-student-menu-header,
#student-header-container #base-header #mobile-student-header-menu #mobile-student-menu .mobile-student-menu-header {
  color: #555555;
  cursor: pointer;
  height: 56px;
  line-height: 56px;
  margin-left: 15px;
  position: relative;
}
#header-container #base-header #mobile-student-header-menu #mobile-user-menu .mobile-user-menu-header .mobile-header-icon,
#student-header-container #base-header #mobile-student-header-menu #mobile-user-menu .mobile-user-menu-header .mobile-header-icon,
#header-container #base-header #mobile-student-header-menu #mobile-student-menu .mobile-user-menu-header .mobile-header-icon,
#student-header-container #base-header #mobile-student-header-menu #mobile-student-menu .mobile-user-menu-header .mobile-header-icon,
#header-container #base-header #mobile-student-header-menu #mobile-user-menu .mobile-student-menu-header .mobile-header-icon,
#student-header-container #base-header #mobile-student-header-menu #mobile-user-menu .mobile-student-menu-header .mobile-header-icon,
#header-container #base-header #mobile-student-header-menu #mobile-student-menu .mobile-student-menu-header .mobile-header-icon,
#student-header-container #base-header #mobile-student-header-menu #mobile-student-menu .mobile-student-menu-header .mobile-header-icon {
  position: absolute;
  top: 15%;
}
#header-container #base-header #mobile-student-header-menu #mobile-user-menu .mobile-user-menu-header .mobile-header-text,
#student-header-container #base-header #mobile-student-header-menu #mobile-user-menu .mobile-user-menu-header .mobile-header-text,
#header-container #base-header #mobile-student-header-menu #mobile-student-menu .mobile-user-menu-header .mobile-header-text,
#student-header-container #base-header #mobile-student-header-menu #mobile-student-menu .mobile-user-menu-header .mobile-header-text,
#header-container #base-header #mobile-student-header-menu #mobile-user-menu .mobile-student-menu-header .mobile-header-text,
#student-header-container #base-header #mobile-student-header-menu #mobile-user-menu .mobile-student-menu-header .mobile-header-text,
#header-container #base-header #mobile-student-header-menu #mobile-student-menu .mobile-student-menu-header .mobile-header-text,
#student-header-container #base-header #mobile-student-header-menu #mobile-student-menu .mobile-student-menu-header .mobile-header-text {
  color: #555555;
  margin-left: 44px;
}
#header-container #base-header #mobile-student-header-menu #mobile-user-menu .mobile-user-menu-item,
#student-header-container #base-header #mobile-student-header-menu #mobile-user-menu .mobile-user-menu-item,
#header-container #base-header #mobile-student-header-menu #mobile-student-menu .mobile-user-menu-item,
#student-header-container #base-header #mobile-student-header-menu #mobile-student-menu .mobile-user-menu-item {
  color: #555555;
  cursor: pointer;
  height: 44px;
  line-height: 44px;
  margin-left: 15px;
  position: relative;
}
#header-container #base-header #mobile-student-header-menu #mobile-user-menu .mobile-user-menu-item span,
#student-header-container #base-header #mobile-student-header-menu #mobile-user-menu .mobile-user-menu-item span,
#header-container #base-header #mobile-student-header-menu #mobile-student-menu .mobile-user-menu-item span,
#student-header-container #base-header #mobile-student-header-menu #mobile-student-menu .mobile-user-menu-item span {
  color: #555555;
}
#header-container #base-header #mobile-student-header-menu #mobile-user-menu .mobile-user-menu-item.renew-notify,
#student-header-container #base-header #mobile-student-header-menu #mobile-user-menu .mobile-user-menu-item.renew-notify,
#header-container #base-header #mobile-student-header-menu #mobile-student-menu .mobile-user-menu-item.renew-notify,
#student-header-container #base-header #mobile-student-header-menu #mobile-student-menu .mobile-user-menu-item.renew-notify {
  background: #44a5ff;
  position: relative;
  padding: 0 0 0 44px;
  margin-left: 0;
}
#header-container #base-header #mobile-student-header-menu #mobile-user-menu .mobile-user-menu-item.renew-notify svg,
#student-header-container #base-header #mobile-student-header-menu #mobile-user-menu .mobile-user-menu-item.renew-notify svg,
#header-container #base-header #mobile-student-header-menu #mobile-student-menu .mobile-user-menu-item.renew-notify svg,
#student-header-container #base-header #mobile-student-header-menu #mobile-student-menu .mobile-user-menu-item.renew-notify svg {
  width: 28px;
  height: 25px;
  fill: white;
  position: absolute;
  top: 10px;
  left: 10px;
}
#header-container #base-header #mobile-student-header-menu #mobile-user-menu .mobile-user-menu-item.renew-notify span,
#student-header-container #base-header #mobile-student-header-menu #mobile-user-menu .mobile-user-menu-item.renew-notify span,
#header-container #base-header #mobile-student-header-menu #mobile-student-menu .mobile-user-menu-item.renew-notify span,
#student-header-container #base-header #mobile-student-header-menu #mobile-student-menu .mobile-user-menu-item.renew-notify span {
  font-size: 14px;
  color: white;
}
#header-container #base-header #mobile-student-header-menu #mobile-user-menu .mobile-user-menu-item.renew-notify .date,
#student-header-container #base-header #mobile-student-header-menu #mobile-user-menu .mobile-user-menu-item.renew-notify .date,
#header-container #base-header #mobile-student-header-menu #mobile-student-menu .mobile-user-menu-item.renew-notify .date,
#student-header-container #base-header #mobile-student-header-menu #mobile-student-menu .mobile-user-menu-item.renew-notify .date {
  display: inline-block;
  font-size: 12px;
  padding-left: 7px;
}
#header-container #base-header #mobile-student-header-menu #mobile-student-menu,
#student-header-container #base-header #mobile-student-header-menu #mobile-student-menu {
  border-top: none;
}
#header-container #base-header #mobile-student-header-menu #mobile-student-menu .actions-container,
#student-header-container #base-header #mobile-student-header-menu #mobile-student-menu .actions-container {
  border-bottom: 1px solid #e2e2e2;
}
#header-container #base-header #mobile-student-header-menu #mobile-student-menu label,
#student-header-container #base-header #mobile-student-header-menu #mobile-student-menu label {
  color: #555555;
  cursor: pointer;
  display: inline-block;
  padding-left: 12px;
  margin-top: 10px;
  -webkit-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -ms-touch-select: none;
}
#header-container #base-header #mobile-student-header-menu #mobile-student-menu #scrollable-class-list,
#student-header-container #base-header #mobile-student-header-menu #mobile-student-menu #scrollable-class-list {
  max-height: 230px;
  overflow-y: scroll;
  padding-left: 18px;
}
#header-container #base-header #mobile-student-header-menu #mobile-nav-menu,
#student-header-container #base-header #mobile-student-header-menu #mobile-nav-menu {
  border-bottom: 1px solid #dddddd;
}
#header-container #base-header #mobile-student-header-menu #mobile-nav-menu .mobile-nav-item,
#student-header-container #base-header #mobile-student-header-menu #mobile-nav-menu .mobile-nav-item {
  cursor: pointer;
  height: 44px;
  line-height: 44px;
  padding-left: 15px;
  position: relative;
}
#header-container #base-header #mobile-student-header-menu #mobile-nav-menu .mobile-nav-item .mobile-nav-text,
#student-header-container #base-header #mobile-student-header-menu #mobile-nav-menu .mobile-nav-item .mobile-nav-text {
  color: #555555;
  text-transform: uppercase;
}
#header-container #base-header #mobile-student-header-menu #mobile-nav-menu .mobile-nav-item .mobile-nav-text-selected,
#student-header-container #base-header #mobile-student-header-menu #mobile-nav-menu .mobile-nav-item .mobile-nav-text-selected {
  font-weight: 700;
}
#header-container #base-header #mobile-student-header-menu #mobile-nav-menu .mobile-nav-item .mobile-nav-chevron,
#student-header-container #base-header #mobile-student-header-menu #mobile-nav-menu .mobile-nav-item .mobile-nav-chevron {
  position: absolute;
  right: 15px;
  top: 17px;
}
#header-container #base-header #mobile-student-header-menu #mobile-nav-menu #results-mobile-nav-item,
#student-header-container #base-header #mobile-student-header-menu #mobile-nav-menu #results-mobile-nav-item {
  position: relative;
}
#header-container #base-header #mobile-student-header-menu #mobile-nav-menu #results-mobile-nav-item .mobile-results-animated-wifi-container,
#student-header-container #base-header #mobile-student-header-menu #mobile-nav-menu #results-mobile-nav-item .mobile-results-animated-wifi-container {
  display: inline-block;
  left: -6px;
  position: relative;
  top: -4px;
}
@media only screen and (min-width: 960px) {
  #header-container #base-header,
  #student-header-container #base-header {
    width: 85%;
  }
}
/*---------- SOCRATIVE PRO STUDENT HEADER ----------*/
#student-header-container {
  height: 68px;
  margin-top: -68px;
  /* Wide screen view */
}
#student-header-container #base-header .student-header-logo {
  float: left;
  margin-left: 11px;
  margin-top: 12px;
  position: relative;
  transform: scale(0.8);
  -webkit-transform: scale(0.8);
  z-index: 2;
}
#student-header-container #base-header #mobile-student-header-items {
  border-top: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
}
#student-header-container #base-header #mobile-student-header-items .mobile-student-header-item {
  color: #555555;
  cursor: pointer;
  height: 44px;
  line-height: 44px;
  margin-left: 15px;
  position: relative;
}
#student-header-container #base-header #mobile-student-header-items .mobile-student-header-item.mobile-student-header-name-row {
  height: 56px;
  line-height: 56px;
  margin-left: 0;
  padding-left: 15px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
#student-header-container #base-header #mobile-student-header-items .mobile-student-header-item .mobile-header-icon {
  vertical-align: middle;
}
#student-header-container #base-header #mobile-student-header-items .mobile-student-header-item .mobile-student-header-name-text {
  margin-left: 15px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#student-header-container #base-header #mobile-student-header-items .mobile-student-header-item span {
  color: #555555;
}
#student-header-container #base-header #mobile-student-header-items .mobile-student-header-item .handraise {
  position: absolute;
  top: 0;
  right: 0;
}
#student-header-container #base-header #mobile-student-header-items .mobile-student-header-item .handraise.handraise-off {
  top: 10px;
  right: 15px;
}
#student-header-container #base-header #mobile-student-header-items .mobile-student-header-item .handraise.handraise-off path {
  fill: #CCC;
}
#student-header-container #base-header #mobile-student-header-items .mobile-student-header-item .handraise.handraise-on {
  right: 5px;
  top: 4px;
  transition: 0.3s;
  animation: handshake 5s ease-in 2s infinite;
}
@keyframes handshake {
  8% {
    transform: rotate(8deg);
    transform-origin: 30% 100%;
  }
  18% {
    transform: rotate(-10deg);
    transform-origin: 30% 100%;
  }
  22% {
    transform: rotate(0deg);
    transform-origin: 30% 100%;
  }
  100% {
    transform: rotate(0deg);
    transform-origin: 30% 100%;
  }
}
#student-header-container #base-header #mobile-student-header-items .mobile-student-header-item .handraise.handraise-on path {
  fill: #FFA100;
}
#student-header-container .hand-raised {
  background: #ffa100;
  border-radius: 50%;
  padding: 1px 4px;
  position: absolute!important;
  left: -30px;
  top: -1px;
}
#student-header-container .hand-raised svg {
  position: relative;
  top: 2px;
  left: -1px;
}
@media only screen and (min-width: 768px) {
  #student-header-container {
    height: 92px;
    margin-top: -92px;
  }
  #student-header-container #base-header .student-header-logo {
    margin-left: 33px;
    margin-top: 23px;
    transform: scale(1);
    -webkit-transform: scale(1);
  }
}
.Blue-team {
  background-color: #276baa;
}
.Magenta-team {
  background-color: #ca2692;
}
.Lime-team {
  background-color: #a2d35d;
}
.Peach-team {
  background-color: #fcbc89;
}
.Violet-team {
  background-color: #7d3990;
}
.Teal-team {
  background-color: #258a8c;
}
.Indigo-team {
  background-color: #5f82c2;
}
.Orange-team {
  background-color: #d76d2c;
}
.Red-team {
  background-color: #b83b24;
}
.Silver-team {
  background-color: #5c646e;
}
.Green-team {
  background-color: #4fa45e;
}
.Rose-team {
  background-color: #ec7c90;
}
.Gold-team {
  background-color: #ba8324;
}
.Maroon-team {
  background-color: #9d3444;
}
.Yellow-team {
  background-color: #fbdb45;
}
.Tan-team {
  background-color: #D2B48C;
}
.Hot.Pink-team {
  background-color: #e602e7;
}
.Sienna-team {
  background-color: #e18942;
}
.Dimgray-team {
  background-color: #c3c3c3;
}
.Crimson-team {
  background-color: #990000;
}
.login-error-banner {
  background-color: rgba(229, 8, 0, 0.9);
  min-height: 56px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: left;
  padding: 18px 50px 18px 18px;
}
.login-error-banner .login-banner-icon {
  position: relative;
  top: 3px;
  margin-right: 10px;
}
.login-error-banner .login-banner-text {
  color: white;
}
.login-error-banner .login-banner-error-close {
  position: absolute;
  right: 18px;
  top: 18px;
}
.login-error-banner .login-banner-error-close:hover {
  cursor: pointer;
}
#page-container-student-id {
  background: white;
  padding: 0 0 70px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
#main-content-student-id {
  min-height: 100%;
  text-align: center;
}
#main-content-student-id .login-logo img {
  margin-bottom: 2em;
}
#main-content-student-id .login-logo svg {
  margin: 25px auto 5px;
}
#showbie-login {
  font-size: 14px;
  padding: 2em;
}
#showbie-login p {
  margin-bottom: 1em;
}
#showbie-login p.showbie-class-name {
  font-weight: bold;
  background-color: #dfeaf3;
  display: inline-block;
  padding: 6px;
  border-radius: 5px;
}
#showbie-login .actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 3em;
}
#showbie-login .actions a {
  font-size: 14px;
  max-width: 320px;
  margin-bottom: 1em;
}
#join-room-container,
#student-login-container {
  background-color: #dfeaf3;
  border-radius: 5px;
  padding: 32px 16px;
  text-align: left;
}
#join-room-container .student-login-title,
#student-login-container .student-login-title {
  margin-bottom: 46px;
}
#join-room-container .student-login-title h1,
#student-login-container .student-login-title h1 {
  color: #555555;
  font-size: 24px;
  font-weight: 300;
  line-height: 24px;
}
#join-room-container .student-roster-room-name,
#student-login-container .student-roster-room-name {
  font-size: 18px;
  font-weight: 600;
  margin: 13px 0;
  text-transform: uppercase;
}
#join-room-container .cancel-button,
#student-login-container .cancel-button {
  float: right;
  font-size: 14px;
  text-decoration: underline;
  text-transform: none;
  color: #6d9ec4;
  font-weight: 600;
}
#join-room-container .info-block,
#student-login-container .info-block {
  padding: 13px;
  margin-bottom: 20px;
  color: white;
  background: #AFCBE0;
}
#join-room-container .info-block .info-icon,
#student-login-container .info-block .info-icon {
  position: relative;
}
#join-room-container .info-block .info-icon svg,
#student-login-container .info-block .info-icon svg {
  position: absolute;
  top: 10px;
}
#join-room-container .info-block .info-text,
#student-login-container .info-block .info-text {
  margin-left: 33px;
}
#join-room-container .info-block .info-text span,
#student-login-container .info-block .info-text span {
  color: white;
}
#join-room-container #student-login,
#student-login-container #student-login {
  padding-top: 0;
  margin-bottom: 20px;
}
#join-room-container #student-login .input-container,
#student-login-container #student-login .input-container {
  width: 100%;
}
#join-room-container #student-login #studentRoomName,
#student-login-container #student-login #studentRoomName {
  text-transform: uppercase;
  width: 100%;
}
#join-room-container #student-login .student-id-error,
#student-login-container #student-login .student-id-error {
  padding-right: 2.3em;
}
#join-room-container #student-login input,
#student-login-container #student-login input {
  font-family: "Roboto Mono";
  width: 100%;
  font-size: 17px;
}
#join-room-container #student-login input::-webkit-input-placeholder,
#student-login-container #student-login input::-webkit-input-placeholder {
  font-family: "Open Sans", Arial, sans-serif;
  text-transform: capitalize;
}
#join-room-container #student-login input:-moz-placeholder,
#student-login-container #student-login input:-moz-placeholder,
#join-room-container #student-login input::-moz-placeholder,
#student-login-container #student-login input::-moz-placeholder {
  font-family: "Open Sans", Arial, sans-serif;
  text-transform: capitalize;
}
#join-room-container #student-login input:-ms-input-placeholder,
#student-login-container #student-login input:-ms-input-placeholder {
  font-family: "Open Sans", Arial, sans-serif;
  text-transform: capitalize;
}
#join-room-container .submit-button-container,
#student-login-container .submit-button-container {
  margin-left: auto;
  margin-right: auto;
  padding: 12px 0 0;
}
#join-room-container #studentLoginButton,
#student-login-container #studentLoginButton {
  width: 100%;
}
#join-room-container.single-display,
#student-login-container.single-display {
  margin: 28px 0 0 0;
  width: 300px;
}
@media screen and (min-width: 768px) {
  #join-room-container.single-display,
  #student-login-container.single-display {
    padding: 32px;
    width: 489px !important;
  }
}
@media screen and (max-width: 480px) {
  #student-login-container #student-login input {
    width: 100%;
  }
  #join-room-container #student-login input {
    width: 100%;
  }
  .button-large {
    min-height: 35px;
    padding: 0 30px;
    line-height: 30px;
    font-size: 12px;
    min-height: 44px;
  }
}
.outer-join-room-container #join-room-container {
  float: none;
}
.outer-join-room-container .join-room-language-menu {
  cursor: pointer;
  display: inline-block;
  float: right;
  height: 44px;
  line-height: 44px;
  margin-bottom: 61px;
  padding: 0 8px;
  position: relative;
}
.outer-join-room-container .join-room-language-menu .language-menu-button {
  position: relative;
}
.outer-join-room-container .join-room-language-menu .language-menu-flag-selected {
  margin-right: 8px;
  -webkit-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -ms-touch-select: none;
}
.outer-join-room-container .join-room-language-menu .language-menu-text {
  margin-right: 8px;
  -webkit-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -ms-touch-select: none;
}
.outer-join-room-container .join-room-language-menu .language-menu-chevron {
  position: relative;
  top: -2px;
}
.outer-join-room-container .join-room-language-menu .language-menu-arrow {
  border-right: 16px solid transparent;
  border-top: 16px solid #ffffff;
  box-shadow: -1px -1px 1px 0px #aaaaaa;
  height: 0;
  position: absolute;
  right: 6px;
  width: 0;
  z-index: 1;
}
.outer-join-room-container .join-room-language-menu .language-menu-arrow-above {
  transform: rotate(225deg);
  top: -7px;
}
.outer-join-room-container .join-room-language-menu .language-menu-arrow-below {
  transform: rotate(45deg);
  top: 35px;
}
.outer-join-room-container .join-room-language-menu .language-menu {
  background-color: #ffffff;
  box-shadow: 0 0 4px #888;
  max-height: 308px;
  overflow-y: scroll;
  position: absolute;
  right: 0;
  -webkit-overflow-scrolling: touch;
  width: 238px;
}
.outer-join-room-container .join-room-language-menu .language-menu .language-menu-item {
  padding: 0 16px;
  text-align: left;
}
.outer-join-room-container .join-room-language-menu .language-menu .language-menu-item .language-menu-flag {
  margin-right: 12px;
  -webkit-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -ms-touch-select: none;
}
.outer-join-room-container .join-room-language-menu .language-menu .language-menu-item .language-menu-checkmark {
  color: #8cb4d2;
  float: right;
}
.outer-join-room-container .join-room-language-menu .language-menu .language-menu-item-hover:hover {
  background-color: #eeeeee;
}
.outer-join-room-container .join-room-language-menu .language-menu .language-menu-item-selected {
  background-color: #eeeeee;
}
.outer-join-room-container .join-room-language-menu .language-menu-above {
  bottom: 42px;
  right: -6px;
}
.outer-join-room-container .join-room-language-menu .language-menu-below {
  top: 42px;
}
@media screen and (min-width: 768px) {
  .outer-join-room-container .join-room-language-menu .language-menu {
    right: -20px;
  }
}
.tab-button-base {
  background: white;
  color: #333;
  text-transform: uppercase;
  font-weight: 600;
  float: left;
  padding: 0 1em;
  text-align: center;
  outline: none;
}
.tab-button-base.selected-tab-button {
  background: #8CB4D2;
  border: 2px solid #7799b3 !important;
}
.tab-button {
  background: white;
  color: #333;
  text-transform: uppercase;
  font-weight: 600;
  float: left;
  padding: 0 1em;
  text-align: center;
  outline: none;
}
.tab-button.selected-tab-button {
  background: #8CB4D2;
  border: 2px solid #7799b3 !important;
}
.selected-tab-button {
  background: white;
  color: #333;
  text-transform: uppercase;
  font-weight: 600;
  float: left;
  padding: 0 1em;
  text-align: center;
  outline: none;
}
.selected-tab-button.selected-tab-button {
  background: #8CB4D2;
  border: 2px solid #7799b3 !important;
}
.buttons-container {
  height: auto;
  margin: 0 auto;
  padding: 2em 0;
  width: 91%;
}
.buttons-container .info-block {
  padding: 13px;
  margin-bottom: 20px;
  color: white;
  background: #AFCBE0;
}
.buttons-container .info-block .info-icon {
  position: relative;
}
.buttons-container .info-block .info-icon svg {
  position: absolute;
}
.buttons-container .info-block .info-text {
  margin-left: 32px;
}
.buttons-container .info-block .info-text span {
  color: white;
}
.buttons-container button {
  border: none;
  border-top: 2px solid #bbb;
  border-bottom: 2px solid #bbb;
  border-right: 1px solid #bbb;
  height: 55px;
  width: 150px;
  cursor: pointer;
  transition: 0.3s ease all;
}
.buttons-container button:first-child,
.buttons-container button.first-btn {
  border-left: 2px solid #bbb;
}
.buttons-container button:last-child {
  border-right: 2px solid #bbb;
}
.buttons-container button:hover {
  background: #8CB4D2;
}
@media only screen and (max-width: 1220px) {
  .buttons-container button {
    font-size: 0.9em;
    padding: 0 0.3em;
  }
}
@media only screen and (max-width: 480px) {
  .buttons-container button {
    font-size: 0.8em;
    padding: 0 1em;
    width: 120px;
  }
}
.buttons-container.special button {
  width: 14.28571429%;
}
@media only screen and (max-width: 768px) {
  .buttons-container.special button {
    width: 33.33%;
  }
  .buttons-container.special button:nth-child(3) {
    border-right: 2px solid #bbb;
  }
  .buttons-container.special button:nth-child(4) {
    border-left: 2px solid #bbb;
  }
  .buttons-container.special button:nth-child(4),
  .buttons-container.special button:nth-child(5),
  .buttons-container.special button:nth-child(6) {
    border-top: 0;
  }
  .buttons-container.special button:nth-child(6) {
    border-right: 2px solid #bbb;
  }
  .buttons-container.special button:nth-child(7) {
    width: 100%;
    border-left: 2px solid #bbb;
    border-top: 0;
  }
}
.buttons-container h1 {
  float: left;
  margin: 0.5em 0 0 1em;
  font-size: 1.2em;
}
@media only screen and (min-width: 375px) {
  .buttons-container {
    width: 92.5%;
  }
}
@media only screen and (min-width: 768px) {
  .buttons-container {
    width: 93%;
  }
}
@media only screen and (min-width: 960px) {
  .buttons-container {
    width: 82%;
  }
}
#quiz-list-container {
  margin: 0 auto;
  padding-bottom: 2em;
  width: 91%;
}
@media only screen and (min-width: 375px) {
  #quiz-list-container {
    width: 92.5%;
  }
}
@media only screen and (min-width: 768px) {
  #quiz-list-container {
    width: 93%;
  }
}
@media only screen and (min-width: 960px) {
  #quiz-list-container {
    width: 82%;
  }
}
#quiz-list-container .no-quizzes {
  width: 100%;
}
.selectable-row {
  -webkit-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -ms-touch-select: none;
  background: #dfeaf3;
  margin-bottom: 1em;
  padding: 1em;
  transition: 0.3s ease all;
  cursor: pointer;
  border: 2px solid #AFCBE0;
}
.selectable-row:hover {
  background: #AFCBE0;
  border-color: #6f9fc2;
}
.selectable-row .row-active-area {
  overflow: hidden;
}
.selectable-row span {
  -webkit-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -ms-touch-select: none;
  color: #333;
  font-size: 1em;
  line-height: 1em;
  white-space: nowrap;
  overflow: hidden;
}
.selectable-row .report-row-checkbox {
  float: right;
  margin: 0.6em;
}
.selectable-row .standard-display {
  display: block;
  color: rgba(74, 51, 51, 0.5);
  text-transform: uppercase;
  padding-top: 5px;
}
.selected-row {
  -webkit-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -ms-touch-select: none;
  background: #dfeaf3;
  margin-bottom: 1em;
  padding: 1em;
  transition: 0.3s ease all;
  cursor: pointer;
  border: 2px solid #AFCBE0;
  border-color: #dfeaf3;
}
.selected-row:hover {
  background: #AFCBE0;
  border-color: #6f9fc2;
}
.selected-row .row-active-area {
  overflow: hidden;
}
.selected-row span {
  -webkit-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -ms-touch-select: none;
  color: #333;
  font-size: 1em;
  line-height: 1em;
  white-space: nowrap;
  overflow: hidden;
}
.selected-row .report-row-checkbox {
  float: right;
  margin: 0.6em;
}
.selected-row .standard-display {
  display: block;
  color: rgba(74, 51, 51, 0.5);
  text-transform: uppercase;
  padding-top: 5px;
}
.selected-row:hover {
  background: #dfeaf3;
  border-color: #dfeaf3;
}
#student-page-container {
  font-family: Inter, -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
}
#student-page-container #main-content,
#student-page-container #content-container {
  padding: 0;
}
#main-content,
#content-container {
  position: relative;
  z-index: 5;
  /* [1] */
}
#take-quiz-master-container {
  width: 100%;
  margin: 0 auto;
  padding: 21px 16px 3em;
  /**
	 * QUESTION CONTAINER
	 */
}
#take-quiz-master-container #question-container [class*='-question'] .question-header-container .question-explanation-container {
  margin-bottom: 11px;
  margin-left: 310px;
  font-family: Inter, -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
}
@media screen and (max-width: 768px) {
  #take-quiz-master-container #question-container [class*='-question'] .question-header-container .question-explanation-container {
    margin-left: 0;
  }
}
#take-quiz-master-container #question-container [class*='-question'] .question-header-container .question-explanation-container.no-image {
  margin-left: 0;
}
#take-quiz-master-container #question-container [class*='-question'] .question-header-container .question-explanation-container .question-text {
  padding: 0.5rem 0;
  /* [1] */
  overflow-x: auto;
  word-wrap: break-word;
}
#take-quiz-master-container #question-container [class*='-question'] .question-header-container .question-explanation-container .question-text p,
#take-quiz-master-container #question-container [class*='-question'] .question-header-container .question-explanation-container .question-text pre {
  color: #555555;
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
  font-family: Inter, -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
}
#take-quiz-master-container #question-container [class*='-question'] .question-answer-container {
  margin-bottom: 31px;
}
#take-quiz-master-container #question-container [class*='-question'] .question-answer-container .mc-answer-area {
  display: flex;
  flex-wrap: wrap;
}
#take-quiz-master-container #question-container [class*='-question'] .question-answer-container .mc-answer-area .mc-answer-option {
  margin-bottom: 8px;
  flex-basis: 100%;
  max-width: 100%;
  padding-right: 1em;
}
#take-quiz-master-container #question-container [class*='-question'] .question-answer-container .mc-answer-area .mc-answer-option.selected .answer-option-letter {
  background-color: #6d9ec4;
  border: 1px solid #6d9ec4;
  color: #ffffff;
}
#take-quiz-master-container #question-container [class*='-question'] .question-answer-container .mc-answer-area .mc-answer-option.selected .answerContentWrapper {
  background-color: rgba(140, 181, 212, 0.29);
  border-color: rgba(140, 181, 212, 0.29);
}
#take-quiz-master-container #question-container [class*='-question'] .question-answer-container .mc-answer-area .mc-answer-option .mc-answer-option-container {
  display: flex;
  flex-direction: row;
}
#take-quiz-master-container #question-container [class*='-question'] .question-answer-container .mc-answer-area .mc-answer-option .answer-option-letter {
  cursor: pointer;
  border: 1px solid #555555;
  border-radius: 50%;
  display: block;
  float: left;
  font-weight: 600;
  height: 40px;
  line-height: 38px;
  text-align: center;
  width: 40px;
  flex-grow: 0;
  flex-shrink: 0;
}
#take-quiz-master-container #question-container [class*='-question'] .question-answer-container .mc-answer-area .mc-answer-option .mc-answer-option-text {
  max-width: 100%;
  padding: 5px 5px 5px 0;
  overflow-x: auto;
  word-wrap: break-word;
}
#take-quiz-master-container #question-container [class*='-question'] .question-answer-container .mc-answer-area .mc-answer-option .mc-answer-option-text pre {
  font-family: Inter, -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
}
@media screen and (max-width: 480px) {
  #take-quiz-master-container #question-container [class*='-question'] .question-answer-container .mc-answer-area .mc-answer-option .wrap-text {
    word-wrap: break-word;
    line-height: 20px;
  }
}
@media screen and (min-width: 768px) {
  #take-quiz-master-container #question-container [class*='-question'] .question-answer-container .mc-answer-area .mc-answer-option {
    flex-basis: 50%;
  }
}
#take-quiz-master-container #question-container [class*='-question'] .question-answer-container .fr-question-textarea {
  border: 1px solid #cccccc;
  /* Android ≤ 2.3, iOS ≤ 4 */
  /* Firefox ≤ 28 */
  box-sizing: border-box;
  /* Chrome, Firefox 29+, IE 8+, Opera, Safari 5.1 */
  color: #555555;
  display: block;
  font-size: 14px;
  height: 150px;
  margin: 0 auto;
  outline: none;
  padding: 10px;
  resize: none;
  width: 100%;
  font-family: Inter, -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
}
#take-quiz-master-container #question-container [class*='-question'] .question-answer-container .fr-question-textarea::-webkit-input-placeholder {
  color: #c0c0c0;
  font-family: Inter, -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  font-weight: 300;
}
#take-quiz-master-container #question-container [class*='-question'] .question-answer-container .fr-question-textarea:-moz-placeholder {
  color: #c0c0c0;
  font-family: Inter, -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  font-weight: 300;
}
#take-quiz-master-container #question-container [class*='-question'] .question-answer-container .fr-question-textarea::-moz-placeholder {
  color: #c0c0c0;
  font-family: Inter, -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  font-weight: 300;
}
#take-quiz-master-container #question-container [class*='-question'] .question-answer-container .fr-question-textarea:-ms-input-placeholder {
  color: #c0c0c0;
  font-family: Inter, -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  font-weight: 300;
}
#take-quiz-master-container #question-container .nav-container {
  width: 100%;
}
#take-quiz-master-container #question-container .nav-container #previous-button,
#take-quiz-master-container #question-container .nav-container #next-button {
  padding: 0;
  min-width: 120px;
  margin: 0 60px;
}
#take-quiz-master-container #question-container .nav-container #submit-button {
  font-size: 12px;
  height: 44px;
  min-width: 100%;
}
#take-quiz-master-container #question-container .nav-container #submit-button:disabled,
#take-quiz-master-container #question-container .nav-container #submit-button:disabled:active,
#take-quiz-master-container #question-container .nav-container #submit-button:disabled:focus,
#take-quiz-master-container #question-container .nav-container #submit-button:disabled:hover {
  background-color: #ffa100;
  border: 1px solid #ffa100;
  opacity: 0.5;
  transition: none;
}
@media screen and (max-width: 768px) {
  #take-quiz-master-container #question-container .nav-container #previous-button,
  #take-quiz-master-container #question-container .nav-container #next-button {
    min-height: 35px;
    padding: 0 30px;
    line-height: 30px;
    font-size: 12px;
    margin: 0 30px;
  }
}
@media screen and (max-width: 550px) {
  #take-quiz-master-container #question-container .nav-container #previous-button,
  #take-quiz-master-container #question-container .nav-container #next-button {
    width: 49%;
    min-width: 0;
    margin: 0;
    font-size: 10px;
    line-height: 16px;
  }
  #take-quiz-master-container #question-container .nav-container #next-button {
    margin-left: 1%;
  }
}
@media screen and (max-width: 375px) {
  #take-quiz-master-container #question-container .nav-container #previous-button,
  #take-quiz-master-container #question-container .nav-container #next-button {
    padding: 0;
  }
}
#take-quiz-master-container .student-quiz-image-container {
  margin-bottom: 11px;
  margin-top: 10px;
  min-height: 192px;
  min-width: 100%;
}
#take-quiz-master-container .answerContentWrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  min-width: 0;
  margin-left: 0.25em;
  padding: 0.5em;
  border: 1px solid rgba(140, 181, 212, 0.29);
  border-radius: 4px;
  transition: 200ms;
  cursor: pointer;
}
#take-quiz-master-container .answerContentWrapper .activity-image-container .activity-image {
  max-height: 300px;
  max-width: 300px;
  margin: 0;
  width: auto;
}
@media screen and (max-width: 480px) {
  #take-quiz-master-container .answerContentWrapper .activity-image-container .activity-image {
    max-width: 100%;
  }
}
@media screen and (min-width: 768px) {
  #take-quiz-master-container {
    padding: 37px 0 3em;
    width: 80%;
  }
  #take-quiz-master-container #question-container [class*='-question'] .question-header-container .question-explanation-container {
    margin-bottom: 15px;
  }
  #take-quiz-master-container #question-container [class*='-question'] .question-header-container .question-explanation-container .question-text p,
  #take-quiz-master-container #question-container [class*='-question'] .question-header-container .question-explanation-container .question-text pre {
    font-size: 18px;
  }
  #take-quiz-master-container #question-container .nav-container #submit-button {
    min-width: 236px;
  }
  #take-quiz-master-container .student-quiz-image-container {
    float: left;
    margin-right: 21px;
    margin-top: 0;
    min-height: 200px;
    min-width: 300px;
  }
}
.student-quiz-media-container {
  justify-content: center;
  margin-bottom: 11px;
  margin-top: 10px;
  height: 210px;
  width: 372px;
}
.student-question-media-feedback-container {
  justify-content: center;
  margin-bottom: 11px;
  margin-top: 10px;
  height: 210px;
  width: 372px;
}
.activity-media-container {
  height: 210px;
  width: 372px;
  border-radius: 0.5rem;
  box-shadow: 0 0 0 1px #D3DCE1;
  overflow: hidden;
}
.video-error-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.video-error-container p {
  font-size: 16px;
  color: #555555;
  padding-bottom: 1em;
}
.video-error-container button {
  font-family: Inter, -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
  padding: 0.5em 1em;
  color: #0075A3;
  border-radius: 6px;
  background-color: transparent;
  border: none;
  cursor: pointer;
}
.video-error-container button:hover {
  background-color: #E4FBFF;
}
.video-error-container button:focus {
  background-color: #E4FBFF;
  outline: 2px solid #0075A3;
  outline-offset: 2px;
}
@media screen and (min-width: 768px) {
  .student-quiz-media-container {
    float: left;
    margin-top: 0;
    margin-right: 21px;
  }
}
.take-quiz-container {
  padding: 4em 0;
}
.take-quiz-container #select-team-container,
.take-quiz-container #enter-name-container {
  position: relative;
  width: 32em;
  max-width: 100%;
  margin: 0 auto;
  padding: 1em 0 2em;
  text-align: center;
  font-size: 14px;
  background: #dfeaf3;
}
.take-quiz-container #select-team-container .enter-name,
.take-quiz-container #enter-name-container .enter-name {
  width: 100%;
}
@media only screen and (max-width: 600px) {
  .take-quiz-container #select-team-container,
  .take-quiz-container #enter-name-container {
    width: 90%;
  }
}
.take-quiz-container #enter-name-container {
  border-radius: 5px;
}
.take-quiz-container #enter-name-container .input-container {
  width: 90%;
}
.take-quiz-container #enter-name-container .input-container .input-error-icon {
  right: 12px;
  top: 40px;
}
.take-quiz-container #enter-name-container input {
  width: 100%;
  margin: 2em 0;
}
.take-quiz-container #select-team-container {
  border-radius: 5px;
  padding: 32px;
  text-align: left;
  width: 305px;
}
.take-quiz-container #select-team-container .custom-select {
  margin: 0 auto;
  width: 100%;
}
.take-quiz-container #select-team-container .start-racing-container {
  text-align: center;
}
.take-quiz-container #select-team-container .start-racing-container .action-button {
  margin-top: 32px;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .take-quiz-container #select-team-container {
    width: 490px;
  }
}
/* STUDENT SPACE RACE AND PROGRESS */
.progress-container,
.space-race-progress-container {
  cursor: default;
  padding-top: 17px;
  -webkit-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -ms-touch-select: none;
  width: 100%;
}
.progress-container .quiz-progress,
.space-race-progress-container .quiz-progress,
.progress-container .space-race-progress,
.space-race-progress-container .space-race-progress {
  margin: 0 auto;
  position: relative;
  text-align: center;
  padding: 0 14px;
}
@media only screen and (min-width: 960px) {
  .progress-container .quiz-progress,
  .space-race-progress-container .quiz-progress,
  .progress-container .space-race-progress,
  .space-race-progress-container .space-race-progress {
    width: 68.54166667%;
  }
}
@media only screen and (min-width: 1220px) {
  .progress-container .quiz-progress,
  .space-race-progress-container .quiz-progress,
  .progress-container .space-race-progress,
  .space-race-progress-container .space-race-progress {
    width: 82.13114754%;
  }
}
.progress-container .quiz-progress .quiz-progress-text,
.space-race-progress-container .quiz-progress .quiz-progress-text,
.progress-container .space-race-progress .quiz-progress-text,
.space-race-progress-container .space-race-progress .quiz-progress-text,
.progress-container .quiz-progress .space-race-progress-text,
.space-race-progress-container .quiz-progress .space-race-progress-text,
.progress-container .space-race-progress .space-race-progress-text,
.space-race-progress-container .space-race-progress .space-race-progress-text {
  color: #555555;
  float: left;
  font-size: 24px;
  font-weight: 300;
}
.progress-container .quiz-progress .quiz-progress-text,
.space-race-progress-container .quiz-progress .quiz-progress-text,
.progress-container .space-race-progress .quiz-progress-text,
.space-race-progress-container .space-race-progress .quiz-progress-text {
  float: none;
  line-height: 44px;
}
.progress-container .quiz-progress .space-race-progress-text,
.space-race-progress-container .quiz-progress .space-race-progress-text,
.progress-container .space-race-progress .space-race-progress-text,
.space-race-progress-container .space-race-progress .space-race-progress-text {
  color: #ffffff;
}
.progress-container .quiz-progress .space-race-team,
.space-race-progress-container .quiz-progress .space-race-team,
.progress-container .space-race-progress .space-race-team,
.space-race-progress-container .space-race-progress .space-race-team {
  display: inline-block;
  float: right;
  margin-right: 8px;
  position: relative;
}
.progress-container .quiz-progress .space-race-team .student-rocket-icon,
.space-race-progress-container .quiz-progress .space-race-team .student-rocket-icon,
.progress-container .space-race-progress .space-race-team .student-rocket-icon,
.space-race-progress-container .space-race-progress .space-race-team .student-rocket-icon {
  position: absolute;
  top: 25%;
}
.progress-container .quiz-progress .space-race-team .space-race-team-text,
.space-race-progress-container .quiz-progress .space-race-team .space-race-team-text,
.progress-container .space-race-progress .space-race-team .space-race-team-text,
.space-race-progress-container .space-race-progress .space-race-team .space-race-team-text {
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1px;
  padding-left: 37px;
  text-transform: uppercase;
}
.progress-container .quiz-progress .student-nav-finish-button,
.space-race-progress-container .quiz-progress .student-nav-finish-button,
.progress-container .space-race-progress .student-nav-finish-button,
.space-race-progress-container .space-race-progress .student-nav-finish-button {
  float: right;
  margin-top: 10px;
  padding: 0;
  min-width: 111px;
}
.progress-container .space-race-progress,
.space-race-progress-container .space-race-progress {
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .progress-container,
  .space-race-progress-container {
    padding-top: 36px;
  }
  .progress-container .quiz-progress,
  .space-race-progress-container .quiz-progress,
  .progress-container .space-race-progress,
  .space-race-progress-container .space-race-progress {
    padding: 0;
    width: 80%;
  }
  .progress-container .quiz-progress .quiz-progress-text,
  .space-race-progress-container .quiz-progress .quiz-progress-text,
  .progress-container .space-race-progress .quiz-progress-text,
  .space-race-progress-container .space-race-progress .quiz-progress-text,
  .progress-container .quiz-progress .space-race-progress-text,
  .space-race-progress-container .quiz-progress .space-race-progress-text,
  .progress-container .space-race-progress .space-race-progress-text,
  .space-race-progress-container .space-race-progress .space-race-progress-text {
    font-size: 30px;
  }
  .progress-container .quiz-progress .space-race-team,
  .space-race-progress-container .quiz-progress .space-race-team,
  .progress-container .space-race-progress .space-race-team,
  .space-race-progress-container .space-race-progress .space-race-team {
    float: none;
    margin-left: -33px;
    margin-right: auto;
  }
  .progress-container .quiz-progress .student-nav-finish-button,
  .space-race-progress-container .quiz-progress .student-nav-finish-button,
  .progress-container .space-race-progress .student-nav-finish-button,
  .space-race-progress-container .space-race-progress .student-nav-finish-button {
    min-width: 144px;
  }
}
.space-race-progress-container {
  line-height: 62px;
  padding-top: 0;
}
#feedback-container .modal-header,
#feedback-container .modal-body,
#feedback-container .modal-footer {
  text-align: left;
  word-wrap: break-word;
  font-size: 14px;
  font-family: Inter, -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
}
#feedback-container .modal-header p,
#feedback-container .modal-body p,
#feedback-container .modal-footer p,
#feedback-container .modal-header pre,
#feedback-container .modal-body pre,
#feedback-container .modal-footer pre {
  font-family: Inter, -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
}
#feedback-container .modal-header i {
  display: inline-block;
  position: relative;
  top: 2px;
}
#feedback-container .modal-header h4 {
  font-weight: 700;
  font-family: Inter, -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
}
#feedback-container .modal-header .incorrect-title-bar i {
  color: #e31212;
}
#feedback-container .modal-header .correct-title-bar i {
  color: #6b9d36;
}
#feedback-container .modal-header .correct-title-bar > h4 > span,
#feedback-container .modal-header .incorrect-title-bar > h4 > span {
  font-weight: 700;
  font-family: Inter, -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
}
#feedback-container #question-text pre,
#feedback-container #explanation-text pre {
  padding: 5px 0;
  overflow-x: auto;
}
#feedback-container #answer-text {
  word-wrap: break-word;
  margin-top: 1.25em;
}
#feedback-container #answer-text .answer-header {
  font-weight: 700;
}
#feedback-container #answer-text .answer {
  border: solid 1px #dfeaf3;
  border-radius: 10px;
  background-color: #dfeaf3;
  color: black;
  display: inline-block;
  max-width: 100%;
  margin: 0.4em 0.4em 0 0;
  padding: 0.4em;
  overflow-x: auto;
}
#feedback-container #answer-text .answer img {
  max-height: 115px;
  max-width: 115px;
  margin: 4px 0;
}
#feedback-container #explanation-text {
  display: block;
  margin-top: 1.25em;
}
#feedback-container .explanationImageWrapper {
  display: flex;
}
#feedback-container #submit-feedback-button {
  height: 44px;
}
#results-container .modal-header,
#results-container .modal-body,
#results-container .modal-footer {
  text-align: left;
  word-wrap: break-word;
  font-size: 14px;
}
#results-container .modal-header i {
  display: inline-block;
  position: relative;
  top: 2px;
}
#results-container .modal-header h4 {
  font-weight: 700;
}
#results-container .modal-header .results-title-bar > h3 {
  font-weight: 700;
}
#results-container .result-value {
  padding-left: 7px;
}
#results-container #percent-text {
  word-wrap: break-word;
  margin-top: 1.25em;
}
#results-container #percent-text .percent-header {
  font-weight: 700;
}
#results-container #neutral-text {
  display: block;
  margin-top: 1.25em;
}
#results-container .button-primary {
  height: 44px;
}
#take-quiz-master-container.take-quiz-master-container-nav {
  padding: 21px 16px 0;
}
@media screen and (min-width: 768px) {
  #take-quiz-master-container.take-quiz-master-container-nav {
    padding: 21px 0 0;
  }
}
.quiz-progress-container {
  float: left;
  text-align: left;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
@media screen and (max-width: 320px) {
  .quiz-progress-container {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }
}
.question-type-container {
  padding-bottom: 6px;
}
.question-type-dot {
  border-radius: 50%;
  display: inline-block;
  height: 12px;
  margin-right: 5px;
  width: 12px;
}
.fr-question-type-dot {
  background-color: #ff8528;
}
.mc-question-type-dot {
  background-color: #e8c400;
}
.tf-question-type-dot {
  background-color: #8c6fcc;
}
.question-type-text {
  font-size: 12px;
  vertical-align: top;
}
.fr-question-type-text {
  color: #ff8528;
}
.mc-question-type-text {
  color: #e8c400;
}
.tf-question-type-text {
  color: #8c6fcc;
}
.pagination-container {
  margin: 24px auto 0;
  padding-bottom: 48px;
}
@keyframes twist {
  0% {
    transform: rotate(0deg);
  }
  60% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.waiting-for-teacher-container {
  padding: 45px 0 4em 0;
}
.waiting-for-teacher-container .already-responded-text,
.waiting-for-teacher-container .waiting-for-activity-text {
  font-size: 18px;
  font-weight: 400;
}
.waiting-for-teacher-container .already-responded-text span,
.waiting-for-teacher-container .waiting-for-activity-text span {
  font-size: 18px;
  font-weight: 300;
}
.waiting-inside-container {
  position: relative;
  width: 90%;
  min-width: 20em;
  height: 100%;
  padding: 0.4em;
  margin: 0 auto;
}
.hex-loading-container {
  display: flex;
  position: relative;
  justify-content: center;
  width: 15em;
  margin: 30px auto;
  -webkit-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -ms-touch-select: none;
}
.pause-icon-container {
  display: flex;
  position: relative;
  justify-content: center;
  width: 15em;
  margin: 50px auto 12px auto;
  -webkit-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -ms-touch-select: none;
}
.waiting-hex {
  transform-origin: center;
  animation: twist 3000ms cubic-bezier(0.29, 0.04, 0.23, 1) infinite both;
}
.waiting-text {
  position: relative;
  width: 100%;
  height: auto;
}
.waiting-text p {
  text-align: center;
  font-size: 1.5em;
  line-height: 1.5em;
}
#sa-popup-bg {
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 1000;
  top: 0;
  left: 0;
}
#sa-popup-box {
  text-align: left;
  width: 90%;
}
#sa-popup-box.modal-dialog .cancel-button {
  padding: 15px 10px 15px 15px;
}
#sa-popup-box #sa-popup-content {
  font-size: 14px;
}
#sa-popup-box #sa-popup-content .input-container {
  margin: 8px 0 24px;
  width: 100%;
}
#sa-popup-box #sa-popup-content .input-container #saQuestion {
  font-weight: 300;
  width: 100%;
}
#sa-popup-box #sa-popup-content .settings-cnt {
  margin-bottom: 20px;
  position: relative;
}
#sa-popup-box #sa-popup-content .settings-cnt .toggle-label {
  line-height: 32px;
  padding-left: 10px;
  -webkit-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -ms-touch-select: none;
}
#sa-popup-box #sa-popup-content .settings-cnt .tooltip-title {
  left: -5px;
  right: inherit;
  width: 275px;
}
#sa-popup-box #sa-popup-content .settings-cnt .tooltip-title .triangle-left-above {
  right: 126px;
}
#sa-popup-box #sa-popup-content .settings-cnt .tooltip-title .triangle-right-above {
  right: 130px;
}
#sa-popup-box #sa-popup-content .settings-cnt .help-tooltip-container {
  vertical-align: top;
  display: inline-block;
}
#sa-popup-box #sa-popup-content .settings-cnt .short-answer-help-tooltip {
  left: 5px;
  top: 0px;
}
#sa-popup-box #sa-popup-content .settings-cnt .short-answer-help-tooltip .help-tooltip-above {
  bottom: 37px;
}
#sa-popup-box #sa-popup-content .settings-cnt .help-tooltip {
  left: -160px;
  width: 300px;
  padding-top: 8px;
}
#sa-popup-box #sa-popup-content .settings-cnt .help-tooltip .pro-badge-icon {
  position: relative;
  top: 5px;
  margin-right: 10px;
}
#sa-popup-box #sa-popup-content .settings-cnt .help-tooltip .help-title {
  display: inline-block;
}
#sa-popup-box #sa-popup-content .settings-cnt .help-tooltip .help-text {
  display: block;
}
#sa-popup-box #sa-start-button {
  margin-top: 10px;
}
#sa-popup-box .action-button-200 {
  width: 100px;
}
#sa-popup-box .secondary-action-button {
  margin-left: 16px;
}
@media only screen and (min-width: 768px) {
  #sa-popup-box {
    max-width: 700px;
    padding: 32px;
  }
  #sa-popup-box.modal-dialog .cancel-button {
    padding: 32px;
  }
  #sa-popup-box .action-button-200 {
    width: 200px;
  }
}
@media screen and (max-width: 480px) {
  #sa-popup-box #sa-popup-content .settings-cnt .help-tooltip {
    left: -175px;
  }
}
.race-module-background {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #262628;
  border: 2px solid #121213;
  /* Android ≤ 2.3, iOS ≤ 4 */
  /* Firefox ≤ 28 */
  box-sizing: border-box;
  /* Chrome, Firefox 29+, IE 8+, Opera, Safari 5.1 */
  /* z-index: 2; */
  left: 0;
}
#race-module {
  padding: 7px 1em 2em 1em;
  height: auto;
  position: relative;
  /* Android ≤ 2.3, iOS ≤ 4 */
  /* Firefox ≤ 28 */
  box-sizing: border-box;
  /* Chrome, Firefox 29+, IE 8+, Opera, Safari 5.1 */
  left: 0;
  width: 100%;
  min-height: 100%;
}
#race-module-with-countdown {
  padding: 7px 1em 2em 1em;
  height: auto;
  position: relative;
  /* Android ≤ 2.3, iOS ≤ 4 */
  /* Firefox ≤ 28 */
  box-sizing: border-box;
  /* Chrome, Firefox 29+, IE 8+, Opera, Safari 5.1 */
  left: 0;
  width: 100%;
  min-height: 100%;
  padding: 5px 1em 2em 1em;
}
.rocket-wrap {
  width: auto;
  height: auto;
  position: relative;
}
.rocket-wrap .progress-wrapper {
  width: auto;
  height: auto;
  position: relative;
  margin-left: 6em;
}
.rocket-wrap .rocket-path-row {
  width: 100%;
  height: 100%;
  background-color: #313132;
  position: relative;
  margin: 0.5em auto;
  border: 0.2em solid #222224;
}
.rocket-wrap .progress-wrapper {
  height: 1.4em;
}
.rocket-wrap .team-icon {
  width: 2em;
  right: -1em;
  padding-top: 0.2em;
}
.rocket-wrap .team-color-row {
  font-size: 0.8em;
  line-height: 1.4em;
}
.rocket-wrap.x_large .rocket-path-row {
  margin: 0.7em auto;
}
.rocket-wrap.x_large .progress-wrapper {
  height: 6em;
}
.rocket-wrap.x_large .team-icon {
  width: 6.5em;
  right: -5.5em;
  padding-top: 1em;
}
.rocket-wrap.x_large .team-color-row {
  font-size: 1.3em;
  line-height: 4.5em;
}
.rocket-wrap.largest .rocket-path-row {
  margin: 0.7em auto;
}
.rocket-wrap.largest .progress-wrapper {
  height: 4em;
}
.rocket-wrap.largest .team-icon {
  width: 5.5em;
  right: -4.5em;
  padding-top: 0.3em;
}
.rocket-wrap.largest .team-color-row {
  font-size: 1em;
  line-height: 4em;
}
.rocket-wrap.larger .rocket-path-row {
  margin: 0.7em auto;
}
.rocket-wrap.larger .progress-wrapper {
  height: 2.5em;
}
.rocket-wrap.larger .team-icon {
  width: 4em;
  right: -2.8em;
  padding-top: 0.05em;
}
.rocket-wrap.larger .team-color-row {
  font-size: 0.9em;
  line-height: 2.5em;
}
.rocket-wrap.large .rocket-path-row {
  margin: 0.7em auto;
}
.rocket-wrap.large .progress-wrapper {
  height: 2.3em;
}
.rocket-wrap.large .team-icon {
  width: 3.6em;
  right: -2.2em;
  padding-top: 0.1em;
}
.rocket-wrap.large .team-color-row {
  font-size: 0.8em;
  line-height: 2.7em;
}
.team-icon {
  width: 4.5em;
  right: -2.5em;
  top: -0.32em;
  position: absolute;
  z-index: 5;
}
.team-icon img {
  width: 100%;
}
.team-color-row {
  height: 100%;
  position: absolute;
  float: left;
  width: 6em;
  padding: 0em 0.2em;
  color: #ffffff;
  font-size: 0.8em;
}
.progress-color-row {
  height: 100%;
  position: relative;
  float: left;
  padding-left: 1em;
  border-radius: 0.85em;
  -moz-border-radius: 0em 0.85em 0.85em 0em;
  -webkit-border-radius: 0em 0.85em 0.85em 0em;
}
/* Countdown Styles */
.space-race-header {
  position: relative;
}
.space-race-header .space-race-header-text {
  color: #ffffff;
  font-size: 24px;
  font-weight: 300;
}
@media screen and (min-width: 375px) {
  .space-race-header .space-race-header-text {
    font-size: 30px;
  }
}
#countdown-bar {
  height: 62px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}
#countdown-bar .time-remaining {
  line-height: 62px;
  margin-left: 18px;
}
#countdown-bar .time-remaining-icon {
  position: absolute;
  top: 18px;
}
#countdown-bar .time-remaining-text {
  color: #ffffff;
  margin-left: 31px;
  visibility: hidden;
  display: none;
}
#countdown-bar .countdown-time {
  color: #ffffff;
  font-size: 30px;
  font-weight: 300;
  line-height: 62px;
}
#countdown-bar .stop-countdown {
  cursor: pointer;
  height: 44px;
  width: 44px;
}
#countdown-bar .stop-countdown-x {
  position: relative;
  top: 13px;
}
#countdown-bar .space-race-countdown-finish-button {
  border: 1px solid #ffffff;
  height: 40px;
  min-width: 108px;
  position: absolute;
  right: 16px;
  top: 11px;
}
@media only screen and (min-width: 768px) {
  #countdown-bar .time-remaining-text {
    visibility: visible;
    display: inline;
  }
  #countdown-bar .stop-countdown {
    right: 29px;
  }
}
.countdown-bar-green {
  background-color: #7fab4d;
}
.countdown-bar-red {
  background-color: #c90c06;
}
.countdown-bar-orange {
  background-color: #ffa100;
}
.student-nav-container {
  background-color: #ffffff;
  border-top: 1px solid #cccccc;
  bottom: 0;
  height: 56px;
  padding-top: 7px;
  position: fixed;
  text-align: center;
  width: 100%;
  z-index: 2;
}
.student-nav-container .student-nav-x-of-x-container {
  display: none;
}
.student-nav-container .quiz-nav-button {
  background-color: #ffffff;
  border: none;
  color: rgba(85, 85, 85, 0.5);
  font-size: 14px;
  height: 40px;
  outline: none;
  vertical-align: top;
  width: 40px;
}
.student-nav-container .first-question-button {
  border: 1px solid #6d9ec4;
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
  cursor: pointer;
}
.student-nav-container .first-question-button.disabled {
  cursor: default;
}
.student-nav-container .first-question-arrow {
  height: 20px;
  left: -1px;
  position: relative;
  top: 2px;
  width: 13px;
}
.student-nav-container .previous-question-button {
  border: 1px solid #6d9ec4;
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
  margin-right: 1px;
}
.student-nav-container .next-question-button {
  border: 1px solid #6d9ec4;
  border-bottom-right-radius: 3px;
  border-top-right-radius: 3px;
  margin-left: 2px;
}
.student-nav-container .previous-question-arrow {
  height: 20px;
  left: -1px;
  position: relative;
  top: 2px;
  width: 11px;
}
.student-nav-container .next-question-arrow {
  height: 20px;
  left: 1px;
  position: relative;
  top: 2px;
  width: 11px;
}
.student-nav-container .question-number-container {
  display: inline-block;
  margin-left: 1px;
  height: 44px;
}
.student-nav-container .fr-container-selected {
  border-bottom: 2px solid #ff8528;
}
.student-nav-container .mc-container-selected {
  border-bottom: 2px solid #e8c400;
}
.student-nav-container .tf-container-selected {
  border-bottom: 2px solid #8c6fcc;
}
.student-nav-container .fr-question-unanswered.fr-question-selected {
  border: 1px solid #ff8528;
  color: #ff8528;
  cursor: default;
  font-weight: 700;
}
.student-nav-container .fr-question-unanswered.fr-question-unselected {
  border-bottom: 2px solid #ff8528;
  cursor: pointer;
}
.student-nav-container .mc-question-unanswered.mc-question-selected {
  border: 1px solid #e8c400;
  color: #e8c400;
  cursor: default;
  font-weight: 700;
}
.student-nav-container .mc-question-unanswered.mc-question-unselected {
  border-bottom: 2px solid #e8c400;
  cursor: pointer;
}
.student-nav-container .tf-question-unanswered.tf-question-selected {
  border: 1px solid #8c6fcc;
  color: #8c6fcc;
  cursor: default;
  font-weight: 700;
}
.student-nav-container .tf-question-unanswered.tf-question-unselected {
  border-bottom: 2px solid #8c6fcc;
  cursor: pointer;
}
.student-nav-container .fr-question-answered {
  background-color: #ff8528;
  border: none;
  color: #ffffff;
}
.student-nav-container .mc-question-answered {
  background-color: #e8c400;
  border: none;
  color: #ffffff;
}
.student-nav-container .tf-question-answered {
  background-color: #8c6fcc;
  border: none;
  color: #ffffff;
}
.student-nav-container .last-question-button {
  border: 1px solid #6d9ec4;
  border-bottom-right-radius: 3px;
  border-top-right-radius: 3px;
  cursor: pointer;
}
.student-nav-container .last-question-button.disabled {
  cursor: default;
}
.student-nav-container .last-question-arrow {
  height: 20px;
  left: 1px;
  position: relative;
  top: 2px;
  width: 13px;
}
@media screen and (min-width: 768px) {
  .student-nav-container {
    border-top: none;
    height: auto;
    padding-bottom: 84px;
    position: relative;
  }
  .student-nav-container .student-nav-x-of-x-container {
    display: block;
    margin-bottom: 5px;
  }
  .student-nav-container .previous-question-button {
    border-bottom-left-radius: 0;
    border-left: none;
    border-top-left-radius: 0;
    cursor: pointer;
    margin-right: 7px;
  }
  .student-nav-container .previous-question-button.disabled {
    cursor: default;
  }
  .student-nav-container .next-question-button {
    border-bottom-right-radius: 0;
    border-right: none;
    border-top-right-radius: 0;
    cursor: pointer;
    margin-left: 8px;
  }
  .student-nav-container .next-question-button.disabled {
    cursor: default;
  }
}
@media screen and (min-width: 960px) {
  .student-nav-container .first-question-button:hover {
    background-color: #eeeeee;
  }
  .student-nav-container .first-question-button:hover.disabled:hover {
    background-color: #ffffff;
  }
  .student-nav-container .previous-question-button:hover {
    background-color: #eeeeee;
  }
  .student-nav-container .previous-question-button:hover.disabled:hover {
    background-color: #ffffff;
  }
  .student-nav-container .fr-question-unanswered.fr-question-unselected:hover {
    background-color: #eeeeee;
  }
  .student-nav-container .mc-question-unanswered.mc-question-unselected:hover {
    background-color: #eeeeee;
  }
  .student-nav-container .tf-question-unanswered.tf-question-unselected:hover {
    background-color: #eeeeee;
  }
  .student-nav-container .fr-question-answered.fr-question-unselected:hover {
    background-color: #eeeeee;
    color: #555555;
    cursor: pointer;
  }
  .student-nav-container .mc-question-answered.mc-question-unselected:hover {
    background-color: #eeeeee;
    color: #555555;
    cursor: pointer;
  }
  .student-nav-container .tf-question-answered.tf-question-unselected:hover {
    background-color: #eeeeee;
    color: #555555;
    cursor: pointer;
  }
  .student-nav-container .next-question-button:hover {
    background-color: #eeeeee;
  }
  .student-nav-container .next-question-button:hover.disabled:hover {
    background-color: #ffffff;
  }
  .student-nav-container .last-question-button:hover {
    background-color: #eeeeee;
  }
  .student-nav-container .last-question-button:hover.disabled:hover {
    background-color: #ffffff;
  }
}
.activity-image-container {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.activity-image-container .activity-image-placeholder-container {
  background-color: #eeeeee;
  border: 1px dashed #979797;
  height: 192px;
  position: relative;
  width: 100%;
  cursor: default;
}
.activity-image-container .activity-image-reload {
  width: 100%;
  position: absolute;
  bottom: 1.1em;
  left: 0;
  right: 0;
}
.activity-image-container .activity-image-placeholder {
  bottom: 0;
  height: 69px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 83px;
}
.activity-image-container .activity-image {
  display: block;
  margin: 0;
  width: 100%;
  cursor: pointer;
}
.activity-image-container .activity-zoom-button {
  background-color: #666;
  cursor: pointer;
  transition: 200ms;
  width: 100%;
}
.activity-image-container .activity-zoom-button:hover {
  background-color: #555;
}
.activity-image-container .activity-zoom-button:hover .activity-image-zoom-label {
  text-decoration: underline;
}
.activity-image-container .activity-image-zoom-icon-container {
  display: inline-block;
  margin-right: 4px;
  vertical-align: top;
}
.activity-image-container .activity-image-zoom-icon {
  height: 19px;
  width: 18px;
}
.activity-image-container .activity-image-zoom-icon path {
  fill: white !important;
}
.activity-image-container .activity-image-zoom-label {
  display: inline-block;
  color: white;
}
@media screen and (min-width: 375px) {
  .activity-image-container .activity-image {
    max-width: 300px;
    width: auto;
  }
  .activity-image-container .activity-zoom-button {
    max-width: 300px;
  }
}
@media screen and (min-width: 768px) {
  .activity-image-container .activity-image-placeholder-container {
    height: 200px;
    width: 300px;
  }
}
.activity-media-container {
  height: 210px;
  width: 372px;
  border-radius: 0.5rem;
  box-shadow: 0 0 0 1px #D3DCE1;
  overflow: hidden;
}
.teacherAnswerImage .activity-image {
  max-width: 220px;
  max-height: 220px;
}
#zoom-view-container {
  z-index: 10000;
  position: absolute;
}
#zoom-view-background {
  background-color: rgba(0, 0, 0, 0.8);
  left: 0;
  height: 100%;
  overflow: auto;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}
#zoom-view-box.modal-dialog {
  border-radius: 0;
  box-shadow: none;
  margin: 10px auto;
  min-height: unset;
  padding: 1px;
}
#zoom-view-box .zoom-image-close-container {
  background-color: #ffffff;
  cursor: pointer;
  height: 30px;
  position: absolute;
  right: 0;
  top: 0;
  width: 30px;
  z-index: 1;
}
#zoom-view-box .zoom-image-close-x {
  height: 18px;
  left: 1px;
  position: relative;
  top: 6px;
  width: 17px;
}
#zoom-view-box .zoom-image-placeholder-container {
  background-color: #eeeeee;
  border: 1px dashed #979797;
  height: 192px;
  position: relative;
  width: 100%;
}
#zoom-view-box .zoom-image-placeholder {
  bottom: 0;
  height: 69px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 83px;
}
@media screen and (min-width: 768px) {
  #zoom-view-box .zoom-image-placeholder-container {
    height: 200px;
    width: 300px;
  }
}
.points {
  font-weight: 500;
  text-transform: uppercase;
}
.errorView {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2em;
  -webkit-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -ms-touch-select: none;
  color: #777;
}
.errorView h2 {
  margin-bottom: 1em;
  color: #777;
}
.errorView .button {
  margin-top: 2em;
}
.connectionBar {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 0.2em 1.4em 0.4em 0.2em;
  background-color: #fffc95;
  color: #555;
  letter-spacing: -0.5px;
  font-size: 11pt;
  border-bottom: 1px solid #e8e83c;
  -webkit-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -ms-touch-select: none;
}
.connectionBar .mainText {
  margin-right: 0.5em;
  font-weight: bold;
}
.connectionBar .icon {
  width: 0.65em;
  height: 0.65em;
  border-radius: 50%;
  margin-right: 0.5em;
}
.connectionBar.connected .icon {
  background-color: #90c15a;
}
.connectionBar.disconnected .icon {
  background-color: #d94d22;
}
.connectionBar .dismiss {
  width: 1em;
  height: 1em;
  position: absolute;
  right: 0.2em;
}
.math .ML__mathlive {
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  -webkit-user-select: all;
      -ms-user-select: all;
          user-select: all;
}
.math .ML__mathlive span {
  color: inherit;
}
#loader {
  position: absolute;
  top: 0;
  left: 50%;
  background: #6f9fc2;
  border: 5px solid #084d65;
  border-top: 0;
  padding: 10px;
  width: 300px;
  margin-left: -165px;
  display: inline-block;
  z-index: 1000;
  color: white;
  text-align: center;
}
@media only screen and (max-width: 480px) {
  #loader {
    width: 80%;
    left: 10%;
    margin-left: -15px;
  }
}
#loader a {
  color: #084d65;
}
.spinner {
  display: inline;
  top: 0px;
  height: 22px;
  padding: 5px 2px;
  margin: 0 10px;
  /* margin: 100px auto 0; */
  text-align: center;
}
.spinner > div {
  width: 7px;
  height: 7px;
  margin-right: 2px;
  background-color: #ffffff;
  border-radius: 100%;
  display: inline-block;
  animation: bouncedelay 1.4s infinite ease-in-out;
  /* Prevent first frame from flickering when animation starts */
  animation-fill-mode: both;
}
.spinner .bounce1 {
  animation-delay: -0.32s;
}
.spinner .bounce2 {
  animation-delay: -0.16s;
}
@keyframes bouncedelay {
  0%,
  80%,
  100% {
    transform: scale(0);
    -webkit-transform: scale(0);
  }
  40% {
    transform: scale(1);
    -webkit-transform: scale(1);
  }
}
/* ========================================================================
   Component: Modal
 ========================================================================== */
/*
 * This is the modal overlay and modal dialog container
 * 1. Hide by default
 * 2. Set fixed position
 * 3. Allow scrolling for the modal dialog
 * 4. Mask the background page
 * 5. Fade-in transition
 */
.modal {
  /* 1 */
  display: none;
  /* 2 */
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1010;
  /* 3 */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* 4 */
  background: rgba(239, 239, 239, 0.5);
  /* 5 */
  opacity: 0;
  transition: opacity 0.15s linear;
}
/*
 * Open state
 */
.modal.open {
  opacity: 1;
  display: block;
}
.modal.open.wide-popup {
  overflow: hidden;
}
/* Sub-object: `modal-dialog`
 ========================================================================== */
/*
 * 1. Create position context for caption, spinner and close button
 * 2. Set box sizing
 * 3. Min-height needed for initial loading and spinner
 * 4. Set style
 * 5. Slide-in transition
 */
.modal-dialog {
  border-radius: 3px;
  box-shadow: 0 0 8px #888888;
  /* 1 */
  position: relative;
  /* 2 */
  /* Android ≤ 2.3, iOS ≤ 4 */
  /* Firefox ≤ 28 */
  box-sizing: border-box;
  /* Chrome, Firefox 29+, IE 8+, Opera, Safari 5.1 */
  margin: 60px auto;
  padding: 10px;
  width: 400px;
  max-width: 90%;
  max-width: calc(100% - 20px);
  /* 3 */
  min-height: 100px;
  /* 4 */
  background: #fff;
  /* 5 */
  opacity: 0;
  transform: translateY(-100px);
  transition: opacity 0.3s linear, transform 0.3s ease-out;
  text-align: center;
}
.modal-dialog.wide-popup {
  width: 90%;
  max-height: 80%;
  position: relative;
  height: 80%;
  /*min-height: 580px;*/
  /* Tablet and bigger */
  min-height: 80%;
  padding-bottom: 50px;
}
.modal-dialog.wide-popup #pop-up-message {
  overflow-y: scroll;
  height: 85%;
}
.modal-dialog.wide-popup .modal-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #ddd;
  padding: 20px;
  box-sizing: border-box;
  width: 100%;
  background: white;
}
.modal-dialog.intermediate-popup {
  min-width: 850px;
}
@media (max-width: 960px) {
  .modal-dialog.intermediate-popup {
    min-width: 700px;
  }
}
@media (max-width: 768px) {
  .modal-dialog.intermediate-popup {
    min-width: auto;
  }
}
.modal-dialog #confirm-ok-button {
  text-transform: uppercase;
}
.modal-dialog #confirm-close-button {
  display: none;
  text-transform: uppercase;
  margin-top: 5px;
  text-decoration: underline;
  float: right;
}
.modal-dialog .cancel-button {
  padding: 5px;
  position: absolute;
  top: -2px;
  right: -4px;
  color: #ddd;
  font-size: 19px;
  line-height: 19px;
}
.modal-dialog .cancel-button:hover {
  color: #b7b7b7;
}
#pop-up-box {
  color: #777777;
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
  padding: 23px 24px 24px;
  text-align: left;
  width: 436px;
}
#pop-up-box .modal-header {
  position: relative;
}
#pop-up-box .yes-button {
  margin-right: 10px;
}
#pop-up-box .no-button {
  background-color: #ffffff;
  color: #ffa100;
}
#pop-up-box .no-button:hover {
  background-color: #CB7E00;
  border: 1px solid #CB7E00;
  color: white;
}
#pop-up-box .cancel-button {
  color: #cbcbcb;
  font-size: 24px;
}
#pop-up-box .modal-footer {
  margin-top: 21px;
}
#pop-up-box .modal-footer button {
  /*margin-right: 10px;*/
}
#pop-up-box .modal-footer button:first-child {
  margin-right: 10px;
}
#pop-up-box .popup-error-details {
  padding: 0.5em;
  font-size: 10pt;
  margin: 0.5em 0.25em 0 0.25em;
  border-left: 2px solid #929292;
  background-color: #f3f3f3;
}
#pop-up-box .popup-error-details span {
  font-style: italic;
}
/* Phone landscape and smaller */
@media (max-width: 767px) {
  /*
     * Fit in small screen
     */
  .modal-dialog {
    width: auto;
    margin: 10px auto;
  }
}
/*
 * Open state
 */
.open .modal-dialog {
  /* 4 */
  opacity: 1;
  transform: translateY(0);
  z-index: 2000;
}
/*
 * Remove margin from the last-child
 */
.modal-dialog > :not([class*='modal-']):last-child {
  margin-bottom: 0;
}
/* Close in modal
 ========================================================================== */
.modal-dialog > .close:first-child {
  margin: -10px -10px 0 0;
  float: right;
}
/*
 * Remove margin from adjacent element
 */
.modal-dialog > .close:first-child + *:not([class*='modal-']) {
  margin-top: 0;
}
/* Sub-Object: `modal-header`
 ========================================================================== */
.modal-header {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 24px;
  line-height: 30px;
}
.modal-header .popup-title {
  color: #666666;
  font-size: 24px;
  font-weight: 300;
}
@media only screen and (max-width: 767px) {
  .modal-header .popup-title {
    font-size: 20px;
    line-height: 30px;
  }
}
.modal-header i.close-popup {
  display: inline-block;
}
.modal-header i.close-popup:before {
  text-align: left;
  display: block;
  width: 1em;
}
/* Sub-Object: `modal-footer`
 ========================================================================== */
.modal-footer {
  margin-top: 15px;
  text-align: left;
}
/* Sub-Object: `modal-content`
 ========================================================================== */
#pop-up-message h1 {
  font-size: 1.5em;
  text-align: left;
  padding-bottom: 1.1em;
  margin: 0;
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  font-display: fallback;
  src: url(https://assets-dev.socrative.com/4.12.390/js/a7e06560e456e6b1d13f.woff2) format('woff2'), url(https://assets-dev.socrative.com/4.12.390/js/5cc642fb7ce554291def.woff) format('woff');
}
@font-face {
  font-family: Inter;
  font-style: italic;
  font-weight: 400;
  font-display: fallback;
  src: url(https://assets-dev.socrative.com/4.12.390/js/f49834a0a6541638179c.woff2) format('woff2'), url(https://assets-dev.socrative.com/4.12.390/js/8c12e04a7484c08649ef.woff) format('woff');
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://assets-dev.socrative.com/4.12.390/js/d5e2bcf860731fb43a76.woff2) format('woff2'), url(https://assets-dev.socrative.com/4.12.390/js/aaef1fd9d7b68feee4e6.woff) format('woff');
}
@font-face {
  font-family: Inter;
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(https://assets-dev.socrative.com/4.12.390/js/188de0aa6ba4fd633e56.woff2) format('woff2'), url(https://assets-dev.socrative.com/4.12.390/js/d7ac4efb581a32a55fce.woff) format('woff');
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 700;
  font-display: fallback;
  src: url(https://assets-dev.socrative.com/4.12.390/js/c01915d71f09e73b59a4.woff2) format('woff2'), url(https://assets-dev.socrative.com/4.12.390/js/81c56203e15c9f202658.woff) format('woff');
}
@font-face {
  font-family: Inter;
  font-style: italic;
  font-weight: 700;
  font-display: fallback;
  src: url(https://assets-dev.socrative.com/4.12.390/js/ea5c9b353ddcb49c2e08.woff2) format('woff2'), url(https://assets-dev.socrative.com/4.12.390/js/098968c5de9fde445e1c.woff) format('woff');
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 500;
  font-display: fallback;
  src: url(https://assets-dev.socrative.com/4.12.390/js/abc74264e0406c68ea90.woff2) format('woff2'), url(https://assets-dev.socrative.com/4.12.390/js/9534203f443096c3ec9b.woff) format('woff');
}
@font-face {
  font-family: Inter;
  font-style: italic;
  font-weight: 500;
  font-display: fallback;
  src: url(https://assets-dev.socrative.com/4.12.390/js/9c92059748833966691f.woff2) format('woff2'), url(https://assets-dev.socrative.com/4.12.390/js/df784b340e6a569af4e2.woff) format('woff');
}

/*!***************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./clients/app/src/shared/components/MediaPlayer/MediaPlayer.scss ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************/
.media-skeleton .square::part(indicator) {
  --border-radius: var(--sl-border-radius-medium);
}
/*!*************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./clients/app/src/shared/components/buttons/HexagonButton.scss ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************/
.hexagon-button:hover .hexagon__shadow, .hexagon-button.is-hovered .hexagon__shadow {
  /* [1] */
  opacity: 0.66;
  transform: translateY(6%);
}

.hexagon-button:hover .hexagon__body, .hexagon-button.is-hovered .hexagon__body {
  /* [1] */
  transform: scale(1.1);
}

.hexagon-button:hover .hexagon__content, .hexagon-button.is-hovered .hexagon__content {
  /* [1] */
  transform: scale(1.125);
}

.hexagon-button:focus .hexagon__outline {
  stroke: currentColor;
}

.hexagon-button.is-reversed .hexagon__spin {
  animation-direction: reverse;
}

.hexagon-button.is-small .hexagon__spin {
  animation-duration: 9000ms;
}

.hexagon__spin {
  transform-origin: center;
  animation: spin 16000ms linear infinite;
}
/*!*********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./clients/app/src/shared/components/FocusIndicator/FocusIndicator.scss ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************/
.focus-indicator {
  background-color: transparent !important;
}

@supports (border-radius: var(--radius)) {
  .focus-indicator {
    border-radius: calc(var(--tl-radius, 0) + 2px) calc(var(--tr-radius, 0) + 2px) calc(var(--br-radius, 0) + 2px) calc(var(--bl-radius, 0) + 2px);
  }
}

@supports (border-radius: var(--radius)) {
  .focus-indicator.not-offset {
    border-radius: var(--tl-radius, 0) var(--tr-radius, 0) var(--br-radius, 0) var(--bl-radius, 0);
  }
}

.focus-indicator.with-white-inset {
  box-shadow: 0 0 0 2px, inset 0 0 0 2px #fff;
}

.focus-indicator.is-inset {
  box-shadow: inset 0 0 0 2px;
}

.focus-indicator.is-hidden {
  opacity: 0 !important;
}
/*!***********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./clients/app/src/shared/components/buttons/SmallButton.scss ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************/
.small-button {
      grid-template-areas: "stack";
}

.small-button > div {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: stack;
}
/*!*******************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./clients/app/src/shared/components/Spinner/Spinner.scss ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************/
@keyframes spinning {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(1080deg);
  }
}

.loading-spinner {
  animation: spinning 1.5s infinite ease-in-out;
  border-top-color: #00b5e2;
}
/*!*************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./clients/app/src/shared/components/buttons/UIButtonGroup.scss ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************/
.ui-button-group {
  justify-content: space-evenly;
}

@media (min-width: 480px) {
  .ui-button-group {
    justify-content: initial;
  }
}
/*!******************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!./node_modules/mathlive/dist/mathlive-static.css ***!
  \******************************************************************************************************************************/
/* 0.80.0 */@font-face{font-display:"swap";font-family:KaTeX_AMS;font-style:normal;font-weight:400;src:url(https://assets-dev.socrative.com/4.12.390/js/73ea273a72f4aca30ca5.woff2) format("woff2")}@font-face{font-display:"swap";font-family:KaTeX_Caligraphic;font-style:normal;font-weight:700;src:url(https://assets-dev.socrative.com/4.12.390/js/a1abf90dfd72792a577a.woff2) format("woff2")}@font-face{font-display:"swap";font-family:KaTeX_Caligraphic;font-style:normal;font-weight:400;src:url(https://assets-dev.socrative.com/4.12.390/js/d6484fce1ef428d5bd94.woff2) format("woff2")}@font-face{font-display:"swap";font-family:KaTeX_Fraktur;font-style:normal;font-weight:700;src:url(https://assets-dev.socrative.com/4.12.390/js/931d67ea207ab37ee693.woff2) format("woff2")}@font-face{font-display:"swap";font-family:KaTeX_Fraktur;font-style:normal;font-weight:400;src:url(https://assets-dev.socrative.com/4.12.390/js/172d3529b26f8cedef6b.woff2) format("woff2")}@font-face{font-display:"swap";font-family:KaTeX_Main;font-style:italic;font-weight:700;src:url(https://assets-dev.socrative.com/4.12.390/js/20f389c4120be058d80a.woff2) format("woff2")}@font-face{font-display:"swap";font-family:KaTeX_Main;font-style:normal;font-weight:700;src:url(https://assets-dev.socrative.com/4.12.390/js/39890742bc957b368704.woff2) format("woff2")}@font-face{font-display:"swap";font-family:KaTeX_Main;font-style:italic;font-weight:400;src:url(https://assets-dev.socrative.com/4.12.390/js/fe2176f79edaa716e621.woff2) format("woff2")}@font-face{font-display:"swap";font-family:KaTeX_Main;font-style:normal;font-weight:400;src:url(https://assets-dev.socrative.com/4.12.390/js/f650f111a3b890d116f1.woff2) format("woff2")}@font-face{font-display:"swap";font-family:KaTeX_Math;font-style:italic;font-weight:700;src:url(https://assets-dev.socrative.com/4.12.390/js/dcbcbd93bac0470b462d.woff2) format("woff2")}@font-face{font-display:"swap";font-family:KaTeX_Math;font-style:italic;font-weight:400;src:url(https://assets-dev.socrative.com/4.12.390/js/6d3d25f4820d0da8f01f.woff2) format("woff2")}@font-face{font-display:"swap";font-family:"KaTeX_SansSerif";font-style:normal;font-weight:700;src:url(https://assets-dev.socrative.com/4.12.390/js/95591a929f0d32aa282a.woff2) format("woff2")}@font-face{font-display:"swap";font-family:"KaTeX_SansSerif";font-style:italic;font-weight:400;src:url(https://assets-dev.socrative.com/4.12.390/js/7d393d382f3e7fb1c637.woff2) format("woff2")}@font-face{font-display:"swap";font-family:"KaTeX_SansSerif";font-style:normal;font-weight:400;src:url(https://assets-dev.socrative.com/4.12.390/js/cd5e231e0cc53b2cb2c0.woff2) format("woff2")}@font-face{font-display:"swap";font-family:KaTeX_Script;font-style:normal;font-weight:400;src:url(https://assets-dev.socrative.com/4.12.390/js/c81d1b2a4b75d3eded60.woff2) format("woff2")}@font-face{font-display:"swap";font-family:KaTeX_Size1;font-style:normal;font-weight:400;src:url(https://assets-dev.socrative.com/4.12.390/js/6eec866c69313624be60.woff2) format("woff2")}@font-face{font-display:"swap";font-family:KaTeX_Size2;font-style:normal;font-weight:400;src:url(https://assets-dev.socrative.com/4.12.390/js/2960900c4f271311eb36.woff2) format("woff2")}@font-face{font-display:"swap";font-family:KaTeX_Size3;font-style:normal;font-weight:400;src:url(https://assets-dev.socrative.com/4.12.390/js/e1951519f6f0596f7356.woff2) format("woff2")}@font-face{font-display:"swap";font-family:KaTeX_Size4;font-style:normal;font-weight:400;src:url(https://assets-dev.socrative.com/4.12.390/js/e418bf257af1052628d8.woff2) format("woff2")}@font-face{font-display:"swap";font-family:KaTeX_Typewriter;font-style:normal;font-weight:400;src:url(https://assets-dev.socrative.com/4.12.390/js/c295e7f71970f03c0549.woff2) format("woff2")}:root{--ML__static-fonts:true}.ML__sr-only{clip:rect(0,0,0,0);border:0;-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.ML__base,.ML__isInline{display:inline-block}.ML__base{border:0;box-sizing:content-box;cursor:text;font-family:inherit;font-style:inherit;font-weight:inherit;margin:0;outline:0;padding:0;position:relative;text-decoration:none;vertical-align:baseline;visibility:inherit;width:min-content}body.ML__fonts-loading .ML__base{visibility:hidden}.ML__strut,.ML__strut--bottom{display:inline-block;min-height:.5em}.ML__small-delim{font-family:KaTeX_Main}.ML__text{font-family:var(--text-font-family,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif);white-space:pre}.ML__cmr{font-family:KaTeX_Main;font-style:normal}.ML__mathit{font-family:KaTeX_Math;font-style:italic}.ML__mathbf{font-family:KaTeX_Main;font-weight:700}.lcGreek.ML__mathbf{font-family:KaTeX_Math;font-weight:400}.ML__mathbfit{font-family:KaTeX_Math;font-style:italic;font-weight:700}.ML__ams,.ML__bb{font-family:KaTeX_AMS}.ML__cal{font-family:KaTeX_Caligraphic}.ML__frak{font-family:KaTeX_Fraktur}.ML__tt{font-family:KaTeX_Typewriter}.ML__script{font-family:KaTeX_Script}.ML__sans{font-family:KaTeX_SansSerif}.ML__series_el,.ML__series_ul{font-weight:100}.ML__series_l{font-weight:200}.ML__series_sl{font-weight:300}.ML__series_sb{font-weight:500}.ML__bold,.ML__boldsymbol{font-weight:700}.ML__series_eb{font-weight:800}.ML__series_ub{font-weight:900}.ML__series_uc{font-stretch:ultra-condensed}.ML__series_ec{font-stretch:extra-condensed}.ML__series_c{font-stretch:condensed}.ML__series_sc{font-stretch:semi-condensed}.ML__series_sx{font-stretch:semi-expanded}.ML__series_x{font-stretch:expanded}.ML__series_ex{font-stretch:extra-expanded}.ML__series_ux{font-stretch:ultra-expanded}.ML__it{font-style:italic}.ML__shape_ol{-webkit-text-stroke:1px #000;text-stroke:1px #000;color:transparent}.ML__shape_sc{font-variant:small-caps}.ML__shape_sl{font-style:oblique}.ML__emph{color:#bc2612}.ML__emph .ML__emph{color:#0c7f99}.ML__highlight{background:#edd1b0;color:#007cb2}.ML__center{text-align:center}.ML__label_padding{padding:0 .5em}.ML__frac-line{min-height:1px;width:100%}.ML__frac-line:after{background:currentColor;box-sizing:content-box;content:"";display:block;margin-top:-.04em;min-height:.04em;transform:translate(0)}.ML__sqrt,.ML__sqrt-sign{display:inline-block}.ML__sqrt-sign{font-family:KaTeX_Main;position:relative}.ML__sqrt-line{display:inline-block;height:.04em;width:100%}.ML__sqrt-line:before{background:currentColor;content:"";display:block;margin-top:-.04em;min-height:.04em;transform:translate(0)}.ML__sqrt-line:after{border-bottom-width:1px;content:" ";display:block;margin-top:-.1em}.ML__sqrt-index{margin-left:.27777778em;margin-right:-.55555556em}.ML__delim-size1{font-family:KaTeX_Size1}.ML__delim-size2{font-family:KaTeX_Size2}.ML__delim-size3{font-family:KaTeX_Size3}.ML__delim-size4{font-family:KaTeX_Size4}.ML__delim-mult .delim-size1>span{font-family:KaTeX_Size1}.ML__delim-mult .delim-size4>span{font-family:KaTeX_Size4}.ML__accent-body>span{font-family:KaTeX_Main;width:0}.ML__accent-vec>span{left:.24em;position:relative}.ML__mathlive{word-wrap:normal;direction:ltr;display:inline-block;font-family:KaTeX_Main,Times New Roman,serif;font-size-adjust:none;font-stretch:normal;font-style:normal;font-variant-caps:normal;letter-spacing:normal;line-height:1.2;text-align:left;text-indent:0;text-rendering:auto;text-shadow:none;-webkit-user-select:none;user-select:none;white-space:nowrap;width:min-content;word-spacing:normal}.ML__mathlive .style-wrap{position:relative}.ML__mathlive .left-right,.ML__mathlive .mfrac{display:inline-block}.ML__mathlive .vlist-t{border-collapse:collapse;display:inline-table;table-layout:fixed}.ML__mathlive .vlist-r{display:table-row}.ML__mathlive .vlist{display:table-cell;position:relative;vertical-align:bottom}.ML__mathlive .vlist>span{display:block;height:0;position:relative}.ML__mathlive .vlist>span>span{display:inline-block}.ML__mathlive .vlist>span>.pstrut{overflow:hidden;width:0}.ML__mathlive .vlist-t2{margin-right:-2px}.ML__mathlive .vlist-s{display:table-cell;font-size:1px;min-width:2px;vertical-align:bottom;width:2px}.ML__mathlive .msubsup{text-align:left}.ML__mathlive .negativethinspace{display:inline-block;height:.71em;margin-left:-.16667em}.ML__mathlive .thinspace{display:inline-block;height:.71em;width:.16667em}.ML__mathlive .mediumspace{display:inline-block;height:.71em;width:.22222em}.ML__mathlive .thickspace{display:inline-block;height:.71em;width:.27778em}.ML__mathlive .enspace{display:inline-block;height:.71em;width:.5em}.ML__mathlive .quad{display:inline-block;height:.71em;width:1em}.ML__mathlive .qquad{display:inline-block;height:.71em;width:2em}.ML__mathlive .llap,.ML__mathlive .rlap{display:inline-block;position:relative;width:0}.ML__mathlive .llap>.inner,.ML__mathlive .rlap>.inner{position:absolute}.ML__mathlive .llap>.fix,.ML__mathlive .rlap>.fix{display:inline-block}.ML__mathlive .llap>.inner{right:0}.ML__mathlive .rlap>.inner{left:0}.ML__mathlive .rule{border:0 solid;box-sizing:border-box;display:inline-block;position:relative}.ML__mathlive .overline .overline-line,.ML__mathlive .underline .underline-line{width:100%}.ML__mathlive .overline .overline-line:before,.ML__mathlive .underline .underline-line:before{border-bottom-style:solid;border-bottom-width:.04em;content:"";display:block}.ML__mathlive .overline .overline-line:after,.ML__mathlive .underline .underline-line:after{border-bottom-style:solid;border-bottom-width:.04em;content:"";display:block;margin-top:-1px;min-height:thin}.ML__mathlive .stretchy{display:block;left:0;overflow:hidden;position:absolute;width:100%}.ML__mathlive .stretchy:after,.ML__mathlive .stretchy:before{content:""}.ML__mathlive .stretchy svg{fill:currentColor;stroke:currentColor;fill-rule:nonzero;fill-opacity:1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;display:block;height:inherit;position:absolute;width:100%}.ML__mathlive .slice-1-of-2{left:0}.ML__mathlive .slice-1-of-2,.ML__mathlive .slice-2-of-2{display:inline-flex;overflow:hidden;position:absolute;width:50.2%}.ML__mathlive .slice-2-of-2{right:0}.ML__mathlive .slice-1-of-3{display:inline-flex;left:0;overflow:hidden;position:absolute;width:25.1%}.ML__mathlive .slice-2-of-3{display:inline-flex;left:25%;overflow:hidden;position:absolute;width:50%}.ML__mathlive .slice-3-of-3{display:inline-flex;overflow:hidden;position:absolute;right:0;width:25.1%}.ML__mathlive .slice-1-of-1{display:inline-flex;left:0;overflow:hidden;position:absolute;width:100%}.ML__mathlive .nulldelimiter{display:inline-block;width:.12em}.ML__mathlive .op-group{display:inline-block}.ML__mathlive .op-symbol{position:relative}.ML__mathlive .op-symbol.small-op{font-family:KaTeX_Size1}.ML__mathlive .op-symbol.large-op{font-family:KaTeX_Size2}.ML__mathlive .accent>.vlist>span{text-align:center}.ML__mathlive .mtable .vertical-separator{box-sizing:border-box;display:inline-block;min-width:1px}.ML__mathlive .mtable .arraycolsep{display:inline-block}.ML__mathlive .mtable .col-align-m>.vlist-t{text-align:center}.ML__mathlive .mtable .col-align-c>.vlist-t{text-align:center}.ML__mathlive .mtable .col-align-l>.vlist-t{text-align:left}.ML__mathlive .mtable .col-align-r>.vlist-t{text-align:right}.ML__error{background-image:radial-gradient(ellipse at center,#cc0041,transparent 70%);background-position:0 98%;background-repeat:repeat-x;background-size:3px 3px}.ML__composition{background:#fff1c2;color:#000;-webkit-text-decoration:underline var(--caret-color-computed,var(--ML__caret-color));text-decoration:underline var(--caret-color-computed,var(--ML__caret-color))}@media (prefers-color-scheme:dark){.ML__composition{background:#69571c;color:#fff}}.ML__placeholder{color:var(--placeholder-color,var(--ML__placeholder-color));font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;opacity:var(--placeholder-opacity,.4);padding-left:.4ex;padding-right:.4ex}.ML__placeholdercontainer{display:none}.ML__isReadOnly .ML__placeholdercontainer{display:block}
/*!*****************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!./node_modules/mathlive/dist/mathlive-fonts.css ***!
  \*****************************************************************************************************************************/
/* 0.80.0 */@font-face{font-display:"swap";font-family:KaTeX_AMS;font-style:normal;font-weight:400;src:url(https://assets-dev.socrative.com/4.12.390/js/73ea273a72f4aca30ca5.woff2) format("woff2")}@font-face{font-display:"swap";font-family:KaTeX_Caligraphic;font-style:normal;font-weight:700;src:url(https://assets-dev.socrative.com/4.12.390/js/a1abf90dfd72792a577a.woff2) format("woff2")}@font-face{font-display:"swap";font-family:KaTeX_Caligraphic;font-style:normal;font-weight:400;src:url(https://assets-dev.socrative.com/4.12.390/js/d6484fce1ef428d5bd94.woff2) format("woff2")}@font-face{font-display:"swap";font-family:KaTeX_Fraktur;font-style:normal;font-weight:700;src:url(https://assets-dev.socrative.com/4.12.390/js/931d67ea207ab37ee693.woff2) format("woff2")}@font-face{font-display:"swap";font-family:KaTeX_Fraktur;font-style:normal;font-weight:400;src:url(https://assets-dev.socrative.com/4.12.390/js/172d3529b26f8cedef6b.woff2) format("woff2")}@font-face{font-display:"swap";font-family:KaTeX_Main;font-style:italic;font-weight:700;src:url(https://assets-dev.socrative.com/4.12.390/js/20f389c4120be058d80a.woff2) format("woff2")}@font-face{font-display:"swap";font-family:KaTeX_Main;font-style:normal;font-weight:700;src:url(https://assets-dev.socrative.com/4.12.390/js/39890742bc957b368704.woff2) format("woff2")}@font-face{font-display:"swap";font-family:KaTeX_Main;font-style:italic;font-weight:400;src:url(https://assets-dev.socrative.com/4.12.390/js/fe2176f79edaa716e621.woff2) format("woff2")}@font-face{font-display:"swap";font-family:KaTeX_Main;font-style:normal;font-weight:400;src:url(https://assets-dev.socrative.com/4.12.390/js/f650f111a3b890d116f1.woff2) format("woff2")}@font-face{font-display:"swap";font-family:KaTeX_Math;font-style:italic;font-weight:700;src:url(https://assets-dev.socrative.com/4.12.390/js/dcbcbd93bac0470b462d.woff2) format("woff2")}@font-face{font-display:"swap";font-family:KaTeX_Math;font-style:italic;font-weight:400;src:url(https://assets-dev.socrative.com/4.12.390/js/6d3d25f4820d0da8f01f.woff2) format("woff2")}@font-face{font-display:"swap";font-family:"KaTeX_SansSerif";font-style:normal;font-weight:700;src:url(https://assets-dev.socrative.com/4.12.390/js/95591a929f0d32aa282a.woff2) format("woff2")}@font-face{font-display:"swap";font-family:"KaTeX_SansSerif";font-style:italic;font-weight:400;src:url(https://assets-dev.socrative.com/4.12.390/js/7d393d382f3e7fb1c637.woff2) format("woff2")}@font-face{font-display:"swap";font-family:"KaTeX_SansSerif";font-style:normal;font-weight:400;src:url(https://assets-dev.socrative.com/4.12.390/js/cd5e231e0cc53b2cb2c0.woff2) format("woff2")}@font-face{font-display:"swap";font-family:KaTeX_Script;font-style:normal;font-weight:400;src:url(https://assets-dev.socrative.com/4.12.390/js/c81d1b2a4b75d3eded60.woff2) format("woff2")}@font-face{font-display:"swap";font-family:KaTeX_Size1;font-style:normal;font-weight:400;src:url(https://assets-dev.socrative.com/4.12.390/js/6eec866c69313624be60.woff2) format("woff2")}@font-face{font-display:"swap";font-family:KaTeX_Size2;font-style:normal;font-weight:400;src:url(https://assets-dev.socrative.com/4.12.390/js/2960900c4f271311eb36.woff2) format("woff2")}@font-face{font-display:"swap";font-family:KaTeX_Size3;font-style:normal;font-weight:400;src:url(https://assets-dev.socrative.com/4.12.390/js/e1951519f6f0596f7356.woff2) format("woff2")}@font-face{font-display:"swap";font-family:KaTeX_Size4;font-style:normal;font-weight:400;src:url(https://assets-dev.socrative.com/4.12.390/js/e418bf257af1052628d8.woff2) format("woff2")}@font-face{font-display:"swap";font-family:KaTeX_Typewriter;font-style:normal;font-weight:400;src:url(https://assets-dev.socrative.com/4.12.390/js/c295e7f71970f03c0549.woff2) format("woff2")}:root{--ML__static-fonts:true}
/*!***********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./clients/app/src/shared/components/quill/blot/MathBlot.scss ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************/
/* stylelint-disable-next-line selector-class-pattern */

.ML__mathlive {
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  -webkit-user-select: all;
      -ms-user-select: all;
          user-select: all; /* [1] */
  /* stylelint-disable-next-line selector-class-pattern */
}

.ML__mathlive .vlist > span {
  line-height: 1; /* [2] */
}

.ML__mathlive .ML__base span {
  --text-opacity: 1;
  color: #273b4c;
  color: rgba(39, 59, 76, var(--text-opacity));
}

/* stylelint-disable-next-line selector-class-pattern */

.ML__text {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* stylelint-disable-next-line selector-class-pattern */

.ML__keyboard span {
  color: inherit;
  pointer-events: none;
}

.ML__keyboard [data-alt-keys=background-color],
.ML__keyboard [data-alt-keys=foreground-color] {
  visibility: hidden;
}

/* stylelint-disable-next-line selector-class-pattern */

.ML__virtual-keyboard-toggle::after {
  content: none;
}

.ML__virtual-keyboard-toggle span {
  color: inherit;
}