#maingame {
    overflow: hidden;
    touch-action: none;
    -ms-touch-action: none;
    font-size: 20px;
    text-align: center;
}

.fulldom {
  position: absolute;
  top:50px;
  left:0;
  right:0;
  bottom:0;
}

.gm {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}

.b1 {
  background-color: aqua;
}

.b2 {
  background-color: brown;
}

.textcenter {
  text-align: center;
}


.loadingcontainer {
  width: 10vh;
  height: 10vh;
}

.responsive_img_simpl {
  position: absolute;
  left:50%;
  top:50%;
  width: 100%;
  height: auto;
  transform: translate(-50%,-50%); }

.margintop {
  margin-top: 12vh;
  color: white;
}
@media screen and (max-aspect-ratio: 9/10) {
  .margintop {
    margin-top: 4vh; } }

.margintop2 {
  margin-top: 2vh;
  color: white;
}

.namemargin {
  margin-top: 8vh;
  color: white;
}

.img_landscape {
    display: block;
}

.middlediv {
  position: absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
}

.font_big{
    font-size: 2.7vw; }
  @media screen and (max-aspect-ratio: 9/10) {
    .font_big {
      font-size: 3.5vh; } }
  @media screen and (min-aspect-ratio: 9/10) and (max-aspect-ratio: 11/10) {
    .font_big {
      font-size: 2.7vw; } }
  @media screen and (min-aspect-ratio: 11/10) {
    .font_big {
      font-size: 3.5vw; } }

.color_white {
  color: #fafafa;
}

.leaderboard {
  position: absolute;
  margin: 2vh 0;
  overflow-y: scroll;
  font-size: 12px;
  top: 160px;
  left: 10%;
  right: 10%;
  bottom: 20%;
}

.joinedplayers {
  position: absolute;
  overflow-y: scroll;
  font-size: 12px;
  top: 260px;
  left: 10%;
  right: 10%;
  bottom: 0;
}

.joinedplayers_start {
  overflow-y: scroll;
  font-size: 12px;
  height: calc(25vh - 40px - 2.5rem);
}

.stillplaying {
  position: absolute;
  overflow-y: scroll;
  font-size: 12px;
  top: 45%;
  left: 10%;
  right: 10%;
  bottom: 0;
}


.winner {
  margin-top: 4vh;
  color: white;
}

.winnercontainer{
  margin: 20px;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  justify-content: left;
  text-align: center;
}

.winnercontainer::-webkit-scrollbar {
  display: none;
}

.winner_player {
  position: relative;
  flex: 0 0 auto;
  height: 80px;
  width: 100%;
}

.winner_player .winicon {
  background-repeat: no-repeat;
  background-size:contain;
  background-position: center center;
  text-align: center;
  height: 50px;
  width: 50px;
  border-radius: 25px;
  margin: auto;
}

.winner_player .winname {
  font-size: 16px;
}

.playing {
  position: relative;
  margin: 0 15px;
}

.playing .endplace {
  position: absolute;
  top: 50%;
  left: 5px;
  transform: translate(0%, -50%);
}

.playing .endname {
  position: absolute;
  top: 0;
  left: 90px;
  font-size: 16px;
}

.playing .endsmall {
  position: absolute;
  top: 22px;
  left: 90px;
  font-size: 12px;
}

.playing .endscore {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translate(0%, -50%);
  font-size: 24px;
}

.playing .imgplayer {
  position: absolute;
  top: 50%;
  left: 40px;
  transform: translate(0%, -50%);
  height: 32px;
  width: 32px;
  border-radius: 16px;
  background-color: white;
  background-repeat: no-repeat;
  background-size:contain;
  background-position: center center;
}



.joinplayer {
  position: relative;
  height: 40px;
  margin: 1vh auto;
}

.joinplayer .imgplayer {
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translate(0%, -50%);
  height: 32px;
  width: 32px;
  border-radius: 16px;
  background-color: white;
  background-repeat: no-repeat;
  background-size:contain;
  background-position: center center;
}

.joinplayer .endname {
  position: absolute;
  top: 0;
  left: 70px;
  font-size: 16px;
}

.joinplayer .endsmall {
  position: absolute;
  top: 22px;
  left: 70px;
  font-size: 12px;
}


.info_text {
    position: absolute; 
    opacity: 0;
    top: 25%; 
    left: 0px; 
    width: 100%; 
    font-size: 5vw;
    font-weight: 400;
    letter-spacing: 0.3vw;
    text-shadow: 0px 0px 7px white;
    padding: 1vw;
    text-align: center;
    transform: translate(0%, -40%);}
  @media screen and (max-aspect-ratio: 9/10) {
    .info_text {
    font-size: 5vh; } }
  @media screen and (min-aspect-ratio: 9/10) and (max-aspect-ratio: 11/10) {
    .info_text {
    font-size: 6vw;} }
  @media screen and (min-aspect-ratio: 11/10) {
    .info_text {
    font-size: 5vw; } }

.gradient_gold {
    background: -moz-linear-gradient(left, rgba(240,206,97,1) 0%, rgba(214,176,86,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(240,206,97,1) 0%,rgba(214,176,86,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to left, rgba(240,206,97,1) 0%,rgba(214,176,86,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff0ce61', endColorstr='#ffd6b056',GradientType=0 ); /* IE6-9 */
}

.online {
  background-color: rgba(31, 230, 13, 0.3)!important;
}

.offline {
  background-color: rgba(238, 51, 44, 0.3)!important;
}

.gamesidefull {
	position: absolute;
	top:6vh;
	bottom: 0;
	right: 0;
	left:0;
	background-color: rgba(0,0,0,0.95) }

.gameside {
  position: absolute;
  top:50%;
  bottom: 0;
  right: 0;
  left:0; 
}

.gameside_first {
  position: absolute;
  bottom: 0;
  right: 0;
  left:0; 
  margin-bottom: 28vh;
}

.gameside_quiz {
  position: absolute;
  top:30%;
  bottom: 0;
  right: 0;
  left:0; 
}

.logofirstpage {
    position: absolute;
    background-repeat: no-repeat;
    background-size:contain;
    background-position: center center;
	top:0%;
	left:5%;
	width: 90%;
    height:25%;
    margin: 2% auto; }
  @media screen and (max-aspect-ratio: 1/1) {
    .logofirstpage {
    height:12%; } }
  @media screen and (min-aspect-ratio: 1/1) {
    .logofirstpage {
    height:25%; } }

.abovebtn {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 20%;
}

.posbtnset {
    font-weight: 700;
    position: absolute;
	bottom:5%;
	left:50%;
    margin-right: -50%;
    transform: translate(-50%, 0%);
    padding: 3vh 12vh;
    font-size: 3vh; }
  @media screen and (max-aspect-ratio: 1/1) {
	.posbtnset {
    padding: 2vh 8vh;
	 bottom:5%; }}
  @media screen and (min-aspect-ratio: 1/1) {
    .posbtnset {
    padding: 3vh 12vh;
	bottom:5%; } }

.postimer {
    font-weight: 700;
    position: absolute;
  display: table;
    color: black;
	top:55%;
	left:50%;
    width: 10vh;
    height: 10vh;
    border: solid thick white;
    border-radius: 5vh;
    transform: translate(-50%, -50%);
    font-size: 5vh; }

.postimer span {
  display: table-cell;
  vertical-align: middle;
}

.bntnext {
	border: none;
	color: #fff;
	cursor: pointer; }

.bntnext:hover {
	color: #363636;
}

.question {
  font-weight: 700;
  color: black;
    position: absolute;
    left:10%;
    right:10%;
/*  width: 90%;*/
    height: 15%;
    font-size: 2.5vh;
    top: 0;
  height: 25%;
    text-align: left; }

.question div {
  position: absolute;
  top:50%;
  transform: translate(0,-50%);
}

.posanswers {
    font-weight: 700;
    position: absolute;
    top: 25%;
    bottom: 15%;
    left: 5%;
    right: 5%;
    font-size: 2vh; }

.answer {
	border-top: solid 0.5vh #d6b056;
	color: black;
	background-color: #fff;
	padding: 3vh;
	cursor: pointer; 
	text-align: middle;}

.answer:hover {
	background-color: #c6c6c6;
}

.answer_four {
	display: inline-block;
	position: relative;
	width: 48%;
	margin: 0 1% 0 0;
	padding: 0;
	height: 50%; }

.answer_four .answer {
  position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 3px;
}

.answer_three {
	position: relative;
	width: 100%;
	height: 33%;
	margin: 0;
	padding: 0;
}

.answer_three .answer {
  position: absolute;
  top:50%;
  left:0;
  right:0;
  transform: translate(0,-50%);
}

.answer_two {
	position: relative;
	width: 100%;
	height: 49%;
	margin: 0;
	padding: 0;
}

.answer_two .answer {
  position: absolute;
  top:50%;
  left:0;
  right:0;
  transform: translate(0,-50%);
}

.selectedAnswer {
  position: absolute;
  right:4%;
  width: 15%;
  top:2%;
  bottom:2%;
  background-repeat: no-repeat;
  background-size:contain;
  background-position: right center; }
  @media screen and (max-aspect-ratio: 1/1) {
	.selectedAnswer {
  width: 10%;}}
  @media screen and (min-aspect-ratio: 1/1) {
    .selectedAnswer {
      width: 15%; } 
    .answer_two .selectedAnswer {
      width: 8%;
    } 
    .answer_three .selectedAnswer {
      width: 8%;
    }}

.answeroverlay {
  position: absolute;
  left: 0;
  right: 0;
  top:0;
  height: 0%;
  color: black;
  background-color: #d6b056;
  -webkit-transition: all 1s ease;  
  -moz-transition: all 1s ease;  
  -o-transition: all 1s ease;  
  -ms-transition: all 1s ease;  
  transition: all 1s ease;
}

.answeroverlayselect {
  color: white;
  height: 100%;
}

.answertext {
  position: relative;
  color: black;
}

.timerpos {
    position: absolute;
    left: 15%;
    top:50%;
    width: 70%;
    text-align: center;
    height: 10%; }
  @media screen and (max-aspect-ratio: 1/1) {
	.timerpos {
    left: 5%;
    top:25%;
    width: 90%;}}
  @media screen and (min-aspect-ratio: 1/1) {
    .timerpos {
    left: 15%;
    top:50%;
    width: 70%; } }

.timerpos2 {
  margin: 2vh 0 10vh;
  position: relative;
  height: 8%;
}

.timerclass .timesection {
  font-size: 3vh;
  position: relative;
  width: 20%;
  height: 100%;
  display: inline-block;
  margin: 0;
  background-image: url(../images/counterback.png);
  background-repeat: no-repeat;
  background-size:cover;
  background-position: center center;
  padding: 7% 0px;
}

.timesection .sub {
    font-size: 50%;
    position: absolute;
    text-align: center;
    top: 5%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, 0%);
}

.timesection .sup {
    font-size: 200%;
    position: absolute;
    text-align: center;
    top: 100%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%); }

.flex-wrapper {
  display: flex;
  flex-flow: row nowrap;
}

.single-chart {
  width: 100%;
  justify-content: space-around ;
}

.circular-chart {
  display: block;
  margin: 10px auto;
  max-width: 80%;
  max-height: 250px;
}

.circle-bg {
  fill: none;
  stroke: #eee;
  stroke-width: 3.8;
}

.circle {
  fill: none;
  stroke-width: 2.8;
  stroke-linecap: round;
  animation: progress 1s ease-out forwards;
}

@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}

.circular-chart.orange .circle {
  stroke: #ff9f00;
}

.circular-chart.green .circle {
  stroke: #4CC790;
}

.circular-chart.blue .circle {
  stroke: #3c9ee5;
}

.percentage {
  fill: #666;
  text-anchor: middle; }
  @media screen and (max-aspect-ratio: 1/1) {
	.percentage {
    font-size: 1vh; }}
  @media screen and (min-aspect-ratio: 1/1) {
    .percentage {
    font-size: 0.8vh;  } }

.endtext {
	font-weight: 700;
    color: white;
    position: absolute;
    top: 28%;
    left:5%;
    right:5%;
    height: 15%;
    font-size: 3vh;
    text-align: center; }
  @media screen and (max-aspect-ratio: 1/1) {
    .endtext {
      top: 20%;
    height: 15%;
    font-size: 3vh; } }
  @media screen and (min-aspect-ratio: 1/1) {
    .endtext {
      top: 33%;
    height: 15%;
    font-size: 3vh; } }


.information_text {
  position: absolute;
  top:30%;
  bottom:15%;
  left:50%;
  color: white;
  z-index: 1000;
  transform: translate(-50%, 0%);
  text-align: center;}
  .information_text input {
      width: 75%;
      border-radius: 10px;
      font-size:3vh;
      font-weight: bold;
      color: black;
      padding: 1.5%;
      margin: 1% 0; }
  @media screen and (max-aspect-ratio: 8/10) {
    .information_text input {
        width: 90%;
        font-size:2vh; } }
  .information_text .chkboxes {
      margin-top: 5vh;
      font-size:2vh;
      text-align: left;
      color: white; }
  @media screen and (max-aspect-ratio: 8/10) {
    .information_text .chkboxes {
      font-size:1.8vh;
      width: 90%;
      margin-left: 5%;} }
  .information_text .chkboxes .chkbx {
      float: left;}
  .information_text .chkboxes .chklbl {
      margin:3% 0 2.5% 10%;}
  @media screen and (max-aspect-ratio: 8/10) {
    .information_text .chkboxes .chklbl {
      margin:1.5% 0 6.5% 20%;
      } }
  @media screen and (max-aspect-ratio: 8/10) {
      .information_text {
        top:20%;
        bottom:20%;
        width: 90%; } }
  @media screen and (min-aspect-ratio: 8/10) and (max-aspect-ratio: 14/10) {
    .information_text {
      bottom:20%;
      width: 90%; } }
  @media screen and (min-aspect-ratio: 14/10) {
    .information_text {
      bottom:15%;
      width: 90%; } }

.chklbl a {
  color: white
}



.wintext {
	font-weight: 700;
    color: white;
    position: absolute;
    top: 32%;
    left:5%;
    right:5%;
    height: 15%;
    font-size: 4vh;
    text-align: center; }
  @media screen and (max-aspect-ratio: 1/1) {
    .wintext {
      top: 20%;
    height: 15%;} }
  @media screen and (min-aspect-ratio: 1/1) {
    .wintext {
      top: 32%;
    height: 15%;} }

.qmaskpart {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom:0;
  overflow: hidden;
}

.qmainpart {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  bottom:0;
}

.lefthide {
  -webkit-transition: all 1s ease;  
  -moz-transition: all 1s ease;  
  -o-transition: all 1s ease;  
  -ms-transition: all 1s ease;  
  transition: all 1s ease;
  
  left:-100%!important;
}

.rightshow {
  left:100%!important;
}

.centershow {
  -webkit-transition: all 1s ease;  
  -moz-transition: all 1s ease;  
  -o-transition: all 1s ease;  
  -ms-transition: all 1s ease;  
  transition: all 1s ease;
  
  left:0%!important;
}



.usernamecont {
    color: white;
    position: absolute;
    top: 38%;
    left:5%;
    right:5%;
/*  width: 90%;*/
    height: 15%;
    font-size: 3vh;}



.inneroverlay {
	position:absolute;
	left:50%;
    top: 18%;
	padding: 4vw;
	width: 82vw;
	height: auto;
  	transform: translate(-50%, 0%);
color: white}
  @media screen and (max-aspect-ratio: 9/10) {
    .inneroverlay {
	width: 82vw;
     } }
  @media screen and (min-aspect-ratio: 9/10) and (max-aspect-ratio: 11/10) {
    .inneroverlay {
	width: 60vw;
     } }
  @media screen and (min-aspect-ratio: 11/10) {
    .inneroverlay {
	width: 50vw;
     } }

.font_ldbr{
    font-size: 1.5vw; }
  @media screen and (max-aspect-ratio: 9/10) {
    .font_ldbr {
      font-size: 2vh; } }
  @media screen and (min-aspect-ratio: 9/10) and (max-aspect-ratio: 11/10) {
    .font_ldbr {
      font-size: 1.8vw; } }
  @media screen and (min-aspect-ratio: 11/10) {
    .font_ldbr {
      font-size: 1.8vw; } }

.ldbrtable {
	display: table;
	text-align: left;
	margin: 3.5vh auto 8vh auto;
	border-spacing:2px;
	width: 100%; }
@media screen and (max-aspect-ratio: 9/10) {
    .ldbrtable {
	margin: 3.5vh auto 10vh auto; } }
  @media screen and (min-aspect-ratio: 9/10) and (max-aspect-ratio: 11/10) {
    .ldbrtable {
	margin: 3.5vh auto 9vh auto;} }
  @media screen and (min-aspect-ratio: 11/10) {
    .ldbrtable {
	margin: 3.5vh auto 8vh auto; } }

.tablehldr {
	display: block;
	max-height: 35vh;
	overflow: scroll; }
  @media screen and (min-aspect-ratio: 20/10) {
    .tablehldr {
		max-height: 20vh!important; } }
  @media screen and (max-aspect-ratio: 20/10) {
    .tablehldr {
		max-height: 40vh!important; } }

.lbrdentry {
	display: table-row;
}

.lbrdentry div {
	display: table-cell;
	padding: 1vw;
}

.ldbrtable .lbrdentry:nth-child(odd) {
/*	background-color: rgba(0,0,0,0.05);*/
}

.ldbrtable .lbrdentry:nth-child(even) {
	background-color: rgba(0,0,0,0.1);
}

.lonelyinput input {
      width: 75%;
      margin: 4% 12.5%;
      border-radius: 10px;
      font-size:2vh;
      font-weight: bold;
      color: black;
      padding: 1.5%; }
  @media screen and (max-aspect-ratio: 8/10) {
    .lonelyinput input {
        width: 75%;
        font-size:2vh;
      margin:4% 10%; } }



.hideit {
  display: none!important;
}

.disabled{
  cursor: not-allowed;
  opacity: 0.25;
}

.gameheader {
  position: absolute;
  top: 0;
  width: 100vw;
  left: 0;
  height: 6vh;
  background-color: rgba(0,0,0,0.85);
  border-bottom: 5px solid black;
  box-sizing: border-box;
  padding: 1.5vh;
  -webkit-box-shadow: 0px 9px 25px 10px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 9px 25px 10px rgba(0,0,0,0.75);
  box-shadow: 0px 9px 25px 10px rgba(0,0,0,0.75);
  font-size: 2vh;
  line-height: 3vh;
  z-index: 10;
}

.gametop {
  position: absolute;
  top: 12vh;
  left: 0;
  right: 0;
  height: 18vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 54px;
}

.livefeed {
  position: absolute;
  top: 0;
  left: 50%;
  right: 0;
  height: 100vh;
  transform: translate(-50%,0%);
  width: auto;
  z-index: 0;
}



.topside {
  position: absolute;
  top:0;
  right: 5%;
  left:5%;
  height: 10%;
  font-size: 1.5vh;
  display: flex;
  color: white;
}

.round {
  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: flex-start;
}

.particip {
  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: flex-end;
}

.topside .round {
  width: 49%;
}

.topside .particip {
  width: 49%;
}

.gamestats {
  padding: 0 10vw;
}

.gamestats .round {
  width: 100%;
  justify-content: space-between;
}

.gamestats .score {
  width: 100%;
  justify-content: space-between;
}

.gamestats .particip {
  width: 100%;
  justify-content: space-between;
}


.disnr {
  font-size: 2vh;
  margin: 0 0.5vh;
  padding: 2px 5px;
  border-radius: 10px;
  color: black;
}

.resultpagetexts {
  position: absolute;
  top: 15%;
  bottom: 0;
  left: 5%;
  right: 5%;
}

.font12 {
  font-size: 12px;
}

.confcont {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.clickthrough {
  pointer-events: none;
}

.goodrays {
	position: absolute;
  top:-50%;
	bottom: -50%;
	right: -50%;
	left:-50%;
  background-repeat: no-repeat;
  background-size:200%;
  background-position: center center;
  transform: rotate(0deg);
  -webkit-transition: all 1s ease;  
  -moz-transition: all 1s ease;  
  -o-transition: all 1s ease;  
  -ms-transition: all 1s ease;  
  transition: all 1s ease;
}

.rotate {
  transform: rotate(360deg);
}

@import url('https://fonts.googleapis.com/css?family=Lato');

@import url('https://fonts.googleapis.com/css2?family=Bangers&display=swap');

:root {
  --color-main: #d6b056;
  --color-main-dark: #6e5922;
  --color-text: #fff;
  --color-text-2: #000;
}

.info_text {
    color: #000;
}

.btn {
    background-color: var(--color-text);
}

.nicefont {
  font-family: 'Bangers', cursive;
  font-size: 200%;
}

.mycheckbox label span {
  /* border: 2px solid var(--color-text); */
}

.mycheckbox input[type="checkbox"] + label span:hover {
  background-color: var(--color-text);
}

.mycheckbox input[type="checkbox"]:checked + label span {
  background-color: var(--color-text);
}

.information_text input {
      border: 2px solid var(--color-text);
}

.backgr1 {
  background-color: var(--color-main); /*#876d2a;*/
}

.goldcolor {
  color: var(--color-main);
}

.whitecolor {
  color: var(--color-text);
}

.gametop {
  font-family: 'Bangers', cursive;
}

.winner_player .winicon {
  background-color: var(--color-main);
}

.answer {
	border: solid 0.5vh var(--color-main)!important;
  border-radius: 3vh!important;
}

.answeroverlay {
  background-color: var(--color-main);
  border-radius: 2.5vh;
}


html, body {
    font-family: 'Lato', sans-serif; 
}

.gradient_gold {
  background: var(--color-main)!important;
}

.circular-chart.orange .circle {
  stroke: var(--color-main);
}

.bntnext {
  color:var(--color-text-2);
}

.leaderboard {
  /* background-color: var(--color-main); */
}

.winner_player .winicon {
  background-image: url("../images/icon.png");
}

.playing .imgplayer {
	border: solid 0.5vh var(--color-main)!important;
  background-image: url("../images/icon.png");
}

.joinplayer .imgplayer {
	border: solid 0.5vh var(--color-main)!important;
  background-image: url("../images/icon.png");
}

.logofirstpage {
	left:25%;
	width: 50%;
    height:25%; }
  @media screen and (max-aspect-ratio: 1/1) {
    .logofirstpage {
	left:5%;
	width: 90%;
    height:12%; } }
  @media screen and (min-aspect-ratio: 1/1) {
    .logofirstpage {
	left:25%;
	width: 50%;
    height:25%; } }

.postimer {
  background-color: var(--color-main);
}

.gameheader {
  border-bottom: 5px solid var(--color-main);
  color: var(--color-text);
  font-family: 'Fira Sans Extra Condensed', sans-serif;
  font-weight: 700;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.topside {
  font-family: 'Fira Sans Extra Condensed', sans-serif;
  font-weight: 700;
}

.resultfont {
  font-family: 'Fira Sans Extra Condensed', sans-serif;
  font-weight: 700;
}

.disnr {
  background-color: var(--color-main);
  border: solid 2px var(--color-main-dark);
}

.notvalid {
  color: red;
}

.transparent {
  background: transparent!important;
}

.quiz-background {
  background: rgba(240, 240, 240, 1);
}