html, body{
		height: 100%;
		font-family: 'arial';
		font-size:10pt;
		margin: 0;
		background:#c9c9c9;
	}
	.header{
		background: #336799;
		padding-top:1px;
		padding-left:20px;
		border-bottom:1px solid gray;
	}
	
	

.time1{
background:gray;
color:white;
font-size:13px;
font-weight:bold;
text-align:center;
padding:10px;
width:150px;
}


.time2{
background:#34679c;
color:white;
font-size:13px;
font-weight:bold;
text-align:center;
padding:10px;
margin-right:0px;
}


.main{
background:white;
margin:0 auto;
margin-left:10px;
margin-top:30px;
margin-right:10px;
margin-bottom:10px;
}

.main-head{
padding:15px;
border-bottom:1px solid #ccc;
background:#eee;
font-size:13pt;
margin-bottom:20px;
font-weight:500;
}

.main-content{
padding-top:15px;
padding-left:20px;
padding-right:20px;
padding-bottom:20px;
}
.main-content2{
padding-top:15px;
}

.soal-head{
padding-top:30px;
padding-left:20px;
padding-bottom:25px;
font-weight:bold;
font-size:13pt;
}

.soal-head-2{
background:#f6f6f6;
padding-top:15px;
padding-bottom:15px;
padding-left:20px;
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
}

.nomor{
background:#34679c;
color:white;
font-size:13pt;
font-weight:bold;
text-align:center;
margin-top:5px;
padding:5px;
width:35px;
}

 /* Button */		
  
.button{color:white;background:#34679c; border:1px solid #34679c;height:30px;margin-top:5px;padding-left:5px;padding-right:5px;}
.button:hover{color:white;background:#0a63be; border:1px solid #0a63be; }
.button:active,
.button.active{color:white;background:#00acee;  border:1px solid #00acee;}

.button2{color:white;background:#0072c6; border:1px solid #0072c6;margin-top:2px;margin-bottom:2px;padding-left:5px;padding-right:5px;}
.button2:hover{color:white;background:#0a63be; border:1px solid #0a63be; }
.button2:active,
.button2.active{color:white;background:#00acee;  border:1px solid #00acee;}


.button-m{color:white;background:#e10101; border:1px solid #e10101;margin-top:2px;margin-bottom:2px;padding-left:5px;padding-right:5px;}
.button-m:hover{color:white;background:#ff0000; border:1px solid #ff0000; }
.button-m:active,
.button-m.active{color:white;background:#e10101;  border:1px solid #e10101;}

.button-g{color:white;background:#5bb85d; border:1px solid #5bb85d;margin-top:2px;margin-bottom:2px;padding-left:5px;padding-right:5px;}
.button-g:hover{color:white;background:#019438; border:1px solid #019438; }
.button-g:active,
.button-g.active{color:white;background:#5bb85d;  border:1px solid #5bb85d;}

.button-p{color:white;background:#d85551; border:1px solid #d85551;margin-top:2px;margin-bottom:2px;padding-left:5px;padding-right:5px;}
.button-p:hover{color:white;background:#cd5350; border:1px solid #cd5350; }
.button-p.active{color:white;background:#d85551;  border:1px solid #d85551;}

.button-gr{color:white;background:gray; border:1px solid gray;margin-top:2px;margin-bottom:2px;padding-left:5px;padding-right:5px;}
.button-gr:hover{color:black;background:#ccc; border:1px solid #ccc; }
.button-gr:active,
.button-gr.active{background:#ccc;  border:1px solid #ccc;}

.button-next{
color:white;
background:#34679c url('../images/next-btn.png') no-repeat 147px 8px;
border:1px solid #0072c6;
height:35px;
width:180px;
margin-top:5px;
padding-left:5px;
padding-right:5px;
margin-right:20px;
}
.button-next:hover{color:white;background:#e66c67 url('../images/next-btn.png') no-repeat 147px 8px; border:1px solid #e66c67; }

.button-prev{
color:white;
background:gray url('../images/prev-btn.png') no-repeat 12px 8px;
border:1px solid gray;
height:35px;
width:190px;
margin-top:5px;
padding-left:5px;
padding-right:5px;
margin-left:20px;
}
.button-prev:hover{color:white;background:#e66c67 url('../images/prev-btn.png') no-repeat 12px 8px; border:1px solid #e66c67; }




table{
margin-top:5px;
font-family: 'arial';
font-size:9pt;
padding:10px;
border-collapse:collapse;
border-color:#ccc;
}



td{
padding:3px;
height:20px;
border-color:#ccc;
}

.head{
height:25px;
padding:10px;
font-size:11pt;
color:red;
background:#eee;
font-weight:bold;
}

a:link {
	color: #004080;
	text-decoration: none;

}
a:visited {
	color: #004080; /* warna hurup menu */
	text-decoration: none;
	
}
a:hover {
	color: #FF0000;

}
a:active {
	color: #FF0000;
	text-decoration: none;
	font-weight:none;
}

img {
	border: 0;
	
}



/*
 * Base
 */



.kosong{background:white; border:2px solid #444;height:40px;width:40px;font-size:12pt;}
.kosong:hover{color:white;background:#e66c67; border:2px solid #e66c67; }

.isi{background:#366697; border:2px solid #366697;height:40px;width:40px;font-size:12pt;color:white}
.isi:hover{color:white;background:#e66c67; border:2px solid #e66c67; }

.ragu2{background:#deb600; border:2px solid #deb600;height:40px;width:40px;font-size:12pt;color:white}
.ragu2:hover{color:white;background:#e66c67; border:2px solid #e66c67; }



.bulat-kosong { 
border:2px solid #444; 
width:18px; 
height:17px; 
border-radius:100px; 
padding-left:1px;
padding-top:2px;
font-size:12px;
position: relative;  
bottom: 50px; 
left:15px;
background:white;

}

.bulat-isi { 
border:2px solid #366697; 
width:18px; 
height:17px; 
border-radius:100px; 
padding-left:1px;
padding-top:2px;
font-size:12px;
position: relative;  
bottom: 50px; 
left:15px;
background:white;
font-weight:600;
font-weight:bold;
color:#366697;
}


.bulat-ragu { 
border:2px solid #deb600; 
width:18px; 
height:17px;
border-radius:100px; 
padding-left:1px;
padding-top:2px;
font-size:12px;
position: relative;  
bottom: 50px; 
left:15px;
background:white;
font-weight:600;
color:#deb600;
}




.lembar_jawab{
padding-bottom:5px;
padding-right:5px;
padding-left:5px;
min-height: 80px;
}

.judul_lj{
height:20px;
font-weight:bold;
border-bottom:1px dotted gray;
padding-bottom:5px;
padding-top:10px;
color:red;
}

legend{
font-weight:bold;
color:#565757;
font-size:8pt;
}

fieldset{
border:1px solid #828282;
}


.round-button {
    display:block;
    width:11px;
    height:11px;
    border: 2px solid gray;
    border-radius: 50%;
    color:#f5f5f5;
    text-align:center;
    text-decoration:none;
    font-size:7pt;
	padding:3px;
}
.round-button:hover {
    background: #262626;
}


.user {
color:#b1b4b7;
height:35px;
font-family: 'Segoe UI', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
font-size:10pt;
border: 1px solid  #ccc;
margin-bottom:3px;
margin-top:3px;
background: white url(../images/user.png) no-repeat 0px 0px;
padding-left:45px;
width:280px;
margin-left:15px;
}


.user:active,.user:focus{
border: 1px solid  gray;
-webkit-box-shadow: inset 0px 1px 4px 1px #929292;
-moz-box-shadow: inset 0px 1px 4px 1px #929292;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset;
}


.pass {
color:#b1b4b7;
height:35px;
font-family: 'Segoe UI', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
font-size:10pt;
border: 1px solid  #ccc;
margin-bottom:3px;
margin-top:3px;
background:white url(../images/pass.png) no-repeat 0px 0px;
padding-left:45px;
width:280px;
margin-left:15px;
}


.pass:active,.pass:focus{
border: 1px solid  gray;
-webkit-box-shadow: inset 0px 1px 4px 1px #929292;
-moz-box-shadow: inset 0px 1px 4px 1px #929292;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset;
}

.ragu{
background:#deb600;
padding:8px;
color:white;
width:160px;
font-weight:bold;
}

	
	/*style untuk popup */	
	#popup {
		background-color: rgba(0,0,0,0.8);
		position: fixed;
		top:0;
		left:0;
		right:0;
		bottom:0;
		margin:0;
		-webkit-animation:autopopup 2s;
		-moz-animation:autopopup 2s;
		animation:autopopup 2s;
	}
	#popup:target {
		-webkit-transition:all 1s;
		-moz-transition:all 1s;
		transition:all 1s;
		opacity: 0;
		visibility: hidden;
	}

	@media (min-width: 768px){
		.popup-container {
			width:450px;
		}
	}
	@media (max-width: 767px){
		.popup-container {
			width:100%;
		}
	}
	.popup-container {
		position: relative;
		margin:15% auto;
		background-color: #fafafa;
		color:#333;
		border-radius: 3px;
	}

	a.popup-close {
		position: absolute;
		top:3px;
		right:3px;
		background-color: #333;
		padding:7px 10px;
		font-size: 20px;
		text-decoration: none;
		line-height: 1;
		color:#fff;
	}
	/* end style popup */

	
[type="radio"]{
    display:none;

}

[type="radio"] + label
{
    width: 17px;
	height:16x;
	padding-top:1px;
	padding-bottom:1px;
    display:inline-block;
	background : white;
	border-radius:100%;
	border:2px solid gray;
	text-align:center;
	color:gray;
	font-weight:600;
}

[type="radio"]:checked + label
{
    width: 17px;
    display:inline-block;
	background : #366697;
	border-radius:100%;
	border:2px solid #366697;
	text-align:center;
	color:#366697;

}