#wrap{
	position: fixed;
	top: 71px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	width: 100%;
	height: auto;
	background-color: var(--mainColor6);
	}

#wrap #bgr_black{
	display: none;
	position:fixed;
	top:0px;
	bottom:0px;
	left:0px;
	right:0px;
	width:auto;
	height: auto;
	background-color: var(--mainColor5);
	z-index: 9900;
}

#wrap #bot{
	display:flex;
	position:absolute;
	bottom:0px;
	left:0px;
	right:0px;
	width:100%;
	height:70px;
	justify-content: center;
	align-items: center;
	box-sizing:border-box;
	white-space:nowrap;
	overflow:auto;
	padding:10px 0px 10px 0px;
	background-color: var(--bgrColor);
	text-align:center;
	z-index: 9910;
	}

#wrap #lisaa_kysymyksia{
	display: none;
	opacity:0.0;
	position: fixed;
	top: 100px;
	bottom:100px;
	max-width:650px;
	height: auto;
	left:0%;
	right:0%;
	z-index:9990;
	width:95%;
	padding:0px 10px 0px 10px;
	text-align: left;
	box-sizing: border-box;
	margin: auto auto auto auto;
	color: white;
	overflow-x:hidden;
	overflow-y:auto;
	-webkit-transition: all 0.6s;
	transition: all 0.6s;
	border-radius: var(--cornerradius);	
	background-color: var(--bgrColor);
}

#wrap #center{
	display: block;
	position:absolute;
	top:0px;
	bottom:70px;
	height: auto;
	left:0px;
	right:0%;
	width:auto; 
	text-align: center;
	box-sizing: border-box;
	padding: 0px 10px 0px 10px;
	color: white;
	overflow-y: scroll;
	overflow-x: hidden;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
	z-index:8991;
	}

#logout{
	position:fixed;
	top:10px;
	right:10px;
	z-index:9999;
	}

#vaky{
	position:fixed;
	top:10px;
	right:260px;
	z-index:9999;
	}

#wrap #center ul{
	display:inline-block;
	list-style:none;
	width:100%;
	height:auto;
	margin:0px 0px 0px 0px;
	padding:5px 7px 5px 7px;
	box-sizing: border-box;
}

#wrap #center ul .qsti{
	position: relative;
	display:flex;
	width: 100%;
	height:auto;
	justify-content: space-between;
	text-align: left;
	overflow: hidden;
	box-sizing:border-box;
	border-radius: var(--cornerradius_btn);
	margin: 4px auto 4px auto;
	padding: 4px 0px 4px 40px;
	transition: all 0.4s;
	cursor: pointer;
	-webkit-transition: all 0.4s;
	background-color: var(--bgrColor);
	border:1px solid var(--bgCol01);
	}

#wrap #center ul .qstinayte{ height:auto }
#wrap #center ul .gone{ background-color: var(--bgCol02) }
#wrap #center ul .now{ background-color: var(--bgCol03); }
#wrap #center ul .vastaus_gone{ background-color: var(--bgCol04); }
#wrap #center ul .vastaus{ background-color: var(--bgCol05); }
#wrap #center ul .vastaus_coming{ background-color: var(--bgCol06); }

#wrap #center ul .qsti .qtypeimg{
	display:inline-block;
	width:37px;
	height:37px;
	position:absolute;
	top:0px;
	bottom:0px;
	left:5px;
	margin: auto auto auto auto;
}


#wrap #center ul .qsti .qsans {	
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}

#wrap #center ul .qsti .qsans .qs{	
	display:block;
	width:auto;
	height:auto;
	line-height:20px;
	box-sizing:border-box;
	font-size:15px;
	font-weight:300;
	letter-spacing:1px;
	color: rgba(47,45,45,1.00);
	padding:0px 5px 0px 5px;
	margin:0px 0px 0px 0px;	
}

#wrap #center ul .qsti .qsans .answers{	
	display:none;
	text-overflow:ellipsis;
	width:auto;
	height:auto;
	box-sizing:border-box;
	border:1px solid red;
	margin:4px auto 4px 0px;
	padding:0px 0px 0px 0px;
	}

#wrap #center ul .qsti .qsans .answers .ans{	
	display:inline-block;
	width:100%;
	height:22px;
	line-height:22px;
	box-sizing:border-box;
	font-size:15px;
	font-weight:500;
	text-align: left;
	border-radius: 3px;
	color:var(--mainColor4);
	margin:0px;
	padding:0px 10px 0px 10px;
	}


#wrap #center ul .qsti .qs_extra_wrap {
	display: inline-flex;
	width: auto;
	height: 30px;
	margin:auto 5px;
	padding: 5px;
	flex-direction: row;
	gap:0px 5px;
	align-items: center;
	background-color:rgba(172,172,172,0.85);
	border-radius: var(--cornerradius_btn);
	justify-content: center;
}

#wrap #center ul .qsti .qs_extra_wrap .q_play{	
	display: inline-flex;
	white-space:nowrap;
	text-overflow:ellipsis;
	width:auto;
	height:100%;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	box-sizing:border-box;
	font-size:15px;
	font-weight:500;
	margin:0px 1px;
	background-color:rgba(38,38,38,1.00);
	padding:0px 0px 0px 0px;
	border-radius:100px;
	text-align: center;
}

#wrap #center ul .qsti .qs_extra_wrap .q_play img{
	width:auto;
	height:100%;
	aspect-ratio:1/1;

}

#wrap #center ul .qsti .qs_extra_wrap .moves{	
	display:inline-block;
	white-space:nowrap;
	text-overflow:ellipsis;
	width:auto;
	height:100%;
	box-sizing:border-box;
	font-size:15px;
	font-weight:500;
	margin:0px 1px;
	padding:0px 0px 0px 0px;
	border-radius:0px;
	text-align: center;
}

#wrap #center ul .qsti .moves .move{	
	display:inline-block;
	width:auto;
	height:100%;
	margin:auto 2px;
}

#wrap #center ul .qsti .moves .move img{	
	display:inline-block;
	width:auto;
	height:100%;
	aspect-ratio:1/1;
	margin:0;
}

#wrap #center ul .qsti .qs_extra_wrap .qu_qoptis{	
	display:inline-flex;
	width:auto;
	height:100%;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing:border-box;
	margin:0px 1px;
	padding:0px 0px 0px 0px;
	border:0;
	z-index: 9898;
	}

#wrap #center ul .qsti .qs_extra_wrap .qu_qoptis:after {	
	content:"Vaihtoehtojen määrä";
	opacity: 0.0;
	font-size:0.01rem;
	font-weight: 300;
	padding:0px 10px;
	position: absolute;
	color:var(--mainColor7);
	border-radius: var(--cornerradius_btn);
	background-color:var(--mainColor3);
	transform:translate(-0px, -100px);
	transition:all 0.2s;
}

#wrap #center ul .qsti .qs_extra_wrap .qu_qoptis:hover::after {	
	opacity: 1.0;
	transform:translate(-105px, 0px);
	font-size:0.9rem;
}

#wrap #center ul .qsti .qs_extra_wrap .qu_time{	
	display:inline-flex;
	width:auto;
	height:100%;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing:border-box;
	margin:0px 1px;
	padding:0px 0px 0px 0px;
	border:0;
	z-index: 9898;
	}

#wrap #center ul .qsti .qs_extra_wrap .qu_time:after {	
	content:"Vastausaika";
	opacity: 0.0;
	font-size:0.01rem;
	font-weight: 300;
	padding:0px 10px;
	position: absolute;
	color:var(--mainColor7);
	border-radius: var(--cornerradius_btn);
	background-color:var(--mainColor3);
	transform:translate(-0px, -100px);
	transition:all 0.2s;
}

#wrap #center ul .qsti .qs_extra_wrap .qu_time:hover::after {	
	opacity: 1.0;
	transform:translate(-85px, 0px);
	font-size:0.9rem;
}

#wrap #center ul .qsti .qu_qoptis input[type="number"],	
#wrap #center ul .qsti .qu_time input[type="number"]{	
	display:block;
	width:50px;
	height:25px;
	line-height:25px;
	background-color:rgba(227,227,227,1.00);
	font-size:13px;
	font-weight:600;
	text-align:center;
	color:#3A3A3A;
	box-sizing:border-box;
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	border:0;
	border-radius:3px;
	}

#wrap #lisaa_kysymyksia p,
#wrap #center p{
	display:inline-block;
	width:95%;
	height:auto;
	line-height:25px;
	margin:10px auto 10px auto;
	font-size:13px;
	}

#wrap #center ul li .btn1{
	display: inline-flex;
	width: auto;
	height:100%;
	aspect-ratio:1/1;
	justify-content: center;
	align-items: center;
	flex-direction: column;	
	padding: 0px 0px 0px 0px;
	-webkit-appearance:none;
	color:white;
	border:0;
	margin:auto;
	}

#wrap #center ul li .btn1 img{
	width: auto;
	height:auto;
	max-height: 100%;
	aspect-ratio:1/1;
	}

#wrap #lisaa_kysymyksia .q2l h4{
	display:block;
	margin:30px 0px 2px 0px;
	width:100%;
	text-align:left;
	font-size:24px;
	color: var(--mainColor4);
	}


#wrap #lisaa_kysymyksia .q2l{
	display:inline-block;
	z-index:6666;
	width:100%;
	height:auto;
	overflow:auto;
	box-sizing:border-box;
	padding:0px 5% 0px 5%;
 	margin:0px auto 0px auto;
	}

#wrap #lisaa_kysymyksia .q2l input {
	display:block;
	margin:3px auto 3px auto;
	width:97%;
	height:50px;
	line-height:50px;
	border-radius:50px;
	background-color: var(--mainColor6);
	box-sizing:border-box;
	padding:0px 15px 0px 15px;
	font-size:15px;
	color:var(--mainColor8);
	border:1px solid var(--mainColor7);
}

#wrap #lisaa_kysymyksia #selectwrap,
#wrap #lisaa_kysymyksia #typewrap {
	display:inline-block;
	text-align:left;
	width:100%;
	height:auto;
	margin:15px auto 5px auto;
	}


#wrap #lisaa_kysymyksia .inpu_wrap {
	display:inline-block;
	text-align:left;
	width:100%;
	height:auto;
	margin:15px auto 5px auto;
	}

#wrap #lisaa_kysymyksia #selectwrap .subot,
#wrap #lisaa_kysymyksia #typewrap .subot,
#wrap #lisaa_kysymyksia .inpu_wrap .subot,
#wrap #lisaa_kysymyksia .inpu_wrap .subot{
	display:inline-block;
	text-align:left;
	width:100%;
	height:auto;
	line-height:25px;
	font-size:14px;
	font-weight:400;
	color:var(--mainColor4);
	margin:4px auto 4px auto;
	padding:0px 0px 0px 5px;
	box-sizing:border-box;
	}



#wrap #lisaa_kysymyksia #selectwrap input[type="checkbox"],
#wrap #lisaa_kysymyksia #typewrap input[type="checkbox"]{
	display:none;
	}
	
#wrap #lisaa_kysymyksia #selectwrap label,
#wrap #lisaa_kysymyksia #typewrap label{
	display:inline-block;
	width:auto;
	height:35px;
	line-height:35px;
	font-size:13px;
	background-color:var(--mainColor6);
	color: var(--mainColor8);
	box-sizing:border-box;
	padding:0px 15px 0px 15px;
	font-weight:400;
	border-radius:var(--cornerradius_btn);
	margin:3px 3px 3px 3px;
	cursor:pointer;
	-webkit-user-select:none;
	user-select:none;
	}

#wrap #lisaa_kysymyksia #selectwrap label img,
#wrap #lisaa_kysymyksia #typewrap label img{
	display: block;
	float: left;
	width:31px;
	height:31px;
	margin:2px 10px 2px -13px;
}

#wrap #lisaa_kysymyksia #selectwrap input[type="checkbox"]:checked + label,
#wrap #lisaa_kysymyksia #typewrap input[type="checkbox"]:checked + label{
	background-color: var(--mainColor3);
	color:var(--mainColor7);
	}


#wrap #right{
	display: none;
	opacity:0.0;
	position: fixed;
	top: 75px;
	left:-76%;
	z-index:9991;
	width:80%;
	bottom:75px;
	max-width:350px;
	height: calc( 100% - 150px );
	text-align: left;
	box-sizing: border-box;
	margin: auto auto auto auto;
	padding: 0px 10px 0px 10px;
	color: white;
	overflow-x:hidden;
	overflow-y:auto;
	-webkit-transition: all 0.6s;
	transition: all 0.6s;
	border-radius:0px 30px 30px 0px;
	background-color: var(--mainColor5);
}

#wrap #right ul{
	list-style:none;
	padding:0px 0px 0px 0px;
	}

#wrap #right .qsti {
	display:block;
	width:100%;
	height: 30px;
	line-height: 30px;
	font-size:13px;
	letter-spacing: 1px;
	border:1px solid rgba(81,81,81,1.00);
	background-color: rgba(12,12,12,0.9);
	border-radius: 30px;
	margin:4px auto 4px auto;
	padding:0px 4px 0px 0px;
	box-sizing: border-box;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#wrap #right .qsti .right,
#wrap #right .qsti .wrong{
	display:block;
	float:left;
	width:30px;
	height:30px;
	border-radius:30px;
	margin:0px 5px 0px 0px;
}

#wrap #right .qsti .right{ background-color:rgba(5,158,2,1.00); }
#wrap #right .qsti .wrong{ background-color:rgba(175,7,3,1.00); }

#wrap #center #startguide{
	position: relative;
	display: flex;
	width:100%;
	height: calc( 100vh - 150px );
	align-items: center;
	flex-direction: column;
	justify-content: center;
}

#wrap #center #startguide h3{
	width:90%;
	max-width: 800px;
	font-size:3rem;
	line-height: 3.05rem;
	text-transform: uppercase;
	font-weight: 900;
	color:var(--mainColor1);
}
#wrap #center #startguide p{
	width:90%;
	max-width: 800px;
	font-size:1.3rem;
	line-height: 1.7rem;
	font-weight: 300;
	margin:0.05rem 0px;
	color:var(--mainColor4);
}

.pointti{
	display: block;
	position:fixed;
	width:250px;
	height:250px;
	transform:translate(0px, -270px);
	animation:heiluta 2s infinite linear;
	
}


@keyframes heiluta {
	0%{ transform: translate(22px, -285px); }
	50%{ transform: translate(20px, -265px); }
	100%{ transform: translate(22px, -285px); }
}