div#guide{
	/*
	width:100%;
	min-height:100vh;
	*/
}

div#guide_home{
	width:100%;
	max-width:800px;
	margin:auto;
	display:flex;
	align-items:center;

	/* min-height:100vh; */

	flex-wrap:wrap;
	align-content:center;
	box-sizing:border-box;
	position:relative;
}

section#tsmc_logo{
	width:100%;
	height:80px;
	background-repeat:no-repeat;
	background-position:50%;
	background-size:contain;
	position:absolute;
	top:-90px;
	left:0;
}

div#guide_home > section#tsmc_logo, 
div#guide_list > section#tsmc_logo{
	position:relative;
	top:auto;
	left:auto;
}

BODY.admin-bar div#guide_home{
	padding-top:32px;
}

body.home #content{
	padding-top:45px;
}

div#guide_home > p,
div#guide_list > p{
	/*
	position:absolute;
	top:50%;
	left:50%;
	margin:-370px 0 0 -50%;
	*/

	width:100%;

	border:solid 4px #FFF;
	background-color:rgba(255, 255, 255, 0.5);
	border-radius:12px;

	padding:10px;
	/* text-align:center; */
	color:#666;

	/* font-size:1.5rem; */
	font-size:1.2rem;

	box-sizing:border-box;
}

div#guide_home > p{
	margin-bottom:35px;
}

div#guide_home.has-result > p{
	
}

/* div#guide_list::after */
div#guide_list > p{
	margin:60px 0;
}

/* div#guide_list.has-result::after */
div#guide_list.has-result > p{
	/* margin-bottom:15px; */
}

div#guide_home > div.pin-code_panel, 
div#guide_home > div.qr-code_panel, 
div#guide_home > div.participants_panel, 
div.add_guide{
	flex:0 1 50%;
	position:relative;
	height:260px;
	margin:auto;
}

div#guide_home.wide > div.pin-code_panel, 
div#guide_home.wide > div.qr-code_panel, 
div#guide_home.wide > div.participants_panel, 
div#guide_home.wide > div.add_guide{
	flex:0 1 33%;
}

div#guide_home > div.add_guide.disabled, 
div#guide_home > div.pin-code_panel+div.add_guide, 
div#guide_home > div.participants_panel+div.add_guide{
	display:none;
}

div.add_guide:only-of-type{
	flex:1 1 100%;
}

div#guide_home > div:nth-of-type(7n){
	display:none;
}

div.add_guide > a{
	position:absolute;
	width:80px;
	height:80px;
	display:flex;
	align-items:center;
	justify-content:center;
	color:#FFF;
	text-decoration:none;
	top:50%;
	left:50%;
	margin:-40px 0 0 -40px;
}

div.add_guide svg{
	fill:transparent;
	stroke-width:2px;
	stroke-dasharray:2px;
	width:inherit;
	height:inherit;
}

div.add_guide circle{
	stroke:#FFF;
}

div.add_guide > a::before, 
div.add_guide > a::after{
	content:'';
	width:28px;
	height:8px;
	background:#FFF;
	position:absolute;
	top:50%;
	left:50%;
	margin:-4px 0 0 -14px;
}

div.add_guide > a::after{
	transform:rotate(90deg);
}

div.qrcode{
	background-repeat:no-repeat; 
	background-position:50%;

	/* background-size:65%; */
	background-size:55%;

	width:100%; 
	height:100%;
	position:relative;
}

div.qrcode::after{
	content:attr(data-time);
	position:absolute;
	width:inherit;
	text-align:center;
	left:0;
	bottom:0;
	font-size:13px;
	font-weight:600;
}

div#guide_home.wide div.qrcode{
	background-size:80%;
}

div.qrcode I{
	font-style:normal;
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	text-align:center;
	display:block;
	font-size:12px;
}

div#guide_home.wide div.qrcode I{
	bottom:10px;
}

div#guide_home div.qrcode span{
	position:absolute;
	width:120px;
	top:70%;
	color:#000;
	font-size:1.3rem;
	left:50%;
	margin-left:-60px;
}

div#guide_home div.qrcode span::before, 
div#guide_home div.qrcode span::after{
	position:absolute;
	/*
	left:50%;
	margin-left:-25%;
	*/
	left:0;
	width:100%;
	text-align:center;
}

div#guide_home div.qrcode span::before{
	content:attr(data-display);
	-webkit-text-stroke:4px rgb(244, 177, 131);

}

div#guide_home div.qrcode span::after{
	content:attr(data-display);
}

div#guide_list{

	width:90%;

	/* height:100vh; */
	/* max-width:960px; */

	margin:auto;

	display:flex;
	align-items:center;
	align-content:center;
	flex-wrap:wrap;
	position:relative;
}

div#guide_list::after{
	position:absolute;
	width:100%;
	height:100%;
	/* background:rgba(255, 255, 255, 0.5); */
	content:'';
	display:none;
}

div#guide_list.active::after{
	display:block;
	z-index:9;
}

div#guide_list > div, 
#survey_greeting > .list_panel{
	/*
	height:60%;
	overflow-y:auto;
	*/
	width:100%;
	display:flex;
	/* gap:20px; */
	gap:80px;
}

#survey_greeting > .list_panel{
	gap:unset;
}

div#guide_list div.list_panel, 
#survey_greeting > .list_panel{
	display:flex;
	position:relative;
	width:100%;

	min-height:120px;
	margin-bottom:30px;

	align-items:center;
	cursor:pointer;

	/* border:dotted 4px #FFF; */

	box-sizing:border-box;
}

div#guide_list > div{
	width:80%;
	margin:auto;
}

#survey_greeting > .list_panel{
	flex-basis:100%;
}

div#guide_list div.list_panel > div:first-child, 
#survey_greeting > .list_panel > div:first-child{
	position:relative;
	flex:1;
	top:-12px;
	height:120px;
}

div.list_panel > div[id]::after{
	position:absolute;
	width:100%;
	text-align:center;
	bottom:0;
	font-size:13px;
	content:attr(data-batch);
	color:#FFF;
	font-weight:600;
}

div#guide_list div.list_panel > div:last-child, 
#survey_greeting > .list_panel > div:last-child{
	flex:6;
	display:flex;
	align-items:center;

	/* justify-content:center; */

	/* margin-left:50px; */

	font-size:1.5rem;
	box-sizing:border-box;

	/* height:120px; */

	color:#666;

	/*
	padding:10px 15px;
	background:#FFF;
	border-radius:6px;
	border:solid 1px #333;
	position:relative;
	*/

	/* background-image:url('../images/svg/dialog_list.svg'); */
	background-image:url('../images/svg/dialog_list-2.svg');

	background-size:contain;
	padding-left:70px;
	padding-right:20px;
	margin-left:25px;
	height:125px;
	background-repeat:no-repeat;

}

/*
div#guide_list div.list_panel > div:last-child::before{
	width:0;
	height:0;
	border-style:solid;
	border-width: 0 40px 20px 0;
	border-color: transparent #FFF transparent transparent;
	content:'';
	position:absolute;
	top:30px;
	left:-40px;
	z-index:10;
}

div#guide_list div.list_panel > div:last-child::after{
	width:0;
	height:0;
	border-style:solid;
	border-width: 0 42px 22px 0;
	border-color: transparent #333 transparent transparent;
	content:'';
	position:absolute;
	top:29px;
	left:-42px;
	z-index:9;
}
*/

div#back-to-lang{
	position:fixed;
	z-index:99;
	width:80px;
	height:80px;
	right:15px;
	bottom:15px;
	background-image:url('../images/svg/back-to-lang.svg');
}
div#back-to-lang > a{
	display:block;
	width:100%;
	height:100%;
}

div#guide-2_qrcode > p,
div#guide-3_qrcode > p,
div#guide-4_qrcode > p,
div#guide-5_qrcode > p,
div#guide-6_qrcode > p,
div#guide-7_qrcode > p,
div#guide-8_qrcode > p,
div#guide-11_qrcode > p,
div#guide-12_qrcode > p,
div#guide-13_qrcode > p,
div#guide-14_qrcode > p,
div#guide-15_qrcode > p,
div#guide-16_qrcode > p,
div#guide-17_qrcode > p,
div#guide-2_list > p,
div#guide-3_list > p,
div#guide-4_list > p,
div#guide-5_list > p,
div#guide-6_list > p,
div#guide-7_list > p,
div#guide-8_list > p,
div#guide-11_list > p,
div#guide-12_list > p,
div#guide-13_list > p,
div#guide-14_list > p,
div#guide-15_list > p,
div#guide-16_list > p, 
div#guide-17_list > p{
	position:absolute;
	width:80px;
	height:80px;
	border:solid 6px #FFF;
	box-shadow:3px 3px 8px rgba(0, 0, 0, 0.5);
	border-radius:50%;
	background:#F90;
	top:50%;
	left:50%;
	box-sizing:border-box;
}

div#guide-2_qrcode > p,
div#guide-3_qrcode > p,
div#guide-4_qrcode > p,
div#guide-5_qrcode > p,
div#guide-6_qrcode > p,
div#guide-7_qrcode > p,
div#guide-8_qrcode > p,
div#guide-11_qrcode > p,
div#guide-12_qrcode > p,
div#guide-13_qrcode > p,
div#guide-14_qrcode > p,
div#guide-15_qrcode > p,
div#guide-16_qrcode > p, 
div#guide-17_qrcode > p{
	margin:-40px 0 0 -40px;
}

div#guide-2_list > p,
div#guide-3_list > p,
div#guide-4_list > p,
div#guide-5_list > p,
div#guide-6_list > p,
div#guide-7_list > p,
div#guide-8_list > p,
div#guide-11_list > p,
div#guide-12_list > p,
div#guide-13_list > p,
div#guide-14_list > p,
div#guide-15_list > p,
div#guide-16_list > p, 
div#guide-17_list > p{
	margin:-48px 0 0 -40px;
}

div#guide-2_qrcode > p,
div#guide-2_list > p{
	background-image:url(../images/guider/alice.jpg);
	background-size:cover;
}

div#guide-3_qrcode > p,
div#guide-3_list > p{
	background-image:url(../images/guider/coco.jpg);
	background-size:cover;
}

div#guide-4_qrcode > p,
div#guide-4_list > p{
	background-image:url(../images/guider/esther.jpg);
	background-size:cover;
}

div#guide-5_qrcode > p,
div#guide-5_list > p{
	background-image:url(../images/guider/sylvia.jpg);
	background-size:cover;
}

div#guide-6_qrcode > p,
div#guide-6_list > p{
	background-image:url(../images/guider/chrissie.jpg);
	background-size:cover;
}

div#guide-14_qrcode > p,
div#guide-14_list > p{
	background-image:url(../images/guider/ruby.jpg);
	background-size:cover;
}

div#guide-7_qrcode > p,
div#guide-7_list > p{
	background-image:url(../images/svg/pearl.svg);
	background-size:cover;
}

div#guide-8_qrcode > p,
div#guide-8_list > p, 
div#guide-17_qrcode > p,
div#guide-17_list > p{
	background-image:url(../images/svg/CSV.svg);
	background-size:cover;
}

div#guide-11_qrcode > p,
div#guide-11_list > p,
div#guide-12_qrcode > p,
div#guide-12_list > p,
div#guide-13_qrcode > p,
div#guide-13_list > p{
	background-image:url(../images/svg/audio.svg);
	background-size:cover;
}

div#guide-15_qrcode > p,
div#guide-15_list > p{
	background-image:url(../images/guider/abbey.jpg);
	background-size:cover;
}

div#guide-16_qrcode > p,
div#guide-16_list > p{
	background-image:url(../images/guider/Wendy.jpg);
	background-size:cover;
}

/*
div#guide-17_qrcode > p,
div#guide-17_list > p{
	background-image:url(../images/guider/lucas.jpg);
	background-size:cover;
}
*/
div#guide-17_qrcode > p,
div#guide-17_list > p{
	background-image:url(../images/guider/Rorine.jpg);
	background-size:cover;
}

div#guide_404{
	position:absolute;
	width:100%;
	height:100%;
	display:flex;
	justify-content:center;
	align-items:center;
}

div#guide_404 > div{
	width:90%;
	max-width:800px;
	border:solid 4px #FFF;
	background-color:rgba(255, 255, 255, 0.5);
	border-radius:6px;
	padding:15px 10px;
	text-align:center;
	color:#666;
	font-size:1.5rem;
	margin:auto;
	position:relative;
}

P.no-result{
	text-align:center;
	color:#FFF;
	position:relative;
	width:100%;
}

div.signature-pad--body{
	position:relative;
	-webkit-box-flex:1;
	-ms-flex:1;
	flex:1;
}

@media only screen 
and (min-width: 320px) 
and (max-width: 1024px) 
and (-webkit-min-device-pixel-ratio: 2){
	
}

@media only screen 
and (min-width: 320px) 
and (max-width: 1024px){
	
}

@media only screen 
and (min-width: 320px) 
and (max-width: 782px){

	

}

@media only screen 
and (min-width: 320px) 
and (max-width: 782px) 
and (orientation: landscape){
	
}

@media only screen 
and (min-width: 768px) 
and (max-width: 1024px){
	
}

@media only screen 
and (min-width: 768px) 
and (max-width: 1024px) 
and (orientation: portrait){
	
}

@media only screen 
and (min-width: 768px) 
and (max-width: 1024px) 
and (orientation: landscape){
	div#guide_list > div{
		/* height:75%; */
		height:60px;
		overflow:auto;
		padding-bottom:0%;
	}
}

@media only screen 
and (min-width: 320px) 
and (max-width: 782px) 
and (orientation: portrait){
	#survey_greeting > .list_panel > div:last-child{
		flex:5;
		padding:0 20px 0 40px;
		height:110px;
	}
}