div.exa-quest {
  background-color: var(--background-color);
  color: var(--foreground-color);
  font-size: 90%;
}

div.exa-quest h2 p::before {
  content: "";
  padding-right: 0.5em;
  font-family: "Font Awesome 5 Free";
}

div.exa-quest :is(input, button, textarea, select) {
  background-color: var(--shade1);
  color: var(--shade6);

  font-family: inherit;
  font-size: 1em;

  margin-right: 0.5em;
  margin-bottom: 0.5em;
  padding: 0.5em;

  border: none;
  border-radius: 6px;
  outline: none;

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

div.exa-quest button:active {
  background-color: var(--accent3);
}

div.exa-quest :is(input, button, textarea, select)[disabled] {
  color: var(--shade2);
}

div.exa-quest button:not([disabled]):hover {
  background-color: var(--accent3-bg);
}

.reveal div.exa-quest {
  overflow-y: scroll;
  overflow-x: auto;
}

.handout div.exa-quest {
  padding: 1em;
  border: solid 1px lightgray;
}

div.exa-quest button.solve {
  display: inline;
}

div.exa-quest button.again {
  display: none;
}

div.exa-quest[data-solved] button.solve {
  display: none;
}

div.exa-quest[data-solved] button.again {
  display: inline;
}

div.exa-quest div.score {
  display: none;
}

div.exa-quest div.score span:first-child::after {
  content: ": ";
}

div.exa-quest[data-solved] div.score {
  display: inline;
}

div.exa-quest p,
div.exa-quest h2 {
  margin: 0em;
  padding: 0;
  padding-bottom: 0.3em;
}

div.exa-quest div.exa-mc {
  margin: 0em;
  padding-left: 0.5em;
  padding-top: 0.3em;
  padding-bottom: 1em;
}

div.exa-mc div.choice {
  display: flex;
  flex-flow: row nowrap;
  row-gap: 0.5em;
  justify-content: left;
  align-items: center;
  margin-bottom: var(--vertical-margin);
}

div.exa-mc div.choice > div.check-box {
  flex: 0 0 1.5em;

  white-space: nowrap;
  vertical-align: middle;
  text-align: center;

  padding-right: 0.5em;
}

div.exa-mc div.choice > div.label {
  flex: 0 0 1.5em;

  white-space: nowrap;
  vertical-align: middle;

  font-weight: bold;
  font-size: 120%;

  text-align: center;
  padding-right: 0.5em;
}

div.exa-mc div.choice > div.content {
  flex: 3 1 0%;
}

div.exa-mc div.choice > div.content p {
  padding: 0;
}

div.exa-mc div.choice > div.vote {
  flex: 1 1 0%;
  min-width: 4em;

  position: relative;
  background-color: var(--shade1);
  padding-top: 0.1em;
  padding-bottom: 0.1em;
  white-space: nowrap;
  font-weight: bold;
}

/* Default visibility */
div.exa-quest :is(div.vote, div.label) {
  display: none;
}

div.exa-quest :is(div.check-box, button.solve) {
  display: inline;
}

/* Marked poll, no poll session */
div.exa-quest.poll :is(div.check-box, button:is(.solve, .again)) {
  display: none;
}

div.exa-quest.poll :is(div.choice > div.label) {
  display: inline;
}

/* Marked poll, poll session */
div.reveal[data-poll-session]
  div.exa-quest.poll
  :is(div.vote, div.choice > div.label, div.check-box, button.solve) {
  display: inline;
}

div.reveal[data-poll-session]
  div.question.poll
  button:is(.qrcode, .poll, .stop) {
  display: inline;
  float: right;
}

div.exa-mc div.choice p {
  margin: 0;
  padding-top: 0.1em;
  padding-bottom: 0.1em;
  padding-left: 0.7em;
  padding-right: 0;
}

div.vote > div.label {
  /* display: inline; */
  vertical-align: middle;
  display: none;
}

div.vote div.votes {
  box-sizing: border-box;
  float: right;
  color: var(--shade1);
  text-align: right;
  width: 0%;
  min-width: 1em;
  padding-left: 0.2em;
  padding-right: 0.2em;
  border-radius: var(--block-border-radius);
  transition: width 0.5s;
}

div.vote[label="A"] div.votes {
  background-color: var(--accent0);
}

div.vote[label="B"] div.votes {
  background-color: var(--accent1);
}

div.vote[label="C"] div.votes {
  background-color: var(--accent2);
}

div.vote[label="D"] div.votes {
  background-color: var(--accent3);
}

div.vote[label="E"] div.votes {
  background-color: var(--accent4);
}

div.vote[label="F"] div.votes {
  background-color: var(--accent5);
}

div.vote[label="G"] div.votes {
  background-color: var(--accent6);
}

div.vote[label="H"] div.votes {
  background-color: var(--accent7);
}

div.vote[label="I"] div.votes {
  background-color: var(--accent0);
}

div.vote[label="J"] div.votes {
  background-color: var(--accent1);
}

div.vote[label="K"] div.votes {
  background-color: var(--accent2);
}

div.vote[label="L"] div.votes {
  background-color: var(--accent3);
}

div.vote[label="M"] div.votes {
  background-color: var(--accent4);
}

div.vote[label="N"] div.votes {
  background-color: var(--accent5);
}

div.vote[label="O"] div.votes {
  background-color: var(--accent6);
}

div.vote[label="P"] div.votes {
  background-color: var(--accent7);
}

div.qrcode.container {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  display: none;
  z-index: 4000;
}

div.question button {
  font-weight: bold;
}

div.question button:is(.qrcode, .poll, .stop) {
  display: none;
  font-weight: bold;
}

div.question button.stop::before {
  content: "";
  font-family: "Font Awesome 5 Free";
}

div.question button.qrcode::before {
  content: "";
  font-family: "Font Awesome 5 Free";
}

div.question button.poll::before {
  content: "";
  font-family: "Font Awesome 5 Free";
}

div.qrcode.container button {
  position: absolute;
  right: 1em;
  top: 1em;
}

div.qrcode.container.show {
  display: flex;
}

div.qrcode.container {
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  height: 100%;
}

div.qrcode.container canvas {
  height: 66vh;
  min-height: 0;
  aspect-ratio: 1 / 1;
  background-color: white;
  padding: 0.5em;
  border: 0.01em solid black;
  border-radius: var(--block-border-radius);
}

div.qrcode.container a {
  font-size: 2rem;
  font-weight: bold;
}

div.exa-mc i.correct {
  color: darkgreen;
  width: 1.3em;
  text-align: center;
  visibility: hidden;
}

div.exa-mc i.wrong {
  color: darkred;
  width: 1.3em;
  text-align: center;
  visibility: hidden;
}

div.exa-mc div.choice div.check-box span:hover {
  background-color: var(--shade3);
}

div.exa-mc div.choice div.check-box span:active {
  background-color: var(--accent1-bg);
}

div.exa-quest[data-solved] div.exa-mc div.choice div.check-box span:hover {
  background-color: transparent;
}

div.exa-mc i.checked {
  display: none;
  width: 1em;
  height: 1em;
  padding: 0 0.1em;
}

div.exa-mc i.unchecked {
  display: inline;
  width: 1em;
  height: 1em;
  padding: 0 0.1em;
}

div.exa-quest[data-solved] div.exa-mc div.choice div.check-box:active {
  background-color: transparent;
}

/* Box has been checked */
div.exa-mc div.choice div.check-box[data-checked] i.checked {
  display: inline;
}
div.exa-mc div.choice div.check-box[data-checked] i.unchecked {
  display: none;
}

/* Correct answer has been checked */
div.exa-quest[data-solved]
  div.exa-mc
  div.choice.correct
  div.check-box[data-checked]
  i.correct {
  visibility: visible;
}

/* Wrong answer has been checked */
div.exa-quest[data-solved]
  div.exa-mc
  div.choice.wrong
  div.check-box[data-checked]
  i.wrong {
  visibility: visible;
}

div.exa-ff {
  margin: 0em;
  padding-left: 0em;
  padding-top: 0.3em;
  padding-bottom: 0em;
}

div.exa-ff h3 {
  margin: 0em;
  padding-left: 0em;
  padding-top: 0.3em;
  font-weight: bold;
}

div.exa-ff textarea {
  width: 100%;
  resize: none;
  font-family: var(--code-font-family);
}

div.exa-ff div.solution {
  display: none;
}

div.exa-quest[data-solved] div.exa-ff div.solution {
  display: block;
}

div.exa-nu {
  margin: 0em;
  padding-left: 0em;
  padding-top: 0.3em;
  padding-bottom: 0em;
}

div.exa-nu h3 {
  margin: 0em;
  padding-left: 0em;
  padding-top: 0.3em;
  font-weight: bold;
}

div.exa-nu textarea {
  width: 100%;
  resize: none;
  font-family: var(--code-font-family);
}

div.exa-nu div.solution {
  display: none;
}

div.exa-quest[data-solved] div.exa-nu div.solution {
  display: block;
}

table.exa-ma i.correct {
  color: darkgreen;
  width: 1.3em;
  text-align: center;
  display: none;
}

table.exa-ma i.wrong {
  color: darkred;
  width: 1.3em;
  text-align: center;
  display: none;
}

table.exa-ma td.result {
  width: 1em;
  text-align: center;
}

table.exa-ma {
  margin: 0em;
  padding-left: 0em;
  padding-top: 0.3em;
}

table.exa-ma tr.detail td {
  border: none;
}

table.exa-ma tr.detail[data-right] i.correct {
  display: inline;
}

table.exa-ma tr.detail[data-wrong] i.wrong {
  display: inline;
}