@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: normal;
  src: url(/client/ceb11275ab638627a643.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Medium';
  font-style: normal;
  font-weight: normal;
  src: url(/client/e2d60bc49517598c0ce8.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Bold';
  font-style: normal;
  font-weight: bold;
  src: url(/client/fa8441f345d83a0bc4ec.ttf) format(truetype);
}
.normal-text {
  font-family: monserratMedium, sans-serif;
}
.bold-text {
  font-weight: bolder;
  font-family: monserratBold, sans-serif;
}
.default-shadow-on-all-sides {
  box-shadow: 0 0 0.3rem rgba(0, 0, 0, 0.2), 0 0 0.3rem rgba(0, 0, 0, 0.2);
}
.not-selectable {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.top-nav-props {
  background: linear-gradient(#004284, #00366d);
  color: white;
}
.flat-button-props {
  display: block;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  background: #003367;
  color: white;
  padding: 10px 25px;
  border: 1px solid #003367;
  border-radius: 20px;
}
.flat-button-props .content {
  font-weight: 500;
  display: block;
}
.flat-button-props .icon {
  background-image: url(/client/4dfa12214025d650da8a.png);
  width: 7px;
  height: 13px;
  position: absolute;
  right: 6px;
  top: 16px;
}
.flat-button-props.round {
  border-radius: 50%;
}
.flat-button-props.small {
  padding: 5px;
}
.flat-button-props a {
  color: white;
  text-decoration: none;
}
@media screen and (min-width: 768px) {
  .flat-button-props {
    padding: 10px 35px;
  }
  .flat-button-props.small {
    padding: 5px;
  }
}
.action-button-props {
  display: block;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  padding: 10px 50px;
}
.action-button-props .content {
  font-weight: 500;
  display: block;
}
.action-button-props .icon {
  background-image: url(/client/4dfa12214025d650da8a.png);
  width: 7px;
  height: 13px;
  position: absolute;
  right: 6px;
  top: 16px;
}
.action-button-props[disabled],
.action-button-props.disabled {
  pointer-events: unset;
}
.nav-hamburger {
  border: none;
  outline: none;
  background: transparent;
}
.hovered-top-nav-link {
  color: white;
  text-decoration: underline;
}
html,
body,
#root,
.play-app {
  width: 100%;
  height: 100%;
  display: flex;
  font-family: 'Montserrat Medium', sans-serif;
}
@media screen and (max-width: 320px) and (max-height: 480px) {
  html.is-preview,
  body.is-preview,
  #root.is-preview,
  .play-app.is-preview {
    font-size: 12px;
  }
}
body {
  overflow: hidden;
}
body > img.decoded {
  background-color: transparent !important;
}
p:last-child {
  margin-bottom: 0;
}
.breadcrumb a {
  color: white;
}
.user-select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

:root {
  --bs-primary: #ff6600;
  --bs-primary-rgb: 255, 102, 0;
  --bs-primary-darkened: #d95700;
  --bs-primary-outline-darkened: #ff66001a;
  --bs-secondary: #05bbb4;
  --bs-secondary-rgb: 5, 187, 180;
  --bs-secondary-darkened: #05aca6;
  --bs-gap-0: 0;
  --bs-gap-1: 0.25rem;
  --bs-gap-2: 0.5rem;
  --bs-gap-3: 1rem;
  --bs-gap-4: 1.5rem;
  --bs-gap-5: 3rem;
  --bs-row-gap-0: 0;
  --bs-row-gap-1: 0.25rem;
  --bs-row-gap-2: 0.5rem;
  --bs-row-gap-3: 1rem;
  --bs-row-gap-4: 1.5rem;
  --bs-row-gap-5: 3rem;
  --bs-col-gap-0: 0;
  --bs-col-gap-1: 0.25rem;
  --bs-col-gap-2: 0.5rem;
  --bs-col-gap-3: 1rem;
  --bs-col-gap-4: 1.5rem;
  --bs-col-gap-5: 3rem;
}
.btn {
  border-radius: 2em;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.btn:not(.btn-sm, .btn-lg) {
  padding: 0.5em 1.5em;
}
.btn:disabled,
.btn.disabled {
  pointer-events: unset;
  cursor: not-allowed;
}
.btn-arrow {
  position: relative;
}
.btn-arrow::after {
  display: block;
  position: absolute;
  content: " ";
  width: 7px;
  height: 13px;
  right: 6px;
  top: calc((100% - 13px) / 2);
  background-image: url(/client/4dfa12214025d650da8a.png);
}
.btn-primary {
  background-color: #ff6600;
  border-color: #ff6600;
}
.btn-primary.disabled,
.btn-primary[disabled],
.btn-primary:disabled {
  background-color: #c8b2a3;
  border-color: #c8b2a3;
}
.btn-primary:hover {
  background-color: #d95700;
  border-color: #d95700;
}
.btn-primary:focus,
.btn-primary.focus {
  background-color: #d95700;
  box-shadow: 0 0 0 0.25rem #ff6600;
  border-color: #d95700;
}
.btn-primary:active,
.btn-primary.active {
  background-color: #ff6600;
  border-color: #ff6600;
}
.btn-primary:active:focus,
.btn-primary.active:focus,
.btn-primary:active.focus,
.btn-primary.active.focus {
  background-color: #ff6600;
  box-shadow: 0 0 0 0.25rem #ff6600;
  border-color: #ff6600;
}
.btn-outline-primary {
  --bs-btn-color: #d95700;
  --bs-btn-border-color: #d95700;
  --bs-btn-hover-bg: #ff66001a;
  --bs-btn-hover-border-color: #d95700;
  --bs-btn-active-bg: #d95700;
  color: #d95700;
  border-color: #d95700;
}
.btn-outline-primary.disabled,
.btn-outline-primary[disabled],
.btn-outline-primary:disabled {
  background-color: #c8b2a3;
  border-color: #c8b2a3;
}
.btn-outline-primary:hover {
  background-color: #ff66001a;
  border-color: #d95700;
  color: #d95700;
}
.btn-outline-primary:focus,
.btn-outline-primary.focus {
  background-color: #ff66001a;
  box-shadow: 0 0 0 0.25rem #ff6600;
  border-color: #d95700;
  color: #d95700;
}
.btn-outline-primary:active,
.btn-outline-primary.active {
  background-color: #ff66001a;
  border-color: #d95700;
  color: #d95700;
}
.btn-outline-primary:active:focus,
.btn-outline-primary.active:focus,
.btn-outline-primary:active.focus,
.btn-outline-primary.active.focus {
  background-color: #ff66001a;
  box-shadow: 0 0 0 0.25rem #ff6600;
  border-color: #d95700;
  color: #d95700;
}
.btn-secondary {
  background-color: #05bbb4;
  border-color: #05bbb4;
}
.btn-secondary.disabled,
.btn-secondary[disabled],
.btn-secondary:disabled {
  background-color: #c8b2a3;
  border-color: #c8b2a3;
}
.btn-secondary:hover {
  background-color: #05aca6;
  border-color: #05aca6;
}
.btn-secondary:focus,
.btn-secondary.focus {
  background-color: #05aca6;
  box-shadow: 0 0 0 0.25rem #05bbb4;
  border-color: #05aca6;
}
.btn-secondary:active,
.btn-secondary.active {
  background-color: #05bbb4;
  border-color: #05bbb4;
}
.btn-secondary:active:focus,
.btn-secondary.active:focus,
.btn-secondary:active.focus,
.btn-secondary.active.focus {
  background-color: #05bbb4;
  box-shadow: 0 0 0 0.25rem #05bbb4;
  border-color: #05bbb4;
}
.text-bg-primary {
  background-color: var(--bs-primary) !important;
}
.btn-link,
.btn-link:hover {
  color: white;
  text-decoration: none;
}
.btn.circle,
.btn.btn-circle {
  width: 2em;
  height: 2em;
  padding: 0.5em 0.5em;
  border-radius: 50%;
}
.form-control:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}
.invalid-feedback.field-validation-error,
.invalid-feedback.server-rendered {
  display: unset;
}
.input-group .input-group-text .addon {
  width: 1em;
  height: 1em;
  -o-object-fit: contain;
     object-fit: contain;
}
.input-group {
  display: flex;
}
.input-group .form-floating {
  flex-grow: 1;
}

.responsive-container {
  display: flex;
  flex-direction: column;
}
.responsive-container.center {
  align-items: center;
}

.responsive-content {
  width: 100%;
}
@media screen and (min-width: 576px) {
  .responsive-content {
    width: calc(100% - 20px);
  }
}
@media screen and (min-width: 768px) {
  .responsive-content {
    width: calc(100% - 40px);
  }
}
@media screen and (min-width: 992px) {
  .responsive-content {
    width: 960px;
  }
}
@media screen and (min-width: 1200px) {
  .responsive-content {
    width: 1140px;
  }
}
@media screen and (min-width: 1400px) {
  .responsive-content {
    width: 1220px;
  }
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: normal;
  src: url(/client/ceb11275ab638627a643.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Medium';
  font-style: normal;
  font-weight: normal;
  src: url(/client/e2d60bc49517598c0ce8.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Bold';
  font-style: normal;
  font-weight: bold;
  src: url(/client/fa8441f345d83a0bc4ec.ttf) format(truetype);
}
.normal-text {
  font-family: monserratMedium, sans-serif;
}
.bold-text {
  font-weight: bolder;
  font-family: monserratBold, sans-serif;
}
.default-shadow-on-all-sides {
  box-shadow: 0 0 0.3rem rgba(0, 0, 0, 0.2), 0 0 0.3rem rgba(0, 0, 0, 0.2);
}
.not-selectable {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.top-nav-props {
  background: linear-gradient(#004284, #00366d);
  color: white;
}
.flat-button-props {
  display: block;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  background: #003367;
  color: white;
  padding: 10px 25px;
  border: 1px solid #003367;
  border-radius: 20px;
}
.flat-button-props .content {
  font-weight: 500;
  display: block;
}
.flat-button-props .icon {
  background-image: url(/client/4dfa12214025d650da8a.png);
  width: 7px;
  height: 13px;
  position: absolute;
  right: 6px;
  top: 16px;
}
.flat-button-props.round {
  border-radius: 50%;
}
.flat-button-props.small {
  padding: 5px;
}
.flat-button-props a {
  color: white;
  text-decoration: none;
}
@media screen and (min-width: 768px) {
  .flat-button-props {
    padding: 10px 35px;
  }
  .flat-button-props.small {
    padding: 5px;
  }
}
.action-button-props {
  display: block;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  padding: 10px 50px;
}
.action-button-props .content {
  font-weight: 500;
  display: block;
}
.action-button-props .icon {
  background-image: url(/client/4dfa12214025d650da8a.png);
  width: 7px;
  height: 13px;
  position: absolute;
  right: 6px;
  top: 16px;
}
.action-button-props[disabled],
.action-button-props.disabled {
  pointer-events: unset;
}
.nav-hamburger {
  border: none;
  outline: none;
  background: transparent;
}
.hovered-top-nav-link {
  color: white;
  text-decoration: underline;
}
.not-found-page {
  flex-basis: 100%;
  background: linear-gradient(to bottom, #0baaae, rgba(0, 209, 189, 0.5)), linear-gradient(45deg, #003367 5%, transparent);
  position: relative;
}
.not-found-page .not-found-content {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  padding: 1em;
}
.not-found-page .not-found-content .row.top,
.not-found-page .not-found-content .row.bottom {
  justify-content: space-evenly;
  display: flex;
  flex-direction: row;
}
.not-found-page .not-found-content .row.top {
  align-items: flex-end;
}
.not-found-page .not-found-content .row.content {
  text-align: center;
  margin-top: 1em;
  margin-bottom: 1em;
}
.not-found-page .not-found-content .row.bottom {
  flex-basis: 100%;
}
.not-found-page .not-found-content .row.bottom .section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}
.not-found-page .not-found-content .row.bottom .section.middle {
  align-self: flex-start;
}
.not-found-page h1 {
  font-size: 6em;
  font-family: 'Montserrat Bold', sans-serif;
  font-weight: bolder;
  color: white;
}
.not-found-page .space-lama {
  background-image: url(/client/e32738af61f1556830d4.png);
  background-repeat: no-repeat;
  width: 135px;
  height: 180px;
}
.not-found-page .comet {
  background-image: url(/client/02029ce4075a722c523f.png);
  background-repeat: no-repeat;
  width: 35px;
  height: 39px;
}
.not-found-page .star {
  background-image: url(/client/1d19cbb3f8088f34ed09.png);
  background-repeat: no-repeat;
  width: 37px;
  height: 37px;
}
.not-found-page .big-star {
  background-image: url(/client/2a2c9140f1345fdd6ac8.png);
  background-repeat: no-repeat;
  width: 43px;
  height: 43px;
}
.not-found-page .sun {
  background-image: url(/client/de546b989a6120c3767d.png);
  background-repeat: no-repeat;
  width: 87px;
  height: 81px;
}
.not-found-page .earth {
  background-image: url(/client/44cecb3662253832baaf.png);
  background-repeat: no-repeat;
  width: 59px;
  height: 65px;
}
.not-found-page .planet {
  background-image: url(/client/5ccc3b429620cbd59d52.png);
  background-repeat: no-repeat;
  width: 72px;
  height: 74px;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: normal;
  src: url(/client/ceb11275ab638627a643.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Medium';
  font-style: normal;
  font-weight: normal;
  src: url(/client/e2d60bc49517598c0ce8.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Bold';
  font-style: normal;
  font-weight: bold;
  src: url(/client/fa8441f345d83a0bc4ec.ttf) format(truetype);
}
.normal-text {
  font-family: monserratMedium, sans-serif;
}
.bold-text {
  font-weight: bolder;
  font-family: monserratBold, sans-serif;
}
.default-shadow-on-all-sides {
  box-shadow: 0 0 0.3rem rgba(0, 0, 0, 0.2), 0 0 0.3rem rgba(0, 0, 0, 0.2);
}
.not-selectable {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.top-nav-props {
  background: linear-gradient(#004284, #00366d);
  color: white;
}
.flat-button-props {
  display: block;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  background: #003367;
  color: white;
  padding: 10px 25px;
  border: 1px solid #003367;
  border-radius: 20px;
}
.flat-button-props .content {
  font-weight: 500;
  display: block;
}
.flat-button-props .icon {
  background-image: url(/client/4dfa12214025d650da8a.png);
  width: 7px;
  height: 13px;
  position: absolute;
  right: 6px;
  top: 16px;
}
.flat-button-props.round {
  border-radius: 50%;
}
.flat-button-props.small {
  padding: 5px;
}
.flat-button-props a {
  color: white;
  text-decoration: none;
}
@media screen and (min-width: 768px) {
  .flat-button-props {
    padding: 10px 35px;
  }
  .flat-button-props.small {
    padding: 5px;
  }
}
.action-button-props {
  display: block;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  padding: 10px 50px;
}
.action-button-props .content {
  font-weight: 500;
  display: block;
}
.action-button-props .icon {
  background-image: url(/client/4dfa12214025d650da8a.png);
  width: 7px;
  height: 13px;
  position: absolute;
  right: 6px;
  top: 16px;
}
.action-button-props[disabled],
.action-button-props.disabled {
  pointer-events: unset;
}
.nav-hamburger {
  border: none;
  outline: none;
  background: transparent;
}
.hovered-top-nav-link {
  color: white;
  text-decoration: underline;
}
.error-boundary-frame {
  background: linear-gradient(to bottom, #0baaae, rgba(0, 209, 189, 0.5)), linear-gradient(45deg, #003367 5%, transparent);
  width: 100%;
  overflow-y: auto;
}
.error-boundary-frame .error-content {
  background: #003062;
  color: white;
  padding: 1em 1em;
}
.error-boundary-frame h1 {
  font-size: xx-large;
  font-weight: bolder;
}
.error-boundary-frame h2 {
  margin: 1em 0;
}
.error-boundary-frame pre {
  overflow: auto;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: normal;
  src: url(/client/ceb11275ab638627a643.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Medium';
  font-style: normal;
  font-weight: normal;
  src: url(/client/e2d60bc49517598c0ce8.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Bold';
  font-style: normal;
  font-weight: bold;
  src: url(/client/fa8441f345d83a0bc4ec.ttf) format(truetype);
}
.normal-text {
  font-family: monserratMedium, sans-serif;
}
.bold-text {
  font-weight: bolder;
  font-family: monserratBold, sans-serif;
}
.default-shadow-on-all-sides {
  box-shadow: 0 0 0.3rem rgba(0, 0, 0, 0.2), 0 0 0.3rem rgba(0, 0, 0, 0.2);
}
.not-selectable {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.top-nav-props {
  background: linear-gradient(#004284, #00366d);
  color: white;
}
.flat-button-props {
  display: block;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  background: #003367;
  color: white;
  padding: 10px 25px;
  border: 1px solid #003367;
  border-radius: 20px;
}
.flat-button-props .content {
  font-weight: 500;
  display: block;
}
.flat-button-props .icon {
  background-image: url(/client/4dfa12214025d650da8a.png);
  width: 7px;
  height: 13px;
  position: absolute;
  right: 6px;
  top: 16px;
}
.flat-button-props.round {
  border-radius: 50%;
}
.flat-button-props.small {
  padding: 5px;
}
.flat-button-props a {
  color: white;
  text-decoration: none;
}
@media screen and (min-width: 768px) {
  .flat-button-props {
    padding: 10px 35px;
  }
  .flat-button-props.small {
    padding: 5px;
  }
}
.action-button-props {
  display: block;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  padding: 10px 50px;
}
.action-button-props .content {
  font-weight: 500;
  display: block;
}
.action-button-props .icon {
  background-image: url(/client/4dfa12214025d650da8a.png);
  width: 7px;
  height: 13px;
  position: absolute;
  right: 6px;
  top: 16px;
}
.action-button-props[disabled],
.action-button-props.disabled {
  pointer-events: unset;
}
.nav-hamburger {
  border: none;
  outline: none;
  background: transparent;
}
.hovered-top-nav-link {
  color: white;
  text-decoration: underline;
}
.poll-screen {
  flex-basis: 100%;
  display: grid;
  grid-auto-flow: row;
  grid-template-rows: minmax(0, 50%) minmax(0, 50%);
}
.poll-screen .poll-top {
  overflow: hidden;
  flex-basis: 100%;
  display: grid;
  grid-auto-flow: row;
  grid-template-rows: minmax(0, 50%) minmax(0, 50%);
}
@media screen and (min-width: 992px) {
  .poll-screen .poll-top {
    grid-auto-flow: column;
    grid-template-rows: minmax(0, 100%);
    grid-template-columns: minmax(0, 50%) minmax(0, 50%);
  }
}
.poll-screen.zoomed .poll-top,
.poll-screen .poll-top.only-image {
  grid-template-rows: minmax(0, 100%) 0%;
}
@media screen and (min-width: 992px) {
  .poll-screen.zoomed .poll-top,
  .poll-screen .poll-top.only-image {
    grid-auto-flow: column;
    grid-template-rows: minmax(0, 100%) 0%;
    grid-template-columns: minmax(0, 100%) 0%;
  }
}
.poll-screen .poll-top.only-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media screen and (min-width: 1200px) {
  .poll-screen .poll-top.only-text {
    justify-content: unset;
    flex-direction: row;
  }
}
.poll-screen .poll-answers-outer .poll-answers:not(.has-images) {
  overflow: auto;
  height: 100%;
}
.poll-screen .poll-answers {
  min-height: 100%;
  display: grid;
  margin-bottom: 0;
  gap: 5px;
}
.poll-screen .poll-answers.has-images {
  height: 100%;
  grid-template-columns: 50% 50%;
  grid-template-rows: 50% 50%;
  padding-bottom: 5px;
  row-gap: 0;
  -moz-column-gap: 0;
       column-gap: 0;
}
.poll-screen .poll-answers.has-images .answer:nth-child(1) {
  grid-row: 1;
  grid-column: 1;
}
.poll-screen .poll-answers.has-images .answer:nth-child(2) {
  grid-row: 1;
  grid-column: 2;
}
.poll-screen .poll-answers.has-images .answer:nth-child(3) {
  grid-row: 2;
  grid-column: 1;
}
.poll-screen .poll-answers.has-images .answer:nth-child(4) {
  grid-row: 2;
  grid-column: 2;
}
@media only screen and (min-width: 1200px) {
  .poll-screen .poll-answers:not(.has-images) {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }
}
.poll-screen .answer {
  display: flex;
  position: relative;
  padding: 0.15rem 0.625em;
  font-family: 'Montserrat Bold', sans-serif;
}
@media screen and (min-width: 300px) {
  .poll-screen .answer {
    padding: 0.2em 0.625em;
  }
}
@media screen and (min-width: 576px) {
  .poll-screen .answer {
    padding: 0.3em 0.625em;
  }
}
@media screen and (min-width: 992px) {
  .poll-screen .answer {
    padding: 0.4em 0.625em;
  }
}
.poll-screen .answer img.w {
  max-width: 100%;
  max-height: 100%;
  height: auto;
}
.poll-screen .answer img.h {
  max-height: 100%;
  max-width: 100%;
  width: auto;
}
.poll-screen .answer .letter {
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  position: absolute;
  top: 0.05em;
  left: 0.3em;
  background-color: #1f63ab;
  border-radius: 50%;
  border-width: 0.18rem;
  border-style: solid;
  border-color: white;
  color: white;
  padding: 0.4em;
  width: 1.6em;
  height: 1.6em;
  box-shadow: 0 0 0.18rem rgba(0, 0, 0, 0.2), 0 0 0.18rem rgba(0, 0, 0, 0.2);
}
@media screen and (min-width: 992px) {
  .poll-screen .answer .letter {
    font-size: 1.3rem;
  }
}
.poll-screen .answer.small-text-length .answer-content.is-text {
  font-size: 1.2em;
  padding-left: 1em;
  padding-right: 1em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}
@media screen and (min-width: 768px) {
  .poll-screen .answer.small-text-length .answer-content.is-text {
    line-height: 1.4em;
  }
}
@media screen and (min-width: 992px) {
  .poll-screen .answer.small-text-length .answer-content.is-text {
    font-size: 1.5em;
  }
}
@media screen and (min-width: 1400px) {
  .poll-screen .answer.small-text-length .answer-content.is-text {
    font-size: 2em;
  }
}
.poll-screen .answer.large-text-length .answer-content.is-text {
  font-size: 1em;
}
@media screen and (min-width: 300px) {
  .poll-screen .answer.large-text-length .answer-content.is-text {
    padding-top: 0.2em;
    padding-bottom: 0.2em;
  }
}
@media screen and (min-width: 576px) {
  .poll-screen .answer.large-text-length .answer-content.is-text {
    padding-left: 0.7em;
    padding-right: 0.7em;
    padding-top: 0.35em;
    padding-bottom: 0.35em;
  }
}
@media screen and (min-width: 768px) {
  .poll-screen .answer.large-text-length .answer-content.is-text {
    font-size: 1.1em;
    line-height: 1.2em;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
  }
}
@media screen and (min-width: 992px) {
  .poll-screen .answer.large-text-length .answer-content.is-text {
    font-size: 1.2em;
  }
}
@media screen and (min-width: 1400px) {
  .poll-screen .answer.large-text-length .answer-content.is-text {
    font-size: 1.4em;
  }
}
.poll-screen .answer .answer-content[disabled] {
  cursor: not-allowed;
}
.poll-screen .answer .answer-content {
  cursor: pointer;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  flex-basis: 100%;
  font-family: 'Montserrat Medium', sans-serif;
  line-height: 1.1em;
  outline: none;
  width: 100%;
  color: #4f5555;
  background-image: linear-gradient(#e6faf8, #c9dddb);
  border-style: solid;
  border-width: 0.18rem;
  border-color: #1f63ab;
  border-radius: 0.5rem;
  box-shadow: 0 0 0.125rem #1f63ab, 0 0 0.125rem #1f63ab;
}
.poll-screen .answer .answer-content.is-text {
  padding-left: 8px;
  padding-right: 8px;
  word-break: break-word;
}
.poll-screen .answer .answer-content:hover {
  box-shadow: 0 0 0.3rem #1f63ab, 0 0 0.3rem #1f63ab;
}
.poll-screen .answer.selected .answer-content {
  color: #dfe5ef;
  background-image: linear-gradient(#1f66b0, #135092);
}
.poll-screen .answer.correct .letter {
  color: transparent;
  border-color: white;
  background-color: #24d875;
  background-image: url(/client/18e87d56fd3bf02fdb0e.png);
  background-size: 50%;
  background-position: center;
  background-repeat: no-repeat;
}
.poll-screen .answer.correct .answer-content {
  border-color: #24d875;
  box-shadow: 0 0 0.125em #24d875, 0 0 0.125em #24d875;
}
.poll-screen .answer.correct .answer-content:hover {
  box-shadow: 0 0 0.3em #24d875, 0 0 0.3em #24d875;
}
.poll-screen .answer.incorrect .letter {
  color: transparent;
  border-color: white;
  background-color: #e64c4c;
  background-image: url(/client/dfe57f5695e7fa48edd4.png);
  background-size: 50%;
  background-position: center;
  background-repeat: no-repeat;
}
.poll-screen .answer.incorrect .answer-content {
  border-color: #e64c4c;
  box-shadow: 0 0 0.125em #e64c4c, 0 0 0.125em #e64c4c;
}
.poll-screen .answer.incorrect .answer-content:hover {
  box-shadow: 0 0 0.3em #e64c4c, 0 0 0.3em #e64c4c;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: normal;
  src: url(/client/ceb11275ab638627a643.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Medium';
  font-style: normal;
  font-weight: normal;
  src: url(/client/e2d60bc49517598c0ce8.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Bold';
  font-style: normal;
  font-weight: bold;
  src: url(/client/fa8441f345d83a0bc4ec.ttf) format(truetype);
}
.normal-text {
  font-family: monserratMedium, sans-serif;
}
.bold-text {
  font-weight: bolder;
  font-family: monserratBold, sans-serif;
}
.default-shadow-on-all-sides {
  box-shadow: 0 0 0.3rem rgba(0, 0, 0, 0.2), 0 0 0.3rem rgba(0, 0, 0, 0.2);
}
.not-selectable {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.top-nav-props {
  background: linear-gradient(#004284, #00366d);
  color: white;
}
.flat-button-props {
  display: block;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  background: #003367;
  color: white;
  padding: 10px 25px;
  border: 1px solid #003367;
  border-radius: 20px;
}
.flat-button-props .content {
  font-weight: 500;
  display: block;
}
.flat-button-props .icon {
  background-image: url(/client/4dfa12214025d650da8a.png);
  width: 7px;
  height: 13px;
  position: absolute;
  right: 6px;
  top: 16px;
}
.flat-button-props.round {
  border-radius: 50%;
}
.flat-button-props.small {
  padding: 5px;
}
.flat-button-props a {
  color: white;
  text-decoration: none;
}
@media screen and (min-width: 768px) {
  .flat-button-props {
    padding: 10px 35px;
  }
  .flat-button-props.small {
    padding: 5px;
  }
}
.action-button-props {
  display: block;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  padding: 10px 50px;
}
.action-button-props .content {
  font-weight: 500;
  display: block;
}
.action-button-props .icon {
  background-image: url(/client/4dfa12214025d650da8a.png);
  width: 7px;
  height: 13px;
  position: absolute;
  right: 6px;
  top: 16px;
}
.action-button-props[disabled],
.action-button-props.disabled {
  pointer-events: unset;
}
.nav-hamburger {
  border: none;
  outline: none;
  background: transparent;
}
.hovered-top-nav-link {
  color: white;
  text-decoration: underline;
}
.media {
  position: relative;
  padding: 15px 5px 5px 5px;
  text-align: center;
}
.media.image {
  width: 100%;
  height: 100%;
}
.media.image .wrapper {
  position: relative;
  max-width: 100%;
  max-height: 100%;
}
.media.glow-on-hover img:hover {
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2), 0 0 0.5rem rgba(0, 0, 0, 0.2);
}
.media img {
  border-radius: 15px;
  border-style: solid;
  border-color: white;
  border-width: 1.5px;
  max-width: 100%;
  max-height: 100%;
  border-spacing: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
@media screen and(min-width: 768px) {
  .media img {
    border-width: 2px;
  }
}
.media img:not(.zoomed) {
  cursor: zoom-in;
}
.media img.zoomed {
  cursor: zoom-out;
}
.media.image button.zoom {
  bottom: 5px;
  right: 0px;
}
.media button.zoom {
  position: absolute;
  bottom: 35px;
  right: 8px;
  cursor: pointer;
  width: 15px;
  height: 15px;
  outline: none;
  border-radius: 50%;
  border-width: 1.5px;
  border-style: solid;
  border-color: white;
  background-color: #003062;
  padding: 10px;
  background-image: url(/client/f82f0c4f2be721fc1054.png);
  background-repeat: no-repeat;
  background-size: 15px 15px;
  background-position: center;
  z-index: 3;
}
.media button.zoom:hover {
  background-color: #1f63ab;
}
@media screen and (min-width: 768px) {
  .media button.zoom {
    border-width: 2px;
  }
}
@media only screen and (min-width: 1200px) {
  .media.audio {
    flex: 1 1 0px;
  }
}
.media.audio audio {
  display: none;
  visibility: collapse;
}
.media.audio .play-button {
  border-style: solid;
  border-color: white;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  border-width: 6px;
  outline: none;
  background-color: hsl(24, 100%, 50%);
  background-image: url(/client/054c36a5632c6d919905.png);
  background-size: 150px 150px;
  background-repeat: no-repeat;
  background-position: center;
}
.media.audio.playing .play-button {
  animation-name: play-sound-button-shadow;
  animation-duration: 0.7s;
  animation-iteration-count: infinite;
}
@keyframes play-sound-button-shadow {
  0% {
    box-shadow: 0 0 5px hsl(24, 100%, 50%), 0 0 5px hsl(24, 100%, 50%);
  }
  50% {
    box-shadow: 0 0 30px hsl(24, 100%, 50%), 0 0 30px hsl(24, 100%, 50%);
  }
  100% {
    box-shadow: 0 0 5px hsl(24, 100%, 50%), 0 0 5px hsl(24, 100%, 50%);
  }
}
.question-outer {
  display: grid;
  justify-items: center;
  align-items: center;
  overflow: auto;
  width: 100%;
  max-height: 100%;
}
@media screen and (min-width: 992px) {
  .text-only .question {
    font-size: 1.54em;
  }
  .text-only .question.small-text-length {
    font-size: 2.8em;
  }
  .question.large-text-length {
    font-size: 1.32em;
  }
}
@media screen and (min-width: 1200px) {
  font-size: 1.54em;
}
.question {
  width: 100%;
  background-color: #003062;
  color: white;
  text-align: center;
  vertical-align: middle;
  font-family: 'Montserrat Medium', sans-serif;
  padding: 7px;
  font-size: 1.1em;
}
@media screen and (min-width: 768px) and (min-height: 600px) {
  .question {
    padding: 20px;
  }
}
.question.reduce-on-smaller-screens {
  font-size: 1.1em;
  padding: 3px;
}
.question.reduce-on-smaller-screens.small-text-length {
  font-size: 1.1em;
}
@media (min-width: 768px) or (min-height: 600px) {
  .question.reduce-on-smaller-screens {
    font-size: 1.1em;
  }
  .question.reduce-on-smaller-screens.small-text-length {
    font-size: 1.4em;
  }
}
@media (min-width: 768px) or (min-height: 600px) and screen and (min-width: 992px) {
  .question.reduce-on-smaller-screens.small-text-length {
    font-size: 2em;
  }
}
.question.small-text-length {
  font-size: 1.4em;
}
@media screen and (min-width: 992px) {
  .question.small-text-length {
    font-size: 2em;
  }
}
.question a.btn,
.question a.btn:visited {
  color: unset;
}
.question a,
.question a:visited {
  color: #00b8a6;
  text-decoration: none;
}
.question p {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media only screen and (min-width: 576px) {
  .question {
    border-radius: 5px;
  }
}
@media only screen and (min-width: 1200px) {
  .question {
    align-self: center;
    flex: 1 1 0px;
  }
}
.zoomed .question {
  visibility: collapse;
  display: none;
}
.zoomed img {
  padding: 0;
}


@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: normal;
  src: url(/client/ceb11275ab638627a643.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Medium';
  font-style: normal;
  font-weight: normal;
  src: url(/client/e2d60bc49517598c0ce8.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Bold';
  font-style: normal;
  font-weight: bold;
  src: url(/client/fa8441f345d83a0bc4ec.ttf) format(truetype);
}
.normal-text {
  font-family: monserratMedium, sans-serif;
}
.bold-text {
  font-weight: bolder;
  font-family: monserratBold, sans-serif;
}
.default-shadow-on-all-sides {
  box-shadow: 0 0 0.3rem rgba(0, 0, 0, 0.2), 0 0 0.3rem rgba(0, 0, 0, 0.2);
}
.not-selectable {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.top-nav-props {
  background: linear-gradient(#004284, #00366d);
  color: white;
}
.flat-button-props {
  display: block;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  background: #003367;
  color: white;
  padding: 10px 25px;
  border: 1px solid #003367;
  border-radius: 20px;
}
.flat-button-props .content {
  font-weight: 500;
  display: block;
}
.flat-button-props .icon {
  background-image: url(/client/4dfa12214025d650da8a.png);
  width: 7px;
  height: 13px;
  position: absolute;
  right: 6px;
  top: 16px;
}
.flat-button-props.round {
  border-radius: 50%;
}
.flat-button-props.small {
  padding: 5px;
}
.flat-button-props a {
  color: white;
  text-decoration: none;
}
@media screen and (min-width: 768px) {
  .flat-button-props {
    padding: 10px 35px;
  }
  .flat-button-props.small {
    padding: 5px;
  }
}
.action-button-props {
  display: block;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  padding: 10px 50px;
}
.action-button-props .content {
  font-weight: 500;
  display: block;
}
.action-button-props .icon {
  background-image: url(/client/4dfa12214025d650da8a.png);
  width: 7px;
  height: 13px;
  position: absolute;
  right: 6px;
  top: 16px;
}
.action-button-props[disabled],
.action-button-props.disabled {
  pointer-events: unset;
}
.nav-hamburger {
  border: none;
  outline: none;
  background: transparent;
}
.hovered-top-nav-link {
  color: white;
  text-decoration: underline;
}
.presentation-screen {
  flex-basis: 100%;
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: 100%;
  grid-template-rows: auto -webkit-min-content;
  grid-template-rows: auto min-content;
}
.presentation-screen.zoomed {
  grid-template-rows: 100% 0;
}
.presentation-screen.text-only,
.presentation-screen.media-only {
  width: 100%;
  height: 100%;
  grid-template-rows: 100%;
}
.presentation-screen.text-only {
  overflow: auto;
}
.presentation-screen.text-only .presentation-top {
  display: none;
  visibility: collapse;
}
.presentation-screen.media-only .presentation-bottom {
  display: none;
  visibility: collapse;
}
@media only screen and (min-width: 1200px) {
  .presentation-screen {
    grid-auto-flow: column;
    grid-template-rows: 100%;
    grid-template-columns: min(50%, -webkit-max-content) min(50%, -webkit-max-content);
    grid-template-columns: min(50%, max-content) min(50%, max-content);
  }
  .presentation-screen.text-only,
  .presentation-screen.media-only {
    grid-template-columns: 100%;
  }
  .presentation-screen.zoomed {
    grid-template-columns: 100% 0;
  }
}
.presentation-screen.h .presentation-image-container {
  height: 100%;
  width: auto;
}
.presentation-screen.w .presentation-image-container {
  width: 100%;
  height: auto;
}
.presentation-screen.zoomed {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.presentation-screen.zoomed .presentation-image-container {
  width: 100%;
  height: 100%;
}
.presentation-screen.zoomed .media.image {
  width: 100%;
  height: 100%;
  display: flex;
  overflow: visible;
  text-align: unset;
}
.presentation-screen.zoomed .media.image .wrapper {
  display: unset;
  max-width: unset;
  max-height: unset;
  align-self: unset;
  flex: unset;
}
.presentation-screen.h.zoomed .media.image {
  /*.wrapper, */
}
.presentation-screen.h.zoomed .media.image .wrapper {
  display: block;
}
.presentation-screen.h.zoomed .media.image .wrapper img {
  width: auto;
  height: 100%;
  max-width: unset;
}
.presentation-screen .presentation-bottom,
.presentation-screen .presentation-top {
  display: flex;
  justify-content: center;
  align-items: center;
}
.presentation-screen .presentation-top {
  overflow: hidden;
}
@media (orientation: portrait) {
  .presentation-screen .presentation-bottom {
    margin-bottom: 100px;
  }
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: normal;
  src: url(/client/ceb11275ab638627a643.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Medium';
  font-style: normal;
  font-weight: normal;
  src: url(/client/e2d60bc49517598c0ce8.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Bold';
  font-style: normal;
  font-weight: bold;
  src: url(/client/fa8441f345d83a0bc4ec.ttf) format(truetype);
}
.normal-text {
  font-family: monserratMedium, sans-serif;
}
.bold-text {
  font-weight: bolder;
  font-family: monserratBold, sans-serif;
}
.default-shadow-on-all-sides {
  box-shadow: 0 0 0.3rem rgba(0, 0, 0, 0.2), 0 0 0.3rem rgba(0, 0, 0, 0.2);
}
.not-selectable {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.top-nav-props {
  background: linear-gradient(#004284, #00366d);
  color: white;
}
.flat-button-props {
  display: block;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  background: #003367;
  color: white;
  padding: 10px 25px;
  border: 1px solid #003367;
  border-radius: 20px;
}
.flat-button-props .content {
  font-weight: 500;
  display: block;
}
.flat-button-props .icon {
  background-image: url(/client/4dfa12214025d650da8a.png);
  width: 7px;
  height: 13px;
  position: absolute;
  right: 6px;
  top: 16px;
}
.flat-button-props.round {
  border-radius: 50%;
}
.flat-button-props.small {
  padding: 5px;
}
.flat-button-props a {
  color: white;
  text-decoration: none;
}
@media screen and (min-width: 768px) {
  .flat-button-props {
    padding: 10px 35px;
  }
  .flat-button-props.small {
    padding: 5px;
  }
}
.action-button-props {
  display: block;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  padding: 10px 50px;
}
.action-button-props .content {
  font-weight: 500;
  display: block;
}
.action-button-props .icon {
  background-image: url(/client/4dfa12214025d650da8a.png);
  width: 7px;
  height: 13px;
  position: absolute;
  right: 6px;
  top: 16px;
}
.action-button-props[disabled],
.action-button-props.disabled {
  pointer-events: unset;
}
.nav-hamburger {
  border: none;
  outline: none;
  background: transparent;
}
.hovered-top-nav-link {
  color: white;
  text-decoration: underline;
}
.quiz-screen {
  flex-basis: 100%;
  display: grid;
  grid-auto-flow: row;
  grid-template-rows: minmax(0, 50%) minmax(0, 50%);
}
.quiz-screen .quiz-top {
  overflow: hidden;
  flex-basis: 100%;
  display: grid;
  grid-auto-flow: row;
  grid-template-rows: minmax(0, 50%) minmax(0, 50%);
}
@media screen and (min-width: 992px) {
  .quiz-screen .quiz-top {
    grid-auto-flow: column;
    grid-template-rows: minmax(0, 100%);
    grid-template-columns: minmax(0, 50%) minmax(0, 50%);
  }
}
.quiz-screen.zoomed .quiz-top,
.quiz-screen .quiz-top.only-image {
  grid-template-rows: minmax(0, 100%) 0%;
}
@media screen and (min-width: 992px) {
  .quiz-screen.zoomed .quiz-top,
  .quiz-screen .quiz-top.only-image {
    grid-auto-flow: column;
    grid-template-rows: minmax(0, 100%) 0%;
    grid-template-columns: minmax(0, 100%) 0%;
  }
}
.quiz-screen .quiz-top.only-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media screen and (min-width: 1200px) {
  .quiz-screen .quiz-top.only-text {
    justify-content: unset;
    flex-direction: row;
  }
}
.quiz-screen .quiz-answers-outer .quiz-answers:not(.has-images) {
  overflow: auto;
  height: 100%;
}
.quiz-screen .quiz-answers {
  min-height: 100%;
  display: grid;
  margin-bottom: 0;
  gap: 5px;
}
.quiz-screen .quiz-answers.has-images {
  height: 100%;
  grid-template-columns: 50% 50%;
  grid-template-rows: 50% 50%;
  padding-bottom: 5px;
  row-gap: 0;
  -moz-column-gap: 0;
       column-gap: 0;
}
.quiz-screen .quiz-answers.has-images .answer:nth-child(1) {
  grid-row: 1;
  grid-column: 1;
}
.quiz-screen .quiz-answers.has-images .answer:nth-child(2) {
  grid-row: 1;
  grid-column: 2;
}
.quiz-screen .quiz-answers.has-images .answer:nth-child(3) {
  grid-row: 2;
  grid-column: 1;
}
.quiz-screen .quiz-answers.has-images .answer:nth-child(4) {
  grid-row: 2;
  grid-column: 2;
}
@media only screen and (min-width: 1200px) {
  .quiz-screen .quiz-answers:not(.has-images) {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }
}
.quiz-screen .answer {
  display: flex;
  position: relative;
  padding: 0.15rem 0.625em;
  font-family: 'Montserrat Bold', sans-serif;
}
@media screen and (min-width: 300px) {
  .quiz-screen .answer {
    padding: 0.2em 0.625em;
  }
}
@media screen and (min-width: 576px) {
  .quiz-screen .answer {
    padding: 0.3em 0.625em;
  }
}
@media screen and (min-width: 992px) {
  .quiz-screen .answer {
    padding: 0.4em 0.625em;
  }
}
.quiz-screen .answer img.w {
  max-width: 100%;
  max-height: 100%;
  height: auto;
}
.quiz-screen .answer img.h {
  max-height: 100%;
  max-width: 100%;
  width: auto;
}
.quiz-screen .answer .letter {
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  position: absolute;
  top: 0.05em;
  left: 0.3em;
  background-color: #1f63ab;
  border-radius: 50%;
  border-width: 0.18rem;
  border-style: solid;
  border-color: white;
  color: white;
  padding: 0.4em;
  width: 1.6em;
  height: 1.6em;
  box-shadow: 0 0 0.18rem rgba(0, 0, 0, 0.2), 0 0 0.18rem rgba(0, 0, 0, 0.2);
}
@media screen and (min-width: 992px) {
  .quiz-screen .answer .letter {
    font-size: 1.3rem;
  }
}
.quiz-screen .answer.small-text-length .answer-content.is-text {
  font-size: 1.2em;
  padding-left: 1em;
  padding-right: 1em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}
@media screen and (min-width: 768px) {
  .quiz-screen .answer.small-text-length .answer-content.is-text {
    line-height: 1.4em;
  }
}
@media screen and (min-width: 992px) {
  .quiz-screen .answer.small-text-length .answer-content.is-text {
    font-size: 1.5em;
  }
}
@media screen and (min-width: 1400px) {
  .quiz-screen .answer.small-text-length .answer-content.is-text {
    font-size: 2em;
  }
}
.quiz-screen .answer.large-text-length .answer-content.is-text {
  font-size: 1em;
}
@media screen and (min-width: 300px) {
  .quiz-screen .answer.large-text-length .answer-content.is-text {
    padding-top: 0.2em;
    padding-bottom: 0.2em;
  }
}
@media screen and (min-width: 576px) {
  .quiz-screen .answer.large-text-length .answer-content.is-text {
    padding-left: 0.7em;
    padding-right: 0.7em;
    padding-top: 0.35em;
    padding-bottom: 0.35em;
  }
}
@media screen and (min-width: 768px) {
  .quiz-screen .answer.large-text-length .answer-content.is-text {
    font-size: 1.1em;
    line-height: 1.2em;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
  }
}
@media screen and (min-width: 992px) {
  .quiz-screen .answer.large-text-length .answer-content.is-text {
    font-size: 1.2em;
  }
}
@media screen and (min-width: 1400px) {
  .quiz-screen .answer.large-text-length .answer-content.is-text {
    font-size: 1.4em;
  }
}
.quiz-screen .answer .answer-content[disabled] {
  cursor: not-allowed;
}
.quiz-screen .answer .answer-content {
  cursor: pointer;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  flex-basis: 100%;
  font-family: 'Montserrat Medium', sans-serif;
  line-height: 1.1em;
  outline: none;
  width: 100%;
  color: #4f5555;
  background-image: linear-gradient(#e6faf8, #c9dddb);
  border-style: solid;
  border-width: 0.18rem;
  border-color: #1f63ab;
  border-radius: 0.5rem;
  box-shadow: 0 0 0.125rem #1f63ab, 0 0 0.125rem #1f63ab;
}
.quiz-screen .answer .answer-content.is-text {
  padding-left: 8px;
  padding-right: 8px;
  word-break: break-word;
}
.quiz-screen .answer .answer-content:hover {
  box-shadow: 0 0 0.3rem #1f63ab, 0 0 0.3rem #1f63ab;
}
.quiz-screen .answer.selected .answer-content {
  color: #dfe5ef;
  background-image: linear-gradient(#1f66b0, #135092);
}
.quiz-screen .answer.correct .letter {
  color: transparent;
  border-color: white;
  background-color: #24d875;
  background-image: url(/client/18e87d56fd3bf02fdb0e.png);
  background-size: 50%;
  background-position: center;
  background-repeat: no-repeat;
}
.quiz-screen .answer.correct .answer-content {
  border-color: #24d875;
  box-shadow: 0 0 0.125em #24d875, 0 0 0.125em #24d875;
}
.quiz-screen .answer.correct .answer-content:hover {
  box-shadow: 0 0 0.3em #24d875, 0 0 0.3em #24d875;
}
.quiz-screen .answer.incorrect .letter {
  color: transparent;
  border-color: white;
  background-color: #e64c4c;
  background-image: url(/client/dfe57f5695e7fa48edd4.png);
  background-size: 50%;
  background-position: center;
  background-repeat: no-repeat;
}
.quiz-screen .answer.incorrect .answer-content {
  border-color: #e64c4c;
  box-shadow: 0 0 0.125em #e64c4c, 0 0 0.125em #e64c4c;
}
.quiz-screen .answer.incorrect .answer-content:hover {
  box-shadow: 0 0 0.3em #e64c4c, 0 0 0.3em #e64c4c;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: normal;
  src: url(/client/ceb11275ab638627a643.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Medium';
  font-style: normal;
  font-weight: normal;
  src: url(/client/e2d60bc49517598c0ce8.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Bold';
  font-style: normal;
  font-weight: bold;
  src: url(/client/fa8441f345d83a0bc4ec.ttf) format(truetype);
}
.normal-text {
  font-family: monserratMedium, sans-serif;
}
.bold-text {
  font-weight: bolder;
  font-family: monserratBold, sans-serif;
}
.default-shadow-on-all-sides {
  box-shadow: 0 0 0.3rem rgba(0, 0, 0, 0.2), 0 0 0.3rem rgba(0, 0, 0, 0.2);
}
.not-selectable {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.top-nav-props {
  background: linear-gradient(#004284, #00366d);
  color: white;
}
.flat-button-props {
  display: block;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  background: #003367;
  color: white;
  padding: 10px 25px;
  border: 1px solid #003367;
  border-radius: 20px;
}
.flat-button-props .content {
  font-weight: 500;
  display: block;
}
.flat-button-props .icon {
  background-image: url(/client/4dfa12214025d650da8a.png);
  width: 7px;
  height: 13px;
  position: absolute;
  right: 6px;
  top: 16px;
}
.flat-button-props.round {
  border-radius: 50%;
}
.flat-button-props.small {
  padding: 5px;
}
.flat-button-props a {
  color: white;
  text-decoration: none;
}
@media screen and (min-width: 768px) {
  .flat-button-props {
    padding: 10px 35px;
  }
  .flat-button-props.small {
    padding: 5px;
  }
}
.action-button-props {
  display: block;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  padding: 10px 50px;
}
.action-button-props .content {
  font-weight: 500;
  display: block;
}
.action-button-props .icon {
  background-image: url(/client/4dfa12214025d650da8a.png);
  width: 7px;
  height: 13px;
  position: absolute;
  right: 6px;
  top: 16px;
}
.action-button-props[disabled],
.action-button-props.disabled {
  pointer-events: unset;
}
.nav-hamburger {
  border: none;
  outline: none;
  background: transparent;
}
.hovered-top-nav-link {
  color: white;
  text-decoration: underline;
}
.map-screen {
  flex-basis: 100%;
  display: grid;
  grid-auto-flow: row;
  grid-template-rows: -webkit-min-content auto;
  grid-template-rows: min-content auto;
  overflow: hidden;
  position: relative;
}
.map-screen .question-container .question-outer .question {
  padding: 5px;
}
.map-screen .question-container .question-outer .question.small-text-length {
  font-size: unset;
}
@media (orientation: landscape) and (min-width: 992px) {
  .map-screen {
    margin-top: 10px;
    margin-bottom: 5px;
  }
  .map-screen .question-container .question-outer .question {
    padding: 10px;
  }
  .map-screen .question-container .question-outer .question.small-text-length {
    font-size: 1.4em;
  }
}
@media (orientation: portrait) {
  .map-screen {
    margin-top: 10px;
  }
  .map-screen .question-container .question-outer .question {
    padding: 5px;
  }
}
.map-screen .map-container {
  overflow: hidden;
  display: grid;
  grid-auto-flow: row;
  grid-template-rows: -webkit-min-content auto;
  grid-template-rows: min-content auto;
}
.map-screen .map {
  position: relative;
  overflow: hidden;
}
.map-screen .map img:not(.enabled) {
  cursor: not-allowed;
}
.map-screen .map img.enabled {
  cursor: crosshair;
}
.map-screen .map img {
  -o-object-fit: contain;
     object-fit: contain;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  position: absolute;
}
.map-screen .instructions {
  display: flex;
  color: white;
  align-items: center;
  justify-content: center;
}
@media screen and (min-height: 600px) {
  .map-screen .instructions {
    padding-top: 5px;
    padding-bottom: 5px;
  }
}
@media screen and (min-height: 800px) {
  .map-screen .instructions {
    padding-top: 20px;
    padding-bottom: 10px;
  }
}
.map-screen .instructions .text {
  text-transform: uppercase;
  font-size: 1.1em;
  margin-right: 5px;
}
.map-screen .instructions i {
  margin-left: 5px;
  display: inline-block;
  width: 15px;
  height: 15px;
  background-image: url(/client/b5c70fe00ba7ef2d6aa9.png);
  background-size: contain;
  background-repeat: no-repeat;
}
.map-screen .pin {
  background: url(/client/81a6be5183ff18f7fdde.png) no-repeat;
  position: absolute;
  pointer-events: none;
  z-index: 2;
}
.map-screen .map-answer-inner {
  pointer-events: none;
  background-color: rgba(0, 0, 0, 0.35);
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.8);
}
.map-screen .map-answer-outer {
  border-color: rgba(0, 0, 0, 0.8);
  border-style: solid;
  pointer-events: none;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: normal;
  src: url(/client/ceb11275ab638627a643.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Medium';
  font-style: normal;
  font-weight: normal;
  src: url(/client/e2d60bc49517598c0ce8.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Bold';
  font-style: normal;
  font-weight: bold;
  src: url(/client/fa8441f345d83a0bc4ec.ttf) format(truetype);
}
.normal-text {
  font-family: monserratMedium, sans-serif;
}
.bold-text {
  font-weight: bolder;
  font-family: monserratBold, sans-serif;
}
.default-shadow-on-all-sides {
  box-shadow: 0 0 0.1rem rgba(0, 0, 0, 0.2), 0 0 0.1rem rgba(0, 0, 0, 0.2);
}
.not-selectable {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.top-nav-props {
  background: linear-gradient(#004284, #00366d);
  color: white;
}
.flat-button-props {
  display: block;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  background: #003367;
  color: white;
  padding: 10px 25px;
  border: 1px solid #003367;
  border-radius: 20px;
}
.flat-button-props .content {
  font-weight: 500;
  display: block;
}
.flat-button-props .icon {
  background-image: url(/client/4dfa12214025d650da8a.png);
  width: 7px;
  height: 13px;
  position: absolute;
  right: 6px;
  top: 16px;
}
.flat-button-props.round {
  border-radius: 50%;
}
.flat-button-props.small {
  padding: 5px;
}
.flat-button-props a {
  color: white;
  text-decoration: none;
}
@media screen and (min-width: 768px) {
  .flat-button-props {
    padding: 10px 35px;
  }
  .flat-button-props.small {
    padding: 5px;
  }
}
.action-button-props {
  display: block;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  padding: 10px 50px;
}
.action-button-props .content {
  font-weight: 500;
  display: block;
}
.action-button-props .icon {
  background-image: url(/client/4dfa12214025d650da8a.png);
  width: 7px;
  height: 13px;
  position: absolute;
  right: 6px;
  top: 16px;
}
.action-button-props[disabled],
.action-button-props.disabled {
  pointer-events: unset;
}
.nav-hamburger {
  border: none;
  outline: none;
  background: transparent;
}
.hovered-top-nav-link {
  color: white;
  text-decoration: underline;
}
.connect-screen {
  flex-basis: 100%;
  padding-top: 0.8rem;
  padding-bottom: 0.5rem;
  display: grid;
  gap: 0.5rem;
  grid-template-rows: -webkit-min-content auto;
  grid-template-rows: min-content auto;
}
.connect-screen .connect-content {
  overflow: hidden;
  display: flex;
  position: relative;
}
@media screen and (min-width: 768px) or (min-height: 400px) {
  .connect-screen {
    padding-top: 1rem;
  }
  .connect-screen .connect-content {
    padding: 1rem;
  }
}
.connect-screen.size-1 .connect-content {
  flex-direction: column;
  align-content: center;
  justify-content: center;
  align-items: center;
}
@media (orientation: portrait) {
  .connect-screen.size-1 .background {
    height: 50%;
    width: 100%;
  }
}
@media (orientation: landscape) {
  .connect-screen.size-1 .background {
    width: 50%;
    height: 100%;
  }
}
.connect-screen:not(.size-1) .background {
  flex-basis: 100%;
}
.connect-screen .background {
  display: grid;
  z-index: 1;
}
@media (orientation: landscape) {
  .connect-screen .background {
    grid-template-rows: 40% auto 40%;
    grid-auto-columns: 1fr;
  }
  .connect-screen .background .item.left {
    grid-row: 1;
  }
  .connect-screen .background .item.right {
    grid-row: 3;
  }
  .connect-screen .background .item:not(.with-text) {
    display: grid;
    justify-items: center;
  }
}
@media (orientation: portrait) {
  .connect-screen .background {
    grid-template-columns: 35% auto 35%;
    grid-auto-rows: 1fr;
  }
  .connect-screen .background .item.left {
    grid-column: 1;
  }
  .connect-screen .background .item.right {
    grid-column: 3;
  }
  .connect-screen .background .item:not(.with-text) {
    display: grid;
    align-items: center;
  }
}
.connect-screen .background .item {
  overflow: hidden;
  padding: 0.2em;
}
.connect-screen img,
.connect-screen .text {
  border-radius: 10px;
  cursor: pointer;
  z-index: 1;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.connect-screen img.teacher,
.connect-screen .text.teacher {
  cursor: initial;
}
.connect-screen img.selected,
.connect-screen .text.selected {
  padding: 0px;
  border-width: 0.15rem;
  border-style: solid;
}
.connect-screen img.selected.color1,
.connect-screen .text.selected.color1 {
  border-color: #f5e700;
}
.connect-screen img.selected.color2,
.connect-screen .text.selected.color2 {
  border-color: #002ef5;
}
.connect-screen img.selected.color3,
.connect-screen .text.selected.color3 {
  border-color: #9b00b2;
}
.connect-screen img.selected.color4,
.connect-screen .text.selected.color4 {
  border-color: #f76300;
}
.connect-screen img.correct,
.connect-screen .text.correct {
  border-color: #24d875 !important;
}
.connect-screen img.incorrect,
.connect-screen .text.incorrect {
  border-color: #e64c4c !important;
}
.connect-screen .text {
  outline: none !important;
  border-width: 0px;
  padding: 0.15rem;
  width: 100%;
  height: 100%;
  background-color: #003062;
  color: white;
  font-size: 0.9em;
  text-overflow: ellipsis;
  overflow: hidden;
  box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.2), 0 0 0.25rem rgba(0, 0, 0, 0.2);
}
.connect-screen i {
  display: none;
  visibility: collapse;
  position: absolute;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border-width: 0.1rem;
  top: -0.4rem;
  left: -0.4rem;
  border-style: solid;
  border-color: white;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 0.5rem 0.5rem;
  z-index: 1;
}
.connect-screen i.correct,
.connect-screen i.incorrect {
  display: unset;
  visibility: unset;
}
.connect-screen i.correct {
  background-image: url(/client/18e87d56fd3bf02fdb0e.png);
  background-color: #24d875;
}
.connect-screen i.incorrect {
  background-image: url(/client/dfe57f5695e7fa48edd4.png);
  background-color: #e64c4c;
}
.connect-screen img {
  box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.2), 0 0 0.25rem rgba(0, 0, 0, 0.2);
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
}
.connect-screen img.w {
  height: auto;
}
.connect-screen img.h {
  height: 100%;
  width: auto;
}
.connect-screen .arrows {
  position: absolute;
}
.connect-screen .arrows line {
  stroke-width: 2;
  stroke-linecap: round;
}
.connect-screen .arrows line.correct {
  stroke: #24d875;
}
.connect-screen .arrows line.incorrect {
  stroke: #e64c4c;
}
.connect-screen .arrows line.color-1 {
  stroke: #f5e700;
}
.connect-screen .arrows line.color-2 {
  stroke: #002ef5;
}
.connect-screen .arrows line.color-3 {
  stroke: #9b00b2;
}
.connect-screen .arrows line.color-4 {
  stroke: #f76300;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: normal;
  src: url(/client/ceb11275ab638627a643.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Medium';
  font-style: normal;
  font-weight: normal;
  src: url(/client/e2d60bc49517598c0ce8.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Bold';
  font-style: normal;
  font-weight: bold;
  src: url(/client/fa8441f345d83a0bc4ec.ttf) format(truetype);
}
.normal-text {
  font-family: monserratMedium, sans-serif;
}
.bold-text {
  font-weight: bolder;
  font-family: monserratBold, sans-serif;
}
.default-shadow-on-all-sides {
  box-shadow: 0 0 0.3rem rgba(0, 0, 0, 0.2), 0 0 0.3rem rgba(0, 0, 0, 0.2);
}
.not-selectable {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.top-nav-props {
  background: linear-gradient(#004284, #00366d);
  color: white;
}
.flat-button-props {
  display: block;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  background: #003367;
  color: white;
  padding: 10px 25px;
  border: 1px solid #003367;
  border-radius: 20px;
}
.flat-button-props .content {
  font-weight: 500;
  display: block;
}
.flat-button-props .icon {
  background-image: url(/client/4dfa12214025d650da8a.png);
  width: 7px;
  height: 13px;
  position: absolute;
  right: 6px;
  top: 16px;
}
.flat-button-props.round {
  border-radius: 50%;
}
.flat-button-props.small {
  padding: 5px;
}
.flat-button-props a {
  color: white;
  text-decoration: none;
}
@media screen and (min-width: 768px) {
  .flat-button-props {
    padding: 10px 35px;
  }
  .flat-button-props.small {
    padding: 5px;
  }
}
.action-button-props {
  display: block;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  padding: 10px 50px;
}
.action-button-props .content {
  font-weight: 500;
  display: block;
}
.action-button-props .icon {
  background-image: url(/client/4dfa12214025d650da8a.png);
  width: 7px;
  height: 13px;
  position: absolute;
  right: 6px;
  top: 16px;
}
.action-button-props[disabled],
.action-button-props.disabled {
  pointer-events: unset;
}
.nav-hamburger {
  border: none;
  outline: none;
  background: transparent;
}
.hovered-top-nav-link {
  color: white;
  text-decoration: underline;
}
.drag-drop-screen {
  overflow: hidden;
  display: grid;
  grid-auto-flow: row;
  grid-template-rows: calc(100% - 45px - 5px) 45px;
  grid-row-gap: 0.5rem;
  flex-basis: 100%;
  padding: 1rem 1rem 0rem 1rem;
}
@media screen and (min-height: 450px) {
  .drag-drop-screen {
    grid-template-rows: calc(100% - 95px - 5px) 95px;
    padding: 2rem 1rem 1rem 1rem;
    grid-row-gap: 1rem;
  }
}
.drag-drop-screen .answers {
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 3px;
  overflow: hidden;
}
.drag-drop-screen .answers .pile {
  width: 40%;
  height: 100%;
  text-align: center;
  overflow: hidden;
}
@media screen and (min-height: 450px) {
  .drag-drop-screen .answers .pile {
    height: min(95px, 100%);
    max-height: min(95px, 100%);
  }
}
.drag-drop-screen .answers .answer {
  display: inline-block;
}
.drag-drop-screen .answers .answer:not(.draggable) {
  visibility: collapse;
  display: none;
}
.drag-drop-screen .answers .answer:not(.is-text) {
  height: min(95px, 100%);
  max-height: min(95px, 100%);
}
.drag-drop-screen .answers .answer img {
  height: min(95px, 100%);
  max-height: min(95px, 100%);
  max-width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.drag-drop-screen .answers .answer.is-text {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}
.drag-drop-screen .drop-zones {
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: 100%;
  grid-template-rows: 50% 50%;
  grid-column-gap: 5px;
  grid-row-gap: 5px;
}
.drag-drop-screen .drop-zones.total-3,
.drag-drop-screen .drop-zones.total-4 {
  grid-template-columns: 50% 50%;
}
.drag-drop-screen .zone {
  display: flex;
  position: relative;
  border-radius: 1rem;
  border-style: dashed;
  border-width: 0.1rem;
  border-color: white;
}
.drag-drop-screen .zone.selected {
  border-style: solid;
}
.drag-drop-screen .zone .title-container {
  position: absolute;
  display: flex;
  justify-content: center;
  width: 100%;
  top: -0.7rem;
}
.drag-drop-screen .zone .title-container .title {
  width: 80%;
  text-align: center;
  background-color: #003163;
  color: #e9ebee;
  padding: 0.2em;
  overflow: hidden;
  max-height: 2em;
  border-color: #14decb;
  border-width: 0.1rem;
  border-radius: 0.5rem;
  border-style: solid;
  box-shadow: 0 0 0.3rem rgba(0, 0, 0, 0.2), 0 0 0.3rem rgba(0, 0, 0, 0.2);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-size: smaller;
}
@media only screen and(min-width: 576px) {
  .drag-drop-screen .zone .title-container .title {
    font-size: unset;
  }
}
.drag-drop-screen .targets {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 50% 50%;
  grid-column-gap: 3px;
  grid-row-gap: 3px;
  flex-basis: 100%;
  padding: 0.6rem 0.2rem 0.2rem 0.2rem;
}
@media only screen and(min-width: 576px) {
  .drag-drop-screen .targets {
    padding: 1.4rem 0.6rem 0.6rem 0.6rem;
  }
}
.drag-drop-screen .targets .target {
  display: grid;
  grid-column-gap: 3px;
  grid-row-gap: 3px;
  overflow: hidden;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}
@media screen and (min-width: 768px) and (min-height: 450px) {
  .drag-drop-screen .targets .target {
    grid-auto-flow: unset;
    grid-auto-columns: unset;
    grid-template-columns: 50% 50%;
    grid-template-rows: 50% 50%;
  }
  .drag-drop-screen .targets .target.count-1 {
    grid-template-columns: 100%;
    grid-template-rows: 100%;
  }
  .drag-drop-screen .targets .target.count-2 {
    grid-template-columns: 50% 50%;
    grid-template-rows: 100%;
  }
}
.drag-drop-screen .targets .target .answer {
  overflow: hidden;
}
.drag-drop-screen .targets .target .answer .text {
  word-break: break-word;
  overflow: hidden;
}
.drag-drop-screen .answer.is-text {
  overflow: hidden;
}
.drag-drop-screen .answer .img,
.drag-drop-screen .answer .text {
  background-color: #003062;
  box-shadow: 0 0 0.3rem rgba(0, 0, 0, 0.2), 0 0 0.3rem rgba(0, 0, 0, 0.2);
  border-radius: 0.5rem;
  max-width: 100%;
  max-height: 100%;
}
.drag-drop-screen .answer .img.correct,
.drag-drop-screen .answer .text.correct,
.drag-drop-screen .answer .img.incorrect,
.drag-drop-screen .answer .text.incorrect {
  border-style: solid;
  border-width: 0.1rem;
}
.drag-drop-screen .answer .img.correct,
.drag-drop-screen .answer .text.correct {
  box-shadow: 0 0 0.3rem #24d875, 0 0 0.3rem #24d875;
  border-color: #24d875;
}
.drag-drop-screen .answer .img.incorrect,
.drag-drop-screen .answer .text.incorrect {
  box-shadow: 0 0 0.3rem #e64c4c, 0 0 0.3rem #e64c4c;
  border-color: #e64c4c;
}
.drag-drop-screen .answer .img {
  display: block;
}
.drag-drop-screen .answer .text {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  justify-content: center;
  justify-items: center;
  align-items: center;
  text-align: center;
  color: white;
  text-overflow: ellipsis;
  padding: 0 1em;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-size: smaller;
  word-break: break-word;
  margin: auto;
  overflow: auto;
}
@media only screen and(min-width: 576px) {
  .drag-drop-screen .answer .text {
    font-size: unset;
  }
}

.drag-drop-container {
  position: relative;
  overflow: visible;
}

.drop-zone-debug {
  border: 1px dashed orange;
  position: absolute;
}

.cb-drag-target.is-dragging {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  z-index: 999;
  cursor: move;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: normal;
  src: url(/client/ceb11275ab638627a643.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Medium';
  font-style: normal;
  font-weight: normal;
  src: url(/client/e2d60bc49517598c0ce8.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Bold';
  font-style: normal;
  font-weight: bold;
  src: url(/client/fa8441f345d83a0bc4ec.ttf) format(truetype);
}
.normal-text {
  font-family: monserratMedium, sans-serif;
}
.bold-text {
  font-weight: bolder;
  font-family: monserratBold, sans-serif;
}
.default-shadow-on-all-sides {
  box-shadow: 0 0 0.3rem rgba(0, 0, 0, 0.2), 0 0 0.3rem rgba(0, 0, 0, 0.2);
}
.not-selectable {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.top-nav-props {
  background: linear-gradient(#004284, #00366d);
  color: white;
}
.flat-button-props {
  display: block;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  background: #003367;
  color: white;
  padding: 10px 25px;
  border: 1px solid #003367;
  border-radius: 20px;
}
.flat-button-props .content {
  font-weight: 500;
  display: block;
}
.flat-button-props .icon {
  background-image: url(/client/4dfa12214025d650da8a.png);
  width: 7px;
  height: 13px;
  position: absolute;
  right: 6px;
  top: 16px;
}
.flat-button-props.round {
  border-radius: 50%;
}
.flat-button-props.small {
  padding: 5px;
}
.flat-button-props a {
  color: white;
  text-decoration: none;
}
@media screen and (min-width: 768px) {
  .flat-button-props {
    padding: 10px 35px;
  }
  .flat-button-props.small {
    padding: 5px;
  }
}
.action-button-props {
  display: block;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  padding: 10px 50px;
}
.action-button-props .content {
  font-weight: 500;
  display: block;
}
.action-button-props .icon {
  background-image: url(/client/4dfa12214025d650da8a.png);
  width: 7px;
  height: 13px;
  position: absolute;
  right: 6px;
  top: 16px;
}
.action-button-props[disabled],
.action-button-props.disabled {
  pointer-events: unset;
}
.nav-hamburger {
  border: none;
  outline: none;
  background: transparent;
}
.hovered-top-nav-link {
  color: white;
  text-decoration: underline;
}
.draw-screen {
  overflow: hidden;
  display: grid;
  flex-basis: 100%;
  grid-gap: 0.25em;
  grid-template-rows: -webkit-min-content auto 4.4em;
  grid-template-rows: min-content auto 4.4em;
  grid-template-columns: 100%;
  grid-auto-flow: row;
}
@media (min-height: 600px) {
  .draw-screen {
    padding: 0.5rem 0 0.25rem 0;
  }
}
@media screen and (min-width: 768px) and (min-height: 600px) {
  .draw-screen {
    padding: 0.5rem 0 0.5rem 0;
  }
}
.draw-screen .draw-container {
  position: relative;
  overflow: hidden;
}
.draw-screen .draw-container img,
.draw-screen .draw-container svg {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  position: absolute;
}
.draw-screen .colors {
  padding: 0.5em;
  justify-content: center;
  align-items: center;
  justify-items: center;
}
@media screen and (orientation: portrait) {
  .draw-screen:not(.has-question) .draw-container {
    grid-row: 1 / span 2;
  }
  .draw-screen .colors {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    grid-gap: 0.25em;
  }
  .draw-screen .color {
    margin-right: 5px;
  }
  .draw-screen .color,
  .draw-screen .undo {
    width: min(14.28571429%, 3em);
  }
}
@media screen and (orientation: landscape) {
  .draw-screen {
    grid-template-rows: -webkit-min-content auto;
    grid-template-rows: min-content auto;
    grid-template-columns: 4.4em auto 4.4em;
  }
  .draw-screen .question-outer {
    grid-column: 1 / span 3;
    grid-row: 1;
  }
  .draw-screen .draw-container {
    grid-column: 2;
    grid-row: 2;
  }
  .draw-screen .colors {
    grid-column: 3;
    grid-row: 2;
    justify-content: center;
    flex-direction: column;
  }
  .draw-screen .color {
    margin-bottom: 5px;
  }
  .draw-screen .color,
  .draw-screen .undo {
    height: min(14.28571429%, 3em);
  }
}
.draw-screen .colors {
  display: flex;
}
.draw-screen .colors .color,
.draw-screen .colors .undo {
  aspect-ratio: 1 / 1;
  outline: none !important;
  border-radius: 50%;
  border-color: white;
  border-width: 0.2rem;
  border-style: solid;
  padding: 0em;
  cursor: pointer;
}
.draw-screen .colors .undo {
  background-color: transparent;
  background-image: url(/client/5223533cd08c31dc79e3.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 80%;
}
.draw-screen .colors .color.selected {
  border-width: 0.3rem;
  box-shadow: 0 0 0.5rem black, 0 0 0.5rem black;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: normal;
  src: url(/client/ceb11275ab638627a643.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Medium';
  font-style: normal;
  font-weight: normal;
  src: url(/client/e2d60bc49517598c0ce8.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Bold';
  font-style: normal;
  font-weight: bold;
  src: url(/client/fa8441f345d83a0bc4ec.ttf) format(truetype);
}
.normal-text {
  font-family: monserratMedium, sans-serif;
}
.bold-text {
  font-weight: bolder;
  font-family: monserratBold, sans-serif;
}
.default-shadow-on-all-sides {
  box-shadow: 0 0 0.3rem rgba(0, 0, 0, 0.2), 0 0 0.3rem rgba(0, 0, 0, 0.2);
}
.not-selectable {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.top-nav-props {
  background: linear-gradient(#004284, #00366d);
  color: white;
}
.flat-button-props {
  display: block;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  background: #003367;
  color: white;
  padding: 10px 25px;
  border: 1px solid #003367;
  border-radius: 20px;
}
.flat-button-props .content {
  font-weight: 500;
  display: block;
}
.flat-button-props .icon {
  background-image: url(/client/4dfa12214025d650da8a.png);
  width: 7px;
  height: 13px;
  position: absolute;
  right: 6px;
  top: 16px;
}
.flat-button-props.round {
  border-radius: 50%;
}
.flat-button-props.small {
  padding: 5px;
}
.flat-button-props a {
  color: white;
  text-decoration: none;
}
@media screen and (min-width: 768px) {
  .flat-button-props {
    padding: 10px 35px;
  }
  .flat-button-props.small {
    padding: 5px;
  }
}
.action-button-props {
  display: block;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  padding: 10px 50px;
}
.action-button-props .content {
  font-weight: 500;
  display: block;
}
.action-button-props .icon {
  background-image: url(/client/4dfa12214025d650da8a.png);
  width: 7px;
  height: 13px;
  position: absolute;
  right: 6px;
  top: 16px;
}
.action-button-props[disabled],
.action-button-props.disabled {
  pointer-events: unset;
}
.nav-hamburger {
  border: none;
  outline: none;
  background: transparent;
}
.hovered-top-nav-link {
  color: white;
  text-decoration: underline;
}
.keyboard-screen {
  overflow: hidden;
  padding: 2rem 0;
  flex-basis: 100%;
  display: grid;
  grid-auto-flow: row;
  align-content: center;
  gap: 5px;
}
.keyboard-screen .question-bottom {
  display: none;
}
.keyboard-screen.has-image {
  grid-template-rows: minmax(50%, auto) auto;
}
@media (orientation: landscape) {
  .keyboard-screen {
    grid-auto-flow: column;
    justify-content: center;
  }
  .keyboard-screen.has-image {
    grid-template-rows: unset;
  }
  .keyboard-screen.has-image .question-top {
    display: none;
  }
  .keyboard-screen.has-image .question-bottom {
    display: grid;
  }
  .keyboard-screen.has-image .keyboard-bottom {
    display: grid;
    justify-content: center;
    align-content: center;
    padding-left: 5px;
  }
  .keyboard-screen.has-image.zoomed {
    grid-template-columns: initial;
    justify-content: unset;
    align-content: unset;
  }
  .keyboard-screen.has-image.zoomed .keyboard-bottom {
    display: none;
  }
}
.keyboard-screen .keyboard-top {
  display: grid;
}
.keyboard-screen .keyboard-top.has-image {
  grid-template-rows: minmax(50%, auto) -webkit-min-content;
  grid-template-rows: minmax(50%, auto) min-content;
}
.keyboard-screen .question {
  height: unset;
  align-self: unset;
  flex: unset;
}
.keyboard-screen .input-area {
  display: flex;
  margin-top: 0.5rem;
  padding: 0.5rem;
}
@media screen and (min-width: 576px) {
  .keyboard-screen .input-area {
    padding: 0;
  }
}
.keyboard-screen .input-area .input-wrapper {
  display: flex;
  flex-basis: 100%;
  padding: 1rem;
  background-color: white;
  border-radius: 0.3rem;
  border-width: 0.1rem;
  border-style: solid;
  border-color: white;
  box-shadow: 0 0 0.3rem rgba(0, 0, 0, 0.2), 0 0 0.3rem rgba(0, 0, 0, 0.2);
}
.keyboard-screen .input-area .input-wrapper.correct {
  border-color: #24d875;
  box-shadow: 0 0 0.3rem #24d875, 0 0 0.3rem #24d875;
}
.keyboard-screen .input-area .input-wrapper.incorrect {
  border-color: #e64c4c;
  box-shadow: 0 0 0.3rem #e64c4c, 0 0 0.3rem #e64c4c;
}
.keyboard-screen .input-area .input-wrapper .next {
  width: 32px;
  height: 32px;
  padding: 5px;
  margin-left: 5px;
  outline: none;
  border-radius: 50% 50%;
  display: flex;
  justify-items: center;
  border: 3px solid white;
  background-color: #ff6600;
  cursor: pointer;
  animation-name: keyboard-animation;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  align-self: center;
}
@keyframes keyboard-animation {
  0% {
    box-shadow: 0 0 2px #ff6600, 0 0 2px #ff6600;
  }
  10% {
    box-shadow: 0 0 8px #ff6600, 0 0 8px #ff6600;
  }
  13% {
    box-shadow: 0 0 8px #ff6600, 0 0 8px #ff6600;
  }
  23% {
    box-shadow: 0 0 2px #ff6600, 0 0 2px #ff6600;
  }
  100% {
    box-shadow: 0 0 2px #ff6600, 0 0 2px #ff6600;
  }
}
.keyboard-screen .input-area .input-wrapper .next[disabled] {
  cursor: not-allowed;
  background-color: #ccc;
  animation-name: none;
}
.keyboard-screen .input-area .input-wrapper .next i {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(/client/ecfc979efc8a7f710084.png);
}
.keyboard-screen .input-area .input-wrapper .input,
.keyboard-screen .input-area .input-wrapper .input:disabled {
  color: #003163;
  background: white;
  flex-basis: 100%;
  outline: none;
  border: none;
  font-size: 1em;
  text-align: center;
  border-bottom-style: solid;
  border-bottom-width: 0.1rem;
  border-bottom-color: #003163;
  width: 100%;
}
@media screen and (min-width: 576px) {
  .keyboard-screen .input-area .input-wrapper .input,
  .keyboard-screen .input-area .input-wrapper .input:disabled {
    font-size: 1.5em;
  }
}
@media screen and (min-width: 768px) {
  .keyboard-screen .input-area .input-wrapper .input,
  .keyboard-screen .input-area .input-wrapper .input:disabled {
    font-size: 2em;
  }
}
.keyboard-screen .correct-answer {
  background: white;
  border: 0.1rem solid #24d875;
  border-radius: 0.3rem;
  margin: 0.5em 0;
  padding: 1em 50px;
  text-align: center;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

a.nav-logo {
  cursor: pointer;
}
.nav-logo {
  width: 57.33333333px;
  height: 26.88888889px;
  z-index: 101;
  background-image: url(/client/87ca7d143cc93f46dceb.png);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: contain;
  position: absolute;
  top: 0;
  left: calc(50% - (121px/4.5/2));
}
@media screen and(min-width: 210px) {
  .nav-logo {
    width: 73.71428571px;
    height: 34.57142857px;
    left: calc(50% - (258px/3.5/2));
  }
}
@media screen and(min-width: 250px) {
  .nav-logo {
    width: 86px;
    height: 40.33333333px;
    left: calc(50% - (258px/3/2));
  }
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: normal;
  src: url(/client/ceb11275ab638627a643.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Medium';
  font-style: normal;
  font-weight: normal;
  src: url(/client/e2d60bc49517598c0ce8.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Bold';
  font-style: normal;
  font-weight: bold;
  src: url(/client/fa8441f345d83a0bc4ec.ttf) format(truetype);
}
.normal-text {
  font-family: monserratMedium, sans-serif;
}
.bold-text {
  font-weight: bolder;
  font-family: monserratBold, sans-serif;
}
.default-shadow-on-all-sides {
  box-shadow: 0 0 0.3rem rgba(0, 0, 0, 0.2), 0 0 0.3rem rgba(0, 0, 0, 0.2);
}
.not-selectable {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.top-nav-props {
  background: linear-gradient(#004284, #00366d);
  color: white;
}
.flat-button-props {
  display: block;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  background: #003367;
  color: white;
  padding: 10px 25px;
  border: 1px solid #003367;
  border-radius: 20px;
}
.flat-button-props .content {
  font-weight: 500;
  display: block;
}
.flat-button-props .icon {
  background-image: url(/client/4dfa12214025d650da8a.png);
  width: 7px;
  height: 13px;
  position: absolute;
  right: 6px;
  top: 16px;
}
.flat-button-props.round {
  border-radius: 50%;
}
.flat-button-props.small {
  padding: 5px;
}
.flat-button-props a {
  color: white;
  text-decoration: none;
}
@media screen and (min-width: 768px) {
  .flat-button-props {
    padding: 10px 35px;
  }
  .flat-button-props.small {
    padding: 5px;
  }
}
.action-button-props {
  display: block;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  padding: 10px 50px;
}
.action-button-props .content {
  font-weight: 500;
  display: block;
}
.action-button-props .icon {
  background-image: url(/client/4dfa12214025d650da8a.png);
  width: 7px;
  height: 13px;
  position: absolute;
  right: 6px;
  top: 16px;
}
.action-button-props[disabled],
.action-button-props.disabled {
  pointer-events: unset;
}
.nav-hamburger {
  border: none;
  outline: none;
  background: transparent;
}
.hovered-top-nav-link {
  color: white;
  text-decoration: underline;
}
.top-nav {
  background: linear-gradient(#004284, #00366d);
  color: white;
  position: relative;
}
@media screen and (min-width: 576px) {
  .top-nav {
    align-items: center;
  }
}
.top-nav .top-nav-inner {
  height: 32px;
  display: grid;
  grid-template-columns: -webkit-min-content auto;
  grid-template-columns: min-content auto;
  overflow: hidden;
  color: white;
}
.top-nav .top-nav-inner a {
  text-decoration: none;
  color: white;
}
.top-nav .top-nav-inner a:hover {
  text-decoration: underline;
}
.top-nav.opened .links {
  display: flex;
  visibility: visible;
  position: absolute;
  left: 0;
  top: 32px;
  z-index: 100;
  overflow: hidden;
  background: #00366d;
  width: 100%;
}
.top-nav.opened .links .links-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 10px;
}
.top-nav.opened .links .links-inner a {
  color: white;
  text-decoration: none;
  display: block;
  padding: 10px 0;
}
.top-nav.opened .links .links-inner a:hover {
  color: white;
  text-decoration: underline;
}
.top-nav .links {
  display: none;
  visibility: hidden;
}
.top-nav .hamburger {
  border: none;
  outline: none;
  background: transparent;
  align-self: flex-start;
  margin-left: 5px;
  width: 27px;
  height: 32px;
  background-image: url(/client/50a34b3632effe0a1756.svg);
  background-size: 22px 22px;
  background-position: center center;
  background-repeat: no-repeat;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: normal;
  src: url(/client/ceb11275ab638627a643.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Medium';
  font-style: normal;
  font-weight: normal;
  src: url(/client/e2d60bc49517598c0ce8.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Bold';
  font-style: normal;
  font-weight: bold;
  src: url(/client/fa8441f345d83a0bc4ec.ttf) format(truetype);
}
.normal-text {
  font-family: monserratMedium, sans-serif;
}
.bold-text {
  font-weight: bolder;
  font-family: monserratBold, sans-serif;
}
.default-shadow-on-all-sides {
  box-shadow: 0 0 0.3rem rgba(0, 0, 0, 0.2), 0 0 0.3rem rgba(0, 0, 0, 0.2);
}
.not-selectable {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.top-nav-props {
  background: linear-gradient(#004284, #00366d);
  color: white;
}
.flat-button-props {
  display: block;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  background: #003367;
  color: white;
  padding: 10px 25px;
  border: 1px solid #003367;
  border-radius: 20px;
}
.flat-button-props .content {
  font-weight: 500;
  display: block;
}
.flat-button-props .icon {
  background-image: url(/client/4dfa12214025d650da8a.png);
  width: 7px;
  height: 13px;
  position: absolute;
  right: 6px;
  top: 16px;
}
.flat-button-props.round {
  border-radius: 50%;
}
.flat-button-props.small {
  padding: 5px;
}
.flat-button-props a {
  color: white;
  text-decoration: none;
}
@media screen and (min-width: 768px) {
  .flat-button-props {
    padding: 10px 35px;
  }
  .flat-button-props.small {
    padding: 5px;
  }
}
.action-button-props {
  display: block;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  padding: 10px 50px;
}
.action-button-props .content {
  font-weight: 500;
  display: block;
}
.action-button-props .icon {
  background-image: url(/client/4dfa12214025d650da8a.png);
  width: 7px;
  height: 13px;
  position: absolute;
  right: 6px;
  top: 16px;
}
.action-button-props[disabled],
.action-button-props.disabled {
  pointer-events: unset;
}
.nav-hamburger {
  border: none;
  outline: none;
  background: transparent;
}
.hovered-top-nav-link {
  color: white;
  text-decoration: underline;
}
.layout {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 32px auto 42px;
  grid-auto-flow: column;
  flex-basis: 100%;
  overflow: hidden;
}
.layout.no-footer {
  grid-template-rows: 32px auto;
}
.layout.scrollable {
  overflow-x: hidden;
  overflow-y: auto;
}
.layout.scrollable .screen-page-content {
  overflow: unset;
}
.layout.scrollable .screen-page-content .screen-page-content-inner {
  overflow: unset;
}
.layout .hidden {
  visibility: hidden;
}
.layout .invisible {
  visibility: hidden;
}
.layout .menu {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 10px;
}
.layout .screen-page-content {
  flex-basis: 100%;
  position: relative;
  overflow: hidden;
}
@media screen and (min-width: 576px) {
  .layout .screen-page-content {
    align-items: center;
  }
}
.layout .screen-page-content .screen-page-content-inner {
  display: flex;
  flex-basis: 100%;
  overflow: hidden;
  position: relative;
}
.layout .footer {
  background: linear-gradient(#004284, #003367);
  padding: 5px 10px;
}
.layout .footer .footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.layout .footer .footer-inner .prev,
.layout .footer .footer-inner .next,
.layout .footer .footer-inner .timer-control {
  width: 32px;
  height: 32px;
  padding: 5px;
  outline: none;
  border-radius: 50% 50%;
  display: flex;
  justify-items: center;
  border: 3px solid white;
  background-color: #ccc;
  cursor: not-allowed;
}
.layout .footer .footer-inner .prev i,
.layout .footer .footer-inner .next i,
.layout .footer .footer-inner .timer-control i {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
}
.layout .footer .footer-inner .game-code {
  color: white;
}
.layout .footer .footer-inner .timer-control {
  margin-left: 110px;
}
.layout .footer .footer-inner .timer-control:not([disabled]) {
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  .layout .footer .footer-inner .timer-control {
    margin-left: 150px;
  }
}
.layout .footer .footer-inner .timer-control.on i {
  background-image: url(/client/ec19ac59ed028b411896.svg);
}
.layout .footer .footer-inner .timer-control.off i {
  background-image: url(/client/a1775a7a0cfda57390e8.svg);
}
.layout .footer .footer-inner .prev i {
  background-image: url(/client/a3bb056aa0512df34d64.png);
}
.layout .footer .footer-inner .next.active,
.layout .footer .footer-inner .prev.active,
.layout .footer .footer-inner .timer-control {
  border: 3px solid white;
  background-color: #ff6600;
  cursor: pointer;
}
.layout .footer .footer-inner .next i {
  background-image: url(/client/ecfc979efc8a7f710084.png);
}
.layout .footer .footer-inner .animated-shadow {
  animation-name: animated-button-shadow;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}
@keyframes animated-button-shadow {
  0% {
    box-shadow: 0 0 2px white, 0 0 2px white;
  }
  10% {
    box-shadow: 0 0 8px white, 0 0 8px white;
  }
  13% {
    box-shadow: 0 0 8px white, 0 0 8px white;
  }
  23% {
    box-shadow: 0 0 2px white, 0 0 2px white;
  }
  100% {
    box-shadow: 0 0 2px white, 0 0 2px white;
  }
}
.layout .footer .footer-inner .pager {
  position: absolute;
  bottom: 0px;
  left: calc(50% - (32px/2));
}
@media screen and (min-width: 768px) {
  .layout .footer .footer-inner .pager {
    left: calc(50% - (79px/2));
  }
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: normal;
  src: url(/client/ceb11275ab638627a643.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Medium';
  font-style: normal;
  font-weight: normal;
  src: url(/client/e2d60bc49517598c0ce8.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Bold';
  font-style: normal;
  font-weight: bold;
  src: url(/client/fa8441f345d83a0bc4ec.ttf) format(truetype);
}
.normal-text {
  font-family: monserratMedium, sans-serif;
}
.bold-text {
  font-weight: bolder;
  font-family: monserratBold, sans-serif;
}
.default-shadow-on-all-sides {
  box-shadow: 0 0 0.3rem rgba(0, 0, 0, 0.2), 0 0 0.3rem rgba(0, 0, 0, 0.2);
}
.not-selectable {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.top-nav-props {
  background: linear-gradient(#004284, #00366d);
  color: white;
}
.flat-button-props {
  display: block;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  background: #003367;
  color: white;
  padding: 10px 25px;
  border: 1px solid #003367;
  border-radius: 20px;
}
.flat-button-props .content {
  font-weight: 500;
  display: block;
}
.flat-button-props .icon {
  background-image: url(/client/4dfa12214025d650da8a.png);
  width: 7px;
  height: 13px;
  position: absolute;
  right: 6px;
  top: 16px;
}
.flat-button-props.round {
  border-radius: 50%;
}
.flat-button-props.small {
  padding: 5px;
}
.flat-button-props a {
  color: white;
  text-decoration: none;
}
@media screen and (min-width: 768px) {
  .flat-button-props {
    padding: 10px 35px;
  }
  .flat-button-props.small {
    padding: 5px;
  }
}
.action-button-props {
  display: block;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  padding: 10px 50px;
}
.action-button-props .content {
  font-weight: 500;
  display: block;
}
.action-button-props .icon {
  background-image: url(/client/4dfa12214025d650da8a.png);
  width: 7px;
  height: 13px;
  position: absolute;
  right: 6px;
  top: 16px;
}
.action-button-props[disabled],
.action-button-props.disabled {
  pointer-events: unset;
}
.nav-hamburger {
  border: none;
  outline: none;
  background: transparent;
}
.hovered-top-nav-link {
  color: white;
  text-decoration: underline;
}
.nav-rounded-container {
  padding: 1px 5px;
  border-radius: 32px;
  border: 2px solid white;
  background: #1f63ab;
  display: flex;
  justify-content: center;
  font-size: 0.8em;
  box-shadow: inset 0 0 10.66666667px rgba(0, 0, 0, 0.2), inset 0 0 10.66666667px rgba(0, 0, 0, 0.2);
}
@media screen and(min-width: 300px) {
  .nav-rounded-container {
    min-width: 50px;
    padding: 2px 10px;
  }
}
@media screen and(min-width: 768px) {
  .nav-rounded-container {
    border: 2px solid white;
    font-size: 0.8em;
  }
}
.nav-rounded-container.invisible {
  display: none;
}

.screen-points .points-small {
  display: block;
}
.screen-points .points-normal {
  display: none;
}
@media screen and (min-width: 300px) {
  .screen-points .points-small {
    display: none;
  }
  .screen-points .points-normal {
    display: block;
  }
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: normal;
  src: url(/client/ceb11275ab638627a643.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Medium';
  font-style: normal;
  font-weight: normal;
  src: url(/client/e2d60bc49517598c0ce8.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Bold';
  font-style: normal;
  font-weight: bold;
  src: url(/client/fa8441f345d83a0bc4ec.ttf) format(truetype);
}
.normal-text {
  font-family: monserratMedium, sans-serif;
}
.bold-text {
  font-weight: bolder;
  font-family: monserratBold, sans-serif;
}
.default-shadow-on-all-sides {
  box-shadow: 0 0 0.3rem rgba(0, 0, 0, 0.2), 0 0 0.3rem rgba(0, 0, 0, 0.2);
}
.not-selectable {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.top-nav-props {
  background: linear-gradient(#004284, #00366d);
  color: white;
}
.flat-button-props {
  display: block;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  background: #003367;
  color: white;
  padding: 10px 25px;
  border: 1px solid #003367;
  border-radius: 20px;
}
.flat-button-props .content {
  font-weight: 500;
  display: block;
}
.flat-button-props .icon {
  background-image: url(/client/4dfa12214025d650da8a.png);
  width: 7px;
  height: 13px;
  position: absolute;
  right: 6px;
  top: 16px;
}
.flat-button-props.round {
  border-radius: 50%;
}
.flat-button-props.small {
  padding: 5px;
}
.flat-button-props a {
  color: white;
  text-decoration: none;
}
@media screen and (min-width: 768px) {
  .flat-button-props {
    padding: 10px 35px;
  }
  .flat-button-props.small {
    padding: 5px;
  }
}
.action-button-props {
  display: block;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  padding: 10px 50px;
}
.action-button-props .content {
  font-weight: 500;
  display: block;
}
.action-button-props .icon {
  background-image: url(/client/4dfa12214025d650da8a.png);
  width: 7px;
  height: 13px;
  position: absolute;
  right: 6px;
  top: 16px;
}
.action-button-props[disabled],
.action-button-props.disabled {
  pointer-events: unset;
}
.nav-hamburger {
  border: none;
  outline: none;
  background: transparent;
}
.hovered-top-nav-link {
  color: white;
  text-decoration: underline;
}
.screen-pager {
  background-repeat: no-repeat;
  background-size: contain;
  display: flex;
  justify-content: center;
  align-items: center;
}
.screen-pager .current {
  display: inline-block;
  color: white;
  font-weight: bolder;
  font-family: monserratBold, sans-serif;
}
.screen-pager .divider {
  display: inline-block;
  color: white;
  font-weight: bold;
}
.screen-pager .total {
  display: inline-block;
  color: #00ccb8;
  font-weight: bolder;
  font-family: monserratBold, sans-serif;
}
.screen-pager.small {
  width: 45.2173913px;
  height: 32px;
  background-position: center;
  /* 65x46 */
  background-image: url(/client/dc977f82e509b1e84b2b.png);
}
.screen-pager.small .current {
  font-size: 0.8rem;
}
.screen-pager.small .divider {
  margin-left: 3px;
  margin-right: 3px;
  font-size: 0.7rem;
}
.screen-pager.small .total {
  padding-top: 1px;
  font-size: 0.65rem;
}
.screen-pager.small.c2 .current {
  font-size: 17px;
}
.screen-pager.small.c2 .divider {
  margin-left: 2px;
  font-size: small;
  margin-right: 2px;
}
.screen-pager.small.c3 .current {
  font-size: 13px;
}
.screen-pager.small.c3 .divider {
  margin-left: 1px;
  margin-right: 1px;
  font-size: smaller;
}
.screen-pager.small.c3 .total {
  font-size: 10px;
}
@media screen and (min-width: 768px) {
  .screen-pager.small {
    background-image: url(/client/a710cd80663f4160d07f.png);
    width: 79px;
    height: 59px;
  }
  .screen-pager.small .current {
    font-size: 20px;
  }
  .screen-pager.small .divider {
    margin-left: 5px;
    margin-right: 5px;
    font-size: larger;
  }
  .screen-pager.small .total {
    padding-top: 1px;
    font-size: 13px;
  }
  .screen-pager.small.c2 .current {
    font-size: 17px;
  }
  .screen-pager.small.c2 .divider {
    margin-left: 2px;
    font-size: small;
    margin-right: 2px;
  }
  .screen-pager.small.c3 .current {
    font-size: 13px;
  }
  .screen-pager.small.c3 .divider {
    margin-left: 1px;
    margin-right: 1px;
    font-size: smaller;
  }
  .screen-pager.small.c3 .total {
    font-size: 10px;
  }
}
.screen-pager.big {
  width: 171px;
  height: 131px;
  background-image: url(/client/6b99e7efbaede1105351.png);
}
.screen-pager.big .current {
  font-size: 2.3em;
}
.screen-pager.big .divider {
  margin: 0 0.5em;
  font-size: larger;
}
.screen-pager.big .total {
  font-size: 2em;
}
.screen-pager.big.c2 .current {
  font-size: 2em;
}
.screen-pager.big.c2 .divider {
  margin: 0 0.2em;
}
.screen-pager.big.c2 .total {
  font-size: 1.8em;
}
.screen-pager.big.c3 .current {
  font-size: 1.5em;
}
.screen-pager.big.c3 .divider {
  margin: 0 0.2em;
}
.screen-pager.big.c3 .total {
  font-size: 1.3em;
}

@media screen and (min-width: 576px) {
  .responsive-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
@media screen and (min-width: 576px) {
  .responsive-container .responsive-content {
    width: calc(100% - 20px);
  }
}
@media screen and (min-width: 768px) {
  .responsive-container .responsive-content {
    width: calc(100% - 40px);
  }
}
@media screen and (min-width: 992px) {
  .responsive-container .responsive-content {
    width: 960px;
  }
}
@media screen and (min-width: 1200px) {
  .responsive-container .responsive-content {
    width: 1140px;
  }
}
@media screen and (min-width: 1400px) {
  .responsive-container .responsive-content {
    width: 1220px;
  }
}
@media screen and (min-width: 576px) {
  .responsive-padding-left-2 {
    padding-left: calc((100% - calc(100% - 20px))/2);
  }
}
@media screen and (min-width: 768px) {
  .responsive-padding-left-2 {
    padding-left: calc((100% - calc(100% - 40px))/2);
  }
}
@media screen and (min-width: 992px) {
  .responsive-padding-left-2 {
    padding-left: calc((100% - 960px)/2);
  }
}
@media screen and (min-width: 1200px) {
  .responsive-padding-left-2 {
    padding-left: calc((100% - 1140px)/2);
  }
}
@media screen and (min-width: 1400px) {
  .responsive-padding-left-2 {
    padding-left: calc((100% - 1220px)/2);
  }
}
@media screen and (min-width: 576px) {
  .responsive-padding-right-2 {
    padding-right: calc((100% - calc(100% - 20px))/2);
  }
}
@media screen and (min-width: 768px) {
  .responsive-padding-right-2 {
    padding-right: calc((100% - calc(100% - 40px))/2);
  }
}
@media screen and (min-width: 992px) {
  .responsive-padding-right-2 {
    padding-right: calc((100% - 960px)/2);
  }
}
@media screen and (min-width: 1200px) {
  .responsive-padding-right-2 {
    padding-right: calc((100% - 1140px)/2);
  }
}
@media screen and (min-width: 1400px) {
  .responsive-padding-right-2 {
    padding-right: calc((100% - 1220px)/2);
  }
}
.answer-explanation {
  max-height: 30vh;
  background: white;
  border-radius: 0.3rem;
  margin: 0 0.5rem;
  position: relative;
}
.answer-explanation.bottom {
  position: absolute;
  left: 26.5px;
  bottom: 15px;
  width: calc(100% - 53px);
  z-index: 100;
  margin: 0;
}
@media screen and (min-width: 768px) {
  .answer-explanation.bottom {
    bottom: 25px;
  }
}
.answer-explanation.top {
  position: absolute;
  left: 26.5px;
  top: 5px;
  width: calc(100% - 53px);
  z-index: 100;
  margin: 0;
}
.answer-explanation .explanation-text {
  text-align: center;
  max-height: 30vh;
  padding: 1em 45px;
  overflow-x: hidden;
}
.answer-explanation .explanation-icon {
  position: absolute;
  right: -8px;
  top: calc((100% - 75.96666667px) / 2);
  width: 53px;
  height: 75.96666667px;
  background: url(/client/d492044e88df72fda456.png) no-repeat;
  background-size: 100% 100%;
  content: ' ';
  display: block;
}
.answer-explanation-icon {
  background: red;
}

.shadow-over-container {
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  z-index: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.timer-progress {
  position: absolute;
  top: 0;
  height: 1px;
  border-style: solid;
  border-radius: 2px;
  border-width: 2px;
  box-shadow: 0 0 6px black;
  z-index: 2;
}
.timer-progress.ok {
  border-color: #24d875;
  background-color: #24d875;
}
.timer-progress.warning {
  border-color: #f5e700;
  background-color: #f5e700;
}
.timer-progress.danger {
  border-color: #e64c4c;
  background-color: #e64c4c;
}

.lesson-background {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom, #0baaae, rgba(0, 209, 189, 0.5)), linear-gradient(45deg, #003367 5%, transparent);
  --animation-multiplier: 1;
  --cloud-multiplier: 8;
}
@media (min-width: 768px) {
  .lesson-background {
    --animation-multiplier: 1.5;
  }
}
@media (min-width: 992px) {
  .lesson-background {
    --animation-multiplier: 2;
  }
}
@media (min-width: 1400px) {
  .lesson-background {
    --animation-multiplier: 3;
  }
}
.lesson-background * {
  background-repeat: no-repeat;
}
.lesson-background .cloud {
  position: absolute;
  background-image: url(/client/922e2bac05d7bb40b1e4.png);
  width: 70px;
  height: 50px;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  /*
    NOTE:
    To hide to the left, assume 20% is enough. This is because CSS animation
    can't handle calc().
    To hide to the right, do 100%.
    This makes the whole screen 120% for smooth linear animation
    */
}
.lesson-background .cloud.c1 {
  top: 20px;
  left: 60%;
  animation-name: lesson-background-cloud-1;
  animation-duration: calc(10s * var(--animation-multiplier) * var(--cloud-multiplier));
}
@keyframes lesson-background-cloud-1 {
  66.66666% {
    left: -20%;
  }
  66.66667% {
    left: 100%;
  }
}
.lesson-background .cloud.c2 {
  top: 60px;
  left: 30%;
  animation-name: lesson-background-cloud-2;
  animation-duration: calc(15s * var(--animation-multiplier) * var(--cloud-multiplier));
}
@keyframes lesson-background-cloud-2 {
  58.33333% {
    left: 100%;
  }
  58.33334% {
    left: -20%;
  }
}
.lesson-background .cloud.c3 {
  top: calc(46% - 50px);
  left: 10%;
  animation-name: lesson-background-cloud-3;
  animation-duration: calc(25s * var(--animation-multiplier) * var(--cloud-multiplier));
}
@keyframes lesson-background-cloud-3 {
  75% {
    left: 100%;
  }
  75.0001% {
    left: -20%;
  }
}
.lesson-background .cloud.c4 {
  top: calc(52% - 50px);
  right: 10%;
  animation-name: lesson-background-cloud-4;
  animation-duration: calc(10s * var(--animation-multiplier) * var(--cloud-multiplier));
}
@keyframes lesson-background-cloud-4 {
  25.00000% {
    right: -20%;
  }
  25.00001% {
    right: 100%;
  }
}
.lesson-background .cloud.c5 {
  top: calc(50% - 50px);
  left: 80%;
  animation-name: lesson-background-cloud-5;
  animation-duration: calc(13s * var(--animation-multiplier) * var(--cloud-multiplier));
}
@keyframes lesson-background-cloud-5 {
  83.33333% {
    left: -20%;
  }
  83.33334% {
    left: 100%;
  }
}
.lesson-background .cloud.c6 {
  top: calc(80% - 50px);
  left: 50%;
  animation-name: lesson-background-cloud-6;
  animation-duration: calc(7s * var(--animation-multiplier) * var(--cloud-multiplier));
}
@keyframes lesson-background-cloud-6 {
  58.33333% {
    left: -20%;
  }
  58.33334% {
    left: 100%;
  }
}
@keyframes background-wing-up-down {
  50% {
    transform: rotate(-5deg);
  }
}
@keyframes background-wing-down-up {
  50% {
    transform: rotate(5deg);
  }
}
@keyframes background-wing-up-down_small {
  50% {
    transform: rotate(-3deg);
  }
}
@keyframes background-wing-down-up_small {
  50% {
    transform: rotate(3deg);
  }
}
.lesson-background .bee {
  position: relative;
  background-image: url(/client/8036e52e556f688cd526.png);
  width: 58px;
  height: 39px;
  left: 100%;
  top: 60px;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: background-bee-horizontal, background-bee-vertical;
  animation-duration: calc(35s * var(--animation-multiplier)), 2s;
}
@keyframes background-bee-horizontal {
  10% {
    left: 100%;
    transform: scaleX(1);
  }
  40% {
    left: -20%;
    transform: scaleX(1);
  }
  70% {
    left: -20%;
    transform: scaleX(1);
  }
  70.0001% {
    transform: scaleX(-1);
  }
  99.9999% {
    transform: scaleX(-1);
  }
}
@keyframes background-bee-vertical {
  25% {
    top: 55px;
  }
  75% {
    top: 65px;
  }
}
.lesson-background .bee .wing-1,
.lesson-background .bee .wing-2 {
  position: absolute;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: 0.5s;
  transform-origin: bottom left;
}
.lesson-background .bee .wing-1 {
  background-image: url(/client/5dbf9cb98ac7a7e4cd5e.png);
  width: 54px;
  height: 41px;
  top: -15px;
  left: 9px;
  animation-name: background-wing-up-down;
}
.lesson-background .bee .wing-2 {
  background-image: url(/client/1032e98b044586c4a0df.png);
  width: 57px;
  height: 36px;
  top: -7px;
  left: 9px;
  animation-name: background-wing-down-up;
}
.lesson-background .ladybug {
  position: absolute;
  background-image: url(/client/15204ef182f45be57db9.png);
  width: 55px;
  height: 42px;
  bottom: 18%;
  left: -20%;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: background-ladybug-horizontal, background-ladybug-vertical;
  animation-duration: calc(40s * var(--animation-multiplier)), 2.5s;
}
.lesson-background .ladybug .wings {
  position: relative;
}
@keyframes background-ladybug-horizontal {
  40% {
    left: -20%;
    transform: scaleX(1);
  }
  70% {
    left: 100%;
    transform: scaleX(1);
  }
  70.0001% {
    transform: scaleX(-1);
  }
  75% {
    left: 100%;
    transform: scaleX(-1);
  }
  99.9999% {
    transform: scaleX(-1);
  }
}
@keyframes background-ladybug-vertical {
  25% {
    bottom: 17%;
  }
  75% {
    bottom: 19%;
  }
}
.lesson-background .ladybug .small_wing,
.lesson-background .ladybug .wing-1,
.lesson-background .ladybug .wing-2 {
  position: absolute;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform-origin: bottom right;
  animation-duration: 0.3s;
}
.lesson-background .ladybug .small_wing {
  background-image: url(/client/436e54da5c198c320a9f.png);
  width: 44px;
  height: 11px;
  top: 16px;
  left: -5px;
  animation-name: background-wing-up-down_small;
}
.lesson-background .ladybug .wing-1 {
  background-image: url(/client/db8dd69272401aba328c.png);
  width: 42px;
  height: 26px;
  top: 0px;
  left: -3px;
  animation-name: background-wing-down-up_small;
}
.lesson-background .ladybug .wing-2 {
  background-image: url(/client/a57f6c3a736ed6e35c73.png);
  width: 47px;
  height: 23px;
  top: 4px;
  left: -7px;
  animation-name: background-wing-up-down_small;
}
.lesson-background .tree {
  position: absolute;
  bottom: 0;
}
.lesson-background .tree.extra,
.lesson-background .cloud.extra {
  display: none;
}
.lesson-background .tree.left-1 {
  left: 5%;
  width: 50px;
  height: 89px;
  background-image: url(/client/4a19d57e4a4f0d580d65.png);
}
.lesson-background .tree.left-2 {
  left: 5%;
  width: 82px;
  height: 143px;
  background-image: url(/client/6c6c811ca6fc9404e16c.png);
}
.lesson-background .tree.right-1 {
  right: 6%;
  width: 69px;
  height: 123px;
  background-image: url(/client/f65de0c3b51e9ef31cf1.png);
}
.lesson-background .tree.right-2 {
  right: 10%;
  width: 54px;
  height: 94px;
  background-image: url(/client/8854a6c1399823e1a9b5.png);
}
@media (min-width: 576px) {
  .lesson-background .tree.extra,
  .lesson-background .cloud.extra {
    display: unset;
  }
  .lesson-background .tree.left-2 {
    left: 20%;
  }
  .lesson-background .tree.right-2 {
    right: 30%;
  }
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: normal;
  src: url(/client/ceb11275ab638627a643.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Medium';
  font-style: normal;
  font-weight: normal;
  src: url(/client/e2d60bc49517598c0ce8.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Bold';
  font-style: normal;
  font-weight: bold;
  src: url(/client/fa8441f345d83a0bc4ec.ttf) format(truetype);
}
.normal-text {
  font-family: monserratMedium, sans-serif;
}
.bold-text {
  font-weight: bolder;
  font-family: monserratBold, sans-serif;
}
.default-shadow-on-all-sides {
  box-shadow: 0 0 0.3rem rgba(0, 0, 0, 0.2), 0 0 0.3rem rgba(0, 0, 0, 0.2);
}
.not-selectable {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.top-nav-props {
  background: linear-gradient(#004284, #00366d);
  color: white;
}
.flat-button-props {
  display: block;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  background: #003367;
  color: white;
  padding: 10px 25px;
  border: 1px solid #003367;
  border-radius: 20px;
}
.flat-button-props .content {
  font-weight: 500;
  display: block;
}
.flat-button-props .icon {
  background-image: url(/client/4dfa12214025d650da8a.png);
  width: 7px;
  height: 13px;
  position: absolute;
  right: 6px;
  top: 16px;
}
.flat-button-props.round {
  border-radius: 50%;
}
.flat-button-props.small {
  padding: 5px;
}
.flat-button-props a {
  color: white;
  text-decoration: none;
}
@media screen and (min-width: 768px) {
  .flat-button-props {
    padding: 10px 35px;
  }
  .flat-button-props.small {
    padding: 5px;
  }
}
.action-button-props {
  display: block;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  padding: 10px 50px;
}
.action-button-props .content {
  font-weight: 500;
  display: block;
}
.action-button-props .icon {
  background-image: url(/client/4dfa12214025d650da8a.png);
  width: 7px;
  height: 13px;
  position: absolute;
  right: 6px;
  top: 16px;
}
.action-button-props[disabled],
.action-button-props.disabled {
  pointer-events: unset;
}
.nav-hamburger {
  border: none;
  outline: none;
  background: transparent;
}
.hovered-top-nav-link {
  color: white;
  text-decoration: underline;
}
.open-text-screen {
  overflow: hidden;
  padding: 2rem 0;
  flex-basis: 100%;
  display: grid;
  grid-auto-flow: row;
  align-content: center;
  gap: 5px;
}
.open-text-screen .question-bottom {
  display: none;
}
.open-text-screen.has-image {
  grid-template-rows: minmax(50%, auto) auto;
}
@media (orientation: landscape) {
  .open-text-screen {
    grid-auto-flow: column;
    justify-content: center;
  }
  .open-text-screen.has-image {
    grid-template-rows: unset;
  }
  .open-text-screen.has-image .question-top {
    display: none;
  }
  .open-text-screen.has-image .question-bottom {
    display: grid;
  }
  .open-text-screen.has-image .open-text-bottom {
    display: grid;
    justify-content: center;
    align-content: center;
    padding-left: 5px;
  }
  .open-text-screen.has-image.zoomed {
    grid-template-columns: initial;
    justify-content: unset;
    align-content: unset;
  }
  .open-text-screen.has-image.zoomed .open-text-bottom {
    display: none;
  }
}
.open-text-screen .open-text-top {
  display: grid;
}
.open-text-screen .open-text-top.has-image {
  grid-template-rows: minmax(50%, auto) -webkit-min-content;
  grid-template-rows: minmax(50%, auto) min-content;
}
.open-text-screen .question {
  height: unset;
  align-self: unset;
  flex: unset;
}
.open-text-screen .input-area {
  display: flex;
  margin-top: 0.5rem;
  padding: 0.5rem;
}
@media screen and (min-width: 576px) {
  .open-text-screen .input-area {
    padding: 0;
  }
}
.open-text-screen .input-area .input-wrapper {
  display: flex;
  flex-basis: 100%;
  padding: 1rem;
  background-color: white;
  border-radius: 0.3rem;
  border-width: 0.1rem;
  border-style: solid;
  border-color: white;
  box-shadow: 0 0 0.3rem rgba(0, 0, 0, 0.2), 0 0 0.3rem rgba(0, 0, 0, 0.2);
}
.open-text-screen .input-area .input-wrapper.correct {
  border-color: #24d875;
  box-shadow: 0 0 0.3rem #24d875, 0 0 0.3rem #24d875;
}
.open-text-screen .input-area .input-wrapper.incorrect {
  border-color: #e64c4c;
  box-shadow: 0 0 0.3rem #e64c4c, 0 0 0.3rem #e64c4c;
}
.open-text-screen .input-area .input-wrapper .next {
  width: 32px;
  height: 32px;
  padding: 5px;
  margin-left: 5px;
  outline: none;
  border-radius: 50% 50%;
  display: flex;
  justify-items: center;
  border: 3px solid white;
  background-color: #ff6600;
  cursor: pointer;
  animation-name: open-text-animation;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  align-self: center;
}
@keyframes open-text-animation {
  0% {
    box-shadow: 0 0 2px #ff6600, 0 0 2px #ff6600;
  }
  10% {
    box-shadow: 0 0 8px #ff6600, 0 0 8px #ff6600;
  }
  13% {
    box-shadow: 0 0 8px #ff6600, 0 0 8px #ff6600;
  }
  23% {
    box-shadow: 0 0 2px #ff6600, 0 0 2px #ff6600;
  }
  100% {
    box-shadow: 0 0 2px #ff6600, 0 0 2px #ff6600;
  }
}
.open-text-screen .input-area .input-wrapper .next[disabled] {
  cursor: not-allowed;
  background-color: #ccc;
  animation-name: none;
}
.open-text-screen .input-area .input-wrapper .next i {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(/client/ecfc979efc8a7f710084.png);
}
.open-text-screen .input-area .input-wrapper .input,
.open-text-screen .input-area .input-wrapper .input:disabled {
  color: #003163;
  background: white;
  flex-basis: 100%;
  outline: none;
  border: none;
  font-size: 1em;
  text-align: center;
  width: 100%;
}
@media screen and (min-width: 576px) {
  .open-text-screen .input-area .input-wrapper .input,
  .open-text-screen .input-area .input-wrapper .input:disabled {
    font-size: 1.5em;
  }
}
@media screen and (min-width: 768px) {
  .open-text-screen .input-area .input-wrapper .input,
  .open-text-screen .input-area .input-wrapper .input:disabled {
    font-size: 2em;
  }
}
.open-text-screen .correct-answer {
  background: white;
  border: 0.1rem solid #24d875;
  border-radius: 0.3rem;
  margin: 0.5em 0;
  padding: 1em 50px;
  text-align: center;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.jumping-lama {
  width: 124px;
  height: 168px;
  background-image: url(/client/332de0e27600a4b81c2f.gif);
  background-size: cover;
  background-repeat: no-repeat;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: normal;
  src: url(/client/ceb11275ab638627a643.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Medium';
  font-style: normal;
  font-weight: normal;
  src: url(/client/e2d60bc49517598c0ce8.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Bold';
  font-style: normal;
  font-weight: bold;
  src: url(/client/fa8441f345d83a0bc4ec.ttf) format(truetype);
}
.normal-text {
  font-family: monserratMedium, sans-serif;
}
.bold-text {
  font-weight: bolder;
  font-family: monserratBold, sans-serif;
}
.default-shadow-on-all-sides {
  box-shadow: 0 0 0.3rem rgba(0, 0, 0, 0.2), 0 0 0.3rem rgba(0, 0, 0, 0.2);
}
.not-selectable {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.top-nav-props {
  background: linear-gradient(#004284, #00366d);
  color: white;
}
.flat-button-props {
  display: block;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  background: #003367;
  color: white;
  padding: 10px 25px;
  border: 1px solid #003367;
  border-radius: 20px;
}
.flat-button-props .content {
  font-weight: 500;
  display: block;
}
.flat-button-props .icon {
  background-image: url(/client/4dfa12214025d650da8a.png);
  width: 7px;
  height: 13px;
  position: absolute;
  right: 6px;
  top: 16px;
}
.flat-button-props.round {
  border-radius: 50%;
}
.flat-button-props.small {
  padding: 5px;
}
.flat-button-props a {
  color: white;
  text-decoration: none;
}
@media screen and (min-width: 768px) {
  .flat-button-props {
    padding: 10px 35px;
  }
  .flat-button-props.small {
    padding: 5px;
  }
}
.action-button-props {
  display: block;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  padding: 10px 50px;
}
.action-button-props .content {
  font-weight: 500;
  display: block;
}
.action-button-props .icon {
  background-image: url(/client/4dfa12214025d650da8a.png);
  width: 7px;
  height: 13px;
  position: absolute;
  right: 6px;
  top: 16px;
}
.action-button-props[disabled],
.action-button-props.disabled {
  pointer-events: unset;
}
.nav-hamburger {
  border: none;
  outline: none;
  background: transparent;
}
.hovered-top-nav-link {
  color: white;
  text-decoration: underline;
}
.loading-frame {
  background: linear-gradient(to bottom, #0baaae, rgba(0, 209, 189, 0.5)), linear-gradient(45deg, #003367 5%, transparent);
  flex-basis: 100%;
  display: flex;
}
.loading-frame .foreground {
  z-index: 2;
  flex-basis: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
}
.loading-frame .text {
  color: white;
  text-align: center;
}
.loading-frame .text h1 {
  font-size: 2em;
}
.loading-frame .loading-lama {
  position: absolute;
  bottom: 0;
  right: 20%;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: normal;
  src: url(/client/ceb11275ab638627a643.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Medium';
  font-style: normal;
  font-weight: normal;
  src: url(/client/e2d60bc49517598c0ce8.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Bold';
  font-style: normal;
  font-weight: bold;
  src: url(/client/fa8441f345d83a0bc4ec.ttf) format(truetype);
}
.normal-text {
  font-family: monserratMedium, sans-serif;
}
.bold-text {
  font-weight: bolder;
  font-family: monserratBold, sans-serif;
}
.default-shadow-on-all-sides {
  box-shadow: 0 0 0.3rem rgba(0, 0, 0, 0.2), 0 0 0.3rem rgba(0, 0, 0, 0.2);
}
.not-selectable {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.top-nav-props {
  background: linear-gradient(#004284, #00366d);
  color: white;
}
.flat-button-props {
  display: block;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  background: #003367;
  color: white;
  padding: 10px 25px;
  border: 1px solid #003367;
  border-radius: 20px;
}
.flat-button-props .content {
  font-weight: 500;
  display: block;
}
.flat-button-props .icon {
  background-image: url(/client/4dfa12214025d650da8a.png);
  width: 7px;
  height: 13px;
  position: absolute;
  right: 6px;
  top: 16px;
}
.flat-button-props.round {
  border-radius: 50%;
}
.flat-button-props.small {
  padding: 5px;
}
.flat-button-props a {
  color: white;
  text-decoration: none;
}
@media screen and (min-width: 768px) {
  .flat-button-props {
    padding: 10px 35px;
  }
  .flat-button-props.small {
    padding: 5px;
  }
}
.action-button-props {
  display: block;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  padding: 10px 50px;
}
.action-button-props .content {
  font-weight: 500;
  display: block;
}
.action-button-props .icon {
  background-image: url(/client/4dfa12214025d650da8a.png);
  width: 7px;
  height: 13px;
  position: absolute;
  right: 6px;
  top: 16px;
}
.action-button-props[disabled],
.action-button-props.disabled {
  pointer-events: unset;
}
.nav-hamburger {
  border: none;
  outline: none;
  background: transparent;
}
.hovered-top-nav-link {
  color: white;
  text-decoration: underline;
}
.cookie-consent {
  position: absolute;
  width: 90%;
  background: #003062;
  color: white;
  border-radius: 10px;
  bottom: 30px;
  left: 5%;
  z-index: 99;
  padding: 10px;
}
.cookie-consent a {
  color: white;
}
.cookie-consent .cookie-consent-body {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.cookie-consent .close {
  position: absolute;
  top: -12px;
  right: -12px;
  color: hsl(24, 100%, 50%);
}

h1.dot,
h2.dot,
h3.dot,
h4.dot {
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}
h1.dot::before,
h2.dot::before,
h3.dot::before,
h4.dot::before {
  content: " ";
  display: inline-block;
  width: 0.3em;
  height: 0.3em;
  margin-left: -0.3em;
  margin-right: 0.3em;
  border-radius: 50%;
  background-color: white;
}
h1.underline,
h2.underline,
h3.underline,
h4.underline {
  text-align: center;
  text-underline-offset: 0.4em;
  -webkit-text-decoration: underline 0.15em #00d1bd;
          text-decoration: underline 0.15em #00d1bd;
  margin-bottom: 0.8em;
}
.history-page {
  display: block;
  flex-basis: 100%;
  padding-top: 1em;
  padding-left: 10px;
  padding-right: 10px;
}
@media screen and (min-width: 576px) {
  .history-page {
    padding-left: 0;
    padding-right: 0;
  }
}


.percentage-list-item {
  background-color: white;
  padding: 0.5em;
  border-top-left-radius: 0.5em;
  border-top-right-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
  position: relative;
}
.percentage-list-item a {
  text-decoration: unset;
  color: unset;
}
.percentage-list-item .item-content {
  display: flex;
  justify-content: space-between;
}
.percentage-list-item .item-content:not(.not-expandable) {
  cursor: pointer;
}
.percentage-list-item .addons {
  display: grid;
  grid-auto-flow: column;
  gap: 0.25em;
}
.percentage-list-item .success-rate {
  color: #ff6600;
}
.percentage-list-item .progress-line {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 0.3em;
  border-top-right-radius: 0.25em;
  border-bottom-right-radius: 0.25em;
  background-color: #ff6600;
}
.percentage-list-item.perfect .success-rate {
  color: #35a900;
}
.percentage-list-item.perfect .progress-line {
  background-color: #35a900;
}

.percentage-list {
  display: grid;
  grid-auto-flow: row;
  gap: 0.5em;
  margin-bottom: 1em;
  padding-left: 0;
  list-style-type: none;
}
@media screen and (min-width: 992px) {
  .percentage-list {
    grid-auto-flow: row;
    gap: unset;
    grid-column-gap: 2em;
    grid-row-gap: 0.5em;
    grid-template-columns: 1fr 1fr;
  }
}

.login-component-content {
  display: grid;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: normal;
  src: url(/client/ceb11275ab638627a643.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Medium';
  font-style: normal;
  font-weight: normal;
  src: url(/client/e2d60bc49517598c0ce8.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Bold';
  font-style: normal;
  font-weight: bold;
  src: url(/client/fa8441f345d83a0bc4ec.ttf) format(truetype);
}
a.btn.btn-action,
.btn.btn-action {
  font-family: 'Montserrat Bold', sans-serif;
  font-size: 1em;
  text-transform: uppercase;
}
a.btn.btn-action:not(.no-border),
.btn.btn-action:not(.no-border) {
  border-width: 2px;
  border-style: solid;
  border-color: white;
}
a.btn.btn-action {
  text-decoration: none;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: normal;
  src: url(/client/ceb11275ab638627a643.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Medium';
  font-style: normal;
  font-weight: normal;
  src: url(/client/e2d60bc49517598c0ce8.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Bold';
  font-style: normal;
  font-weight: bold;
  src: url(/client/fa8441f345d83a0bc4ec.ttf) format(truetype);
}
.normal-text {
  font-family: monserratMedium, sans-serif;
}
.bold-text {
  font-weight: bolder;
  font-family: monserratBold, sans-serif;
}
.default-shadow-on-all-sides {
  box-shadow: 0 0 0.3rem rgba(0, 0, 0, 0.2), 0 0 0.3rem rgba(0, 0, 0, 0.2);
}
.not-selectable {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.top-nav-props {
  background: linear-gradient(#004284, #00366d);
  color: white;
}
.flat-button-props {
  display: block;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  background: #003367;
  color: white;
  padding: 10px 25px;
  border: 1px solid #003367;
  border-radius: 20px;
}
.flat-button-props .content {
  font-weight: 500;
  display: block;
}
.flat-button-props .icon {
  background-image: url(/client/4dfa12214025d650da8a.png);
  width: 7px;
  height: 13px;
  position: absolute;
  right: 6px;
  top: 16px;
}
.flat-button-props.round {
  border-radius: 50%;
}
.flat-button-props.small {
  padding: 5px;
}
.flat-button-props a {
  color: white;
  text-decoration: none;
}
@media screen and (min-width: 768px) {
  .flat-button-props {
    padding: 10px 35px;
  }
  .flat-button-props.small {
    padding: 5px;
  }
}
.action-button-props {
  display: block;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  padding: 10px 50px;
}
.action-button-props .content {
  font-weight: 500;
  display: block;
}
.action-button-props .icon {
  background-image: url(/client/4dfa12214025d650da8a.png);
  width: 7px;
  height: 13px;
  position: absolute;
  right: 6px;
  top: 16px;
}
.action-button-props[disabled],
.action-button-props.disabled {
  pointer-events: unset;
}
.nav-hamburger {
  border: none;
  outline: none;
  background: transparent;
}
.hovered-top-nav-link {
  color: white;
  text-decoration: underline;
}
.action-input-container {
  align-self: center;
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
}
.action-input-container button {
  margin-top: 8px;
}
.action-input-container .error,
.action-input-container .info {
  margin-top: 1em;
  font-weight: bold;
  font-family: 'Montserrat Bold', sans-serif;
}
.action-input-container .error {
  color: hsl(24, 100%, 20%);
}
.action-input-container .info {
  color: white;
  background-color: #003062;
  padding: 0.5em;
  border-radius: 0.3em;
}
.action-input-container .info a,
.action-input-container .info a:visited,
.action-input-container .info a:focus {
  color: white;
}
.action-input {
  display: flex;
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.action-input .label {
  color: white;
  background: #1b5dac;
  border: 3px solid #14decb;
  border-radius: 10px;
  padding: 10px 20px;
  text-align: center;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
  font-family: 'Montserrat Bold', sans-serif;
  font-size: 14px;
  z-index: 1;
}
.action-input .input-outer {
  border: 3px solid #14decb;
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.2);
  border-radius: 35px;
  margin-top: -6px;
  padding: 7px;
}
.action-input .input-outer .input-inner {
  border: 5px solid #1b5dac;
  border-radius: 35px;
}
.action-input .input-outer input[type=number]::-webkit-inner-spin-button,
.action-input .input-outer input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.action-input .input-outer input,
.action-input .input-outer input:focus {
  outline: none;
  border: none;
  border-radius: 25px;
  padding: 10px 20px;
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
  margin: 0;
  color: #1b5dac;
  text-align: center;
  font-weight: bold;
  font-family: 'Montserrat Medium', sans-serif;
  font-size: 18px;
}
.action-input .input-outer input,
.action-input .input-outer input:focus,
.action-input .input-outer input.small,
.action-input .input-outer input.small:focus {
  width: 150px;
}
.action-input .input-outer input.big,
.action-input .input-outer input.big:focus {
  width: 250px;
}

.student-not-playing-layout {
  flex-basis: 100%;
  display: grid;
  grid-template-rows: -webkit-min-content auto;
  grid-template-rows: min-content auto;
  position: relative;
}
.student-not-playing-layout .error {
  margin-bottom: 0.5rem;
}
.student-not-playing-layout .logo {
  --logo-width: 86px;
  --logo-height: 40px;
  width: var(--logo-width);
  height: var(--logo-height);
  top: 0;
  left: calc((100% - var(--logo-width)) / 2);
  z-index: 101;
  background-image: url(/client/87ca7d143cc93f46dceb.png);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: contain;
  align-self: center;
  position: absolute;
}
@media only screen and (min-width: 576px) {
  .student-not-playing-layout .logo {
    --logo-width: 129px;
    --logo-height: 60px;
  }
}
@media only screen and (min-width: 768px) {
  .student-not-playing-layout .logo {
    --logo-width: 258px;
    --logo-height: 121px;
    z-index: initial;
    top: 60px;
    padding-bottom: 100px;
  }
}
.student-not-playing-layout .login-user-info {
  display: grid;
  grid-auto-flow: column;
  gap: 0.3em;
  align-items: center;
  justify-content: flex-end;
  margin-right: 5px;
}
.student-not-playing-layout .login-user-info .full-name {
  display: none;
}
@media (min-width: 768px) {
  .student-not-playing-layout .login-user-info .full-name {
    display: initial;
  }
}
.student-not-playing-layout .not-logged-in-content {
  position: relative;
  display: grid;
}

.flag {
  display: block;
  width: 25px;
  height: 25px;
  background-size: 25px 25px;
  background-repeat: no-repeat;
}
.flag.bg,
.flag.bg-BG {
  background-image: url(/client/33ebe637e9f046276567.svg);
}
.flag.en,
.flag.en-US {
  background-image: url(/client/fd46970f89e3fbca473f.svg);
}

.profile-picture {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 50%;
  border-width: 0.3em;
  border-color: white;
  border-style: solid;
  overflow: hidden;
}
.profile-picture.size-normal {
  width: 128px;
  height: 128px;
}
.profile-picture.size-menu {
  width: 25px;
  height: 25px;
  border-width: 2px;
}

.not-playing-background {
  --background-gradient: linear-gradient(#1b5dac, #1b5dac, #1b5dac, #1b5dac, #0f8bb0);
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.not-playing-background .letter {
  width: 100%;
  height: 100%;
  position: absolute;
  background-image: url(/client/8a7c59d8e7d3ac4005bd.png), var(--background-gradient);
  background-repeat: no-repeat;
  background-size: cover, auto;
  background-position-x: center;
  background-position-y: top;
}
@media (min-width: 992px) {
  .not-playing-background .letter {
    background-image: url(/client/59058f64a71afb6fc534.png), var(--background-gradient);
  }
}
.not-playing-background * {
  background-repeat: no-repeat;
}
.not-playing-background .boy,
.not-playing-background .girl {
  position: relative;
  background-size: contain;
  width: var(--img-width);
  height: calc(var(--img-width) / var(--img-aspect-ratio));
}
.not-playing-background .boy,
.not-playing-background .girl {
  position: absolute;
}
.not-playing-background .boy {
  --img-width: 150px;
  --img-aspect-ratio: 0.82262211;
  background-image: url(/client/8644772965d51bafe0b7.png);
  top: 50px;
  left: 10%;
}
@media (min-width: 576px) {
  .not-playing-background .boy {
    left: 15%;
  }
}
@media (min-width: 768px) {
  .not-playing-background .boy {
    top: 10%;
    left: 5%;
    --img-width: 250px;
  }
}
@media (min-width: 992px) {
  .not-playing-background .boy {
    left: 10%;
    --img-width: 320px;
  }
}
@media (min-width: 1200px) {
  .not-playing-background .boy {
    left: 20%;
  }
}
.not-playing-background .girl {
  --img-width: 150px;
  --img-aspect-ratio: 0.76699029;
  background-image: url(/client/b67879c2f68283f39e79.png);
  top: 50px;
  right: 10%;
}
@media (min-width: 576px) {
  .not-playing-background .girl {
    right: 15%;
  }
}
@media (min-width: 768px) {
  .not-playing-background .girl {
    top: 10%;
    right: 5%;
    --img-width: 237px;
  }
}
@media (min-width: 992px) {
  .not-playing-background .girl {
    right: 10%;
  }
}
@media (min-width: 1200px) {
  .not-playing-background .girl {
    right: 20%;
  }
}

.feedback-container {
  padding-top: 2rem;
  margin-bottom: 1rem;
  position: relative;
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: normal;
  src: url(/client/ceb11275ab638627a643.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Medium';
  font-style: normal;
  font-weight: normal;
  src: url(/client/e2d60bc49517598c0ce8.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Bold';
  font-style: normal;
  font-weight: bold;
  src: url(/client/fa8441f345d83a0bc4ec.ttf) format(truetype);
}
.normal-text {
  font-family: monserratMedium, sans-serif;
}
.bold-text {
  font-weight: bolder;
  font-family: monserratBold, sans-serif;
}
.default-shadow-on-all-sides {
  box-shadow: 0 0 0.3rem rgba(0, 0, 0, 0.2), 0 0 0.3rem rgba(0, 0, 0, 0.2);
}
.not-selectable {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.top-nav-props {
  background: linear-gradient(#004284, #00366d);
  color: white;
}
.flat-button-props {
  display: block;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  background: #003367;
  color: white;
  padding: 10px 25px;
  border: 1px solid #003367;
  border-radius: 20px;
}
.flat-button-props .content {
  font-weight: 500;
  display: block;
}
.flat-button-props .icon {
  background-image: url(/client/4dfa12214025d650da8a.png);
  width: 7px;
  height: 13px;
  position: absolute;
  right: 6px;
  top: 16px;
}
.flat-button-props.round {
  border-radius: 50%;
}
.flat-button-props.small {
  padding: 5px;
}
.flat-button-props a {
  color: white;
  text-decoration: none;
}
@media screen and (min-width: 768px) {
  .flat-button-props {
    padding: 10px 35px;
  }
  .flat-button-props.small {
    padding: 5px;
  }
}
.action-button-props {
  display: block;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  padding: 10px 50px;
}
.action-button-props .content {
  font-weight: 500;
  display: block;
}
.action-button-props .icon {
  background-image: url(/client/4dfa12214025d650da8a.png);
  width: 7px;
  height: 13px;
  position: absolute;
  right: 6px;
  top: 16px;
}
.action-button-props[disabled],
.action-button-props.disabled {
  pointer-events: unset;
}
.nav-hamburger {
  border: none;
  outline: none;
  background: transparent;
}
.hovered-top-nav-link {
  color: white;
  text-decoration: underline;
}
.feedback-headline {
  color: white;
  font-size: 2.5em;
  text-decoration: underline;
  text-transform: uppercase;
  transform: rotateZ(-10grad);
  text-align: center;
}
@media screen and (min-width: 350px) {
  .feedback-headline {
    font-size: 3.5em;
  }
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: normal;
  src: url(/client/ceb11275ab638627a643.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Medium';
  font-style: normal;
  font-weight: normal;
  src: url(/client/e2d60bc49517598c0ce8.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Bold';
  font-style: normal;
  font-weight: bold;
  src: url(/client/fa8441f345d83a0bc4ec.ttf) format(truetype);
}
.normal-text {
  font-family: monserratMedium, sans-serif;
}
.bold-text {
  font-weight: bolder;
  font-family: monserratBold, sans-serif;
}
.default-shadow-on-all-sides {
  box-shadow: 0 0 0.3rem rgba(0, 0, 0, 0.2), 0 0 0.3rem rgba(0, 0, 0, 0.2);
}
.not-selectable {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.top-nav-props {
  background: linear-gradient(#004284, #00366d);
  color: white;
}
.flat-button-props {
  display: block;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  background: #003367;
  color: white;
  padding: 10px 25px;
  border: 1px solid #003367;
  border-radius: 20px;
}
.flat-button-props .content {
  font-weight: 500;
  display: block;
}
.flat-button-props .icon {
  background-image: url(/client/4dfa12214025d650da8a.png);
  width: 7px;
  height: 13px;
  position: absolute;
  right: 6px;
  top: 16px;
}
.flat-button-props.round {
  border-radius: 50%;
}
.flat-button-props.small {
  padding: 5px;
}
.flat-button-props a {
  color: white;
  text-decoration: none;
}
@media screen and (min-width: 768px) {
  .flat-button-props {
    padding: 10px 35px;
  }
  .flat-button-props.small {
    padding: 5px;
  }
}
.action-button-props {
  display: block;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  padding: 10px 50px;
}
.action-button-props .content {
  font-weight: 500;
  display: block;
}
.action-button-props .icon {
  background-image: url(/client/4dfa12214025d650da8a.png);
  width: 7px;
  height: 13px;
  position: absolute;
  right: 6px;
  top: 16px;
}
.action-button-props[disabled],
.action-button-props.disabled {
  pointer-events: unset;
}
.nav-hamburger {
  border: none;
  outline: none;
  background: transparent;
}
.hovered-top-nav-link {
  color: white;
  text-decoration: underline;
}
.feedback-points {
  border-style: solid;
  border-color: white;
  background: #003062;
  color: white;
  border-width: 0.2rem;
  border-radius: 50%;
  font-size: 1.2em;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-left: 5rem;
}
@media screen and (min-width: 300px) {
  .feedback-points {
    margin-left: 15rem;
    margin-top: -0.5rem;
  }
}
.feedback-points.correct {
  padding: 0.3rem;
  width: 3rem;
  height: 3rem;
}
.feedback-points.incorrect {
  padding: 0.3rem;
  width: 2rem;
  height: 2rem;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: normal;
  src: url(/client/ceb11275ab638627a643.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Medium';
  font-style: normal;
  font-weight: normal;
  src: url(/client/e2d60bc49517598c0ce8.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Bold';
  font-style: normal;
  font-weight: bold;
  src: url(/client/fa8441f345d83a0bc4ec.ttf) format(truetype);
}
.normal-text {
  font-family: monserratMedium, sans-serif;
}
.bold-text {
  font-weight: bolder;
  font-family: monserratBold, sans-serif;
}
.default-shadow-on-all-sides {
  box-shadow: 0 0 0.3rem rgba(0, 0, 0, 0.2), 0 0 0.3rem rgba(0, 0, 0, 0.2);
}
.not-selectable {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.top-nav-props {
  background: linear-gradient(#004284, #00366d);
  color: white;
}
.flat-button-props {
  display: block;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  background: #003367;
  color: white;
  padding: 10px 25px;
  border: 1px solid #003367;
  border-radius: 20px;
}
.flat-button-props .content {
  font-weight: 500;
  display: block;
}
.flat-button-props .icon {
  background-image: url(/client/4dfa12214025d650da8a.png);
  width: 7px;
  height: 13px;
  position: absolute;
  right: 6px;
  top: 16px;
}
.flat-button-props.round {
  border-radius: 50%;
}
.flat-button-props.small {
  padding: 5px;
}
.flat-button-props a {
  color: white;
  text-decoration: none;
}
@media screen and (min-width: 768px) {
  .flat-button-props {
    padding: 10px 35px;
  }
  .flat-button-props.small {
    padding: 5px;
  }
}
.action-button-props {
  display: block;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  padding: 10px 50px;
}
.action-button-props .content {
  font-weight: 500;
  display: block;
}
.action-button-props .icon {
  background-image: url(/client/4dfa12214025d650da8a.png);
  width: 7px;
  height: 13px;
  position: absolute;
  right: 6px;
  top: 16px;
}
.action-button-props[disabled],
.action-button-props.disabled {
  pointer-events: unset;
}
.nav-hamburger {
  border: none;
  outline: none;
  background: transparent;
}
.hovered-top-nav-link {
  color: white;
  text-decoration: underline;
}
.meme-frame {
  flex-basis: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
  flex-direction: column;
}
.meme-frame.correct {
  background: linear-gradient(to bottom, #19a260 70%, #14824d);
}
.meme-frame.incorrect {
  background: linear-gradient(to bottom, #e64c4c 70%, #b93d3d);
}
.meme-frame .meme-container {
  flex-basis: 100%;
  overflow: hidden;
  text-align: center;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  z-index: 1;
}
.meme-frame .meme-container img {
  border-style: solid;
  border-color: white;
  border-width: 0.2rem;
  border-radius: 0.5rem;
  max-width: 95vw;
  max-height: 80vh;
  display: inline-block;
}

.leaderboard {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: stretch;
  padding-left: 1em;
  padding-right: 1em;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: normal;
  src: url(/client/ceb11275ab638627a643.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Medium';
  font-style: normal;
  font-weight: normal;
  src: url(/client/e2d60bc49517598c0ce8.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Bold';
  font-style: normal;
  font-weight: bold;
  src: url(/client/fa8441f345d83a0bc4ec.ttf) format(truetype);
}
.normal-text {
  font-family: monserratMedium, sans-serif;
}
.bold-text {
  font-weight: bolder;
  font-family: monserratBold, sans-serif;
}
.default-shadow-on-all-sides {
  box-shadow: 0 0 0.3rem rgba(0, 0, 0, 0.2), 0 0 0.3rem rgba(0, 0, 0, 0.2);
}
.not-selectable {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.top-nav-props {
  background: linear-gradient(#004284, #00366d);
  color: white;
}
.flat-button-props {
  display: block;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  background: #003367;
  color: white;
  padding: 10px 25px;
  border: 1px solid #003367;
  border-radius: 20px;
}
.flat-button-props .content {
  font-weight: 500;
  display: block;
}
.flat-button-props .icon {
  background-image: url(/client/4dfa12214025d650da8a.png);
  width: 7px;
  height: 13px;
  position: absolute;
  right: 6px;
  top: 16px;
}
.flat-button-props.round {
  border-radius: 50%;
}
.flat-button-props.small {
  padding: 5px;
}
.flat-button-props a {
  color: white;
  text-decoration: none;
}
@media screen and (min-width: 768px) {
  .flat-button-props {
    padding: 10px 35px;
  }
  .flat-button-props.small {
    padding: 5px;
  }
}
.action-button-props {
  display: block;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  padding: 10px 50px;
}
.action-button-props .content {
  font-weight: 500;
  display: block;
}
.action-button-props .icon {
  background-image: url(/client/4dfa12214025d650da8a.png);
  width: 7px;
  height: 13px;
  position: absolute;
  right: 6px;
  top: 16px;
}
.action-button-props[disabled],
.action-button-props.disabled {
  pointer-events: unset;
}
.nav-hamburger {
  border: none;
  outline: none;
  background: transparent;
}
.hovered-top-nav-link {
  color: white;
  text-decoration: underline;
}
.leaderboard-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  position: relative;
  margin-top: 0.1em;
  margin-bottom: 0.1em;
}
.leaderboard-item .name {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.leaderboard-item.selected {
  border: 0.1em solid white;
  border-radius: 2em;
  padding: 0.4em 0.4em;
  background: linear-gradient(to bottom, #00478f, #003871);
}
.leaderboard-item.selected .place {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  border: 0.15em solid white;
}
.leaderboard-item.selected.correct .place {
  background: #19a260;
}
.leaderboard-item.selected.incorrect .place {
  background: #e64c4c;
}
@media screen and (min-width: 300px) {
  .leaderboard-item {
    font-size: 1.2em;
  }
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: normal;
  src: url(/client/ceb11275ab638627a643.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Medium';
  font-style: normal;
  font-weight: normal;
  src: url(/client/e2d60bc49517598c0ce8.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Bold';
  font-style: normal;
  font-weight: bold;
  src: url(/client/fa8441f345d83a0bc4ec.ttf) format(truetype);
}
.normal-text {
  font-family: monserratMedium, sans-serif;
}
.bold-text {
  font-weight: bolder;
  font-family: monserratBold, sans-serif;
}
.default-shadow-on-all-sides {
  box-shadow: 0 0 0.3rem rgba(0, 0, 0, 0.2), 0 0 0.3rem rgba(0, 0, 0, 0.2);
}
.not-selectable {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.top-nav-props {
  background: linear-gradient(#004284, #00366d);
  color: white;
}
.flat-button-props {
  display: block;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  background: #003367;
  color: white;
  padding: 10px 25px;
  border: 1px solid #003367;
  border-radius: 20px;
}
.flat-button-props .content {
  font-weight: 500;
  display: block;
}
.flat-button-props .icon {
  background-image: url(/client/4dfa12214025d650da8a.png);
  width: 7px;
  height: 13px;
  position: absolute;
  right: 6px;
  top: 16px;
}
.flat-button-props.round {
  border-radius: 50%;
}
.flat-button-props.small {
  padding: 5px;
}
.flat-button-props a {
  color: white;
  text-decoration: none;
}
@media screen and (min-width: 768px) {
  .flat-button-props {
    padding: 10px 35px;
  }
  .flat-button-props.small {
    padding: 5px;
  }
}
.action-button-props {
  display: block;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  padding: 10px 50px;
}
.action-button-props .content {
  font-weight: 500;
  display: block;
}
.action-button-props .icon {
  background-image: url(/client/4dfa12214025d650da8a.png);
  width: 7px;
  height: 13px;
  position: absolute;
  right: 6px;
  top: 16px;
}
.action-button-props[disabled],
.action-button-props.disabled {
  pointer-events: unset;
}
.nav-hamburger {
  border: none;
  outline: none;
  background: transparent;
}
.hovered-top-nav-link {
  color: white;
  text-decoration: underline;
}
.leaderboard-frame {
  flex-basis: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
  flex-direction: column;
}
.leaderboard-frame.correct {
  background: linear-gradient(to bottom, #19a260 70%, #14824d);
}
.leaderboard-frame.incorrect {
  background: linear-gradient(to bottom, #e64c4c 70%, #b93d3d);
}
.leaderboard-frame .rest {
  z-index: 1;
  flex-basis: 100%;
  overflow: hidden;
}
.leaderboard-frame .feedback-headline {
  font-size: 1.5em;
}
@media screen and (min-height: 450px) {
  .leaderboard-frame .feedback-headline {
    font-size: 3em;
  }
}
@media screen and (min-height: 600px) {
  .leaderboard-frame .feedback-headline {
    font-size: 3.5em;
  }
}
.leaderboard-frame .leaderboard-container {
  display: grid;
  grid-auto-flow: row;
  flex-basis: 100%;
  grid-template-rows: 100% 0px;
  overflow: hidden;
}
@media screen and (min-height: 450px) {
  .leaderboard-frame .leaderboard-container {
    grid-template-rows: auto 0px;
  }
}
@media screen and (min-height: 600px) {
  .leaderboard-frame .leaderboard-container {
    grid-template-rows: auto 0px;
  }
}
.leaderboard-frame .leaderboard-container .leaderboard:not(.scrolling) {
  overflow: auto;
}
.leaderboard-frame .leaderboard-container .leaderboard.scrolling {
  overflow: auto;
}
.leaderboard-frame .leaderboard-container .leaderboard .vert-center-container {
  margin: auto 0;
}
.leaderboard-frame .leaderboard-container .leaderboard-bottom {
  display: flex;
  flex-direction: column;
}
.leaderboard-frame .leaderboard-container .leaderboard-bottom img {
  display: none;
  visibility: hidden;
  width: auto;
  max-height: 100%;
}
@media screen and (min-height: 450px) {
  .leaderboard-frame .leaderboard-container .leaderboard-bottom img {
    display: unset;
    visibility: unset;
    align-self: flex-end;
    padding-right: min(20%, 100px);
  }
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: normal;
  src: url(/client/ceb11275ab638627a643.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Medium';
  font-style: normal;
  font-weight: normal;
  src: url(/client/e2d60bc49517598c0ce8.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Bold';
  font-style: normal;
  font-weight: bold;
  src: url(/client/fa8441f345d83a0bc4ec.ttf) format(truetype);
}
.normal-text {
  font-family: monserratMedium, sans-serif;
}
.bold-text {
  font-weight: bolder;
  font-family: monserratBold, sans-serif;
}
.default-shadow-on-all-sides {
  box-shadow: 0 0 0.3rem rgba(0, 0, 0, 0.2), 0 0 0.3rem rgba(0, 0, 0, 0.2);
}
.not-selectable {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.top-nav-props {
  background: linear-gradient(#004284, #00366d);
  color: white;
}
.flat-button-props {
  display: block;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  background: #003367;
  color: white;
  padding: 10px 25px;
  border: 1px solid #003367;
  border-radius: 20px;
}
.flat-button-props .content {
  font-weight: 500;
  display: block;
}
.flat-button-props .icon {
  background-image: url(/client/4dfa12214025d650da8a.png);
  width: 7px;
  height: 13px;
  position: absolute;
  right: 6px;
  top: 16px;
}
.flat-button-props.round {
  border-radius: 50%;
}
.flat-button-props.small {
  padding: 5px;
}
.flat-button-props a {
  color: white;
  text-decoration: none;
}
@media screen and (min-width: 768px) {
  .flat-button-props {
    padding: 10px 35px;
  }
  .flat-button-props.small {
    padding: 5px;
  }
}
.action-button-props {
  display: block;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  padding: 10px 50px;
}
.action-button-props .content {
  font-weight: 500;
  display: block;
}
.action-button-props .icon {
  background-image: url(/client/4dfa12214025d650da8a.png);
  width: 7px;
  height: 13px;
  position: absolute;
  right: 6px;
  top: 16px;
}
.action-button-props[disabled],
.action-button-props.disabled {
  pointer-events: unset;
}
.nav-hamburger {
  border: none;
  outline: none;
  background: transparent;
}
.hovered-top-nav-link {
  color: white;
  text-decoration: underline;
}
.lobby-frame {
  --lobby-bottom-color: #f8f8f8;
  flex-basis: 100%;
  display: grid;
  grid-auto-flow: row;
  grid-auto-rows: -webkit-min-content auto;
  grid-auto-rows: min-content auto;
  max-width: 100%;
  overflow-y: auto;
}
.lobby-frame.zoomed {
  background: var(--lobby-bottom-color);
  cursor: zoom-out;
  grid-template-columns: 80%;
  grid-template-rows: -webkit-min-content 80%;
  grid-template-rows: min-content 80%;
  align-content: center;
  justify-content: center;
  gap: 1em;
  text-align: center;
  position: relative;
}
.lobby-frame.zoomed button {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 2rem;
  height: 2rem;
  font-size: 200%;
  display: grid;
  justify-content: center;
  align-content: center;
}
@media (min-width: 768px) {
  .lobby-frame.zoomed button {
    width: 3rem;
    height: 3rem;
    font-size: 300%;
  }
}
.lobby-frame .qr-image-zoomed {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  cursor: zoom-out;
}
.lobby-frame p {
  margin-bottom: 0;
}
.lobby-frame .card {
  padding: 0.2em 1em;
}
@media screen and (min-width: 992px) and (min-height: 600px) {
  .lobby-frame .card {
    padding: 0.5em 1em;
  }
}
.lobby-frame .lobby-top,
.lobby-frame .lobby-bottom {
  display: flex;
}
.lobby-frame .lobby-top {
  background: #00d0bc;
  justify-content: center;
}
.lobby-frame .lobby-top.pager {
  padding: 1em 1em 65.5px 1em;
}
.lobby-frame .lobby-top.counter {
  padding: 1em 1em 2.5rem 1em;
}
@media (min-width: 992px) and (min-height: 600px) {
  .lobby-frame .lobby-top.counter {
    padding: 1em 1em 3rem 1em;
  }
}
.lobby-frame .lobby-bottom {
  flex-basis: 100%;
  display: flex;
  background: var(--lobby-bottom-color);
  position: relative;
}
.lobby-frame .lobby-bottom.pager {
  padding: 65.5px 1em 1em 1em;
}
.lobby-frame .lobby-bottom.counter {
  padding: 2.5rem 1em 1em 1em;
}
@media (min-width: 992px) and (min-height: 600px) {
  .lobby-frame .lobby-bottom.counter {
    padding: 3rem 1em 1em 1em;
  }
}
.lobby-frame .lobby-bottom .pager-container {
  position: absolute;
  top: -65.5px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
}
.lobby-frame .lobby-bottom .count-container {
  position: absolute;
  top: -2.25rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
}
.lobby-frame .lobby-bottom .count-container .lobby-counter {
  width: 4.5rem;
  height: 4.5rem;
  font-weight: bolder;
  font-family: monserratBold, sans-serif;
  font-size: 2em;
}
.lobby-frame .lobby-bottom .count-label {
  text-align: center;
  margin-bottom: 0.2em;
  text-transform: uppercase;
  font-weight: bolder;
  font-family: monserratBold, sans-serif;
}
@media (min-height: 600px) {
  .lobby-frame .lobby-bottom .count-label {
    margin-top: 1em;
  }
}
.lobby-frame .lobby-bottom.counter .count-label {
  margin-top: 0em;
}
@media (min-height: 600px) {
  .lobby-frame .lobby-bottom.counter .count-label {
    margin-top: 0.5em;
  }
}
.lobby-frame .lobby-bottom.pager .count-label {
  margin-top: -1em;
}
.lobby-frame .lobby-bottom .students-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}
.lobby-frame .lobby-bottom .students-container .student {
  margin-bottom: 0.5em;
  margin-right: 0.5em;
}
.lobby-frame .lobby-bottom .students-container .student:last-child {
  margin-right: 0;
}
.lobby-frame .lobby-frame-content {
  display: flex;
  flex-direction: column;
}
.lobby-frame .lobby-frame-content .error {
  color: white;
  text-align: center;
}
.lobby-frame .lobby-frame-content .lobby-lesson-info {
  display: grid;
}
@media (orientation: landscape) {
  .lobby-frame .lobby-frame-content .lobby-lesson-info {
    grid-template-columns: 0 auto -webkit-min-content;
    grid-template-columns: 0 auto min-content;
    grid-template-rows: 100%;
  }
}
@media (orientation: landscape) and (min-width: 576px) {
  .lobby-frame .lobby-frame-content .lobby-lesson-info {
    grid-template-columns: 8em auto -webkit-min-content;
    grid-template-columns: 8em auto min-content;
  }
}
@media (orientation: portrait) {
  .lobby-frame .lobby-frame-content .lobby-lesson-info {
    grid-auto-flow: row;
    justify-items: center;
  }
}
.lobby-frame .lobby-frame-content .lobby-lesson-info .start {
  margin-top: 0.3em;
}
.lobby-frame .lobby-frame-content .lobby-lesson-info .lesson-name-container {
  display: grid;
  grid-auto-flow: row;
  justify-items: center;
  gap: 0.2em;
}
@media (orientation: landscape) and (min-width: 768px) {
  .lobby-frame .lobby-frame-content .lobby-lesson-info .lesson-name-container {
    gap: 0.5em;
  }
}
.lobby-frame .lobby-frame-content .lobby-lesson-info .lesson-image-container {
  content: ' ';
}
@media screen and (min-width: 768px) {
  .lobby-frame .lobby-frame-content .lobby-lesson-info .lesson-image-container {
    visibility: visible;
    display: flex;
    width: 8em;
  }
}
.lobby-frame .lobby-frame-content .lobby-lesson-info .lesson-image {
  display: none;
}
@media screen and (min-width: 768px) {
  .lobby-frame .lobby-frame-content .lobby-lesson-info .lesson-image {
    display: initial;
    max-width: 8em;
  }
}
.lobby-frame .lobby-frame-content .lobby-lesson-info .qr-image {
  margin-top: 0.3em;
  cursor: zoom-in;
}
@media (orientation: landscape) and (max-height: 600px) {
  .lobby-frame .lobby-frame-content .lobby-lesson-info .qr-image {
    justify-self: flex-end;
  }
}
@media screen and (min-width: 992px) {
  .lobby-frame .lobby-frame-content .lobby-lesson-info .qr-image {
    margin-top: 0;
  }
}
.lobby-frame .lobby-frame-content .lobby-lesson-info .text {
  text-transform: uppercase;
  margin-bottom: 0em;
  word-wrap: break-word;
}
@media screen and (min-width: 992px) {
  .lobby-frame .lobby-frame-content .lobby-lesson-info .text {
    margin-bottom: 0.5em;
  }
}
.lobby-frame .lobby-frame-content .lobby-lesson-info .label {
  font-weight: bolder;
  font-family: monserratBold, sans-serif;
  font-size: 0.8em;
}
.lobby-frame .lobby-frame-content .lobby-lesson-info .header.lesson {
  font-size: 1.2em;
  -webkit-text-decoration-line: underline;
          text-decoration-line: underline;
  -webkit-text-decoration-color: #00d0bc;
          text-decoration-color: #00d0bc;
  text-decoration-thickness: 0.2em;
  text-underline-offset: 0.2em;
  text-align: center;
}
@media (orientation: portrait) {
  .lobby-frame .lobby-frame-content .lobby-lesson-info .header.lesson {
    margin-top: -0.2rem;
  }
}
.lobby-frame .lobby-frame-content .lobby-lesson-info .start {
  font-size: 0.8em;
}
.lobby-frame .lobby-frame-content .lobby-session-info {
  margin-left: 0.5em;
  margin-right: 0.5em;
  display: grid;
}
@media (orientation: landscape) {
  .lobby-frame .lobby-frame-content .lobby-session-info {
    grid-auto-flow: column;
    justify-items: center;
    align-items: center;
    justify-content: center;
    gap: 0.3em;
  }
}
@media (orientation: portrait) {
  .lobby-frame .lobby-frame-content .lobby-session-info {
    grid-auto-flow: row;
    justify-items: center;
  }
}
.lobby-frame .lobby-frame-content .lobby-session-info .instructions {
  color: #00ccb8;
}
.lobby-frame .lobby-frame-content .lobby-session-info .address,
.lobby-frame .lobby-frame-content .lobby-session-info .code,
.lobby-frame .lobby-frame-content .lobby-session-info .address a {
  color: white;
  text-decoration: none;
  font-weight: bolder;
  font-family: monserratBold, sans-serif;
}
.lobby-frame .lobby-frame-content .lobby-session-info .address {
  font-size: 1.2em;
  word-break: break-all;
}
.lobby-frame .lobby-frame-content .lobby-session-info .code {
  font-size: 2em;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: normal;
  src: url(/client/ceb11275ab638627a643.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Medium';
  font-style: normal;
  font-weight: normal;
  src: url(/client/e2d60bc49517598c0ce8.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Bold';
  font-style: normal;
  font-weight: bold;
  src: url(/client/fa8441f345d83a0bc4ec.ttf) format(truetype);
}
.normal-text {
  font-family: monserratMedium, sans-serif;
}
.bold-text {
  font-weight: bolder;
  font-family: monserratBold, sans-serif;
}
.default-shadow-on-all-sides {
  box-shadow: 0 0 0.3rem rgba(0, 0, 0, 0.2), 0 0 0.3rem rgba(0, 0, 0, 0.2);
}
.not-selectable {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.top-nav-props {
  background: linear-gradient(#004284, #00366d);
  color: white;
}
.flat-button-props {
  display: block;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  background: #003367;
  color: white;
  padding: 10px 25px;
  border: 1px solid #003367;
  border-radius: 20px;
}
.flat-button-props .content {
  font-weight: 500;
  display: block;
}
.flat-button-props .icon {
  background-image: url(/client/4dfa12214025d650da8a.png);
  width: 7px;
  height: 13px;
  position: absolute;
  right: 6px;
  top: 16px;
}
.flat-button-props.round {
  border-radius: 50%;
}
.flat-button-props.small {
  padding: 5px;
}
.flat-button-props a {
  color: white;
  text-decoration: none;
}
@media screen and (min-width: 768px) {
  .flat-button-props {
    padding: 10px 35px;
  }
  .flat-button-props.small {
    padding: 5px;
  }
}
.action-button-props {
  display: block;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  padding: 10px 50px;
}
.action-button-props .content {
  font-weight: 500;
  display: block;
}
.action-button-props .icon {
  background-image: url(/client/4dfa12214025d650da8a.png);
  width: 7px;
  height: 13px;
  position: absolute;
  right: 6px;
  top: 16px;
}
.action-button-props[disabled],
.action-button-props.disabled {
  pointer-events: unset;
}
.nav-hamburger {
  border: none;
  outline: none;
  background: transparent;
}
.hovered-top-nav-link {
  color: white;
  text-decoration: underline;
}
.card {
  padding: 1em;
  border-radius: 0.5em;
  border-style: solid;
  border-width: 0.2em;
}
.card.no-top {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.card.widget {
  color: white;
  border-color: #003062;
  background-color: #003062;
}
.card.light {
  border-color: white;
  background-color: white;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: normal;
  src: url(/client/ceb11275ab638627a643.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Medium';
  font-style: normal;
  font-weight: normal;
  src: url(/client/e2d60bc49517598c0ce8.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Bold';
  font-style: normal;
  font-weight: bold;
  src: url(/client/fa8441f345d83a0bc4ec.ttf) format(truetype);
}
.normal-text {
  font-family: monserratMedium, sans-serif;
}
.bold-text {
  font-weight: bolder;
  font-family: monserratBold, sans-serif;
}
.default-shadow-on-all-sides {
  box-shadow: 0 0 0.3rem rgba(0, 0, 0, 0.2), 0 0 0.3rem rgba(0, 0, 0, 0.2);
}
.not-selectable {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.top-nav-props {
  background: linear-gradient(#004284, #00366d);
  color: white;
}
.flat-button-props {
  display: block;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  background: #003367;
  color: white;
  padding: 10px 25px;
  border: 1px solid #003367;
  border-radius: 20px;
}
.flat-button-props .content {
  font-weight: 500;
  display: block;
}
.flat-button-props .icon {
  background-image: url(/client/4dfa12214025d650da8a.png);
  width: 7px;
  height: 13px;
  position: absolute;
  right: 6px;
  top: 16px;
}
.flat-button-props.round {
  border-radius: 50%;
}
.flat-button-props.small {
  padding: 5px;
}
.flat-button-props a {
  color: white;
  text-decoration: none;
}
@media screen and (min-width: 768px) {
  .flat-button-props {
    padding: 10px 35px;
  }
  .flat-button-props.small {
    padding: 5px;
  }
}
.action-button-props {
  display: block;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  padding: 10px 50px;
}
.action-button-props .content {
  font-weight: 500;
  display: block;
}
.action-button-props .icon {
  background-image: url(/client/4dfa12214025d650da8a.png);
  width: 7px;
  height: 13px;
  position: absolute;
  right: 6px;
  top: 16px;
}
.action-button-props[disabled],
.action-button-props.disabled {
  pointer-events: unset;
}
.nav-hamburger {
  border: none;
  outline: none;
  background: transparent;
}
.hovered-top-nav-link {
  color: white;
  text-decoration: underline;
}
.lobby-student {
  outline: none;
  background: #ffffff;
  font-weight: bolder;
  font-family: monserratBold, sans-serif;
  text-transform: uppercase;
  text-align: center;
  border-style: solid;
  border-radius: 1.7em;
  border-width: 0.125em;
  padding: 0.2em 0.7em;
  min-width: 2em;
}
@media (min-width: 768px) {
  .lobby-student {
    padding: 0.7em;
  }
}
.lobby-student.active {
  border-color: #14decb;
  color: #000;
}
.lobby-student.inactive {
  border-color: #fbfbfb;
  color: #a3a3a3;
  box-shadow: 0 0 0.3rem rgba(0, 0, 0, 0.2), 0 0 0.3rem rgba(0, 0, 0, 0.2);
}
.lobby-student.kickable {
  display: flex;
  align-content: center;
  justify-content: center;
}
.lobby-student.kickable .kickout {
  color: #14decb;
  margin-left: 0.2em;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: normal;
  src: url(/client/ceb11275ab638627a643.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Medium';
  font-style: normal;
  font-weight: normal;
  src: url(/client/e2d60bc49517598c0ce8.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Bold';
  font-style: normal;
  font-weight: bold;
  src: url(/client/fa8441f345d83a0bc4ec.ttf) format(truetype);
}
.normal-text {
  font-family: monserratMedium, sans-serif;
}
.bold-text {
  font-weight: bolder;
  font-family: monserratBold, sans-serif;
}
.default-shadow-on-all-sides {
  box-shadow: 0 0 0.3rem rgba(0, 0, 0, 0.2), 0 0 0.3rem rgba(0, 0, 0, 0.2);
}
.not-selectable {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.top-nav-props {
  background: linear-gradient(#004284, #00366d);
  color: white;
}
.flat-button-props {
  display: block;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  background: #003367;
  color: white;
  padding: 10px 25px;
  border: 1px solid #003367;
  border-radius: 20px;
}
.flat-button-props .content {
  font-weight: 500;
  display: block;
}
.flat-button-props .icon {
  background-image: url(/client/4dfa12214025d650da8a.png);
  width: 7px;
  height: 13px;
  position: absolute;
  right: 6px;
  top: 16px;
}
.flat-button-props.round {
  border-radius: 50%;
}
.flat-button-props.small {
  padding: 5px;
}
.flat-button-props a {
  color: white;
  text-decoration: none;
}
@media screen and (min-width: 768px) {
  .flat-button-props {
    padding: 10px 35px;
  }
  .flat-button-props.small {
    padding: 5px;
  }
}
.action-button-props {
  display: block;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  padding: 10px 50px;
}
.action-button-props .content {
  font-weight: 500;
  display: block;
}
.action-button-props .icon {
  background-image: url(/client/4dfa12214025d650da8a.png);
  width: 7px;
  height: 13px;
  position: absolute;
  right: 6px;
  top: 16px;
}
.action-button-props[disabled],
.action-button-props.disabled {
  pointer-events: unset;
}
.nav-hamburger {
  border: none;
  outline: none;
  background: transparent;
}
.hovered-top-nav-link {
  color: white;
  text-decoration: underline;
}
.circle {
  border-radius: 50%;
  border: 0.2em solid white;
  background: #1f63ab;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: inset 0 0 0.7em rgba(0, 0, 0, 0.2), inset 0 0 0.7em rgba(0, 0, 0, 0.2);
}

.flex-container {
  display: flex;
}
.flex-container.center-horizontally {
  align-items: center;
}
.flex-container.center-vertically {
  justify-content: center;
}
.flex-container.vertical {
  flex-direction: column;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: normal;
  src: url(/client/ceb11275ab638627a643.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Medium';
  font-style: normal;
  font-weight: normal;
  src: url(/client/e2d60bc49517598c0ce8.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Bold';
  font-style: normal;
  font-weight: bold;
  src: url(/client/fa8441f345d83a0bc4ec.ttf) format(truetype);
}
.normal-text {
  font-family: monserratMedium, sans-serif;
}
.bold-text {
  font-weight: bolder;
  font-family: monserratBold, sans-serif;
}
.default-shadow-on-all-sides {
  box-shadow: 0 0 0.3rem rgba(0, 0, 0, 0.2), 0 0 0.3rem rgba(0, 0, 0, 0.2);
}
.not-selectable {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.top-nav-props {
  background: linear-gradient(#004284, #00366d);
  color: white;
}
.flat-button-props {
  display: block;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  background: #003367;
  color: white;
  padding: 10px 25px;
  border: 1px solid #003367;
  border-radius: 20px;
}
.flat-button-props .content {
  font-weight: 500;
  display: block;
}
.flat-button-props .icon {
  background-image: url(/client/4dfa12214025d650da8a.png);
  width: 7px;
  height: 13px;
  position: absolute;
  right: 6px;
  top: 16px;
}
.flat-button-props.round {
  border-radius: 50%;
}
.flat-button-props.small {
  padding: 5px;
}
.flat-button-props a {
  color: white;
  text-decoration: none;
}
@media screen and (min-width: 768px) {
  .flat-button-props {
    padding: 10px 35px;
  }
  .flat-button-props.small {
    padding: 5px;
  }
}
.action-button-props {
  display: block;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  padding: 10px 50px;
}
.action-button-props .content {
  font-weight: 500;
  display: block;
}
.action-button-props .icon {
  background-image: url(/client/4dfa12214025d650da8a.png);
  width: 7px;
  height: 13px;
  position: absolute;
  right: 6px;
  top: 16px;
}
.action-button-props[disabled],
.action-button-props.disabled {
  pointer-events: unset;
}
.nav-hamburger {
  border: none;
  outline: none;
  background: transparent;
}
.hovered-top-nav-link {
  color: white;
  text-decoration: underline;
}
.progress-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1em;
  padding: 0.4em;
  border-radius: 50%;
  border-width: 0.1em;
  border-style: solid;
  border-color: #9be4e2;
  background-color: #39c6c4;
  color: white;
  font-size: 2.5em;
  overflow: hidden;
  box-shadow: 0 0 0.3rem rgba(0, 0, 0, 0.2), 0 0 0.3rem rgba(0, 0, 0, 0.2);
}
.progress-circle .progress-circle-content {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 3.5em;
  height: 3.5em;
}
.progress-circle .progress-circle-graphics {
  z-index: 0;
  position: absolute;
  width: 3.5em;
  height: 3.5em;
}
.progress-circle .progress-circle-graphics .outline-percent {
  stroke: white;
  stroke-linecap: round;
  fill: none;
  stroke-width: 5;
}
.progress-circle .progress-circle-graphics .outline-full {
  fill: none;
  stroke-width: 5;
}
.progress-circle .progress-circle-text {
  padding: 0.5em;
  z-index: 1;
  color: white;
}
.progress-circle.correct .progress-circle-graphics .background {
  fill: #36a900;
}
.progress-circle.correct .progress-circle-graphics .outline-full {
  stroke: #2f8b05;
}
.progress-circle.incorrect .progress-circle-graphics .background {
  fill: #e64c4c;
}
.progress-circle.incorrect .progress-circle-graphics .outline-full {
  stroke: #bc4141;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: normal;
  src: url(/client/ceb11275ab638627a643.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Medium';
  font-style: normal;
  font-weight: normal;
  src: url(/client/e2d60bc49517598c0ce8.ttf) format(truetype);
}
@font-face {
  font-family: 'Montserrat Bold';
  font-style: normal;
  font-weight: bold;
  src: url(/client/fa8441f345d83a0bc4ec.ttf) format(truetype);
}
.normal-text {
  font-family: monserratMedium, sans-serif;
}
.bold-text {
  font-weight: bolder;
  font-family: monserratBold, sans-serif;
}
.default-shadow-on-all-sides {
  box-shadow: 0 0 0.3rem rgba(0, 0, 0, 0.2), 0 0 0.3rem rgba(0, 0, 0, 0.2);
}
.not-selectable {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.top-nav-props {
  background: linear-gradient(#004284, #00366d);
  color: white;
}
.flat-button-props {
  display: block;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  background: #003367;
  color: white;
  padding: 10px 25px;
  border: 1px solid #003367;
  border-radius: 20px;
}
.flat-button-props .content {
  font-weight: 500;
  display: block;
}
.flat-button-props .icon {
  background-image: url(/client/4dfa12214025d650da8a.png);
  width: 7px;
  height: 13px;
  position: absolute;
  right: 6px;
  top: 16px;
}
.flat-button-props.round {
  border-radius: 50%;
}
.flat-button-props.small {
  padding: 5px;
}
.flat-button-props a {
  color: white;
  text-decoration: none;
}
@media screen and (min-width: 768px) {
  .flat-button-props {
    padding: 10px 35px;
  }
  .flat-button-props.small {
    padding: 5px;
  }
}
.action-button-props {
  display: block;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  padding: 10px 50px;
}
.action-button-props .content {
  font-weight: 500;
  display: block;
}
.action-button-props .icon {
  background-image: url(/client/4dfa12214025d650da8a.png);
  width: 7px;
  height: 13px;
  position: absolute;
  right: 6px;
  top: 16px;
}
.action-button-props[disabled],
.action-button-props.disabled {
  pointer-events: unset;
}
.nav-hamburger {
  border: none;
  outline: none;
  background: transparent;
}
.hovered-top-nav-link {
  color: white;
  text-decoration: underline;
}
.final-screen-frame {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  background: linear-gradient(to bottom, #0baaae, rgba(0, 209, 189, 0.5)), linear-gradient(45deg, #003367 5%, transparent);
  --animation-duration: 1s;
}
.final-screen-frame .w-33 {
  width: 33%;
}
.final-screen-frame .podium {
  margin-top: var(--bs-gap-2);
}
@media screen and (min-width: 768px) {
  .final-screen-frame .podium {
    margin-top: var(--bs-gap-3);
  }
}
@media screen and (min-width: 992px) {
  .final-screen-frame .podium {
    margin-top: var(--bs-gap-4);
  }
}
.final-screen-frame .podium-content {
  width: 100%;
}
@media screen and (min-width: 576px) {
  .final-screen-frame .podium-content {
    width: 80%;
  }
}
@media screen and (min-width: 992px) {
  .final-screen-frame .podium-content {
    width: 60%;
  }
}
@media screen and (min-width: 1200px) {
  .final-screen-frame .podium-content {
    width: 40%;
  }
}
@media screen and (max-height: 400px) {
  .final-screen-frame .feedback-container {
    padding-top: 0;
    padding-bottom: 0;
  }
}
@media screen and (max-height: 500px) {
  .final-screen-frame .progress-circle {
    margin-top: 0;
  }
}
.final-screen-frame .final-screen-content {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  align-items: center;
  justify-content: center;
}
.final-screen-frame .final-screen-footer {
  background: linear-gradient(to right, #004080, #003f80);
  padding: 0.3em;
}
.final-screen-frame .final-screen-footer .final-screen-footer-content {
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
}
.final-screen-frame .final-screen-footer .retry {
  background: #003062;
}
.final-screen-frame .final-screen-footer .retry,
.final-screen-frame .final-screen-footer .new,
.final-screen-frame .final-screen-footer .results {
  padding: 2px 5px;
}
.final-screen-frame .final-screen-footer .retry i,
.final-screen-frame .final-screen-footer .new i,
.final-screen-frame .final-screen-footer .results i {
  display: none;
}
@media screen and (min-width: 270px) {
  .final-screen-frame .final-screen-footer .retry,
  .final-screen-frame .final-screen-footer .new,
  .final-screen-frame .final-screen-footer .results {
    padding: 5px 10px;
  }
}
@media screen and (min-width: 300px) {
  .final-screen-frame .final-screen-footer .retry,
  .final-screen-frame .final-screen-footer .new,
  .final-screen-frame .final-screen-footer .results {
    padding: 5px 20px;
  }
}
@media screen and (min-width: 400px) {
  .final-screen-frame .final-screen-footer .retry,
  .final-screen-frame .final-screen-footer .new,
  .final-screen-frame .final-screen-footer .results {
    padding: 10px 30px;
  }
}
@media screen and (min-width: 500px) {
  .final-screen-frame .final-screen-footer .retry,
  .final-screen-frame .final-screen-footer .new,
  .final-screen-frame .final-screen-footer .results {
    padding: 10px 30px;
  }
}
@media screen and (min-width: 600px) {
  .final-screen-frame .final-screen-footer .retry,
  .final-screen-frame .final-screen-footer .new,
  .final-screen-frame .final-screen-footer .results {
    padding: 10px 50px;
  }
  .final-screen-frame .final-screen-footer .retry i,
  .final-screen-frame .final-screen-footer .new i,
  .final-screen-frame .final-screen-footer .results i {
    display: initial;
  }
}
.final-screen-frame .podium-place,
.final-screen-frame .podium-ground {
  animation-name: go-back;
  animation-duration: var(--animation-duration);
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}
.final-screen-frame .podium-ground {
  transform: translateY(calc(var(--document-height) + var(--element-height)));
}
.final-screen-frame .podium-place {
  width: 33%;
}
.final-screen-frame .podium-place .podium-text {
  text-align: center;
  color: white;
  font-size: 1.1em;
  border: 0.2em solid #9be4e2;
  border-radius: var(--bs-border-radius);
  box-shadow: 0 0 0.3rem rgba(0, 0, 0, 0.2), 0 0 0.3rem rgba(0, 0, 0, 0.2);
}
.final-screen-frame .podium-place.first-place {
  animation-delay: calc(var(--animation-duration) * 3);
  transform: translateY(calc(var(--document-height) * -1));
}
.final-screen-frame .podium-place.first-place .podium-text {
  background: #003567;
}
.final-screen-frame .podium-place.second-place {
  animation-delay: calc(var(--animation-duration) * 2);
  transform: translate(calc(var(--document-width) * -1 - var(--element-width)), calc(var(--document-height) * -1));
}
.final-screen-frame .podium-place.second-place .podium-text {
  background: #fb7b58;
}
.final-screen-frame .podium-place.third-place {
  animation-delay: calc(var(--animation-duration) * 1);
  transform: translate(calc(var(--document-width) + var(--element-width)), calc(var(--document-height) * -1));
}
.final-screen-frame .podium-place.third-place .podium-text {
  background: #d51467;
}
@keyframes go-back {
  0% {
    opacity: 0;
  }
  80% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes fall-from-top-left {
  from {
    transform: translate(calc(var(--document-width) * -1.3), calc(var(--document-height) * -1));
    visibility: visible;
  }
  to {
    visibility: visible;
    transform: translate(0, 0);
  }
}
@keyframes fall-from-top-right {
  from {
    visibility: visible;
    transform: translate(calc(var(--document-width) * 1.3), calc(var(--document-height) * -1));
  }
  to {
    visibility: visible;
    transform: translate(0, 0);
  }
}

.with-box-shadow {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
}
.report.correct.bg {
  background-color: var(--bs-success);
}
.report.correct.color {
  color: var(--bs-success);
}
.report.incorrect.bg {
  background-color: var(--bs-danger);
}
.report.incorrect.color {
  color: var(--bs-danger);
}
.report.unattempted.bg {
  background-color: var(--bs-light);
}
.report.unattempted.color {
  color: var(--bs-light);
}
.map-answer-inner.green {
  background-color: var(--bs-success) !important;
}
.map-answer-inner.red {
  background-color: var(--bs-danger) !important;
}
.student-report {
  overflow: hidden;
  border-radius: 3px;
  position: relative;
  margin: 5px 0 5px 0;
  background-color: #fff;
  transition: box-shadow 0.25s;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
}
.student-report .collection-item.green {
  background-color: var(--bs-success) !important;
}
.student-report .collection-item.red {
  background-color: var(--bs-danger) !important;
}
.student-report .green-border {
  border-color: var(--bs-success) !important;
}
.student-report .report-body {
  padding: 24px;
  border-radius: 0 0 2px 2px;
}
.student-report .report-bottom {
  position: relative;
  background-color: inherit;
  border-top: 1px solid rgba(160, 160, 160, 0.2);
  padding: 16px 24px;
  text-align: center;
}
.student-report .report-bottom:last-child {
  border-radius: 0 0 2px 2px;
}
.student-report .student-report-summary {
  width: 100%;
  display: grid;
  grid-auto-flow: column;
  grid-column-gap: 5px;
  grid-auto-columns: 2fr 0fr 2fr 2fr;
  justify-content: center;
  align-items: center;
}
@media (min-width: 576px) {
  .student-report .student-report-summary {
    grid-auto-columns: 2fr 5fr 2fr 2fr;
  }
}
.student-report .student-report-summary .student-title {
  font-weight: 500;
  color: var(--bs-primary);
}
.student-report .student-report-summary .progress-stacked,
.student-report .student-report-summary .progress {
  --bs-progress-height: 1.2rem;
}
.student-report .student-report-summary .student-success-rate-bar-text,
.student-report .student-report-summary .student-points {
  text-align: center;
}
.student-report .student-report-details .titlebar,
.student-report .student-report-details .student-success-rate-bar-text {
  text-align: center;
}
.student-report .student-report-details .student-success-rate-bar-text {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 1fr 1fr 1fr;
  margin-bottom: 1.5rem;
}
.student-report .student-report-details .reported-screen {
  position: relative;
}
.student-report .student-report-details .reported-screen:not(:last-child) {
  margin-bottom: 1.5rem;
}
@media screen and (min-width: 768px) {
  .student-report .student-report-details .reported-screen {
    display: grid;
    grid-auto-flow: row;
  }
}
.student-report .student-report-details .reported-screen .time-stats {
  position: absolute;
  top: -6px;
  right: -3px;
  z-index: 1;
  display: grid;
  grid-auto-flow: column;
  grid-gap: 0.5rem;
}
.student-report .student-report-details .reported-screen .time-stats .mdi {
  margin-right: 0.3rem;
}
.student-report .student-report-details .reported-screen .time-stats .badge {
  display: flex;
  align-items: center;
  justify-content: center;
}
.screen-report .student-success-rate-bar,
.student-report .student-success-rate-bar {
  display: flex;
}
.screen-report .student-success-rate-bar :first-child,
.student-report .student-success-rate-bar :first-child {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.screen-report .student-success-rate-bar :last-child,
.student-report .student-success-rate-bar :last-child {
  border-bottom-right-radius: 3px;
  border-top-right-radius: 3px;
}
.screen-report .student-success-rate-bar *,
.student-report .student-success-rate-bar * {
  height: 1.5em;
  float: left;
}
.center-xy {
  display: flex;
  justify-content: center;
  align-items: center;
}
.screen-report .responsive-answer {
  border-radius: var(--bs-border-radius);
  max-width: var(--cb-answer-image-size);
  max-height: var(--cb-answer-image-size);
  width: auto;
  height: auto;
}
.screen-report a {
  text-decoration: none;
}
.screen-report a:hover {
  text-decoration: underline;
}
.screen-report .links {
  width: 100%;
  text-align: center;
}
.screen-report .screen-header {
  width: 100%;
  display: grid;
  grid-template-columns: auto 0 10em;
  grid-column-gap: 1em;
  grid-row-gap: 0.5em;
  align-items: center;
}
@media (min-width: 576px) {
  .screen-report .screen-header {
    grid-template-columns: auto 30% 10em;
  }
}
@media (min-width: 992px) {
  .screen-report .screen-header {
    grid-template-columns: auto 40% 10em;
  }
}
.screen-report .screen-header .progress-stacked,
.screen-report .screen-header .progress {
  --bs-progress-height: 1.2rem;
}
.screen-report .screen-header .title {
  overflow: auto;
  font-weight: 500;
  color: var(--bs-primary);
}
.screen-report .screen-header .title,
.screen-report .screen-header .screen-progress-bar,
.screen-report .screen-header .text-stats {
  grid-row: 1;
}
.screen-report .screen-header .title,
.screen-report .screen-header .screen-progress-bar,
.screen-report .screen-header .text-stats,
.screen-report .screen-header .links {
  cursor: pointer;
}
.screen-report .screen-header .text-stats {
  justify-self: flex-end;
  display: grid;
  grid-template-columns: -webkit-max-content auto;
  grid-template-columns: max-content auto;
  grid-column-gap: 1em;
  height: 100%;
  align-items: center;
}
.screen-report .screen-header .links {
  grid-column: 1 / span 3;
  grid-row: 3;
}
.screen-report .screen-report-details {
  color: var(--bs-black);
  margin-top: 1em;
}
.screen-report .students-list .student {
  display: inline;
}
.screen-report .students-list .student::after {
  content: ", ";
}
.screen-report .students-list .student:last-child::after {
  content: "";
}
.screen-report .answers-grid {
  margin-top: 1em;
  margin-bottom: 1em;
  display: grid;
  grid-template-columns: 100%;
  grid-gap: 1em;
  --cb-report-bar-color: var(--bs-primary);
}
.screen-report .answers-grid.count-1 {
  grid-template-columns: 100%;
}
.screen-report .answers-grid .answer {
  display: grid;
  grid-template-columns: 30% 3em auto minmax(8em, -webkit-max-content);
  grid-template-columns: 30% 3em auto minmax(8em, max-content);
  grid-column-gap: 0.5em;
  /* debug */
  /*
      .content, .percent, .bar-cell, .students-summary {
        border: 1px solid coral;
      }
      //*/
}
.screen-report .answers-grid .answer img {
  max-height: 100px;
}
.screen-report .answers-grid .answer .percent,
.screen-report .answers-grid .answer .bar-cell,
.screen-report .answers-grid .answer .students-summary {
  display: flex;
  align-items: center;
}
.screen-report .answers-grid .answer .bar-cell .bar {
  align-self: center;
}
.screen-report .answers-grid .answer .students-summary {
  justify-content: flex-end;
}
.screen-report .answers-grid .answer .content {
  position: relative;
  padding-left: 2em;
}
.screen-report .answers-grid .answer .content.no-letter {
  padding-left: 0;
}
.screen-report .answers-grid .answer .content .letter {
  position: absolute;
  top: 0;
  left: 0;
  border-width: 2px;
  border-color: var(--bs-dark);
  border-style: solid;
  border-radius: 50%;
  width: 1.5em;
  height: 1.5em;
  display: flex;
  justify-content: center;
  align-items: center;
}
.screen-report .answers-grid .answer .percent {
  text-align: right;
  justify-content: flex-end;
}
.screen-report .answers-grid .answer .bar {
  border-style: solid;
  border-radius: 0.25em;
  align-self: start;
  height: 1.5em;
}
.screen-report .answers-grid .answer .students-summary {
  text-align: right;
  align-items: center;
}
.screen-report .answers-grid .answer .students-list {
  grid-column: 1 / span 4;
}
.screen-report .answers-grid .letter,
.screen-report .answers-grid .bar {
  border-color: var(--cb-report-bar-color);
}
.screen-report .answers-grid .bar {
  background-color: var(--cb-report-bar-color);
}
.screen-report .answers-grid .answer.correct {
  --cb-report-bar-color: var(--bs-success);
}
.screen-report .answers-grid .answer.incorrect {
  --cb-report-bar-color: var(--bs-danger);
}
.screen-report .answers-grid .answer.unanswered {
  --cb-report-bar-color: var(--bs-light);
}
.screen-report .drag-drop .category .title,
.screen-report .connect .category .title {
  font-size: 1.5em;
  -webkit-text-decoration: underline 0.15em;
          text-decoration: underline 0.15em;
  text-underline-offset: 0.3em;
}
.screen-report .connect .category {
  display: grid;
  grid-template-columns: 6em auto;
  grid-column-gap: 1em;
}
.screen-report .connect .category:not(:last-child) {
  margin-bottom: 1em;
}
.screen-report .connect .category .category-title {
  display: flex;
  align-items: center;
  justify-content: center;
}
.screen-report .drawing {
  display: flex;
  flex-wrap: wrap;
}
.screen-report .drawing .screen-with-student-name {
  margin-right: 1em;
  margin-bottom: 1em;
}
.screen-report .drawing .screen-with-student-name .drawing-container {
  width: var(--cb-answer-image-size);
  max-height: var(--cb-answer-image-size);
  overflow: hidden;
}
.screen-report .drawing .screen-with-student-name:not(:hover) {
  padding: 3px;
}
.screen-report .drawing .screen-with-student-name:hover {
  padding: 2px;
  border: 1px dashed var(--bs-dark);
  border-radius: var(--bs-border-radius);
  box-shadow: var(--bs-card-box-shadow);
  cursor: pointer;
}
.screen-report .drawing .screen-with-student-name:last-child {
  margin-right: 0;
  margin-bottom: 0;
}
.screen-report .drawing .screen-with-student-name .name {
  text-align: center;
  max-width: 100%;
}
.history-view-report-page {
  flex-basis: 100%;
  padding-top: 1em;
  padding-bottom: 1em;
  overflow-x: hidden;
}
.history-view-report-page .body-wrapper {
  display: grid;
  grid-auto-flow: row;
  grid-template-rows: max(600px, -webkit-fit-content);
  grid-template-rows: max(600px, fit-content);
  grid-template-columns: 100%;
  grid-row-gap: 2em;
}
.history-view-report-page .body-wrapper .map-screen {
  min-height: 600px;
}
.history-view-report-page .body-wrapper .drag-drop-screen {
  grid-template-rows: unset;
}
.history-view-report-page .body-wrapper .quiz-screen {
  grid-template-rows: unset;
}
.history-view-report-page .body-wrapper .draw-screen .draw-container {
  min-height: 300px;
}

.certificates-page {
  display: block;
  flex-basis: 100%;
  padding-top: 1em;
  padding-left: 10px;
  padding-right: 10px;
}
@media screen and (min-width: 576px) {
  .certificates-page {
    padding-left: 0;
    padding-right: 0;
  }
}
.certificates-page .loading {
  flex-basis: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading-component-container .loading-component {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 120px;
  min-height: 120px;
}
.loading-component-container .loading-component .loading-animation {
  border: 16px solid transparent;
  border-top: 16px solid white;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  position: absolute;
  top: calc(50% - 60px);
  left: calc(50% - 60px);
  animation: loading-component-spin 2s linear infinite;
}
.loading-component-container .loading-component .loading-text {
  z-index: 1;
}
@keyframes loading-component-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

h1.dot,
h2.dot,
h3.dot,
h4.dot {
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}
h1.dot::before,
h2.dot::before,
h3.dot::before,
h4.dot::before {
  content: " ";
  display: inline-block;
  width: 0.3em;
  height: 0.3em;
  margin-left: -0.3em;
  margin-right: 0.3em;
  border-radius: 50%;
  background-color: white;
}
h1.underline,
h2.underline,
h3.underline,
h4.underline {
  text-align: center;
  text-underline-offset: 0.4em;
  -webkit-text-decoration: underline 0.15em #00d1bd;
          text-decoration: underline 0.15em #00d1bd;
  margin-bottom: 0.8em;
}
.profile-page {
  display: block;
  flex-basis: 100%;
  padding-top: 1em;
  padding-left: 10px;
  padding-right: 10px;
  color: white;
}
@media screen and (min-width: 576px) {
  .profile-page {
    padding-left: 0;
    padding-right: 0;
  }
}
.profile-page hr.divider {
  height: 0.1em;
  width: 50%;
  background-color: white;
}
.profile-page hr.small {
  margin: 0.5em 0;
  height: 0.1em;
  width: min(100%, 2em);
  background-color: white;
}
.profile-page .btn-round {
  border-radius: 50%;
  padding: 1rem;
  width: 2rem;
  height: 2rem;
  font-size: 1.5em;
}
.profile-page .invalid-feedback {
  display: unset;
  color: white;
  font-style: italic;
}

.form-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
}
.form-container hr {
  margin: -0.5em 0;
  height: 0.1em;
  width: min(100%, 2em);
  background-color: white;
}

.editable-field {
  display: flex;
  align-items: center;
  gap: 0.5em;
  color: white;
}
.editable-field .space {
  padding: 0.5em;
}
.editable-field .space .space-inner {
  width: 1em;
  height: 1em;
}
.editable-field button {
  padding: 0.5em;
}
.editable-field button.edit {
  background: transparent !important;
  border: none !important;
  outline: none !important;
}
.editable-field button.rounded {
  border-radius: 50% !important;
}

.text-input-group {
  width: 100%;
}
.text-input-group .invalid-feedback {
  display: unset;
  color: white;
  font-style: italic;
}

.image-uploader .image {
  cursor: pointer;
  border-radius: 50%;
  border-width: 0.3em;
  border-color: white;
  border-style: solid;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.image-uploader .image input[type='file'] {
  display: none;
}
.image-uploader.has-validation .invalid-feedback {
  display: unset;
}
.image-uploader .invalid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: white;
  font-style: italic;
}