/**
 * White theme for reveal.js. This is the opposite of the 'black' theme.
 *
 * By Hakim El Hattab, http://hakim.se
 */

@import url("../fonts/lato.css");
@import url("../vendor/fontawesome/css/all.css");

:root {
  --emphColor: var(--accent5);
  --icon-active-color: var(--emphColor);

  --green-background-color: var(--accent3-bbg);
  --green-border-color: var(--accent3);
  --red-background-color: var(--accent0-bbg);
  --red-border-color: var(--accent0);

  --block-outset: 0;
  --block-border-width: 0;
  --list-indent: 0;
  --vertical-margin: 0;
}

/*********************************************
   * GLOBAL STYLES
   *********************************************/

body {
  background: var(--shade0);
  background-color: var(--shade0);
}

.reveal {
  font-family: "Lato", sans-serif;
  font-size: 32px;
  font-weight: normal;
  color: var(--shade7);
}

.reveal .slides section .fragment {
  transition: none;
}

::selection {
  color: var(--shade7);
  background: #98bdef;
  text-shadow: none;
}

/* do not require section to be immediate child of .slides, since
  * this will not be the case for PDF export! */
/*.reveal .slides > section, .reveal .slides > section > section {*/
.reveal .slides section {
  line-height: 1.3;
  font-weight: inherit;
  text-align: center;
  padding: 0;
}

/*********************************************
 * new column syntax
 *********************************************/

div.grid-layout {
  display: grid;
  justify-content: start;
  column-gap: 1em;
  row-gap: 1em;
}

/*********************************************
   * MARIO: ALIGNMENT & COLUMNS
   *********************************************/

.reveal .top {
  vertical-align: top;
}

.reveal .middle {
  vertical-align: middle;
}

.reveal .bottom {
  vertical-align: bottom;
}

.reveal .float-left {
  float: left;
}

.reveal .float-right {
  float: right;
}

.reveal .left,
.reveal section.left {
  text-align: left;
}

.reveal .center,
.reveal section.center {
  text-align: center;
}

.reveal .right,
.reveal section.right {
  text-align: right;
}

.reveal .small {
  font-size: 0.7em;
}

.reveal .tiny {
  font-size: 0.6em;
}

.reveal .large {
  font-size: 1.2em;
}

.reveal .tt {
  font-family: monospace;
}

.reveal .boxed {
  border: 1px solid var(--shade6);
  border-radius: 5px;
  padding: 10px;
  box-sizing: border-box;
}
.reveal .boxed ol,
.reveal .boxed dl,
.reveal .boxed ul {
  margin-bottom: 0em;
}

.reveal .w10 {
  margin-left: auto;
  margin-right: auto;
  width: 10%;
}
.reveal .w20 {
  margin-left: auto;
  margin-right: auto;
  width: 20%;
}
.reveal .w25 {
  margin-left: auto;
  margin-right: auto;
  width: 25%;
}
.reveal .w30 {
  margin-left: auto;
  margin-right: auto;
  width: 30%;
}
.reveal .w40 {
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}
.reveal .w50 {
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}
.reveal .w60 {
  margin-left: auto;
  margin-right: auto;
  width: 60%;
}
.reveal .w70 {
  margin-left: auto;
  margin-right: auto;
  width: 70%;
}
.reveal .w80 {
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}
.reveal .w90 {
  margin-left: auto;
  margin-right: auto;
  width: 90%;
}

.reveal .col10 {
  float: left;
  width: 10%;
}
.reveal .col20 {
  float: left;
  width: 20%;
}
.reveal .col25 {
  float: left;
  width: 25%;
}
.reveal .col30 {
  float: left;
  width: 30%;
}
.reveal .col33 {
  float: left;
  width: 33%;
}
.reveal .col40 {
  float: left;
  width: 40%;
}
.reveal .col50 {
  float: left;
  width: 50%;
}
.reveal .col60 {
  float: left;
  width: 60%;
}
.reveal .col70 {
  float: left;
  width: 70%;
}
.reveal .col80 {
  float: left;
  width: 80%;
}
.reveal .col90 {
  float: left;
  width: 90%;
}

/*********************************************
   * HEADERS
   *********************************************/
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
  margin: 0 0 20px 0;
  font-weight: bold;
  line-height: 1.2;
  letter-spacing: normal;
  text-shadow: none;
  word-wrap: break-word;
  text-align: center;
}

.reveal h1 {
  margin: 20px 0 40px 0;
  font-size: 1.5em;
}

.reveal h2 {
  font-size: 1.3em;
}

.reveal h3 {
  font-size: 1.1em;
}

.reveal h4 {
  font-size: 1em;
}

.reveal h1 {
  text-shadow: none;
}

/* do not show empty headers */
.reveal h1:empty,
.reveal h2:empty {
  display: none;
}

/*********************************************
   * OTHER
   *********************************************/
.reveal p {
  margin: 10px 0;
  line-height: 1.3;
}
.reveal p:first-child {
  margin-top: 0;
}
.reveal p:last-child {
  margin-bottom: 0;
}

/* MARIO: do not completely remove empty paragraphs with display:none.
   * Instead let them cause a line break, but not eat up more space */
.reveal p:empty {
  display: block;
  margin: 0;
  padding: 0;
  height: 0;
  width: auto;
}

.reveal strong {
  font-weight: bold;
}

.reveal .boldblue {
  font-weight: bold;
  color: var(--emphColor);
}

.reveal b {
  font-weight: bold;
}

.reveal em {
  font-style: italic;
}

.reveal del {
  color: red;
}

.reveal ol,
.reveal dl,
.reveal ul {
  display: inline-block;
  text-align: left;
  margin-bottom: 0.7em;
}

/* remove bottom margin of last list element on a slide
     list element might be encapsulated in a div, e.g.
     for .incremental or .colXY.
     also remove bottom margin of last element on slide,
     no matter what type it is. */
.reveal .slides section > *:last-child,
.reveal .slides section > ul:last-child,
.reveal .slides section > ol:last-child,
.reveal .slides section > div > ol:last-child,
.reveal .slides section > div > ul:last-child {
  margin-bottom: 0;
}

.reveal ol li,
.reveal dl li,
.reveal ul li {
  margin-bottom: 0.5em;
  margin-left: 40px;
}

.reveal ol {
  list-style-type: decimal;
}

.reveal ul {
  list-style-type: disc;
}

.reveal ul ul,
.reveal ol ul {
  list-style-type: circle;
}

.reveal ol ol {
  list-style-type: lower-roman;
}

.reveal ul ul ul,
.reveal ul ul ol,
.reveal ul ol ul,
.reveal ul ol ol,
.reveal ol ul ul,
.reveal ol ul ol,
.reveal ol ol ul,
.reveal ol ol ol {
  font-size: 0.9em;
}

.reveal ul ul,
.reveal ul ol,
.reveal ol ol,
.reveal ol ul {
  display: block;
  margin-top: 0.3em;
  font-size: 0.8em;
  margin-left: 10px;
}

.reveal dt {
  font-weight: bold;
}

.reveal dd {
  margin-left: 40px;
}

.reveal q,
.reveal blockquote {
  quotes: none;
}

.reveal blockquote {
  display: block;
  text-align: left;
  font-size: 0.9em;
  position: relative;
  width: 80%;
  margin: 20px auto;
  padding: 0px 15px;
  font-style: italic;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
}

.reveal blockquote p:first-child,
.reveal blockquote p:last-child {
  display: block;
}

.reveal q {
  font-style: italic;
}

/*********************************************
   * CODE HIGHLGIHTING OF REVEAL
   *********************************************/

.reveal .hljs table,
.reveal .hljs table tbody {
  margin: 0px;
  border: none;
}

.reveal .hljs-ln-code,
.reveal .hljs-ln-numbers {
  padding: 0;
  border: 0;
}

.reveal .hljs-ln-numbers {
  opacity: 0.6;
  padding-right: 0.75em;
  text-align: right;
  vertical-align: top;
}

.reveal
  .hljs[data-line-numbers]:not([data-line-numbers=""])
  tr:not(.highlight-line) {
  opacity: 0.3;
}

/*********************************************
   * CODE HIGHLIGHTING OF MARIO
   *********************************************/

/* box around block of code */
.reveal pre {
  display: block;
  position: relative;
  width: auto;
  margin: 10px;
  text-align: center;
  max-height: 500px;
  overflow: auto;
}

/* inline code */
.reveal code {
  display: inline;
  padding: 0.2em;
  text-align: left;
  font-family: monospace;
  word-wrap: normal;
}

/* block of code (has to override above inline code)*/
.reveal pre code {
  display: block;
  text-align: left;
  font-size: 0.5em;
  font-family: monospace;
  line-height: 1.45em;
  padding: 16px;
  overflow: auto;
  max-height: 100%;
  word-wrap: normal;
  background-color: #f7f7f7;
  box-sizing: border-box;
}

/* MacOS only shows scrollbars when they are used, which is not a 
     good idea for code blocks. The following settings show the scrollbar.
     Only works on WebKit browswers (Chrome, Safari), not on Firefox. */
.reveal pre code.small {
  font-size: 0.4em;
}
.reveal pre::-webkit-scrollbar {
  width: 9px;
}
.reveal pre::-webkit-scrollbar-track {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.1);
}
.reveal pre::-webkit-scrollbar-thumb {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.2);
}
.reveal pre::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.4);
}

/*********************************************
   * TABLES
   *********************************************/

.reveal table {
  display: table;
  width: unset;
  margin: auto;
  border-collapse: collapse;
  border-spacing: 2px;
  border-top: 2px solid var(--shade6);
  border-bottom: 2px solid var(--shade6);
  text-align: center;
  margin-bottom: 1em;
  line-height: 1.5em;
}

.reveal table caption {
  margin: 10px 0px 0px 0px;
  line-height: 1.2;
  font-style: italic;
  font-size: 0.8em;
  text-align: center;
  caption-side: bottom;
}

.reveal table th {
  font-weight: bold;
}

.reveal table th {
  border-bottom: 1px solid;
}

.reveal table th,
.reveal table td {
  text-align: left;
  padding: 0.2em 1em 0.2em 1em;
}

.reveal table th[align="center"],
.reveal table td[align="center"] {
  text-align: center;
}

.reveal table th[align="right"],
.reveal table td[align="right"] {
  text-align: right;
}

.reveal table tbody tr:last-child th,
.reveal table tbody tr:last-child td {
  border-bottom: none;
}

.reveal sup {
  vertical-align: super;
  font-size: 0.7em;
}

.reveal sub {
  vertical-align: sub;
  font-size: 0.7em;
}

.reveal small {
  display: inline-block;
  font-size: 0.6em;
  line-height: 1.2em;
  vertical-align: top;
}

.reveal small * {
  vertical-align: top;
}

/*********************************************
   * LINKS
   *********************************************/
.reveal a {
  color: var(--accent5);
  text-decoration: none;
  -webkit-transition: color 0.15s ease;
  -moz-transition: color 0.15s ease;
  transition: color 0.15s ease;
}

.reveal a:hover {
  color: var(--hover-color);
  text-shadow: none;
  text-decoration: underline;
  border: none;
}

.reveal .roll span:after {
  color: #fff;
  background: #1a53a1;
}

/*********************************************
   * MEDIA: images, videos, iframes, figures
   *********************************************/

.reveal iframe {
  border: 1px solid lightgray;
  outline: none;
  overflow: hidden;
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
}

.reveal figure figcaption,
.reveal span.figcaption {
  display: block;
  margin: 10px 0px 0px 0px;
  line-height: 1.2;
  font-style: italic;
  font-size: 0.6em;
  /* text-align: center; */
}

/* override Henrik's width=100% */
.reveal figure > img,
.reveal figure > video {
  width: auto;
}

/*********************************************
   * PROGRESS BAR
   *********************************************/
.reveal .progress {
  background: rgba(0, 0, 0, 0.2);
  pointer-events: none; /* prevent navigation by clicking into progress bar */
}

.reveal .progress span {
  background: var(--emphColor);
  -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
  -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
  transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
}

/*********************************************
   * MARIO: TITLE SLIDE
   *********************************************/

.white-on-blue {
  color: #ffffff;
  background-color: var(--emphColor);
}

.reveal div.title {
  margin-top: 50px 0 0 0;
  padding: 30px;
  font-weight: bold;
  font-style: normal;
  font-size: 2em;
  text-align: center;
}

.reveal div.subtitle {
  margin: 0;
  padding: 0 30px 30px 30px;
  font-weight: normal;
  font-style: italic;
  font-size: 1.5em;
  text-align: center;
}

.reveal img.teaser {
  margin: 50px 0 0 0;
  height: 300px;
  width: auto;
  object-fit: contain;
}

.reveal div.author {
  margin: 50px 0 0 0;
  font-weight: normal;
  font-style: normal;
  font-size: 1em;
  text-align: center;
}

.reveal div.affiliation {
  margin: 10px 0 0 0;
  font-weight: normal;
  font-style: normal;
  font-size: 0.8em;
  text-align: center;
}

.reveal div.authors {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}

/*********************************************
   * MARIO: SECTIONS
   *********************************************/

.reveal .section h1,
.reveal section h1:only-child {
  /* white on blue */
  color: #ffffff;
  background-color: var(--emphColor);

  /* large top margin -> vertical centering */
  margin: 100px auto;
  padding: 50px;

  /* large bold font */
  font-weight: bold;
  font-style: normal;
  font-size: 1.5em;
}

/*********************************************
   * MARIO: image sequence, shown one after the other
   *********************************************/

@media not print {
  .reveal section .sequence .fragment:not(.current-fragment),
  .reveal section .fragment .sequence:not(.current-fragment) {
    display: none;
  }
}
/* when in print mode, show only first image */
@media print {
  .reveal section .sequence .fragment:not(:last-of-type),
  .reveal section .fragment .sequence:not(:last-of-type) {
    display: none;
  }
}

/* if inline-block, image sequence shifts to the right */
span.sequence {
  display: flex;
  justify-content: center;
}

/* try Reveals stack layout */
.reveal .r-stack > p > * {
  grid-area: 1/1;
  margin: auto;
}
/* use Kevin Powels cool trick: https://www.youtube.com/watch?v=cs37yx73b1o */
.reveal .r-stack > p {
  display: contents;
}

/*********************************************
   * MARIO: COMMENT BUBBLES
   *********************************************/

.reveal .bubble {
  display: inline-block;
  font-size: 0.7em;
  color: #ffffff;
  background-color: var(--emphColor);
  padding: 10px;
  margin: auto;
  border-radius: 5px;
  /*box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.35);*/
}

.reveal .comment {
  color: #ffffff;
  background-color: var(--emphColor);
  position: absolute;
  padding: 10px;
  border-radius: 5px;
  font-size: 0.5em;
}

.reveal .comment-left {
  color: #ffffff;
  background-color: var(--emphColor);
  position: absolute;
  padding: 5px;
  font-size: 80%;
  border-radius: 20px 20px 0px 20px;
}

.reveal .comment-right {
  color: #ffffff;
  background-color: var(--emphColor);
  position: absolute;
  padding: 5px;
  font-size: 80%;
  border-radius: 20px 20px 20px 0px;
}

.reveal .comment-big {
  color: #ffffff;
  background-color: var(--emphColor);
  padding: 10px;
  border-radius: 5px;
}

/*********************************************
   * MARIO: FOOTER COMMENTS
   * either use footer tag or class
   *********************************************/

.reveal footer,
.reveal .footer {
  position: absolute;
  display: block;
  text-align: center;
  margin: 0px;
  padding: 0px;
  font-size: 0.5em;
  width: auto;
  height: auto;
  left: 100px;
  right: 100px;
  bottom: 0.5em;
}

.reveal footer p,
.reveal .footer p {
  margin: 0px;
  padding: 0px;
}

/*********************************************
   * MARIO: GENERIC HIGHLIGHT
   *********************************************/

.reveal .highlight {
  background-color: #fdfbaa;
}

/*********************************************
   * MARIO: margin: auto
   *********************************************/

.reveal .automargin {
  margin: 10px auto;
}

/*********************************************
   * MARIO: ADD SHADOWS (e.g. to images)
   *********************************************/

.reveal .shadow {
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
}

.reveal table p {
  margin: 0px;
}

.reveal .neg80 {
  margin-top: -80px;
}

.reveal .neg60 {
  margin-top: -60px;
}

/* class for aligning divs in a row */
.reveal .ilb {
  display: inline-block;
  vertical-align: top;
}

.reveal .transparent {
  opacity: 0.1;
}

/*********************************************
   * MARIO: Task lists
   *********************************************/

/* hide checkbox */
.reveal ul.task-list li > input[type="checkbox"] {
  display: none;
}
/* hide item bullets */
.reveal ul.task-list > li {
  list-style-type: none;
  margin-left: 0.5em;
}
.reveal ul.task-list > li::before {
  margin-right: 0.25em;
}
/* default: check boxes */
.reveal ul.task-list > li.task-yes::before {
  content: "\2612";
}
.reveal ul.task-list > li.task-no::before {
  content: "\2610";
}
/* class "check-cross" */
.reveal .check-cross .task-list li.task-yes::before {
  font-weight: bold;
  color: var(--greenish);
  content: "✓";
}
.reveal .check-cross .task-list li.task-no::before {
  font-weight: bold;
  color: var(--redish);
  content: "✗";
}
/* class "plus-minus" */
.reveal .plus-minus .task-list li.task-yes::before {
  color: var(--greenish);
  content: "\2295";
}
.reveal .plus-minus .task-list li.task-no::before {
  color: var(--redish);
  content: "\2296";
}
/* class "thumb" */
.reveal .thumb .task-list li.task-yes::before {
  content: "👍";
}
.reveal .thumb .task-list li.task-no::before {
  content: "👎";
}

/*********************************************
   * MARIO: MathJax
   *********************************************/

.reveal section mjx-container[display="true"] {
  margin: 0.7em 0em 1em 0em;
}

.reveal section mjx-container > svg a {
  color: var(--emphColor);
  fill: var(--emphColor);
}

/*********************************************
   * MARIO: fullscreen for iframes
   *********************************************/

.reveal div.fs-container {
  margin: auto;
  border: 0px;
  padding: 0px;
  position: relative;
}

.reveal div.fs-container:fullscreen {
  overflow-x: hidden;
  overflow-y: auto;
  background-color: white;
  padding: 20px;
}

/* needed for mobile Safari */
*:-webkit-full-screen {
  width: 100% !important;
  height: 100% !important;
}

.reveal div.fs-container > iframe {
  box-sizing: border-box;
}

.reveal div.fs-container:fullscreen > iframe {
  border: none;
}

.reveal button.fs-button {
  z-index: 100;
  display: inline-block;
  position: absolute;
  top: 2px;
  right: 2px;
  cursor: pointer;
  outline: none;
  font-size: 20px;
  width: 24px;
  height: 24px;
  padding: 2px;
  border: none;
  border-radius: 4px;
  opacity: 0;
  color: var(--icon-inactive-color);
  background-color: rgba(255, 255, 255, 0.5);
}

.reveal div.fs-container:hover > button.fs-button {
  opacity: 0.5;
}

.reveal div.fs-container > button.fs-button:hover {
  opacity: 1;
  color: var(--icon-active-color);
  background-color: rgba(255, 255, 255, 0.8);
}

/*********************************************
   * MARIO: menu icon in top left corner
   *********************************************/

.reveal .slide-menu-button {
  position: fixed;
  left: calc(var(--icon-size) * 0.25);
  top: calc(var(--icon-size) * 0.25);
  bottom: auto;
  right: auto;
  padding: calc(var(--icon-size) * 0.5);
  margin: auto;
  z-index: 40;
  background: none;
  font-size: var(--icon-size);
  opacity: 0.5;
  color: var(--icon-inactive-color);
}

.reveal .slide-menu-button:hover {
  opacity: 1;
  color: var(--icon-active-color);
}

.reveal .slide-menu-button a {
  color: inherit;
}

/*********************************************
   * MARIO: style Henrik's question panel
   *********************************************/

div.open-button {
  position: fixed;
  left: auto;
  right: calc(var(--icon-size) * 0.25);
  top: calc(var(--icon-size) * 0.25);
  bottom: auto;
  margin: calc(var(--icon-size) * 0.5);
  padding: 0.2em;
  z-index: 40;
  background: none;
  font-size: var(--icon-size);
  color: var(--icon-inactive-color);
}

div.open-button.i {
  opacity: 0.5;
}

div.open-button:hover,
div.q-panel button:hover,
div.q-panel div.q-header button:hover,
div.q-panel div.q-footer div.q-login:not(.admin):hover {
  opacity: 1;
  color: var(--icon-active-color);
}

div.open-badge {
  font-size: 0.5em;
}

div.q-panel {
  background-color: rgba(100, 100, 100, 0.2);
}

html.print-pdf div.open-button {
  display: none;
}

/*********************************************
   * MARIO: bibliography
   *********************************************/

.reveal .references {
  margin: auto;
  max-height: 600px;
  width: 90%;
  overflow-y: auto;
}

.reveal .references > div {
  padding-left: 1em;
  text-indent: -1em;
  text-align: left;
  margin-bottom: 1em;
}

/*********************************************
   * MARIO: Quizzes with task list syntax
   *********************************************/

/* quiz flex layout */
.reveal .quiz ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  text-align: center;
  counter-reset: answer;
  margin-top: 1em;
}

/* one quiz item */
.reveal .quiz ul li {
  display: inline-block;
  position: relative;
  text-align: left;
  margin: 0.5em;
  border: 3px solid var(--emphColor);
  border-radius: 0.5em;
  padding: 0.5em;
  font-weight: normal;
  background-color: var(--shade1);
}

/* add A, B, C, D... */
.reveal .quiz ul.task-list > li::before {
  content: counter(answer, upper-latin) ": ";
  counter-increment: answer;
  margin-right: 0.5em;
  font-weight: bold;
}

/* remove task list checkbox */
.reveal .quiz ul.task-list li > input[type="checkbox"] {
  display: none;
}

/* 2nd level ul contains tool tip */
.reveal .quiz ul.task-list li ul {
  display: inline-block;
  margin: 0;
  padding: 0;
}

/* don't need this for 2nd level */
.reveal .quiz ul.task-list li ul li::before {
  display: none;
}

/* tool tip */
.reveal .quiz ul li ul li {
  display: block;
  visibility: hidden;
  max-width: 95%;
  top: 100%;
  left: 5px;
  background-color: grey;
  color: #ffffff;
  text-align: center;
  margin: 5px;
  padding: 5px;
  border-radius: 6px;
  border: none;
  position: absolute;
  z-index: 1;
  font-size: 1rem;
}

/* once clicked, wrong answers are red */
.reveal .quiz ul li.wrong {
  --quiz-background-color: var(--red-background-color);
  --quiz-border-color: var(--red-border-color);
  --quiz-icon: "\f00d";
}

/* once clicked, correct answers are green */
.reveal .quiz ul li.right {
  --quiz-background-color: var(--green-background-color);
  --quiz-border-color: var(--green-border-color);
  --quiz-icon: "\f00c";
}

.reveal .quiz ul li.show-answer {
  background-color: var(--quiz-background-color);
  border-color: var(--quiz-border-color);
}
.reveal .quiz ul li.show-answer::after {
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  font-weight: 900;
  font-family: "Font Awesome 7 Free";
  content: var(--quiz-icon);
  position: absolute;
  font-size: 15px;
  right: 0.2em;
  bottom: -0.1em;
  padding: 0.1em;
  color: var(--quiz-border-color);
}

/* tool tips are shown on hover */
.reveal .show-answer:hover ul li {
  visibility: visible;
}

/*********************************************
   * MARIO: override quiz-wue settings
   *********************************************/

.reveal [class*="quiz-"] button {
  font: inherit;
  font-size: 0.9em;
  margin: 0.5em;
  padding: 0.5em;
  color: var(--shade6);
  background: var(--shade1);
  border: 2px solid var(--icon-active-color);
  border-radius: 0.5em;
}

.reveal .quiz-ft button {
  display: none;
}

.reveal .quiz-ft input {
  font: inherit;
  font-size: 0.8em;
  margin: 0.5em;
  padding: 10px;
  border: 2px solid var(--emphColor);
  color: var(--shade6);
  background-color: var(--shade1);
  outline: none;
}

.reveal .qft-solutions,
.reveal .qft-solutions.solved {
  display: none;
}

.reveal .quiz-ic select {
  font: inherit;
  font-size: 0.9em;
  font-weight: normal;
  padding: 5px;
  border: 2px solid var(--emphColor);
  color: var(--shade6);
  background-color: var(--shade1);
  outline: none;
}

.reveal .quiz-ic option {
  font: inherit;
  font-size: inherit;
  font-weight: normal;
}

.reveal .quiz-mi .buckets,
.reveal .quiz-mi .matchItems {
  border: 2px solid var(--shade3);
  padding: 15px 10px;
}

.reveal .quiz-mi .buckets {
  margin-bottom: 20px;
  margin-top: 60px;
}

.reveal .quiz-mi .buckets:before,
.reveal .quiz-mi .matchItems:before {
  position: absolute;
  top: -15px;
  left: 10px;
  font-size: 15px;
  background-color: var(--shade0);
  padding: 5px;
  color: var(--shade3);
}

.reveal .quiz-mi .matchItems:before {
  content: "Drag objects from here...";
}

.reveal .quiz-mi .buckets:before {
  content: "...and drop them here into the correct category";
}

:lang(de) .reveal .quiz-mi .matchItems:before {
  content: "Objekte per Drag & Drop nach unten ziehen...";
}

:lang(de) .reveal .quiz-mi .buckets:before {
  content: "...und hier in die richtige Kategorie einsortieren";
}

.reveal .quiz-mi .matchItems:after {
  position: absolute;
  bottom: -30px;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 30px solid var(--shade3);
}

.reveal .quiz-mi .bucket {
  display: flex;
  flex-direction: column;
  padding: 10px;
  margin: 5px;
  border: 1px solid var(--shade3);
}

.reveal .quiz-mi .matchItem {
  display: block;
  overflow: hidden;
  border: 2px solid var(--icon-active-color);
  border-radius: 10px;
  padding: 10px;
  cursor: grab;
  margin: auto;
  background-color: var(--shade1);
}

.reveal [class*="quiz-"] .show-right {
  background-color: var(--green-background-color);
  border-color: var(--green-border-color);
}

.reveal [class*="quiz"] .show-wrong {
  background-color: var(--red-background-color);
  border-color: var(--red-border-color);
}

/*********************************************
   * quiz polling
   *********************************************/

.reveal-viewport:not(.poll) .poll-only {
  display: none;
}

#poll-chart {
  font-size: var(--icon-size);
  position: absolute;
  left: auto;
  top: auto;
  right: 0.5em;
  bottom: 0.5em;
  visibility: hidden;
  z-index: 34;
  width: 420px;
  height: 320px;
  margin: auto;
  padding: 0.5em;
  text-align: center;
  border: 3px solid var(--emphColor);
  border-radius: 0.5em;
  background-color: var(--shade0);
  transform-origin: bottom right;
  box-shadow: 3px 5px 5px var(--shade3);
}

#poll-chart.canvas {
  top: 0;
  left: 0;
  width: 400px;
  height: 300px;
}

#poll-votes {
  font-size: var(--icon-size);
  color: var(--icon-inactive-color);
  text-align: center;
  display: none;
}

#qrcode-container {
  display: none;
  z-index: 4000;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
}
#qrcode-container.show {
  display: flex;
}

#qrcode-canvas {
  height: 66vh;
  min-height: 0;
  aspect-ratio: 1 / 1;
  background-color: white;
  padding: 0.5em;
  border-radius: 0.25em;
}
#qrcode-canvas.smaller {
  height: 33vh;
}

#qrcode-link {
  display: block;
  font-size: 2rem;
  font-weight: bold;
  padding: 0.5em;
  border-radius: 0.25em;
  background-color: var(--background-color);
}

#close-qr-button {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 4001;
  background-color: var(--background-color);
  border-radius: 100%;
  color: var(--icon-inactive-color);
}
#close-qr-button:hover {
  color: var(--icon-active-color);
}

/*********************************************
* special rules for dark mode
*********************************************/

@media (prefers-color-scheme: dark) {
  .media figure > img {
    background-color: var(--shade7);
  }
}
html.dark .media figure > img {
  background-color: var(--shade7);
}

/*********************************************
* block fixes
*********************************************/

div.block {
  margin: 0;
  padding: 0;
  border: none;
}

div.block > *:first-child {
  margin-top: 0;
}
div.block > *:last-child {
  margin-bottom: 0;
}