:root {
  --theme-900: hsl(84, 80%, 10%);
  --theme-800: hsl(84, 75%, 17%);
  --theme-700: hsl(84, 70%, 25%);
  --theme-600: hsl(84, 65%, 36%);
  --theme-500: hsl(84, 40%, 51%);
  --theme-400: hsl(84, 45%, 63%);
  --theme-300: hsl(84, 50%, 75%);
  --theme-200: hsl(84, 55%, 85%);
  --theme-100: hsl(116, 44%, 96%);

  --grey-900: hsl(84, 0%, 10%);
  --grey-800: hsl(84, 0%, 18%);
  --grey-700: hsl(84, 0%, 33%);
  --grey-600: hsl(84, 0%, 45%);
  --grey-500: hsl(84, 0%, 60%);
  --grey-400: hsl(84, 0%, 68%);
  --grey-300: hsl(84, 0%, 75%);
  --grey-200: hsl(84, 0%, 88%);
  --grey-100: hsl(84, 0%, 97%);

  --red-900: hsl(4, 80%, 30%);
  --red-800: hsl(4, 82%, 38%);
  --red-700: hsl(4, 85%, 45%);
  --red-600: hsl(4, 88%, 54%);
  --red-500: hsl(4, 91%, 63%);
  --red-400: hsl(4, 85%, 73%);
  --red-300: hsl(4, 75%, 83%);
  --red-200: hsl(4, 65%, 88%);
  --red-100: hsl(4, 55%, 95%);

  --yellow-900: hsl(48, 99%, 30%);
  --yellow-800: hsl(48, 97%, 38%);
  --yellow-700: hsl(48, 96%, 45%);
  --yellow-600: hsl(48, 94%, 49%);
  --yellow-500: hsl(48, 95%, 54%);
  --yellow-400: hsl(48, 85%, 73%);
  --yellow-300: hsl(48, 75%, 83%);
  --yellow-200: hsl(48, 65%, 88%);
  --yellow-100: hsl(48, 55%, 95%);

  --primary-theme: hsl(84, 40%, 51%);
  --primary-dark: hsl(84, 40%, 35%);
  --secondary-theme: #f1f6ea;
  --tertiary-theme: #fcfc62;
  --theme-4: #cee5f2;

  --secondary-light: hsl(84, 40%, 77%);

  --black-1: #171717;
  --black-2: #454545;

  --white-1: #fdfefd;

  --contrast-red: #cc444b;
  --contrast-blue: #96bdc6;

  --student-breakpoint: 768px;

  --correct-color: #93cf95;
  --incorrect-color: #f6665c;
  --skip-color: hsl(48, 94%, 49%);
}

.section_header {
  height: 50px;
  background-color: var(--primary-theme);
  color: white;
  padding: 0px;
  margin: 0px;
  text-align: center;
  letter-spacing: 2px;
  font-weight: 200;
  font-size: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-width: 2px;
  border-style: solid;
  border-color: black;
  border-right-width: 2px;
}

.small_header {
  height: 50px;
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  background-color: var(--secondary-theme);
  text-align: center;

  letter-spacing: 0.5px;
  font-weight: 400;
  font-size: 19px;
}

.question-image {
  width: 90%;
}

.active_button {
  background-color: var(--theme-500) !important;
  border-color: var(--theme-500) !important;
  color: white;
  cursor: pointer;
  box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.15);
}

.active_button:hover {
  background-color: var(--theme-600) !important;
  color: white;
}

.active_button:active {
  box-shadow: inset 0 1px 2px hsla(0, 0%, 0%, 0.15);
}

.inactive_button {
  background-color: var(--secondary-light) !important;
  border-color: var(--secondary-light) !important;
  color: black;
  cursor: pointer;
}

.inactive_button:disabled {
  color: grey;
  cursor: default;
}

.skip_button {
  background-color: hsl(48, 94%, 49%);
}

.fixed_col {
  position: absolute;
  top: auto;
  left: 0.5;
  width: 6em;
}

.fixed_col {
  content: 'Row ';
}

.row_group {
  position: relative;
  z-index: 0;
}

.grid_rect {
  stroke: black;
  fill: grey;
  fill-opacity: 0.3;
}

.skip_rect {
  stroke: hsl(48, 94%, 49%);
  position: relative;
  fill: hsl(48, 94%, 49%);
  fill-opacity: 0.3;
}

.answered_rect {
  fill: var(--primary-theme);
  stroke: var(--primary-theme);
  fill-opacity: 0.3;
}

.noskip_rect {
  stroke: black;
  fill: grey;
  fill-opacity: 0.9;
}

.answer-choice {
  position: relative;
  z-index: 1;
}

/* .image_container {
	border: solid 1px grey;
	border-radius: 1px;
} */
.first_warning {
  border: solid 7px white;
  border-radius: 7px;
  animation: first_warning 1.5s linear 0s infinite;
}

.second_warning {
  border: solid 7px white;
  border-radius: 7px;
  animation: second_warning 1.5s linear 0s infinite;
}

@keyframes first_warning {
  0% {
    border-color: hsl(48, 94%, 75%);
  }
  50% {
    border-color: hsl(48, 94%, 49%);
  }
  100% {
    border-color: hsl(48, 94%, 75%);
  }
}

@keyframes second_warning {
  0% {
    border-color: hsl(0, 100%, 75%);
  }
  50% {
    border-color: hsl(0, 100%, 45%);
  }
  100% {
    border-color: hsl(0, 100%, 75%);
  }
}

.marked_bubble > circle {
  fill: black;
}

.marked_bubble > text {
  stroke: white;
}

.flashing_bubble > circle {
  animation: flashing_bubble 1.2s linear 0s infinite;
}

@keyframes flashing_bubble {
  0% {
    fill: hsl(48, 94%, 67%);
  }
  50% {
    fill: black;
  }
  100% {
    fill: hsl(48, 94%, 67%);
  }
}

.tos_text {
  font-size: 10px;
}

.question_drop > .fa-flag,
.question_drop > .fa-bookmark-o,
.question_drop > .fa-bookmark,
.question_drop > .fa-undo,
.question_drop > .fa-star-o,
.question_drop > .fa-star {
  cursor: pointer !important;
}

.dropdown-item {
  cursor: pointer;
}

.question_text > .MathJax_CHTML {
  display: block;
  position: relative;
  font-size: 100% !important;
}

.question_text {
  margin-bottom: 5px;
  line-height: 1.2;
}

/* .question_panel {
	width: 3.5in;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	line-height: 1.75;
} */

.question_body {
  display: block;
}

.big_answer_choices > div > .custom_answer_choices {
  margin: 20px 0px 20px 0px;
}

.formula_header {
  text-align: center;
  margin: 0px 0px 10px 0px;
}

.status_bar {
  position: fixed;
  height: 50px;
  width: 100%;
  display: flex;
  background-color: var(--secondary-theme);
  align-items: center;
  z-index: 1;
}

.tab_bar {
  position: sticky;
  height: 50px;
  width: 100%;
  display: flex;
  background-color: var(--secondary-theme);
  align-items: center;
  z-index: 1;
  overflow-x: auto;
}

.status_item {
  background-color: var(--primary-theme);
  color: white;
  height: 38px;
  display: flex;
  align-items: center;
  margin: 3px 8px 3px 8px;
  padding: 3px 13px 3px 13px;
  border-radius: 5px;
  cursor: pointer;
  letter-spacing: 0.5px;
}

.status_item.inert {
  background-color: white;
  color: black;
  cursor: default;
}

.summary_header {
  font-weight: bold;
  text-align: center;
  background-color: var(--secondary-theme);
}

.modal_header {
  background-color: var(--primary-theme);
  color: white;
}