/* region === Variables === */
/* endregion --- Variables --- */
/* region === global === */
@font-face {
  font-family: "Noto Sans Backup";
  font-weight: normal;
  src: url("/assets/fonts/NotoSans-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Noto Sans Backup";
  font-weight: bold;
  src: url("/assets/fonts/NotoSans-Bold.ttf") format("truetype");
}
:root {
  font-size: min(1.2vw, 1.8vh);
  user-select: none;
}

body {
  font-family: "Noto Sans", "Noto Sans Backup", sans-serif;
}

body, main#main {
  margin: 0;
  width: 100vw;
  height: 100vh;
  background-color: #000000;
  overflow: hidden;
}
body.noAnimate > main#main, main#main.noAnimate > main#main {
  background: url("noAnimation.png") repeat;
  background-size: 7rem;
}
body.noAnimate *, main#main.noAnimate * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}
body.noAnimate .animated, main#main.noAnimate .animated {
  animation-duration: 1ms !important;
  transition-duration: 1ms !important;
  animation-iteration-count: 1 !important;
}
body.noAnimate .animated[class*=Out], main#main.noAnimate .animated[class*=Out] {
  opacity: 0;
}

.container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: min(100vw, 150vh);
  height: min(100vh, calc(200vw / 3));
  overflow: hidden;
}
.container > * {
  position: absolute;
}

.flipOutY {
  pointer-events: none;
}

hr {
  border: none;
  border-top: 0.2rem solid rgba(0, 0, 0, 0.5);
  width: 90%;
}

.center {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 100%;
}

body.grabbing * {
  cursor: grabbing !important;
}

#pause {
  transition: opacity 0.5s;
}
#pause.clickable {
  cursor: pointer;
}
#pause.invisible {
  pointer-events: none;
}
#pause > div {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 999;
  text-align: center;
  font-size: 4rem;
  font-weight: 700;
  color: #ffffff;
  padding-top: 6rem;
}
#pause > div > div {
  font-size: 3rem;
  text-align: left;
  width: 50%;
  margin: 2rem auto;
}
#pause > div > div hr {
  margin: 1rem 0;
}

#warning {
  width: 100%;
  height: 100%;
  transition: opacity 0.25s;
  z-index: 998;
  display: flex;
  align-items: center;
  justify-content: center;
}
#warning > div {
  text-align: center;
  font-size: 4rem;
  font-weight: 700;
  color: white;
  min-width: 25rem;
  padding: 1rem;
  border-radius: 1rem;
  background-color: rgba(220, 53, 69, 0.8);
  box-shadow: 0 0 2rem 3rem rgba(220, 53, 69, 0.8);
}
#warning.invisible {
  pointer-events: none;
}

button {
  text-align: center;
  background-color: #ced4da;
  border: none;
  padding: 0.375rem 0.75rem;
  font-size: 1.2rem;
  line-height: 1.5;
  border-radius: 0.5rem;
  transition: background-color 0.5s;
  cursor: pointer;
}
button.btn-block {
  width: 100%;
}
button:disabled {
  cursor: initial;
  background-color: #fafafb;
}
button:hover:not(:disabled) {
  background-color: #a2aeb9;
}

/* endregion --- global --- */
/* region === LOGIN === */
#bitList {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
}
#bitList > div:not(:first-child) {
  width: 10rem;
  height: 10rem;
  background-size: 70%;
  background-position: center center;
  border-radius: 50%;
  cursor: pointer;
  background-repeat: no-repeat;
  transition: all ease 0.5s;
}
#bitList > div:not(:first-child):not(:last-child) {
  background-color: #ffffff;
}
#bitList > div:not(:first-child):hover {
  background-color: #9f0000;
}
#bitList > a {
  width: 100%;
  border-radius: 2rem;
  margin: 0 4rem;
  color: #ffffff;
  font-size: 3rem;
  text-align: center;
  height: 5rem;
  line-height: 5rem;
  text-decoration: none;
  display: block;
  transition: all ease 0.5s;
  background-color: #333;
}
#bitList > a:hover {
  background-color: #9f0000;
}

#confirm {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  color: white;
}
#confirm form {
  text-align: center;
}
#confirm #inputPassword {
  background: none;
  border: solid 0.2rem white;
  border-radius: 1rem 1rem 0 0;
  font-size: 4rem;
  color: white;
  text-align: center;
  width: 30rem;
  padding: 0.5rem;
}
#confirm .submit, #confirm .back {
  background: #0d462c;
  border: solid 0.2rem white;
  border-radius: 0;
  font-size: 3rem;
  color: white;
  text-align: center;
  width: 30rem;
  padding: 0.5rem;
  cursor: pointer;
  box-sizing: content-box;
}
#confirm .submit:hover, #confirm .back:hover {
  background: rgba(255, 255, 255, 0.5);
}
#confirm .back {
  border-radius: 0 0 1rem 1rem;
  background: none;
}
#confirm #inputGroupname {
  border: none;
  background: none;
  font-size: 6rem;
  font-weight: bold;
  text-align: center;
  color: white;
}
#confirm #inputGroupname:focus {
  outline: none;
}

/* endregion --- LOGIN --- */
/* region === SVG === */
#svg {
  shape-rendering: geometricPrecision;
  text-rendering: geometricPrecision;
  fill-rule: evenodd;
  clip-rule: evenodd;
}

#svg-board {
  width: 100%;
  height: 100%;
}
#svg-board.subtle .svg-css-logo {
  opacity: 0.25;
}
#svg-board.loading > g:not(.svg-css-logo) {
  opacity: 0;
}
#svg-board > g:not(.svg-css-logo) {
  transition: opacity 0.5s 0.5s;
}

.svg-css-bg {
  fill: black;
}

.svg-css-feld {
  fill: #ffffff;
}

.svg-css-mitte {
  fill: #000000;
}

.svg-css-time {
  fill: #ffffff;
  transition: fill 0.5s;
}
.svg-css-time.earnedplus {
  fill: #198754;
}
.svg-css-time.earnedplusplus {
  fill: #0dbca4;
}
.svg-css-time.earnedplusplusplus {
  fill: #197187;
}
.svg-css-time.earnedminus {
  fill: #dc3545;
}
.svg-css-time.earnedminusminus {
  fill: #e7632e;
}
.svg-css-time.earnedminusminusminus {
  fill: #e7a32e;
}

.svg-css-ereignisse {
  fill: #ff9235;
  fill-rule: nonzero;
}

.svg-css-aufgaben {
  fill: #5a08d0;
  fill-rule: nonzero;
}

.svg-css-text {
  fill: black;
  font-weight: bold;
  font-size: 6.195px;
  font-family: "Noto Sans", "Noto Sans Backup", sans-serif;
  transition: fill 0.5s;
}
.svg-css-text.earned {
  fill: white;
}
.svg-css-text.earnedplusplus, .svg-css-text.earnedplusplusplus {
  font-size: 4.5px;
  transform: translateX(-0.5px) translateY(-0.8px);
}
.svg-css-text.singlechar.earnedplusplus, .svg-css-text.singlechar.earnedplusplusplus {
  transform: translateX(-2px) translateY(-0.8px);
}
.svg-css-text.earnedminus, .svg-css-text.earnedminusminus, .svg-css-text.earnedminusminusminus {
  font-size: 4.5px;
  transform: translateX(-0.5px) translateY(-0.8px);
}
.svg-css-text.earnedminusminus, .svg-css-text.earnedminusminusminus {
  font-size: 3.5px;
}
.svg-css-text.singlechar.earnedminus {
  transform: translateX(0) translateY(-0.8px);
}
.svg-css-text.singlechar.earnedminusminus, .svg-css-text.singlechar.earnedminusminusminus {
  transform: translateX(-2.2px) translateY(-0.8px);
}

.svg-css-cardtext {
  fill: white;
  fill-rule: nonzero;
}

.svg-css-logo-text {
  fill: white;
}

.svg-css-feld-text {
  fill: #000000;
  fill-rule: nonzero;
}

.svg-css-gradient {
  fill: url(#svg-gradient-0);
}

.svg-css-card {
  fill: #ffffff;
}

.svg-css-card-border {
  fill: #ffffff;
}
.svg-css-card-border.aufgabe {
  fill: #5a08d0;
}
.svg-css-card-border.ereignis {
  fill: #ff9235;
}
.svg-css-card-border.grossereignis {
  fill: #000000;
}
.svg-css-card-border.serviceteam {
  fill: #ff0000;
}

.svg-css-logo {
  transition: opacity 0.5s;
}

.svg-gradient-stop {
  transition: all 1s;
}
.svg-gradient-stop.off {
  stop-color: #000000 !important;
}

#gradient-stop-0 {
  stop-opacity: 1;
  stop-color: #5a08d0;
}

#gradient-stop-1 {
  stop-opacity: 1;
  stop-color: #ff9235;
}

/* endregion --- SVG --- */
/* region === CARD === */
#cardHolder {
  width: 100%;
  height: 100%;
  background-color: transparent;
}
#cardHolder .title {
  text-align: center;
  font-size: 1.7rem;
  margin: 0;
}
#cardHolder .description {
  font-size: 1.2rem;
}
#cardHolder .progressbar {
  width: 100%;
  background-color: #ced4da;
  border-radius: 0.5rem;
  overflow: hidden;
}
#cardHolder .progressbar .progress {
  text-align: center;
  font-weight: bold;
  background-color: #dc3545;
  transition: width 0.5s;
  min-width: fit-content;
  max-width: 100%;
  padding: 0 1rem;
  color: #fff;
}
#cardHolder .progressbar .progress.okay {
  background-color: #198754;
}
#cardHolder .buttonholder {
  display: flex;
  width: 100%;
  gap: 0.5rem;
}
#cardHolder .buttonholder button {
  flex-grow: 1;
  text-align: center;
  vertical-align: middle;
  background-color: white;
  border: 1px solid rgba(255, 255, 255, 0.75);
  padding: 0.375rem 0.75rem;
  font-size: 1.2rem;
  line-height: 1.5;
  border-radius: 0.5rem;
  transition: background-color 0.5s;
}
#cardHolder .buttonholder button:not(:disabled) {
  cursor: pointer;
  background-color: #ced4da;
}
#cardHolder .buttonholder button:not(:disabled):hover {
  background-color: #a2aeb9;
}
#cardHolder .buttonholder button:not(:disabled).submit {
  background-color: #198754;
  color: #ffffff;
}
#cardHolder .buttonholder button:not(:disabled).submit:hover {
  background-color: #0d462c;
}
#cardHolder .buttonholder button:not(:disabled).abort {
  background-color: #dc3545;
  color: #ffffff;
}
#cardHolder .buttonholder button:not(:disabled).abort:hover {
  background-color: #a71d2a;
}
#cardHolder > div {
  position: absolute;
  width: auto;
  height: auto;
  left: 18%;
  right: 18%;
  top: 27%;
  bottom: 27%;
  background-color: transparent;
  padding: 0 2.5%;
  display: flex;
  flex-direction: column;
}
#cardHolder > div#cardContent {
  /* region === normal Card === */
  /* endregion --- normal Card --- */
  /* region === Grossereignis === */
  /* endregion --- Grossereignis --- */
  /* region === Option Layout === */
  /* endregion --- Option Layout --- */
}
#cardHolder > div#cardContent > .options {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  overflow: auto;
  gap: 0.25rem;
}
#cardHolder > div#cardContent > .info {
  height: 100%;
  display: flex;
  flex-direction: column;
}
#cardHolder > div#cardContent > .mainOptions {
  height: 100%;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow: auto;
  gap: 0.25rem;
}
#cardHolder > div#cardContent > .mainOptions > .option > div:first-child {
  padding: 0.25rem 1rem !important;
}
#cardHolder > div#cardContent > .mainOptions > .option > div:first-child > div:first-child > .title {
  font-size: 1.5rem !important;
  font-weight: bold;
}
#cardHolder > div#cardContent > .mainOptions > .option:first-child {
  width: 100%;
}
#cardHolder > div#cardContent > .mainOptions > .option:first-child > div:first-child {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 0.25rem 1rem;
}
#cardHolder > div#cardContent > .mainOptions > .option:first-child > div:first-child > div:first-child {
  height: initial !important;
}
#cardHolder > div#cardContent > .mainOptions > .option:first-child > div:first-child.clickable {
  opacity: 1;
  cursor: pointer;
}
#cardHolder > div#cardContent > .mainOptions > .option:first-child > div:first-child.clickable:hover {
  background-color: #ced4da;
  transition: background-color 0.125s;
}
#cardHolder > div#cardContent > .mainOptions > .option:first-child > div:first-child hr {
  width: 100%;
  border-top-width: 0.05rem;
  margin: auto;
}
#cardHolder > div#cardContent > .mainOptions > .option:first-child > div:first-child > .optional, #cardHolder > div#cardContent > .mainOptions > .option:first-child > div:first-child .essential {
  width: 50%;
  padding: 0 1rem;
  box-sizing: border-box;
}
#cardHolder > div#cardContent > .mainOptions > .option:first-child > div:first-child > .optional > .title, #cardHolder > div#cardContent > .mainOptions > .option:first-child > div:first-child .essential > .title {
  font-size: 1rem;
  margin-bottom: 0.75rem;
}
#cardHolder > div#cardContent > .mainOptions > .option:first-child > div:first-child > .optional > .option, #cardHolder > div#cardContent > .mainOptions > .option:first-child > div:first-child .essential > .option {
  border-bottom: solid 0.05rem rgba(0, 0, 0, 0.5);
}
#cardHolder > div#cardContent > .mainOptions > .option:first-child > div:first-child > .optional > .option:nth-child(2), #cardHolder > div#cardContent > .mainOptions > .option:first-child > div:first-child .essential > .option:nth-child(2) {
  border-top: solid 0.05rem rgba(0, 0, 0, 0.5);
}
#cardHolder > div#cardContent > .mainOptions > .option:first-child > div:first-child > .optional > .option > div, #cardHolder > div#cardContent > .mainOptions > .option:first-child > div:first-child .essential > .option > div {
  padding: 0.25rem 0 !important;
  border: none;
}
#cardHolder > div#cardContent > .mainOptions > .option:first-child > div:first-child > .optional > .option > div > div > div:not(.title), #cardHolder > div#cardContent > .mainOptions > .option:first-child > div:first-child .essential > .option > div > div > div:not(.title) {
  font-size: 1.2rem;
}
#cardHolder > div#cardContent > .mainOptions > .option:first-child > div:first-child > .optional > .option > div > div > div.title, #cardHolder > div#cardContent > .mainOptions > .option:first-child > div:first-child .essential > .option > div > div > div.title {
  font-size: 0.8rem;
}
#cardHolder > div#cardContent > .mainOptions > .option:first-child > .subOptions {
  height: 100%;
  border: none;
  display: flex;
  flex-direction: row;
  gap: 0.25rem;
}
#cardHolder > div#cardContent > .mainOptions > .option:first-child > .subOptions > .optional, #cardHolder > div#cardContent > .mainOptions > .option:first-child > .subOptions .essential {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
#cardHolder > div#cardContent > .mainOptions > .option:first-child > .subOptions > .optional > .title, #cardHolder > div#cardContent > .mainOptions > .option:first-child > .subOptions .essential > .title {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}
#cardHolder > div#cardContent > .mainOptions > .option:first-child > .subOptions > .optional > div, #cardHolder > div#cardContent > .mainOptions > .option:first-child > .subOptions .essential > div {
  width: 100%;
}
#cardHolder > div#cardContent > .mainOptions > .option:first-child > .subOptions > .optional > div:not(.title) > div:first-child > div:first-child > .title, #cardHolder > div#cardContent > .mainOptions > .option:first-child > .subOptions .essential > div:not(.title) > div:first-child > div:first-child > .title {
  font-size: 0.9rem !important;
}
#cardHolder > div#cardContent > .mainOptions > .option:first-child > .subOptions > .optional > div:not(.title) > div:first-child > div:first-child > :not(.title), #cardHolder > div#cardContent > .mainOptions > .option:first-child > .subOptions .essential > div:not(.title) > div:first-child > div:first-child > :not(.title) {
  font-size: 1.4rem !important;
}
#cardHolder > div#cardContent > .options .option, #cardHolder > div#cardContent .mainOptions .option, #cardHolder > div#cardContent .subOptions .option {
  flex-grow: 1;
}
#cardHolder > div#cardContent > .options .option > div:first-child, #cardHolder > div#cardContent .mainOptions .option > div:first-child, #cardHolder > div#cardContent .subOptions .option > div:first-child {
  height: 100%;
  border-radius: 0.5rem;
  box-sizing: border-box;
  transition: background-color 0.5s;
  opacity: 0.4;
  border: solid 1px #ced4da;
  padding: 0.25rem 1rem;
}
#cardHolder > div#cardContent > .options .option > div:first-child > div:first-child, #cardHolder > div#cardContent .mainOptions .option > div:first-child > div:first-child, #cardHolder > div#cardContent .subOptions .option > div:first-child > div:first-child {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100%;
}
#cardHolder > div#cardContent > .options .option > div:first-child > div:first-child div:not(.title), #cardHolder > div#cardContent .mainOptions .option > div:first-child > div:first-child div:not(.title), #cardHolder > div#cardContent .subOptions .option > div:first-child > div:first-child div:not(.title) {
  font-size: 1.5rem;
}
#cardHolder > div#cardContent > .options .option > div:first-child > div:first-child .title, #cardHolder > div#cardContent .mainOptions .option > div:first-child > div:first-child .title, #cardHolder > div#cardContent .subOptions .option > div:first-child > div:first-child .title {
  font-size: 1rem;
  flex: 1 0;
}
#cardHolder > div#cardContent > .options .option > div:first-child > div:first-child .timeCost, #cardHolder > div#cardContent .mainOptions .option > div:first-child > div:first-child .timeCost, #cardHolder > div#cardContent .subOptions .option > div:first-child > div:first-child .timeCost {
  padding-right: 1rem;
}
#cardHolder > div#cardContent > .options .option > div:first-child > div:first-child .timeCost > .icon, #cardHolder > div#cardContent .mainOptions .option > div:first-child > div:first-child .timeCost > .icon, #cardHolder > div#cardContent .subOptions .option > div:first-child > div:first-child .timeCost > .icon {
  color: #f00;
}
#cardHolder > div#cardContent > .options .option > div:first-child > div:first-child .score, #cardHolder > div#cardContent .mainOptions .option > div:first-child > div:first-child .score, #cardHolder > div#cardContent .subOptions .option > div:first-child > div:first-child .score {
  padding-right: 0.5rem;
}
#cardHolder > div#cardContent > .options .option > div:first-child > div:first-child .score > .icon.fa-trophy, #cardHolder > div#cardContent .mainOptions .option > div:first-child > div:first-child .score > .icon.fa-trophy, #cardHolder > div#cardContent .subOptions .option > div:first-child > div:first-child .score > .icon.fa-trophy {
  color: #e6b71c;
}
#cardHolder > div#cardContent > .options .option > div:first-child > div:first-child .score > .icon.fa-dice, #cardHolder > div#cardContent .mainOptions .option > div:first-child > div:first-child .score > .icon.fa-dice, #cardHolder > div#cardContent .subOptions .option > div:first-child > div:first-child .score > .icon.fa-dice {
  color: #000000;
}
#cardHolder > div#cardContent > .options .option > div:first-child > div:first-child .score > .icon.fa-exclamation, #cardHolder > div#cardContent .mainOptions .option > div:first-child > div:first-child .score > .icon.fa-exclamation, #cardHolder > div#cardContent .subOptions .option > div:first-child > div:first-child .score > .icon.fa-exclamation {
  color: #f00;
}
#cardHolder > div#cardContent > .options .option > div:first-child > div:first-child .score > .value, #cardHolder > div#cardContent .mainOptions .option > div:first-child > div:first-child .score > .value, #cardHolder > div#cardContent .subOptions .option > div:first-child > div:first-child .score > .value {
  display: inline-block;
  min-width: 2.2rem;
}
#cardHolder > div#cardContent > .options .option > div:first-child > div:first-child .player .icon, #cardHolder > div#cardContent .mainOptions .option > div:first-child > div:first-child .player .icon, #cardHolder > div#cardContent .subOptions .option > div:first-child > div:first-child .player .icon {
  color: #ea00a8;
}
#cardHolder > div#cardContent > .options .option:first-child:nth-last-child(1), #cardHolder > div#cardContent > .options .option:first-child:nth-last-child(2), #cardHolder > div#cardContent > .options .option:first-child:nth-last-child(2) ~ .option, #cardHolder > div#cardContent > .options .option:first-child:nth-last-child(3), #cardHolder > div#cardContent > .options .option:first-child:nth-last-child(3) ~ .option, #cardHolder > div#cardContent > .options .option:first-child:nth-last-child(4), #cardHolder > div#cardContent > .options .option:first-child:nth-last-child(4) ~ .option, #cardHolder > div#cardContent .mainOptions .option:first-child:nth-last-child(1), #cardHolder > div#cardContent .mainOptions .option:first-child:nth-last-child(2), #cardHolder > div#cardContent .mainOptions .option:first-child:nth-last-child(2) ~ .option, #cardHolder > div#cardContent .mainOptions .option:first-child:nth-last-child(3), #cardHolder > div#cardContent .mainOptions .option:first-child:nth-last-child(3) ~ .option, #cardHolder > div#cardContent .mainOptions .option:first-child:nth-last-child(4), #cardHolder > div#cardContent .mainOptions .option:first-child:nth-last-child(4) ~ .option, #cardHolder > div#cardContent .subOptions .option:first-child:nth-last-child(1), #cardHolder > div#cardContent .subOptions .option:first-child:nth-last-child(2), #cardHolder > div#cardContent .subOptions .option:first-child:nth-last-child(2) ~ .option, #cardHolder > div#cardContent .subOptions .option:first-child:nth-last-child(3), #cardHolder > div#cardContent .subOptions .option:first-child:nth-last-child(3) ~ .option, #cardHolder > div#cardContent .subOptions .option:first-child:nth-last-child(4), #cardHolder > div#cardContent .subOptions .option:first-child:nth-last-child(4) ~ .option {
  width: 100%;
  min-height: 25%;
}
#cardHolder > div#cardContent > .options .option:first-child:nth-last-child(1) > div:first-child, #cardHolder > div#cardContent > .options .option:first-child:nth-last-child(2) > div:first-child, #cardHolder > div#cardContent > .options .option:first-child:nth-last-child(2) ~ .option > div:first-child, #cardHolder > div#cardContent > .options .option:first-child:nth-last-child(3) > div:first-child, #cardHolder > div#cardContent > .options .option:first-child:nth-last-child(3) ~ .option > div:first-child, #cardHolder > div#cardContent > .options .option:first-child:nth-last-child(4) > div:first-child, #cardHolder > div#cardContent > .options .option:first-child:nth-last-child(4) ~ .option > div:first-child, #cardHolder > div#cardContent .mainOptions .option:first-child:nth-last-child(1) > div:first-child, #cardHolder > div#cardContent .mainOptions .option:first-child:nth-last-child(2) > div:first-child, #cardHolder > div#cardContent .mainOptions .option:first-child:nth-last-child(2) ~ .option > div:first-child, #cardHolder > div#cardContent .mainOptions .option:first-child:nth-last-child(3) > div:first-child, #cardHolder > div#cardContent .mainOptions .option:first-child:nth-last-child(3) ~ .option > div:first-child, #cardHolder > div#cardContent .mainOptions .option:first-child:nth-last-child(4) > div:first-child, #cardHolder > div#cardContent .mainOptions .option:first-child:nth-last-child(4) ~ .option > div:first-child, #cardHolder > div#cardContent .subOptions .option:first-child:nth-last-child(1) > div:first-child, #cardHolder > div#cardContent .subOptions .option:first-child:nth-last-child(2) > div:first-child, #cardHolder > div#cardContent .subOptions .option:first-child:nth-last-child(2) ~ .option > div:first-child, #cardHolder > div#cardContent .subOptions .option:first-child:nth-last-child(3) > div:first-child, #cardHolder > div#cardContent .subOptions .option:first-child:nth-last-child(3) ~ .option > div:first-child, #cardHolder > div#cardContent .subOptions .option:first-child:nth-last-child(4) > div:first-child, #cardHolder > div#cardContent .subOptions .option:first-child:nth-last-child(4) ~ .option > div:first-child {
  padding: 0 12.5%;
}
#cardHolder > div#cardContent > .options .option:first-child:nth-last-child(5), #cardHolder > div#cardContent > .options .option:first-child:nth-last-child(5) ~ .option, #cardHolder > div#cardContent > .options .option:first-child:nth-last-child(6), #cardHolder > div#cardContent > .options .option:first-child:nth-last-child(6) ~ .option, #cardHolder > div#cardContent .mainOptions .option:first-child:nth-last-child(5), #cardHolder > div#cardContent .mainOptions .option:first-child:nth-last-child(5) ~ .option, #cardHolder > div#cardContent .mainOptions .option:first-child:nth-last-child(6), #cardHolder > div#cardContent .mainOptions .option:first-child:nth-last-child(6) ~ .option, #cardHolder > div#cardContent .subOptions .option:first-child:nth-last-child(5), #cardHolder > div#cardContent .subOptions .option:first-child:nth-last-child(5) ~ .option, #cardHolder > div#cardContent .subOptions .option:first-child:nth-last-child(6), #cardHolder > div#cardContent .subOptions .option:first-child:nth-last-child(6) ~ .option {
  width: 50%;
  min-height: 33.333%;
}
#cardHolder > div#cardContent > .options .option:first-child:nth-last-child(7), #cardHolder > div#cardContent > .options .option:first-child:nth-last-child(7) ~ .option, #cardHolder > div#cardContent > .options .option:first-child:nth-last-child(8), #cardHolder > div#cardContent > .options .option:first-child:nth-last-child(8) ~ .option, #cardHolder > div#cardContent .mainOptions .option:first-child:nth-last-child(7), #cardHolder > div#cardContent .mainOptions .option:first-child:nth-last-child(7) ~ .option, #cardHolder > div#cardContent .mainOptions .option:first-child:nth-last-child(8), #cardHolder > div#cardContent .mainOptions .option:first-child:nth-last-child(8) ~ .option, #cardHolder > div#cardContent .subOptions .option:first-child:nth-last-child(7), #cardHolder > div#cardContent .subOptions .option:first-child:nth-last-child(7) ~ .option, #cardHolder > div#cardContent .subOptions .option:first-child:nth-last-child(8), #cardHolder > div#cardContent .subOptions .option:first-child:nth-last-child(8) ~ .option {
  width: 50%;
}
#cardHolder > div#cardContent > .options .option.clickable > div, #cardHolder > div#cardContent .mainOptions .option.clickable > div, #cardHolder > div#cardContent .subOptions .option.clickable > div {
  opacity: 1;
  cursor: pointer;
}
#cardHolder > div#cardContent > .options .option.clickable > div:hover, #cardHolder > div#cardContent .mainOptions .option.clickable > div:hover, #cardHolder > div#cardContent .subOptions .option.clickable > div:hover {
  background-color: #ced4da;
  transition: background-color 0.125s;
}
#cardHolder > div#paymentContent .title {
  font-weight: normal;
}
#cardHolder > div#paymentContent .description {
  padding-top: 2rem;
}
#cardHolder > div#paymentContent .description .warnings {
  padding-top: 2rem;
  font-weight: bold;
  font-size: 1.5rem;
}
#cardHolder > div#paymentContent .description .warnings > div {
  color: #dc3545;
}
#cardHolder > div#paymentContent .description .info {
  padding-top: 2rem;
  font-weight: bold;
  font-size: 1.5rem;
}
#cardHolder > div#paymentContent .description .info > div {
  color: #ff9235;
}
#cardHolder > div#paymentContent .description .info > div.infoGreen {
  color: #198754;
}
#cardHolder > div#chanceContent #chanceDice .dice-container {
  margin: 0 auto;
}
#cardHolder > div#helferContent .title {
  text-align: center;
  font-size: 2rem;
}
#cardHolder > div#pointContent .description {
  text-align: center;
  font-size: 1.5rem;
  padding-top: 2rem;
}
#cardHolder > div#gameOver .credits {
  font-size: 1.5rem;
  text-align: left;
  padding-top: 4rem;
  padding-left: 4rem;
}

/* endregion --- CARD --- */
/* region === DICE === */
#helperDice1 {
  position: absolute;
  left: 11rem;
}

#helperDice2 {
  position: absolute;
  right: 11rem;
}

.dice-container {
  width: min(20vw, 30vh);
  height: min(20vw, 30vh);
  background-color: transparent;
}
.dice-container > div {
  width: 50%;
  height: 50%;
  margin: auto;
  position: relative;
  perspective: calc(min(20vw, 30vh) * 2.5);
  perspective-origin: 50% 100%;
}

.dicebox {
  pointer-events: none;
}
.dicebox.aufgabe .dice {
  left: -200%;
}
.dicebox.ereignis .dice {
  left: 200%;
}
.dicebox.clickable {
  pointer-events: all;
}
.dicebox .dice * {
  opacity: 1;
  transition: opacity 0.5s;
}
.dicebox.invisible .dice * {
  opacity: 0;
}
.dicebox.clickable .dice:hover {
  cursor: pointer;
}
.dicebox .dice {
  width: 100%;
  height: 100%;
  top: 50%;
  left: 0;
  position: absolute;
  transform-style: preserve-3d;
}
.dicebox .dice div {
  background: #e6e6e6;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border: solid calc(min(20vw, 30vh) / 80) black;
  box-sizing: border-box;
}
.dicebox .dice .dot {
  display: block;
  position: absolute;
  width: 15%;
  height: 15%;
  background: black;
  border-radius: 50%;
}
.dicebox .dice.start {
  transition: left cubic-bezier(0.66, 0, 0.33, 1) 1s, transform cubic-bezier(0.66, 0, 0.75, 0.75) 1s;
}
.dicebox .dice.roll {
  transition: left cubic-bezier(0.66, 0, 0.33, 1) 1s, transform linear 1s;
}
.dicebox .dice.end {
  transition: left cubic-bezier(0.66, 0, 0.33, 1) 1s, transform cubic-bezier(0.25, 0.25, 0.33, 1) 1s;
}
.dicebox .dice .front {
  transform: translateZ(calc(min(20vw, 30vh) / 4));
}
.dicebox .dice .back {
  transform: rotateX(-180deg) translateZ(calc(min(20vw, 30vh) / 4));
}
.dicebox .dice .right {
  transform: rotateY(90deg) translateZ(calc(min(20vw, 30vh) / 4));
}
.dicebox .dice .left {
  transform: rotateY(-90deg) translateZ(calc(min(20vw, 30vh) / 4));
}
.dicebox .dice .top {
  transform: rotateX(90deg) translateZ(calc(min(20vw, 30vh) / 4));
}
.dicebox .dice .bottom {
  transform: rotateX(-90deg) translateZ(calc(min(20vw, 30vh) / 4));
}
.dicebox.colored .dice > .top .dot, .dicebox.colored .dice > .right .dot, .dicebox.colored .dice > .back .dot {
  background: #5a08d0;
}
.dicebox.colored .dice > .bottom .dot, .dicebox.colored .dice > .left .dot, .dicebox.colored .dice > .front .dot {
  background: #ff9235;
}
.dicebox.chance .dice .dot {
  background: white;
}
.dicebox.chance .dice > .top, .dicebox.chance .dice > .right, .dicebox.chance .dice > .back {
  background: #dc3545;
}
.dicebox.chance .dice > .bottom, .dicebox.chance .dice > .left, .dicebox.chance .dice > .front {
  background: #198754;
}

/* region Position dots on the dice*/
.dice .top .dot1 {
  top: 42.5%;
  left: 42.5%;
}
.dice .back .dot1 {
  top: 22.5%;
  left: 22.5%;
}
.dice .back .dot2 {
  top: 62.5%;
  left: 62.5%;
}
.dice .right .dot1 {
  top: 22.5%;
  left: 22.5%;
}
.dice .right .dot2 {
  top: 42.5%;
  left: 42.5%;
}
.dice .right .dot3 {
  top: 62.5%;
  left: 62.5%;
}
.dice .left .dot1 {
  top: 22.5%;
  left: 22.5%;
}
.dice .left .dot2 {
  top: 22.5%;
  left: 62.5%;
}
.dice .left .dot3 {
  top: 62.5%;
  left: 22.5%;
}
.dice .left .dot4 {
  top: 62.5%;
  left: 62.5%;
}
.dice .front .dot1 {
  top: 22.5%;
  left: 22.5%;
}
.dice .front .dot2 {
  top: 22.5%;
  left: 62.5%;
}
.dice .front .dot3 {
  top: 42.5%;
  left: 42.5%;
}
.dice .front .dot4 {
  top: 62.5%;
  left: 22.5%;
}
.dice .front .dot5 {
  top: 62.5%;
  left: 62.5%;
}
.dice .bottom .dot1 {
  top: 22.5%;
  left: 22.5%;
}
.dice .bottom .dot2 {
  top: 22.5%;
  left: 42.5%;
}
.dice .bottom .dot3 {
  top: 22.5%;
  left: 62.5%;
}
.dice .bottom .dot4 {
  top: 62.5%;
  left: 22.5%;
}
.dice .bottom .dot5 {
  top: 62.5%;
  left: 42.5%;
}
.dice .bottom .dot6 {
  top: 62.5%;
  left: 62.5%;
}

/* endregion */
/* region Rotate dice with data-attribute*/
.dice[data-roll="1"] {
  transform: rotateX(270deg) rotateY(0deg) rotateZ(0deg);
}
.dice[data-roll="2"] {
  transform: rotateX(270deg) rotateY(90deg) rotateZ(360deg);
}
.dice[data-roll="3"] {
  transform: rotateX(270deg) rotateY(180deg) rotateZ(720deg);
}
.dice[data-roll="4"] {
  transform: rotateX(270deg) rotateY(270deg) rotateZ(1080deg);
}
.dice[data-roll="5"] {
  transform: rotateX(360deg) rotateY(180deg) rotateZ(0deg);
}
.dice[data-roll="6"] {
  transform: rotateX(360deg) rotateY(540deg) rotateZ(90deg);
}
.dice[data-roll="7"] {
  transform: rotateX(360deg) rotateY(900deg) rotateZ(180deg);
}
.dice[data-roll="8"] {
  transform: rotateX(360deg) rotateY(1260deg) rotateZ(270deg);
}
.dice[data-roll="9"] {
  transform: rotateX(270deg) rotateY(0deg) rotateZ(270deg);
}
.dice[data-roll="10"] {
  transform: rotateX(630deg) rotateY(90deg) rotateZ(270deg);
}
.dice[data-roll="11"] {
  transform: rotateX(990deg) rotateY(180deg) rotateZ(270deg);
}
.dice[data-roll="12"] {
  transform: rotateX(1350deg) rotateY(270deg) rotateZ(270deg);
}
.dice[data-roll="13"] {
  transform: rotateX(270deg) rotateY(0deg) rotateZ(90deg);
}
.dice[data-roll="14"] {
  transform: rotateX(630deg) rotateY(90deg) rotateZ(90deg);
}
.dice[data-roll="15"] {
  transform: rotateX(990deg) rotateY(180deg) rotateZ(90deg);
}
.dice[data-roll="16"] {
  transform: rotateX(1350deg) rotateY(270deg) rotateZ(90deg);
}
.dice[data-roll="17"] {
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
.dice[data-roll="18"] {
  transform: rotateX(0deg) rotateY(360deg) rotateZ(90deg);
}
.dice[data-roll="19"] {
  transform: rotateX(0deg) rotateY(720deg) rotateZ(180deg);
}
.dice[data-roll="20"] {
  transform: rotateX(0deg) rotateY(1080deg) rotateZ(270deg);
}
.dice[data-roll="21"] {
  transform: rotateX(450deg) rotateY(0deg) rotateZ(0deg);
}
.dice[data-roll="22"] {
  transform: rotateX(450deg) rotateY(90deg) rotateZ(360deg);
}
.dice[data-roll="23"] {
  transform: rotateX(450deg) rotateY(180deg) rotateZ(720deg);
}
.dice[data-roll="24"] {
  transform: rotateX(450deg) rotateY(270deg) rotateZ(1080deg);
}

/* endregion */
/* endregion --- DICE --- */
/* region === players === */
#playerHolder {
  position: relative;
  transition: opacity 0.5s 0.5s;
  font-size: 2rem;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  line-height: 3rem;
}
#playerHolder > * {
  background: #ea00a8;
  position: absolute;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
}
#playerHolder > *[data-order="1"] {
  z-index: 91;
}
#playerHolder > *[data-order="2"] {
  z-index: 92;
}
#playerHolder > *[data-order="3"] {
  z-index: 93;
}
#playerHolder > *[data-order="4"] {
  z-index: 94;
}
#playerHolder > *.dragging {
  z-index: 99;
}
#playerHolder > *::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  border-radius: 50%;
  transition: box-shadow cubic-bezier(0, 0, 0, 1) 0.5s;
}
#playerHolder > *.dragging::after {
  box-shadow: 0 7.5px 10px 0 rgba(0, 0, 0, 0.75);
}
#playerHolder > *.draggable:not(.doNotDisturb) {
  cursor: grab;
}
#playerHolder > *.goback {
  transition: left cubic-bezier(0.66, 0, 0.33, 1) 0.5s, top cubic-bezier(0.66, 0, 0.33, 1) 0.5s;
}

/* endregion --- players --- */
/* region === zeitstein === */
#zeitstein {
  position: absolute;
  height: 9.444389533rem;
  width: 1.5rem;
  background-color: #ff4433;
  transform-origin: bottom center;
  transition: top 250ms linear, left 250ms linear, transform 250ms linear, opacity 0.5s 0.5s;
  /* region ===upper row=== */
  /* endregion ---upper row--- */
  /* region ===right row=== */
  /* endregion ---right row--- */
  /* region ===bottom row=== */
  /* endregion ---bottom row--- */
  /* region ===left row=== */
  /* endregion ---left row--- */
}
#zeitstein[data-field="1"], #zeitstein[data-field="23"] {
  transition: top 250ms linear, left 250ms linear, opacity 1s;
  top: 3.4722222222rem;
  left: 24.58388648rem;
}
#zeitstein[data-field="2"] {
  top: 3.4722222222rem;
  left: 33.1947067157rem;
}
#zeitstein[data-field="3"] {
  top: 3.4722222222rem;
  left: 41.8055553826rem;
}
#zeitstein[data-field="4"] {
  top: 3.4722222222rem;
  left: 50.4164040494rem;
}
#zeitstein[data-field="5"] {
  top: 3.4722222222rem;
  left: 59.0272501212rem;
}
#zeitstein[data-field="6"] {
  top: 3.4722222222rem;
  left: 67.6381792341rem;
}
#zeitstein[data-field="7"] {
  top: calc(15.972222821310917rem - 9.444389533rem + (1.5rem / 2));
  left: calc(70.41593798163797rem - (1.5rem / 2));
  transform: rotate(90deg);
}
#zeitstein[data-field="8"] {
  top: calc(23.93519443112071rem - 9.444389533rem + (1.5rem / 2));
  left: calc(70.41593798163797rem - (1.5rem / 2));
  transform: rotate(90deg);
}
#zeitstein[data-field="9"] {
  top: calc(31.898166040930505rem - 9.444389533rem + (1.5rem / 2));
  left: calc(70.41593798163797rem - (1.5rem / 2));
  transform: rotate(90deg);
}
#zeitstein[data-field="10"] {
  top: calc(39.86111218947076rem - 9.444389533rem + (1.5rem / 2));
  left: calc(70.41593798163797rem - (1.5rem / 2));
  transform: rotate(90deg);
}
#zeitstein[data-field="11"] {
  top: calc(42.638888769071144rem - 9.444389533rem);
  left: calc(67.36045889302987rem - 1.5rem);
  transform: rotate(180deg);
}
#zeitstein[data-field="12"] {
  top: calc(42.638888769071144rem - 9.444389533rem);
  left: calc(58.7496128212027rem - 1.5rem);
  transform: rotate(180deg);
}
#zeitstein[data-field="13"] {
  top: calc(42.638888769071144rem - 9.444389533rem);
  left: calc(50.138766749375534rem - 1.5rem);
  transform: rotate(180deg);
}
#zeitstein[data-field="14"] {
  top: calc(42.638888769071144rem - 9.444389533rem);
  left: calc(41.52791808251621rem - 1.5rem);
  transform: rotate(180deg);
}
#zeitstein[data-field="15"] {
  top: calc(42.638888769071144rem - 9.444389533rem);
  left: calc(32.91706941565689rem - 1.5rem);
  transform: rotate(180deg);
}
#zeitstein[data-field="16"] {
  top: calc(42.638888769071144rem - 9.444389533rem);
  left: calc(24.306220748797568rem - 1.5rem);
  transform: rotate(180deg);
}
#zeitstein[data-field="17"] {
  top: calc(42.638888769071144rem - 9.444389533rem);
  left: calc(15.695289689667371rem - 1.5rem);
  transform: rotate(180deg);
}
#zeitstein[data-field="18"] {
  top: calc(39.583333333333336rem - 9.444389533rem - (1.5rem / 2));
  left: calc(3.473165732662694rem + 9.444389533rem - (1.5rem / 2));
  transform: rotate(270deg);
}
#zeitstein[data-field="19"] {
  top: calc(31.62036032343107rem - 9.444389533rem - (1.5rem / 2));
  left: calc(3.473165732662694rem + 9.444389533rem - (1.5rem / 2));
  transform: rotate(270deg);
}
#zeitstein[data-field="20"] {
  top: calc(23.657389825263632rem - 9.444389533rem - (1.5rem / 2));
  left: calc(3.473165732662694rem + 9.444389533rem - (1.5rem / 2));
  transform: rotate(270deg);
}
#zeitstein[data-field="21"] {
  top: calc(15.694444444444445rem - 9.444389533rem - (1.5rem / 2));
  left: calc(3.473165732662694rem + 9.444389533rem - (1.5rem / 2));
  transform: rotate(270deg);
}
#zeitstein[data-field="22"], #zeitstein[data-field="0"] {
  top: 3.4722222222rem;
  left: 15.9729046882rem;
  transform: rotate(360deg);
}

/* endregion --- zeitstein --- */
/* region === FAKE BOOTSTRAP === */
.d-none {
  display: none !important;
}

.invisible {
  opacity: 0;
}

.w-100 {
  width: 100%;
}

.h-100 {
  height: 100%;
}

.nowrap {
  white-space: nowrap;
}

.pe-none {
  pointer-events: none;
}

/* endregion --- FAKE BOOTSTRAP --- */

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