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

body{
	user-select:none;
	-moz-user-select:none;
	-webkit-user-select:none;
	-ms-user-select:none;
	background-color:black;
	touch-action:none;
	margin:0;
	padding:0;
	font-family:"Share Tech Mono";
	font-size:14pt;
}

input,option,select,label{
	font-family:"Share Tech Mono";
	font-size:16pt;
}

input[type="range"]{
	width:8em;
}

label{
	white-space:nowrap;
}
#main{
	position:absolute;
	top:0;left:0;
	width:100%;
	height:100%;
}

#fig{
	position:absolute;
	margin:auto;
}

#cnfg{
	font-size:16pt;
	position:absolute;
	margin:auto;
	padding:0;
	bottom:0;left:0;
	z-index:1001;
	display:none;
	width:100%;
}

#cnfg_close,#tab_camera,#tab_char,#tab_color{
	background-color:#cccc;
	margin:0;
	padding:0.5em;
	line-height:2em;
	border-right: 1px #999 solid;
}

#cnfg_camera,#cnfg_char,#cnfg_color{
	background-color:#cccc;
	margin:0;
	padding:0.2em 0.5em 0.2em 0.5em;
	top:0;left:0;
	border-top: 1px #eee solid;
}

#cnfg_close{
	background-color:#999;
}

#info{
	position:absolute;
	font-size:18pt;
	font-weight:bold;
	padding:0.2em;
	color:red;
	width:100%;
	z-index:1000;
	display:none;
	text-align:center;
}

.icon{
	position:absolute;
	width:1em;height:1em;
}
.icon_l{
	position:absolute;
	width:1.2em;height:1.2em;
}

#back,#stop,#rec_stop,#video,#download,#environment{
	display:none;
}

#prgrs{
	position:absolute;
	margin:auto;
	width:6em;
	height:5em;
	text-align: center;
	padding:1em;
	top:0;right:0;bottom:0;left:0;
	font-size:24pt;
	z-index:1001;
	background-color: #888c;
	display:none;
}

#prgrs input{
	font-size:18pt;
}

#prgbar{
	width:100%;
	height:1em;
	background-color: #fff;
}

#prgval{
	width:0;
	height:1em;
	background-color: #f00;
}

.cntrl{
	font-size:40pt;
	position:absolute;
	margin:auto;
	background-color:#000c;
	z-index:1000;
}

#rec_start,#rec_stop,#shot,#back{
	inset:0;
	margin:auto;
}

@media(orientation:landscape){
	#fig{
		inset:0 auto 0 0;
	}
	#cntrl{
		width:1.2em;height:100%;
		right:0;top:0;
	}
	#cnfg_open{
		inset:auto 0 0 auto;
	}
	#upload{
		inset:auto 0 1em auto;
	}
	#download{
		inset:0 0 auto 0;
	}
	#camera,#video{
		inset:1em 0 auto auto;
	}
	#user,#environment{
		inset:0 0 auto auto;
	}
	#info{
		inset:auto 0 0 0;
	}
}
@media(orientation:portrait){
	#fig{
		inset:0 0 auto 0;
	}
	#cntrl{
		width:100%;height:1.2em;
		left:0;bottom:0;
	}
	#cnfg_open{
		inset:auto auto 0 0;
	}
	#upload{
		inset:auto auto 0 1em;
	}
	#download{
		inset:auto 0 0 auto;
	}
	#camera,#video{
		inset:auto 1em 0 auto;
	}
	#user,#environment{
		inset:auto 0 0 auto;
	}
	#info{
		inset:auto 0 45pt 0;
	}
}