@charset "UTF-8";
@media screen and (max-width: 1024px) {
  .overview-items {
    top: 1.5625rem;
  }
}
.magnify-tooltip {
  position: fixed;
  padding: 0.3125rem;
  white-space: nowrap;
}
.magnify-tooltip {
  background: #eee;
}
.high-contrast-mode .magnify-tooltip {
  background: #111;
}

.magnify-tooltip {
  color: #000;
}
.high-contrast-mode .magnify-tooltip {
  color: #fff;
}

.magnify-tooltip > button {
  padding: 0.3125rem;
}
.magnify-tooltip > button {
  background: #fff;
}
.high-contrast-mode .magnify-tooltip > button {
  background: #000;
}

.magnify-tooltip > button {
  color: #000;
}
.high-contrast-mode .magnify-tooltip > button {
  color: #fff;
}

.magnify-tooltip > button:not(:last-child), .magnify-tooltip span {
  margin-right: 0.3125rem;
}

.magnify-tooltip:after {
  position: absolute;
  bottom: 100%;
  left: 50%;
  border: solid transparent;
  border-width: 0.3125rem;
  margin-left: -0.3125rem;
  height: 0;
  width: 0;
  content: "";
  pointer-events: none;
}
.magnify-tooltip:after {
  border-bottom-color: #eee;
}
.high-contrast-mode .magnify-tooltip:after {
  border-bottom-color: #111;
}

/*
 * Overwrite what is being set by player-static's "tools.scss".
 * Cito CS's theme doesn't need these properties. Thus, "unset" everything here.
 */
.tools-dropdown-content button.tools {
  background: unset;
  background-color: unset;
  background-size: unset;
  border: unset;
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: unset;
  cursor: unset;
  float: none;
  height: unset;
  margin: unset;
  position: relative;
  text-indent: unset;
  width: unset;
}

body.question header.open ~ footer {
  /* hide footer when overview is opened, otherwise the buttons close to the bottom of the screen
   cannot be clicked on. (only a problem on small screens, or with tests that contain a lot of items) */
  display: none;
}

header {
  --header-height: 64px;
  z-index: 2;
  position: relative;
  /* The container <div> - needed to position the dropdown content */
  /* Dropdown Content (Hidden by Default) */
  /* Links inside the dropdown */
  /* Change the background color of the dropdown button when the dropdown content is shown */
}
header.open {
  height: 100%;
}
header div.overview {
  height: calc(100% - var(--header-height));
}
header div.overview .overview-container {
  margin: 48px auto;
}
header .header-buttons, header button.toggleCorrectAnswer, header button.feedbackButton {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  width: 40px;
  height: 100%;
  cursor: pointer;
  /* Keeping this temporarily here until default "overview"-button is replaced by an icon too */
}
header .header-buttons.overview-btn, header .header-buttons.feedbackButton, header .header-buttons.toggleCorrectAnswer, header button.toggleCorrectAnswer.overview-btn, header button.toggleCorrectAnswer.feedbackButton, header button.toggleCorrectAnswer.toggleCorrectAnswer, header button.feedbackButton.overview-btn, header button.feedbackButton.feedbackButton, header button.feedbackButton.toggleCorrectAnswer {
  height: var(--header-height);
  width: fit-content;
  color: #fff;
  font-size: 1.2rem;
  padding: 0 0.5em;
}
header .header-buttons.volume-btn, header button.toggleCorrectAnswer.volume-btn, header button.feedbackButton.volume-btn {
  height: var(--header-height);
  width: var(--header-height);
  /* TODO share this with the other containers */
}
header .header-buttons.volume-btn, header button.toggleCorrectAnswer.volume-btn, header button.feedbackButton.volume-btn {
  background-image: url(/player/static/icons/doe_volume-hc.svg);
}
.high-contrast-mode header .header-buttons.volume-btn, .high-contrast-mode header button.toggleCorrectAnswer.volume-btn, .high-contrast-mode header button.feedbackButton.volume-btn {
  background-image: url(/player/static/icons/doe_volume-hc.svg);
}

header .header-buttons.volume-btn .audio-controls-container, header button.toggleCorrectAnswer.volume-btn .audio-controls-container, header button.feedbackButton.volume-btn .audio-controls-container {
  cursor: auto;
  display: none;
  padding: 1.5em 2em;
  box-shadow: var(--shadow);
  border-radius: 16px;
}
header .header-buttons.volume-btn .audio-controls-container, header button.toggleCorrectAnswer.volume-btn .audio-controls-container, header button.feedbackButton.volume-btn .audio-controls-container {
  background-color: #fff;
}
.high-contrast-mode header .header-buttons.volume-btn .audio-controls-container, .high-contrast-mode header button.toggleCorrectAnswer.volume-btn .audio-controls-container, .high-contrast-mode header button.feedbackButton.volume-btn .audio-controls-container {
  background-color: #303030;
}

header .header-buttons.volume-btn .audio-controls-container, header button.toggleCorrectAnswer.volume-btn .audio-controls-container, header button.feedbackButton.volume-btn .audio-controls-container {
  border: 3px solid #ba9bd8;
}
.high-contrast-mode header .header-buttons.volume-btn .audio-controls-container, .high-contrast-mode header button.toggleCorrectAnswer.volume-btn .audio-controls-container, .high-contrast-mode header button.feedbackButton.volume-btn .audio-controls-container {
  border: none;
}

header .header-buttons.volume-btn:focus-visible, header .header-buttons.volume-btn:focus-within, header .header-buttons.volume-btn:hover, header button.toggleCorrectAnswer.volume-btn:focus-visible, header button.toggleCorrectAnswer.volume-btn:focus-within, header button.toggleCorrectAnswer.volume-btn:hover, header button.feedbackButton.volume-btn:focus-visible, header button.feedbackButton.volume-btn:focus-within, header button.feedbackButton.volume-btn:hover {
  background-image: url(/player/static/icons/doe_volume-hc.svg);
}
.high-contrast-mode header .header-buttons.volume-btn:focus-visible, .high-contrast-mode header .header-buttons.volume-btn:focus-within, .high-contrast-mode header .header-buttons.volume-btn:hover, .high-contrast-mode header button.toggleCorrectAnswer.volume-btn:focus-visible, .high-contrast-mode header button.toggleCorrectAnswer.volume-btn:focus-within, .high-contrast-mode header button.toggleCorrectAnswer.volume-btn:hover, .high-contrast-mode header button.feedbackButton.volume-btn:focus-visible, .high-contrast-mode header button.feedbackButton.volume-btn:focus-within, .high-contrast-mode header button.feedbackButton.volume-btn:hover {
  background-image: url(/player/static/icons/doe_volume.svg);
}

header .header-buttons.volume-btn:focus-visible .audio-controls-container, header .header-buttons.volume-btn:focus-within .audio-controls-container, header button.toggleCorrectAnswer.volume-btn:focus-visible .audio-controls-container, header button.toggleCorrectAnswer.volume-btn:focus-within .audio-controls-container, header button.feedbackButton.volume-btn:focus-visible .audio-controls-container, header button.feedbackButton.volume-btn:focus-within .audio-controls-container {
  position: absolute;
  top: 100%;
  right: 0;
  display: initial;
}
header .header-buttons.verklanking-btn, header button.toggleCorrectAnswer.verklanking-btn, header button.feedbackButton.verklanking-btn {
  background-image: url(/player/static/icons/doe_text_to_speech-hc.svg);
}
.high-contrast-mode header .header-buttons.verklanking-btn, .high-contrast-mode header button.toggleCorrectAnswer.verklanking-btn, .high-contrast-mode header button.feedbackButton.verklanking-btn {
  background-image: url(/player/static/icons/doe_text_to_speech-hc.svg);
}

header .header-buttons.verklanking-btn:hover, header .header-buttons.verklanking-btn:focus-visible, header .header-buttons.verklanking-btn:focus-within, header button.toggleCorrectAnswer.verklanking-btn:hover, header button.toggleCorrectAnswer.verklanking-btn:focus-visible, header button.toggleCorrectAnswer.verklanking-btn:focus-within, header button.feedbackButton.verklanking-btn:hover, header button.feedbackButton.verklanking-btn:focus-visible, header button.feedbackButton.verklanking-btn:focus-within {
  background-image: url(/player/static/icons/doe_text_to_speech-hc.svg);
}
.high-contrast-mode header .header-buttons.verklanking-btn:hover, .high-contrast-mode header .header-buttons.verklanking-btn:focus-visible, .high-contrast-mode header .header-buttons.verklanking-btn:focus-within, .high-contrast-mode header button.toggleCorrectAnswer.verklanking-btn:hover, .high-contrast-mode header button.toggleCorrectAnswer.verklanking-btn:focus-visible, .high-contrast-mode header button.toggleCorrectAnswer.verklanking-btn:focus-within, .high-contrast-mode header button.feedbackButton.verklanking-btn:hover, .high-contrast-mode header button.feedbackButton.verklanking-btn:focus-visible, .high-contrast-mode header button.feedbackButton.verklanking-btn:focus-within {
  background-image: url(/player/static/icons/doe_text_to_speech.svg);
}

header .header-buttons.magnify-btn, header button.toggleCorrectAnswer.magnify-btn, header button.feedbackButton.magnify-btn {
  background-image: url(/player/static/icons/doe_magnifier-plus-hc.svg);
}
.high-contrast-mode header .header-buttons.magnify-btn, .high-contrast-mode header button.toggleCorrectAnswer.magnify-btn, .high-contrast-mode header button.feedbackButton.magnify-btn {
  background-image: url(/player/static/icons/doe_magnifier-plus-hc.svg);
}

header .header-buttons.magnify-btn:hover, header .header-buttons.magnify-btn:focus-visible, header .header-buttons.magnify-btn:focus-within, header button.toggleCorrectAnswer.magnify-btn:hover, header button.toggleCorrectAnswer.magnify-btn:focus-visible, header button.toggleCorrectAnswer.magnify-btn:focus-within, header button.feedbackButton.magnify-btn:hover, header button.feedbackButton.magnify-btn:focus-visible, header button.feedbackButton.magnify-btn:focus-within {
  background-image: url(/player/static/icons/doe_magnifier-plus-hc.svg);
}
.high-contrast-mode header .header-buttons.magnify-btn:hover, .high-contrast-mode header .header-buttons.magnify-btn:focus-visible, .high-contrast-mode header .header-buttons.magnify-btn:focus-within, .high-contrast-mode header button.toggleCorrectAnswer.magnify-btn:hover, .high-contrast-mode header button.toggleCorrectAnswer.magnify-btn:focus-visible, .high-contrast-mode header button.toggleCorrectAnswer.magnify-btn:focus-within, .high-contrast-mode header button.feedbackButton.magnify-btn:hover, .high-contrast-mode header button.feedbackButton.magnify-btn:focus-visible, .high-contrast-mode header button.feedbackButton.magnify-btn:focus-within {
  background-image: url(/player/static/icons/doe_magnifier-plus.svg);
}

header .header-buttons.magnify-btn.magnified, header button.toggleCorrectAnswer.magnify-btn.magnified, header button.feedbackButton.magnify-btn.magnified {
  background-image: url(/player/static/icons/doe_magnifier-minus-hc.svg);
}
.high-contrast-mode header .header-buttons.magnify-btn.magnified, .high-contrast-mode header button.toggleCorrectAnswer.magnify-btn.magnified, .high-contrast-mode header button.feedbackButton.magnify-btn.magnified {
  background-image: url(/player/static/icons/doe_magnifier-minus-hc.svg);
}

header .header-buttons.magnify-btn.magnified:hover, header .header-buttons.magnify-btn.magnified:focus-visible, header .header-buttons.magnify-btn.magnified:focus-within, header button.toggleCorrectAnswer.magnify-btn.magnified:hover, header button.toggleCorrectAnswer.magnify-btn.magnified:focus-visible, header button.toggleCorrectAnswer.magnify-btn.magnified:focus-within, header button.feedbackButton.magnify-btn.magnified:hover, header button.feedbackButton.magnify-btn.magnified:focus-visible, header button.feedbackButton.magnify-btn.magnified:focus-within {
  background-image: url(/player/static/icons/doe_magnifier-minus-hc.svg);
}
.high-contrast-mode header .header-buttons.magnify-btn.magnified:hover, .high-contrast-mode header .header-buttons.magnify-btn.magnified:focus-visible, .high-contrast-mode header .header-buttons.magnify-btn.magnified:focus-within, .high-contrast-mode header button.toggleCorrectAnswer.magnify-btn.magnified:hover, .high-contrast-mode header button.toggleCorrectAnswer.magnify-btn.magnified:focus-visible, .high-contrast-mode header button.toggleCorrectAnswer.magnify-btn.magnified:focus-within, .high-contrast-mode header button.feedbackButton.magnify-btn.magnified:hover, .high-contrast-mode header button.feedbackButton.magnify-btn.magnified:focus-visible, .high-contrast-mode header button.feedbackButton.magnify-btn.magnified:focus-within {
  background-image: url(/player/static/icons/doe_magnifier-minus.svg);
}

header .header-buttons.help-btn, header button.toggleCorrectAnswer.help-btn, header button.feedbackButton.help-btn {
  /* TODO share this with the other containers */
}
header .header-buttons.help-btn, header button.toggleCorrectAnswer.help-btn, header button.feedbackButton.help-btn {
  background-image: url(/player/static/icons/doe_help-hc.svg);
}
.high-contrast-mode header .header-buttons.help-btn, .high-contrast-mode header button.toggleCorrectAnswer.help-btn, .high-contrast-mode header button.feedbackButton.help-btn {
  background-image: url(/player/static/icons/doe_help-hc.svg);
}

header .header-buttons.help-btn:hover, header .header-buttons.help-btn:focus-visible, header .header-buttons.help-btn:focus-within, header button.toggleCorrectAnswer.help-btn:hover, header button.toggleCorrectAnswer.help-btn:focus-visible, header button.toggleCorrectAnswer.help-btn:focus-within, header button.feedbackButton.help-btn:hover, header button.feedbackButton.help-btn:focus-visible, header button.feedbackButton.help-btn:focus-within {
  background-image: url(/player/static/icons/doe_help-hc.svg);
}
.high-contrast-mode header .header-buttons.help-btn:hover, .high-contrast-mode header .header-buttons.help-btn:focus-visible, .high-contrast-mode header .header-buttons.help-btn:focus-within, .high-contrast-mode header button.toggleCorrectAnswer.help-btn:hover, .high-contrast-mode header button.toggleCorrectAnswer.help-btn:focus-visible, .high-contrast-mode header button.toggleCorrectAnswer.help-btn:focus-within, .high-contrast-mode header button.feedbackButton.help-btn:hover, .high-contrast-mode header button.feedbackButton.help-btn:focus-visible, .high-contrast-mode header button.feedbackButton.help-btn:focus-within {
  background-image: url(/player/static/icons/doe_help.svg);
}

header .header-buttons.help-btn .help-container, header button.toggleCorrectAnswer.help-btn .help-container, header button.feedbackButton.help-btn .help-container {
  z-index: 1;
  cursor: auto;
  display: none;
  padding: 1.5em 2em;
  box-shadow: var(--shadow);
  border-radius: 16px;
  width: min(50em, 75vw); /* 50em is preferred, but for smaller screens take 75% of view-width */
  height: fit-content;
  max-height: calc(100vh - 100%);
  box-sizing: border-box;
  overflow: auto;
}
header .header-buttons.help-btn .help-container, header button.toggleCorrectAnswer.help-btn .help-container, header button.feedbackButton.help-btn .help-container {
  background-color: #fff;
}
.high-contrast-mode header .header-buttons.help-btn .help-container, .high-contrast-mode header button.toggleCorrectAnswer.help-btn .help-container, .high-contrast-mode header button.feedbackButton.help-btn .help-container {
  background-color: #303030;
}

header .header-buttons.help-btn .help-container div:not(.item-marking) svg *, header button.toggleCorrectAnswer.help-btn .help-container div:not(.item-marking) svg *, header button.feedbackButton.help-btn .help-container div:not(.item-marking) svg * {
  fill: #44318d;
}
.high-contrast-mode header .header-buttons.help-btn .help-container div:not(.item-marking) svg *, .high-contrast-mode header button.toggleCorrectAnswer.help-btn .help-container div:not(.item-marking) svg *, .high-contrast-mode header button.feedbackButton.help-btn .help-container div:not(.item-marking) svg * {
  fill: #fff;
}

header .header-buttons.help-btn .help-container div.item-marking svg *, header button.toggleCorrectAnswer.help-btn .help-container div.item-marking svg *, header button.feedbackButton.help-btn .help-container div.item-marking svg * {
  fill: #fff;
}
.high-contrast-mode header .header-buttons.help-btn .help-container div.item-marking svg *, .high-contrast-mode header button.toggleCorrectAnswer.help-btn .help-container div.item-marking svg *, .high-contrast-mode header button.feedbackButton.help-btn .help-container div.item-marking svg * {
  fill: #212121;
}

header .header-buttons.help-btn:focus .help-container, header .header-buttons.help-btn:focus-within .help-container, header button.toggleCorrectAnswer.help-btn:focus .help-container, header button.toggleCorrectAnswer.help-btn:focus-within .help-container, header button.feedbackButton.help-btn:focus .help-container, header button.feedbackButton.help-btn:focus-within .help-container {
  z-index: 1;
  position: absolute;
  top: 100%;
  right: 0;
  display: initial;
}
header .header-buttons.volume-btn, header .header-buttons.verklanking-btn, header .header-buttons.magnify-btn, header .header-buttons.help-btn, header button.toggleCorrectAnswer.volume-btn, header button.toggleCorrectAnswer.verklanking-btn, header button.toggleCorrectAnswer.magnify-btn, header button.toggleCorrectAnswer.help-btn, header button.feedbackButton.volume-btn, header button.feedbackButton.verklanking-btn, header button.feedbackButton.magnify-btn, header button.feedbackButton.help-btn {
  height: var(--header-height);
  width: var(--header-height);
  min-height: var(--header-height);
  min-width: var(--header-height);
  background-size: 85%; /* Icons are pretty big, scale 'em down a bit */
}
header .header-buttons:hover, header .header-buttons:focus-visible, header .header-buttons:focus-within,
header .header-buttons .overview-btn.active,
header .header-buttons .toggleCorrectAnswer.active,
header .header-buttons .feedbackButton.active, header button.toggleCorrectAnswer:hover, header button.toggleCorrectAnswer:focus-visible, header button.toggleCorrectAnswer:focus-within,
header button.toggleCorrectAnswer .overview-btn.active,
header button.toggleCorrectAnswer .toggleCorrectAnswer.active,
header button.toggleCorrectAnswer .feedbackButton.active, header button.feedbackButton:hover, header button.feedbackButton:focus-visible, header button.feedbackButton:focus-within,
header button.feedbackButton .overview-btn.active,
header button.feedbackButton .toggleCorrectAnswer.active,
header button.feedbackButton .feedbackButton.active {
  background-color: #676bac;
}
.high-contrast-mode header .header-buttons:hover, .high-contrast-mode header .header-buttons:focus-visible, .high-contrast-mode header .header-buttons:focus-within, .high-contrast-mode header .header-buttons .overview-btn.active, .high-contrast-mode header .header-buttons .toggleCorrectAnswer.active, .high-contrast-mode header .header-buttons .feedbackButton.active, .high-contrast-mode header button.toggleCorrectAnswer:hover, .high-contrast-mode header button.toggleCorrectAnswer:focus-visible, .high-contrast-mode header button.toggleCorrectAnswer:focus-within, .high-contrast-mode header button.toggleCorrectAnswer .overview-btn.active, .high-contrast-mode header button.toggleCorrectAnswer .toggleCorrectAnswer.active, .high-contrast-mode header button.toggleCorrectAnswer .feedbackButton.active, .high-contrast-mode header button.feedbackButton:hover, .high-contrast-mode header button.feedbackButton:focus-visible, .high-contrast-mode header button.feedbackButton:focus-within, .high-contrast-mode header button.feedbackButton .overview-btn.active, .high-contrast-mode header button.feedbackButton .toggleCorrectAnswer.active, .high-contrast-mode header button.feedbackButton .feedbackButton.active {
  background-color: #fff;
}

header .header-buttons:hover, header .header-buttons:focus-visible, header .header-buttons:focus-within,
header .header-buttons .overview-btn.active,
header .header-buttons .toggleCorrectAnswer.active,
header .header-buttons .feedbackButton.active, header button.toggleCorrectAnswer:hover, header button.toggleCorrectAnswer:focus-visible, header button.toggleCorrectAnswer:focus-within,
header button.toggleCorrectAnswer .overview-btn.active,
header button.toggleCorrectAnswer .toggleCorrectAnswer.active,
header button.toggleCorrectAnswer .feedbackButton.active, header button.feedbackButton:hover, header button.feedbackButton:focus-visible, header button.feedbackButton:focus-within,
header button.feedbackButton .overview-btn.active,
header button.feedbackButton .toggleCorrectAnswer.active,
header button.feedbackButton .feedbackButton.active {
  color: #fff;
}
.high-contrast-mode header .header-buttons:hover, .high-contrast-mode header .header-buttons:focus-visible, .high-contrast-mode header .header-buttons:focus-within, .high-contrast-mode header .header-buttons .overview-btn.active, .high-contrast-mode header .header-buttons .toggleCorrectAnswer.active, .high-contrast-mode header .header-buttons .feedbackButton.active, .high-contrast-mode header button.toggleCorrectAnswer:hover, .high-contrast-mode header button.toggleCorrectAnswer:focus-visible, .high-contrast-mode header button.toggleCorrectAnswer:focus-within, .high-contrast-mode header button.toggleCorrectAnswer .overview-btn.active, .high-contrast-mode header button.toggleCorrectAnswer .toggleCorrectAnswer.active, .high-contrast-mode header button.toggleCorrectAnswer .feedbackButton.active, .high-contrast-mode header button.feedbackButton:hover, .high-contrast-mode header button.feedbackButton:focus-visible, .high-contrast-mode header button.feedbackButton:focus-within, .high-contrast-mode header button.feedbackButton .overview-btn.active, .high-contrast-mode header button.feedbackButton .toggleCorrectAnswer.active, .high-contrast-mode header button.feedbackButton .feedbackButton.active {
  color: rgba(0, 0, 0, 0.8);
}

header .header-parts {
  display: flex;
  align-items: center;
  padding: 0 16px;
  height: fit-content;
  min-height: var(--header-height);
  flex-wrap: wrap;
}
header .header-parts {
  background-color: #44318d;
}
.high-contrast-mode header .header-parts {
  background-color: #303030;
}

header .header-parts .header-part {
  display: flex;
  height: 100%;
}
header .header-parts .header-part h3 {
  font-weight: normal;
}
header .header-parts .header-part.left {
  flex: 1;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
}
header .header-parts .header-part.left h3#header-candidate-name {
  color: #fff;
}
header .header-parts .header-part.center {
  flex: 1;
  display: flex;
  justify-content: center;
}
header .header-parts .header-part.center .doe-logo {
  height: var(--header-height);
  width: 100px;
  -webkit-mask-image: url(/player/static/icons/doe_logo.svg);
  mask-image: url(/player/static/icons/doe_logo.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-color: #fff;
}
header .header-parts .header-part.center h3 {
  color: #fff;
  white-space: nowrap;
  line-height: var(--header-height);
}
header .header-parts .header-part.right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  position: relative;
  z-index: 1;
}
header .tools-dropdown {
  position: relative;
  display: flex;
  height: 70px;
}
header .tools-dropdown-content {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
header .tools-dropdown-content button.tool-button {
  background-color: transparent;
  width: var(--header-height);
  height: var(--header-height);
  padding: 0 0.5em;
  font-size: 0; /* don't show the tool's title, only show the icon */
  font-weight: bold;
  color: transparent;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  background-image: url(/player/static/icons/doe_help-hc.svg); /* Should be overwritten per tool! */
  background-size: 85%; /* Icons are pretty big, scale 'em down a bit */
  background-position: center;
  background-repeat: no-repeat;
  /* A different help tool button is used! Hide this one. */
}
header .tools-dropdown-content button.tool-button.marker {
  background-image: url(/player/static/icons/doe_marker-hc.svg);
}
.high-contrast-mode header .tools-dropdown-content button.tool-button.marker {
  background-image: url(/player/static/icons/doe_marker-hc.svg);
}

header .tools-dropdown-content button.tool-button.marker.marker-will-do-nothing, header .tools-dropdown-content button.tool-button.marker:not(.marker-will-mark):not(.marker-will-unmark) {
  opacity: 0.5;
  cursor: not-allowed;
}
header .tools-dropdown-content button.tool-button.marker.marker-will-mark:hover, header .tools-dropdown-content button.tool-button.marker.marker-will-mark:focus, header .tools-dropdown-content button.tool-button.marker.marker-will-mark:focus-visible {
  background-image: url(/player/static/icons/doe_marker-hc.svg);
}
.high-contrast-mode header .tools-dropdown-content button.tool-button.marker.marker-will-mark:hover, .high-contrast-mode header .tools-dropdown-content button.tool-button.marker.marker-will-mark:focus, .high-contrast-mode header .tools-dropdown-content button.tool-button.marker.marker-will-mark:focus-visible {
  background-image: url(/player/static/icons/doe_marker.svg);
}

header .tools-dropdown-content button.tool-button.marker.marker-will-unmark {
  background-image: url(/player/static/icons/doe_unmarker-hc.svg);
}
.high-contrast-mode header .tools-dropdown-content button.tool-button.marker.marker-will-unmark {
  background-image: url(/player/static/icons/doe_unmarker-hc.svg);
}

header .tools-dropdown-content button.tool-button.marker.marker-will-unmark:hover, header .tools-dropdown-content button.tool-button.marker.marker-will-unmark:focus, header .tools-dropdown-content button.tool-button.marker.marker-will-unmark:focus-visible {
  background-image: url(/player/static/icons/doe_unmarker-hc.svg);
}
.high-contrast-mode header .tools-dropdown-content button.tool-button.marker.marker-will-unmark:hover, .high-contrast-mode header .tools-dropdown-content button.tool-button.marker.marker-will-unmark:focus, .high-contrast-mode header .tools-dropdown-content button.tool-button.marker.marker-will-unmark:focus-visible {
  background-image: url(/player/static/icons/doe_unmarker.svg);
}

header .tools-dropdown-content button.tool-button.symbolPicker {
  background-image: url(/player/static/icons/doe_letterplankje-hc.svg);
}
.high-contrast-mode header .tools-dropdown-content button.tool-button.symbolPicker {
  background-image: url(/player/static/icons/doe_letterplankje-hc.svg);
}

header .tools-dropdown-content button.tool-button.symbolPicker:hover, header .tools-dropdown-content button.tool-button.symbolPicker:focus-visible, header .tools-dropdown-content button.tool-button.symbolPicker.active {
  background-image: url(/player/static/icons/doe_letterplankje-hc.svg);
}
.high-contrast-mode header .tools-dropdown-content button.tool-button.symbolPicker:hover, .high-contrast-mode header .tools-dropdown-content button.tool-button.symbolPicker:focus-visible, .high-contrast-mode header .tools-dropdown-content button.tool-button.symbolPicker.active {
  background-image: url(/player/static/icons/doe_letterplankje.svg);
}

header .tools-dropdown-content button.tool-button.calculator {
  background-image: url(/player/static/icons/cal-hc.svg);
}
.high-contrast-mode header .tools-dropdown-content button.tool-button.calculator {
  background-image: url(/player/static/icons/cal-hc.svg);
}

header .tools-dropdown-content button.tool-button.calculator:hover, header .tools-dropdown-content button.tool-button.calculator:focus-visible, header .tools-dropdown-content button.tool-button.calculator.active {
  background-image: url(/player/static/icons/cal-hc.svg);
}
.high-contrast-mode header .tools-dropdown-content button.tool-button.calculator:hover, .high-contrast-mode header .tools-dropdown-content button.tool-button.calculator:focus-visible, .high-contrast-mode header .tools-dropdown-content button.tool-button.calculator.active {
  background-image: url(/player/static/icons/cal.svg);
}

header .tools-dropdown-content button.tool-button.ruler {
  background-image: url(/player/static/icons/doe_ruler-hc.svg);
}
.high-contrast-mode header .tools-dropdown-content button.tool-button.ruler {
  background-image: url(/player/static/icons/doe_ruler-hc.svg);
}

header .tools-dropdown-content button.tool-button.ruler:hover, header .tools-dropdown-content button.tool-button.ruler:focus-visible, header .tools-dropdown-content button.tool-button.ruler.active {
  background-image: url(/player/static/icons/doe_ruler-hc.svg);
}
.high-contrast-mode header .tools-dropdown-content button.tool-button.ruler:hover, .high-contrast-mode header .tools-dropdown-content button.tool-button.ruler:focus-visible, .high-contrast-mode header .tools-dropdown-content button.tool-button.ruler.active {
  background-image: url(/player/static/icons/doe_ruler.svg);
}

header .tools-dropdown-content button.tool-button.reading-ruler {
  background-image: url(/player/static/icons/doe_reading-ruler-hc.svg);
}
.high-contrast-mode header .tools-dropdown-content button.tool-button.reading-ruler {
  background-image: url(/player/static/icons/doe_reading-ruler-hc.svg);
}

header .tools-dropdown-content button.tool-button.reading-ruler:hover, header .tools-dropdown-content button.tool-button.reading-ruler:focus-visible, header .tools-dropdown-content button.tool-button.reading-ruler:focus, header .tools-dropdown-content button.tool-button.reading-ruler.active {
  background-image: url(/player/static/icons/doe_reading-ruler-hc.svg);
}
.high-contrast-mode header .tools-dropdown-content button.tool-button.reading-ruler:hover, .high-contrast-mode header .tools-dropdown-content button.tool-button.reading-ruler:focus-visible, .high-contrast-mode header .tools-dropdown-content button.tool-button.reading-ruler:focus, .high-contrast-mode header .tools-dropdown-content button.tool-button.reading-ruler.active {
  background-image: url(/player/static/icons/doe_reading-ruler.svg);
}

header .tools-dropdown-content button.tool-button.help, header .tools-dropdown-content button.tool-button.text-to-speech {
  display: none;
  pointer-events: none;
}
header .tools-dropdown-content button.tool-button:hover, header .tools-dropdown-content button.tool-button:focus, header .tools-dropdown-content button.tool-button.active:not(.marker) {
  background-color: #676bac;
}
.high-contrast-mode header .tools-dropdown-content button.tool-button:hover, .high-contrast-mode header .tools-dropdown-content button.tool-button:focus, .high-contrast-mode header .tools-dropdown-content button.tool-button.active:not(.marker) {
  background-color: #fff;
}

header .tools-dropdown:hover .tools-button {
  background-color: #3e8e41;
}
header .tools.accessibility-tools.magnification {
  position: relative;
}
header .tools.accessibility-tools.magnification #magnify-panel.magnify-tooltip {
  position: absolute;
  right: 0;
  top: 0.7rem;
  background: transparent;
  margin-right: 10px;
}
header .tools.accessibility-tools.magnification #magnify-panel.magnify-tooltip:after {
  display: none;
}
header .tools.accessibility-tools.magnification #magnify-panel.magnify-tooltip button {
  background: linear-gradient(180.55deg, #ba9bd8 -5.87%, #44318d 105.41%);
  height: 30px;
  width: 30px;
  color: #fff;
  line-height: 28px;
  border: 1px solid #fff;
  padding: 0;
  margin: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-size: 19px;
  font-weight: bold;
}
header .tools.accessibility-tools.magnification #magnify-panel.magnify-tooltip button {
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
}
header .tools.accessibility-tools.magnification #magnify-panel.magnify-tooltip button:hover {
  background-image: linear-gradient(173.99deg, #22E191 2.07%, #0BB6FF 103.33%);
}
header .tools.accessibility-tools.magnification #magnify-panel.magnify-tooltip #scalePercentage {
  background-image: linear-gradient(180.55deg, #ba9bd8 -5.87%, #44318d 105.41%);
  -webkit-background-clip: text;
  color: transparent;
  margin: 0 10px;
}

body.magnified > header > .header-parts > .header-part > .help-btn > .help-container {
  max-height: calc(66vh - 100%);
  max-width: min(50em, 50vw);
}

/* Small screen res */
@media screen and (max-width: 700px) {
  header .header-parts .header-part.center {
    justify-content: flex-end;
  }
  header .header-parts .header-part.right {
    min-width: 100%;
  }
  header div.overview {
    height: calc(100% - var(--header-height) * 2);
  }
  header div.overview .overview-container {
    margin: 48px auto;
  }
}
div[role=main] {
  display: flex;
  margin: auto;
  height: 100%;
  -webkit-overflow-scrolling: touch;
  z-index: 100;
  background-repeat: no-repeat;
  background-size: cover;
  /* TODO not sure if this is the right spot. Perhaps `base.scss`? */
}
div[role=main] {
  background-color: #ebe7ee;
}
.high-contrast-mode div[role=main] {
  background-color: #000000;
}

div[role=main] {
  background-image: url("/player/static/img/background.svg");
}
.high-contrast-mode div[role=main] {
  background-image: none;
}

div[role=main] img {
  filter: unset;
}
.high-contrast-mode div[role=main] img {
  filter: grayscale(1) contrast(1.5);
}

div[role=main] .test-container {
  position: relative;
  width: 100vw;
  overflow: auto;
}
div[role=main] h3 {
  font-size: 1.5rem;
  font-weight: normal;
  margin: 2rem 0 1rem 0;
}
div[role=main] h3, div[role=main] h3 * {
  color: #44318d;
}
.high-contrast-mode div[role=main] h3, .high-contrast-mode div[role=main] h3 * {
  color: #fff;
}

div[role=main] p {
  line-height: 1.5rem;
  font-size: 1rem;
}
div[role=main] p.subtitle {
  font-size: 1.2rem;
  margin-left: 10%;
  margin-right: 10%;
  margin-bottom: 10%;
}

body.question {
  display: flex;
  flex-direction: column;
}
body.question div#contentWindow {
  height: fit-content;
  flex: 1;
  overflow: auto;
  position: relative;
}
body.question div#main {
  /* Overwrite what QTI's Shared Vocab defines, because Cito wants different behaviour from qti-well */
  /* Cito Stichting text highlighter */
}
body.question div#main .test-container {
  height: 100%;
}
body.question div#main .qti-well {
  border: none;
  border-radius: unset;
  box-shadow: unset;
  margin-bottom: 0;
  min-height: unset;
  padding: 0;
}
body.question div#main .dep-mark,
body.question div#main .qti-well {
  color: rgba(0, 0, 0, 0.8);
}
body.question div#main .dep-mark,
body.question div#main .qti-well {
  background-color: cyan;
}
.high-contrast-mode body.question div#main .dep-mark, .high-contrast-mode body.question div#main .qti-well {
  background-color: #fff;
}

body.question div#main p.dep-mark {
  display: block;
}

/* Cannot be placed in `body` selector, due to `make-high-contrast`-mixin */
.question.high-contrast-mode div#contentWindow div#main .test-container {
  background-color: #000000;
}
.question:not(.high-contrast-mode) div#contentWindow div#main .test-container {
  background-color: #fff;
}

body.exception div#contentWindow,
body.wrong div#contentWindow,
body.start div#contentWindow,
body.media div#contentWindow,
body.overview div#contentWindow,
body.result div#contentWindow,
body.testPartStart div#contentWindow {
  position: relative;
  height: calc(100% - 64px);
}
body.exception div#main .test-container,
body.wrong div#main .test-container,
body.start div#main .test-container,
body.media div#main .test-container,
body.overview div#main .test-container,
body.result div#main .test-container,
body.testPartStart div#main .test-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
body.exception footer,
body.wrong footer,
body.start footer,
body.media footer,
body.overview footer,
body.result footer,
body.testPartStart footer {
  background-color: transparent;
}

body.overview div.overview {
  display: block;
  height: 100%;
}

body.start, body.testPartStart {
  /* On small screen sizes, the footer blocks the "no" and "yes" buttons. */
}
body.start footer, body.testPartStart footer {
  display: none;
}

.start-page, .testPart-start-page {
  display: flex;
  width: 60%;
  height: 75%;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  padding: 2em;
  transition: width 0.33s ease-out, height 0.33s ease-out, border-radius 0.33s ease-out;
  align-items: center;
  border-radius: 48px;
}
.start-page, .testPart-start-page {
  background-color: #fff;
}
.high-contrast-mode .start-page, .high-contrast-mode .testPart-start-page {
  background-color: #303030;
}

.exam-info, .testPart-info {
  align-items: center;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  height: 100%;
}
.exam-info h2, .testPart-info h2 {
  font-size: 48pt;
  text-align: center;
  margin-bottom: 10%;
}
.exam-info p, .testPart-info p {
  font-weight: 300;
  font-size: 1.2rem;
}
.exam-info p.subtitle, .testPart-info p.subtitle {
  font-size: 1.2rem;
  margin-left: 10%;
  margin-right: 10%;
  margin-bottom: 10%;
}

/* TODO medium screen res */
@media screen and (max-width: 900px), screen and (max-height: 825px) {
  .start-page {
    width: calc(100% - 2em);
    height: calc(100% - 2em);
  }
}
/* Small screen res */
@media screen and (max-width: 700px), screen and (max-height: 700px) {
  .start-page {
    width: 100%;
    height: 100%;
    border-radius: 0;
    justify-content: flex-start;
  }
}
.dialog.notepad {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 335px;
  height: 510px;
  margin-left: -167.5px;
  margin-top: -255px;
}
.dialog.notepad .customContent {
  height: 90%;
}

.overlay .dialog,
.dialog {
  --height: 440px;
  --width: 760px;
  height: var(--height);
  min-width: min(var(--width), 100%);
  min-height: min(var(--height), 100%);
  padding: 2rem;
  border: none;
  z-index: 1002;
  /* DIALOG */
}
.overlay .dialog,
.dialog {
  -webkit-border-radius: 32px;
  -moz-border-radius: 32px;
  border-radius: 32px;
}
.overlay .dialog,
.dialog {
  background-color: #fff;
}
.high-contrast-mode .overlay .dialog, .high-contrast-mode .dialog {
  background-color: #000000;
}

.overlay .dialog,
.dialog {
  color: rgba(0, 0, 0, 0.8);
}
.high-contrast-mode .overlay .dialog, .high-contrast-mode .dialog {
  color: #fff;
}

.overlay .dialog,
.dialog {
  box-shadow: 0 8px 16px 0 rgba(145, 158, 171, 0.25);
}
.high-contrast-mode .overlay .dialog, .high-contrast-mode .dialog {
  box-shadow: var(--shadow);
}

.overlay .dialog.confirm, .overlay .dialog.ok,
.dialog.confirm,
.dialog.ok {
  top: 0;
  right: 0;
}
.overlay .dialog .dialog-inner,
.dialog .dialog-inner {
  height: 100%;
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: space-between;
  padding: 0;
}
.overlay .dialog .dialog-inner h3, .overlay .dialog .dialog-inner p,
.dialog .dialog-inner h3,
.dialog .dialog-inner p {
  text-align: center;
}
.overlay .dialog .dialog-inner h3,
.dialog .dialog-inner h3 {
  font-size: 1.5rem;
}
.overlay .dialog .dialog-inner p,
.dialog .dialog-inner p {
  font-size: 1.25rem;
}
.overlay .dialog .dialog-inner .customContent,
.dialog .dialog-inner .customContent {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
}
.overlay .dialog .dialog-inner .content,
.dialog .dialog-inner .content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.overlay .dialog .dialogContent,
.dialog .dialogContent {
  position: absolute;
  left: 0px;
  top: 0px;
  bottom: 0px;
  right: 0px;
  overflow: hidden;
}
.overlay .dialog.ui-resizable .dialogContent,
.dialog.ui-resizable .dialogContent {
  bottom: 1.875rem;
}
.overlay .dialog.feedback,
.dialog.feedback {
  position: absolute;
  width: 80%;
  height: fit-content;
}
.overlay .dialog.feedback,
.dialog.feedback {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50rem;
  min-height: 10rem;
  margin-left: -25rem;
  margin-top: -5rem;
}
.overlay .dialog.feedback .dialog-inner,
.dialog.feedback .dialog-inner {
  position: unset;
  overflow: hidden;
  padding: 2rem 0;
  width: 100%;
  margin: 0;
}
.overlay .dialog.feedback .dialog-inner .dialogContent,
.dialog.feedback .dialog-inner .dialogContent {
  position: unset;
}
.overlay .dialog.feedback .dialog-inner .customContent,
.dialog.feedback .dialog-inner .customContent {
  float: left;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  text-align: left;
  padding: 1.25rem;
}
.overlay .dialog.feedback .dialog-inner .customContent,
.dialog.feedback .dialog-inner .customContent {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.overlay .dialog.feedback .dialog-inner .customContent div.modalFeedback #text,
.dialog.feedback .dialog-inner .customContent div.modalFeedback #text {
  text-align: left;
  padding: 0;
}
.overlay .dialog .resize-handler,
.dialog .resize-handler {
  position: absolute;
  right: 0px;
  bottom: 0px;
  height: 1.25rem;
  width: 1.25rem;
  background-position: 0 0;
  background-repeat: no-repeat;
  line-height: 1.25rem;
  text-align: center;
  cursor: nw-resize;
}
.overlay .dialog .resize-handler,
.dialog .resize-handler {
  background-image: url(/player/static/icons/expand.svg);
}
.high-contrast-mode .overlay .dialog .resize-handler, .high-contrast-mode .dialog .resize-handler {
  background-image: url(/player/static/icons/expand-hc.svg);
}

.overlay .dialog .resize-handler,
.dialog .resize-handler {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.overlay .dialog .ui-resizable-se,
.dialog .ui-resizable-se {
  cursor: se-resize;
  width: 1.875rem;
  height: 1.875rem;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 1rem;
  right: 0;
  bottom: 0;
}
.overlay .dialog .ui-resizable-se,
.dialog .ui-resizable-se {
  background-image: url(/player/static/icons/expand.svg);
}
.high-contrast-mode .overlay .dialog .ui-resizable-se, .high-contrast-mode .dialog .ui-resizable-se {
  background-image: url(/player/static/icons/expand-hc.svg);
}

.overlay .dialog .ui-resizable-handle,
.dialog .ui-resizable-handle {
  position: absolute;
  font-size: 0.1px;
  display: block;
}
.overlay .dialog.draggable .dialog-inner,
.dialog.draggable .dialog-inner {
  height: 100%;
  position: relative;
}
.overlay .dialog.draggable .dialog-inner,
.dialog.draggable .dialog-inner {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.overlay .dialog .dialog-inner .dialog-header,
.dialog .dialog-inner .dialog-header {
  border: 0;
  position: relative;
  display: flex;
  flex-direction: row;
}
.overlay .dialog .dialog-inner .dialog-header .drag-handler,
.dialog .dialog-inner .dialog-header .drag-handler {
  position: absolute;
  background-color: transparent;
  background-image: none;
  height: 100%;
  width: calc(100% - 2rem);
  cursor: move;
}
.overlay .dialog .dialog-inner .dialog-header .drag-handler,
.dialog .dialog-inner .dialog-header .drag-handler {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.overlay .dialog .dialog-inner .dialog-header h3,
.dialog .dialog-inner .dialog-header h3 {
  flex: 1;
  text-align: start;
  padding: 0 0.5rem;
}
.overlay .dialog .dialog-inner .dialog-header .dialog-close,
.dialog .dialog-inner .dialog-header .dialog-close {
  position: relative;
  flex: 0;
  min-width: 2rem;
  min-height: 2rem;
  font-size: 32pt;
  cursor: pointer;
}
.overlay .dialog .dialog-inner .dialog-header .dialog-close,
.dialog .dialog-inner .dialog-header .dialog-close {
  color: rgba(0, 0, 0, 0.8);
}
.high-contrast-mode .overlay .dialog .dialog-inner .dialog-header .dialog-close, .high-contrast-mode .dialog .dialog-inner .dialog-header .dialog-close {
  color: #fff;
}

.overlay .dialog .dialog-inner .dialog-header .dialog-close:hover,
.dialog .dialog-inner .dialog-header .dialog-close:hover {
  color: #676bac;
}
.high-contrast-mode .overlay .dialog .dialog-inner .dialog-header .dialog-close:hover, .high-contrast-mode .dialog .dialog-inner .dialog-header .dialog-close:hover {
  color: rgba(0, 0, 0, 0.8);
}

.overlay .dialog .dialog-inner .dialog-header .dialog-close:hover,
.dialog .dialog-inner .dialog-header .dialog-close:hover {
  background-color: transparent;
}
.high-contrast-mode .overlay .dialog .dialog-inner .dialog-header .dialog-close:hover, .high-contrast-mode .dialog .dialog-inner .dialog-header .dialog-close:hover {
  background-color: #fff;
}

.overlay .dialog .dialog-inner .dialog-content,
.dialog .dialog-inner .dialog-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
}
.overlay .dialog .dialog-inner .dialog-actions,
.dialog .dialog-inner .dialog-actions {
  display: flex;
  width: 75%;
  margin: 0 auto;
  justify-content: center;
  flex: 0;
}

.overlay {
  position: fixed;
  top: -9999px;
  left: -9999px;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.overlay .overlayBackground {
  background: rgba(0, 0, 0, 0);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 500;
}
.overlay .offline {
  background: rgba(0, 0, 0, 0);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 500;
}
.overlay.active {
  top: 0;
  left: 0;
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
}
.overlay.active .offline {
  opacity: 0.9;
}
.overlay.active .offline {
  background: rgba(0, 0, 0, 0.3);
}
.high-contrast-mode .overlay.active .offline {
  background: #212121;
}

.overlay.active .offline {
  -webkit-transition: background 1s ease;
  -moz-transition: background 1s ease;
  transition: background 1s ease;
}
.overlay.active .overlayBackground {
  background: rgba(0, 0, 0, 0.3);
}
.overlay.active .overlayBackground {
  -webkit-transition: background 1s ease;
  -moz-transition: background 1s ease;
  transition: background 1s ease;
}
.overlay.active .dialog {
  display: block;
}

.spinner-ring {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}

.spinner-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 6px solid #44318d;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #fff transparent transparent transparent;
}

.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}

.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}

.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}

@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
footer {
  --nav-button-size: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 64px;
  position: relative;
  left: 0;
  bottom: 0;
  width: 100%;
}
footer {
  background-color: #ebe7ee;
}
.high-contrast-mode footer {
  background-color: #303030;
}

footer button.start, footer button.testPartstart {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 188px;
  height: 42px;
  border-radius: 100px;
  color: #fff;
  position: relative;
  font-weight: bold;
  padding: 4px;
  background: linear-gradient(180.55deg, #ba9bd8 -5.87%, #44318d 105.41%);
  font-size: 1.2rem;
}
footer button.start span.button_label, footer button.testPartstart span.button_label {
  border-radius: 100px;
  height: 100%;
  width: 100%;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
footer button.start span.button_label, footer button.testPartstart span.button_label {
  background: #fff;
}
.high-contrast-mode footer button.start span.button_label, .high-contrast-mode footer button.testPartstart span.button_label {
  background: #000000;
}

footer button.start div.spinner, footer button.testPartstart div.spinner {
  pointer-events: none;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
  display: none;
  border-radius: 100px;
  margin: auto;
}
footer button.start div.spinner, footer button.testPartstart div.spinner {
  background: #fff;
}
.high-contrast-mode footer button.start div.spinner, .high-contrast-mode footer button.testPartstart div.spinner {
  background: #000000;
}

footer button.start:hover, footer button.testPartstart:hover {
  background: linear-gradient(173.99deg, #22E191 2.07%, #0BB6FF 103.33%);
}
footer button.start:hover span.button_label .text-gradient, footer button.testPartstart:hover span.button_label .text-gradient {
  background-image: linear-gradient(173.99deg, #22E191 2.07%, #0BB6FF 103.33%);
}
footer button.start.disabled, footer button.testPartstart.disabled {
  background: #919EAB;
  pointer-events: none;
}
footer button.start.disabled span.button_label .text-gradient, footer button.testPartstart.disabled span.button_label .text-gradient {
  color: #919EAB;
  background-image: unset;
}
footer button.next, footer button.prev {
  height: 64px;
  width: 64px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
footer button.next, footer button.prev {
  background-color: #44318d;
}
.high-contrast-mode footer button.next, .high-contrast-mode footer button.prev {
  background-color: #212121;
}

footer button.next svg, footer button.prev svg {
  width: 24pt;
  height: 25pt;
  stroke-width: 5pt;
}
footer button.next:hover, footer button.next:focus-visible, footer button.prev:hover, footer button.prev:focus-visible {
  background-color: #676bac;
}
.high-contrast-mode footer button.next:hover, .high-contrast-mode footer button.next:focus-visible, .high-contrast-mode footer button.prev:hover, .high-contrast-mode footer button.prev:focus-visible {
  background-color: #ebe7ee;
}

footer button.next:hover svg, footer button.next:focus-visible svg, footer button.prev:hover svg, footer button.prev:focus-visible svg {
  stroke: #fff;
}
.high-contrast-mode footer button.next:hover svg, .high-contrast-mode footer button.next:focus-visible svg, .high-contrast-mode footer button.prev:hover svg, .high-contrast-mode footer button.prev:focus-visible svg {
  stroke: rgba(0, 0, 0, 0.8);
}

footer div.saveAnswer {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
footer div.saveAnswer .navbar-items {
  display: flex;
  flex: 1;
  visibility: hidden;
}
footer #navbar-items-before {
  display: flex;
  justify-content: end;
  flex-grow: 1;
  width: 100%;
}
footer #navbar-items-active {
  display: flex;
  justify-content: center;
  flex-shrink: 0;
  flex-grow: 0;
  width: fit-content;
}
footer #navbar-items-active a.nav-item, footer #navbar-items-active button.nav-item {
  display: flex;
}
footer #navbar-items-active a.nav-item, footer #navbar-items-active button.nav-item {
  background-color: #44318d;
}
.high-contrast-mode footer #navbar-items-active a.nav-item, .high-contrast-mode footer #navbar-items-active button.nav-item {
  background-color: #fff;
}

footer #navbar-items-active a.nav-item .navigation-item, footer #navbar-items-active button.nav-item .navigation-item {
  background: transparent;
}
footer #navbar-items-active a.nav-item .navigation-item .text-gradient, footer #navbar-items-active button.nav-item .navigation-item .text-gradient {
  color: #fff;
}
.high-contrast-mode footer #navbar-items-active a.nav-item .navigation-item .text-gradient, .high-contrast-mode footer #navbar-items-active button.nav-item .navigation-item .text-gradient {
  color: rgba(0, 0, 0, 0.8);
}

footer #navbar-items-after {
  display: flex;
  justify-content: start;
  flex-grow: 1;
  width: 100%;
}
footer a.nav-item, footer button.nav-item {
  display: flex;
  margin: calc(var(--nav-button-size) * 0.1);
  width: var(--nav-button-size);
  height: var(--nav-button-size);
  color: #fff;
  font-weight: bold;
  font-size: calc(var(--nav-button-size) * 0.5);
  position: relative;
}
footer a.nav-item, footer button.nav-item {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
footer a.nav-item:not(:disabled), footer button.nav-item:not(:disabled) {
  cursor: pointer;
}
footer a.nav-item .navigation-item, footer button.nav-item .navigation-item {
  border-radius: 50%;
  border: none;
  height: calc(var(--nav-button-size) * 0.85);
  width: calc(var(--nav-button-size) * 0.85);
  margin: auto;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
footer a.nav-item .navigation-item .text-gradient, footer button.nav-item .navigation-item .text-gradient {
  line-height: calc(var(--nav-button-size) * 0.85);
}
footer a.nav-item .navigation-item .text-gradient, footer button.nav-item .navigation-item .text-gradient {
  color: #44318d;
}
.high-contrast-mode footer a.nav-item .navigation-item .text-gradient, .high-contrast-mode footer button.nav-item .navigation-item .text-gradient {
  color: #fff;
}

footer a.nav-item.unanswered, footer button.nav-item.unanswered {
  background-color: #44318d;
}
.high-contrast-mode footer a.nav-item.unanswered, .high-contrast-mode footer button.nav-item.unanswered {
  background-color: #fff;
}

footer a.nav-item.unanswered .navigation-item, footer button.nav-item.unanswered .navigation-item {
  background: #fff;
}
.high-contrast-mode footer a.nav-item.unanswered .navigation-item, .high-contrast-mode footer button.nav-item.unanswered .navigation-item {
  background: #000000;
}

footer a.nav-item.answered, footer a.nav-item#overview-button.active, footer button.nav-item.answered, footer button.nav-item#overview-button.active {
  background-color: #676bac;
}
.high-contrast-mode footer a.nav-item.answered, .high-contrast-mode footer a.nav-item#overview-button.active, .high-contrast-mode footer button.nav-item.answered, .high-contrast-mode footer button.nav-item#overview-button.active {
  background-color: #212121;
}

footer a.nav-item.answered .navigation-item, footer a.nav-item#overview-button.active .navigation-item, footer button.nav-item.answered .navigation-item, footer button.nav-item#overview-button.active .navigation-item {
  border: none;
}
footer a.nav-item.answered .navigation-item, footer a.nav-item#overview-button.active .navigation-item, footer button.nav-item.answered .navigation-item, footer button.nav-item#overview-button.active .navigation-item {
  background-color: transparent;
}
.high-contrast-mode footer a.nav-item.answered .navigation-item, .high-contrast-mode footer a.nav-item#overview-button.active .navigation-item, .high-contrast-mode footer button.nav-item.answered .navigation-item, .high-contrast-mode footer button.nav-item#overview-button.active .navigation-item {
  background-color: #212121;
}

footer a.nav-item.answered .navigation-item .text-gradient, footer a.nav-item#overview-button.active .navigation-item .text-gradient, footer button.nav-item.answered .navigation-item .text-gradient, footer button.nav-item#overview-button.active .navigation-item .text-gradient {
  color: #fff;
}
footer a.nav-item#overview-button .navigation-item > .text-gradient, footer button.nav-item#overview-button .navigation-item > .text-gradient {
  width: 100%;
  height: 100%;
  mask-image: url("/player/static/icons/doe_hamburger.svg");
  -webkit-mask-image: url("/player/static/icons/doe_hamburger.svg");
  mask-repeat: no-repeat;
}
footer a.nav-item#overview-button .navigation-item > .text-gradient, footer button.nav-item#overview-button .navigation-item > .text-gradient {
  background-color: #44318d;
}
.high-contrast-mode footer a.nav-item#overview-button .navigation-item > .text-gradient, .high-contrast-mode footer button.nav-item#overview-button .navigation-item > .text-gradient {
  background-color: #fff;
}

footer a.nav-item#overview-button.active .navigation-item > .text-gradient, footer a.nav-item#overview-button:hover .navigation-item > .text-gradient, footer a.nav-item#overview-button:focus .navigation-item > .text-gradient, footer button.nav-item#overview-button.active .navigation-item > .text-gradient, footer button.nav-item#overview-button:hover .navigation-item > .text-gradient, footer button.nav-item#overview-button:focus .navigation-item > .text-gradient {
  background-color: #fff;
}
.high-contrast-mode footer a.nav-item#overview-button.active .navigation-item > .text-gradient, .high-contrast-mode footer a.nav-item#overview-button:hover .navigation-item > .text-gradient, .high-contrast-mode footer a.nav-item#overview-button:focus .navigation-item > .text-gradient, .high-contrast-mode footer button.nav-item#overview-button.active .navigation-item > .text-gradient, .high-contrast-mode footer button.nav-item#overview-button:hover .navigation-item > .text-gradient, .high-contrast-mode footer button.nav-item#overview-button:focus .navigation-item > .text-gradient {
  background-color: rgba(0, 0, 0, 0.8);
}

footer a.nav-item.current, footer button.nav-item.current {
  color: #fff;
}
footer a.nav-item.marked:after, footer button.nav-item.marked:after {
  content: "";
  position: absolute;
  height: calc(var(--nav-button-size) * 0.5);
  width: calc(var(--nav-button-size) * 0.5);
  right: -10%;
  top: -10%;
  background-image: url(/player/static/icons/doe_mark.svg);
  background-size: 80%;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
}
footer a.nav-item.marked:after, footer button.nav-item.marked:after {
  background-color: #cf707a;
}
.high-contrast-mode footer a.nav-item.marked:after, .high-contrast-mode footer button.nav-item.marked:after {
  background-color: #000000;
}

footer a.nav-item:hover:not(:disabled), footer a.nav-item:focus-visible:not(:disabled), footer button.nav-item:hover:not(:disabled), footer button.nav-item:focus-visible:not(:disabled) {
  background-color: #44318d;
}
.high-contrast-mode footer a.nav-item:hover:not(:disabled), .high-contrast-mode footer a.nav-item:focus-visible:not(:disabled), .high-contrast-mode footer button.nav-item:hover:not(:disabled), .high-contrast-mode footer button.nav-item:focus-visible:not(:disabled) {
  background-color: #fff;
}

footer a.nav-item:hover:not(:disabled) .navigation-item, footer a.nav-item:focus-visible:not(:disabled) .navigation-item, footer button.nav-item:hover:not(:disabled) .navigation-item, footer button.nav-item:focus-visible:not(:disabled) .navigation-item {
  background-color: #44318d;
}
.high-contrast-mode footer a.nav-item:hover:not(:disabled) .navigation-item, .high-contrast-mode footer a.nav-item:focus-visible:not(:disabled) .navigation-item, .high-contrast-mode footer button.nav-item:hover:not(:disabled) .navigation-item, .high-contrast-mode footer button.nav-item:focus-visible:not(:disabled) .navigation-item {
  background-color: #fff;
}

footer a.nav-item:hover:not(:disabled) .navigation-item .text-gradient, footer a.nav-item:focus-visible:not(:disabled) .navigation-item .text-gradient, footer button.nav-item:hover:not(:disabled) .navigation-item .text-gradient, footer button.nav-item:focus-visible:not(:disabled) .navigation-item .text-gradient {
  color: #fff;
}
.high-contrast-mode footer a.nav-item:hover:not(:disabled) .navigation-item .text-gradient, .high-contrast-mode footer a.nav-item:focus-visible:not(:disabled) .navigation-item .text-gradient, .high-contrast-mode footer button.nav-item:hover:not(:disabled) .navigation-item .text-gradient, .high-contrast-mode footer button.nav-item:focus-visible:not(:disabled) .navigation-item .text-gradient {
  color: rgba(0, 0, 0, 0.8);
}

button.marking {
  position: absolute;
  right: 1.75rem;
  top: 0.5rem;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 0;
  border-radius: 50%;
  cursor: pointer;
  z-index: 1;
}
button.marking {
  border: 2px solid #cf707a;
}
.high-contrast-mode button.marking {
  border: 2px solid white;
}

button.marking {
  background-color: white;
}
.high-contrast-mode button.marking {
  background-color: #212121;
}

button.marking:after {
  content: " ";
  position: absolute;
  top: 10%;
  left: 10%;
  height: 80%;
  width: 80%;
  -webkit-mask-image: url(/player/static/icons/doe_mark_stroke.svg);
  mask-image: url(/player/static/icons/doe_mark_stroke.svg);
  background-repeat: no-repeat;
}
button.marking:after {
  background-color: #cf707a;
}
.high-contrast-mode button.marking:after {
  background-color: white;
}

button.marking.marked {
  background: #cf707a;
}
.high-contrast-mode button.marking.marked {
  background: white;
}

button.marking.marked:after {
  -webkit-mask-image: url(/player/static/icons/doe_mark.svg);
  mask-image: url(/player/static/icons/doe_mark.svg);
}
button.marking.marked:after {
  background-color: #fff;
}
.high-contrast-mode button.marking.marked:after {
  background-color: #000000;
}

button.nav-button,
a.nav-button,
div#contentWindow ~ div.reconnect button#reconnectButton.nav-button {
  --hover-color: #676bac;
  margin: 1em;
  position: relative;
  box-sizing: border-box;
  white-space: nowrap;
  font-size: 16pt;
  padding: 1.5em;
  height: 42px;
  width: fit-content;
  min-width: 175px;
  font-weight: bold;
  cursor: pointer;
  text-align: center;
  border: 2px solid;
  border-radius: 100px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
button.nav-button,
a.nav-button,
div#contentWindow ~ div.reconnect button#reconnectButton.nav-button {
  --color: #44318d;
}
.high-contrast-mode button.nav-button, .high-contrast-mode a.nav-button, .high-contrast-mode div#contentWindow ~ div.reconnect button#reconnectButton.nav-button {
  --color: #fff;
}

button.nav-button.primary,
a.nav-button.primary,
div#contentWindow ~ div.reconnect button#reconnectButton.nav-button.primary {
  --color: #44318d;
}
.high-contrast-mode button.nav-button.primary, .high-contrast-mode a.nav-button.primary, .high-contrast-mode div#contentWindow ~ div.reconnect button#reconnectButton.nav-button.primary {
  --color: #fff;
}

button.nav-button.secondary,
a.nav-button.secondary,
div#contentWindow ~ div.reconnect button#reconnectButton.nav-button.secondary {
  --color: #cf707a;
}
.high-contrast-mode button.nav-button.secondary, .high-contrast-mode a.nav-button.secondary, .high-contrast-mode div#contentWindow ~ div.reconnect button#reconnectButton.nav-button.secondary {
  --color: #fff;
}

button.nav-button.tertiary,
a.nav-button.tertiary,
div#contentWindow ~ div.reconnect button#reconnectButton.nav-button.tertiary {
  --color: #ba9bd8;
}
.high-contrast-mode button.nav-button.tertiary, .high-contrast-mode a.nav-button.tertiary, .high-contrast-mode div#contentWindow ~ div.reconnect button#reconnectButton.nav-button.tertiary {
  --color: #fff;
}

button.nav-button:disabled,
a.nav-button:disabled,
div#contentWindow ~ div.reconnect button#reconnectButton.nav-button:disabled {
  cursor: default;
}
button.nav-button:disabled,
a.nav-button:disabled,
div#contentWindow ~ div.reconnect button#reconnectButton.nav-button:disabled {
  --color: lightgrey;
}
.high-contrast-mode button.nav-button:disabled, .high-contrast-mode a.nav-button:disabled, .high-contrast-mode div#contentWindow ~ div.reconnect button#reconnectButton.nav-button:disabled {
  --color: #303030;
}

button.nav-button:disabled .spinner,
a.nav-button:disabled .spinner,
div#contentWindow ~ div.reconnect button#reconnectButton.nav-button:disabled .spinner {
  display: inline-block;
}
button.nav-button:disabled span,
a.nav-button:disabled span,
div#contentWindow ~ div.reconnect button#reconnectButton.nav-button:disabled span {
  display: none;
}
button.nav-button,
a.nav-button,
div#contentWindow ~ div.reconnect button#reconnectButton.nav-button {
  background-color: var(--color);
}
.high-contrast-mode button.nav-button, .high-contrast-mode a.nav-button, .high-contrast-mode div#contentWindow ~ div.reconnect button#reconnectButton.nav-button {
  background-color: #000000;
}

button.nav-button,
a.nav-button,
div#contentWindow ~ div.reconnect button#reconnectButton.nav-button {
  background: var(--color);
}
.high-contrast-mode button.nav-button, .high-contrast-mode a.nav-button, .high-contrast-mode div#contentWindow ~ div.reconnect button#reconnectButton.nav-button {
  background: #000000;
}

button.nav-button,
a.nav-button,
div#contentWindow ~ div.reconnect button#reconnectButton.nav-button {
  border-color: transparent;
}
.high-contrast-mode button.nav-button, .high-contrast-mode a.nav-button, .high-contrast-mode div#contentWindow ~ div.reconnect button#reconnectButton.nav-button {
  border-color: var(--color);
}

button.nav-button, button.nav-button *,
a.nav-button,
a.nav-button *,
div#contentWindow ~ div.reconnect button#reconnectButton.nav-button,
div#contentWindow ~ div.reconnect button#reconnectButton.nav-button * {
  color: #fff;
}
button.nav-button:disabled, button.nav-button *:disabled,
a.nav-button:disabled,
a.nav-button *:disabled,
div#contentWindow ~ div.reconnect button#reconnectButton.nav-button:disabled,
div#contentWindow ~ div.reconnect button#reconnectButton.nav-button *:disabled {
  color: #fff;
}
.high-contrast-mode button.nav-button:disabled, .high-contrast-mode button.nav-button *:disabled, .high-contrast-mode a.nav-button:disabled, .high-contrast-mode a.nav-button *:disabled, .high-contrast-mode div#contentWindow ~ div.reconnect button#reconnectButton.nav-button:disabled, .high-contrast-mode div#contentWindow ~ div.reconnect button#reconnectButton.nav-button *:disabled {
  color: var(--color);
}

button.nav-button:hover:not(:disabled), button.nav-button:focus:not(:disabled),
a.nav-button:hover:not(:disabled),
a.nav-button:focus:not(:disabled),
div#contentWindow ~ div.reconnect button#reconnectButton.nav-button:hover:not(:disabled),
div#contentWindow ~ div.reconnect button#reconnectButton.nav-button:focus:not(:disabled) {
  background-color: var(--hover-color);
}
.high-contrast-mode button.nav-button:hover:not(:disabled), .high-contrast-mode button.nav-button:focus:not(:disabled), .high-contrast-mode a.nav-button:hover:not(:disabled), .high-contrast-mode a.nav-button:focus:not(:disabled), .high-contrast-mode div#contentWindow ~ div.reconnect button#reconnectButton.nav-button:hover:not(:disabled), .high-contrast-mode div#contentWindow ~ div.reconnect button#reconnectButton.nav-button:focus:not(:disabled) {
  background-color: #fff;
}

button.nav-button:hover:not(:disabled), button.nav-button:focus:not(:disabled),
a.nav-button:hover:not(:disabled),
a.nav-button:focus:not(:disabled),
div#contentWindow ~ div.reconnect button#reconnectButton.nav-button:hover:not(:disabled),
div#contentWindow ~ div.reconnect button#reconnectButton.nav-button:focus:not(:disabled) {
  color: #fff;
}
.high-contrast-mode button.nav-button:hover:not(:disabled), .high-contrast-mode button.nav-button:focus:not(:disabled), .high-contrast-mode a.nav-button:hover:not(:disabled), .high-contrast-mode a.nav-button:focus:not(:disabled), .high-contrast-mode div#contentWindow ~ div.reconnect button#reconnectButton.nav-button:hover:not(:disabled), .high-contrast-mode div#contentWindow ~ div.reconnect button#reconnectButton.nav-button:focus:not(:disabled) {
  color: rgba(0, 0, 0, 0.8);
}

button.nav-button:hover:not(:disabled) *, button.nav-button:focus:not(:disabled) *,
a.nav-button:hover:not(:disabled) *,
a.nav-button:focus:not(:disabled) *,
div#contentWindow ~ div.reconnect button#reconnectButton.nav-button:hover:not(:disabled) *,
div#contentWindow ~ div.reconnect button#reconnectButton.nav-button:focus:not(:disabled) * {
  color: #fff;
}
.high-contrast-mode button.nav-button:hover:not(:disabled) *, .high-contrast-mode button.nav-button:focus:not(:disabled) *, .high-contrast-mode a.nav-button:hover:not(:disabled) *, .high-contrast-mode a.nav-button:focus:not(:disabled) *, .high-contrast-mode div#contentWindow ~ div.reconnect button#reconnectButton.nav-button:hover:not(:disabled) *, .high-contrast-mode div#contentWindow ~ div.reconnect button#reconnectButton.nav-button:focus:not(:disabled) * {
  color: rgba(0, 0, 0, 0.8);
}

button.nav-button:hover:not(:disabled) span.icon, button.nav-button:focus:not(:disabled) span.icon,
a.nav-button:hover:not(:disabled) span.icon,
a.nav-button:focus:not(:disabled) span.icon,
div#contentWindow ~ div.reconnect button#reconnectButton.nav-button:hover:not(:disabled) span.icon,
div#contentWindow ~ div.reconnect button#reconnectButton.nav-button:focus:not(:disabled) span.icon {
  background-color: #fff;
}
.high-contrast-mode button.nav-button:hover:not(:disabled) span.icon, .high-contrast-mode button.nav-button:focus:not(:disabled) span.icon, .high-contrast-mode a.nav-button:hover:not(:disabled) span.icon, .high-contrast-mode a.nav-button:focus:not(:disabled) span.icon, .high-contrast-mode div#contentWindow ~ div.reconnect button#reconnectButton.nav-button:hover:not(:disabled) span.icon, .high-contrast-mode div#contentWindow ~ div.reconnect button#reconnectButton.nav-button:focus:not(:disabled) span.icon {
  background-color: rgba(0, 0, 0, 0.8);
}

button.nav-button.outline:not(:hover):not(:focus),
a.nav-button.outline:not(:hover):not(:focus),
div#contentWindow ~ div.reconnect button#reconnectButton.nav-button.outline:not(:hover):not(:focus) {
  color: var(--color);
  border-color: var(--color);
}
button.nav-button.outline:not(:hover):not(:focus),
a.nav-button.outline:not(:hover):not(:focus),
div#contentWindow ~ div.reconnect button#reconnectButton.nav-button.outline:not(:hover):not(:focus) {
  background-color: transparent;
}
.high-contrast-mode button.nav-button.outline:not(:hover):not(:focus), .high-contrast-mode a.nav-button.outline:not(:hover):not(:focus), .high-contrast-mode div#contentWindow ~ div.reconnect button#reconnectButton.nav-button.outline:not(:hover):not(:focus) {
  background-color: #000000;
}

button.nav-button.outline:not(:hover):not(:focus) *,
a.nav-button.outline:not(:hover):not(:focus) *,
div#contentWindow ~ div.reconnect button#reconnectButton.nav-button.outline:not(:hover):not(:focus) * {
  color: var(--color);
}
button.nav-button.outline:not(:hover):not(:focus) span.icon,
a.nav-button.outline:not(:hover):not(:focus) span.icon,
div#contentWindow ~ div.reconnect button#reconnectButton.nav-button.outline:not(:hover):not(:focus) span.icon {
  background-color: var(--color);
}
button.nav-button > svg,
a.nav-button > svg,
div#contentWindow ~ div.reconnect button#reconnectButton.nav-button > svg {
  margin: 0 -1em 0 0.5em;
}
button.nav-button span.icon,
a.nav-button span.icon,
div#contentWindow ~ div.reconnect button#reconnectButton.nav-button span.icon {
  margin-left: 0.5em;
  margin-right: -0.5em;
  width: 40px;
  height: 40px;
  mask-image: url("/player/static/icons/doe_arrow_right.svg");
  -webkit-mask-image: url("/player/static/icons/doe_arrow_right.svg");
  mask-repeat: no-repeat;
  mask-size: 100%;
  background-repeat: no-repeat;
  background-color: #fff;
}
button.nav-button .spinner,
a.nav-button .spinner,
div#contentWindow ~ div.reconnect button#reconnectButton.nav-button .spinner {
  display: none;
  position: absolute;
  height: 2rem;
  width: 100%;
}
button.nav-button .spinner .bounce1, button.nav-button .spinner .bounce2, button.nav-button .spinner .bounce3,
a.nav-button .spinner .bounce1,
a.nav-button .spinner .bounce2,
a.nav-button .spinner .bounce3,
div#contentWindow ~ div.reconnect button#reconnectButton.nav-button .spinner .bounce1,
div#contentWindow ~ div.reconnect button#reconnectButton.nav-button .spinner .bounce2,
div#contentWindow ~ div.reconnect button#reconnectButton.nav-button .spinner .bounce3 {
  height: 2rem;
  width: 2rem;
}

/* deleted */
div.overview {
  display: none;
  width: 100%;
  --nav-button-size: 56px;
}
div.overview .overview-cannot-continue {
  margin: 2em 1em;
  font-family: "PT Sans Caption";
  font-size: 1.25em;
}
div.overview .overview-main {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  height: 100%;
  -webkit-overflow-scrolling: touch;
  z-index: 100;
  background-repeat: no-repeat;
  background-size: cover;
}
div.overview .overview-main {
  background-image: url("/player/static/img/background.svg");
}
.high-contrast-mode div.overview .overview-main {
  background-image: none;
}

div.overview .overview-main {
  background-color: #ebe7ee;
}
.high-contrast-mode div.overview .overview-main {
  background-color: #000000;
}

div.overview .overview-main .overview-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 75%;
  height: 75%;
  border-radius: 48px;
  transition: width 0.33s ease-out, height 0.33s ease-out, border-radius 0.33s ease-out;
}
div.overview .overview-main .overview-container {
  background-color: #fff;
}
.high-contrast-mode div.overview .overview-main .overview-container {
  background-color: #303030;
}

div.overview .overview-main .overview-container .overview-info-title {
  flex-shrink: 0;
  font-size: 3rem;
  font-weight: bold;
  margin: 2rem 0 1rem;
}
div.overview .overview-main .overview-container .overview-info-title {
  color: rgba(0, 0, 0, 0.8);
}
.high-contrast-mode div.overview .overview-main .overview-container .overview-info-title {
  color: #fff;
}

div.overview .overview-main .overview-container .overview-info-text {
  font-size: 1.5rem;
}
div.overview .overview-main .overview-container .container-items {
  height: 100%;
  width: 100%;
  flex-shrink: 1;
  display: flex;
  align-items: center;
  flex-direction: column;
  overflow: auto;
  margin: 0 2em;
}
div.overview .overview-main .overview-container .container-items hr {
  width: 90%;
}
div.overview .overview-main .overview-container .container-items hr {
  border-bottom: 2px solid #ebe7ee;
}
.high-contrast-mode div.overview .overview-main .overview-container .container-items hr {
  border-bottom: 2px solid #fff;
}

div.overview .overview-main .overview-container .overview-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 22px;
  width: 80%;
}
div.overview .overview-main .overview-container .overview-info .overview-legend {
  padding-bottom: 2rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 2em;
  width: auto;
  box-sizing: border-box;
}
div.overview .overview-main .overview-container .overview-info .overview-legend div.answered-container,
div.overview .overview-main .overview-container .overview-info .overview-legend div.unanswered-container,
div.overview .overview-main .overview-container .overview-info .overview-legend div.marked-container {
  display: flex;
  flex: 1;
  width: 100%;
  max-width: 400px;
  flex-direction: row;
  align-items: center;
  position: relative;
}
div.overview .overview-main .overview-container .overview-info .overview-legend div.answered-container p#answered-questions,
div.overview .overview-main .overview-container .overview-info .overview-legend div.answered-container p#unanswered-questions,
div.overview .overview-main .overview-container .overview-info .overview-legend div.unanswered-container p#answered-questions,
div.overview .overview-main .overview-container .overview-info .overview-legend div.unanswered-container p#unanswered-questions,
div.overview .overview-main .overview-container .overview-info .overview-legend div.marked-container p#answered-questions,
div.overview .overview-main .overview-container .overview-info .overview-legend div.marked-container p#unanswered-questions {
  font-size: 1.5rem;
}
div.overview .overview-main .overview-container .overview-info .overview-legend div.answered-container p#marked-answered-questions,
div.overview .overview-main .overview-container .overview-info .overview-legend div.answered-container p#marked-unanswered-questions,
div.overview .overview-main .overview-container .overview-info .overview-legend div.unanswered-container p#marked-answered-questions,
div.overview .overview-main .overview-container .overview-info .overview-legend div.unanswered-container p#marked-unanswered-questions,
div.overview .overview-main .overview-container .overview-info .overview-legend div.marked-container p#marked-answered-questions,
div.overview .overview-main .overview-container .overview-info .overview-legend div.marked-container p#marked-unanswered-questions {
  font-size: 1.25rem;
}
div.overview .overview-main .overview-container .overview-info .overview-legend div.answered-container .legend,
div.overview .overview-main .overview-container .overview-info .overview-legend div.unanswered-container .legend,
div.overview .overview-main .overview-container .overview-info .overview-legend div.marked-container .legend {
  position: relative;
  margin: 8px;
  width: calc(var(--nav-button-size) / 2);
  min-width: calc(var(--nav-button-size) / 2);
  height: calc(var(--nav-button-size) / 2);
  min-height: calc(var(--nav-button-size) / 2);
  cursor: default;
  border: none;
  color: #fff;
  font-weight: bold;
  font-size: 1.2rem;
}
div.overview .overview-main .overview-container .overview-info .overview-legend div.answered-container .legend,
div.overview .overview-main .overview-container .overview-info .overview-legend div.unanswered-container .legend,
div.overview .overview-main .overview-container .overview-info .overview-legend div.marked-container .legend {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
div.overview .overview-main .overview-container .overview-info .overview-legend div.answered-container .legend:after,
div.overview .overview-main .overview-container .overview-info .overview-legend div.unanswered-container .legend:after,
div.overview .overview-main .overview-container .overview-info .overview-legend div.marked-container .legend:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  height: calc(var(--nav-button-size) / 3);
  width: calc(var(--nav-button-size) / 3);
  margin: auto;
  top: calc(var(--nav-button-size) / 3 / 4);
  left: calc(var(--nav-button-size) / 3 / 4);
}
div.overview .overview-main .overview-container .overview-info .overview-legend div.answered-container .legend.unanswered,
div.overview .overview-main .overview-container .overview-info .overview-legend div.unanswered-container .legend.unanswered,
div.overview .overview-main .overview-container .overview-info .overview-legend div.marked-container .legend.unanswered {
  background-color: #676bac;
}
.high-contrast-mode div.overview .overview-main .overview-container .overview-info .overview-legend div.answered-container .legend.unanswered, .high-contrast-mode div.overview .overview-main .overview-container .overview-info .overview-legend div.unanswered-container .legend.unanswered, .high-contrast-mode div.overview .overview-main .overview-container .overview-info .overview-legend div.marked-container .legend.unanswered {
  background-color: #fff;
}

div.overview .overview-main .overview-container .overview-info .overview-legend div.answered-container .legend.unanswered:after,
div.overview .overview-main .overview-container .overview-info .overview-legend div.unanswered-container .legend.unanswered:after,
div.overview .overview-main .overview-container .overview-info .overview-legend div.marked-container .legend.unanswered:after {
  background-color: #fff;
}
.high-contrast-mode div.overview .overview-main .overview-container .overview-info .overview-legend div.answered-container .legend.unanswered:after, .high-contrast-mode div.overview .overview-main .overview-container .overview-info .overview-legend div.unanswered-container .legend.unanswered:after, .high-contrast-mode div.overview .overview-main .overview-container .overview-info .overview-legend div.marked-container .legend.unanswered:after {
  background-color: #000000;
}

div.overview .overview-main .overview-container .overview-info .overview-legend div.answered-container .legend.answered,
div.overview .overview-main .overview-container .overview-info .overview-legend div.unanswered-container .legend.answered,
div.overview .overview-main .overview-container .overview-info .overview-legend div.marked-container .legend.answered {
  background-color: #676bac;
}
.high-contrast-mode div.overview .overview-main .overview-container .overview-info .overview-legend div.answered-container .legend.answered, .high-contrast-mode div.overview .overview-main .overview-container .overview-info .overview-legend div.unanswered-container .legend.answered, .high-contrast-mode div.overview .overview-main .overview-container .overview-info .overview-legend div.marked-container .legend.answered {
  background-color: #000000;
}

div.overview .overview-main .overview-container .overview-info .overview-legend div.answered-container .legend.answered:after,
div.overview .overview-main .overview-container .overview-info .overview-legend div.unanswered-container .legend.answered:after,
div.overview .overview-main .overview-container .overview-info .overview-legend div.marked-container .legend.answered:after {
  background-color: #676bac;
}
.high-contrast-mode div.overview .overview-main .overview-container .overview-info .overview-legend div.answered-container .legend.answered:after, .high-contrast-mode div.overview .overview-main .overview-container .overview-info .overview-legend div.unanswered-container .legend.answered:after, .high-contrast-mode div.overview .overview-main .overview-container .overview-info .overview-legend div.marked-container .legend.answered:after {
  background-color: #000000;
}

div.overview .overview-main .overview-container .overview-info .overview-legend div.answered-container .legend.marked:before,
div.overview .overview-main .overview-container .overview-info .overview-legend div.unanswered-container .legend.marked:before,
div.overview .overview-main .overview-container .overview-info .overview-legend div.marked-container .legend.marked:before {
  content: "";
  position: absolute;
  height: calc(var(--nav-button-size) / 2);
  width: calc(var(--nav-button-size) / 2);
  top: 0;
  right: 0;
  z-index: 1;
  background-image: url(/player/static/icons/doe_mark.svg);
  background-size: 80%;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
}
div.overview .overview-main .overview-container .overview-info .overview-legend div.answered-container .legend.marked:before,
div.overview .overview-main .overview-container .overview-info .overview-legend div.unanswered-container .legend.marked:before,
div.overview .overview-main .overview-container .overview-info .overview-legend div.marked-container .legend.marked:before {
  background-color: #cf707a;
}
.high-contrast-mode div.overview .overview-main .overview-container .overview-info .overview-legend div.answered-container .legend.marked:before, .high-contrast-mode div.overview .overview-main .overview-container .overview-info .overview-legend div.unanswered-container .legend.marked:before, .high-contrast-mode div.overview .overview-main .overview-container .overview-info .overview-legend div.marked-container .legend.marked:before {
  background-color: #000000;
}

div.overview .overview-main .overview-container .overview-items {
  height: 100%;
  margin-bottom: 30px;
}
div.overview .overview-main .overview-container .overview-items .items-container {
  display: flex;
  margin: 2rem;
  padding: 0 2rem;
  flex-wrap: wrap;
}
div.overview .overview-main .overview-container .overview-items .items-container a.nav-item, div.overview .overview-main .overview-container .overview-items .items-container button.nav-item {
  margin: calc(var(--nav-button-size) * 0.1);
  width: var(--nav-button-size);
  height: var(--nav-button-size);
  cursor: pointer;
  border: none;
  color: #fff;
  font-weight: bold;
  position: relative;
  font-size: calc(var(--nav-button-size) * 0.5);
  display: flex;
}
div.overview .overview-main .overview-container .overview-items .items-container a.nav-item, div.overview .overview-main .overview-container .overview-items .items-container button.nav-item {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
div.overview .overview-main .overview-container .overview-items .items-container a.nav-item.marked:before, div.overview .overview-main .overview-container .overview-items .items-container button.nav-item.marked:before {
  content: " ";
  position: absolute;
  height: calc(var(--nav-button-size) * 0.5);
  width: calc(var(--nav-button-size) * 0.5);
  top: -15%;
  right: -15%;
  background-image: url(/player/static/icons/doe_mark.svg);
  background-size: 80%;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
}
div.overview .overview-main .overview-container .overview-items .items-container a.nav-item.marked:before, div.overview .overview-main .overview-container .overview-items .items-container button.nav-item.marked:before {
  background-color: #cf707a;
}
.high-contrast-mode div.overview .overview-main .overview-container .overview-items .items-container a.nav-item.marked:before, .high-contrast-mode div.overview .overview-main .overview-container .overview-items .items-container button.nav-item.marked:before {
  background-color: #000000;
}

div.overview .overview-main .overview-container .overview-items .items-container a.nav-item .navigation-item-answer, div.overview .overview-main .overview-container .overview-items .items-container button.nav-item .navigation-item-answer {
  display: none;
  position: absolute;
  line-height: 30px;
  bottom: 0;
  border-radius: 8px;
}
div.overview .overview-main .overview-container .overview-items .items-container a.nav-item .navigation-item-answer, div.overview .overview-main .overview-container .overview-items .items-container button.nav-item .navigation-item-answer {
  color: #fff;
}
.high-contrast-mode div.overview .overview-main .overview-container .overview-items .items-container a.nav-item .navigation-item-answer, .high-contrast-mode div.overview .overview-main .overview-container .overview-items .items-container button.nav-item .navigation-item-answer {
  color: rgba(0, 0, 0, 0.8);
}

div.overview .overview-main .overview-container .overview-items .items-container a.nav-item .navigation-item, div.overview .overview-main .overview-container .overview-items .items-container button.nav-item .navigation-item {
  border-radius: 50%;
  height: calc(var(--nav-button-size) * 0.85);
  width: calc(var(--nav-button-size) * 0.85);
  margin: auto;
  display: flex;
  justify-content: center;
}
div.overview .overview-main .overview-container .overview-items .items-container a.nav-item .navigation-item, div.overview .overview-main .overview-container .overview-items .items-container button.nav-item .navigation-item {
  background-color: #fff;
}
.high-contrast-mode div.overview .overview-main .overview-container .overview-items .items-container a.nav-item .navigation-item, .high-contrast-mode div.overview .overview-main .overview-container .overview-items .items-container button.nav-item .navigation-item {
  background-color: #000000;
}

div.overview .overview-main .overview-container .overview-items .items-container a.nav-item .navigation-item .text-gradient, div.overview .overview-main .overview-container .overview-items .items-container button.nav-item .navigation-item .text-gradient {
  line-height: calc(var(--nav-button-size) * 0.85);
}
div.overview .overview-main .overview-container .overview-items .items-container a.nav-item.answered:hover, div.overview .overview-main .overview-container .overview-items .items-container a.nav-item.unanswered:hover, div.overview .overview-main .overview-container .overview-items .items-container a.nav-item.active:hover, div.overview .overview-main .overview-container .overview-items .items-container a.nav-item.active.unanswered:hover, div.overview .overview-main .overview-container .overview-items .items-container button.nav-item.answered:hover, div.overview .overview-main .overview-container .overview-items .items-container button.nav-item.unanswered:hover, div.overview .overview-main .overview-container .overview-items .items-container button.nav-item.active:hover, div.overview .overview-main .overview-container .overview-items .items-container button.nav-item.active.unanswered:hover {
  background-color: #44318d;
}
.high-contrast-mode div.overview .overview-main .overview-container .overview-items .items-container a.nav-item.answered:hover, .high-contrast-mode div.overview .overview-main .overview-container .overview-items .items-container a.nav-item.unanswered:hover, .high-contrast-mode div.overview .overview-main .overview-container .overview-items .items-container a.nav-item.active:hover, .high-contrast-mode div.overview .overview-main .overview-container .overview-items .items-container a.nav-item.active.unanswered:hover, .high-contrast-mode div.overview .overview-main .overview-container .overview-items .items-container button.nav-item.answered:hover, .high-contrast-mode div.overview .overview-main .overview-container .overview-items .items-container button.nav-item.unanswered:hover, .high-contrast-mode div.overview .overview-main .overview-container .overview-items .items-container button.nav-item.active:hover, .high-contrast-mode div.overview .overview-main .overview-container .overview-items .items-container button.nav-item.active.unanswered:hover {
  background-color: #fff;
}

div.overview .overview-main .overview-container .overview-items .items-container a.nav-item.answered:hover .navigation-item, div.overview .overview-main .overview-container .overview-items .items-container a.nav-item.unanswered:hover .navigation-item, div.overview .overview-main .overview-container .overview-items .items-container a.nav-item.active:hover .navigation-item, div.overview .overview-main .overview-container .overview-items .items-container a.nav-item.active.unanswered:hover .navigation-item, div.overview .overview-main .overview-container .overview-items .items-container button.nav-item.answered:hover .navigation-item, div.overview .overview-main .overview-container .overview-items .items-container button.nav-item.unanswered:hover .navigation-item, div.overview .overview-main .overview-container .overview-items .items-container button.nav-item.active:hover .navigation-item, div.overview .overview-main .overview-container .overview-items .items-container button.nav-item.active.unanswered:hover .navigation-item {
  background-color: #44318d;
}
.high-contrast-mode div.overview .overview-main .overview-container .overview-items .items-container a.nav-item.answered:hover .navigation-item, .high-contrast-mode div.overview .overview-main .overview-container .overview-items .items-container a.nav-item.unanswered:hover .navigation-item, .high-contrast-mode div.overview .overview-main .overview-container .overview-items .items-container a.nav-item.active:hover .navigation-item, .high-contrast-mode div.overview .overview-main .overview-container .overview-items .items-container a.nav-item.active.unanswered:hover .navigation-item, .high-contrast-mode div.overview .overview-main .overview-container .overview-items .items-container button.nav-item.answered:hover .navigation-item, .high-contrast-mode div.overview .overview-main .overview-container .overview-items .items-container button.nav-item.unanswered:hover .navigation-item, .high-contrast-mode div.overview .overview-main .overview-container .overview-items .items-container button.nav-item.active:hover .navigation-item, .high-contrast-mode div.overview .overview-main .overview-container .overview-items .items-container button.nav-item.active.unanswered:hover .navigation-item {
  background-color: #fff;
}

div.overview .overview-main .overview-container .overview-items .items-container a.nav-item.answered:hover .navigation-item .text-gradient, div.overview .overview-main .overview-container .overview-items .items-container a.nav-item.unanswered:hover .navigation-item .text-gradient, div.overview .overview-main .overview-container .overview-items .items-container a.nav-item.active:hover .navigation-item .text-gradient, div.overview .overview-main .overview-container .overview-items .items-container a.nav-item.active.unanswered:hover .navigation-item .text-gradient, div.overview .overview-main .overview-container .overview-items .items-container button.nav-item.answered:hover .navigation-item .text-gradient, div.overview .overview-main .overview-container .overview-items .items-container button.nav-item.unanswered:hover .navigation-item .text-gradient, div.overview .overview-main .overview-container .overview-items .items-container button.nav-item.active:hover .navigation-item .text-gradient, div.overview .overview-main .overview-container .overview-items .items-container button.nav-item.active.unanswered:hover .navigation-item .text-gradient {
  color: #fff;
}
.high-contrast-mode div.overview .overview-main .overview-container .overview-items .items-container a.nav-item.answered:hover .navigation-item .text-gradient, .high-contrast-mode div.overview .overview-main .overview-container .overview-items .items-container a.nav-item.unanswered:hover .navigation-item .text-gradient, .high-contrast-mode div.overview .overview-main .overview-container .overview-items .items-container a.nav-item.active:hover .navigation-item .text-gradient, .high-contrast-mode div.overview .overview-main .overview-container .overview-items .items-container a.nav-item.active.unanswered:hover .navigation-item .text-gradient, .high-contrast-mode div.overview .overview-main .overview-container .overview-items .items-container button.nav-item.answered:hover .navigation-item .text-gradient, .high-contrast-mode div.overview .overview-main .overview-container .overview-items .items-container button.nav-item.unanswered:hover .navigation-item .text-gradient, .high-contrast-mode div.overview .overview-main .overview-container .overview-items .items-container button.nav-item.active:hover .navigation-item .text-gradient, .high-contrast-mode div.overview .overview-main .overview-container .overview-items .items-container button.nav-item.active.unanswered:hover .navigation-item .text-gradient {
  color: rgba(0, 0, 0, 0.8);
}

div.overview .overview-main .overview-container .overview-items .items-container a.nav-item.answered, div.overview .overview-main .overview-container .overview-items .items-container button.nav-item.answered {
  background-color: #676bac;
}
.high-contrast-mode div.overview .overview-main .overview-container .overview-items .items-container a.nav-item.answered, .high-contrast-mode div.overview .overview-main .overview-container .overview-items .items-container button.nav-item.answered {
  background-color: #000000;
}

div.overview .overview-main .overview-container .overview-items .items-container a.nav-item.answered .navigation-item, div.overview .overview-main .overview-container .overview-items .items-container button.nav-item.answered .navigation-item {
  background-color: #676bac;
}
.high-contrast-mode div.overview .overview-main .overview-container .overview-items .items-container a.nav-item.answered .navigation-item, .high-contrast-mode div.overview .overview-main .overview-container .overview-items .items-container button.nav-item.answered .navigation-item {
  background-color: #000000;
}

div.overview .overview-main .overview-container .overview-items .items-container a.nav-item.answered .navigation-item .text-gradient, div.overview .overview-main .overview-container .overview-items .items-container button.nav-item.answered .navigation-item .text-gradient {
  color: #fff;
}
div.overview .overview-main .overview-container .overview-items .items-container a.nav-item.unanswered, div.overview .overview-main .overview-container .overview-items .items-container button.nav-item.unanswered {
  background-color: #676bac;
}
.high-contrast-mode div.overview .overview-main .overview-container .overview-items .items-container a.nav-item.unanswered, .high-contrast-mode div.overview .overview-main .overview-container .overview-items .items-container button.nav-item.unanswered {
  background-color: #fff;
}

div.overview .overview-main .overview-container .overview-items .items-container a.nav-item.unanswered .navigation-item, div.overview .overview-main .overview-container .overview-items .items-container button.nav-item.unanswered .navigation-item {
  background-color: #fff;
}
.high-contrast-mode div.overview .overview-main .overview-container .overview-items .items-container a.nav-item.unanswered .navigation-item, .high-contrast-mode div.overview .overview-main .overview-container .overview-items .items-container button.nav-item.unanswered .navigation-item {
  background-color: #000000;
}

div.overview .overview-main .overview-container .overview-items .items-container a.nav-item.unanswered .navigation-item .text-gradient, div.overview .overview-main .overview-container .overview-items .items-container button.nav-item.unanswered .navigation-item .text-gradient {
  color: #676bac;
}
.high-contrast-mode div.overview .overview-main .overview-container .overview-items .items-container a.nav-item.unanswered .navigation-item .text-gradient, .high-contrast-mode div.overview .overview-main .overview-container .overview-items .items-container button.nav-item.unanswered .navigation-item .text-gradient {
  color: #fff;
}

div.overview .overview-main .overview-actions {
  display: flex;
  flex-direction: row;
  margin-bottom: 1em;
}
div.overview .overview-main .overview-actions .overview-close > button span.icon {
  mask-image: url("/player/static/icons/doe_close.svg");
  -webkit-mask-image: url("/player/static/icons/doe_close.svg");
}

/* Medium screen res */
@media screen and (max-width: 900px), screen and (max-height: 825px) {
  div.overview .overview-main .overview-container {
    width: calc(100% - 2em);
    height: calc(100% - 2em);
  }
}
/* Small screen res */
@media screen and (max-width: 700px), screen and (max-height: 700px) {
  div.overview .overview-main .overview-container {
    width: 100%;
    height: 100%;
    border-radius: 0;
  }
}
.help-container {
  border: 3px solid #ba9bd8;
}
.high-contrast-mode .help-container {
  border: none;
}

.help-container div.header {
  display: flex;
  justify-content: space-between;
}
.help-container div.header h2 {
  line-height: 32pt;
}
.help-container div.header button.help-close {
  cursor: pointer;
  background-color: transparent;
  height: 48px;
  width: 48px;
  font-size: 32px;
}
.help-container div.header button.help-close {
  color: rgba(0, 0, 0, 0.8);
}
.high-contrast-mode .help-container div.header button.help-close {
  color: #fff;
}

.help-container div.header button.help-close:focus-visible, .help-container div.header button.help-close:hover {
  background-color: #ebe7ee;
}
.high-contrast-mode .help-container div.header button.help-close:focus-visible, .high-contrast-mode .help-container div.header button.help-close:hover {
  background-color: #fff;
}

.help-container div.header button.help-close:focus-visible, .help-container div.header button.help-close:hover {
  color: rgba(0, 0, 0, 0.8);
}
.high-contrast-mode .help-container div.header button.help-close:focus-visible, .high-contrast-mode .help-container div.header button.help-close:hover {
  color: rgba(0, 0, 0, 0.8);
}

.help-container div.help-column {
  display: flex;
  flex-direction: column;
}
.help-container div.help-column div.help-cell {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.help-container div.help-column div.help-cell div.help-cell-icon {
  --size: 48px;
  position: relative;
  height: var(--size);
  width: var(--size);
  margin-right: 1rem;
  margin-top: 0.5rem;
  mask-repeat: no-repeat;
  border-radius: 50%;
}
.help-container div.help-column div.help-cell div.help-cell-icon {
  background-color: #44318d;
}
.high-contrast-mode .help-container div.help-column div.help-cell div.help-cell-icon {
  background-color: #000000;
}

.help-container div.help-column div.help-cell div.help-cell-icon::after {
  content: "";
  position: absolute;
  height: var(--size);
  width: var(--size);
  background-color: #fff;
  mask-repeat: no-repeat;
  mask-position: center;
}
.help-container div.help-column div.help-cell div.help-cell-icon.marker::after {
  -webkit-mask-image: url(/player/static/icons/doe_marker.svg);
  mask-image: url(/player/static/icons/doe_marker.svg);
  mask-size: 80%;
}
.help-container div.help-column div.help-cell div.help-cell-icon.volume::after {
  -webkit-mask-image: url(/player/static/icons/doe_volume.svg);
  mask-image: url(/player/static/icons/doe_volume.svg);
}
.help-container div.help-column div.help-cell div.help-cell-icon.letterplankje::after {
  -webkit-mask-image: url(/player/static/icons/doe_letterplankje.svg);
  mask-image: url(/player/static/icons/doe_letterplankje.svg);
}
.help-container div.help-column div.help-cell div.help-cell-icon.verklanking::after {
  -webkit-mask-image: url(/player/static/icons/doe_text_to_speech.svg);
  mask-image: url(/player/static/icons/doe_text_to_speech.svg);
}
.help-container div.help-column div.help-cell div.help-cell-icon.ruler::after {
  -webkit-mask-image: url(/player/static/icons/doe_ruler.svg);
  mask-image: url(/player/static/icons/doe_ruler.svg);
}
.help-container div.help-column div.help-cell div.help-cell-icon.magnifier::after {
  -webkit-mask-image: url(/player/static/icons/doe_magnifier-plus.svg);
  mask-image: url(/player/static/icons/doe_magnifier-plus.svg);
}
.help-container div.help-column div.help-cell div.help-cell-icon.bookmark::after {
  -webkit-mask-image: url(/player/static/icons/doe_mark.svg);
  mask-image: url(/player/static/icons/doe_mark.svg);
  mask-size: 80%;
}
.help-container div.help-column div.help-cell div.help-cell-details {
  flex: 1;
}

body.media {
  /* On small screen sizes, the footer blocks the "no" and "yes" buttons. */
}
body.media footer {
  display: none;
}

.mediaCheckContainer {
  height: 75%;
  min-height: fit-content;
  width: 60%;
  padding: 5em 2em 2em 2em;
  min-width: fit-content;
  border-radius: 48px;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: space-around;
  box-sizing: border-box;
  transition: width 0.33s ease-out, height 0.33s ease-out, border-radius 0.33s ease-out;
}
.mediaCheckContainer {
  background-color: #fff;
}
.high-contrast-mode .mediaCheckContainer {
  background-color: #303030;
}

.mediaCheckContainer h1, .mediaCheckContainer h2, .mediaCheckContainer h3, .mediaCheckContainer h4, .mediaCheckContainer h5, .mediaCheckContainer p, .mediaCheckContainer span {
  color: rgba(0, 0, 0, 0.8);
}
.high-contrast-mode .mediaCheckContainer h1, .high-contrast-mode .mediaCheckContainer h2, .high-contrast-mode .mediaCheckContainer h3, .high-contrast-mode .mediaCheckContainer h4, .high-contrast-mode .mediaCheckContainer h5, .high-contrast-mode .mediaCheckContainer p, .high-contrast-mode .mediaCheckContainer span {
  color: #fff;
}

.columns.description {
  text-align: center;
}

.mediaFiles {
  width: fit-content;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mediaFiles audio {
  display: none;
}

div.mediaControls {
  display: none;
}

.volumeDescription {
  text-align: center;
}

div#main div.custom-audio-controls {
  --audio-progress: 0%;
  --container-height: 64px;
  display: flex;
  flex-direction: row;
  width: initial;
  margin: 1em 0;
}
div#main div.custom-audio-controls:not([data-paused]) button[data-play-pause]::after, div#main div.custom-audio-controls[data-playing] button[data-play-pause]::after {
  -webkit-mask-image: url(/player/static/icons/pause.svg);
  mask-image: url(/player/static/icons/pause.svg);
}
div#main div.custom-audio-controls:not([data-playing]) button[data-play-pause]::after, div#main div.custom-audio-controls[data-paused] button[data-play-pause]::after {
  -webkit-mask-image: url(/player/static/icons/play.svg);
  mask-image: url(/player/static/icons/play.svg);
}
div#main div.custom-audio-controls div.play-pause-button-container {
  border: 1px solid #ebe7ee;
  border-right: 0;
  border-bottom-left-radius: 16px;
  border-top-left-radius: 16px;
  box-sizing: border-box;
  height: var(--container-height);
  width: var(--container-height);
}
div#main div.custom-audio-controls div.play-pause-button-container button[data-play-pause] {
  height: 100%;
  width: 100%;
  border-bottom-left-radius: 16px;
  border-top-left-radius: 16px;
  background-color: transparent;
  position: relative;
  cursor: pointer;
}
div#main div.custom-audio-controls div.play-pause-button-container button[data-play-pause]::after {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  position: absolute;
  content: "";
  height: 50%;
  width: 50%;
  top: 25%;
  left: 25%;
}
div#main div.custom-audio-controls div.play-pause-button-container button[data-play-pause]::after {
  background-color: #212121;
}
.high-contrast-mode div#main div.custom-audio-controls div.play-pause-button-container button[data-play-pause]::after {
  background-color: #fff;
}

div#main div.custom-audio-controls div.play-pause-button-container button[data-play-pause]:hover, div#main div.custom-audio-controls div.play-pause-button-container button[data-play-pause]:focus {
  background-color: #676bac;
}
.high-contrast-mode div#main div.custom-audio-controls div.play-pause-button-container button[data-play-pause]:hover, .high-contrast-mode div#main div.custom-audio-controls div.play-pause-button-container button[data-play-pause]:focus {
  background-color: #fff;
}

div#main div.custom-audio-controls div.play-pause-button-container button[data-play-pause]:hover::after, div#main div.custom-audio-controls div.play-pause-button-container button[data-play-pause]:focus::after {
  background-color: #fff;
}
.high-contrast-mode div#main div.custom-audio-controls div.play-pause-button-container button[data-play-pause]:hover::after, .high-contrast-mode div#main div.custom-audio-controls div.play-pause-button-container button[data-play-pause]:focus::after {
  background-color: #303030;
}

div#main div.custom-audio-controls div.play-pause-button-container button[data-play-pause]:focus-visible {
  outline: 2px solid #212121;
}
.high-contrast-mode div#main div.custom-audio-controls div.play-pause-button-container button[data-play-pause]:focus-visible {
  outline: 3px solid #fff;
}

div#main div.custom-audio-controls div.scrub-container {
  --scrub-height: 10px;
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: row;
  width: 100%;
  border: 1px solid #ebe7ee;
  padding: 1em;
  border-top-right-radius: calc(var(--container-height) / 4);
  border-bottom-right-radius: calc(var(--container-height) / 4);
  height: var(--container-height);
  box-sizing: border-box;
}
div#main div.custom-audio-controls div.scrub-container {
  background-color: #fff;
}
.high-contrast-mode div#main div.custom-audio-controls div.scrub-container {
  background-color: #303030;
}

div#main div.custom-audio-controls div.scrub-container div.scrub-whitespace {
  width: calc(var(--container-height) / 4);
}
div#main div.custom-audio-controls div.scrub-container div.scrub-bar-container {
  position: relative;
  flex: 1;
}
div#main div.custom-audio-controls div.scrub-container div.scrub-bar-container:hover {
  cursor: pointer;
}
div#main div.custom-audio-controls div.scrub-container div.scrub-bar-container:hover div.scrub-ball {
  background-color: #676bac;
}
.high-contrast-mode div#main div.custom-audio-controls div.scrub-container div.scrub-bar-container:hover div.scrub-ball {
  background-color: #fff;
}

div#main div.custom-audio-controls div.scrub-container div.scrub-bar-container div.scrub-bar {
  height: var(--scrub-height);
  width: 100%;
}
div#main div.custom-audio-controls div.scrub-container div.scrub-bar-container div.scrub-bar::after,
div#main div.custom-audio-controls div.scrub-container div.scrub-bar-container div.scrub-bar::before {
  height: var(--scrub-height);
  border-radius: calc(var(--scrub-height) / 2);
  position: absolute;
  top: calc(50% - var(--scrub-height) / 2);
  left: 0;
  content: "";
}
div#main div.custom-audio-controls div.scrub-container div.scrub-bar-container div.scrub-bar::before {
  width: 100%;
}
div#main div.custom-audio-controls div.scrub-container div.scrub-bar-container div.scrub-bar::before {
  background-color: #ebe7ee;
}
.high-contrast-mode div#main div.custom-audio-controls div.scrub-container div.scrub-bar-container div.scrub-bar::before {
  background-color: #000000;
}

div#main div.custom-audio-controls div.scrub-container div.scrub-bar-container div.scrub-bar::after {
  width: var(--audio-progress);
}
div#main div.custom-audio-controls div.scrub-container div.scrub-bar-container div.scrub-bar::after {
  background-color: #ba9bd8;
}
.high-contrast-mode div#main div.custom-audio-controls div.scrub-container div.scrub-bar-container div.scrub-bar::after {
  background-color: #fff;
}

div#main div.custom-audio-controls div.scrub-container div.scrub-bar-container div.scrub-ball {
  height: calc(var(--scrub-height) * 2);
  width: calc(var(--scrub-height) * 2);
  box-sizing: border-box;
  border-radius: var(--scrub-height);
  position: absolute;
  top: calc(50% - (var(--scrub-height)));
  left: calc(var(--audio-progress) - var(--scrub-height));
}
div#main div.custom-audio-controls div.scrub-container div.scrub-bar-container div.scrub-ball {
  background-color: #ba9bd8;
}
.high-contrast-mode div#main div.custom-audio-controls div.scrub-container div.scrub-bar-container div.scrub-ball {
  background-color: #000000;
}

div#main div.custom-audio-controls div.scrub-container div.scrub-bar-container div.scrub-ball {
  border: none;
}
.high-contrast-mode div#main div.custom-audio-controls div.scrub-container div.scrub-bar-container div.scrub-ball {
  border: 2px solid #fff;
}

div#main div.custom-audio-controls div.scrub-container div.scrub-bar-container div.scrub-ball:focus {
  outline: 2px solid black;
}
div#main div.custom-audio-controls div.scrub-container div.scrub-bar-container div.scrub-ball:focus {
  background-color: #676bac;
}
.high-contrast-mode div#main div.custom-audio-controls div.scrub-container div.scrub-bar-container div.scrub-ball:focus {
  background-color: #fff;
}

div.columns.audioControls {
  --audio-progress: 0%;
  float: none;
  display: flex;
  margin: 1em auto;
}
div.columns.audioControls button#playPause {
  width: 96px;
  height: 96px;
  cursor: pointer;
  font-size: 0;
  border-radius: 50%;
  position: relative;
  /* ".paused" actually means it's playing, but the pause icon is visible */
}
div.columns.audioControls button#playPause {
  background-color: #ba9bd8;
}
.high-contrast-mode div.columns.audioControls button#playPause {
  background-color: #212121;
}

div.columns.audioControls button#playPause:after {
  position: absolute;
  content: "";
  background-color: #fff;
  -webkit-mask-image: url(/player/static/icons/play.svg);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 30px;
  -webkit-mask-position: center;
  mask-image: url(/player/static/icons/play.svg);
  mask-size: 30px;
  mask-position: center;
  mask-repeat: no-repeat;
  height: 48px;
  width: 48px;
  top: 24px;
  left: 24px;
}
div.columns.audioControls button#playPause .play {
  display: block;
}
div.columns.audioControls button#playPause .pause {
  display: none;
}
div.columns.audioControls button#playPause.paused:after {
  -webkit-mask-image: url(/player/static/icons/pause.svg);
  mask-image: url(/player/static/icons/pause.svg);
}
div.columns.audioControls button#playPause.paused:after {
  background-color: #212121;
}
.high-contrast-mode div.columns.audioControls button#playPause.paused:after {
  background-color: #fff;
}

div.columns.audioControls button#playPause.paused:before {
  position: absolute;
  top: -8px;
  left: -8px;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  content: "";
  z-index: 0;
}
div.columns.audioControls button#playPause.paused:before {
  /* @formatter:off */
  /* @formatter:on */
}
div.columns.audioControls button#playPause.paused:before {
  background: radial-gradient(closest-side, #ebe7ee 85%, transparent 86% 100%), conic-gradient(#ba9bd8 var(--audio-progress), transparent 0);
}
.high-contrast-mode div.columns.audioControls button#playPause.paused:before {
  background: radial-gradient(closest-side, #212121 85%, transparent 86% 100%), conic-gradient(#ebe7ee var(--audio-progress), transparent 0);
}

div.columns.audioControls button#playPause.paused:hover:before, div.columns.audioControls button#playPause.paused:focus-visible:before {
  /* @formatter:off */
  /* @formatter:on */
}
div.columns.audioControls button#playPause.paused:hover:before, div.columns.audioControls button#playPause.paused:focus-visible:before {
  background: radial-gradient(closest-side, #676bac 85%, transparent 86% 100%), conic-gradient(#ba9bd8 var(--audio-progress), transparent 0);
}
.high-contrast-mode div.columns.audioControls button#playPause.paused:hover:before, .high-contrast-mode div.columns.audioControls button#playPause.paused:focus-visible:before {
  background: radial-gradient(closest-side, #fff 85%, transparent 86% 100%), conic-gradient(#ebe7ee var(--audio-progress), transparent 0);
}

div.columns.audioControls button#playPause.paused:hover:after, div.columns.audioControls button#playPause.paused:focus-visible:after {
  background-color: #fff;
}
.high-contrast-mode div.columns.audioControls button#playPause.paused:hover:after, .high-contrast-mode div.columns.audioControls button#playPause.paused:focus-visible:after {
  background-color: #000000;
}

div.columns.audioControls button#playPause.paused .play {
  display: none;
}
div.columns.audioControls button#playPause.paused .pause {
  display: block;
}
div.columns.audioControls button#playPause:hover, div.columns.audioControls button#playPausefocus {
  background-color: #676bac;
}
.high-contrast-mode div.columns.audioControls button#playPause:hover, .high-contrast-mode div.columns.audioControls button#playPausefocus {
  background-color: #fff;
}

div.columns.audioControls button#playPause:hover:after, div.columns.audioControls button#playPausefocus:after {
  background-color: #fff;
}
.high-contrast-mode div.columns.audioControls button#playPause:hover:after, .high-contrast-mode div.columns.audioControls button#playPausefocus:after {
  background-color: rgba(0, 0, 0, 0.8);
}

div.columns.audioControls #volume-container {
  position: relative;
  margin: 0 5%;
}
div.columns.audioControls #volume-container {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
div.columns.audioControls #volume-container #volume.ui-slider {
  width: 185px;
  height: 6px;
}
div.columns.audioControls #volume-container #volume.ui-slider {
  background-color: #ebe7ee;
}
.high-contrast-mode div.columns.audioControls #volume-container #volume.ui-slider {
  background-color: #212121;
}

div.columns.audioControls #volume-container #volume.ui-slider {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
div.columns.audioControls #volume-container #volume.ui-slider span.ui-slider-handle {
  width: 30px;
  height: 30px;
  position: absolute;
  margin-left: -15px;
  margin-top: -12px;
  cursor: pointer;
  outline: none;
  background: linear-gradient(180.55deg, #ba9bd8 -5.87%, #44318d 105.41%);
}
div.columns.audioControls #volume-container #volume.ui-slider span.ui-slider-handle {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

div.columns.confirm {
  width: 50%;
  margin: 0 auto;
}
div.columns.confirm #confirmSubmit {
  width: 100%;
}
div.columns.confirm #confirmSubmit .mediaCheckButtons {
  width: 100%;
  display: flex;
  justify-content: center;
}
div.columns.confirm #confirmSubmit .mediaCheckButtons button {
  text-transform: capitalize;
}

.dialog.media-check-failed div.stop-icon {
  --size: 128px;
  height: var(--size);
  width: var(--size);
  background-position: center;
  background-repeat: no-repeat;
  border-radius: calc(var(--size) / 2);
}
.dialog.media-check-failed div.stop-icon {
  background-image: url(/player/static/icons/doe_stop.svg);
}
.high-contrast-mode .dialog.media-check-failed div.stop-icon {
  background-image: url(/player/static/icons/doe_stop-hc.svg);
}

.dialog.media-check-failed div.stop-icon {
  background-color: #44318d;
}
.high-contrast-mode .dialog.media-check-failed div.stop-icon {
  background-color: #000000;
}

/* Medium screen res */
@media screen and (max-width: 900px), screen and (max-height: 825px) {
  .mediaCheckContainer {
    overflow: auto;
    width: calc(100% - 2em);
    height: calc(100% - 2em);
  }
}
/* Small screen res */
@media screen and (max-width: 700px), screen and (max-height: 700px) {
  .mediaCheckContainer {
    overflow: auto;
    width: 100%;
    height: 100%;
    border-radius: 0;
    justify-content: flex-start;
  }
}
.result-container {
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

#result-general, #result-passed {
  text-align: center;
  margin: 1%;
}

#result-items {
  text-align: center;
  height: 450px;
  overflow: auto;
}
#result-items h4 {
  margin-bottom: 1%;
}
#result-items .testPartGroup {
  border-bottom: 2px dashed #919EAB;
  margin: 1rem 2.5rem;
}
#result-items .testPartGroup span {
  background-image: linear-gradient(180.55deg, #ba9bd8 -5.87%, #44318d 105.41%);
  -webkit-background-clip: text;
  color: transparent;
  font-size: 1.2rem;
  font-weight: bold;
}
#result-items .testPartGroup .testPartItems {
  display: flex;
  margin: 2rem;
  padding: 0 2rem;
  flex-wrap: wrap;
}
#result-items .testPartGroup .testPartItems .result-item {
  margin: 8px;
  width: 38px;
  height: 38px;
  cursor: pointer;
  border: none;
  color: #fff;
  font-weight: bold;
  position: relative;
  font-size: 16px;
  display: flex;
  background-image: linear-gradient(180.55deg, #ba9bd8 -5.87%, #44318d 105.41%);
}
#result-items .testPartGroup .testPartItems .result-item {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
#result-items .testPartGroup .testPartItems .result-item .reviewItem {
  border-radius: 50%;
  height: 30px;
  width: 30px;
  margin: auto;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
#result-items .testPartGroup .testPartItems .result-item .reviewItem {
  background: #fff;
}
.high-contrast-mode #result-items .testPartGroup .testPartItems .result-item .reviewItem {
  background: #000000;
}

#result-items .testPartGroup .testPartItems .result-item .reviewItem .text-gradient {
  background-image: linear-gradient(180.55deg, #ba9bd8 -5.87%, #44318d 105.41%);
  -webkit-background-clip: text;
  color: transparent;
  line-height: 30px;
}
#result-items .testPartGroup .testPartItems .result-item:hover {
  background: linear-gradient(173.99deg, #22E191 2.07%, #0BB6FF 103.33%);
}
#result-items .testPartGroup .testPartItems .result-item:hover .text-gradient {
  background-image: linear-gradient(173.99deg, #22E191 2.07%, #0BB6FF 103.33%);
}
#result-items div.exam-submit button {
  margin-bottom: 60px;
}

#qtiLightBox {
  display: none;
  position: fixed;
  top: 20%;
  left: 15%;
  width: 70%;
  height: 60vh;
  z-index: 102;
  margin: auto;
}
#qtiLightBox {
  background-color: #fff;
}
.high-contrast-mode #qtiLightBox {
  background-color: #000000;
}

#qtiLightBox {
  box-shadow: 0 8px 16px 0 rgba(145, 158, 171, 0.25);
}
.high-contrast-mode #qtiLightBox {
  box-shadow: none;
}

#qtiLightBox {
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
}
#qtiLightBox #qtiFormWrapper {
  margin: 3.5rem 2rem;
}
#qtiLightBox #qtiFormWrapper #resultsform::-webkit-scrollbar {
  width: 0.5em;
}
#qtiLightBox #qtiFormWrapper #resultsform::-webkit-scrollbar-track {
  background-color: #ebe7ee;
}
.high-contrast-mode #qtiLightBox #qtiFormWrapper #resultsform::-webkit-scrollbar-track {
  background-color: #212121;
}

#qtiLightBox #qtiFormWrapper #resultsform::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}
#qtiLightBox #qtiFormWrapper #resultsform > .content {
  padding: 0 2%;
}
#qtiLightBox #qtiFormWrapper #resultsform p.prompt {
  margin-bottom: 1rem;
}
#qtiLightBox #nextQuestionButton, #qtiLightBox #previousQuestionButton {
  display: block;
  position: absolute;
  height: 42px;
  bottom: 0;
  min-width: 120px;
  width: fit-content;
  padding: 0 2rem;
  max-width: 280px;
  font-weight: bold;
  font-size: 1rem;
  cursor: pointer;
  color: #fff;
  text-align: center;
  border: 2px solid;
  margin: 1rem;
  background: linear-gradient(180.55deg, #ba9bd8 -5.87%, #44318d 105.41%);
  border-radius: 100px;
}
#qtiLightBox #nextQuestionButton, #qtiLightBox #previousQuestionButton {
  border-color: #fff;
}
.high-contrast-mode #qtiLightBox #nextQuestionButton, .high-contrast-mode #qtiLightBox #previousQuestionButton {
  border-color: rgba(0, 0, 0, 0.8);
}

#qtiLightBox #nextQuestionButton:hover, #qtiLightBox #previousQuestionButton:hover {
  background: linear-gradient(173.99deg, #22E191 2.07%, #0BB6FF 103.33%);
}
#qtiLightBox #nextQuestionButton {
  right: 0;
}
#qtiLightBox #previousQuestionButton {
  left: 0;
}
#qtiLightBox span.render-type-label {
  z-index: 9999;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -7.8125rem;
  width: 15.625rem;
  height: 3.125rem;
  line-height: 3.125rem;
  font-size: 0.9375rem;
  font-weight: normal;
  text-align: center;
}
#qtiLightBox span.render-type-label {
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
}
#qtiLightBox span.render-type-label {
  color: #000;
}
.high-contrast-mode #qtiLightBox span.render-type-label {
  color: #fff;
}

#qtiLightBox span.render-type-label {
  background: rgba(0, 0, 0, 0.1);
}
.high-contrast-mode #qtiLightBox span.render-type-label {
  background: rgba(255, 255, 255, 0.1);
}

#qtiLightBox button.answerButton {
  height: 2.5rem;
  width: fit-content;
  padding: 0 2rem;
  font-weight: 500;
  text-transform: capitalize;
  font-size: 1rem;
  cursor: pointer;
  text-align: center;
  z-index: 101;
  position: absolute;
  bottom: 10px;
  border: 2px solid;
  background: linear-gradient(180.55deg, #ba9bd8 -5.87%, #44318d 105.41%);
}
#qtiLightBox button.answerButton {
  -webkit-border-radius: 40px;
  -moz-border-radius: 40px;
  border-radius: 40px;
}
#qtiLightBox button.answerButton.candidate {
  left: 30%;
}
#qtiLightBox button.answerButton.correct {
  left: 50%;
}
#qtiLightBox button.answerButton.active {
  background: linear-gradient(173.99deg, #22E191 2.07%, #0BB6FF 103.33%);
}
#qtiLightBox #closeQuestionButton {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  height: 3rem;
  width: 3rem;
  line-height: 3rem;
  text-align: center;
  z-index: 101;
  font-size: 1.5rem;
  font-weight: bold;
  background: transparent;
  border: none;
}
#qtiLightBox #qtiLightBoxTitle {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  line-height: 2rem;
  text-align: center;
  font-weight: normal;
  font-size: 1.25rem;
  z-index: 101;
}
#qtiLightBox #qtiLightBoxTitle span.titletext {
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  height: 3rem;
  margin-left: 2rem;
  line-height: 3.125rem;
  text-align: left;
}
#qtiLightBox #qtiLightBoxTitle span.titletext span {
  background-image: linear-gradient(180.55deg, #ba9bd8 -5.87%, #44318d 105.41%);
  -webkit-background-clip: text;
  color: transparent;
  font-weight: bold;
}
#qtiLightBox #qtiLightBoxTitle span.titlenumber {
  position: absolute;
  display: block;
  right: 2.5rem;
  top: 0;
  height: 3rem;
  line-height: 3.125rem;
  text-align: right;
  width: 6rem;
  font-weight: bold;
}

#qtiLightBoxOverlay {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  display: none;
  z-index: 101;
  background: rgba(0, 0, 0, 0.3);
}

.dialog.reference {
  z-index: 101;
  box-shadow: 0 8px 16px 0 rgba(145, 158, 171, 0.25);
}
.dialog.reference {
  background-color: #fff;
}
.high-contrast-mode .dialog.reference {
  background-color: #000000;
}

.dialog.reference {
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}
.dialog.reference {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50rem;
  height: 37.5rem;
  margin-left: -25rem;
  margin-top: -18.75rem;
}
.dialog.reference .dialog-inner {
  overflow: hidden;
  padding: 2.1875rem 0;
}
.dialog.reference .dialog-inner .customContent {
  float: left;
  width: 100%;
  height: 100%;
}
.dialog.reference .iframe {
  position: absolute;
  width: 100%;
  top: 2.1875rem;
  bottom: 0;
}
.dialog.reference .iframe iframe {
  display: none;
}
.dialog.reference .iframe iframe.active {
  display: block;
}
.dialog.reference .tabs {
  display: table;
  width: 100%;
  height: 2.1875rem;
}
.dialog.reference .tabs .tab {
  background: linear-gradient(180.55deg, #ba9bd8 -5.87%, #44318d 105.41%);
  color: #fff;
  height: 2.2rem;
  line-height: 2.2rem;
  display: table-cell;
  padding-left: 0.9375rem;
  border-left: 1px solid #eee;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 6.25rem;
  font-weight: bold;
}
.dialog.reference .tabs .tab {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.dialog.reference .tabs .tab {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.dialog.reference .tabs .tab.active {
  background: linear-gradient(173.99deg, #22E191 2.07%, #0BB6FF 103.33%);
}
.dialog.reference .tabs .tab:nth-child(1) {
  border: 0;
}

#mainContainer .findbar {
  display: block !important;
  margin: 0;
  border: 0;
  box-shadow: none;
  left: 0;
  right: 0;
  top: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

#toolbarViewer {
  display: none;
}

:root {
  --qti-choice-interaction-label-background-color: transparent;
  --qti-choice-interaction-label-text-color: rgba(0, 0, 0, 0.8);
  --qti-choice-interaction-control-hidden-label-background-color: #fff;
  --qti-choice-interaction-control-hidden-label-border: 2px solid #ba9bd8;
  --qti-choice-interaction-control-hidden-label-background-color-selected: #676bac;
  --qti-choice-interaction-control-hidden-label-text-color-selected: #fff;
  --shadow: 0 5px 10px 1px #ebe7ee;
}

body.high-contrast-mode {
  --qti-choice-interaction-control-hidden-label-background-color: #212121;
  --qti-choice-interaction-control-hidden-label-border: none;
  --qti-choice-interaction-control-hidden-label-background-color-selected: #fff;
  --qti-choice-interaction-control-hidden-label-text-color-selected: rgba(0, 0, 0, 0.8);
  --shadow: 0 0 0px 3px #fff;
}

/* Very narrow screen sizes, ie: mobile phones or tablets in portrait */
@media screen and (max-width: 600px) {
  :root {
    --qti-shared-style-columns: 1;
    --qti-shared-style-column-gap: 0;
    --qti-shared-style-row-gap: 1em; /* TODO adjust based on viewport size */
  }
}
/* Medium screen sizes, ie: 7-inch tablet in landscape */
@media screen and (max-width: 900px) {
  :root {
    --qti-shared-style-columns: 6;
    --qti-shared-style-column-gap: 3em; /* TODO adjust based on viewport size */
    --qti-shared-style-row-gap: 1em; /* TODO adjust based on viewport size */
  }
  body {
    /* Disable individual column scrolling due to limited space */
  }
  body form#qtiform .qti-layout-row {
    height: 100%;
    display: block;
    /* Remove divider since everything is now single column */
  }
  body form#qtiform .qti-layout-row .qti-layout-col1,
  body form#qtiform .qti-layout-row .qti-layout-col2,
  body form#qtiform .qti-layout-row .qti-layout-col3,
  body form#qtiform .qti-layout-row .qti-layout-col4,
  body form#qtiform .qti-layout-row .qti-layout-col5,
  body form#qtiform .qti-layout-row .qti-layout-col6,
  body form#qtiform .qti-layout-row .qti-layout-col7,
  body form#qtiform .qti-layout-row .qti-layout-col8,
  body form#qtiform .qti-layout-row .qti-layout-col9,
  body form#qtiform .qti-layout-row .qti-layout-col10,
  body form#qtiform .qti-layout-row .qti-layout-col11,
  body form#qtiform .qti-layout-row .qti-layout-col12 {
    height: fit-content;
    max-height: none;
  }
  body form#qtiform .qti-layout-row:has(div.qti-layout-col6)::after {
    display: none;
  }
}
/* Normal (and large) screen sizes, ie: 15-inch laptops and bigger. */
@media screen and (min-width: 901px) {
  :root {
    --qti-shared-style-columns: 12;
    --qti-shared-style-column-gap: 1em; /* TODO adjust based on viewport size */
    --qti-shared-style-row-gap: 1em; /* TODO adjust based on viewport size */
  }
}
.fancy-form, .resultsform {
  width: 95%;
  margin: 6% auto 0;
}
.fancy-form .itemBody .prompt, .resultsform .itemBody .prompt {
  margin-bottom: 2%;
}
.fancy-form .itemBody h1, .fancy-form .itemBody h2, .fancy-form .itemBody h3, .fancy-form .itemBody h4, .fancy-form .itemBody h5, .fancy-form .itemBody p, .fancy-form .itemBody div, .fancy-form .itemBody span, .resultsform .itemBody h1, .resultsform .itemBody h2, .resultsform .itemBody h3, .resultsform .itemBody h4, .resultsform .itemBody h5, .resultsform .itemBody p, .resultsform .itemBody div, .resultsform .itemBody span {
  color: rgba(0, 0, 0, 0.8);
}
.high-contrast-mode .fancy-form .itemBody h1, .high-contrast-mode .fancy-form .itemBody h2, .high-contrast-mode .fancy-form .itemBody h3, .high-contrast-mode .fancy-form .itemBody h4, .high-contrast-mode .fancy-form .itemBody h5, .high-contrast-mode .fancy-form .itemBody p, .high-contrast-mode .fancy-form .itemBody div, .high-contrast-mode .fancy-form .itemBody span, .high-contrast-mode .resultsform .itemBody h1, .high-contrast-mode .resultsform .itemBody h2, .high-contrast-mode .resultsform .itemBody h3, .high-contrast-mode .resultsform .itemBody h4, .high-contrast-mode .resultsform .itemBody h5, .high-contrast-mode .resultsform .itemBody p, .high-contrast-mode .resultsform .itemBody div, .high-contrast-mode .resultsform .itemBody span {
  color: #fff;
}

.fancy-form .itemBody table, .resultsform .itemBody table {
  border-collapse: collapse;
}

.question-block p, .content-block p {
  font-weight: bold;
  margin-bottom: 1rem;
}

.content-block {
  border-bottom: 1px dashed #919EAB;
}

label {
  display: block;
  margin: 0;
}

label {
  line-height: 2rem;
  min-height: 1.375rem;
  font-weight: 500;
}

form#qtiform {
  height: 100%;
  max-height: 100%;
  margin: 0 auto;
  padding: 3em 0 0;
  box-sizing: border-box;
  display: block;
  position: relative;
  /**
   * QTI3 Wrapper
   */
  /**
   * QTI Choice Interaction
   */
  /**
   * QTI Gap Match Interaction
   */
  /**
  * QTI Hotspot Interaction
  */
  /**
   * QTI Text Entry Interaction
   */
  /**
   * QTI Inline Choice Interaction
   */
  /**
   * QTI Hottext Interaction
   */
}
form#qtiform .qti-layout-row {
  max-height: 100%;
  height: 100%;
  position: relative;
}
form#qtiform .qti-layout-row .qti-layout-col1,
form#qtiform .qti-layout-row .qti-layout-col2,
form#qtiform .qti-layout-row .qti-layout-col3,
form#qtiform .qti-layout-row .qti-layout-col4,
form#qtiform .qti-layout-row .qti-layout-col5,
form#qtiform .qti-layout-row .qti-layout-col6,
form#qtiform .qti-layout-row .qti-layout-col7,
form#qtiform .qti-layout-row .qti-layout-col8,
form#qtiform .qti-layout-row .qti-layout-col9,
form#qtiform .qti-layout-row .qti-layout-col10,
form#qtiform .qti-layout-row .qti-layout-col11,
form#qtiform .qti-layout-row .qti-layout-col12 {
  height: 100%;
  max-height: 100%;
  overflow: auto;
}
form#qtiform .qti-layout-row:has(div.qti-layout-col6) {
  --divider-width: 10px;
}
form#qtiform .qti-layout-row:has(div.qti-layout-col6)::after {
  pointer-events: none;
  content: " ";
  height: calc(100% + 3em);
  position: absolute;
  top: -3em;
  left: calc(50% - var(--divider-width) / 2);
  width: var(--divider-width);
}
form#qtiform .qti-layout-row:has(div.qti-layout-col6)::after {
  background-color: #ebe7ee;
}
.high-contrast-mode form#qtiform .qti-layout-row:has(div.qti-layout-col6)::after {
  background-color: #303030;
}

form#qtiform qti-3 {
  height: 100%;
}
form#qtiform qti-choice-interaction {
  --choice-height: 64px;
  width: 100%;
  position: relative;
  display: flex;
  margin: 1em 0; /* prevents drop-shadow from being cut-off at the bottom */
  background: transparent;
  z-index: 0;
  /* Force labels to take max width */
}
form#qtiform qti-choice-interaction.qti-orientation-vertical div.simple-choice-container, form#qtiform qti-choice-interaction:not(.qti-orientation-horizontal):not([orientation=horizontal]) div.simple-choice-container, form#qtiform qti-choice-interaction[orientation=vertical] div.simple-choice-container {
  grid-template-columns: repeat(var(--stacking-columns), 1fr);
}
form#qtiform qti-choice-interaction div.simple-choice-container {
  grid-gap: 0.5rem;
}
form#qtiform qti-choice-interaction label:has(input[type=radio]) {
  border-radius: calc(var(--choice-height) / 2);
}
form#qtiform qti-choice-interaction label:has(input[type=checkbox]) {
  border-radius: calc(var(--choice-height) / 4);
}
form#qtiform qti-choice-interaction label:has(input[type=checkbox])::before {
  border-radius: 25%;
}
form#qtiform qti-choice-interaction label:has(input:disabled) {
  cursor: text;
  text-decoration: none;
}
form#qtiform qti-choice-interaction label:has(input:disabled)::before {
  cursor: default;
}
form#qtiform qti-choice-interaction input {
  appearance: none;
}
form#qtiform qti-choice-interaction label {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  z-index: 1;
}
form#qtiform qti-choice-interaction label {
  color: rgba(0, 0, 0, 0.8);
}
.high-contrast-mode form#qtiform qti-choice-interaction label {
  color: #fff;
}

form#qtiform qti-choice-interaction label span.prefix::after {
  content: " ";
}
form#qtiform qti-choice-interaction:not(.qti-input-control-hidden) label {
  border: 2px solid transparent;
  padding-right: 0.5rem;
}
form#qtiform qti-choice-interaction:not(.qti-input-control-hidden) label:has(input:checked) {
  /* Checked indicator (radio filling) */
  /* Checked indicator (checkbox filling) */
}
form#qtiform qti-choice-interaction:not(.qti-input-control-hidden) label:has(input:checked) {
  border-color: #ebe7ee;
}
.high-contrast-mode form#qtiform qti-choice-interaction:not(.qti-input-control-hidden) label:has(input:checked) {
  border-color: #fff;
}

form#qtiform qti-choice-interaction:not(.qti-input-control-hidden) label:has(input:checked) {
  background-color: #ebe7ee;
}
.high-contrast-mode form#qtiform qti-choice-interaction:not(.qti-input-control-hidden) label:has(input:checked) {
  background-color: #000000;
}

form#qtiform qti-choice-interaction:not(.qti-input-control-hidden) label:has(input:checked) {
  color: rgba(0, 0, 0, 0.8);
}
.high-contrast-mode form#qtiform qti-choice-interaction:not(.qti-input-control-hidden) label:has(input:checked) {
  color: #fff;
}

form#qtiform qti-choice-interaction:not(.qti-input-control-hidden) label:has(input:checked):has(input[type=radio])::before {
  /* @formatter:off */
  /* @formatter:on */
}
form#qtiform qti-choice-interaction:not(.qti-input-control-hidden) label:has(input:checked):has(input[type=radio])::before {
  background: radial-gradient(closest-side, #676bac 70%, transparent 71% 100%);
}
.high-contrast-mode form#qtiform qti-choice-interaction:not(.qti-input-control-hidden) label:has(input:checked):has(input[type=radio])::before {
  background: radial-gradient(closest-side, #fff 70%, transparent 71% 100%);
}

form#qtiform qti-choice-interaction:not(.qti-input-control-hidden) label:has(input:checked):has(input[type=radio])::before {
  border: var(--border-width) solid #676bac;
}
.high-contrast-mode form#qtiform qti-choice-interaction:not(.qti-input-control-hidden) label:has(input:checked):has(input[type=radio])::before {
  border: var(--border-width) solid #fff;
}

form#qtiform qti-choice-interaction:not(.qti-input-control-hidden) label:has(input:checked):has(input[type=checkbox])::after {
  height: calc(var(--choice-height) * 0.5);
  width: calc(var(--choice-height) * 0.5);
  position: absolute;
  top: calc(50% - var(--choice-height) * 0.25);
  left: calc(var(--choice-height) * 0.25);
  border-radius: 25%;
  content: "";
}
form#qtiform qti-choice-interaction:not(.qti-input-control-hidden) label:has(input:checked):has(input[type=checkbox])::after {
  background: #676bac;
}
.high-contrast-mode form#qtiform qti-choice-interaction:not(.qti-input-control-hidden) label:has(input:checked):has(input[type=checkbox])::after {
  background: #fff;
}

form#qtiform qti-choice-interaction:not(.qti-input-control-hidden) label:has(input:checked):has(input[type=checkbox])::before {
  /* @formatter:off */
  /* @formatter:on */
}
form#qtiform qti-choice-interaction:not(.qti-input-control-hidden) label:has(input:checked):has(input[type=checkbox])::before {
  border: var(--border-width) solid #676bac;
}
.high-contrast-mode form#qtiform qti-choice-interaction:not(.qti-input-control-hidden) label:has(input:checked):has(input[type=checkbox])::before {
  border: var(--border-width) solid #fff;
}

form#qtiform qti-choice-interaction:not(.qti-input-control-hidden) label::before {
  --margin: .5em;
  --border-width: 2px;
  content: " ";
  position: relative;
  display: inline-block;
  height: calc(var(--choice-height) - var(--margin) * 2 - var(--border-width) * 2);
  width: calc(var(--choice-height) - var(--margin) * 2 - var(--border-width) * 2);
  background-color: transparent;
  flex-shrink: 0;
  border-radius: 50%; /* TODO Only when single-choice! */
  margin: var(--margin);
  margin-right: calc(var(--margin) * 3);
  cursor: pointer;
}
form#qtiform qti-choice-interaction:not(.qti-input-control-hidden) label::before {
  /* @formatter:off */
  /* @formatter:on */
}
form#qtiform qti-choice-interaction:not(.qti-input-control-hidden) label::before {
  border: var(--border-width) solid #676bac;
}
.high-contrast-mode form#qtiform qti-choice-interaction:not(.qti-input-control-hidden) label::before {
  border: var(--border-width) solid #fff;
}

form#qtiform qti-choice-interaction.qti-input-control-hidden {
  height: fit-content;
  width: fit-content;
}
form#qtiform qti-choice-interaction.qti-input-control-hidden > div.simple-choice-container > label {
  border-radius: calc(var(--choice-height) / 4);
  padding: 0.5em;
  box-sizing: border-box;
}
form#qtiform qti-choice-interaction.qti-input-control-hidden > div.simple-choice-container > label > *:not(:last-child) {
  margin-right: 0.5em;
}
form#qtiform qti-choice-interaction.qti-input-control-hidden > div.simple-choice-container > label > *:not(:first-child) {
  margin-left: 0.5em;
}
form#qtiform qti-choice-interaction.qti-input-control-hidden > div.simple-choice-container > label:has(input:checked) {
  font-weight: bold;
}
form#qtiform qti-choice-interaction.qti-input-control-hidden > div.simple-choice-container > label:has(input:checked) {
  border-color: #676bac;
}
.high-contrast-mode form#qtiform qti-choice-interaction.qti-input-control-hidden > div.simple-choice-container > label:has(input:checked) {
  border-color: #fff;
}

form#qtiform qti-choice-interaction.qti-input-control-hidden > div.simple-choice-container > label:has(input:checked) {
  box-shadow: var(--shadow);
}
.high-contrast-mode form#qtiform qti-choice-interaction.qti-input-control-hidden > div.simple-choice-container > label:has(input:checked) {
  box-shadow: none;
}

form#qtiform qti-choice-interaction.qti-input-control-hidden > div.simple-choice-container > label:has(input:checked) {
  color: #fff;
}
.high-contrast-mode form#qtiform qti-choice-interaction.qti-input-control-hidden > div.simple-choice-container > label:has(input:checked) {
  color: rgba(0, 0, 0, 0.8);
}

form#qtiform qti-choice-interaction.qti-input-control-hidden > div.simple-choice-container > label:has(input:checked) p, form#qtiform qti-choice-interaction.qti-input-control-hidden > div.simple-choice-container > label:has(input:checked) span {
  font-weight: bold;
}
form#qtiform qti-choice-interaction.qti-input-control-hidden > div.simple-choice-container > label:has(input:checked) p, form#qtiform qti-choice-interaction.qti-input-control-hidden > div.simple-choice-container > label:has(input:checked) span {
  color: #fff;
}
.high-contrast-mode form#qtiform qti-choice-interaction.qti-input-control-hidden > div.simple-choice-container > label:has(input:checked) p, .high-contrast-mode form#qtiform qti-choice-interaction.qti-input-control-hidden > div.simple-choice-container > label:has(input:checked) span {
  color: rgba(0, 0, 0, 0.8);
}

form#qtiform qti-choice-interaction[disabled] label {
  cursor: text;
  text-decoration-line: none;
}
form#qtiform qti-choice-interaction[disabled] label::before {
  cursor: default;
}
form#qtiform qti-gap-match-interaction div.choices-slot,
form#qtiform qti-graphic-gap-match-interaction div.choices-slot {
  flex-wrap: wrap;
}
form#qtiform qti-gap-match-interaction qti-gap-text,
form#qtiform qti-graphic-gap-match-interaction qti-gap-text {
  --qti-gap-text-border-color-default: #ba9bd8;
  --qti-gap-text-background-color-hover: #ebe7ee;
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 0.5em 4.5em;
  margin: 0.5em 1em;
}
form#qtiform qti-gap-match-interaction qti-gap-text,
form#qtiform qti-graphic-gap-match-interaction qti-gap-text {
  --qti-gap-text-background-color-default: #fff;
}
.high-contrast-mode form#qtiform qti-gap-match-interaction qti-gap-text, .high-contrast-mode form#qtiform qti-graphic-gap-match-interaction qti-gap-text {
  --qti-gap-text-background-color-default: #000000;
}

form#qtiform qti-gap-match-interaction qti-gap-text,
form#qtiform qti-graphic-gap-match-interaction qti-gap-text {
  border: 2px solid #ba9bd8;
}
.high-contrast-mode form#qtiform qti-gap-match-interaction qti-gap-text, .high-contrast-mode form#qtiform qti-graphic-gap-match-interaction qti-gap-text {
  border: 2px solid #fff;
}

form#qtiform qti-gap-match-interaction qti-gap-text,
form#qtiform qti-graphic-gap-match-interaction qti-gap-text {
  color: rgba(0, 0, 0, 0.8);
}
.high-contrast-mode form#qtiform qti-gap-match-interaction qti-gap-text, .high-contrast-mode form#qtiform qti-graphic-gap-match-interaction qti-gap-text {
  color: #fff;
}

form#qtiform qti-gap-match-interaction qti-gap-text:has(div[data-slot].exhausted),
form#qtiform qti-graphic-gap-match-interaction qti-gap-text:has(div[data-slot].exhausted) {
  box-shadow: none;
  opacity: 0.66;
  filter: grayscale(1);
}
form#qtiform qti-gap-match-interaction qti-gap-text div[data-slot].exhausted,
form#qtiform qti-graphic-gap-match-interaction qti-gap-text div[data-slot].exhausted {
  filter: none;
}
form#qtiform qti-gap-match-interaction qti-gap-text.is-dragging,
form#qtiform qti-graphic-gap-match-interaction qti-gap-text.is-dragging {
  border-style: dashed;
}
form#qtiform qti-gap-match-interaction qti-gap-text.is-dragging,
form#qtiform qti-graphic-gap-match-interaction qti-gap-text.is-dragging {
  background-color: #fff;
}
.high-contrast-mode form#qtiform qti-gap-match-interaction qti-gap-text.is-dragging, .high-contrast-mode form#qtiform qti-graphic-gap-match-interaction qti-gap-text.is-dragging {
  background-color: #303030;
}

form#qtiform qti-gap-match-interaction qti-gap-text.is-dragging div[data-slot],
form#qtiform qti-graphic-gap-match-interaction qti-gap-text.is-dragging div[data-slot] {
  outline: none;
  background-color: transparent;
}
form#qtiform qti-gap-match-interaction qti-gap-text.is-dragging div[data-slot],
form#qtiform qti-graphic-gap-match-interaction qti-gap-text.is-dragging div[data-slot] {
  color: rgba(0, 0, 0, 0.8);
}
.high-contrast-mode form#qtiform qti-gap-match-interaction qti-gap-text.is-dragging div[data-slot], .high-contrast-mode form#qtiform qti-graphic-gap-match-interaction qti-gap-text.is-dragging div[data-slot] {
  color: #fff;
}

form#qtiform qti-gap-match-interaction qti-gap,
form#qtiform qti-graphic-gap-match-interaction qti-gap {
  margin: 0.5em 0.5em;
  padding: 0;
  border-radius: 16px;
}
form#qtiform qti-gap-match-interaction qti-gap,
form#qtiform qti-graphic-gap-match-interaction qti-gap {
  border: 1px dashed #676bac;
}
.high-contrast-mode form#qtiform qti-gap-match-interaction qti-gap, .high-contrast-mode form#qtiform qti-graphic-gap-match-interaction qti-gap {
  border: 1px dashed #fff;
}

form#qtiform qti-gap-match-interaction qti-gap,
form#qtiform qti-graphic-gap-match-interaction qti-gap {
  --qti-gap-background-color-hover: #ebe7ee;
}
.high-contrast-mode form#qtiform qti-gap-match-interaction qti-gap, .high-contrast-mode form#qtiform qti-graphic-gap-match-interaction qti-gap {
  --qti-gap-background-color-hover: rgba(255, 255, 255, 0.25);
}

form#qtiform qti-gap-match-interaction qti-gap,
form#qtiform qti-graphic-gap-match-interaction qti-gap {
  --qti-gap-text-background-color-hover: #ebe7ee;
}
.high-contrast-mode form#qtiform qti-gap-match-interaction qti-gap, .high-contrast-mode form#qtiform qti-graphic-gap-match-interaction qti-gap {
  --qti-gap-text-background-color-hover: rgba(255, 255, 255, 0.25);
}

form#qtiform qti-gap-match-interaction qti-gap:has(div[data-slot].answered),
form#qtiform qti-graphic-gap-match-interaction qti-gap:has(div[data-slot].answered) {
  border: none;
}
form#qtiform qti-gap-match-interaction qti-gap:has(div[data-slot].answered),
form#qtiform qti-graphic-gap-match-interaction qti-gap:has(div[data-slot].answered) {
  background-color: #676bac;
}
.high-contrast-mode form#qtiform qti-gap-match-interaction qti-gap:has(div[data-slot].answered), .high-contrast-mode form#qtiform qti-graphic-gap-match-interaction qti-gap:has(div[data-slot].answered) {
  background-color: #fff;
}

form#qtiform qti-gap-match-interaction qti-gap:has(div[data-slot].answered),
form#qtiform qti-graphic-gap-match-interaction qti-gap:has(div[data-slot].answered) {
  box-shadow: var(--shadow);
}
.high-contrast-mode form#qtiform qti-gap-match-interaction qti-gap:has(div[data-slot].answered), .high-contrast-mode form#qtiform qti-graphic-gap-match-interaction qti-gap:has(div[data-slot].answered) {
  box-shadow: none;
}

form#qtiform qti-gap-match-interaction qti-gap:has(div[data-slot].answered), form#qtiform qti-gap-match-interaction qti-gap:has(div[data-slot].answered) *,
form#qtiform qti-graphic-gap-match-interaction qti-gap:has(div[data-slot].answered),
form#qtiform qti-graphic-gap-match-interaction qti-gap:has(div[data-slot].answered) * {
  color: #fff;
}
.high-contrast-mode form#qtiform qti-gap-match-interaction qti-gap:has(div[data-slot].answered), .high-contrast-mode form#qtiform qti-gap-match-interaction qti-gap:has(div[data-slot].answered) *, .high-contrast-mode form#qtiform qti-graphic-gap-match-interaction qti-gap:has(div[data-slot].answered), .high-contrast-mode form#qtiform qti-graphic-gap-match-interaction qti-gap:has(div[data-slot].answered) * {
  color: rgba(0, 0, 0, 0.8);
}

form#qtiform qti-gap-match-interaction qti-gap:has(div[data-slot].answered).is-dragging-over,
form#qtiform qti-graphic-gap-match-interaction qti-gap:has(div[data-slot].answered).is-dragging-over {
  background-color: var(--qti-gap-background-color-hover);
}
.high-contrast-mode form#qtiform qti-gap-match-interaction qti-gap:has(div[data-slot].answered).is-dragging-over, .high-contrast-mode form#qtiform qti-graphic-gap-match-interaction qti-gap:has(div[data-slot].answered).is-dragging-over {
  background-color: #303030;
}

form#qtiform qti-gap-match-interaction qti-gap:has(div[data-slot].answered).is-dragging-over div[data-slot], form#qtiform qti-gap-match-interaction qti-gap:has(div[data-slot].answered).is-dragging-over div[data-slot] *,
form#qtiform qti-graphic-gap-match-interaction qti-gap:has(div[data-slot].answered).is-dragging-over div[data-slot],
form#qtiform qti-graphic-gap-match-interaction qti-gap:has(div[data-slot].answered).is-dragging-over div[data-slot] * {
  color: rgba(0, 0, 0, 0.8);
}
.high-contrast-mode form#qtiform qti-gap-match-interaction qti-gap:has(div[data-slot].answered).is-dragging-over div[data-slot], .high-contrast-mode form#qtiform qti-gap-match-interaction qti-gap:has(div[data-slot].answered).is-dragging-over div[data-slot] *, .high-contrast-mode form#qtiform qti-graphic-gap-match-interaction qti-gap:has(div[data-slot].answered).is-dragging-over div[data-slot], .high-contrast-mode form#qtiform qti-graphic-gap-match-interaction qti-gap:has(div[data-slot].answered).is-dragging-over div[data-slot] * {
  color: #fff;
}

form#qtiform qti-gap-match-interaction qti-gap div[data-slot],
form#qtiform qti-graphic-gap-match-interaction qti-gap div[data-slot] {
  cursor: default;
  padding: 1em 0;
}
form#qtiform qti-gap-match-interaction qti-gap div[data-slot].answered > *[data-identifier],
form#qtiform qti-graphic-gap-match-interaction qti-gap div[data-slot].answered > *[data-identifier] {
  cursor: move;
}
form#qtiform qti-gap-match-interaction qti-gap[disabled] > div[data-slot] > *[data-identifier],
form#qtiform qti-graphic-gap-match-interaction qti-gap[disabled] > div[data-slot] > *[data-identifier] {
  cursor: text;
}
form#qtiform qti-gap-match-interaction qti-gap.is-dragging-over,
form#qtiform qti-graphic-gap-match-interaction qti-gap.is-dragging-over {
  border: 2px dashed #44318d;
}
.high-contrast-mode form#qtiform qti-gap-match-interaction qti-gap.is-dragging-over, .high-contrast-mode form#qtiform qti-graphic-gap-match-interaction qti-gap.is-dragging-over {
  border: 2px dashed #fff;
}

form#qtiform qti-gap-match-interaction qti-gap.is-dragging-over,
form#qtiform qti-graphic-gap-match-interaction qti-gap.is-dragging-over {
  outline: 3px solid var(--qti-gap-text-border-color-default);
}
.high-contrast-mode form#qtiform qti-gap-match-interaction qti-gap.is-dragging-over, .high-contrast-mode form#qtiform qti-graphic-gap-match-interaction qti-gap.is-dragging-over {
  outline: 3px solid #fff;
}

form#qtiform qti-gap-match-interaction qti-gap.is-dragging-over,
form#qtiform qti-graphic-gap-match-interaction qti-gap.is-dragging-over {
  background-color: var(--qti-gap-background-color-hover);
}
.high-contrast-mode form#qtiform qti-gap-match-interaction qti-gap.is-dragging-over, .high-contrast-mode form#qtiform qti-graphic-gap-match-interaction qti-gap.is-dragging-over {
  background-color: #303030;
}

form#qtiform qti-gap-match-interaction qti-gap.is-dragging-over > div[data-slot].answered,
form#qtiform qti-graphic-gap-match-interaction qti-gap.is-dragging-over > div[data-slot].answered {
  color: rgba(0, 0, 0, 0.8);
}
form#qtiform qti-gap-match-interaction qti-associable-hotspot,
form#qtiform qti-graphic-gap-match-interaction qti-associable-hotspot {
  --qti-associable-hotspot-outline-color-exhausted: 8px solid #22E191;
  /* Add some spacing between answers inside a single associable-hotspot that allows multiple answers */
}
form#qtiform qti-gap-match-interaction qti-associable-hotspot:not([match-max="0"]) div[part=container] > div[data-identifier],
form#qtiform qti-graphic-gap-match-interaction qti-associable-hotspot:not([match-max="0"]) div[part=container] > div[data-identifier] {
  margin: 0.5em;
}
form#qtiform qti-gap-match-interaction qti-associable-hotspot div[part=container],
form#qtiform qti-graphic-gap-match-interaction qti-associable-hotspot div[part=container] {
  font-weight: bold;
  font-size: x-large;
}
form#qtiform qti-graphic-gap-match-interaction qti-associable-hotspot {
  --qti-associable-hotspot-shape-fill-default: #676bac;
}
form#qtiform qti-graphic-gap-match-interaction qti-associable-hotspot {
  --qti-associable-hotspot-outline-color-exhausted: 3px solid #44318d;
}
.high-contrast-mode form#qtiform qti-graphic-gap-match-interaction qti-associable-hotspot {
  --qti-associable-hotspot-outline-color-exhausted: 3px solid #fff;
}

form#qtiform qti-graphic-gap-match-interaction qti-associable-hotspot.is-dragging-over {
  border: 3px dashed #44318d;
}
form#qtiform qti-graphic-gap-match-interaction qti-gap-img.is-dragging {
  opacity: 1;
}
form#qtiform qti-graphic-gap-match-interaction qti-gap-img.is-dragging::after {
  border: 0;
  top: 5px;
  left: 5px;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
}
form#qtiform qti-graphic-gap-match-interaction qti-gap-img.is-dragging::after {
  outline: 3px solid #ba9bd8;
}
.high-contrast-mode form#qtiform qti-graphic-gap-match-interaction qti-gap-img.is-dragging::after {
  outline: 3px solid #fff;
}

form#qtiform qti-hotspot-interaction {
  --qti-hotspot-interaction-shape-color-default: #cf707a;
}
.high-contrast-mode form#qtiform qti-hotspot-interaction {
  --qti-hotspot-interaction-shape-color-default: #000000;
}

form#qtiform qti-hotspot-interaction {
  --qti-hotspot-interaction-shape-color-light: #cf707a;
}
.high-contrast-mode form#qtiform qti-hotspot-interaction {
  --qti-hotspot-interaction-shape-color-light: #000000;
}

form#qtiform qti-hotspot-interaction {
  --qti-hotspot-interaction-shape-color-dark: #ba9bd8;
}
.high-contrast-mode form#qtiform qti-hotspot-interaction {
  --qti-hotspot-interaction-shape-color-dark: #fff;
}

form#qtiform qti-text-entry-interaction {
  --qti-text-entry-interaction-outline-color-invalid: transparent;
  --qti-text-entry-interaction-height: 2rem;
}
form#qtiform qti-text-entry-interaction input[type=text], form#qtiform qti-text-entry-interaction textarea {
  padding: 0 0.25em;
  font-size: 1rem;
  line-height: 2rem;
  border-radius: 4px;
  margin-left: 1%;
  margin-right: 1%;
}
form#qtiform qti-text-entry-interaction input[type=text], form#qtiform qti-text-entry-interaction textarea {
  border: 2px solid #212121;
}
.high-contrast-mode form#qtiform qti-text-entry-interaction input[type=text], .high-contrast-mode form#qtiform qti-text-entry-interaction textarea {
  border: 2px solid #fff;
}

form#qtiform qti-text-entry-interaction input[type=text], form#qtiform qti-text-entry-interaction textarea {
  background: #fff;
}
.high-contrast-mode form#qtiform qti-text-entry-interaction input[type=text], .high-contrast-mode form#qtiform qti-text-entry-interaction textarea {
  background: #000000;
}

form#qtiform qti-text-entry-interaction input[type=text], form#qtiform qti-text-entry-interaction textarea {
  color: rgba(0, 0, 0, 0.8);
}
.high-contrast-mode form#qtiform qti-text-entry-interaction input[type=text], .high-contrast-mode form#qtiform qti-text-entry-interaction textarea {
  color: #fff;
}

form#qtiform qti-inline-choice-interaction {
  --qti-inline-choice-interaction-select-border-style: solid;
  --qti-inline-choice-interaction-select-border-width: 2px;
  /* Don't show the default "..." for unanswered inline-choices when no data-prompt was given */
}
form#qtiform qti-inline-choice-interaction {
  --qti-inline-choice-interaction-select-border-color: rgba(0, 0, 0, 0.8);
}
.high-contrast-mode form#qtiform qti-inline-choice-interaction {
  --qti-inline-choice-interaction-select-border-color: #fff;
}

form#qtiform qti-inline-choice-interaction.open {
  --qti-inline-choice-interaction-select-border-color: #ba9bd8;
}
.high-contrast-mode form#qtiform qti-inline-choice-interaction.open {
  --qti-inline-choice-interaction-select-border-color: #fff;
}

form#qtiform qti-inline-choice-interaction.open button.select div.select-suffix {
  background-color: rgba(0, 0, 0, 0.8);
}
.high-contrast-mode form#qtiform qti-inline-choice-interaction.open button.select div.select-suffix {
  background-color: #fff;
}

form#qtiform qti-inline-choice-interaction:not(.answered):not([data-prompt]) button.select label, form#qtiform qti-inline-choice-interaction:not(.answered):not([data-prompt]) button.select:hover label, form#qtiform qti-inline-choice-interaction:not(.answered):not([data-prompt]) button.select:focus label, form#qtiform qti-inline-choice-interaction:not(.answered):not([data-prompt]) button.select:focus-visible label {
  color: transparent;
}
form#qtiform qti-inline-choice-interaction button.select {
  border-radius: 4px;
  padding: 0 0.25em;
}
form#qtiform qti-inline-choice-interaction button.select label.select-label {
  font-size: 1rem;
  line-height: 2rem;
  min-height: 2rem;
}
form#qtiform qti-inline-choice-interaction button.select label.select-label, form#qtiform qti-inline-choice-interaction button.select label.select-label * {
  color: rgba(0, 0, 0, 0.8);
}
.high-contrast-mode form#qtiform qti-inline-choice-interaction button.select label.select-label, .high-contrast-mode form#qtiform qti-inline-choice-interaction button.select label.select-label * {
  color: #fff;
}

form#qtiform qti-inline-choice-interaction button.select div.select-suffix {
  --suffix-size: 1rem;
  background-color: var(--qti-inline-choice-interaction-select-border-color);
  border: 0;
  height: var(--suffix-size);
  width: var(--suffix-size);
  mask-size: var(--suffix-size);
  -webkit-mask-size: var(--suffix-size);
  mask-image: url("/player/static/icons/doe_arrow_down.svg");
  -webkit-mask-image: url("/player/static/icons/doe_arrow_down.svg");
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}
form#qtiform qti-inline-choice-interaction button.select:hover, form#qtiform qti-inline-choice-interaction button.select:focus, form#qtiform qti-inline-choice-interaction button.select:focus-visible {
  --qti-inline-choice-interaction-select-border-color: rgba(0, 0, 0, 0.8);
}
form#qtiform qti-inline-choice-interaction button.select:hover, form#qtiform qti-inline-choice-interaction button.select:focus, form#qtiform qti-inline-choice-interaction button.select:focus-visible {
  background-color: #ebe7ee;
}
.high-contrast-mode form#qtiform qti-inline-choice-interaction button.select:hover, .high-contrast-mode form#qtiform qti-inline-choice-interaction button.select:focus, .high-contrast-mode form#qtiform qti-inline-choice-interaction button.select:focus-visible {
  background-color: #fff;
}

form#qtiform qti-inline-choice-interaction button.select:hover label.select-label, form#qtiform qti-inline-choice-interaction button.select:hover label.select-label *, form#qtiform qti-inline-choice-interaction button.select:focus label.select-label, form#qtiform qti-inline-choice-interaction button.select:focus label.select-label *, form#qtiform qti-inline-choice-interaction button.select:focus-visible label.select-label, form#qtiform qti-inline-choice-interaction button.select:focus-visible label.select-label * {
  color: rgba(0, 0, 0, 0.8);
}
.high-contrast-mode form#qtiform qti-inline-choice-interaction button.select:hover label.select-label, .high-contrast-mode form#qtiform qti-inline-choice-interaction button.select:hover label.select-label *, .high-contrast-mode form#qtiform qti-inline-choice-interaction button.select:focus label.select-label, .high-contrast-mode form#qtiform qti-inline-choice-interaction button.select:focus label.select-label *, .high-contrast-mode form#qtiform qti-inline-choice-interaction button.select:focus-visible label.select-label, .high-contrast-mode form#qtiform qti-inline-choice-interaction button.select:focus-visible label.select-label * {
  color: rgba(0, 0, 0, 0.8);
}

form#qtiform qti-hottext-interaction {
  --qti-hottext-interaction-background-color-selectable: #eae1f4;
}
.high-contrast-mode form#qtiform qti-hottext-interaction {
  --qti-hottext-interaction-background-color-selectable: #000000;
}

form#qtiform qti-hottext-interaction {
  --qti-hottext-interaction-color-selectable: rgba(0, 0, 0, 0.8);
}
.high-contrast-mode form#qtiform qti-hottext-interaction {
  --qti-hottext-interaction-color-selectable: #fff;
}

form#qtiform qti-hottext-interaction {
  --qti-hottext-interaction-background-color-selected: #676bac;
}
.high-contrast-mode form#qtiform qti-hottext-interaction {
  --qti-hottext-interaction-background-color-selected: #fff;
}

form#qtiform qti-hottext-interaction {
  --qti-hottext-interaction-color-selected: #fff;
}
.high-contrast-mode form#qtiform qti-hottext-interaction {
  --qti-hottext-interaction-color-selected: rgba(0, 0, 0, 0.8);
}

form#qtiform qti-hottext-interaction {
  --qti-hottext-interaction-background-color-exhausted: #ebe7ee;
}
.high-contrast-mode form#qtiform qti-hottext-interaction {
  --qti-hottext-interaction-background-color-exhausted: #000000;
}

form#qtiform qti-hottext-interaction {
  --qti-hottext-interaction-color-exhausted: #919EAB;
}
.high-contrast-mode form#qtiform qti-hottext-interaction {
  --qti-hottext-interaction-color-exhausted: #fff;
}

form#qtiform qti-hottext-interaction qti-hottext {
  border-radius: 0;
  margin: 0;
}
form#qtiform qti-hottext-interaction qti-hottext {
  border: none;
}
.high-contrast-mode form#qtiform qti-hottext-interaction qti-hottext {
  border: 2px solid #fff;
}

form#qtiform qti-hottext-interaction qti-hottext {
  border-bottom: 2px dashed #303030;
}
.high-contrast-mode form#qtiform qti-hottext-interaction qti-hottext {
  border-bottom: 2px dashed #fff;
}

form#qtiform qti-hottext-interaction qti-hottext {
  padding: 0;
}
.high-contrast-mode form#qtiform qti-hottext-interaction qti-hottext {
  padding: 0 2px;
}

form#qtiform qti-hottext-interaction qti-hottext.selected {
  border-bottom-style: solid;
}
form#qtiform qti-hottext-interaction qti-hottext.selected {
  box-shadow: var(--shadow);
}
.high-contrast-mode form#qtiform qti-hottext-interaction qti-hottext.selected {
  box-shadow: none;
}

form#qtiform qti-hottext-interaction.exhausted qti-hottext:not(.selected) {
  opacity: 1;
}
.high-contrast-mode form#qtiform qti-hottext-interaction.exhausted qti-hottext:not(.selected) {
  opacity: 0.66;
}

form#qtiform qti-hottext-interaction.exhausted qti-hottext:not(.selected) {
  border-bottom-color: #919EAB;
}
.high-contrast-mode form#qtiform qti-hottext-interaction.exhausted qti-hottext:not(.selected) {
  border-bottom-color: #fff;
}

/**
 * QTI Media Interaction
 */
qti-media-interaction > qade-media,
qade-media {
  --container-height: 64px;
  /* Hide captions button if there are no tracks available */
}
qti-media-interaction > qade-media qade-slider,
qade-media qade-slider {
  --qade-slider-thumb-color: #ba9bd8;
  --qade-slider-slider-foreground-color: #ba9bd8;
  --qade-slider-slider-background-color: #ebe7ee;
  --qade-slider-slider-thickness: .66em;
  --qade-slider-thumb-size: calc(var(--qade-slider-slider-thickness) * 2);
}
qti-media-interaction > qade-media div.controls-container,
qade-media div.controls-container {
  height: var(--container-height);
  box-sizing: border-box;
  border: 1px solid #ebe7ee;
  border-radius: 16px;
  grid-template-areas: "play captions seeker";
  grid-template-columns: min-content min-content 2fr;
  grid-template-rows: 1fr;
  overflow: hidden;
}
qti-media-interaction > qade-media div.controls-container,
qade-media div.controls-container {
  background-color: #fff;
}
.high-contrast-mode qti-media-interaction > qade-media div.controls-container, .high-contrast-mode qade-media div.controls-container {
  background-color: #303030;
}

qti-media-interaction > qade-media div.controls-container div.seeker-container,
qade-media div.controls-container div.seeker-container {
  align-self: center;
  padding: 0 2rem;
  min-width: 200px;
  height: 100%;
}
qti-media-interaction > qade-media div.controls-container div.seeker-container qade-slider:not([disabled]) div.slider-container:hover,
qti-media-interaction > qade-media div.controls-container div.seeker-container qade-slider:not([disabled]) div.slider-container div.slider-thumb:focus-visible,
qade-media div.controls-container div.seeker-container qade-slider:not([disabled]) div.slider-container:hover,
qade-media div.controls-container div.seeker-container qade-slider:not([disabled]) div.slider-container div.slider-thumb:focus-visible {
  --qade-slider-thumb-color: #676bac;
}
qti-media-interaction > qade-media div.controls-container div.seeker-container qade-slider,
qade-media div.controls-container div.seeker-container qade-slider {
  height: 100%;
}
qti-media-interaction > qade-media div.controls-container div.seeker-container qade-slider div.slider-container,
qade-media div.controls-container div.seeker-container qade-slider div.slider-container {
  height: 100%;
}
qti-media-interaction > qade-media div.controls-container div.seeker-container qade-slider div.slider-container div.ticks-container,
qade-media div.controls-container div.seeker-container qade-slider div.slider-container div.ticks-container {
  display: none;
}
qti-media-interaction > qade-media div.controls-container div.seeker-container qade-slider div.slider-container div.slider-background,
qade-media div.controls-container div.seeker-container qade-slider div.slider-container div.slider-background {
  top: calc(50% - var(--qade-slider-slider-thickness) / 2);
}
qti-media-interaction > qade-media div.controls-container button.play-pause,
qti-media-interaction > qade-media div.controls-container button.captions,
qade-media div.controls-container button.play-pause,
qade-media div.controls-container button.captions {
  height: 100%;
  width: var(--container-height);
  border-width: 0;
  border-right: 1px solid #ebe7ee;
  background-color: transparent;
}
qti-media-interaction > qade-media div.controls-container button.play-pause.enabled,
qti-media-interaction > qade-media div.controls-container button.captions.enabled,
qade-media div.controls-container button.play-pause.enabled,
qade-media div.controls-container button.captions.enabled {
  background-color: transparent;
  border-color: #ebe7ee;
}
qti-media-interaction > qade-media div.controls-container button.play-pause.enabled:hover, qti-media-interaction > qade-media div.controls-container button.play-pause.enabled:focus-visible,
qti-media-interaction > qade-media div.controls-container button.captions.enabled:hover,
qti-media-interaction > qade-media div.controls-container button.captions.enabled:focus-visible,
qade-media div.controls-container button.play-pause.enabled:hover,
qade-media div.controls-container button.play-pause.enabled:focus-visible,
qade-media div.controls-container button.captions.enabled:hover,
qade-media div.controls-container button.captions.enabled:focus-visible {
  background-color: #676bac;
}
.high-contrast-mode qti-media-interaction > qade-media div.controls-container button.play-pause.enabled:hover, .high-contrast-mode qti-media-interaction > qade-media div.controls-container button.play-pause.enabled:focus-visible, .high-contrast-mode qti-media-interaction > qade-media div.controls-container button.captions.enabled:hover, .high-contrast-mode qti-media-interaction > qade-media div.controls-container button.captions.enabled:focus-visible, .high-contrast-mode qade-media div.controls-container button.play-pause.enabled:hover, .high-contrast-mode qade-media div.controls-container button.play-pause.enabled:focus-visible, .high-contrast-mode qade-media div.controls-container button.captions.enabled:hover, .high-contrast-mode qade-media div.controls-container button.captions.enabled:focus-visible {
  background-color: #fff;
}

qti-media-interaction > qade-media div.controls-container button.play-pause.enabled:hover, qti-media-interaction > qade-media div.controls-container button.play-pause.enabled:focus-visible,
qti-media-interaction > qade-media div.controls-container button.captions.enabled:hover,
qti-media-interaction > qade-media div.controls-container button.captions.enabled:focus-visible,
qade-media div.controls-container button.play-pause.enabled:hover,
qade-media div.controls-container button.play-pause.enabled:focus-visible,
qade-media div.controls-container button.captions.enabled:hover,
qade-media div.controls-container button.captions.enabled:focus-visible {
  border-color: #676bac;
}
.high-contrast-mode qti-media-interaction > qade-media div.controls-container button.play-pause.enabled:hover, .high-contrast-mode qti-media-interaction > qade-media div.controls-container button.play-pause.enabled:focus-visible, .high-contrast-mode qti-media-interaction > qade-media div.controls-container button.captions.enabled:hover, .high-contrast-mode qti-media-interaction > qade-media div.controls-container button.captions.enabled:focus-visible, .high-contrast-mode qade-media div.controls-container button.play-pause.enabled:hover, .high-contrast-mode qade-media div.controls-container button.play-pause.enabled:focus-visible, .high-contrast-mode qade-media div.controls-container button.captions.enabled:hover, .high-contrast-mode qade-media div.controls-container button.captions.enabled:focus-visible {
  border-color: #fff;
}

qti-media-interaction > qade-media div.controls-container button.play-pause.enabled:hover::after, qti-media-interaction > qade-media div.controls-container button.play-pause.enabled:focus-visible::after,
qti-media-interaction > qade-media div.controls-container button.captions.enabled:hover::after,
qti-media-interaction > qade-media div.controls-container button.captions.enabled:focus-visible::after,
qade-media div.controls-container button.play-pause.enabled:hover::after,
qade-media div.controls-container button.play-pause.enabled:focus-visible::after,
qade-media div.controls-container button.captions.enabled:hover::after,
qade-media div.controls-container button.captions.enabled:focus-visible::after {
  background-color: #fff;
}
.high-contrast-mode qti-media-interaction > qade-media div.controls-container button.play-pause.enabled:hover::after, .high-contrast-mode qti-media-interaction > qade-media div.controls-container button.play-pause.enabled:focus-visible::after, .high-contrast-mode qti-media-interaction > qade-media div.controls-container button.captions.enabled:hover::after, .high-contrast-mode qti-media-interaction > qade-media div.controls-container button.captions.enabled:focus-visible::after, .high-contrast-mode qade-media div.controls-container button.play-pause.enabled:hover::after, .high-contrast-mode qade-media div.controls-container button.play-pause.enabled:focus-visible::after, .high-contrast-mode qade-media div.controls-container button.captions.enabled:hover::after, .high-contrast-mode qade-media div.controls-container button.captions.enabled:focus-visible::after {
  background-color: rgba(0, 0, 0, 0.8);
}

qti-media-interaction > qade-media div.controls-container button.play-pause.enabled::after,
qti-media-interaction > qade-media div.controls-container button.captions.enabled::after,
qade-media div.controls-container button.play-pause.enabled::after,
qade-media div.controls-container button.captions.enabled::after {
  background-color: rgba(0, 0, 0, 0.8);
}
.high-contrast-mode qti-media-interaction > qade-media div.controls-container button.play-pause.enabled::after, .high-contrast-mode qti-media-interaction > qade-media div.controls-container button.captions.enabled::after, .high-contrast-mode qade-media div.controls-container button.play-pause.enabled::after, .high-contrast-mode qade-media div.controls-container button.captions.enabled::after {
  background-color: rgba(0, 0, 0, 0.8);
}

qti-media-interaction > qade-media div.controls-container button.play-pause:not(.enabled):not([disabled]):hover, qti-media-interaction > qade-media div.controls-container button.play-pause:not(.enabled):not([disabled]):focus-visible,
qti-media-interaction > qade-media div.controls-container button.captions:not(.enabled):not([disabled]):hover,
qti-media-interaction > qade-media div.controls-container button.captions:not(.enabled):not([disabled]):focus-visible,
qade-media div.controls-container button.play-pause:not(.enabled):not([disabled]):hover,
qade-media div.controls-container button.play-pause:not(.enabled):not([disabled]):focus-visible,
qade-media div.controls-container button.captions:not(.enabled):not([disabled]):hover,
qade-media div.controls-container button.captions:not(.enabled):not([disabled]):focus-visible {
  background-color: #676bac;
}
.high-contrast-mode qti-media-interaction > qade-media div.controls-container button.play-pause:not(.enabled):not([disabled]):hover, .high-contrast-mode qti-media-interaction > qade-media div.controls-container button.play-pause:not(.enabled):not([disabled]):focus-visible, .high-contrast-mode qti-media-interaction > qade-media div.controls-container button.captions:not(.enabled):not([disabled]):hover, .high-contrast-mode qti-media-interaction > qade-media div.controls-container button.captions:not(.enabled):not([disabled]):focus-visible, .high-contrast-mode qade-media div.controls-container button.play-pause:not(.enabled):not([disabled]):hover, .high-contrast-mode qade-media div.controls-container button.play-pause:not(.enabled):not([disabled]):focus-visible, .high-contrast-mode qade-media div.controls-container button.captions:not(.enabled):not([disabled]):hover, .high-contrast-mode qade-media div.controls-container button.captions:not(.enabled):not([disabled]):focus-visible {
  background-color: #fff;
}

qti-media-interaction > qade-media div.controls-container button.play-pause:not(.enabled):not([disabled]):hover, qti-media-interaction > qade-media div.controls-container button.play-pause:not(.enabled):not([disabled]):focus-visible,
qti-media-interaction > qade-media div.controls-container button.captions:not(.enabled):not([disabled]):hover,
qti-media-interaction > qade-media div.controls-container button.captions:not(.enabled):not([disabled]):focus-visible,
qade-media div.controls-container button.play-pause:not(.enabled):not([disabled]):hover,
qade-media div.controls-container button.play-pause:not(.enabled):not([disabled]):focus-visible,
qade-media div.controls-container button.captions:not(.enabled):not([disabled]):hover,
qade-media div.controls-container button.captions:not(.enabled):not([disabled]):focus-visible {
  border-color: #676bac;
}
.high-contrast-mode qti-media-interaction > qade-media div.controls-container button.play-pause:not(.enabled):not([disabled]):hover, .high-contrast-mode qti-media-interaction > qade-media div.controls-container button.play-pause:not(.enabled):not([disabled]):focus-visible, .high-contrast-mode qti-media-interaction > qade-media div.controls-container button.captions:not(.enabled):not([disabled]):hover, .high-contrast-mode qti-media-interaction > qade-media div.controls-container button.captions:not(.enabled):not([disabled]):focus-visible, .high-contrast-mode qade-media div.controls-container button.play-pause:not(.enabled):not([disabled]):hover, .high-contrast-mode qade-media div.controls-container button.play-pause:not(.enabled):not([disabled]):focus-visible, .high-contrast-mode qade-media div.controls-container button.captions:not(.enabled):not([disabled]):hover, .high-contrast-mode qade-media div.controls-container button.captions:not(.enabled):not([disabled]):focus-visible {
  border-color: #fff;
}

qti-media-interaction > qade-media div.controls-container button.play-pause:not(.enabled):not([disabled]):hover::after, qti-media-interaction > qade-media div.controls-container button.play-pause:not(.enabled):not([disabled]):focus-visible::after,
qti-media-interaction > qade-media div.controls-container button.captions:not(.enabled):not([disabled]):hover::after,
qti-media-interaction > qade-media div.controls-container button.captions:not(.enabled):not([disabled]):focus-visible::after,
qade-media div.controls-container button.play-pause:not(.enabled):not([disabled]):hover::after,
qade-media div.controls-container button.play-pause:not(.enabled):not([disabled]):focus-visible::after,
qade-media div.controls-container button.captions:not(.enabled):not([disabled]):hover::after,
qade-media div.controls-container button.captions:not(.enabled):not([disabled]):focus-visible::after {
  background-color: #fff;
}
.high-contrast-mode qti-media-interaction > qade-media div.controls-container button.play-pause:not(.enabled):not([disabled]):hover::after, .high-contrast-mode qti-media-interaction > qade-media div.controls-container button.play-pause:not(.enabled):not([disabled]):focus-visible::after, .high-contrast-mode qti-media-interaction > qade-media div.controls-container button.captions:not(.enabled):not([disabled]):hover::after, .high-contrast-mode qti-media-interaction > qade-media div.controls-container button.captions:not(.enabled):not([disabled]):focus-visible::after, .high-contrast-mode qade-media div.controls-container button.play-pause:not(.enabled):not([disabled]):hover::after, .high-contrast-mode qade-media div.controls-container button.play-pause:not(.enabled):not([disabled]):focus-visible::after, .high-contrast-mode qade-media div.controls-container button.captions:not(.enabled):not([disabled]):hover::after, .high-contrast-mode qade-media div.controls-container button.captions:not(.enabled):not([disabled]):focus-visible::after {
  background-color: rgba(0, 0, 0, 0.8);
}

qti-media-interaction > qade-media div.controls-container button.play-pause::after,
qti-media-interaction > qade-media div.controls-container button.captions::after,
qade-media div.controls-container button.play-pause::after,
qade-media div.controls-container button.captions::after {
  background-color: rgba(0, 0, 0, 0.8);
}
.high-contrast-mode qti-media-interaction > qade-media div.controls-container button.play-pause::after, .high-contrast-mode qti-media-interaction > qade-media div.controls-container button.captions::after, .high-contrast-mode qade-media div.controls-container button.play-pause::after, .high-contrast-mode qade-media div.controls-container button.captions::after {
  background-color: rgba(0, 0, 0, 0.8);
}

qti-media-interaction > qade-media div.controls-container button.play-pause::after,
qade-media div.controls-container button.play-pause::after {
  mask-image: url(/player/static/icons/play.svg);
  mask-size: 33%;
}
qti-media-interaction > qade-media div.controls-container button.play-pause::after,
qade-media div.controls-container button.play-pause::after {
  background-color: rgba(0, 0, 0, 0.8);
}
.high-contrast-mode qti-media-interaction > qade-media div.controls-container button.play-pause::after, .high-contrast-mode qade-media div.controls-container button.play-pause::after {
  background-color: rgba(0, 0, 0, 0.8);
}

qti-media-interaction > qade-media div.controls-container button.play-pause.enabled::after,
qade-media div.controls-container button.play-pause.enabled::after {
  mask-image: url(/player/static/icons/pause.svg);
  mask-size: 33%;
}
qti-media-interaction > qade-media div.controls-container button.captions::after,
qade-media div.controls-container button.captions::after {
  mask-size: 75%;
  -webkit-mask-position-y: 0.45em;
}
qti-media-interaction > qade-media div.controls-container button.rewind,
qti-media-interaction > qade-media div.controls-container button.volume,
qti-media-interaction > qade-media div.controls-container button.speed,
qti-media-interaction > qade-media div.controls-container div.duration-container,
qade-media div.controls-container button.rewind,
qade-media div.controls-container button.volume,
qade-media div.controls-container button.speed,
qade-media div.controls-container div.duration-container {
  display: none;
}
qti-media-interaction > qade-media:not(:has(video > track, audio > track)) div.controls-container > button.captions,
qade-media:not(:has(video > track, audio > track)) div.controls-container > button.captions {
  display: none;
}

/* Drag & Drop ghost element */
div[data-dnd-ghost-element], p[data-dnd-ghost-element], span[data-dnd-ghost-element] {
  box-shadow: var(--shadow);
  font-weight: bold;
  padding: 1rem;
  border-radius: 1rem;
}
div[data-dnd-ghost-element], p[data-dnd-ghost-element], span[data-dnd-ghost-element] {
  background-color: #fff;
}
.high-contrast-mode div[data-dnd-ghost-element], .high-contrast-mode p[data-dnd-ghost-element], .high-contrast-mode span[data-dnd-ghost-element] {
  background-color: #fff;
}

div[data-dnd-ghost-element], p[data-dnd-ghost-element], span[data-dnd-ghost-element] {
  color: rgba(0, 0, 0, 0.8);
}
.high-contrast-mode div[data-dnd-ghost-element], .high-contrast-mode p[data-dnd-ghost-element], .high-contrast-mode span[data-dnd-ghost-element] {
  color: rgba(0, 0, 0, 0.8);
}

div[data-dnd-ghost-element], p[data-dnd-ghost-element], span[data-dnd-ghost-element] {
  outline: 2px solid #44318d;
}
.high-contrast-mode div[data-dnd-ghost-element], .high-contrast-mode p[data-dnd-ghost-element], .high-contrast-mode span[data-dnd-ghost-element] {
  outline: none;
}

/* InlineInteraction's dropdown */
qade-popover.open {
  --qade-popover-backdrop-background-color: transparent;
}
qade-popover.open {
  --qade-popover-option-hover-color: #ebe7ee;
}
.high-contrast-mode qade-popover.open {
  --qade-popover-option-hover-color: #fff;
}

qade-popover.open div.options-container {
  border-radius: 4px;
  box-shadow: var(--shadow);
}
qade-popover.open div.options-container {
  background-color: #fff;
}
.high-contrast-mode qade-popover.open div.options-container {
  background-color: #000000;
}

qade-popover.open div.options-container [identifier], qade-popover.open div.options-container [identifier] * {
  color: rgba(0, 0, 0, 0.8);
}
.high-contrast-mode qade-popover.open div.options-container [identifier], .high-contrast-mode qade-popover.open div.options-container [identifier] * {
  color: #fff;
}

qade-popover.open div.options-container [identifier]:hover, qade-popover.open div.options-container [identifier]:hover *, qade-popover.open div.options-container [identifier]:focus, qade-popover.open div.options-container [identifier]:focus *, qade-popover.open div.options-container [identifier]:focus-visible, qade-popover.open div.options-container [identifier]:focus-visible * {
  color: rgba(0, 0, 0, 0.8);
}
.high-contrast-mode qade-popover.open div.options-container [identifier]:hover, .high-contrast-mode qade-popover.open div.options-container [identifier]:hover *, .high-contrast-mode qade-popover.open div.options-container [identifier]:focus, .high-contrast-mode qade-popover.open div.options-container [identifier]:focus *, .high-contrast-mode qade-popover.open div.options-container [identifier]:focus-visible, .high-contrast-mode qade-popover.open div.options-container [identifier]:focus-visible * {
  color: rgba(0, 0, 0, 0.8);
}

qade-popover.open div.options-container [identifier]:first-of-type {
  margin-top: 0;
}
qade-popover.open div.options-container [identifier]:last-of-type {
  margin-bottom: 0;
}
qade-popover.open div.options-container hr {
  width: 100%;
  border-top: 2px solid;
}
qade-popover.open div.options-container hr {
  border-color: #ebe7ee;
}
.high-contrast-mode qade-popover.open div.options-container hr {
  border-color: #fff;
}

qade-popover.open qti-inline-choice {
  padding: 0;
  font-size: 1rem;
  line-height: 2rem;
  /* MathJax makes mathml elements focusable for accessibility controls */
}
qade-popover.open qti-inline-choice span.MathJax:focus {
  outline: 2px dotted rgba(0, 0, 0, 0.8);
}
.high-contrast-mode qade-popover.open qti-inline-choice span.MathJax:focus {
  outline: 2px dotted #fff;
}

qade-popover.open qti-inline-choice span.MathJax:focus:before {
  content: "";
  position: absolute;
  height: 10px;
  width: 10px;
  border: 5px solid transparent;
  border-left-color: black;
  top: calc(50% - 5px);
  left: -10px;
  box-sizing: border-box;
}

qade-tooltip {
  min-height: 1.5rem;
}
qade-tooltip button.show-hide, qade-tooltip button.previous, qade-tooltip button.next, qade-tooltip.hide button.show-hide, qade-tooltip.hide button.previous, qade-tooltip.hide button.next {
  margin-top: 0.125rem;
  line-height: 1.25rem;
}
qade-tooltip div.previous-next-container > span.counter {
  color: var(--qade-tooltip-text-color);
}

.exception-container {
  height: 75%;
  min-height: fit-content;
  width: 60%;
  padding: 5em 2em 2em 2em;
  min-width: fit-content;
  border-radius: 48px;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: space-around;
  box-sizing: border-box;
  transition: width 0.33s ease-out, height 0.33s ease-out, border-radius 0.33s ease-out;
}
.exception-container {
  background-color: #fff;
}
.high-contrast-mode .exception-container {
  background-color: #303030;
}

.exception-container .exception-message {
  text-align: center;
}
.exception-container .redirect-button {
  display: flex;
  justify-content: center;
}

/* Medium screen res */
@media screen and (max-width: 900px), screen and (max-height: 825px) {
  .exception-container {
    width: calc(100% - 2em);
    height: calc(100% - 2em);
  }
}
/* Small screen res */
@media screen and (max-width: 700px), screen and (max-height: 700px) {
  .exception-container {
    width: 100%;
    height: 100%;
    border-radius: 0;
    justify-content: flex-start;
  }
}
div.dialog.troubleshoot {
  position: absolute;
  width: 80%;
  height: 90%;
  min-height: 90%;
  padding: 0;
  overflow: hidden;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50rem;
  min-height: 90%;
  margin-left: -25rem;
  margin-top: -45%;
}
div.dialog.troubleshoot .dialog-inner {
  overflow: hidden;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  padding: 0;
  width: 100%;
  margin: 0;
}
div.dialog.troubleshoot .dialog-inner .dialog-header {
  position: relative;
  display: flex;
  background-color: #fff;
}
div.dialog.troubleshoot .dialog-inner .dialog-header .drag-handler.ui-draggable-handle {
  position: relative;
  left: 0;
  right: 0;
  padding-left: 2rem;
  background-position: 1em;
  display: block;
  flex: 1;
}
div.dialog.troubleshoot .dialog-inner .dialog-header .dialog-close {
  position: relative;
}
div.dialog.troubleshoot .dialog-inner .dialogContent {
  position: relative;
  height: 100%;
  top: 0 !important;
  display: flex;
  flex-direction: column;
}
div.dialog.troubleshoot .dialog-inner .customContent {
  float: left;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  text-align: left;
  padding: 1.25rem;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
div.dialog.troubleshoot .dialog-inner .customContent h3 {
  text-align: start;
}
div.dialog.troubleshoot .dialog-inner .customContent hr {
  width: 100%;
  border-bottom: 1px dashed #919EAB;
  margin: 1em 0;
}
div.dialog.troubleshoot .dialog-inner .customContent p {
  text-align: start;
  white-space: pre-wrap;
}

body.paused #contentWindow {
  height: 100%;
}
body.paused footer {
  display: none;
}

div#abortPauseResume {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
}
div#abortPauseResume {
  background-image: url("/player/static/img/background.svg");
}
.high-contrast-mode div#abortPauseResume {
  background-image: none;
}

div#abortPauseResume {
  background-color: #ebe7ee;
}
.high-contrast-mode div#abortPauseResume {
  background-color: #000000;
}

div#abortPauseResume div.dialog {
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 50vh;
  min-height: fit-content;
  width: 50vw;
  min-width: fit-content;
  overflow: auto;
  padding: 1em;
}
div#abortPauseResume div.dialog {
  background-color: #fff;
}
.high-contrast-mode div#abortPauseResume div.dialog {
  background-color: #303030;
}

div#abortPauseResume div.dialog div.hourglass {
  height: 128px;
  width: 128px;
  flex-grow: 0;
  flex-shrink: 0;
  background-position: center;
  background-size: 85%;
  border-radius: 50%;
  margin-bottom: 2.5em;
}
div#abortPauseResume div.dialog div.hourglass {
  background-image: url("/player/static/icons/doe_zandloper.svg");
}
.high-contrast-mode div#abortPauseResume div.dialog div.hourglass {
  background-image: url("/player/static/icons/doe_zandloper-hc.svg");
}

div#abortPauseResume div.dialog div.hourglass {
  background-color: #44318d;
}
.high-contrast-mode div#abortPauseResume div.dialog div.hourglass {
  background-color: transparent;
}

div#abortPauseResume div.dialog div.content {
  width: 66%;
  text-align: center;
  font-weight: bold;
  font-size: x-large;
}
div#abortPauseResume div.dialog div.content button#resumeLink {
  height: 64px;
  width: fit-content;
  border-radius: 32px;
  padding: 0 1em;
  margin-top: 2.5em;
  color: white;
  font-size: x-large;
  cursor: pointer;
}
div#abortPauseResume div.dialog div.content button#resumeLink {
  background-color: #44318d;
}
.high-contrast-mode div#abortPauseResume div.dialog div.content button#resumeLink {
  background-color: #000000;
}

div#abortPauseResume div.dialog div.content button#resumeLink:hover, div#abortPauseResume div.dialog div.content button#resumeLink:focus {
  background-color: #676bac;
}
.high-contrast-mode div#abortPauseResume div.dialog div.content button#resumeLink:hover, .high-contrast-mode div#abortPauseResume div.dialog div.content button#resumeLink:focus {
  background-color: #fff;
}

div#abortPauseResume div.dialog div.content button#resumeLink:hover, div#abortPauseResume div.dialog div.content button#resumeLink:focus {
  color: #fff;
}
.high-contrast-mode div#abortPauseResume div.dialog div.content button#resumeLink:hover, .high-contrast-mode div#abortPauseResume div.dialog div.content button#resumeLink:focus {
  color: rgba(0, 0, 0, 0.8);
}

.dialog.focus-detector .dialog-inner {
  flex-wrap: nowrap;
  overflow: auto;
}
.dialog.focus-detector div.stop-icon {
  --size: 128px;
  height: var(--size);
  width: var(--size);
  background-position: center;
  background-repeat: no-repeat;
  border-radius: calc(var(--size) / 2);
}
.dialog.focus-detector div.stop-icon {
  background-image: url(/player/static/icons/doe_stop.svg);
}
.high-contrast-mode .dialog.focus-detector div.stop-icon {
  background-image: url(/player/static/icons/doe_stop-hc.svg);
}

.dialog.focus-detector div.stop-icon {
  background-color: #44318d;
}
.high-contrast-mode .dialog.focus-detector div.stop-icon {
  background-color: #000000;
}

@media screen and (max-width: 800px) {
  .dialog.focus-detector {
    --width: 100vw;
  }
}
@media screen and (max-height: 450px) {
  .dialog.focus-detector {
    --height: 100vh;
  }
}
div#main {
  /* Medium screen res */
  /* Small screen res */
}
div#main .testPart-start-page {
  background-image: url("/player/static/icons/doe_clover.png");
  background-repeat: no-repeat;
  background-position: 3% 5%;
  background-size: max(20%, 200px);
}
div#main .testPart-start-page h2.testPart-title {
  overflow-wrap: anywhere;
  text-align: center;
}
div#main .testPart-start-page p.testPart-subtitle {
  font-size: 2em;
  text-align: center;
}
div#main .testPart-start-page .testPart-info-container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 100%;
  margin-bottom: 2em;
}
div#main .testPart-start-page .testPart-info-container .date-section p,
div#main .testPart-start-page .testPart-info-container .item-number-section p {
  font-size: 1.5em;
}
div#main .testPart-start-page .testPart-start-button {
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 900px), screen and (max-height: 825px) {
  div#main .testPart-start-page {
    overflow: auto;
    width: calc(100% - 2em);
    height: calc(100% - 2em);
  }
}
@media screen and (max-width: 700px), screen and (max-height: 700px) {
  div#main .testPart-start-page {
    overflow: auto;
    width: 100%;
    height: 100%;
    border-radius: 0;
    justify-content: flex-start;
  }
}

.scroll-indicator {
  --before-gradient: linear-gradient($background-light, transparent);
  --after-gradient: linear-gradient(transparent, $background-light);
  position: relative;
  overflow: hidden !important;
}
.scroll-indicator {
  --before-gradient: linear-gradient(#fff, transparent);
}
.high-contrast-mode .scroll-indicator {
  --before-gradient: linear-gradient(#000000, transparent);
}

.scroll-indicator {
  --after-gradient: linear-gradient(transparent, #fff);
}
.high-contrast-mode .scroll-indicator {
  --after-gradient: linear-gradient(transparent, #000000);
}

.scroll-indicator:before, .scroll-indicator:after {
  content: "";
  display: block;
  height: 50px;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  pointer-events: none;
}
.scroll-indicator:before {
  background: var(--before-gradient);
  transition: top 0.2s ease-out;
  top: -50px;
}
.scroll-indicator:after {
  background: var(--after-gradient);
  transition: bottom 0.2s ease-out;
  bottom: -50px;
}
.scroll-indicator.can-scroll-up:before {
  top: 0;
}
.scroll-indicator.can-scroll-down:after {
  bottom: 0;
}
.scroll-indicator_scroll-area {
  position: relative;
  height: 100%;
  overflow: auto;
  padding: 0 1em;
}

/* quicksand-300 - latin */
@font-face {
  font-family: "Quicksand";
  font-style: normal;
  font-weight: 300;
  src: url("/player/static/fonts/quicksand-v21-latin-300.eot"); /* IE9 Compat Modes */
  src: local(""), url("/player/static/fonts/quicksand-v21-latin-300.eot?#iefix") format("embedded-opentype"), url("/player/static/fonts/quicksand-v21-latin-300.woff2") format("woff2"), url("/player/static/fonts/quicksand-v21-latin-300.woff") format("woff"), url("/player/static/fonts/quicksand-v21-latin-300.ttf") format("truetype"), url("/player/static/fonts/quicksand-v21-latin-300.svg#Quicksand") format("svg"); /* Legacy iOS */
}
/* quicksand-regular - latin */
@font-face {
  font-family: "Quicksand";
  font-style: normal;
  font-weight: 400;
  src: url("/player/static/fonts/quicksand-v21-latin-regular.eot"); /* IE9 Compat Modes */
  src: local(""), url("/player/static/fonts/quicksand-v21-latin-regular.eot?#iefix") format("embedded-opentype"), url("/player/static/fonts/quicksand-v21-latin-regular.woff2") format("woff2"), url("/player/static/fonts/quicksand-v21-latin-regular.woff") format("woff"), url("/player/static/fonts/quicksand-v21-latin-regular.ttf") format("truetype"), url("/player/static/fonts/quicksand-v21-latin-regular.svg#Quicksand") format("svg"); /* Legacy iOS */
}
/* Lato-Regular */
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  src: url("/player/static/fonts/Lato-Regular.ttf") format("truetype");
}
/* quicksand-500 - latin */
@font-face {
  font-family: "Quicksand";
  font-style: normal;
  font-weight: 500;
  src: url("/player/static/fonts/quicksand-v21-latin-500.eot"); /* IE9 Compat Modes */
  src: local(""), url("/player/static/fonts/quicksand-v21-latin-500.eot?#iefix") format("embedded-opentype"), url("/player/static/fonts/quicksand-v21-latin-500.woff2") format("woff2"), url("/player/static/fonts/quicksand-v21-latin-500.woff") format("woff"), url("/player/static/fonts/quicksand-v21-latin-500.ttf") format("truetype"), url("/player/static/fonts/quicksand-v21-latin-500.svg#Quicksand") format("svg"); /* Legacy iOS */
}
/* quicksand-600 - latin */
@font-face {
  font-family: "Quicksand";
  font-style: normal;
  font-weight: 600;
  src: url("/player/static/fonts/quicksand-v21-latin-600.eot"); /* IE9 Compat Modes */
  src: local(""), url("/player/static/fonts/quicksand-v21-latin-600.eot?#iefix") format("embedded-opentype"), url("/player/static/fonts/quicksand-v21-latin-600.woff2") format("woff2"), url("/player/static/fonts/quicksand-v21-latin-600.woff") format("woff"), url("/player/static/fonts/quicksand-v21-latin-600.ttf") format("truetype"), url("/player/static/fonts/quicksand-v21-latin-600.svg#Quicksand") format("svg"); /* Legacy iOS */
}
/* quicksand-700 - latin */
@font-face {
  font-family: "Quicksand";
  font-style: normal;
  font-weight: 700;
  src: url("/player/static/fonts/quicksand-v21-latin-700.eot"); /* IE9 Compat Modes */
  src: local(""), url("/player/static/fonts/quicksand-v21-latin-700.eot?#iefix") format("embedded-opentype"), url("/player/static/fonts/quicksand-v21-latin-700.woff2") format("woff2"), url("/player/static/fonts/quicksand-v21-latin-700.woff") format("woff"), url("/player/static/fonts/quicksand-v21-latin-700.ttf") format("truetype"), url("/player/static/fonts/quicksand-v21-latin-700.svg#Quicksand") format("svg"); /* Legacy iOS */
}
* {
  margin: 0;
  padding: 0;
  border: 0;
}
* {
  outline: #ebe7ee;
}
.high-contrast-mode * {
  outline: #212121;
}

html {
  font-size: 16px;
  overflow: auto;
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  font-family: "PT Sans Caption", sans-serif;
  overflow: hidden;
  transform: scale(1); /* Required by the magnifier tool */
}
body p {
  margin: 1em 0;
  padding: initial;
}
body a {
  text-decoration: none;
  color: #fff;
  font-family: "PT Sans Caption", sans-serif;
}
body button {
  font-family: "PT Sans Caption", sans-serif;
}

body.magnified {
  transform-origin: top left;
  transform: scale(1.5);
  width: 66.6666666667%;
  height: 66.6666666667%;
}

h1, h2, h3, h4, h5, p, span, div {
  color: rgba(0, 0, 0, 0.8);
}
.high-contrast-mode h1, .high-contrast-mode h2, .high-contrast-mode h3, .high-contrast-mode h4, .high-contrast-mode h5, .high-contrast-mode p, .high-contrast-mode span, .high-contrast-mode div {
  color: #fff;
}

#main .associableHotspot.droppable-active {
  fill: #cf707a;
}
.high-contrast-mode #main .associableHotspot.droppable-active {
  fill: #cf707a;
}

#main .gap.droppable-active {
  background-color: #cf707a;
}
.high-contrast-mode #main .gap.droppable-active {
  background-color: #cf707a;
}

[data-qade-destination],
[data-qade-submiturl] {
  cursor: pointer;
}
[data-qade-destination],
[data-qade-submiturl] {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.two_column_layout .left_column {
  display: inline-block;
  float: left;
  width: 49.5%;
}
.two_column_layout .left_column .left_column_inner {
  margin-right: 1.5625rem;
  float: right;
  max-width: 28.125rem;
  overflow: hidden;
}
.two_column_layout .right_column {
  display: inline-block;
  float: right;
  width: 49.5%;
}
.two_column_layout .right_column .right_column_inner {
  margin-left: 1.5625rem;
  float: left;
  max-width: 28.125rem;
  overflow: hidden;
}
.two_column_layout .column_line {
  width: 1px;
  height: 12.5rem;
  float: left;
}
.two_column_layout .column_line {
  background-image: linear-gradient(top, #B8B8B8 0%, #fff 100%);
  background-image: -o-linear-gradient(top, #B8B8B8 0%, #fff 100%);
  background-image: -moz-linear-gradient(top, #B8B8B8 0%, #fff 100%);
  background-image: -webkit-linear-gradient(top, #B8B8B8 0%, #fff 100%);
  background-image: -ms-linear-gradient(top, #B8B8B8 0%, #fff 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #B8B8B8), color-stop(1, #fff));
  -pie-background: linear-gradient(top, #B8B8B8 0%, #fff 100%);
}
.two_column_layout .column_itemtitle {
  font-size: 1.1875rem;
  font-weight: 700;
}

.header-part.center {
  position: relative;
}

span.points {
  display: inline-block;
  margin-left: 0.3125rem;
}
span.points {
  color: #cf707a;
}
.high-contrast-mode span.points {
  color: #cf707a;
}

canvas#timeOnQuestion {
  display: none;
  position: fixed;
  bottom: 5rem;
  right: 1.875rem;
  z-index: 100;
  box-shadow: 0 8px 16px 0 rgba(145, 158, 171, 0.25);
}
canvas#timeOnQuestion {
  -webkit-border-radius: 2rem;
  -moz-border-radius: 2rem;
  border-radius: 2rem;
}

#resultsViewTime {
  font-size: 0.9rem;
  font-weight: 100;
  display: block;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
}
#resultsViewTime {
  color: #44318d;
}
.high-contrast-mode #resultsViewTime {
  color: #fff;
}

#resultsViewTime {
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
#resultsViewTime span {
  font-weight: bold;
}
#resultsViewTime span {
  color: #cf707a;
}
.high-contrast-mode #resultsViewTime span {
  color: #cf707a;
}

body.paused #resumeLink {
  text-decoration: none;
  font-weight: bold;
}
body.paused #resumeLink {
  color: #cf707a;
}
.high-contrast-mode body.paused #resumeLink {
  color: #cf707a;
}

.pulse {
  box-shadow: 0 0 0 rgba(207, 112, 122, 0.4);
  animation: pulse 2s infinite;
}

.high-contrast-mode .pulse {
  box-shadow: 0 0 0 rgba(207, 112, 122, 0.4);
  animation: hc-pulse 2s infinite;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(207, 112, 122, 0.4);
  }
  70% {
    -webkit-box-shadow: 0 0 0 15px rgba(207, 112, 122, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(207, 112, 122, 0);
  }
}
@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(207, 112, 122, 0.4);
    box-shadow: 0 0 0 0 rgba(207, 112, 122, 0.4);
  }
  70% {
    -moz-box-shadow: 0 0 0 15px rgba(207, 112, 122, 0);
    box-shadow: 0 0 0 15px rgba(207, 112, 122, 0);
  }
  100% {
    -moz-box-shadow: 0 0 0 0 rgba(207, 112, 122, 0);
    box-shadow: 0 0 0 0 rgba(207, 112, 122, 0);
  }
}
@-webkit-keyframes hc-pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(207, 112, 122, 0.4);
  }
  70% {
    -webkit-box-shadow: 0 0 0 15px rgba(207, 112, 122, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(207, 112, 122, 0);
  }
}
@keyframes hc-pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(207, 112, 122, 0.4);
    box-shadow: 0 0 0 0 rgba(207, 112, 122, 0.4);
  }
  70% {
    -moz-box-shadow: 0 0 0 15px rgba(207, 112, 122, 0);
    box-shadow: 0 0 0 15px rgba(207, 112, 122, 0);
  }
  100% {
    -moz-box-shadow: 0 0 0 0 rgba(207, 112, 122, 0);
    box-shadow: 0 0 0 0 rgba(207, 112, 122, 0);
  }
}
/*----------------LOADING INDICATOR-----------------------*/
.navigating-next .next > .button_label,
.navigating-prev .prev > .button_label,
.navigating-next .next > .next-icon,
.navigating-prev .prev > .previous-icon {
  display: none;
}

.navigating-next .next .spinner,
.navigating-prev .prev .spinner {
  display: flex;
}

.spinner {
  margin-top: 3px;
  pointer-events: none;
  display: none;
}

#qti-spinner.spinner {
  --spinner-size: 64px;
  display: block;
  position: absolute;
  text-align: center;
  top: calc(50% - var(--spinner-size) * 0.5);
  left: calc(50% - var(--spinner-size) * 1.5);
}

#qti-spinner.spinner.loaded {
  display: none;
}

.spinner > div {
  width: 18px;
  height: 18px;
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 2.4s infinite ease-in-out both;
  animation: sk-bouncedelay 2.5s infinite ease-in-out both;
  animation-direction: reverse;
  pointer-events: none;
}
.spinner > div {
  background: linear-gradient(180.55deg, #ba9bd8 -5.87%, #44318d 105.41%);
}
.high-contrast-mode .spinner > div {
  background: linear-gradient(180.55deg, #fff -5.87%, #212121 105.41%);
}

#qti-spinner.spinner > div {
  background-color: rgba(0, 0, 0, 0.3);
  width: var(--spinner-size);
  height: var(--spinner-size);
}

.prev:not(:hover) .spinner > div {
  background: linear-gradient(180.55deg, #ba9bd8 -5.87%, #44318d 105.41%);
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
  }
}
@keyframes sk-bouncedelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@font-face {
  font-family: "TLato";
  src: url("/player/static/fonts/Lato-Regular.ttf");
}
.dialog.symbol-picker {
  --symbol-picker-height: 550px;
  --symbol-picker-width: 350px;
  --height: var(--symbol-picker-height);
  --width: var(--symbol-picker-width);
  min-width: 300px;
  width: var(--symbol-picker-width);
  max-width: 1000px;
  min-height: 170px;
  height: var(--symbol-picker-height);
  max-height: 500px;
  top: calc(50% - var(--symbol-picker-height) / 2);
  left: calc(50% - var(--symbol-picker-width) / 2);
  position: absolute;
  box-shadow: var(--shadow);
}
.dialog.symbol-picker {
  border: 3px solid #ba9bd8;
}
.high-contrast-mode .dialog.symbol-picker {
  border: none;
}

.dialog.symbol-picker {
  background-color: #fff;
}
.high-contrast-mode .dialog.symbol-picker {
  background-color: #303030;
}

.dialog.symbol-picker .dialog-inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
}
.dialog.symbol-picker .dialog-inner .dialog-content {
  flex: 1;
  height: 100%;
}
.dialog.symbol-picker .dialog-inner .customContent {
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
  height: calc(100% - 4rem);
  width: 100%;
  overflow: auto;
  flex: initial;
}
.dialog.symbol-picker .dialog-inner .customContent #symbol-container {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  flex-direction: row;
}
.dialog.symbol-picker .dialog-inner .customContent #symbol-container button {
  border-radius: 8px;
  height: 48px;
  width: fit-content;
  min-width: 48px;
  padding: 0 0.5em;
  font-size: 16pt;
  margin: 0.5em;
  font-weight: bold;
}
.dialog.symbol-picker .dialog-inner .customContent #symbol-container button[disabled] {
  border: 1px solid transparent;
  color: #fff;
}
.dialog.symbol-picker .dialog-inner .customContent #symbol-container button[disabled] {
  background-color: #ebe7ee;
}
.high-contrast-mode .dialog.symbol-picker .dialog-inner .customContent #symbol-container button[disabled] {
  background-color: #303030;
}

.dialog.symbol-picker .dialog-inner .customContent #symbol-container button:not([disabled]) {
  cursor: pointer;
}
.dialog.symbol-picker .dialog-inner .customContent #symbol-container button:not([disabled]) {
  background-color: #fff;
}
.high-contrast-mode .dialog.symbol-picker .dialog-inner .customContent #symbol-container button:not([disabled]) {
  background-color: #000000;
}

.dialog.symbol-picker .dialog-inner .customContent #symbol-container button:not([disabled]) {
  color: rgba(0, 0, 0, 0.8);
}
.high-contrast-mode .dialog.symbol-picker .dialog-inner .customContent #symbol-container button:not([disabled]) {
  color: #fff;
}

.dialog.symbol-picker .dialog-inner .customContent #symbol-container button:not([disabled]) {
  border: 1px solid #000000;
}
.high-contrast-mode .dialog.symbol-picker .dialog-inner .customContent #symbol-container button:not([disabled]) {
  border: 1px solid #fff;
}

.dialog.symbol-picker .dialog-inner .customContent #symbol-container button:not([disabled]):hover, .dialog.symbol-picker .dialog-inner .customContent #symbol-container button:not([disabled]):focus {
  color: #fff;
}
.high-contrast-mode .dialog.symbol-picker .dialog-inner .customContent #symbol-container button:not([disabled]):hover, .high-contrast-mode .dialog.symbol-picker .dialog-inner .customContent #symbol-container button:not([disabled]):focus {
  color: rgba(0, 0, 0, 0.8);
}

.dialog.symbol-picker .dialog-inner .customContent #symbol-container button:not([disabled]):hover, .dialog.symbol-picker .dialog-inner .customContent #symbol-container button:not([disabled]):focus {
  border: 1px solid #676bac;
}
.high-contrast-mode .dialog.symbol-picker .dialog-inner .customContent #symbol-container button:not([disabled]):hover, .high-contrast-mode .dialog.symbol-picker .dialog-inner .customContent #symbol-container button:not([disabled]):focus {
  border: 1px solid #fff;
}

.dialog.symbol-picker .dialog-inner .customContent #symbol-container button:not([disabled]):hover, .dialog.symbol-picker .dialog-inner .customContent #symbol-container button:not([disabled]):focus {
  background-color: #676bac;
}
.high-contrast-mode .dialog.symbol-picker .dialog-inner .customContent #symbol-container button:not([disabled]):hover, .high-contrast-mode .dialog.symbol-picker .dialog-inner .customContent #symbol-container button:not([disabled]):focus {
  background-color: #fff;
}

.question.high-contrast-mode qti-item-body input.symbol-picker-focus, .question.high-contrast-mode qti-item-body textarea.symbol-picker-focus {
  outline: 5px dashed #fff;
}
.question:not(.high-contrast-mode) qti-item-body input.symbol-picker-focus, .question:not(.high-contrast-mode) qti-item-body textarea.symbol-picker-focus {
  outline: 5px solid #ba9bd8;
}

body.question div#contentWindow .qade-ruler_root-container {
  --color: #ba9bd8;
}
body.question div#contentWindow .qade-ruler_root-container .qade-ruler_units,
body.question div#contentWindow .qade-ruler_root-container .qade-ruler_minor-unit,
body.question div#contentWindow .qade-ruler_root-container .qade-ruler_major-unit {
  border-color: #676bac;
  color: rgba(0, 0, 0, 0.8);
  font-weight: bold;
}

/**
 * Volume controls used in the video/audio check & in the header as a "tool"
 */
.column.volumeControls,
.column.speedControls {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: auto;
}
.column.volumeControls .slider-container,
.column.speedControls .slider-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.column.volumeControls .slider-container .slider-decrease,
.column.volumeControls .slider-container .slider-min-icon,
.column.volumeControls .slider-container .slider-indicator,
.column.volumeControls .slider-container .slider-max-icon,
.column.volumeControls .slider-container .slider-increase,
.column.speedControls .slider-container .slider-decrease,
.column.speedControls .slider-container .slider-min-icon,
.column.speedControls .slider-container .slider-indicator,
.column.speedControls .slider-container .slider-max-icon,
.column.speedControls .slider-container .slider-increase {
  height: 64px;
  box-sizing: border-box;
}
.column.volumeControls .slider-container .slider-decrease,
.column.volumeControls .slider-container .slider-min-icon,
.column.volumeControls .slider-container .slider-indicator,
.column.volumeControls .slider-container .slider-max-icon,
.column.volumeControls .slider-container .slider-increase,
.column.speedControls .slider-container .slider-decrease,
.column.speedControls .slider-container .slider-min-icon,
.column.speedControls .slider-container .slider-indicator,
.column.speedControls .slider-container .slider-max-icon,
.column.speedControls .slider-container .slider-increase {
  border: 1px solid #ebe7ee;
}
.high-contrast-mode .column.volumeControls .slider-container .slider-decrease, .high-contrast-mode .column.volumeControls .slider-container .slider-min-icon, .high-contrast-mode .column.volumeControls .slider-container .slider-indicator, .high-contrast-mode .column.volumeControls .slider-container .slider-max-icon, .high-contrast-mode .column.volumeControls .slider-container .slider-increase, .high-contrast-mode .column.speedControls .slider-container .slider-decrease, .high-contrast-mode .column.speedControls .slider-container .slider-min-icon, .high-contrast-mode .column.speedControls .slider-container .slider-indicator, .high-contrast-mode .column.speedControls .slider-container .slider-max-icon, .high-contrast-mode .column.speedControls .slider-container .slider-increase {
  border: 1px solid transparent;
}

.column.volumeControls .slider-container .slider-decrease,
.column.volumeControls .slider-container .slider-increase,
.column.speedControls .slider-container .slider-decrease,
.column.speedControls .slider-container .slider-increase {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.column.volumeControls .slider-container .slider-decrease,
.column.volumeControls .slider-container .slider-increase,
.column.speedControls .slider-container .slider-decrease,
.column.speedControls .slider-container .slider-increase {
  background-color: #fff;
}
.high-contrast-mode .column.volumeControls .slider-container .slider-decrease, .high-contrast-mode .column.volumeControls .slider-container .slider-increase, .high-contrast-mode .column.speedControls .slider-container .slider-decrease, .high-contrast-mode .column.speedControls .slider-container .slider-increase {
  background-color: #212121;
}

.column.volumeControls .slider-container .slider-decrease svg,
.column.volumeControls .slider-container .slider-increase svg,
.column.speedControls .slider-container .slider-decrease svg,
.column.speedControls .slider-container .slider-increase svg {
  height: 40px;
}
.column.volumeControls .slider-container .slider-decrease svg *,
.column.volumeControls .slider-container .slider-increase svg *,
.column.speedControls .slider-container .slider-decrease svg *,
.column.speedControls .slider-container .slider-increase svg * {
  fill: #ba9bd8;
}
.high-contrast-mode .column.volumeControls .slider-container .slider-decrease svg *, .high-contrast-mode .column.volumeControls .slider-container .slider-increase svg *, .high-contrast-mode .column.speedControls .slider-container .slider-decrease svg *, .high-contrast-mode .column.speedControls .slider-container .slider-increase svg * {
  fill: #fff;
}

.column.volumeControls .slider-container .slider-decrease:hover,
.column.volumeControls .slider-container .slider-increase:hover,
.column.speedControls .slider-container .slider-decrease:hover,
.column.speedControls .slider-container .slider-increase:hover {
  background-color: #fff;
}
.high-contrast-mode .column.volumeControls .slider-container .slider-decrease:hover, .high-contrast-mode .column.volumeControls .slider-container .slider-increase:hover, .high-contrast-mode .column.speedControls .slider-container .slider-decrease:hover, .high-contrast-mode .column.speedControls .slider-container .slider-increase:hover {
  background-color: #fff;
}

.column.volumeControls .slider-container .slider-decrease:hover svg > *,
.column.volumeControls .slider-container .slider-increase:hover svg > *,
.column.speedControls .slider-container .slider-decrease:hover svg > *,
.column.speedControls .slider-container .slider-increase:hover svg > * {
  fill: #676bac;
}
.high-contrast-mode .column.volumeControls .slider-container .slider-decrease:hover svg > *, .high-contrast-mode .column.volumeControls .slider-container .slider-increase:hover svg > *, .high-contrast-mode .column.speedControls .slider-container .slider-decrease:hover svg > *, .high-contrast-mode .column.speedControls .slider-container .slider-increase:hover svg > * {
  fill: rgba(0, 0, 0, 0.8);
}

.column.volumeControls .slider-container .slider-decrease:focus-visible,
.column.volumeControls .slider-container .slider-increase:focus-visible,
.column.speedControls .slider-container .slider-decrease:focus-visible,
.column.speedControls .slider-container .slider-increase:focus-visible {
  outline: 2px solid #212121;
}
.column.volumeControls .slider-container .slider-decrease,
.column.speedControls .slider-container .slider-decrease {
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
  width: 64px;
}
.column.volumeControls .slider-container .slider-min-icon, .column.volumeControls .slider-container .slider-max-icon,
.column.speedControls .slider-container .slider-min-icon,
.column.speedControls .slider-container .slider-max-icon {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 30px;
  width: 48px;
  border-left: 0;
  border-right: 0;
}
.column.volumeControls .slider-container .slider-min-icon, .column.volumeControls .slider-container .slider-max-icon,
.column.speedControls .slider-container .slider-min-icon,
.column.speedControls .slider-container .slider-max-icon {
  background-color: #fff;
}
.high-contrast-mode .column.volumeControls .slider-container .slider-min-icon, .high-contrast-mode .column.volumeControls .slider-container .slider-max-icon, .high-contrast-mode .column.speedControls .slider-container .slider-min-icon, .high-contrast-mode .column.speedControls .slider-container .slider-max-icon {
  background-color: #303030;
}

.column.volumeControls .slider-container .slider-indicator,
.column.speedControls .slider-container .slider-indicator {
  --indicator-height: 10px;
  height: 64px;
  text-align: center;
  width: 220px;
  border-left: 0;
  border-right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.column.volumeControls .slider-container .slider-indicator,
.column.speedControls .slider-container .slider-indicator {
  background-color: #fff;
}
.high-contrast-mode .column.volumeControls .slider-container .slider-indicator, .high-contrast-mode .column.speedControls .slider-container .slider-indicator {
  background-color: #303030;
}

.column.volumeControls .slider-container .slider-indicator,
.column.speedControls .slider-container .slider-indicator {
  border: 1px solid #ebe7ee;
}
.high-contrast-mode .column.volumeControls .slider-container .slider-indicator, .high-contrast-mode .column.speedControls .slider-container .slider-indicator {
  border: 1px solid transparent;
}

.column.volumeControls .slider-container .slider-indicator::after, .column.volumeControls .slider-container .slider-indicator::before,
.column.speedControls .slider-container .slider-indicator::after,
.column.speedControls .slider-container .slider-indicator::before {
  display: block;
  position: absolute;
  top: calc(50% - var(--indicator-height) / 2);
  left: 0;
  width: 100%;
  content: "";
  height: 10px;
  border-radius: calc(var(--indicator-height) / 2);
}
.column.volumeControls .slider-container .slider-indicator::after, .column.volumeControls .slider-container .slider-indicator::before,
.column.speedControls .slider-container .slider-indicator::after,
.column.speedControls .slider-container .slider-indicator::before {
  background-color: #ebe7ee;
}
.high-contrast-mode .column.volumeControls .slider-container .slider-indicator::after, .high-contrast-mode .column.volumeControls .slider-container .slider-indicator::before, .high-contrast-mode .column.speedControls .slider-container .slider-indicator::after, .high-contrast-mode .column.speedControls .slider-container .slider-indicator::before {
  background-color: #000000;
}

.column.volumeControls .slider-container .slider-indicator::after,
.column.speedControls .slider-container .slider-indicator::after {
  transition: width 0.2s ease-out;
}
.column.volumeControls .slider-container .slider-indicator::after,
.column.speedControls .slider-container .slider-indicator::after {
  background-color: #212121;
}
.high-contrast-mode .column.volumeControls .slider-container .slider-indicator::after, .high-contrast-mode .column.speedControls .slider-container .slider-indicator::after {
  background-color: #fff;
}

.column.volumeControls .slider-container .slider-indicator::before,
.column.speedControls .slider-container .slider-indicator::before {
  line-height: 48px;
}
.column.volumeControls .slider-container .slider-increase,
.column.speedControls .slider-container .slider-increase {
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
  width: 64px;
}

.column.volumeControls .slider-container .slider-min-icon {
  background-image: url(/player/static/icons/volume-min.svg);
}
.high-contrast-mode .column.volumeControls .slider-container .slider-min-icon {
  background-image: url(/player/static/icons/volume-min-hc.svg);
}

.column.volumeControls .slider-container .slider-max-icon {
  background-image: url(/player/static/icons/volume-max.svg);
}
.high-contrast-mode .column.volumeControls .slider-container .slider-max-icon {
  background-image: url(/player/static/icons/volume-max-hc.svg);
}

.column.volumeControls .slider-container .slider-indicator {
  --volume-percentage: 50%;
  --volume-percentage-label: "50%";
}
.column.volumeControls .slider-container .slider-indicator::after {
  width: var(--volume-percentage);
}
.column.volumeControls .slider-container .slider-indicator::before {
  content: var(--volume-percentage-label);
}
.column.volumeControls .slider-container .slider-indicator::before {
  color: rgba(0, 0, 0, 0.8);
}
.high-contrast-mode .column.volumeControls .slider-container .slider-indicator::before {
  color: #fff;
}

.column.speedControls .slider-container .slider-min-icon {
  background-image: url(/player/static/icons/speed-min.svg);
}
.high-contrast-mode .column.speedControls .slider-container .slider-min-icon {
  background-image: url(/player/static/icons/speed-min-hc.svg);
}

.column.speedControls .slider-container .slider-max-icon {
  background-image: url(/player/static/icons/speed-max.svg);
}
.high-contrast-mode .column.speedControls .slider-container .slider-max-icon {
  background-image: url(/player/static/icons/speed-max-hc.svg);
}

.column.speedControls .slider-container .slider-indicator {
  --speed-percentage: 50%;
  --speed-percentage-label: "100%";
}
.column.speedControls .slider-container .slider-indicator::after {
  width: var(--speed-percentage);
}
.column.speedControls .slider-container .slider-indicator::before {
  content: var(--speed-percentage-label);
}
.column.speedControls .slider-container .slider-indicator::before {
  color: rgba(0, 0, 0, 0.8);
}
.high-contrast-mode .column.speedControls .slider-container .slider-indicator::before {
  color: #fff;
}

/* ============================================================================
  Color scheme
=============================================================================== */
:root {
  --calculator-background-color: #fff;
  --calculator-button-color: #676bac;
  --calculator-button-text-color: #fff;
  --button-digit-color: #44318d;
  --calculator-button-color-special: #cf707a;
}

body.high-contrast-mode {
  --calculator-background-color: #303030;
  --calculator-button-color: #000000;
  --calculator-button-text-color: #fff;
  --button-digit-color: #000000;
  --calculator-button-color-special: #000000;
}

/* ============================================================================
  Calculator styling
=============================================================================== */
.calculator.active .dialog.calculator {
  --width: 19.0625rem;
  --height: 20.25rem;
  box-shadow: var(--shadow);
  border-radius: 16px;
  overflow: hidden;
  min-width: auto;
  min-height: auto;
  padding: 1em;
  top: calc(50% - var(--height) / 2);
  left: calc(50% - var(--width) / 2);
}
.calculator.active .dialog.calculator {
  border: 3px solid #ba9bd8;
}
.high-contrast-mode .calculator.active .dialog.calculator {
  border: none;
}

.calculator.active .dialog.calculator {
  background-color: #fff;
}
.high-contrast-mode .calculator.active .dialog.calculator {
  background-color: #000000;
}

.custom-background-color .calculator.active .dialog.calculator {
  background: inherit !important;
}

.custom-foreground-color .calculator.active .dialog.calculator {
  color: inherit !important;
}

.calculator.active .dialog.calculator .dialog-inner {
  padding: 0;
}
.calculator.active .dialog.calculator #calculatorPanel {
  float: left;
  width: 19.0625rem;
  background: var(--calculator-background-color);
  color: var(--calculator-button-text-color);
  padding-bottom: 0.4375rem;
  font-family: "Open Sans", Arial, Verdana, Sans-serif;
  border-radius: 8px;
}
.calculator.active .dialog.calculator #calculatorPanel sup, .calculator.active .dialog.calculator #calculatorPanel sub {
  font-size: 10px;
}
.calculator.active .dialog.calculator #calculatorPanel span.buttonInv {
  width: 3.125rem;
  height: 2.1875rem;
  line-height: 2.1875rem;
  float: left;
  margin-right: 0.625rem;
  color: #fff;
  font-weight: normal;
  font-size: 0.875rem;
  text-align: center;
  position: relative;
}
.calculator.active .dialog.calculator #calculatorPanel span.buttonInv:last-child {
  margin-right: 0;
}
.calculator.active .dialog.calculator #calculatorPanel span.buttonInv .whenInversed {
  background: transparent;
}
.calculator.active .dialog.calculator #calculatorPanel span.buttonInv sup, .calculator.active .dialog.calculator #calculatorPanel span.buttonInv sub {
  font-size: 8px;
}
.calculator.active .dialog.calculator #calculatorPanel .notInversed {
  display: inline-block;
}
.calculator.active .dialog.calculator #calculatorPanel .notInversed.lineHeightMod {
  line-height: 1.7rem;
}
.calculator.active .dialog.calculator #calculatorPanel .whenInversed {
  display: none;
}
.calculator.active .dialog.calculator #calculatorPanel .whenInversed.lineHeightMod {
  line-height: 1.7rem;
}
.calculator.active .dialog.calculator #calculatorPanel .notInversed, .calculator.active .dialog.calculator #calculatorPanel .whenInversed {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.calculator.active .dialog.calculator #calculatorPanel.inverse .keyPadInvButton {
  background: var(--calculator-button-color-special);
}
.calculator.active .dialog.calculator #calculatorPanel.inverse .notInversed {
  display: none;
}
.calculator.active .dialog.calculator #calculatorPanel.inverse .whenInversed {
  display: inline-block;
}
.calculator.active .dialog.calculator #calculatorPanel .whenInversed {
  background: var(--calculator-button-color-special);
}
.calculator.active .dialog.calculator #calculatorPanel .whenInversed:hover {
  color: var(--calculator-button-text-color);
}
.high-contrast-mode .calculator.active .dialog.calculator #calculatorPanel .whenInversed:hover {
  color: rgba(0, 0, 0, 0.8);
}

.calculator.active .dialog.calculator #calculatorPanel .whenInversed:hover {
  background: color-mix(in srgb, var(--calculator-button-color-special), #fff 50%);
}
.high-contrast-mode .calculator.active .dialog.calculator #calculatorPanel .whenInversed:hover {
  background: #fff;
}

.calculator.active .dialog.calculator #calculatorPanel.scientific .scientificOnly {
  --width: 19.0625rem;
  --height: 28.125rem;
  display: block;
}
.calculator.active .dialog.calculator #calculatorPanel.scientific .scientificOnly.informationRow * {
  color: rgba(0, 0, 0, 0.8);
}
.high-contrast-mode .calculator.active .dialog.calculator #calculatorPanel.scientific .scientificOnly.informationRow * {
  color: #fff;
}

.calculator.active .dialog.calculator #calculatorPanel .scientificOnly {
  display: none;
}
.calculator.active .dialog.calculator #calculatorPanel .calculatorDisplay {
  float: left;
  width: 18.125rem;
  height: 4.0625rem;
  margin: 0.4375rem 0 0 0.4375rem;
  border-radius: 8px;
  padding: 0.625rem;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.6);
}
.calculator.active .dialog.calculator #calculatorPanel .calculatorDisplay {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.calculator.active .dialog.calculator #calculatorPanel .calculatorDisplay {
  background-color: #212121;
}
.high-contrast-mode .calculator.active .dialog.calculator #calculatorPanel .calculatorDisplay {
  background-color: #000000;
}

.calculator.active .dialog.calculator #calculatorPanel .keyPad_UserOutput {
  text-align: right;
  height: 1.875rem;
  font-size: 1.25rem;
  font-weight: bold;
}
.calculator.active .dialog.calculator #calculatorPanel .keyPad_UserOutput, .calculator.active .dialog.calculator #calculatorPanel .keyPad_UserInput {
  color: #fff;
}
.calculator.active .dialog.calculator #calculatorPanel .buttonRow {
  float: left;
  clear: both;
  margin: 0.4375rem 0 0 0.4375rem;
  text-align: right;
}
.calculator.active .dialog.calculator #calculatorPanel .buttonRow.sinCosTan button {
  font-size: 1.0625rem;
}
.calculator.active .dialog.calculator #calculatorPanel .buttonRow span.emptyButtonSpace {
  float: left;
  width: 3.125rem;
  height: 2.1875rem;
  margin-right: 0.625rem;
}
.calculator.active .dialog.calculator #calculatorPanel .buttonRow button {
  width: 3.125rem;
  height: 2.1875rem;
  line-height: 2.1875rem;
  float: left;
  border-radius: 8px;
  margin-right: 0.625rem;
  background: var(--calculator-button-color);
  color: var(--calculator-button-text-color);
  font-weight: bold;
  font-size: 1.25rem;
  text-align: center;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}
.calculator.active .dialog.calculator #calculatorPanel .buttonRow button:hover, .calculator.active .dialog.calculator #calculatorPanel .buttonRow button.active {
  color: var(--calculator-button-text-color);
}
.high-contrast-mode .calculator.active .dialog.calculator #calculatorPanel .buttonRow button:hover, .high-contrast-mode .calculator.active .dialog.calculator #calculatorPanel .buttonRow button.active {
  color: rgba(0, 0, 0, 0.8);
}

.calculator.active .dialog.calculator #calculatorPanel .buttonRow button:hover, .calculator.active .dialog.calculator #calculatorPanel .buttonRow button.active {
  background: color-mix(in srgb, var(--calculator-button-color), #fff 50%);
}
.high-contrast-mode .calculator.active .dialog.calculator #calculatorPanel .buttonRow button:hover, .high-contrast-mode .calculator.active .dialog.calculator #calculatorPanel .buttonRow button.active {
  background: #fff;
}

.calculator.active .dialog.calculator #calculatorPanel .buttonRow button:hover::after, .calculator.active .dialog.calculator #calculatorPanel .buttonRow button.active::after {
  display: none;
}
.calculator.active .dialog.calculator #calculatorPanel .buttonRow button.keyPadDigitButton {
  background: var(--button-digit-color);
}
.calculator.active .dialog.calculator #calculatorPanel .buttonRow button.keyPadDigitButton:hover, .calculator.active .dialog.calculator #calculatorPanel .buttonRow button.keyPadDigitButton.active {
  color: var(--calculator-button-text-color);
}
.high-contrast-mode .calculator.active .dialog.calculator #calculatorPanel .buttonRow button.keyPadDigitButton:hover, .high-contrast-mode .calculator.active .dialog.calculator #calculatorPanel .buttonRow button.keyPadDigitButton.active {
  color: rgba(0, 0, 0, 0.8);
}

.calculator.active .dialog.calculator #calculatorPanel .buttonRow button.keyPadDigitButton:hover, .calculator.active .dialog.calculator #calculatorPanel .buttonRow button.keyPadDigitButton.active {
  background: color-mix(in srgb, var(--button-digit-color), #fff 50%);
}
.high-contrast-mode .calculator.active .dialog.calculator #calculatorPanel .buttonRow button.keyPadDigitButton:hover, .high-contrast-mode .calculator.active .dialog.calculator #calculatorPanel .buttonRow button.keyPadDigitButton.active {
  background: #fff;
}

.calculator.active .dialog.calculator #calculatorPanel .buttonRow button.keyPadSpecialButton {
  background: var(--calculator-button-color-special);
}
.calculator.active .dialog.calculator #calculatorPanel .buttonRow button.keyPadSpecialButton:hover, .calculator.active .dialog.calculator #calculatorPanel .buttonRow button.keyPadSpecialButton.active {
  color: var(--calculator-button-text-color);
}
.high-contrast-mode .calculator.active .dialog.calculator #calculatorPanel .buttonRow button.keyPadSpecialButton:hover, .high-contrast-mode .calculator.active .dialog.calculator #calculatorPanel .buttonRow button.keyPadSpecialButton.active {
  color: rgba(0, 0, 0, 0.8);
}

.calculator.active .dialog.calculator #calculatorPanel .buttonRow button.keyPadSpecialButton:hover, .calculator.active .dialog.calculator #calculatorPanel .buttonRow button.keyPadSpecialButton.active {
  background: color-mix(in srgb, var(--calculator-button-color-special), #fff 50%);
}
.high-contrast-mode .calculator.active .dialog.calculator #calculatorPanel .buttonRow button.keyPadSpecialButton:hover, .high-contrast-mode .calculator.active .dialog.calculator #calculatorPanel .buttonRow button.keyPadSpecialButton.active {
  background: #fff;
}

.calculator.active .dialog.calculator #calculatorPanel .buttonRow button.keyPadButtonCalculate {
  background: var(--button-digit-color);
}
.calculator.active .dialog.calculator #calculatorPanel .buttonRow button.keyPadButtonCalculate:hover, .calculator.active .dialog.calculator #calculatorPanel .buttonRow button.keyPadButtonCalculate.active {
  color: var(--calculator-button-text-color);
}
.high-contrast-mode .calculator.active .dialog.calculator #calculatorPanel .buttonRow button.keyPadButtonCalculate:hover, .high-contrast-mode .calculator.active .dialog.calculator #calculatorPanel .buttonRow button.keyPadButtonCalculate.active {
  color: rgba(0, 0, 0, 0.8);
}

.calculator.active .dialog.calculator #calculatorPanel .buttonRow button.keyPadButtonCalculate:hover, .calculator.active .dialog.calculator #calculatorPanel .buttonRow button.keyPadButtonCalculate.active {
  background: color-mix(in srgb, var(--button-digit-color), #fff 50%);
}
.high-contrast-mode .calculator.active .dialog.calculator #calculatorPanel .buttonRow button.keyPadButtonCalculate:hover, .high-contrast-mode .calculator.active .dialog.calculator #calculatorPanel .buttonRow button.keyPadButtonCalculate.active {
  background: #fff;
}

.calculator.active .dialog.calculator #calculatorPanel .buttonRow button.textOnButton {
  font-size: 0.9375rem;
}
.calculator.active .dialog.calculator #calculatorPanel .buttonRow button.lineHeightMod {
  line-height: 0;
}
.calculator.active .dialog.calculator #calculatorPanel .buttonRow button.lineHeightMod sup, .calculator.active .dialog.calculator #calculatorPanel .buttonRow button.lineHeightMod sub {
  font-size: 10px;
}
.calculator.active .dialog.calculator #calculatorPanel .buttonRow button:last-child {
  margin-right: 0;
}
.calculator.active .dialog.calculator #calculatorPanel .caret {
  display: inline-block;
  position: relative;
  top: -0.1875rem;
  margin: -0.3125rem -0.0625rem -0.3125rem 0;
  padding: 0;
  height: 95%;
  border-left: 1px solid var(--calculator-button-text-color);
}
.calculator.active .dialog.calculator #calculatorPanel input {
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background-color: transparent;
  width: 100%;
  font-size: 1.25rem;
  height: 1.5rem;
  color: #000;
}
.calculator.active .dialog.calculator #calculatorPanel .keyPad_UserInput {
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background-color: transparent;
  width: 100%;
  font-size: 1.25rem;
  height: 1.5rem;
  position: relative;
  z-index: 0;
  overflow: hidden;
  white-space: nowrap;
  word-break: keep-all;
  cursor: text;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.6);
  color: #fff;
}

/* ============================================================================
  Clearfix
=============================================================================== */
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

@font-face {
  font-family: "TLato";
  src: url("/player/static/fonts/Lato-Regular.ttf");
}
body div#mainContent form#qtiform {
  font-family: "PT Sans Caption", sans-serif;
}
body div#mainContent form#qtiform .content {
  font-family: "PT Sans Caption", sans-serif;
  font-size: 0.875rem;
}
body div#mainContent form#qtiform .content .itemtitle {
  font-family: "PT Sans Caption", sans-serif;
  font-weight: bold;
  font-size: 1.125rem;
}
body div#mainContent form#qtiform .content #prompt {
  font-weight: bold;
}
body div#mainContent form#qtiform .content .div_line {
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjIiLz4KICAgIDxzdG9wIG9mZnNldD0iMSUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4yIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjYwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjE1Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 1%, rgba(0, 0, 0, 0.15) 60%, rgba(0, 0, 0, 0) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.2)), color-stop(1%, rgba(0, 0, 0, 0.2)), color-stop(60%, rgba(0, 0, 0, 0.15)), color-stop(100%, rgba(0, 0, 0, 0)));
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 1%, rgba(0, 0, 0, 0.15) 60%, rgba(0, 0, 0, 0) 100%);
  background: -o-linear-gradient(top, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 1%, rgba(0, 0, 0, 0.15) 60%, rgba(0, 0, 0, 0) 100%);
  background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 1%, rgba(0, 0, 0, 0.15) 60%, rgba(0, 0, 0, 0) 100%);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 1%, rgba(0, 0, 0, 0.15) 60%, rgba(0, 0, 0, 0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#33000000", endColorstr="#00000000",GradientType=0 );
}
body div#main form#qti-target {
  font-family: "PT Sans Caption", sans-serif;
}
body div#main form#qti-target .content {
  font-family: "PT Sans Caption", sans-serif;
  font-size: 0.875rem;
}
body div#main form#qti-target .content .itemtitle {
  font-family: "PT Sans Caption", sans-serif;
  font-weight: bold;
  font-size: 1.125rem;
}
body div#main form#qti-target .content #prompt {
  font-weight: bold;
}
body div#main form#qti-target .content .div_line {
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjIiLz4KICAgIDxzdG9wIG9mZnNldD0iMSUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4yIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjYwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjE1Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 1%, rgba(0, 0, 0, 0.15) 60%, rgba(0, 0, 0, 0) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.2)), color-stop(1%, rgba(0, 0, 0, 0.2)), color-stop(60%, rgba(0, 0, 0, 0.15)), color-stop(100%, rgba(0, 0, 0, 0)));
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 1%, rgba(0, 0, 0, 0.15) 60%, rgba(0, 0, 0, 0) 100%);
  background: -o-linear-gradient(top, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 1%, rgba(0, 0, 0, 0.15) 60%, rgba(0, 0, 0, 0) 100%);
  background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 1%, rgba(0, 0, 0, 0.15) 60%, rgba(0, 0, 0, 0) 100%);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 1%, rgba(0, 0, 0, 0.15) 60%, rgba(0, 0, 0, 0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#33000000", endColorstr="#00000000",GradientType=0 );
}

mark.tts-marker {
  background-color: chartreuse;
}
.high-contrast-mode mark.tts-marker {
  background-color: #fff;
}

mark.tts-marker {
  color: rgba(0, 0, 0, 0.8);
}
.high-contrast-mode mark.tts-marker {
  color: rgba(0, 0, 0, 0.8);
}

mark.tts-marker img {
  outline-width: 5px;
  outline-style: dotted;
}
mark.tts-marker img {
  outline-color: chartreuse;
}
.high-contrast-mode mark.tts-marker img {
  outline-color: #fff;
}

div.tts-player {
  --width: 208px;
  --height: 0px;
  position: absolute;
  width: var(--width);
  top: 1%;
  left: calc(50% - var(--width) / 2 - 2em);
  padding: 1.5em 2em;
  cursor: move;
  z-index: 1;
  transition: width 0.2s ease-out;
  box-shadow: var(--shadow);
}
div.tts-player {
  border: 3px solid #ba9bd8;
}
.high-contrast-mode div.tts-player {
  border: none;
}

div.tts-player {
  background-color: #fff;
}
.high-contrast-mode div.tts-player {
  background-color: #303030;
}

div.tts-player {
  color: rgba(0, 0, 0, 0.8);
}
.high-contrast-mode div.tts-player {
  color: #fff;
}

div.tts-player {
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
}
div.tts-player_main-controls {
  display: flex;
  align-items: center;
  gap: 2px;
}
div.tts-player_label {
  font-size: 16px;
  margin: 20px 0 10px 0;
}
div.tts-player.tts-player_loading .spinner {
  display: flex;
}
div.tts-player .spinner {
  display: none;
  z-index: 1;
  justify-content: center;
  position: absolute;
  top: 25%;
  left: 0;
  height: 100%;
  width: 100%;
}
div.tts-player .spinner .bounce1, div.tts-player .spinner .bounce2, div.tts-player .spinner .bounce3 {
  height: 32px;
  width: 32px;
}
div.tts-player_config-controls {
  height: 0;
  overflow: hidden;
  transition: height 0.2s ease-out, width 0.1s ease-out;
}
div.tts-player_config-open {
  --width: 440px;
}
div.tts-player_config-open .tts-player_config-controls {
  height: 240px;
}
div.tts-player_config-open .tts-player_main-controls .tts-player_config {
  background-color: #ebe7ee;
}
.high-contrast-mode div.tts-player_config-open .tts-player_main-controls .tts-player_config {
  background-color: #fff;
}

div.tts-player_config-open .tts-player_main-controls .tts-player_config {
  background-image: url("/player/static/icons/gear-hc.svg");
}
.high-contrast-mode div.tts-player_config-open .tts-player_main-controls .tts-player_config {
  background-image: url("/player/static/icons/gear-hc.svg");
}

div.tts-player_volume, div.tts-player_playback-rate {
  display: flex;
  align-items: center;
  border-radius: 16px;
  overflow: hidden;
}
div.tts-player_volume, div.tts-player_playback-rate {
  border: 1px solid #ebe7ee;
}
.high-contrast-mode div.tts-player_volume, .high-contrast-mode div.tts-player_playback-rate {
  border: 1px solid transparent;
}

div.tts-player_bar {
  flex-grow: 1;
  height: 10px;
  border-radius: 10px;
  margin: 0 50px;
  position: relative;
}
div.tts-player_bar {
  background-color: #ebe7ee;
}
.high-contrast-mode div.tts-player_bar {
  background-color: #000000;
}

div.tts-player_bar-value {
  width: var(--value);
  height: 10px;
  background: #999;
  border-radius: 10px;
  transition: width 0.2s ease-out;
}
div.tts-player_bar-value {
  background-color: #212121;
}
.high-contrast-mode div.tts-player_bar-value {
  background-color: #fff;
}

div.tts-player_bar-value::after {
  content: var(--value-label);
  font-size: 16px;
  position: absolute;
  width: 100%;
  text-align: center;
  top: 14px;
}
div.tts-player_bar-value::after {
  color: rgba(0, 0, 0, 0.8);
}
.high-contrast-mode div.tts-player_bar-value::after {
  color: #fff;
}

div.tts-player_bar::before, div.tts-player_bar::after {
  content: "";
  position: absolute;
  display: block;
  width: 40px;
  height: 40px;
  top: -15px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 30px;
}
div.tts-player_bar::before {
  left: -45px;
}
div.tts-player_bar::after {
  right: -45px;
}
div.tts-player_volume .tts-player_bar::before {
  background-image: url(/player/static/icons/volume-min.svg);
}
.high-contrast-mode div.tts-player_volume .tts-player_bar::before {
  background-image: url(/player/static/icons/volume-min-hc.svg);
}

div.tts-player_volume .tts-player_bar::after {
  background-image: url(/player/static/icons/volume-max.svg);
}
.high-contrast-mode div.tts-player_volume .tts-player_bar::after {
  background-image: url(/player/static/icons/volume-max-hc.svg);
}

div.tts-player_playback-rate .tts-player_bar::before {
  background-image: url(/player/static/icons/speed-min.svg);
}
.high-contrast-mode div.tts-player_playback-rate .tts-player_bar::before {
  background-image: url(/player/static/icons/speed-min-hc.svg);
}

div.tts-player_playback-rate .tts-player_bar::after {
  background-image: url(/player/static/icons/speed-max.svg);
}
.high-contrast-mode div.tts-player_playback-rate .tts-player_bar::after {
  background-image: url(/player/static/icons/speed-max-hc.svg);
}

div.tts-player button.tts-player_stop, div.tts-player button.tts-player_select, div.tts-player button.tts-player_config, div.tts-player button.tts-player_play-pause, div.tts-player button.tts-player_close {
  color: #fff;
  width: 40px;
  height: 40px;
  font-size: 16px;
  cursor: pointer;
}
div.tts-player button.tts-player_stop, div.tts-player button.tts-player_select, div.tts-player button.tts-player_config, div.tts-player button.tts-player_play-pause, div.tts-player button.tts-player_close {
  background-color: transparent;
}
.high-contrast-mode div.tts-player button.tts-player_stop, .high-contrast-mode div.tts-player button.tts-player_select, .high-contrast-mode div.tts-player button.tts-player_config, .high-contrast-mode div.tts-player button.tts-player_play-pause, .high-contrast-mode div.tts-player button.tts-player_close {
  background-color: #212121;
}

div.tts-player button.tts-player_stop, div.tts-player button.tts-player_select, div.tts-player button.tts-player_config, div.tts-player button.tts-player_play-pause, div.tts-player button.tts-player_close {
  color: rgba(0, 0, 0, 0.8);
}
.high-contrast-mode div.tts-player button.tts-player_stop, .high-contrast-mode div.tts-player button.tts-player_select, .high-contrast-mode div.tts-player button.tts-player_config, .high-contrast-mode div.tts-player button.tts-player_play-pause, .high-contrast-mode div.tts-player button.tts-player_close {
  color: #fff;
}

div.tts-player button.tts-player_stop:hover:not(:disabled), div.tts-player button.tts-player_select:hover:not(:disabled), div.tts-player button.tts-player_config:hover:not(:disabled), div.tts-player button.tts-player_play-pause:hover:not(:disabled), div.tts-player button.tts-player_close:hover:not(:disabled) {
  background-color: #ebe7ee;
}
.high-contrast-mode div.tts-player button.tts-player_stop:hover:not(:disabled), .high-contrast-mode div.tts-player button.tts-player_select:hover:not(:disabled), .high-contrast-mode div.tts-player button.tts-player_config:hover:not(:disabled), .high-contrast-mode div.tts-player button.tts-player_play-pause:hover:not(:disabled), .high-contrast-mode div.tts-player button.tts-player_close:hover:not(:disabled) {
  background-color: #fff;
}

div.tts-player button.tts-player_stop:hover:not(:disabled), div.tts-player button.tts-player_select:hover:not(:disabled), div.tts-player button.tts-player_config:hover:not(:disabled), div.tts-player button.tts-player_play-pause:hover:not(:disabled), div.tts-player button.tts-player_close:hover:not(:disabled) {
  color: rgba(0, 0, 0, 0.8);
}
.high-contrast-mode div.tts-player button.tts-player_stop:hover:not(:disabled), .high-contrast-mode div.tts-player button.tts-player_select:hover:not(:disabled), .high-contrast-mode div.tts-player button.tts-player_config:hover:not(:disabled), .high-contrast-mode div.tts-player button.tts-player_play-pause:hover:not(:disabled), .high-contrast-mode div.tts-player button.tts-player_close:hover:not(:disabled) {
  color: rgba(0, 0, 0, 0.8);
}

div.tts-player button.tts-player_stop:disabled, div.tts-player button.tts-player_select:disabled, div.tts-player button.tts-player_config:disabled, div.tts-player button.tts-player_play-pause:disabled, div.tts-player button.tts-player_close:disabled {
  opacity: 0.5;
  cursor: default;
}
div.tts-player button.tts-player_stop {
  background-repeat: no-repeat;
  background-position: center;
}
div.tts-player button.tts-player_stop {
  background-image: url(/player/static/icons/stop-hc.svg);
}
.high-contrast-mode div.tts-player button.tts-player_stop {
  background-image: url(/player/static/icons/stop.svg);
}

div.tts-player button.tts-player_stop:hover {
  background-image: url(/player/static/icons/stop-hc.svg);
}
.high-contrast-mode div.tts-player button.tts-player_stop:hover {
  background-image: url(/player/static/icons/stop-hc.svg);
}

div.tts-player button.tts-player_select {
  background-size: 110%;
  background-repeat: no-repeat;
  background-position: center;
}
div.tts-player button.tts-player_select {
  background-image: url(/player/static/icons/click-hc.svg);
}
.high-contrast-mode div.tts-player button.tts-player_select {
  background-image: url(/player/static/icons/click.svg);
}

div.tts-player button.tts-player_select:hover:not(.active) {
  background-image: url(/player/static/icons/click-hc.svg);
}
.high-contrast-mode div.tts-player button.tts-player_select:hover:not(.active) {
  background-image: url(/player/static/icons/click-hc.svg);
}

div.tts-player button.tts-player_select.active {
  background-color: #44318d;
}
.high-contrast-mode div.tts-player button.tts-player_select.active {
  background-color: #fff;
}

div.tts-player button.tts-player_select.active {
  background-image: url(/player/static/icons/click.svg);
}
.high-contrast-mode div.tts-player button.tts-player_select.active {
  background-image: url(/player/static/icons/click-hc.svg);
}

div.tts-player button.tts-player_select.active:hover {
  background-color: #676bac;
}
.high-contrast-mode div.tts-player button.tts-player_select.active:hover {
  background-color: #fff;
}

div.tts-player button.tts-player_config {
  background-repeat: no-repeat;
  background-position: center;
}
div.tts-player button.tts-player_config {
  background-image: url("/player/static/icons/gear-hc.svg");
}
.high-contrast-mode div.tts-player button.tts-player_config {
  background-image: url("/player/static/icons/gear.svg");
}

div.tts-player button.tts-player_config:hover {
  background-image: url("/player/static/icons/gear-hc.svg");
}
.high-contrast-mode div.tts-player button.tts-player_config:hover {
  background-image: url("/player/static/icons/gear-hc.svg");
}

div.tts-player button.tts-player_volume-down, div.tts-player button.tts-player_volume-up, div.tts-player button.tts-player_playback-rate-down, div.tts-player button.tts-player_playback-rate-up {
  width: 64px;
  height: 64px;
  font-family: monospace;
  position: relative;
  cursor: pointer;
}
div.tts-player button.tts-player_volume-down, div.tts-player button.tts-player_volume-up, div.tts-player button.tts-player_playback-rate-down, div.tts-player button.tts-player_playback-rate-up {
  background-color: #fff;
}
.high-contrast-mode div.tts-player button.tts-player_volume-down, .high-contrast-mode div.tts-player button.tts-player_volume-up, .high-contrast-mode div.tts-player button.tts-player_playback-rate-down, .high-contrast-mode div.tts-player button.tts-player_playback-rate-up {
  background-color: #212121;
}

div.tts-player button.tts-player_volume-down, div.tts-player button.tts-player_volume-up, div.tts-player button.tts-player_playback-rate-down, div.tts-player button.tts-player_playback-rate-up {
  color: #fff;
}
.high-contrast-mode div.tts-player button.tts-player_volume-down, .high-contrast-mode div.tts-player button.tts-player_volume-up, .high-contrast-mode div.tts-player button.tts-player_playback-rate-down, .high-contrast-mode div.tts-player button.tts-player_playback-rate-up {
  color: rgba(0, 0, 0, 0.8);
}

div.tts-player button.tts-player_volume-down::after, div.tts-player button.tts-player_volume-up::after, div.tts-player button.tts-player_playback-rate-down::after, div.tts-player button.tts-player_playback-rate-up::after {
  --size: 36px;
  display: block;
  height: var(--size);
  width: var(--size);
  position: absolute;
  top: calc(50% - var(--size) / 2);
  left: calc(50% - var(--size) / 2);
  font-size: 24px;
  background-repeat: no-repeat;
  background-position: center;
  content: "";
}
div.tts-player button.tts-player_volume-down::after, div.tts-player button.tts-player_volume-up::after, div.tts-player button.tts-player_playback-rate-down::after, div.tts-player button.tts-player_playback-rate-up::after {
  background-color: #ba9bd8;
}
.high-contrast-mode div.tts-player button.tts-player_volume-down::after, .high-contrast-mode div.tts-player button.tts-player_volume-up::after, .high-contrast-mode div.tts-player button.tts-player_playback-rate-down::after, .high-contrast-mode div.tts-player button.tts-player_playback-rate-up::after {
  background-color: white;
}

div.tts-player button.tts-player_volume-down:disabled::after, div.tts-player button.tts-player_volume-up:disabled::after, div.tts-player button.tts-player_playback-rate-down:disabled::after, div.tts-player button.tts-player_playback-rate-up:disabled::after {
  opacity: 0.5;
  cursor: default;
}
div.tts-player button.tts-player_volume-down:hover:not(:disabled), div.tts-player button.tts-player_volume-up:hover:not(:disabled), div.tts-player button.tts-player_playback-rate-down:hover:not(:disabled), div.tts-player button.tts-player_playback-rate-up:hover:not(:disabled) {
  background-color: #fff;
}
.high-contrast-mode div.tts-player button.tts-player_volume-down:hover:not(:disabled), .high-contrast-mode div.tts-player button.tts-player_volume-up:hover:not(:disabled), .high-contrast-mode div.tts-player button.tts-player_playback-rate-down:hover:not(:disabled), .high-contrast-mode div.tts-player button.tts-player_playback-rate-up:hover:not(:disabled) {
  background-color: #fff;
}

div.tts-player button.tts-player_volume-down:hover:not(:disabled), div.tts-player button.tts-player_volume-up:hover:not(:disabled), div.tts-player button.tts-player_playback-rate-down:hover:not(:disabled), div.tts-player button.tts-player_playback-rate-up:hover:not(:disabled) {
  color: #fff;
}
.high-contrast-mode div.tts-player button.tts-player_volume-down:hover:not(:disabled), .high-contrast-mode div.tts-player button.tts-player_volume-up:hover:not(:disabled), .high-contrast-mode div.tts-player button.tts-player_playback-rate-down:hover:not(:disabled), .high-contrast-mode div.tts-player button.tts-player_playback-rate-up:hover:not(:disabled) {
  color: #fff;
}

div.tts-player button.tts-player_volume-down:hover:not(:disabled)::after, div.tts-player button.tts-player_volume-up:hover:not(:disabled)::after, div.tts-player button.tts-player_playback-rate-down:hover:not(:disabled)::after, div.tts-player button.tts-player_playback-rate-up:hover:not(:disabled)::after {
  background-color: #676bac;
}
.high-contrast-mode div.tts-player button.tts-player_volume-down:hover:not(:disabled)::after, .high-contrast-mode div.tts-player button.tts-player_volume-up:hover:not(:disabled)::after, .high-contrast-mode div.tts-player button.tts-player_playback-rate-down:hover:not(:disabled)::after, .high-contrast-mode div.tts-player button.tts-player_playback-rate-up:hover:not(:disabled)::after {
  background-color: rgba(0, 0, 0, 0.8);
}

div.tts-player button.tts-player_volume-down, div.tts-player button.tts-player_playback-rate-down {
  border-right: 1px solid #ebe7ee;
}
.high-contrast-mode div.tts-player button.tts-player_volume-down, .high-contrast-mode div.tts-player button.tts-player_playback-rate-down {
  border-right: 1px solid transparent;
}

div.tts-player button.tts-player_volume-down::after, div.tts-player button.tts-player_playback-rate-down::after {
  -webkit-mask-image: url("/player/static/icons/doe_minus.svg");
  mask-image: url("/player/static/icons/doe_minus.svg");
}
div.tts-player button.tts-player_volume-up, div.tts-player button.tts-player_playback-rate-up {
  border-left: 1px solid #ebe7ee;
}
.high-contrast-mode div.tts-player button.tts-player_volume-up, .high-contrast-mode div.tts-player button.tts-player_playback-rate-up {
  border-left: 1px solid transparent;
}

div.tts-player button.tts-player_volume-up::after, div.tts-player button.tts-player_playback-rate-up::after {
  -webkit-mask-image: url("/player/static/icons/doe_plus.svg");
  mask-image: url("/player/static/icons/doe_plus.svg");
}
div.tts-player button.tts-player_play-pause {
  background-repeat: no-repeat;
  background-position: center;
}
div.tts-player button.tts-player_play-pause {
  background-image: url(/player/static/icons/pause-hc.svg);
}
.high-contrast-mode div.tts-player button.tts-player_play-pause {
  background-image: url(/player/static/icons/pause.svg);
}

div.tts-player button.tts-player_play-pause:hover {
  background-image: url(/player/static/icons/pause-hc.svg);
}
.high-contrast-mode div.tts-player button.tts-player_play-pause:hover {
  background-image: url(/player/static/icons/pause-hc.svg);
}

div.tts-player button.tts-player_play-pause.paused {
  background-repeat: no-repeat;
  background-position: center;
}
div.tts-player button.tts-player_play-pause.paused {
  background-image: url(/player/static/icons/play-hc.svg);
}
.high-contrast-mode div.tts-player button.tts-player_play-pause.paused {
  background-image: url(/player/static/icons/play.svg);
}

div.tts-player button.tts-player_play-pause.paused:hover {
  background-image: url(/player/static/icons/play-hc.svg);
}
.high-contrast-mode div.tts-player button.tts-player_play-pause.paused:hover {
  background-image: url(/player/static/icons/play-hc.svg);
}

div.tts-player button.tts-player_close {
  margin-left: auto;
  position: relative;
}
div.tts-player button.tts-player_close::after {
  content: "×";
  display: block;
  position: absolute;
  top: -8px;
  font-size: 40px;
  font-weight: 700;
  width: 40px;
  text-align: center;
}
div.tts-player button.tts-player_close::after {
  color: rgba(0, 0, 0, 0.8);
}
.high-contrast-mode div.tts-player button.tts-player_close::after {
  color: #fff;
}

div.tts-player button.tts-player_close:hover::after {
  color: rgba(0, 0, 0, 0.8);
}
.high-contrast-mode div.tts-player button.tts-player_close:hover::after {
  color: rgba(0, 0, 0, 0.8);
}

.tts-hover-container *:hover:not(:has(:hover)) {
  outline: 3px solid #cf707a;
  cursor: pointer;
}

.tts-active-element {
  outline: 3px solid #cf707a;
}

.tts-error {
  font-family: monospace;
  font-size: 11px;
  line-height: 14px;
  color: red;
}