@font-face { font-family:'modVag'; font-style:normal; src: url('../font/modVAG-Rounded-Light.eot') format('embedded-opentype'); }
@font-face { font-family:'modVag'; font-style:normal; src: url('../font/modVAG-Rounded-Light.otf') }
@font-face { font-family:'Lucida Sans'; font-style:normal; src: url('../font/Lucida-Sans.woff') }

body { width:100%; height:100%; margin:0; padding:0; font-family:'Calibri'; font-size:17px; cursor:default; overflow-y: hidden; }
	.dark, :not(:root):fullscreen::backdrop { background-attachment: fixed; background:-webkit-radial-gradient(center, ellipse cover, #666 30%, #000 95%) !important; background:-moz-radial-gradient(center, ellipse cover, #666 30%, #000 95%); overflow: hidden; }
h1 { width:200px; font-size:20px; background-color:#000; padding:5px; color:#fff; border-radius:7px 7px 0 0; margin:10px 0 0 0;}
h2 { font-size:55pt; text-align:center; margin:0 0 10px 0; color:#fff; text-shadow:0 0 11px #fff}
h3 { font-size:20pt; text-align:center; margin:0 0 10px 0; color:#f00;}
h4 { font-size:20pt; text-align:center; margin:0 0 10px 0; color:#000; background-color:#fff; }
h5 { font-size:25pt; text-align:center; margin:0; color:#fff; text-shadow:1px 1px 4px #000; }
h6 { font-size:30pt; text-align:center; margin:20px 0 0 0; color:#fff; background-color:rgba(0,0,0, .7); padding:10px 0;}

hr {margin:0; border:1px solid #000;}
p {clear:both;}
	p.nilai {font:bold 50pt Calibri; margin:10px 0;}
img {
	user-drag: none; 
	user-select: none;
	-moz-user-select: none;
	-webkit-user-drag: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}
ol { margin: 2px 0; }

/* STANDARIZATION */
*, *::before, *::after { box-sizing: border-box; -webkit-user-select: none;}

.relatif { width: 100%; height: 100%; position: relative; }
#dvMain { position:fixed; top:40%; left:0; right:0; transform:translateY(-40%); text-align:center; }
	#dvMain .infobox { display:inline-block; width:500px; min-height:70px; background-color:#fff; color:#000; text-align:center; line-height:25px; border-radius:10px; box-shadow: 2px 2px 12px #000; padding:20px; margin-top:20px; clear:both; position: relative; transition:height .5s ease; }
		#dvMain .infobox.landing { padding-bottom: 75px; }
	#dvMain a, .tombol { padding:10px 20px; display:inline-block; font-size:17pt; color:#0063A3; font-weight:bold; text-decoration:none; border:2px solid #0074ff; border-radius:6px; cursor:pointer;
		background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #008DEB), color-stop(100%, #fff));
		background-image:-moz-linear-gradient(top, #008DEB, #fff);
	transition:all .5s ease;
	}
		#dvMain a:hover, .tombol:hover { color:#fff; background-color:#fff; border-color:#008DEB; font-size:23pt; border-radius:12px; padding:15px 30px; 
			background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fff), color-stop(100%, #008DEB));
			background-image:-moz-linear-gradient(bottom, #008DEB, #fff);
			bottom: 12px;
		}
		#startTest { position: absolute; left: 50%; bottom: 17px; transform:translateX(-50%); }
			.hid { display: none !important; }
	#dvMain i {color:#555; font-size:15px;}
	
.notify { display:inline-block; background-color:#e2e2e2; font:bold italic 15px "Lucida Sans"; color:#444; text-align:center; padding:5px 30px 5px 5px; border-radius:17px; margin-top:20px; }
	.info { background-color:#dbebff; color:#0a4377; }
	.warning { background-color:#fff59d; color:#6a4419; }
	.alert { background-color:#fcc; color:#711; }

	.notify-s {font-size:12px; padding:2px 20px 2px 2px; }
	.notify-inline { width: 100%; text-align: left; }

	.ip {
		display: block;
		font: normal 13px monospace;
		background-color: #eee;
		border-radius: 3px;
		padding: 6px;
		color: #555;
	}
		.ip b { color: #000; background-color: #fff; padding: 2px 4px; border-radius: 2px }
	.possibility .notify { margin: 4px 0; font-style: normal; }
		.possibility p { margin: 2px; }

	.icon { width:27px; height:27px; display:inline-block; background-image:url(../../img/icon.png); background-repeat:no-repeat; background-position:center center; vertical-align:middle; margin-right:10px; }
		.info .icon { background-image:url(../../img/iicon.png) }
		.warning .icon { background-image:url(../../img/wicon.png) }
		.alert .icon { background-image:url(../../img/aicon.png) }

#main { width:100%; height: 100%; background-color:#fff; display:block; }
	#main.noIndex .cards { right: 24px; -webkit-transition: right .5s; }
	#main.noIndex .indeks { width: 24px; -webkit-transition: width .5s; }
	#kop { position: fixed; top: 0; left: 0; right: 0; height: 50px; background-image: linear-gradient(to bottom,#3f3f3f 0%,#070707 100%); color:#fff; }
		.logo { height: 58px; position: absolute; top: 6px; left: 6px; z-index: 100; }
		h5.titler { font-size: 16px; text-align: left; text-indent: 60px; font-weight: normal; }
		h5#subjek { line-height: 23px; text-align: left; text-indent: 70px; font-size: 20pt; }
		.profil { position: absolute; right: 8px; top: 4px; bottom: 4px; width: 400px; overflow: hidden; }
			.foto { width: 55px; height: 95%; margin-right: 2px; margin-left: 8px; float: right; background: url(../../img/user.png) no-repeat center center; background-size: contain; background-color: #fafafa; border-radius: 2px; }
	#sName { height: 50%; font:bold 17px Tahoma; color:#FFC107; text-align: right; line-height: 22px; }
	#sClass { height: 50%; font:normal 14px Tahoma; color:#FFC107; text-align: right; line-height: 20px; }
		#sClass:hover { border-color:#aaa;}

	#labelkls { position:absolute; right:231px; bottom:16px; font:normal 15px Tahoma; }

/* SELECT BIODATA */
		.selBiodata { width:130px; height:35px; /*text-align-last:center;*/ font:bold 14px Tahoma; color:#00f; cursor:pointer; border-radius:4px; border: solid 1px #999; padding: 5px; }
			#pilihNama { width: 240px; }

		.selMapel { 
			/*display: none;*/
			background-color: transparent;
			font: bold 30pt Calibri;
			text-align: center;
			margin: 20px 0 0 0;
			color: #fff;
			padding: 10px 0;
			border-radius: 6px;
			padding: 3px 10px;
			border: 1px solid transparent;
			cursor: pointer;
			transition: background .5s;
		 }.selMapel:hover {
				background-color: #fff;
				border: 1px solid #fff;
				color: #000;
		 	}

		.selMapel optgroup { font-size: 15pt; background-color:#a00; color:#fff; }
		.selMapel option { font-size: 18pt; color:#a00; background-color:#fff; }

		.selSelected { border: none; -webkit-appearance: none; cursor: default;  }
	#sClass optgroup, .selBiodata optgroup { background-color:#bbb; color:#fff;}
		#sClass optgroup option, .selBiodata optgroup option { color:#00f; background-color:#fff; }

	.biodata { margin-top: 35px; text-align: center; }
		.biodata label { width: 380px; display: block; height: 40px; margin: 0 auto; clear: both; text-align: left;  }
			.biodata label b { width: 100px; display: inline-block; text-align: right; margin-right: 10px; }
			.biodata label select {  }

/* SELECT TITLE */
	.infobox h4 { position: absolute; font: normal 16px 'Lucida Console'; text-transform: uppercase; top: 1px; left: 1px; right: 1px; background-image: linear-gradient(to top,#3f3f3f 0%,#070707 100%); color:#fff; text-align: center; border-radius: 10px 10px 0 0; padding: 12px; }

img.picline { display: block; float: none; max-height: auto; clear: both; }
	img.picline.h-50 { max-height: 50vh !important; }

audio.listening { display: block; margin: 0 auto; border: 2px solid #444; }
	#tgl {position:absolute; left:635px; top:106px; font:normal 16px Tahoma; text-align:left;}

/*.mul {margin-top:15px; border-radius:10px; padding:10px 10px 10px 40px; border:1px dashed #bbb; background-color:#fff;
	background-position:bottom right;
	background-repeat:no-repeat;
}*/
.cards { position: absolute; top: 50px; left: 0; right: 250px; bottom: 38px; font-family:'modVag'; overflow-y: hidden; -webkit-transition: right .5s; }
	.mul { width: 100%; height: 100%; padding: 60px 20px 20px 95px; position: relative; overflow-y: auto; display: none; background-repeat: no-repeat; background-position: bottom 20px right 20px; background-size: 25%; }
	.mulmiss { border:5px solid #f00;}
		.mulmiss:hover { border:5px solid #f99 !important;}

	.mul strong {
		display: block;
		position: fixed;
		width: 70px;
		height: 38px;
		top: 100px;
		left: 0;
		background: url(../../img/bgnomor.png) no-repeat center right;
		font-size: 19pt;
		text-align: center;
		line-height: 29pt;
		color: #fff;
		
	}
	.mul>.ask { font-size: 15pt; }
		.mul>.ask>img, .mul>.ask>center>img {
		/*max-height:180px; max-height:90px; float:left; */


			/*max-width: 100%; display:block;*/


			max-height: 640px; display:block; margin: 15px auto;
			max-width: 100%;
			box-shadow: 0 0 8px 8px white inset;
			/*margin: 15px auto;*/
		/*margin:0 10px 5px 0; border:10px solid #fff; cursor:url('../icon/zoomin.cur'), pointer; border:1px solid #ccc;*/ }
			/*.mul>.ask>img:hover, .mul>.ask>center>img:hover { box-shadow:0px 0px 11px #222; }*/

		/*.mul .ask img:nth-of-type(0) { margin:7px 10px 7px 0 !important; }*/
			.picpos { float:none !important; margin:5px 10px 7px 0 !important; }
			
			blockquote {
				font: normal 14pt Times New Roman;
				background-color: #dfdfdf;
				text-shadow: 0 1px 0 #fff;
				padding: 12px;
				border-radius: 6px;
				box-shadow: 7px 7px 24px rgba(0,0,0,.5);
				color: #111;
				text-align: justify;

			}
				blockquote img { float: left !important; margin-right: 15px; margin-bottom: 15px; }
					blockquote.blue {
						background-color: #485dcd !important;
						font: normal 16pt 'modVag';
						letter-spacing: 0.5px;
						color: #fff;
						text-shadow: 0px 0px 4px #000;
						position: relative;
						padding-left: 50px;
						padding-right: 50px;
					}
						blockquote.blue:before {
							content: ' '; display: block;
							position: absolute; left: 6px; top: 5px;
							width: 27px; height: 27px;
							opacity: 0.3;
							background-image: url(../../img/qstart.png);
							background-repeat: no-repeat;
							background-size: contain;
						}
						blockquote.blue:after {
							content: ' '; display: block;
							position: absolute; right: 6px; bottom: 2px;
							width: 27px; height: 27px;
							opacity: 0.3;
							background-image: url(../../img/qend.png);
							background-repeat: no-repeat;
							background-size: contain;
						}
	.mul .ans {
		margin-top: 25px;
		background-color: #eaeaeabb;
		border-radius: 8px;
		padding: 10px;	
	}
		.ans>label>img.zoomans {cursor:url('../icon/zoomin.cur'), pointer; }
		.ans>label>img.fullsize {max-height:unset !important; }
	
	.mul .ask label { font-size:14pt; font-weight:bold; display:block; clear:both; border-radius:5px; line-height:14pt; padding:12px 8px 12px 40px;  cursor:pointer; }
		.mul .ask label:hover, .jwbsel:hover {background-color:rgba(255,255,0,0.7);}
		.mul .ask input[type=radio] {width:17px; height:17px; float:left; margin:0 12px 0 -30px; background-color:#FF0004; cursor:pointer; }
			.mul .ask label img { margin:-3px 3px -3px -3px; vertical-align:middle; /*max-height:60px; */}
				.mul .ask .ans>label>img { max-height: 60px; }
				.mul .ask .ans>label>img.large {max-height:100px; }
		.jwbsel {background-color:rgba(0,255,243,0.50) !important; text-shadow:1px 1px 1px #fff; color:#00a; cursor:default !important;}

	#wrapper {width:100%; height:100%; background-color:#333; opacity:.6; position:fixed; top:0; left:0; z-index:19;}
	#zoom {position:fixed; background-color:#fff; display:block; cursor:url('../icon/zoomout.cur'), pointer; z-index:99999; border:1px solid #fff; border-radius:2px;}
		.moreshadow {box-shadow: 0px 0px 12px #222;}

	.mul.showing { display: block; }

.indeks { position: absolute; width: 250px; top: 50px; right: 0; bottom: 38px; overflow: hidden; background-image: linear-gradient(to bottom,#ff8000 0%,#ffee20 100%); /*padding: 17px 10px 2px 10px;*/ text-align: center; overflow: hidden /*auto*/; -webkit-transition: width .5s; }
	.indeks h5 { width: 230px; font: bold 16pt modVag; text-transform: uppercase; letter-spacing: 1.5px; margin-top: 17px; margin-left: 24px; }
	.dvIndex { width: 230px; margin: 8px 10px 0 22px; text-align: center; }
		.dvIndex>div { width: 42px; height: 42px; display: inline-block; background-color: #fff; border-radius: 4px; border: 2px solid #999; margin: 4px 4px; font: bold 15pt 'Lucida Console'; text-align: center; line-height: 40px; color: #555; cursor: pointer; }
			.dvIndex>div:hover { background-color: #fff; color: #000; border-color: #000 }
		.dvIndex>div.answered { /*background-color: #7ffff9; border-color: #497aff; color: #06a;*/ background-color: #000; border-color: #000; color: #fff; }
			.dvIndex>div.answered:hover { background-color: #7ffff9; border-color: #497aff; color: #06a; }

		.dvIndex>div.curIndeks { background-color: #fff; color: #e48b00; border-color: transparent; border-radius: 20px; box-shadow: 0 0 23px 12px #fff; cursor: default; }

		#btnIndeks {
			position: absolute;
			width: 24px;
			bottom: 0; left: 0; top: 0;
			background-color: #f1f1f1;
			cursor: pointer;
		}
		#btnIndeks:hover { background-color: #ccc; }
			#btnIndeks>b {
				position: absolute;
				width: 150px;
				left: 2px; top: 50%;
				display: inline-block;
				background-color: #aaa;
				color: #fff;
				border-radius: 4px;
				font-size: 12pt;
				-webkit-transform: rotate(-90deg) translateX(-50%);
				transform-origin: left top 0;
			}
				#btnIndeks:hover>b { background-color: #ccc; color: #000; }

.footer { position: fixed; bottom: 0; left: 0; right: 0; height: 38px; font: italic 14px "Lucida Sans"; color:#444; background-image: linear-gradient(to bottom,#3f3f3f 0%,#070707 100%); color:#fff; vertical-align: middle; padding: 0 4px; }
	.btn { font: bold 18px Calibri; display: inline-block; text-align:center; color: #135; text-shadow:1px 1px 1px #cef; background:url(../../img/btnfin.gif) bottom repeat-x; border: 1px solid #2B85FF; border-radius: 4px; cursor: pointer; padding: 2px 10px; margin: 5px 2px; position: relative; }
		.btn:hover { background-image:url(../../img/btnfinH.gif); border-color:#fd4; color:#860; }
		#btnBack, #btnNext { }
		#btnFinish { float: right;  }
		.dvAutonext { height: 30px;  font: normal 14px modVag; letter-spacing: 0.6px; line-height: 33px; float: left; margin-top: 4px; cursor: pointer; padding: 0 6px 0 0; border-radius: 3px; }
			.dvAutonext:hover { background-color: #fff; color: #000; }
			#autonext { width: 20px; height: 20px; vertical-align: middle; cursor: inherit; }

		.icn { width: 14px; height: 22px; background-repeat: no-repeat; }
			.iback { background-image: url(../../img/prev.png); float: left; margin-right: 6px; }
			.inext { background-image: url(../../img/next.png); float: right; margin-left: 6px; }
		.cBlue{ color:#00f; }
		.cRed{ color:#f00; }
		.cGreen{ color:#060; }

	#dvflush {width:50px; position:fixed; right:0; bottom:0; cursor:crosshair; }
		#kodeflush { width:100%; background-color:transparent; border:none; text-align:center; color:transparent; opacity: 0; cursor: default; }
			#kodeflush:focus { outline: none; }

	#dvwait {width:300px; height:80px; padding:10px 20px; background:#fff url(../../img/loading.gif) no-repeat 22px 21px; position:fixed; left:50%; top:50%; margin-left:-160px; margin-top:-45px; border-radius:4px; box-shadow:1px 1px 6px #000; font-weight:bold; z-index:21; }
		#dvwait i { float:right; font-size: 14px; color: #888 }

#teacherkode { font:bold 17pt Tahoma; text-align:center; padding:5px 10px; border-radius:6px; border:1px solid #497AFF; margin-top:15px; box-shadow:0 0 10px #497AFF; color:#B30002; }

/* REVIEWING */
	.review .mul .ask label { cursor:default; }
	.wrong, .wrong:hover {border:5px solid #f00;}
		.review .mul .ask label:hover {background-color:transparent}
		.dijawab, .dijawab:hover {background-color:#0f0; text-shadow:1px 1px 1px #fff; color:#0F5F00;}
			.wrong .dijawab {background-color:#e40000 !important; text-shadow:none; color:#fff;}

/* TEACHER */
.tbl_student { width:100%; border:1px solid #777; border-collapse:collapse; }
	.tbl_student tr>* { padding:4px 2px; }
	.tbl_student tr td:nth-child(1), .tbl_student tr td:nth-child(3) { text-align:center; }

/* FULLSCREEN */
html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	background-color: #fff;
}


#fullscreen:-webkit-full-screen {
	background:#000; 
	width: 100%;
}