@charset "utf-8";
/*@import url("sidebar.css");*/
/* CSS Document */




header {
  height: auto;
	color: white;
}






@media (min-width: 1400px) {
  .container, .container-sm, .container-md, .container-lg, .container-xl {
    max-width: 1600px;
  }
}


body {background:#007A78; }
header  {background-color:#007A78; border-bottom: 2px solid white;}
footer  {background-color:#007A78; border-top: 2px solid white;  }

header .bouncein1 {display: inline-block; animation: bouncein1 3s ease-out 0s 1 normal forwards;width: 100%; }


header .box {display: inline-block; padding: 5px;  animation: wobble 4s ease 0s 100 normal forwards;}

header .box.zeropoints{animation: wobble 15s ease 0s 100 normal forwards; cursor: default;}

header .box span { animation: fade 4s ease 0s 100 normal forwards;}

select{ width: 160px;}

header .badge-primary {
 
  	margin-top: 5px;
	margin-left: 30px;
}

header h2.mb-1 {
 font-weight: 600;
margin-bottom: 0px !important;}

#main {width: 1280px; margin-left: auto; margin-right: auto;}

footer {padding-top: 5px;}


.teamname {
  color: cadetblue;
}
.logo img {
  max-height: 110px;
}

.container-zb {
  position: relative;
	border-left: 2px solid white;
	border-right: 2px solid white;
	padding: 0;
}
.container-zb .box {
  z-index: 200;
  position: absolute;
  opacity: 80%; 
  	
}


.q1_active span {
  background-image: url("../images/wattsbtnq1_active.png");
  background-size: contain;
}

.zeropoints span {
width:50px;
	height: 50px;
  background: url("../images/button_x.svg") 0 0;
 background-size: cover;
animation: wobble 4s ease 0s 100 normal forwards;
	cursor: pointer;
}








.container-zb .box.q1 {
  background-image: url("../images/btn_sleep_q1.png");
}








.container-zb .box.q2 {
  background-image: url("../images/btn_sleep_q2.png");
}
.container-zb .box.q2.dropped {
 
  background-image: url("../images/wattsbtnq2_active.png");
}

.container-zb .box.q3 {
  background-image: url("../images/btn_sleep_q3.png");
}


.container-zb .box.q4 {
  background-image: url("../images/btn_sleep_q4.png");
}

.watts-btn_active {
  display: inline-block;
  width: 40px;
  height: 40px;
  background-size: contain;
	
}




.watts-btn_active {}
.box.dropped {
  cursor: default;
}


.btl02 {
  top: 30%;
  left: 1%;

}


.btl01 {
  top: 19.0%;
  left: 18.8%;
}


.btl03 {
  top: 45%;
  left: 1.5vw;
}

.btl04 {
  top: 61%;
  left: 7%;
}


.btl05 {
  top: 72%;
  left: 18.1%;
}


.btl06 {
  top: 81%;
  left: 23%;
}


.btl07 {
  top: 47.5%;
  left: 18%;
}


.btl08 {
  top: 67.4%;
  left: 44%;
}


.btl09 {
  top: 86.5%;
  left: 58%;
}

.btl10 {
  top: 48.8%;
  left: 59.5%;
}

.btl11 {
  top: 38%;
  left: 61%;
}



.btnq11 {
  top: 62%;
  left: 28%;
}
.btnq12 {
  top: 66%;
  left: 34%;
}
.btnq13 {
  top: 64%;
  left: 52%;
}
.btnq14 {
  top: 54%;
  left: 20%;
}
.btnq15 {
  top: 52%;
  left: 34%;
}


.btnq21 {
  top: 16%;
  left: 85%;
}
.btnq22 {
  top: 12%;
  left: 90%;
}
.btnq23 {
  top: 24%;
  left: 84%;
}
.btnq24 {
  top: 22%;
  left: 91%;
}
.btnq25 {
  top: 14%;
  left: 75%;
}


.btnq31 {
  top: 82%;
  left: 10%;
}
.btnq32 {
  top: 72%;
  left: 5%;
}
.btnq33 {
  top: 82%;
  left: 24%;
}
.btnq34 {
  top: 82%;
  left: 50%;
}
.btnq35 {
  top: 86%;
  left: 34%;
}





.btnq41 {
  top: 10%;
  left: 10%;
}
.btnq42 {
  top: 16%;
  left: 5%;
}
.btnq43 {
  top: 18%;
  left: 12%;
}




.btnq46 {
  top: 10%;
  left: 40%;
}

.btnq47 {
  top: 15%;
  left: 47%;
}


.btnq48 {
  top: 25%;
  left: 5%;
}


.btnq49 {
  top: 22%;
  left: 50%;
}



.zukunfstbild {
  z-index: -1;
}






/* Quest 2 */
#Footer {
  padding-top: 30px;
  width: 100%;
  text-align: center;
}
#Footer button {
  height: 50px;
  padding: 10px;
  font-size: 20px;
  font-weight: bold;
}
#Footer .row {
  justify-content: center;
}
.box {
  user-select: none;
  cursor: grab;
  transition: 0.5s;
	border-radius: 20px;
}

.box span {
  pointer-events: none;
}
/* Drag and Drop Related Styling */


.box.hidden {
 display: none;
}

#loesung {text-align: center;}

.checked {
  color: red;
}
.alert {
  color: red;
  font-weight: bold;
  width: 100%;
  text-align: center;
  passing: 5px;
  margin-top: 5px;
}
.guest_msg {
  display: none;
}
.btn-primary a {
  color: #ffffff;
}

footer .btn-primary {font-size: 1.2rem; font-weight: 600;}

#helpButton .btn {background-image: url("../images/help_butto_white.svg"); background-repeat: no-repeat; background-position: center 30px; height: 120px; width: 80px; background-color: transparent; border: none; padding-top: 10px; background-size: 75px 80px;}

.btn-lg, .btn-group-lg > .btn {
    font-size: 1.4rem;
font-weight: bold;
 
  width: 250px;
text-transform: uppercase;

}

#toprow {display: flex; justify-content: center; align-items: center; gap: 10px; border-bottom: 1px dotted white; padding-bottom: 4px;}
#statusbar {width: 280px;  display: flex; justify-content: flex-start; align-items: center; gap: 4px; font-weight: bold;}
#statusbar p { width: 30px; height: 30px;  margin-bottom: 0px; cursor: pointer; }
.statq1.played {background:url("../images/statusbar_played.svg") 0px 0px; background-size: cover;  }
.statq2.played {background:url("../images/statusbar_played.svg") -32px 0px; background-size: cover; }
.statq3.played {background:url("../images/statusbar_played.svg") -66px 0px; background-size: cover; }
.statq4.played {background:url("../images/statusbar_played.svg") -100px 0px; background-size: cover; }

.statq1.due {background:url("../images/statusbar_due.svg") 0px 0px; background-size: cover;  }
.statq2.due {background:url("../images/statusbar_due.svg") -32px 0px; background-size: cover; }
.statq3.due {background:url("../images/statusbar_due.svg") -66px 0px; background-size: cover; }
.statq4.due {background:url("../images/statusbar_due.svg") -100px 0px; background-size: cover; }



@media (max-width: 1280px) {
  .zeropoints span {
width:40px;
	height: 40px;
 }
.watts-btn_active {
  width: 40px;
  height: 40px;
 }
	


	header .badge-primary {
 font-size: 1.2rem;
margin-left: 0px;
	margin-top: 0px;
	
}																																																		
	
header h2 {
 font-size: 1.2rem;

}
	
	
header .badge {
 font-size: 1.0rem;

}
	
header .box {padding: 2px; }	
	
	
}

.logo img {
  max-height: 85px;
}

header .box.doubled {display: none;}
#ScoredWatts {display: flex; justify-content: center; }