input,
button,
textarea {
  outline: none;
  border: none;
  background-image: none;
  background-color: transparent;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  appearance: none;
  font-size: inherit;
  font-family: "Noto Sans", sans-serif;
  padding: 0;
}
input:not(.wordwheel-option),
button:not(.wordwheel-option),
textarea:not(.wordwheel-option) {
  resize: vertical;
}

*,
*::after,
*::before {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  height: 100%;
  min-width: 360px;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

html {
  font-size: 62.5%;
}

#app {
  font-family: "Noto Sans", sans-serif;
  font-size: 1.5rem;
  line-height: 1.5;
  color: #333333;
  background: #E8EBEC;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  min-height: 100%;
  height: 100%;
}
#app > .mainContainer {
  min-height: 100%;
  height: 100%;
}

@media (hover: hover) and (pointer: fine) {
  *:focus {
    -webkit-box-shadow: 0px 0px 0px 1px #fff, 0px 0px 0px 3px #333333;
    -moz-box-shadow: 0px 0px 0px 1px #fff, 0px 0px 0px 3px #333333;
    box-shadow: 0px 0px 0px 1px #fff, 0px 0px 0px 3px #333333;
    outline: none;
  }
}
@media (hover: hover), screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  *:focus {
    -webkit-box-shadow: 0px 0px 0px 1px #fff, 0px 0px 0px 3px #333333;
    -moz-box-shadow: 0px 0px 0px 1px #fff, 0px 0px 0px 3px #333333;
    box-shadow: 0px 0px 0px 1px #fff, 0px 0px 0px 3px #333333;
    outline: none;
  }
}

.mainScrollcontainer {
  display: flex;
  flex-direction: column;
  height: calc(100% - 50px);
  overflow: auto;
}

@media screen and (min-width: 500px) {
  .mainScrollcontainer {
    height: calc(100% - 55px);
  }
}
button:not(.noButtonStyling).sekundaer {
  background: white;
  border: 2px solid var(--corporateColor);
  color: var(--corporateColor);
}

button:not(.noButtonStyling),
.button:not(.noButtonStyling),
.page-size {
  display: inline-block;
  font-size: inherit;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  padding: 0.4em 0.9em;
  color: #ffffff;
  background: var(--corporateColor);
  border: 2px solid var(--corporateColor);
  border-radius: 4px;
}
button:not(.noButtonStyling).hilfetext, button:not(.noButtonStyling)#open-wartung-info,
.button:not(.noButtonStyling).hilfetext,
.button:not(.noButtonStyling)#open-wartung-info,
.page-size.hilfetext,
.page-size#open-wartung-info {
  padding: 0;
  background: none;
  border: none;
  color: var(--corporateColor);
}
button:not(.noButtonStyling).hilfetext i, button:not(.noButtonStyling)#open-wartung-info i,
.button:not(.noButtonStyling).hilfetext i,
.button:not(.noButtonStyling)#open-wartung-info i,
.page-size.hilfetext i,
.page-size#open-wartung-info i {
  margin-left: 0.5rem;
}
button:not(.noButtonStyling):hover,
.button:not(.noButtonStyling):hover,
.page-size:hover {
  cursor: pointer;
}
button:not(.noButtonStyling):disabled, button:not(.noButtonStyling).deactivated, button:not(.noButtonStyling)[disabled],
.button:not(.noButtonStyling):disabled,
.button:not(.noButtonStyling).deactivated,
.button:not(.noButtonStyling)[disabled],
.page-size:disabled,
.page-size.deactivated,
.page-size[disabled] {
  background: #666B6E;
  border-color: #666B6E;
  pointer-events: none;
}
button:not(.noButtonStyling).skipQuestion, button:not(.noButtonStyling).inverted,
.button:not(.noButtonStyling).skipQuestion,
.button:not(.noButtonStyling).inverted,
.page-size.skipQuestion,
.page-size.inverted {
  color: var(--corporateColor);
  border-color: #fff;
  background: #fff;
}
button:not(.noButtonStyling).skipQuestion:disabled, button:not(.noButtonStyling).skipQuestion.deactivated, button:not(.noButtonStyling).skipQuestion[disabled], button:not(.noButtonStyling).inverted:disabled, button:not(.noButtonStyling).inverted.deactivated, button:not(.noButtonStyling).inverted[disabled],
.button:not(.noButtonStyling).skipQuestion:disabled,
.button:not(.noButtonStyling).skipQuestion.deactivated,
.button:not(.noButtonStyling).skipQuestion[disabled],
.button:not(.noButtonStyling).inverted:disabled,
.button:not(.noButtonStyling).inverted.deactivated,
.button:not(.noButtonStyling).inverted[disabled],
.page-size.skipQuestion:disabled,
.page-size.skipQuestion.deactivated,
.page-size.skipQuestion[disabled],
.page-size.inverted:disabled,
.page-size.inverted.deactivated,
.page-size.inverted[disabled] {
  color: #666B6E;
  border-color: #666B6E;
  pointer-events: none;
}
button:not(.noButtonStyling).overviewLink,
.button:not(.noButtonStyling).overviewLink,
.page-size.overviewLink {
  background: transparent;
  border-color: transparent;
  padding: 0;
}
button:not(.noButtonStyling).button-dark,
.button:not(.noButtonStyling).button-dark,
.page-size.button-dark {
  background: #333333;
  border-color: #333333;
}
button:not(.noButtonStyling).korrekt,
.button:not(.noButtonStyling).korrekt,
.page-size.korrekt {
  background-color: #58a027;
  border-color: #58a027;
}
button:not(.noButtonStyling).korrekt::after,
.button:not(.noButtonStyling).korrekt::after,
.page-size.korrekt::after {
  content: "\f058";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: #fff;
  padding-left: 0.4em;
}
button:not(.noButtonStyling).falsch,
.button:not(.noButtonStyling).falsch,
.page-size.falsch {
  background-color: #e4002b;
  border-color: #e4002b;
}
button:not(.noButtonStyling).falsch::after,
.button:not(.noButtonStyling).falsch::after,
.page-size.falsch::after {
  content: "\f057";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: #fff;
  padding-left: 0.4em;
}
button:not(.noButtonStyling).width100,
.button:not(.noButtonStyling).width100,
.page-size.width100 {
  width: 100%;
}

.kontrastversion button:not(.noButtonStyling),
.kontrastversion .button:not(.noButtonStyling) {
  border: 2px solid #53585A;
  background: #53585A;
  font-weight: 700;
}
.kontrastversion button:not(.noButtonStyling):disabled, .kontrastversion button:not(.noButtonStyling).deactivated, .kontrastversion button:not(.noButtonStyling)[disabled],
.kontrastversion .button:not(.noButtonStyling):disabled,
.kontrastversion .button:not(.noButtonStyling).deactivated,
.kontrastversion .button:not(.noButtonStyling)[disabled] {
  color: #333333;
  background: #fff;
  border: 1px solid #53585A;
}
.kontrastversion button:not(.noButtonStyling).skipQuestion, .kontrastversion button:not(.noButtonStyling).inverted,
.kontrastversion .button:not(.noButtonStyling).skipQuestion,
.kontrastversion .button:not(.noButtonStyling).inverted {
  color: #333333;
  background: white;
  border: 2px solid #333333;
}
.kontrastversion button:not(.noButtonStyling).skipQuestion:disabled, .kontrastversion button:not(.noButtonStyling).skipQuestion.deactivated, .kontrastversion button:not(.noButtonStyling).skipQuestion[disabled], .kontrastversion button:not(.noButtonStyling).inverted:disabled, .kontrastversion button:not(.noButtonStyling).inverted.deactivated, .kontrastversion button:not(.noButtonStyling).inverted[disabled],
.kontrastversion .button:not(.noButtonStyling).skipQuestion:disabled,
.kontrastversion .button:not(.noButtonStyling).skipQuestion.deactivated,
.kontrastversion .button:not(.noButtonStyling).skipQuestion[disabled],
.kontrastversion .button:not(.noButtonStyling).inverted:disabled,
.kontrastversion .button:not(.noButtonStyling).inverted.deactivated,
.kontrastversion .button:not(.noButtonStyling).inverted[disabled] {
  color: #333333;
  border: 2px solid #53585A;
}
.kontrastversion button:not(.noButtonStyling).overviewLink,
.kontrastversion .button:not(.noButtonStyling).overviewLink {
  color: #333333;
  background: transparent;
  border-color: transparent;
}
.kontrastversion button:not(.noButtonStyling).button-dark,
.kontrastversion .button:not(.noButtonStyling).button-dark {
  background: #333333;
  border-color: #333333;
}
.kontrastversion button:not(.noButtonStyling).korrekt,
.kontrastversion .button:not(.noButtonStyling).korrekt {
  background-color: #366218;
  border-color: #366218;
}
.kontrastversion button:not(.noButtonStyling).falsch,
.kontrastversion .button:not(.noButtonStyling).falsch {
  background-color: #B30022;
  border-color: #B30022;
}
.kontrastversion button:not(.noButtonStyling).hilfetext,
.kontrastversion .button:not(.noButtonStyling).hilfetext {
  color: #333333;
  background: none;
  border: none;
}
.kontrastversion button:not(.noButtonStyling).sekundaer,
.kontrastversion .button:not(.noButtonStyling).sekundaer {
  background: white;
  border: 2px solid #53585A;
  color: #53585A;
}

button.noButtonStyling:hover {
  cursor: pointer;
}

.mainHeader {
  position: relative;
  padding: 12px 0;
  height: 50px;
  background: #fff;
  border-bottom: 1px solid #E8EBEC;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  z-index: 2;
}
.mainHeader .mainHeaderContent {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: space-between;
}
.mainHeader .mainHeaderContent .mainHeaderMenus {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}
.mainHeader .mainHeaderContent .mainHeaderMenus nav .menuLabel {
  display: none;
}
.mainHeader .mainHeaderContent .mainHeaderMenus #userNav {
  margin-right: 15px;
}
.mainHeader .mainHeaderContent .mainHeaderMenus #userNav aside button {
  width: 100%;
}
.mainHeader .mainHeaderContent .mainHeaderMenus #userNav aside button:not(:last-child) {
  margin-bottom: 10px;
}
.mainHeader .mainHeaderContent .mainHeaderMenus .menuLabel {
  margin-right: 5px;
}
.mainHeader .mainHeaderContent .mainLogo, .mainHeader .mainHeaderContent img {
  height: 100%;
  width: auto;
}
.mainHeader .mainHeaderContent .spinner .fa-spinner {
  font-size: 3rem;
}
.mainHeader .mainHeaderContent .shibbolethLoginContainer i, .mainHeader .mainHeaderContent .personalContainer i {
  margin-right: 5px;
}

@media screen and (min-width: 500px) {
  .mainHeader {
    padding: 15px 0 10px 0;
    height: 55px;
  }
  .mainHeader .mainHeaderContent .mainHeaderMenus nav .menuLabel {
    display: inline;
  }
}
.maintenanceInfo {
  color: #ffffff;
  font-weight: 600;
  background: #333333;
  text-align: center;
  font-size: 0.8em;
  padding: 6px;
  vertical-align: middle;
  position: sticky;
  top: 0;
  z-index: 1;
}
.maintenanceInfo i {
  position: relative;
  margin-left: 5px;
  color: white;
  font-size: 1.5rem;
  top: 1px;
  cursor: pointer;
}

.mainHeader #settingsNav button.toggle-menu-active, .mainHeader #userNav button.toggle-menu-active {
  background: #fff;
  border-color: #fff;
  color: #333333;
}
.mainHeader #settingsNav aside.menu-container, .mainHeader #userNav aside.menu-container {
  display: none;
}
.mainHeader #settingsNav aside.menu-container .menu-group:not(:last-child), .mainHeader #userNav aside.menu-container .menu-group:not(:last-child) {
  margin-bottom: 15px;
}
.mainHeader #settingsNav aside.menu-container .menu-group .logged-in-user-info, .mainHeader #userNav aside.menu-container .menu-group .logged-in-user-info {
  margin-bottom: 10px;
}
.mainHeader #settingsNav aside.menu-container .menu-group .menu-group-label, .mainHeader #userNav aside.menu-container .menu-group .menu-group-label {
  display: block;
  font-size: 1.4rem;
  margin-bottom: 0.3em;
  color: var(--corporateColor);
}
.mainHeader #settingsNav aside.menu-container .menu-group ul.menu-list, .mainHeader #userNav aside.menu-container .menu-group ul.menu-list {
  margin: 0;
  padding: 0;
}
.mainHeader #settingsNav aside.menu-container .menu-group .menu-item, .mainHeader #userNav aside.menu-container .menu-group .menu-item {
  display: block;
  background: rgba(232, 235, 236, 0.5);
  padding: 10px 15px;
}
.mainHeader #settingsNav aside.menu-container .menu-group .menu-item:first-child, .mainHeader #userNav aside.menu-container .menu-group .menu-item:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.mainHeader #settingsNav aside.menu-container .menu-group .menu-item:last-child, .mainHeader #userNav aside.menu-container .menu-group .menu-item:last-child {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.mainHeader #settingsNav aside.menu-container .menu-group .menu-item:not(:last-child), .mainHeader #userNav aside.menu-container .menu-group .menu-item:not(:last-child) {
  margin-bottom: 2px;
}
.mainHeader #settingsNav aside.menu-container .menu-group .menu-item .checkboxContainer,
.mainHeader #settingsNav aside.menu-container .menu-group .menu-item .radioContainer, .mainHeader #userNav aside.menu-container .menu-group .menu-item .checkboxContainer,
.mainHeader #userNav aside.menu-container .menu-group .menu-item .radioContainer {
  margin-bottom: 0;
}
.mainHeader #settingsNav aside.menu-container .menu-group .menu-item .checkboxContainer label,
.mainHeader #settingsNav aside.menu-container .menu-group .menu-item .radioContainer label, .mainHeader #userNav aside.menu-container .menu-group .menu-item .checkboxContainer label,
.mainHeader #userNav aside.menu-container .menu-group .menu-item .radioContainer label {
  display: block;
}
.mainHeader #settingsNav.menu-active button.toggle-menu-active, .mainHeader #userNav.menu-active button.toggle-menu-active {
  background: var(--corporateColor);
  border-color: var(--corporateColor);
  color: #fff;
}
.mainHeader #settingsNav.menu-active aside.menu-container, .mainHeader #userNav.menu-active aside.menu-container {
  display: block;
  width: 220px;
  padding: 20px;
  background: #fff;
  border-top: 1px solid #E8EBEC;
  border-radius: 4px;
  -webkit-box-shadow: 0 9px 15px rgba(0, 0, 0, 0.2);
  box-shadow: 0 9px 15px rgba(0, 0, 0, 0.2);
  position: fixed;
  z-index: 1;
  top: 50px;
  max-height: calc(100vh - 50px);
  right: 0;
  overflow: auto;
}
@media (hover: hover) and (pointer: fine) {
  .mainHeader #settingsNav.menu-active aside.menu-container .checkboxContainer input:focus ~ .checkmark, .mainHeader #userNav.menu-active aside.menu-container .checkboxContainer input:focus ~ .checkmark {
    -webkit-box-shadow: 0px 0px 0px 1px #fff, 0px 0px 0px 3px #333333;
    -moz-box-shadow: 0px 0px 0px 1px #fff, 0px 0px 0px 3px #333333;
    box-shadow: 0px 0px 0px 1px #fff, 0px 0px 0px 3px #333333;
    outline: none;
  }
}
@media (hover: hover), screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .mainHeader #settingsNav.menu-active aside.menu-container .checkboxContainer input:focus ~ .checkmark, .mainHeader #userNav.menu-active aside.menu-container .checkboxContainer input:focus ~ .checkmark {
    -webkit-box-shadow: 0px 0px 0px 1px #fff, 0px 0px 0px 3px #333333;
    -moz-box-shadow: 0px 0px 0px 1px #fff, 0px 0px 0px 3px #333333;
    box-shadow: 0px 0px 0px 1px #fff, 0px 0px 0px 3px #333333;
    outline: none;
  }
}
@media (hover: hover) and (pointer: fine) {
  .mainHeader #settingsNav.menu-active aside.menu-container .radioContainer input:focus ~ .checkmarkRadio, .mainHeader #userNav.menu-active aside.menu-container .radioContainer input:focus ~ .checkmarkRadio {
    -webkit-box-shadow: 0px 0px 0px 1px #fff, 0px 0px 0px 3px #333333;
    -moz-box-shadow: 0px 0px 0px 1px #fff, 0px 0px 0px 3px #333333;
    box-shadow: 0px 0px 0px 1px #fff, 0px 0px 0px 3px #333333;
    outline: none;
  }
}
@media (hover: hover), screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .mainHeader #settingsNav.menu-active aside.menu-container .radioContainer input:focus ~ .checkmarkRadio, .mainHeader #userNav.menu-active aside.menu-container .radioContainer input:focus ~ .checkmarkRadio {
    -webkit-box-shadow: 0px 0px 0px 1px #fff, 0px 0px 0px 3px #333333;
    -moz-box-shadow: 0px 0px 0px 1px #fff, 0px 0px 0px 3px #333333;
    box-shadow: 0px 0px 0px 1px #fff, 0px 0px 0px 3px #333333;
    outline: none;
  }
}

@media screen and (min-width: 500px) {
  .mainHeader #settingsNav.menu-active aside.menu-container, .mainHeader #userNav.menu-active aside.menu-container {
    top: 55px;
    max-height: calc(100vh - 55px);
  }
}
@media screen and (min-width: 800px) {
  .mainHeader #settingsNav.menu-active aside.menu-container, .mainHeader #userNav.menu-active aside.menu-container {
    right: calc((100% - 800px) / 2);
  }
}
.kontrastversion .mainHeader #settingsNav.menu-active button.toggle-menu-active,
.kontrastversion .mainHeader #userNav.menu-active button.toggle-menu-active {
  background: #53585A;
  border-color: #53585A;
  color: #fff;
}
.kontrastversion .mainHeader #settingsNav button.toggle-menu-active,
.kontrastversion .mainHeader #userNav button.toggle-menu-active {
  background: transparent;
  border-color: transparent;
  color: #53585A;
}
.kontrastversion .mainHeader #settingsNav aside.menu-container .menu-group .menu-group-label,
.kontrastversion .mainHeader #userNav aside.menu-container .menu-group .menu-group-label {
  color: #53585A;
}

.contentWidth {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 10px;
}

main {
  padding: 10px 0;
  flex: 1;
}

@media screen and (min-width: 500px) {
  .contentWidth {
    padding: 0 20px;
  }
  main {
    padding: 20px 0;
  }
}
.mainFooter {
  color: #ffffff;
  background-color: #666B6E;
  padding: 15px 0 15px 0;
}
.mainFooter .contentWidth {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-direction: row;
}
.mainFooter .contentWidth img.kwaestioLogo {
  margin-right: 0.5em;
  height: 28px;
  width: auto;
}
.mainFooter .contentWidth .footerLinks ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}
.mainFooter .contentWidth .footerLinks ul li:not(:last-child) {
  margin-right: 0.7em;
}
.mainFooter .contentWidth .footerLinks ul li a {
  color: white;
  text-decoration: none;
}
.mainFooter .contentWidth .footerLinks ul li a:hover {
  text-decoration: underline;
}

@media screen and (max-width: 500px) {
  .mainFooter .contentWidth {
    align-items: center;
    flex-direction: column;
  }
  .mainFooter .contentWidth .footerLinks {
    margin-top: 5px;
  }
  .mainFooter .contentWidth .footerLinks li {
    margin-right: 0em;
  }
}
.kontrastversion .mainFooter {
  background-color: #53585A;
}

@keyframes delay-opacity {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
    background: rgba(0, 0, 0, 0.3);
  }
}
.spinnerOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999;
  opacity: 0;
  animation-name: delay-opacity;
  animation-delay: 500ms;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.spinnerOverlay.show {
  opacity: 1;
}
.spinnerOverlay .content {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.spinnerOverlay .content i {
  font-size: 12rem;
  color: var(--corporateColor);
}

.spinner i {
  color: var(--corporateColor);
}

section.error h1 i {
  margin-right: 15px;
}

header.frageHeader {
  display: table;
  width: 100%;
  margin-bottom: 10px;
}
header.frageHeader ul.frageInfo {
  display: table-row;
}
header.frageHeader ul.frageInfo li {
  display: table-cell;
}
header.frageHeader ul.frageInfo li:last-child {
  text-align: right;
}
header.frageHeader ul.frageInfo .progressInfo {
  font-weight: bold;
}
header.frageHeader ul.frageInfo .dt-button {
  margin: 0;
}

section.frage {
  padding: 15px;
  background: #ffffff;
  border-radius: 4px;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  position: relative;
}
@media (hover: hover) and (pointer: fine) {
  section.frage a:has(img):focus {
    border: none !important;
    box-shadow: none;
    web-kit-box-shadow: none;
  }
  section.frage a:has(img):focus img {
    -webkit-box-shadow: 0px 0px 0px 2px #333333 inset;
    -moz-box-shadow: 0px 0px 0px 2px #333333 inset;
    box-shadow: 0px 0px 0px 2px #333333 inset;
    outline: none;
  }
  section.frage a:has(img):focus img.highlighted {
    -webkit-box-shadow: 0px 0px 0px 2px #e4002b inset;
    -moz-box-shadow: 0px 0px 0px 2px #e4002b inset;
    box-shadow: 0px 0px 0px 2px #e4002b inset;
  }
}
@media (hover: hover), screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  section.frage a:has(img):focus {
    border: none !important;
    box-shadow: none;
    web-kit-box-shadow: none;
  }
  section.frage a:has(img):focus img {
    -webkit-box-shadow: 0px 0px 0px 2px #333333 inset;
    -moz-box-shadow: 0px 0px 0px 2px #333333 inset;
    box-shadow: 0px 0px 0px 2px #333333 inset;
    outline: none;
  }
  section.frage a:has(img):focus img.highlighted {
    -webkit-box-shadow: 0px 0px 0px 2px #e4002b inset;
    -moz-box-shadow: 0px 0px 0px 2px #e4002b inset;
    box-shadow: 0px 0px 0px 2px #e4002b inset;
  }
}
section.frage div.passInfo {
  background: rgba(232, 235, 236, 0.3);
  border: 1px solid #E8EBEC;
  border-radius: 2px;
  padding: 0.8em 1em;
  margin: 15px 0 0 0;
  font-family: "Noto Sans", sans-serif;
}
section.frage .frageDescription {
  margin: 10px 0;
}
section.frage .frageDescription .taskLabel {
  color: var(--corporateColor);
}
section.frage .frageBase,
section.frage .frageTask {
  display: block;
  width: 100%;
  background: rgba(232, 235, 236, 0.3);
  border: 1px solid #E8EBEC;
  border-radius: 4px;
  padding: 0.7em 0.8em;
  margin: 0.8em 0 0 0;
  font-family: "Noto Sans", sans-serif;
  line-height: 1.5;
  min-height: 46px;
}
section.frage .multitext {
  margin-top: 20px;
}
section.frage .multitext:first-child {
  margin-top: 0;
}
section.frage .multitext p:first-child {
  margin-top: 0;
}
section.frage .multitext p:last-child {
  margin-bottom: 0;
}
section.frage .frageTask.korrekt > span {
  color: #58a027;
  text-decoration: none;
}
section.frage .frageTask.korrekt > span::after {
  content: "\f058";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: #58a027;
  padding-left: 0.3em;
}
section.frage .frageTask.falsch > span {
  color: #e4002b;
  text-decoration: line-through;
}
section.frage .frageTask.falsch > span::after {
  content: "\f057";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: #e4002b;
  padding-left: 0.3em;
}
section.frage input[type=text] {
  border: 1px solid #666B6E;
  background-color: #fff;
  margin: 0 0.5em;
  padding: 0.5em 0.7em;
  min-width: 100px;
}
section.frage input[type=text].highlighted {
  border: 1px solid #e4002b;
}
section.frage span.dt-select.highlighted button.select-button {
  border: 1px solid #e4002b;
}
section.frage .frageSubmit.inline {
  display: inline-block;
  margin-right: 1rem;
}
section.frage .frageSubmit.inline:last-child {
  margin-right: 0;
}
section.frage button.submitButton {
  width: 100%;
}
section.frage .frageSelfFeedback {
  margin: 20px 0 0 0;
}
section.frage .frageSelfFeedback h3 {
  font-size: 1.6rem;
  font-weight: bold;
  color: #333333;
}
section.frage .frageSelfFeedback ul {
  display: flex;
  flex-direction: row;
  margin-top: 10px;
}
section.frage .frageSelfFeedback ul li:first-child button {
  margin-right: 15px;
}
section.frage .frageSelfFeedback ul li button {
  min-width: 90px;
}
section.frage .meta {
  font-size: 0.6em;
  line-height: 0.6em;
  position: absolute;
  bottom: 6px;
  right: 15px;
}

footer.frageNavigation.startseite li {
  width: 100%;
}
footer.frageNavigation ul {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 10px;
}
footer.frageNavigation ul li {
  width: calc(50% - 5px);
}
footer.frageNavigation ul li button {
  width: 100%;
}

#frage-feedback-modal {
  overflow: auto;
  max-width: 760px;
  left: -51%;
}
#frage-feedback-modal section.frage {
  box-shadow: none;
}
#frage-feedback-modal .checkboxContainer {
  display: inline;
  margin-right: 1.5rem;
}

#frage-feedback-modal-content {
  padding: 0;
}
#frage-feedback-modal-content .frage-feedback-content-block {
  display: inline-block;
  margin-top: 0.8em;
}

.kontrastversion section.frage div.passInfo {
  background: #fff;
}
.kontrastversion section.frage .frageBase,
.kontrastversion section.frage .frageTask {
  background: #fff;
}
.kontrastversion section.frage .frageDescription .taskLabel {
  color: #333333;
}
.kontrastversion section.frage input[type=text] {
  border: 1px solid #53585A;
}
.kontrastversion section.frage input[type=text].highlighted {
  border: 1px solid #e4002b;
}

@media screen and (min-width: 500px) {
  header.frageHeader {
    margin-bottom: 15px;
  }
  section.frage {
    padding: 25px;
  }
  section.frage div.passInfo {
    margin: 20px 0 0 0;
  }
  section.frage .frageBase,
  section.frage .frageTask {
    padding: 0.8em 1em;
  }
  section.frage button.submitButton {
    width: auto;
  }
  section.frage .meta {
    font-size: 0.6em;
    line-height: 0.6em;
    position: absolute;
    bottom: 10px;
    right: 25px;
  }
  footer.frageNavigation.startseite ul {
    justify-content: flex-end;
  }
  footer.frageNavigation.startseite ul li {
    width: calc(50% - 10px);
  }
  footer.frageNavigation ul {
    margin-top: 20px;
  }
  footer.frageNavigation ul li {
    width: calc(50% - 10px);
  }
}
.exampleAntwort .rich-paragraph {
  margin: 0em;
}
.exampleAntwort .rich-paragraph:first-of-type {
  margin-top: 0;
}
.exampleAntwort .rich-paragraph:last-of-type {
  margin-bottom: 0;
}

.dt-input {
  display: inline-block;
}

span.luecke input[type=text], span.luecke .select-button, span.lueckenauswahl input[type=text], span.lueckenauswahl .select-button {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  position: relative;
  font-size: 1.5rem;
  padding: 0.1em 0.4em;
  margin: 0.1em 0;
  height: 2.6rem;
  border-radius: 2px;
  background: #fff;
  -webkit-transition: width 0.2s;
  -moz-transition: width 0.2s;
  -o-transition: width 0.2s;
  transition: width 0.2s;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
  -webkit-box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
  span.luecke input[type=text]:focus, span.luecke .select-button:focus, span.lueckenauswahl input[type=text]:focus, span.lueckenauswahl .select-button:focus {
    -webkit-box-shadow: 0px 0px 0px 2px #333333 inset;
    -moz-box-shadow: 0px 0px 0px 2px #333333 inset;
    box-shadow: 0px 0px 0px 2px #333333 inset;
    outline: none;
    border-color: transparent !important;
  }
  span.luecke input[type=text]:focus.highlighted, span.luecke .select-button:focus.highlighted, span.lueckenauswahl input[type=text]:focus.highlighted, span.lueckenauswahl .select-button:focus.highlighted {
    -webkit-box-shadow: 0px 0px 0px 2px #e4002b inset;
    -moz-box-shadow: 0px 0px 0px 2px #e4002b inset;
    box-shadow: 0px 0px 0px 2px #e4002b inset;
  }
}
@media (hover: hover), screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  span.luecke input[type=text]:focus, span.luecke .select-button:focus, span.lueckenauswahl input[type=text]:focus, span.lueckenauswahl .select-button:focus {
    -webkit-box-shadow: 0px 0px 0px 2px #333333 inset;
    -moz-box-shadow: 0px 0px 0px 2px #333333 inset;
    box-shadow: 0px 0px 0px 2px #333333 inset;
    outline: none;
    border-color: transparent !important;
  }
  span.luecke input[type=text]:focus.highlighted, span.luecke .select-button:focus.highlighted, span.lueckenauswahl input[type=text]:focus.highlighted, span.lueckenauswahl .select-button:focus.highlighted {
    -webkit-box-shadow: 0px 0px 0px 2px #e4002b inset;
    -moz-box-shadow: 0px 0px 0px 2px #e4002b inset;
    box-shadow: 0px 0px 0px 2px #e4002b inset;
  }
}
span.luecke input[type=text].highlighted, span.luecke .select-button.highlighted, span.lueckenauswahl input[type=text].highlighted, span.lueckenauswahl .select-button.highlighted {
  border: 1px solid #e4002b;
}
span.luecke .dropdown, span.lueckenauswahl .dropdown {
  z-index: 1;
}
span.luecke.small input, span.lueckenauswahl.small input {
  width: 100px;
}
span.luecke.medium input, span.lueckenauswahl.medium input {
  width: 150px;
}
span.luecke.large input, span.lueckenauswahl.large input {
  width: 250px;
}

.lueckenabsatz {
  line-height: 1.6;
}
.lueckenabsatz span.lueckenauswahl, .lueckenabsatz span.luecke, .lueckenabsatz span.text, .lueckenabsatz i, .lueckenabsatz strong, .lueckenabsatz a, .lueckenabsatz sub, .lueckenabsatz sup {
  margin-right: 0.3em;
}
.lueckenabsatz span.text, .lueckenabsatz i, .lueckenabsatz strong, .lueckenabsatz a, .lueckenabsatz sup, .lueckenabsatz sub {
  margin-left: -0.3em;
}
.lueckenabsatz .dt-select sup, .lueckenabsatz .dt-select sub {
  margin-left: 0;
}
.lueckenabsatz span.luecke + span.text,
.lueckenabsatz span.luecke + i,
.lueckenabsatz span.luecke + strong,
.lueckenabsatz span.luecke + a,
.lueckenabsatz span.luecke + sub,
.lueckenabsatz span.luecke + sup,
.lueckenabsatz span.lueckenauswahl + span.text,
.lueckenabsatz span.lueckenauswahl + i,
.lueckenabsatz span.lueckenauswahl + strong,
.lueckenabsatz span.lueckenauswahl + a,
.lueckenabsatz span.lueckenauswahl + sub,
.lueckenabsatz span.lueckenauswahl + sup,
.lueckenabsatz br + span.text,
.lueckenabsatz br + i,
.lueckenabsatz br + strong,
.lueckenabsatz br + a,
.lueckenabsatz br + sub,
.lueckenabsatz br + sup,
.lueckenabsatz span:first-child {
  margin-left: 0;
}
.lueckenabsatz span:last-child {
  margin-right: 0;
}

.lueckenfrageResult {
  margin-left: 0;
  padding-bottom: 0;
  border-bottom: 1px solid #53585A;
  background: transparent;
}
.lueckenfrageResult span {
  margin-right: 10px;
}
.lueckenfrageResult .korrekt {
  color: #58a027;
  text-decoration: none;
}
.lueckenfrageResult .korrekt::after {
  content: "\f058";
  display: inline-block;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: #58a027;
  padding-left: 0.3em;
}
.lueckenfrageResult .falsch {
  color: #e4002b;
  text-decoration: line-through;
}
.lueckenfrageResult .falsch::after {
  content: "\f057";
  display: inline-block;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: #e4002b;
  padding-left: 0.3em;
}

@media (hover: hover) and (pointer: fine) {
  .kontrastversion .luecke input:focus {
    -webkit-box-shadow: 0px 0px 0px 2px #333333 inset;
    -moz-box-shadow: 0px 0px 0px 2px #333333 inset;
    box-shadow: 0px 0px 0px 2px #333333 inset;
    outline: none;
    border-color: transparent !important;
  }
  .kontrastversion .luecke input:focus.highlighted {
    -webkit-box-shadow: 0px 0px 0px 2px #e4002b inset;
    -moz-box-shadow: 0px 0px 0px 2px #e4002b inset;
    box-shadow: 0px 0px 0px 2px #e4002b inset;
  }
}
@media (hover: hover), screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .kontrastversion .luecke input:focus {
    -webkit-box-shadow: 0px 0px 0px 2px #333333 inset;
    -moz-box-shadow: 0px 0px 0px 2px #333333 inset;
    box-shadow: 0px 0px 0px 2px #333333 inset;
    outline: none;
    border-color: transparent !important;
  }
  .kontrastversion .luecke input:focus.highlighted {
    -webkit-box-shadow: 0px 0px 0px 2px #e4002b inset;
    -moz-box-shadow: 0px 0px 0px 2px #e4002b inset;
    box-shadow: 0px 0px 0px 2px #e4002b inset;
  }
}
.kontrastversion .lueckenfrageResult {
  padding-bottom: 0;
  border-bottom: 1px solid #53585A;
  background: transparent;
}
.kontrastversion .lueckenfrageResult .korrekt {
  color: #366218;
}
.kontrastversion .lueckenfrageResult .korrekt::after {
  color: #366218;
}
.kontrastversion .lueckenfrageResult .falsch {
  color: #B30022;
}
.kontrastversion .lueckenfrageResult .falsch::after {
  color: #B30022;
}

.antwortLength {
  font-size: 0.6em;
  line-height: 1.2em;
  margin: 0;
}

.freitextfrageAdditionalContent .dt-textarea {
  width: 100%;
  margin: 20px 0 0 0;
}
.freitextfrageAdditionalContent .dt-textarea textarea {
  font-size: 1.5rem;
  color: #333333;
  background: rgba(232, 235, 236, 0.3);
  border: 1px solid #E8EBEC;
  border-radius: 4px;
  padding: 0.6em 0.7em;
  width: 100%;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
  -webkit-box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
  .freitextfrageAdditionalContent .dt-textarea textarea:focus {
    -webkit-box-shadow: 0px 0px 0px 2px #333333 inset;
    -moz-box-shadow: 0px 0px 0px 2px #333333 inset;
    box-shadow: 0px 0px 0px 2px #333333 inset;
    outline: none;
  }
  .freitextfrageAdditionalContent .dt-textarea textarea:focus.highlighted {
    -webkit-box-shadow: 0px 0px 0px 2px #e4002b inset;
    -moz-box-shadow: 0px 0px 0px 2px #e4002b inset;
    box-shadow: 0px 0px 0px 2px #e4002b inset;
  }
}
@media (hover: hover), screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .freitextfrageAdditionalContent .dt-textarea textarea:focus {
    -webkit-box-shadow: 0px 0px 0px 2px #333333 inset;
    -moz-box-shadow: 0px 0px 0px 2px #333333 inset;
    box-shadow: 0px 0px 0px 2px #333333 inset;
    outline: none;
  }
  .freitextfrageAdditionalContent .dt-textarea textarea:focus.highlighted {
    -webkit-box-shadow: 0px 0px 0px 2px #e4002b inset;
    -moz-box-shadow: 0px 0px 0px 2px #e4002b inset;
    box-shadow: 0px 0px 0px 2px #e4002b inset;
  }
}
.freitextfrageAdditionalContent h3 + .dt-textarea,
.freitextfrageAdditionalContent h3 + .frageBase {
  margin: 0;
}

.freitext .rich-paragraph {
  margin: 0;
}

.freitextfrageGivenAntwort {
  white-space: pre-line;
}

.kontrastversion .freitextfrageAdditionalContent .dt-textarea textarea {
  background: #fff;
  border-color: #53585A;
}
@media (hover: hover) and (pointer: fine) {
  .kontrastversion .freitextfrageAdditionalContent .dt-textarea textarea:focus {
    -webkit-box-shadow: 0px 0px 0px 2px #333333 inset;
    -moz-box-shadow: 0px 0px 0px 2px #333333 inset;
    box-shadow: 0px 0px 0px 2px #333333 inset;
    outline: none;
    border-color: transparent !important;
  }
  .kontrastversion .freitextfrageAdditionalContent .dt-textarea textarea:focus.highlighted {
    -webkit-box-shadow: 0px 0px 0px 2px #e4002b inset;
    -moz-box-shadow: 0px 0px 0px 2px #e4002b inset;
    box-shadow: 0px 0px 0px 2px #e4002b inset;
  }
}
@media (hover: hover), screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .kontrastversion .freitextfrageAdditionalContent .dt-textarea textarea:focus {
    -webkit-box-shadow: 0px 0px 0px 2px #333333 inset;
    -moz-box-shadow: 0px 0px 0px 2px #333333 inset;
    box-shadow: 0px 0px 0px 2px #333333 inset;
    outline: none;
    border-color: transparent !important;
  }
  .kontrastversion .freitextfrageAdditionalContent .dt-textarea textarea:focus.highlighted {
    -webkit-box-shadow: 0px 0px 0px 2px #e4002b inset;
    -moz-box-shadow: 0px 0px 0px 2px #e4002b inset;
    box-shadow: 0px 0px 0px 2px #e4002b inset;
  }
}

.multiantworten {
  margin-top: 10px;
}
.multiantworten li {
  margin-bottom: 0.7em;
}
@media (hover: hover) and (pointer: fine) {
  .multiantworten .checkboxContainer input:focus ~ .checkmark {
    -webkit-box-shadow: 0px 0px 0px 1px #fff, 0px 0px 0px 3px #333333;
    -moz-box-shadow: 0px 0px 0px 1px #fff, 0px 0px 0px 3px #333333;
    box-shadow: 0px 0px 0px 1px #fff, 0px 0px 0px 3px #333333;
    outline: none;
  }
}
@media (hover: hover), screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .multiantworten .checkboxContainer input:focus ~ .checkmark {
    -webkit-box-shadow: 0px 0px 0px 1px #fff, 0px 0px 0px 3px #333333;
    -moz-box-shadow: 0px 0px 0px 1px #fff, 0px 0px 0px 3px #333333;
    box-shadow: 0px 0px 0px 1px #fff, 0px 0px 0px 3px #333333;
    outline: none;
  }
}
.multiantworten .checkboxContainer:last-child {
  margin-bottom: 0;
}

@media screen and (min-width: 500px) {
  .multiantworten {
    margin-top: 15px;
  }
}
.infoBox, .antworterlaeuterungBox {
  margin: 0.9em 0;
}
.infoBox:last-child, .antworterlaeuterungBox:last-child {
  margin-bottom: 0;
}
.infoBox summary, .antworterlaeuterungBox summary {
  font-size: inherit;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  color: #ffffff;
  border-radius: 4px;
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5em 30px 0.5em 0.7em;
  background-color: #666B6E;
  margin: 0;
}
@media (hover: hover) and (pointer: fine) {
  .infoBox summary:hover, .antworterlaeuterungBox summary:hover {
    cursor: pointer;
  }
}
@media (hover: hover), screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .infoBox summary:hover, .antworterlaeuterungBox summary:hover {
    cursor: pointer;
  }
}
.infoBox summary::after, .antworterlaeuterungBox summary::after {
  content: "\f0d8";
  font-weight: 900;
  position: absolute;
  right: 10px;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  transform: translate(0, -50%);
  font-family: "Font Awesome 6 Free";
}
.infoBox summary::-webkit-details-marker, .antworterlaeuterungBox summary::-webkit-details-marker {
  display: none;
}
.infoBox[open] summary, .antworterlaeuterungBox[open] summary {
  background-color: #333333;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.infoBox[open] summary::after, .antworterlaeuterungBox[open] summary::after {
  content: "\f0d7";
}
.infoBox .infoBoxContent, .infoBox .antworterlaeuterungBoxContent, .antworterlaeuterungBox .infoBoxContent, .antworterlaeuterungBox .antworterlaeuterungBoxContent {
  border: 1px solid #333333;
  padding: 0.8em;
  font-size: 1.3rem;
  line-height: 1.5;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.infoBox .infoBoxContent p:first-of-type, .infoBox .antworterlaeuterungBoxContent p:first-of-type, .antworterlaeuterungBox .infoBoxContent p:first-of-type, .antworterlaeuterungBox .antworterlaeuterungBoxContent p:first-of-type {
  margin-top: 0;
}
.infoBox .infoBoxContent p:last-of-type, .infoBox .antworterlaeuterungBoxContent p:last-of-type, .antworterlaeuterungBox .infoBoxContent p:last-of-type, .antworterlaeuterungBox .antworterlaeuterungBoxContent p:last-of-type {
  margin-bottom: 0;
}
.infoBox .infoBoxContent p.infoBoxInfo::before, .infoBox .infoBoxContent pantworterlaeuterungBoxinfo::before, .infoBox .antworterlaeuterungBoxContent p.infoBoxInfo::before, .infoBox .antworterlaeuterungBoxContent pantworterlaeuterungBoxinfo::before, .antworterlaeuterungBox .infoBoxContent p.infoBoxInfo::before, .antworterlaeuterungBox .infoBoxContent pantworterlaeuterungBoxinfo::before, .antworterlaeuterungBox .antworterlaeuterungBoxContent p.infoBoxInfo::before, .antworterlaeuterungBox .antworterlaeuterungBoxContent pantworterlaeuterungBoxinfo::before {
  display: inline-block;
  margin-left: -2em;
  width: 2em;
  content: "\f05a";
  font-weight: 900;
  font-family: "Font Awesome 6 Free";
}
.infoBox .infoBoxContent p.infoBoxExample::before, .infoBox .infoBoxContent p.antworterlaeuterungBoxExample, .infoBox .antworterlaeuterungBoxContent p.infoBoxExample::before, .infoBox .antworterlaeuterungBoxContent p.antworterlaeuterungBoxExample, .antworterlaeuterungBox .infoBoxContent p.infoBoxExample::before, .antworterlaeuterungBox .infoBoxContent p.antworterlaeuterungBoxExample, .antworterlaeuterungBox .antworterlaeuterungBoxContent p.infoBoxExample::before, .antworterlaeuterungBox .antworterlaeuterungBoxContent p.antworterlaeuterungBoxExample {
  display: inline-block;
  margin-left: -2em;
  width: 2em;
  content: "\f028";
  font-weight: 900;
  font-family: "Font Awesome 6 Free";
}

@media screen and (min-width: 500px) {
  .infoBox .infoBoxContent, .infoBox antworterlaeuterungBoxContent, antworterlaeuterungBox .infoBoxContent, antworterlaeuterungBox antworterlaeuterungBoxContent {
    font-size: 1.4rem;
  }
}
.frageFeedback {
  text-align: center;
  padding: 0.9em;
  margin-top: 15px;
  font-weight: 700;
  border-radius: 4px;
}
.frageFeedback.falsch {
  background: rgba(228, 0, 43, 0.05);
  border: 1px solid rgba(228, 0, 43, 0.1);
}
.frageFeedback.falsch > button {
  color: #e4002b;
  text-decoration: none;
}
.frageFeedback.falsch > button::before {
  content: "\f057";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: #e4002b;
  padding-right: 0.3em;
}
.frageFeedback.korrekt {
  background: rgba(88, 160, 39, 0.05);
  border: 1px solid rgba(88, 160, 39, 0.1);
}
.frageFeedback.korrekt > button {
  color: #58a027;
  text-decoration: none;
}
.frageFeedback.korrekt > button::before {
  content: "\f058";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: #58a027;
  padding-right: 0.3em;
}

.kontrastversion .frageFeedback.button {
  background: #ffffff;
  border: 1px solid #E8EBEC;
}
.kontrastversion .frageFeedback.button > button {
  color: #B30022;
  text-decoration: none;
}
.kontrastversion .frageFeedback.button > button::before {
  content: "\f057";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: #B30022;
  padding-right: 0.3em;
}
.kontrastversion .frageFeedback.korrekt {
  background: #ffffff;
  border: 1px solid #E8EBEC;
}
.kontrastversion .frageFeedback.korrekt > button {
  color: #366218;
  text-decoration: none;
}
.kontrastversion .frageFeedback.korrekt > button::before {
  content: "\f058";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: #366218;
  padding-right: 0.3em;
}

.antworterlaeuterungBox .antworterlaeuterungBoxContent {
  position: relative;
  background: white;
  font-weight: normal;
  font-size: 1.5rem;
}
.antworterlaeuterungBox .antworterlaeuterungBoxContent.collapsed {
  height: 10rem;
  padding-bottom: 1rem;
  overflow: hidden;
}
.antworterlaeuterungBox .antworterlaeuterungBoxContent.collapsed:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: linear-gradient(transparent, transparent 20%, white 60%, white);
}
.antworterlaeuterungBox .antworterlaeuterungBoxContent.collapsed #display-more {
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  color: var(--corporateColor);
  font-weight: 700;
  font-size: 1.5rem;
}

.kontrastversion .antworterlaeuterungBox[open] summary, .kontrastversion .infoBox[open] summary {
  background-color: #333333;
}
.kontrastversion .antworterlaeuterungBox summary, .kontrastversion .infoBox summary {
  background-color: #53585A;
}
.kontrastversion .antworterlaeuterungBox .antworterlaeuterungBoxContent #display-more, .kontrastversion .infoBox .antworterlaeuterungBoxContent #display-more {
  color: #53585A;
}

.debug-panel {
  height: auto;
  max-height: 500px;
  width: auto;
  border: 1px solid #E8EBEC;
  background: white;
  padding: 15px;
  overflow: auto;
}

p.statsInfo {
  font-size: 2rem;
}

dl.statsBox {
  display: grid;
  grid-template-columns: 1fr 5em;
  background: rgba(232, 235, 236, 0.3);
  border: 1px solid #E8EBEC;
  padding: 0.5em 0.7em;
  margin: 0 0 2rem 0;
}
dl.statsBox dt,
dl.statsBox dd {
  padding-top: 0.3em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid #E8EBEC;
}
dl.statsBox dt:last-of-type,
dl.statsBox dd:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}
dl.statsBox dt:first-of-type,
dl.statsBox dd:first-of-type {
  padding-top: 0;
}

.kontrastversion dl.statsBox {
  background: #fff;
}

.structure {
  padding: 15px;
  background: #ffffff;
  border-radius: 4px;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.structure nav.sub-structure {
  margin: 2rem 0 0 0;
  padding: 5px 10px;
  background: rgba(232, 235, 236, 0.3);
  border: 1px solid #E8EBEC;
  border-radius: 4px;
}
.structure nav.sub-structure li {
  padding: 0.4em 0;
}
.structure nav.sub-structure li a {
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .structure nav.sub-structure li a:hover {
    text-decoration: underline;
  }
}
@media (hover: hover), screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .structure nav.sub-structure li a:hover {
    text-decoration: underline;
  }
}
@media (hover: hover) and (pointer: fine) {
  .structure nav.sub-structure li a:focus {
    display: inline-block;
  }
}
@media (hover: hover), screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .structure nav.sub-structure li a:focus {
    display: inline-block;
  }
}

@media screen and (min-width: 500px) {
  .structure {
    padding: 25px;
  }
  .structure nav.sub-structure {
    padding: 10px 20px;
  }
}
#frageContainer .frage .literaturhinweis {
  margin-top: 20px;
}
#frageContainer .frage .literaturhinweis p {
  margin: 0;
}
#frageContainer .frage #restart-runde {
  margin-top: 20px;
}

.hilfetext-wrapper {
  display: flex;
  justify-content: flex-end;
}

#freischaltung footer ul,
#systemMessage footer ul {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 20px;
}
#freischaltung footer ul li,
#systemMessage footer ul li {
  width: calc(50% - 5px);
}
#freischaltung footer ul li button,
#systemMessage footer ul li button {
  width: 100%;
}

a {
  color: var(--corporateColor);
}
a.button.width100 {
  width: 100%;
}

.kontrastversion a {
  color: #333333;
}

/* The container */
.checkboxContainer {
  display: block;
  position: relative;
  padding-left: 26px;
  margin-bottom: 0.7em;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.checkboxContainer.besideInputWithLabel {
  margin-top: 2em;
}
.checkboxContainer label {
  cursor: pointer;
}
.checkboxContainer .dt-input.dt-checkbox {
  display: inline-block;
  margin-left: 9px;
}
.checkboxContainer.falsch {
  color: #e4002b;
  text-decoration: line-through;
}
.checkboxContainer.falsch label::after {
  content: "\f057";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: #e4002b;
  padding-left: 0.3em;
}
.checkboxContainer.korrekt {
  color: #58a027;
  text-decoration: none;
}
.checkboxContainer.korrekt label::after {
  content: "\f058";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: #58a027;
  padding-left: 0.3em;
}
.checkboxContainer.disabled,
.checkboxContainer .disabled,
.checkboxContainer [disabled] {
  cursor: default;
}
.checkboxContainer.disabled .checkmark,
.checkboxContainer .disabled .checkmark,
.checkboxContainer [disabled] .checkmark {
  background-color: #E8EBEC;
  border: 1px solid #E8EBEC;
}

/* Hide the browser's default checkbox */
.checkboxContainer:has(span.dt-checkbox label input.besideInputWithLabel) {
  margin-top: 3.1rem;
}
.checkboxContainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  width: 0;
  height: 0;
}
@media (hover: hover) and (pointer: fine) {
  .checkboxContainer input:focus + .checkmark {
    -webkit-box-shadow: 0px 0px 0px 2px #333333;
    -moz-box-shadow: 0px 0px 0px 2px #333333;
    box-shadow: 0px 0px 0px 2px #333333;
    outline: none;
  }
  .checkboxContainer input:focus + .checkmark.highlighted {
    -webkit-box-shadow: 0px 0px 0px 2px #e4002b;
    -moz-box-shadow: 0px 0px 0px 2px #e4002b;
    box-shadow: 0px 0px 0px 2px #e4002b;
  }
}
@media (hover: hover), screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .checkboxContainer input:focus + .checkmark {
    -webkit-box-shadow: 0px 0px 0px 2px #333333;
    -moz-box-shadow: 0px 0px 0px 2px #333333;
    box-shadow: 0px 0px 0px 2px #333333;
    outline: none;
  }
  .checkboxContainer input:focus + .checkmark.highlighted {
    -webkit-box-shadow: 0px 0px 0px 2px #e4002b;
    -moz-box-shadow: 0px 0px 0px 2px #e4002b;
    box-shadow: 0px 0px 0px 2px #e4002b;
  }
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 2px;
  left: 0;
  height: 18px;
  width: 18px;
  border: 1px solid #666B6E;
  border-radius: 2px;
  background-color: #fff;
  margin-right: 1.5em;
}

.checkmark.disabled {
  background-color: #ddd;
}

/* On mouse-over, add a grey background color */
/* When the checkbox is checked, add a blue background */
.checkboxContainer.checked .checkmark,
.checkboxContainer .dt-checkbox.checked .checkmark {
  background-color: var(--corporateColor);
  border: 1px solid var(--corporateColor);
}
.checkboxContainer.checked .checkmark.disabled, .checkboxContainer.checked .checkmark[disabled],
.checkboxContainer .dt-checkbox.checked .checkmark.disabled,
.checkboxContainer .dt-checkbox.checked .checkmark[disabled] {
  background-color: #ddd;
  border: 1px solid #ddd;
  cursor: default;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
}

/* Style the checkmark/indicator */
.checkboxContainer .checkmark:after {
  left: 5px;
  top: 1px;
  width: 7px;
  height: 11px;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.checkboxContainer .dt-checkbox:not(.checked) {
  border-color: transparent;
}
.checkboxContainer .dt-checkbox:not(.checked) .checkmark:after {
  border-color: transparent;
}

.kontrastversion .checkboxContainer.falsch {
  color: #B30022;
}
.kontrastversion .checkboxContainer.falsch label::after {
  color: #B30022;
}
.kontrastversion .checkboxContainer.korrekt {
  color: #366218;
}
.kontrastversion .checkboxContainer.korrekt label::after {
  color: #366218;
}
.kontrastversion .checkmark {
  border: 1px solid #53585A;
  background-color: #fff;
}
.kontrastversion .checkboxContainer.checked .checkmark,
.kontrastversion .checkboxContainer .dt-checkbox.checked .checkmark {
  background-color: #53585A;
  border: 1px solid #53585A;
}

/* The container */
.radioContainer {
  display: block;
  position: relative;
  padding-left: 26px;
  margin-bottom: 0.7em;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

label {
  cursor: pointer;
}

/* Hide the browser's default radio button */
.radioContainer input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Create a custom radio button */
.checkmarkRadio {
  position: absolute;
  display: inline-block;
  top: 2px;
  left: 0;
  height: 18px;
  width: 18px;
  background-color: #fff;
  border-radius: 50%;
  border: 1px #666B6E solid;
}

/* On mouse-over, add a grey background color */
/* When the radio button is checked, add a blue background */
.radioContainer input:checked ~ .checkmarkRadio,
.radioContainer input[checked=true] ~ .checkmarkRadio {
  background-color: var(--corporateColor);
  border: 1px var(--corporateColor) solid;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmarkRadio:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.radioContainer input:checked ~ .checkmarkRadio:after,
.radioContainer input[checked=true] ~ .checkmarkRadio:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.radioContainer .checkmarkRadio:after {
  top: 4px;
  left: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
}

.kontrastversion .checkmarkRadio {
  border: 1px #53585A solid;
}
.kontrastversion .radioContainer input:checked ~ .checkmarkRadio,
.kontrastversion .radioContainer input[checked=true] ~ .checkmarkRadio {
  background-color: #53585A;
  border: 1px #53585A solid;
}

h1 {
  font-size: 2.4rem;
  line-height: 1.2;
  margin: 0.5em 0;
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -o-hyphens: auto;
  hyphens: auto;
}
h1:first-child {
  margin-top: 0;
}

h2 {
  font-size: 2.2rem;
  line-height: 1.2;
  margin: 0 0 0.5em 0;
}

h3 {
  font-size: 1.3rem;
  font-weight: normal;
  color: #666B6E;
  margin: 0.8em 0 0.4em;
}
h3.statsHeadline {
  margin: 2rem 0 0.5em 0;
}

p {
  margin: 0.5em 0;
}
p:first-child {
  margin-top: 0;
}
p:last-child {
  margin-bottom: 0;
}

@media screen and (min-width: 500px) {
  h1 {
    font-size: 2.8rem;
    line-height: 1.3;
  }
  h1:first-child {
    margin-top: 0;
  }
  h2 {
    font-size: 2.4rem;
    line-height: 1.3;
  }
}
.kontrastversion h3 {
  color: #53585A;
}

ul.ulReset {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

/* The second class was added because we need to serve the implementation in cljs-ui-components*/
/* It can be removed once we adapted the cljs-ui-components*/
.dt-confirmation-wrapper {
  position: fixed;
  top: 50%;
  left: 50%;
}
.dt-confirmation-wrapper.size-xl {
  left: unset;
  display: block;
  width: 100vw;
  padding: 0 10px;
  min-width: 360px;
  height: 100%;
}

.dt-modal--stack {
  position: relative;
  z-index: 999;
}

.modal div.message,
.dt-confirmation:not(#frage-feedback-modal) div.message {
  margin: 0.7em 0;
  margin-right: -20px;
  padding-right: 15px;
  white-space: pre-line;
  overflow: auto;
  max-height: 50vh;
  font-size: 1.5rem;
}

.modal,
.dt-confirmation {
  left: -50%;
  position: relative;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  padding: 20px;
  background-color: white;
  max-width: 500px;
  min-width: 300px;
  border-radius: 4px;
  max-height: 80vh;
  -webkit-box-shadow: 0 3px 20px rgba(0, 0, 0, 0.6);
  box-shadow: 0 3px 20px rgba(0, 0, 0, 0.6);
  /* The second class was added because we need to serve the implementation in cljs-ui-components*/
  /* It can be removed once we adapted the cljs-ui-components*/
}
.modal h1.title,
.dt-confirmation h1.title {
  font-size: 2.5rem;
  margin: 0 0 0.4em 0;
  font-weight: bold;
  color: var(--corporateColor);
}
.size-xl .modal,
.size-xl .dt-confirmation {
  left: unset;
  margin: 0 auto;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  max-height: calc(100% - 20px);
}
.size-xl .modal div.message,
.size-xl .dt-confirmation div.message {
  flex: 1;
  font-size: 1.3rem;
  max-height: unset;
}
.modal .btnContainer, .modal .buttons,
.dt-confirmation .btnContainer,
.dt-confirmation .buttons {
  margin-top: 1.2em;
}
.modal .btnContainer ul, .modal .buttons ul,
.dt-confirmation .btnContainer ul,
.dt-confirmation .buttons ul {
  display: flex;
  flex-direction: column;
  /* This was copied from .ulReset class - can be removed once we add the ulReset class in cljs-ui-components */
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.modal .btnContainer ul li button, .modal .buttons ul li button,
.dt-confirmation .btnContainer ul li button,
.dt-confirmation .buttons ul li button {
  width: 100%;
}
.modal .btnContainer ul li:not(:last-child), .modal .buttons ul li:not(:last-child),
.dt-confirmation .btnContainer ul li:not(:last-child),
.dt-confirmation .buttons ul li:not(:last-child) {
  margin-bottom: 7px;
}

.hilfetext .btnContainer ul li button, .hilfetext .buttons ul li button {
  width: 30%;
}

/* The second class was added because we need to serve the implementation in cljs-ui-components*/
/* It can be removed once we adapted the cljs-ui-components*/
.modal-background, .dt-modal--background {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
}

.kontrastversion .modal h1.title, .kontrastversion .dt-confirmation h1.title {
  color: #333333;
}

@media screen and (min-width: 500px) {
  .dt-confirmation-wrapper.size-xl {
    padding: 0 20px;
  }
  .modal, .dt-confirmation {
    padding: 30px;
  }
  .modal h1.title, .dt-confirmation h1.title {
    font-size: 2.8rem;
  }
  .modal div.message, .dt-confirmation div.message {
    padding-right: 20px;
    margin-right: -30px;
    font-size: 1.5rem;
  }
  .size-xl .modal div.message, .size-xl .dt-confirmation div.message {
    max-height: 50vh;
    font-size: 1.5rem;
  }
  .modal .btnContainer, .modal .buttons, .dt-confirmation .btnContainer, .dt-confirmation .buttons {
    margin-top: 1.2em;
  }
  .modal .btnContainer ul li:not(:last-child), .modal .buttons ul li:not(:last-child), .dt-confirmation .btnContainer ul li:not(:last-child), .dt-confirmation .buttons ul li:not(:last-child) {
    margin-bottom: 10px;
  }
}
.compact,
.full {
  display: inline-flex;
  flex-wrap: nowrap;
  vertical-align: middle;
}
.compact button,
.full button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 1.5em;
  width: 2.5em;
  padding: 0;
  margin: -0.22em 0.25em 0 0;
  border: none;
}
.compact button i.fas,
.full button i.fas {
  font-size: calc(1.5em / 2.5);
  position: relative;
}
.compact button i.fas.fa-redo-alt, .compact button i.fas.fa-undo-alt,
.full button i.fas.fa-redo-alt,
.full button i.fas.fa-undo-alt {
  font-size: calc(1.5em / 2);
}
.compact button.error,
.full button.error {
  background: #e4002b;
  cursor: default;
}
.compact button.error i.fas,
.full button.error i.fas {
  font-size: calc(1.5em / 2);
}

.kontrastversion .compact button.error,
.kontrastversion .full button.error {
  background: #B30022;
}

.breadcrumb {
  font-size: 1.3rem;
}
.breadcrumb:empty {
  display: none;
}
.breadcrumb:empty + * {
  margin-top: 0;
}
.breadcrumb ul li {
  display: inline;
}
.breadcrumb ul li:not(:last-child)::after {
  content: "\f105";
  font-family: "Font Awesome 6 Free";
  font-size: 1.2rem;
  font-weight: 900;
  padding: 0 0.5em;
}
.breadcrumb ul li a {
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .breadcrumb ul li a:hover {
    text-decoration: underline;
  }
}
@media (hover: hover), screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .breadcrumb ul li a:hover {
    text-decoration: underline;
  }
}
.breadcrumb ul li a div {
  display: inline-block;
}

img {
  max-width: 100%;
  height: auto;
}

.dt-select {
  position: relative;
  display: inline-block;
  margin: 0.1em 0;
  vertical-align: bottom;
}
.dt-select button:not(.hilfetext-button) {
  all: unset;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  height: 2.6rem;
  padding: 0 2rem 0 0.4em !important;
  margin: 0 !important;
  font-size: 1.5rem !important;
  border: 1px solid #666B6E;
  border-radius: 2px;
}
.dt-select button:not(.hilfetext-button) span.label {
  display: inline-block;
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.dt-select button:not(.hilfetext-button) span.dropdown-toggle {
  position: absolute;
  display: flex;
  right: 0.4em;
}
.dt-select button:not(.hilfetext-button) span.dropdown-toggle i {
  font-size: 0.7em;
  margin: 0 !important;
}
.dt-select button:not(.hilfetext-button).active ~ .dropdown {
  display: block;
  position: absolute;
  z-index: 1;
}
.dt-select .dropdown {
  display: none;
  width: auto;
  min-width: 100%;
  background: #fff;
  border-radius: 2px;
  max-height: 13rem;
  overflow: auto;
}
.dt-select .dropdown span.options {
  padding: 0;
  margin: 0;
  list-style: none;
}
.dt-select .dropdown span.options span.option {
  width: 100%;
}
.dt-select .dropdown span.options span.option.selected button {
  background: #E8EBEC;
}
.dt-select .dropdown span.options span.option:not(:last-child) {
  border-bottom: 1px solid #E8EBEC;
}
.dt-select .dropdown span.options span.option button {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  display: block;
  padding: 0 0.4em !important;
  border: none;
  border-radius: 0;
  width: 100% !important;
  min-height: 2.6rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.dt-select .dt-validation-message {
  position: absolute;
  bottom: -1.1rem;
  left: 0;
}

span.lueckenauswahl.kurz .dt-select {
  min-width: 100px;
}
span.lueckenauswahl.lang .dt-select {
  min-width: 250px;
}
span.lueckenauswahl .dt-select {
  width: auto;
  max-width: 100%;
}

.dropdown {
  box-shadow: 0 9px 15px rgba(0, 0, 0, 0.2);
}
.dropdown span.options button {
  padding: 5px;
}
@media (hover: hover) and (pointer: fine) {
  .dropdown span.options button:focus {
    -webkit-box-shadow: 0px 0px 0px 2px #333333 inset;
    -moz-box-shadow: 0px 0px 0px 2px #333333 inset;
    box-shadow: 0px 0px 0px 2px #333333 inset;
    outline: none;
    border-color: transparent !important;
  }
  .dropdown span.options button:focus.highlighted {
    -webkit-box-shadow: 0px 0px 0px 2px #e4002b inset;
    -moz-box-shadow: 0px 0px 0px 2px #e4002b inset;
    box-shadow: 0px 0px 0px 2px #e4002b inset;
  }
}
@media (hover: hover), screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .dropdown span.options button:focus {
    -webkit-box-shadow: 0px 0px 0px 2px #333333 inset;
    -moz-box-shadow: 0px 0px 0px 2px #333333 inset;
    box-shadow: 0px 0px 0px 2px #333333 inset;
    outline: none;
    border-color: transparent !important;
  }
  .dropdown span.options button:focus.highlighted {
    -webkit-box-shadow: 0px 0px 0px 2px #e4002b inset;
    -moz-box-shadow: 0px 0px 0px 2px #e4002b inset;
    box-shadow: 0px 0px 0px 2px #e4002b inset;
  }
}
@media (hover: hover) and (pointer: fine) {
  .dropdown span.options button:not(:has(s)):hover {
    -webkit-box-shadow: 0px 0px 0px 2px #333333 inset;
    -moz-box-shadow: 0px 0px 0px 2px #333333 inset;
    box-shadow: 0px 0px 0px 2px #333333 inset;
    outline: none;
    border-color: transparent !important;
  }
  .dropdown span.options button:not(:has(s)):hover.highlighted {
    -webkit-box-shadow: 0px 0px 0px 2px #e4002b inset;
    -moz-box-shadow: 0px 0px 0px 2px #e4002b inset;
    box-shadow: 0px 0px 0px 2px #e4002b inset;
  }
}
@media (hover: hover), screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .dropdown span.options button:not(:has(s)):hover {
    -webkit-box-shadow: 0px 0px 0px 2px #333333 inset;
    -moz-box-shadow: 0px 0px 0px 2px #333333 inset;
    box-shadow: 0px 0px 0px 2px #333333 inset;
    outline: none;
    border-color: transparent !important;
  }
  .dropdown span.options button:not(:has(s)):hover.highlighted {
    -webkit-box-shadow: 0px 0px 0px 2px #e4002b inset;
    -moz-box-shadow: 0px 0px 0px 2px #e4002b inset;
    box-shadow: 0px 0px 0px 2px #e4002b inset;
  }
}

sub, sup {
  vertical-align: baseline;
  position: relative;
}

sub {
  top: 0.2em;
}

sup {
  top: -0.3em;
}

.revive-banner {
  display: none;
}
.revive-banner > ins {
  text-decoration: none;
}

@media screen and (min-width: 1180px) {
  .revive-banner {
    display: block;
    position: absolute;
    top: 75px;
    right: calc((100vw - 800px) / 2 - 160px);
  }
}
.toast__stack {
  position: absolute;
  top: 10px;
  right: 10px;
  width: auto;
  z-index: 999;
}
.toast__stack .toast {
  border-radius: 4px;
  border: 1px solid #DDD;
  padding: 10px;
  width: auto;
  min-width: 200px;
  max-width: 600px;
  margin-bottom: 10px;
}
.toast__stack .toast.toast__type--success {
  background-color: #baffc9;
}
.toast__stack .toast.toast__type--error {
  background-color: #ffb3ba;
}
.toast__stack .toast .toast__header {
  font-size: 18px;
  font-weight: 600;
  color: var(--corporateColor);
}
.toast__stack .toast .toast__header .toast__header__actions {
  position: absolute;
  right: 10px;
}
.toast__stack .toast .toast__header .toast__header__actions a {
  transition: color ease 0.5s;
}
.toast__stack .toast .toast__header .toast__header__actions a:hover {
  color: red;
}
.toast__stack .toast .toast__content {
  color: rgb(51, 51, 51);
  font-size: 15px;
}

.form .dt-input.dt-textfield, .form .dt-input.dt-colorfield, .form .dt-input.dt-datepicker, .form .dt-input.dt-wordwheel {
  display: flex;
  flex-direction: column-reverse;
  margin-bottom: 1.25rem;
}
.form .dt-input.dt-textfield:not(.dt-wordwheel) input, .form .dt-input.dt-colorfield:not(.dt-wordwheel) input, .form .dt-input.dt-datepicker:not(.dt-wordwheel) input, .form .dt-input.dt-wordwheel:not(.dt-wordwheel) input {
  border: 1px solid #d4d8da;
  border-radius: 4px;
}
@media (hover: hover) and (pointer: fine) {
  .form .dt-input.dt-textfield:not(.dt-wordwheel) input:focus, .form .dt-input.dt-colorfield:not(.dt-wordwheel) input:focus, .form .dt-input.dt-datepicker:not(.dt-wordwheel) input:focus, .form .dt-input.dt-wordwheel:not(.dt-wordwheel) input:focus {
    -webkit-box-shadow: 0px 0px 0px 2px #333333 inset;
    -moz-box-shadow: 0px 0px 0px 2px #333333 inset;
    box-shadow: 0px 0px 0px 2px #333333 inset;
    outline: none;
    border-color: transparent !important;
  }
  .form .dt-input.dt-textfield:not(.dt-wordwheel) input:focus.highlighted, .form .dt-input.dt-colorfield:not(.dt-wordwheel) input:focus.highlighted, .form .dt-input.dt-datepicker:not(.dt-wordwheel) input:focus.highlighted, .form .dt-input.dt-wordwheel:not(.dt-wordwheel) input:focus.highlighted {
    -webkit-box-shadow: 0px 0px 0px 2px #e4002b inset;
    -moz-box-shadow: 0px 0px 0px 2px #e4002b inset;
    box-shadow: 0px 0px 0px 2px #e4002b inset;
  }
  .form .dt-input.dt-textfield:not(.dt-wordwheel) input:focus + label, .form .dt-input.dt-colorfield:not(.dt-wordwheel) input:focus + label, .form .dt-input.dt-datepicker:not(.dt-wordwheel) input:focus + label, .form .dt-input.dt-wordwheel:not(.dt-wordwheel) input:focus + label {
    color: var(--corporateColor);
  }
}
@media (hover: hover), screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .form .dt-input.dt-textfield:not(.dt-wordwheel) input:focus, .form .dt-input.dt-colorfield:not(.dt-wordwheel) input:focus, .form .dt-input.dt-datepicker:not(.dt-wordwheel) input:focus, .form .dt-input.dt-wordwheel:not(.dt-wordwheel) input:focus {
    -webkit-box-shadow: 0px 0px 0px 2px #333333 inset;
    -moz-box-shadow: 0px 0px 0px 2px #333333 inset;
    box-shadow: 0px 0px 0px 2px #333333 inset;
    outline: none;
    border-color: transparent !important;
  }
  .form .dt-input.dt-textfield:not(.dt-wordwheel) input:focus.highlighted, .form .dt-input.dt-colorfield:not(.dt-wordwheel) input:focus.highlighted, .form .dt-input.dt-datepicker:not(.dt-wordwheel) input:focus.highlighted, .form .dt-input.dt-wordwheel:not(.dt-wordwheel) input:focus.highlighted {
    -webkit-box-shadow: 0px 0px 0px 2px #e4002b inset;
    -moz-box-shadow: 0px 0px 0px 2px #e4002b inset;
    box-shadow: 0px 0px 0px 2px #e4002b inset;
  }
  .form .dt-input.dt-textfield:not(.dt-wordwheel) input:focus + label, .form .dt-input.dt-colorfield:not(.dt-wordwheel) input:focus + label, .form .dt-input.dt-datepicker:not(.dt-wordwheel) input:focus + label, .form .dt-input.dt-wordwheel:not(.dt-wordwheel) input:focus + label {
    color: var(--corporateColor);
  }
}
.form .dt-input.dt-textfield input, .form .dt-input.dt-colorfield input, .form .dt-input.dt-datepicker input, .form .dt-input.dt-wordwheel input {
  display: block;
  width: 100%;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
  -webkit-box-shadow: none;
}
.form .dt-input.dt-textfield input[readonly], .form .dt-input.dt-textfield input[disabled], .form .dt-input.dt-colorfield input[readonly], .form .dt-input.dt-colorfield input[disabled], .form .dt-input.dt-datepicker input[readonly], .form .dt-input.dt-datepicker input[disabled], .form .dt-input.dt-wordwheel input[readonly], .form .dt-input.dt-wordwheel input[disabled] {
  border: 1px solid transparent;
}
.form .dt-input.dt-textfield input[readonly]::-moz-selection, .form .dt-input.dt-textfield input[readonly]::selection, .form .dt-input.dt-textfield input[disabled]::-moz-selection, .form .dt-input.dt-textfield input[disabled]::selection, .form .dt-input.dt-colorfield input[readonly]::-moz-selection, .form .dt-input.dt-colorfield input[readonly]::selection, .form .dt-input.dt-colorfield input[disabled]::-moz-selection, .form .dt-input.dt-colorfield input[disabled]::selection, .form .dt-input.dt-datepicker input[readonly]::-moz-selection, .form .dt-input.dt-datepicker input[readonly]::selection, .form .dt-input.dt-datepicker input[disabled]::-moz-selection, .form .dt-input.dt-datepicker input[disabled]::selection, .form .dt-input.dt-wordwheel input[readonly]::-moz-selection, .form .dt-input.dt-wordwheel input[readonly]::selection, .form .dt-input.dt-wordwheel input[disabled]::-moz-selection, .form .dt-input.dt-wordwheel input[disabled]::selection {
  color: inherit;
  background: inherit;
}
@media (hover: hover) and (pointer: fine) {
  .form .dt-input.dt-textfield input[readonly]:hover, .form .dt-input.dt-textfield input[disabled]:hover, .form .dt-input.dt-colorfield input[readonly]:hover, .form .dt-input.dt-colorfield input[disabled]:hover, .form .dt-input.dt-datepicker input[readonly]:hover, .form .dt-input.dt-datepicker input[disabled]:hover, .form .dt-input.dt-wordwheel input[readonly]:hover, .form .dt-input.dt-wordwheel input[disabled]:hover {
    cursor: default;
  }
}
@media (hover: hover), screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .form .dt-input.dt-textfield input[readonly]:hover, .form .dt-input.dt-textfield input[disabled]:hover, .form .dt-input.dt-colorfield input[readonly]:hover, .form .dt-input.dt-colorfield input[disabled]:hover, .form .dt-input.dt-datepicker input[readonly]:hover, .form .dt-input.dt-datepicker input[disabled]:hover, .form .dt-input.dt-wordwheel input[readonly]:hover, .form .dt-input.dt-wordwheel input[disabled]:hover {
    cursor: default;
  }
}
.form .dt-input.dt-textfield input.with-label, .form .dt-input.dt-colorfield input.with-label, .form .dt-input.dt-datepicker input.with-label, .form .dt-input.dt-wordwheel input.with-label {
  margin-top: 0;
}
.form .dt-input.dt-textfield.dt-validation-error label, .form .dt-input.dt-colorfield.dt-validation-error label, .form .dt-input.dt-datepicker.dt-validation-error label, .form .dt-input.dt-wordwheel.dt-validation-error label {
  order: 3;
  color: #666B6E;
}
.form .dt-input.dt-textfield.dt-validation-error input,
.form .dt-input.dt-textfield.dt-validation-error textarea, .form .dt-input.dt-colorfield.dt-validation-error input,
.form .dt-input.dt-colorfield.dt-validation-error textarea, .form .dt-input.dt-datepicker.dt-validation-error input,
.form .dt-input.dt-datepicker.dt-validation-error textarea, .form .dt-input.dt-wordwheel.dt-validation-error input,
.form .dt-input.dt-wordwheel.dt-validation-error textarea {
  order: 2;
  border-color: #e4002b;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.form .dt-input.dt-textfield.dt-validation-error .dt-validation-message, .form .dt-input.dt-textfield.dt-validation-error .dt-info-message, .form .dt-input.dt-colorfield.dt-validation-error .dt-validation-message, .form .dt-input.dt-colorfield.dt-validation-error .dt-info-message, .form .dt-input.dt-datepicker.dt-validation-error .dt-validation-message, .form .dt-input.dt-datepicker.dt-validation-error .dt-info-message, .form .dt-input.dt-wordwheel.dt-validation-error .dt-validation-message, .form .dt-input.dt-wordwheel.dt-validation-error .dt-info-message {
  order: 1;
  padding: 0.465em 0.9em;
  background-color: rgba(228, 0, 43, 0.05);
  color: #e4002b;
  font-size: 0.8em;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  display: flex;
  align-items: baseline;
  gap: 0.3em;
}
.form .dt-input.dt-textfield.dt-validation-error .dt-info-message, .form .dt-input.dt-colorfield.dt-validation-error .dt-info-message, .form .dt-input.dt-datepicker.dt-validation-error .dt-info-message, .form .dt-input.dt-wordwheel.dt-validation-error .dt-info-message {
  background-color: rgba(0, 126, 255, 0.07);
  color: #014993;
}
.form .dt-input.dt-textfield label, .form .dt-input.dt-colorfield label, .form .dt-input.dt-datepicker label, .form .dt-input.dt-wordwheel label {
  display: block;
  font-size: 0.8em;
  color: #666B6E;
  margin-bottom: 0.2em;
}
.form .dt-input.dt-textfield input, .form .dt-input.dt-datepicker input, .form .dt-input.dt-wordwheel input {
  padding: 0.465em 0.9em;
  background-color: rgba(232, 235, 236, 0.5);
}
.form .dt-input.dt-colorfield input {
  padding: 0.3em;
  height: 36px;
  width: 36px;
}
@media (hover: hover) and (pointer: fine) {
  .form .dt-input.dt-colorfield input:hover {
    cursor: pointer;
  }
}
@media (hover: hover), screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .form .dt-input.dt-colorfield input:hover {
    cursor: pointer;
  }
}
.form .dt-input.dt-textarea {
  display: flex;
  flex-direction: column-reverse;
  margin-bottom: 1.25rem;
}
.form .dt-input.dt-textarea textarea {
  display: block;
  width: 100%;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
  -webkit-box-shadow: none;
  border: 1px solid #d4d8da;
  background-color: rgba(232, 235, 236, 0.5);
  border-radius: 4px;
  padding: 0.465em 0.9em;
}
@media (hover: hover) and (pointer: fine) {
  .form .dt-input.dt-textarea textarea:focus {
    -webkit-box-shadow: 0px 0px 0px 2px #333333 inset;
    -moz-box-shadow: 0px 0px 0px 2px #333333 inset;
    box-shadow: 0px 0px 0px 2px #333333 inset;
    outline: none;
    border-color: transparent !important;
  }
  .form .dt-input.dt-textarea textarea:focus.highlighted {
    -webkit-box-shadow: 0px 0px 0px 2px #e4002b inset;
    -moz-box-shadow: 0px 0px 0px 2px #e4002b inset;
    box-shadow: 0px 0px 0px 2px #e4002b inset;
  }
  .form .dt-input.dt-textarea textarea:focus + label {
    color: var(--corporateColor);
  }
}
@media (hover: hover), screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .form .dt-input.dt-textarea textarea:focus {
    -webkit-box-shadow: 0px 0px 0px 2px #333333 inset;
    -moz-box-shadow: 0px 0px 0px 2px #333333 inset;
    box-shadow: 0px 0px 0px 2px #333333 inset;
    outline: none;
    border-color: transparent !important;
  }
  .form .dt-input.dt-textarea textarea:focus.highlighted {
    -webkit-box-shadow: 0px 0px 0px 2px #e4002b inset;
    -moz-box-shadow: 0px 0px 0px 2px #e4002b inset;
    box-shadow: 0px 0px 0px 2px #e4002b inset;
  }
  .form .dt-input.dt-textarea textarea:focus + label {
    color: var(--corporateColor);
  }
}
.form .dt-input.dt-textarea textarea[readonly], .form .dt-input.dt-textarea textarea[disabled] {
  border: 1px solid transparent;
}
.form .dt-input.dt-textarea textarea[readonly]::-moz-selection, .form .dt-input.dt-textarea textarea[readonly]::selection, .form .dt-input.dt-textarea textarea[disabled]::-moz-selection, .form .dt-input.dt-textarea textarea[disabled]::selection {
  color: inherit;
  background: inherit;
}
@media (hover: hover) and (pointer: fine) {
  .form .dt-input.dt-textarea textarea[readonly]:hover, .form .dt-input.dt-textarea textarea[disabled]:hover {
    cursor: default;
  }
}
@media (hover: hover), screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .form .dt-input.dt-textarea textarea[readonly]:hover, .form .dt-input.dt-textarea textarea[disabled]:hover {
    cursor: default;
  }
}
.form .dt-input.dt-textarea textarea.with-label {
  margin-top: 0;
}
.form .dt-input.dt-textarea label {
  position: static;
  display: block;
  font-size: 0.8em;
  color: #666B6E;
  margin-bottom: 0.2em;
}
.form .dt-input.dt-textarea.dt-validation-error label {
  order: 3;
  color: #e4002b;
}
.form .dt-input.dt-textarea.dt-validation-error input,
.form .dt-input.dt-textarea.dt-validation-error textarea {
  order: 2;
  border-color: #e4002b;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.form .dt-input.dt-textarea.dt-validation-error .dt-validation-message, .form .dt-input.dt-textarea.dt-validation-error .dt-info-message {
  order: 1;
  padding: 0.465em 0.9em;
  background-color: rgba(228, 0, 43, 0.05);
  color: #e4002b;
  font-size: 0.8em;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  display: flex;
  align-items: baseline;
  gap: 0.3em;
}
.form .dt-input.dt-textarea.dt-validation-error .dt-info-message {
  background-color: rgba(0, 126, 255, 0.07);
  color: #014993;
}
.form .customerWordwheel {
  display: flex;
  width: 100%;
  margin-bottom: 1.25rem;
}
.form .customerWordwheel .dt-wordwheel-input-wrapper {
  border-right: 0 !important;
}
.form .customerWordwheel .dt-input.dt-wordwheel {
  flex: 1;
  margin-bottom: 0;
}
.form .customerWordwheel .dt-input.dt-wordwheel .search-button {
  border-radius: 0;
}
.form .customerWordwheel button#select-customer {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  height: 36px;
  margin-top: 1.45em;
}
.form .license-redeem-field {
  display: flex;
  width: 100%;
  margin-bottom: 1.25rem;
}
.form .license-redeem-field .dt-textfield.dt-input {
  flex: 1;
  margin-bottom: 0;
}
.form .license-redeem-field .dt-textfield.dt-input input {
  border-radius: 4px 0 0 4px;
  border-right: 0 !important;
}
.form .license-redeem-field button#redeem {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  height: 36px;
  margin-top: 1.45em;
}
.form .license-redeem-field span.dt-validation-error ~ button#redeem {
  margin-top: 1.35em;
}
.form .dt-required::before {
  content: " *";
  color: red;
}
.form .customerColumnsDivider {
  position: relative;
  top: 25px;
}

/*# sourceMappingURL=learning.css.map */