*,*:after,*:before {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;	box-sizing: border-box;}
html,body{margin:0;color:#333;font-family:Segoe UI,calibri,arial;background-color:#555;padding:2.5em 0.65em 0px 0.65em;}
#container,.sh,#showbutton{display:none;overflow:hidden;}
h1, h2, h3, h4, h5, p {margin:0;padding:0}
::-webkit-scrollbar {width:0;}
::-webkit-input-placeholder {color:#bbb;opacity:0.75;}
.stamp{padding:0.275em;text-align:center;letter-spacing:5px;margin-right:0px;border:0px solid transparent;font-weight:bold;font-size:16pt;}
input,button,select,option{padding:0.5em;margin:0px;color:#222;border:0px solid transparent;}
.fa,hapus{cursor:pointer;}
i .fa{font-family:Segoe UI;}
#frame{max-width:100%;margin:0 auto;padding:0;position:relative;background-color:#fff;}
#kanvas{clear:both;display:block;position:relative;min-height:85vh;overflow:auto;width:100%;padding-top:1.25em 1em;}
#futer{clear:both;height:4em;margin:0px auto;margin-top:3em;bottom:0px;padding:0.75em 1.5em;display:block;position:relative;width:100%;text-align:right;border-top:0.5px solid silver;}
#header{clear:both;width:100%;margin:0px auto;padding-top:2em;padding-left:1em;border-bottom:silver solid 0.5px;margin-bottom:0px;color:#adeaef;}
#head{font-size:20pt;position:fixed;left:110px;top:1em;display:inline-block;color:#fff;}
#ondasboard{background-color:#555;color:#fff;position:fixed;width:100%;top:0;left:0;padding:1em 1.5em;display:block;z-index:100;}
#ondasboard img{height:64px;display:inline-block;float:left;}
#menu{clear:both;position:relative;padding:0px;margin:0px;}
#geser{display:none;clear:both;position:fixed;width:100%;padding:1em;margin:0px;border-bottom:1.5px solid #555;z-index:99;background:#fff;height:3.5em;}
#menu{float:left;width:19.5%;padding:1em;padding-bottom:0.5em;position:absolute}
#kanvas{float:right;width:81%;padding:1.5em 1em;position:relative;}
#nav{margin:1em auto;clear:both;padding:1em 0px;}
#menunav{cursor:pointer;display:none;position:fixed;top:4em;right:0;background-color:#6699CC;color:#fff;padding:1em;z-index:105;}
.menu{padding:0.75em;width:100%;color:#777;margin-bottom:0.5em;}
.menu .fa{color:#adeaef;margin-right:0.5em;}
.menu:hover, .menu a:hover{cursor:pointer;background-image: linear-gradient(to right, #efefef , #fff);color:#000;}
.menu a{text-decoration:none;color:#555;margin-left:0.5em;letter-spacing:6px;}
#prosesi,#blank{display:none;position:fixed;top:0;left:0;height:100%;width:100%;padding-top:15%;z-index:100;overflow:hidden;margin:0;text-align:center;color:#fff;}
#blank{background:rgba(51, 51, 51, 0.65);color:#fff;}
.grup{clear:both;width:100%;margin:0px;padding:0.25em;}
.avatar{width:96px;height:96px;border-radius:50%;overflow:hidden;text-align:center;}
.avatar img{display:block;width:100%;overflow:hidden;}
.right{float:right;}
.left{float:left;}
.#mulai{float:left;padding:0.5em 1.5em;cursor:pointer;margin:1em auto;}
.nam,.half,.pertiga,.perempat{float:left;margin:0px;padding:0px;display:inline-block;}
.whole{width:99%;}
.nam{width:65%;}
.half{width:50%;}
.pertiga{width:31%;}
.perempat{width:25%;}
.perdelapan{width:11%;}
.fixed{position:fixed;overflow:hidden;max-height:100%;}
#alert{position:fixed;z-index:1000;bottom:3em;left:2em;overflow:hidden;padding:0.5em 1.5em;}
#alert h2, #alert h3, #alert p, #alert h4 {display:inline-block;margin:0px 1em;}
.bisa{background:rgba(75, 233, 252, 0.90);color:#4877bc;padding:1em;}
.gagal{background:rgba(252, 85, 152, 0.90);color:#fff;padding:1em;}
.salah{background:rgba(220, 220, 220, 0.90);color:#222;padding:1em;}
#token{clear:both;margin-top:1em;border:1px solid #6699CC;color:#555;font-size:16pt;letter-spacing:5px;width:8em;}
.pertiga img{width:100%;overflow:hidden;margin-top:0.5em;margin-top:-2em;padding:1em;}
.galerilist{max-height:210px;overflow:hidden;margin:0;}
.galerilist:hover{opacity: 0.7;cursor: zoom-in;}
.textbox{width:100%;clear:both;border:1px solid #555;color:#444;position:relative;min-height:3em;padding:0.5em;}
.klik{padding:0.5em;min-width:7.5em;cursor:pointer;text-indent:0px;display:inline-block;text-align:center;color:#fff;border:1px solid transparent;}
.toska{background-color:#35acb0;color:#fff;}.toska:hover {background-color:#009999;color:#aaa;}
.blewa{background-color: #ffcc66;color:#000;}.blewa:hover{background-color: #ffcc99;}
.jambon{background-color:#ff6666;color:#fff;}.jambon:hover { background-color:#ff9999;}
.ungu{background-color:#9966FF;}.ungu:hover { background-color:#9900FF;}
.abu{ background-color:#aaa;color:#fff; }.abu:hover{ background-color:#666;color:#fff; }
.abumuda{ background-color:#ddd;color:#000; } .abumuda:hover{ background-color:#aaa; }
.biru{ background-color:#6699CC;color:#fff; }.biru:hover{ background-color:#666699; }
.ijo,.more{ background-color:#669966;color:#fff;} .ijo:hover,.more:hover{ background-color:#006633; }
.tembus{background:transparent;color:#666;text-align:center;border:1.5px solid #888;} .tembus:hover{color:#111;border:1.5px solid #333;}
mark{background:transparent;color:#35acb0;font-size:15pt;border-bottom:1.5px solid #35acb0;}
marks{background:#efefef;color:#6699CC;padding:0.5em 0px;border-left:orange solid 1.5px;font-size:15pt;font-weight:bold;}
.bottom{padding:0.75em;position:fixed;bottom:0px;background:#fff;margin:0px;}
.top{clear:both;padding:0.75em;position:fixed;top:0px;background:#fff;margin:0px;}
.tools{z-index:101;display:none;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);padding:0.5em;position:absolute;top:3em;background:#fff;margin:0px;}
.tools .klik{margin:0.5em 0px;display:block;}
.konfirmasi{position:absolute;z-index:259;width:auto;height:auto;background:#fff;padding:1em;top:35%;left:25%;box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2);overflow:auto;opacity:1.0;color:#111;display:none;}
.bayang{box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
.popfull{width:95%;height:95%;position:absolute;z-index:255;padding:1em;background:#fff;top:2.5%;bottom:2.5%;right:2.5%;overflow:auto;}
.popup{width:auto;max-width:85%;background:#fff;padding:1em;z-index:255;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);}
.dele{margin-left:7em;position:absolute;z-index:10;padding:0.5em;vertical-align: middle;text-align:center;font-weight:bold;background-color:#efefef;border:1px #111 solid;color:#111;color:#222;}
#close,del,#tutup{clear:both;cursor:pointer;position:absolute;z-index:1005;padding:0.25em;font-weight:bold;top:-0.5em;right:-0.5em;border-radius:50%;width:1.75em;height:1.75em;line-height:1.75em;vertical-align: middle;text-align:center;font-size:16pt;background-color:#fff;border:2px #333 solid;color:#333;}
#close:hover,.dele:hover,#tutup:hover{background:#efefef;color:#555;border:2px #555 solid;}

#page{position:fixed;width:81%;overflow:auto;min-height:2.5em;clear:both;margin:0px;bottom:0px;right:0px;}
.page{cursor:pointer;display:inline-block;padding:0.25em;float:left;background:#efefef;text-align:center;height:2.5em;min-width:2.5em;}
.page:hover{background:#aaa;color:#fff;}

table{border-collapse:collapse;margin-bottom:1em;overflow:auto;background:#fff;}
#tabledata {width:100%;table-layout:fixed;overflow:auto;}
td b{color:#333;}
table,th,td{text-align:center;}
.thead{text-align:center;font-weight:bold;font-size:13pt;padding:0.5em;background:#444;color:#fff;}
.even,.odd{padding:0.5em;font-size:12pt;}
.even{background:#fff;color:#666;}.odd{background:#efefef;color:#444;}td input{padding:auto;width:100%;margin:0px;}

.textarea{width:100%;padding:0.5em;margin:2em auto;clear:both;}
.gbinput{width:256px;padding:1em;margin:2em auto;clear:both;text-align:center;}

#daftarsoal{margin-top:3em;width:100%;display:block;padding:0.25em;padding-bottom:5em;}
.sub{display:none;padding-left:2.5em;}
.numo{
text-decoration:none;background-color:#336799;position:relative;text-align:center;
color:#fff;float:left;min-width:5.75em;max-height:1.75em;line-height:1.75em;vertical-align:middle;
font-weight:bold;font-size:12pt;
}
.resultjawab{
text-decoration:none;background-color:#555;position:relative;text-align:center;
color:#fff;float:left;min-width:7.75em;max-height:1.75em;line-height:1.75em;vertical-align:middle;
font-weight:bold;font-size:12pt;
}

.num{
text-decoration:none;background-color:#555;position:relative;border:4px #555 solid;text-align:center;
color:#fff;margin:0.4em;float:left;width:2.75em;max-height:2.75em;line-height:2.75em;vertical-align:middle;
font-weight:bold;font-size:1.5em;
}
.num:hover{background-color:#333;}
.numprint{
background-color:#fff;position:relative;border:1px #333 solid;text-align:center;padding:0.25em;color:#111;width:auto;font-weight:bold;
}
#nomor{
display:none;
box-shadow: 4px 4px 4px 2px rgba(0,0,0,0.45); 
overflow:auto;
cursor:pointer;
position:fixed;top:4em;
z-index:144;
margin:0;
text-align:right;
right:0;
width:30em;
max-height:520px;
clear:both;
padding:0.5em;
background-color:#fff;
border:5px #ccc solid;
}
#flip
{
padding:0.5em;
z-index:15;
box-shadow: 5px 5px 5px 3px rgba(0,0,0,0.45); 
position:fixed;top:35%;
background:#e46f69;
color:#FFF;
cursor:pointer;
right:0;
height:3.5em;
}
#flip:hover,.sudah:hover{background:#ec5c54;}
#chevron,#list{float:left;height:3em;vertical-align:middle;paddin:0.5em;}
#chevron{line-height:3em;margin-right:0.5em;}
#list{width:3em;position:relative;}
#navigasisoal
{border:1px #555 solid;border-left:0;border-right:0;overflow:hidden;width:80%;z-index:2;
text-align:center;font-weight:bold;padding:1em;height:5em;display:block;background:#eee;position:fixed;bottom:0;right:0px;
}
.soalnext,.soalprev{cursor:pointer;max-height:5.5em;width:13em;display:inline-block;padding:1em;color:#fff;text-align:center;}
.soalnext{float:right;margin-right:2em;background-color:#336799;} .soalnext:hover {background-color:#006699;}
.soalprev{float:left;margin-left:2em;background-color:#555;} .soalprev:hover {background-color: #333;}
.yakin{padding:0px 1.5em;height:3.25em;display:inline-block;float:center;margin-left:1.5em;border:1px transparent solid;background:#ccc;text-align:center;}
.ragu,.yakin:hover{background-color:#FFFF66;color:#111;}

#selno{font-weight:bold;display:inline-block;float:left;margin:0px 1em;background:#336799;color:#fff;padding:0.5em 1.25em;}
.butir{background:#fff;display:none;min-height:420px;overflow:auto;border:#ccc solid 1px;padding:1em;}
#naskah{border:1px solid #eee;}
.naskah{font-size:15pt;margin-bottom:1em;width:100%;clear:both;}
.opsi,.opsitext,.opsi .fa-edit{display:inline-block;float:left;}
.opsig{display:inline-block;float:left;margin-right:3em;}
.opsitext{margin-left:1em;padding:0.25em;font-size:13pt;}
.cek{font-size:1em;border:1.5px #aaa solid;color:#aaa;cursor:pointer;text-align:center;font-weight:bold;border-radius:50%;padding:0;width:1.65em;height:1.65em;line-height:1.65em;vertical-align:middle;}
.terpilih{background-color:#336799;border:1.5px #336799 solid;color:#fff;}
}
.fa:hover{color:#000;}
.input{display:block;clear:both;padding:0px 0.5em;margin-bottom:1.25em;auto;border-bottom:1px solid #6699CC;width:320px;overflow:auto;}
.in{width:auto;background:transparent;width:2.75em;border:0px solid transparent;font-weight:bold;}
#listpesan{width:540px;overflow:auto;background:#f3f3f3;padding:1em;clear:both;}
@media print {
	#cetak{display:block;font-size:12pt;width:100%;height:100%;background:#fff;}
	#menu,#prosesi,#blank,.klik,#close,button,.popup,#tutup,#print,#kanvas{background:#fff;display:none;margin:0px;padding:0px;}
	#kanvas{width:100%;}
	#cetak{position:relative;width:100%;top:1em;height:auto;overflow:auto;}
	table{
	font-family:Times New Roman;cellpadding:0;margin:0 auto;padding:0;
	font-size:12pt;
	background-image:none;
	}
	b,p,h1,h2,h3,h4{color:#222;}
	table,th,td{padding:0.2em 0.25;border:1px solid black;}
	.thead{background-color:#eee;color:#000;text-align:center;border-bottom:1px #111 solid;padding:0.15em;}
	.even,.odd{background-color:#fff;color:#111;padding:0; margin:0;overflow:hidden;white-space:nowrap;padding:0.15em;}

	@page {
	size: 216mm 330mm;
	margin:5mm 15mm;
	}
}

.blink{animation:1s blinker linear infinite;-webkit-animation:1s blinker linear infinite;-moz-animation:1s blinker linear infinite;}
@-moz-keyframes blinker { 0%{ opacity: 1.0; } 50% { opacity: 0.0; } 100% { opacity: 1.0; } }
@-webkit-keyframes blinker { 0% { opacity: 1.0; } 50% { opacity: 0.0; } 100% { opacity: 1.0; } }
@keyframes blinker { 0% { opacity: 1.0; } 50% { opacity: 0.0; } 100% { opacity: 1.0; } }
.close{background:#fff;height:1.5em;width:1.5em;text-align:center;border-radius:50%;border:0.5px solid #CC0066;color:#CC0066;padding:0.15em;position:absolute;top:-9px;right:-9px;}

@media screen and (max-width: 640px) {
html,body{padding:2.5em 0.25em 0px 0.25em;}
#navigasisoal,.top,.perempat,.half,.pertiga,#listpesan,.input{width:100%;}
#daftarsoal{padding:0.15em;}
.popup{position:fixed;width:90%;right:5%;}
.top{top:3.5em;left:0px;}
.butir{height:auto;border:#eee solid 0.5px;padding:0.25em;}
#kanvas{width:100%;}
.half,.pertiga{margin-bottom:1.5em;}
#geser{display:block;}
#menu{display:none;width:auto;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);position:fixed;right:0.5em;top:2em;z-index:104;background:#fff;}
#head{display:none;}
chef{display:none;}
.soalnext,.soalprev{width:4.5em;}
}