*{
	margin:auto;
	padding:0;
	-webkit-box-sizing:border-box;
	   -moz-box-sizing:border-box;
	        box-sizing:border-box;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	   -moz-tap-highlight-color: rgba(0,0,0,0);
		-ms-tap-highlight-color: rgba(0,0,0,0);
		 -o-tap-highlight-color: rgba(0,0,0,0);
	border-collapse:collapse;
                              
}
:focus {
	outline:none;
}
::-moz-focus-inner,::-moz-focus-outer {
	border:0;
}
:invalid, :-moz-ui-invalid, :required , :valid {
	border:0;
	outline:none;
	-webkit-box-shadow:none;
	   -moz-box-shadow:none;
	        box-shadow:none;
}
::-webkit-selection{
    color:#fff;
    background:#1ab2c7;
}
::-moz-selection{
    color:#fff;
    background:#1ab2c7;
}
::selection{
    color:#fff;
    background:#1ab2c7;
}
html{
	scroll-behavior: smooth;
	height:100%;
}
body{
	font-family:content;
	font-size:18px;
	letter-spacing:-0.3px;
	line-height:24px;
	color:#333;
}
input,textarea,select,option,button{
	font-family:inherit;
	font-size:inherit;
	color:inherit;
	border:none;
	background:none;
}
::-webkit-input-placeholder {
	color:inherit;
	opacity:0.5;
}
:-ms-input-placeholder{
	color:inherit;
	opacity:0.5;
}
::placeholder {
	color:inherit;
	opacity:0.5;
}
a{
	text-decoration:none;
	color:inherit;
}
mark{
	background:none;
	color:inherit;
}
img, figure{
	display:block;
}
img{
	color:transparent !important;
	text-shadow:none !important;
}
img.cover{
	width:100%;
	height:100%;
	object-fit:cover;
}
br + br,.clear{
	clear:both;
}
h1, h2, h3, h4, h5, h6{
	padding:0;
	margin:0;
	font-family:title;
	font-weight:normal;
	line-height:normal;
}
h1{
	font-size:3em;
}
h2{
	font-size:2em;
}
h3{
	font-size:1.6em;
}
h4{
	font-size:1.4em;
}
h5{
	font-size:1.2em;
}
h6{
	font-size:1em;
}
[align=center]{
	text-align:center !important;
}
[align=left]{
	text-align:left !important;
}
[align=right]{
	text-align:right !important;
}
[align=justify]{
	text-align:justify !important;
}
.ease, a, .header-box, .menu-box, .content-box{
	transition: all 500ms ease;
}
.easeFast{
	transition: all 250ms ease;
}
.easeNone{
	transition:none;
}


.javawebster-layout{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	min-width:100%;
	min-height:100%;
	padding:40px 40px 80px 40px;
	background:radial-gradient(#333, #111);
	overflow:hidden;
}
.javawebster{
	width:100%;
	max-width:1500px;
}
.javawebster:after{
	content:"";
	display:block;
	clear:both;
}
.layout{
	position:relative;
	float:left;
	width:100%;
	border-radius:10px;
	background:#fff;
	box-shadow:0 4px 20px rgba(0,0,0,0.3);
}
.layout.paddingBot{
	padding-bottom:120px;
}


.header, .header ul{
	float:left;
	width:100%;
	list-style:none;
}
.header:after{
	content:"";
	display:block;
	clear:both;
}
.header ul{
	padding:20px;
	margin-bottom:-20px;
}
.header ul li{
	float:left;
	padding:15px;
}
.header ul li.right{
	float:right;
}
.header ul li a{
	position:relative;
	float:left;
	display:block;
	color:#053b9d;
	padding:10px 0;
}
.header ul li a:before{
	content:"";
	position:absolute;
	bottom:-2px;
	left:0;
	right:0;
	height:2px;
	background:#053b9d;
	opacity:0;
	transition: all 250ms ease;
}
.header ul li a.active{
	font-weight:bold;
}
.header ul li a.active:before{
	opacity:1;
}
.header ul li a:hover:before{
	opacity:1;
}
.header ul li.block{
	padding:15px 15px 15px 10px;
}
.header ul li.border{
	padding:15px 10px 15px 15px;
}
.header ul li.block a{
	min-width:120px;
	text-align:center;
	padding:10px 20px;
	border-radius:10px;
	background:#1ab2c7;
	background-image:linear-gradient(90deg, rgba(0,0,0,0), #053b9d);
	color:#fff;
}
.header ul li.block a:hover{
	background:#053b9d;
	background-image:linear-gradient(90deg, rgba(0,0,0,0), #053b9d);
}
.header ul li.border a{
	min-width:120px;
	text-align:center;
	padding:10px 20px;
	border-radius:10px;
	border:1px solid #053b9d;
}
.header ul li.border a:hover{
	background:#053b9d;
	color:#fff;
}
.header ul li.user a{
	padding:0;
	font-size:1.4em;
	width:60px;
	height:60px;
	line-height:60px;
	text-align:center;
	border-radius:50%;
	border:1px solid #053b9d;
}
.header ul li.user a:before{
	display:none;
}
.header ul li.user a:hover{
	background:#053b9d;
	color:#fff;
}
.header ul li figure{
	float:left;
	height:55px;
	margin-right:40px;
	margin-top:-10px;
}
.header ul li figure img{
	display:block;
	max-width:100%;
	max-height:100%;
}
.header ul li.border a:before, .header ul li.block a:before, .header ul li.image a:before{
	display:none;
}


.footer{
	position:absolute;
	top:calc(100% - 90px);
	left:0;
	width:100%;
}
.footer h4{
	font-family:content;
	font-size:1.2em;
	color:#053b9d;
	margin-bottom:10px;
}
.footer ul{
	float:left;
	width:100%;
	list-style:none;
	background:#0958a5;
	background-image:linear-gradient(90deg, #0b58a6, #1ab2c7);
	border-radius:0 0 10px 10px;
	padding:10px;
}
.footer ul li{
	float:left;
	width:25%;
	color:#fff;
	padding:10px;
}
.footer ul li.split1{
	width:100%;
}
.footer ul li a{
	position:relative;
	font-size:0.9em;
	opacity:0.8;
	padding:0 0 0 60px;
	
	display:flex;
	justify-content:center;
	flex-direction:column;
	height:50px;
}
.footer ul li i{
	position:absolute;
	top:5px;
	left:0;
	font-size:1.2em;
	display:inline-block;
	width:45px;
	height:45px;
	line-height:45px;
	text-align:center;
	margin-bottom:10px;
	border-radius:50%;
	background:rgba(255,255,255,0.1);
	border:1px solid #fff;
}

.footer ol{
	padding:30px 0;
	float:left;
	width:100%;
	list-style:none;
	font-size:0.95em;
	color:#fff;
}
.footer ol li{
	float:left;
	margin-right:10px;
}
.footer ol li.right{
	float:right;
	margin-right:0;
	margin-left:10px;
}
.footer ol li a{
	opacity:0.8;
}
.footer ul li a:hover, .footer ol li a:hover{
	opacity:1;
}
.footer ol li a:hover{
	text-decoration:underline;
}



.slide-box{
	float:left;
	width:100%;
	max-height:560px;
	padding:0 40px;
	overflow:hidden;
}
.slide{
	position:relative;
	float:left;
	width:100%;
}
.slide section{
	position:relative;
	width:100%;
	height:100%;
	height:480px;
	padding:40px 480px 40px 40px;
}
.slide section h2{
	font-size:4em;
	line-height:1em;
	color:#053b9d;
}
.slide section h4{
	font-family:content;
	letter-spacing:2px;
	position:relative;
	font-size:1.8em;
	color:#053b9d;
	margin-bottom:80px;
}
.slide section h4:after{
	content:"";
	position:absolute;
	bottom:-40px;
	left:0;
	height:6px;
	width:80px;
	background-image:linear-gradient(90deg, #1ab2c7, #053b9d);
}
.slide section p{
	position:relative;
	color:#053b9d;
	line-height:30px;
	z-index:10;
}
.slide section figure{
	position:absolute;
	top:0;
	right:0;
	height:460px;
}
.slide section figure img{
	display:block;
	max-width:100%;
	max-height:100%;
}
.slide section a{
	font-size:1.4em;
	position:absolute;
	bottom:40px;
	left:40px;
	padding:20px 50px;
	border-radius:80px;
	background:#1ab2c7;
	background-image:linear-gradient(90deg, transparent, #053b9d);
	color:#fff;
}
.slide section a:hover{
	background:#053b9d;
	background-image:linear-gradient(90deg, transparent, #053b9d);
}


.error-layout{
	position:relative;
	display:block;
	width:100%;
	max-width:960px;
	overflow:hidden;
	padding:40px;
}
.error{
	float:left;
	width:100%;
	text-align:center;
	padding:60px 40px;
	background:#eee;
	box-shadow:0 2px 4px rgba(0,0,0,0.4), 0 2px 20px rgba(0,0,0,0.1);
	border-radius:5px;
}
.error h2{
	color:#053b9d;
	margin-bottom:20px;
}
.error h2 i{
	font-size:1.4em;
	display:block;
	width:120px;
	height:120px;
	line-height:120px;
	border-radius:50%;
	background:#0958a5;
	background-image:linear-gradient(315deg, #0b58a6, #1ab2c7);
	color:#fff;
	margin-bottom:20px;
}
.error p{
	color:#555;
}
.error a{
	display:inline-block;
	border-radius:80px;
	padding:15px 40px;
	border:1px solid #0958a5;
	color:#0958a5;
}
.error a:hover{
	background:#0958a5;
	color:#fff;
}


.login-layout{
	position:relative;
	display:block;
	width:calc(100% - 80px);
	max-width:960px;
	box-shadow:0 2px 4px rgba(0,0,0,0.4), 0 2px 20px rgba(0,0,0,0.1);
	border-radius:5px;
	overflow:hidden;
	margin:160px auto 40px auto;
}
.login-box{
	float:left;
	width:50%;
}
.login-box.split1{
	width:100%;
}
.login{
	display:block;
	width:100%;
}
.login.bg{
	padding:40px;
}
.login.bg:before{
	content:"";
	position:absolute;
	top:0;
	right:0;
	width:50%;
	height:100%;
	background:#0958a5;
	background-image:linear-gradient(315deg, #0b58a6, #1ab2c7);
}
.login h2{
	padding:40px 60px;
	font-size:1.4em;
	color:#053b9d;
}
.login.bg h2{
	padding:0;
	position:relative;
	color:#fff;
	z-index:5;
	text-align:center;
	margin-bottom:40px;
}
.login form{
	float:left;
	width:100%;
}
.login form label, .login form .button{
	float:left;
	width:100%;
	padding:10px 60px;
}
.login form.split2 label{
	width:50%;
}
.login form.split2 label.split1{
	width:100%;
}
.login form label p{
	color:#555;
	margin-bottom:5px;
}
.login form label input{
	font-family:content;
	display:block;
	width:100%;
	height:42px;
	padding:10px 0;
	color:#053b9d;
	border-bottom:1px solid #ccc;
}
.login form label textarea{
	font-family:content;
	display:block;
	width:90%;
	padding:10px 10px;
	color:#053b9d;
	border-bottom:1px solid #ccc;
}
.login form label.login-img input{
	border:none;
}
.login form label input:focus{
	border-bottom:1px solid #053b9d;
}
.login form label textarea:focus{
	border-bottom:1px solid #053b9d;
}
.login form .select{
	position:relative;
	float:left;
	width:50%;
	padding:10px 60px;
	color:#053b9d;
}
.login form .select p{
	color:#555;
}
.login form .select .select-box{
	position:relative;
	float:left;
	width:100%;
	height:47px;
	color:#053b9d;
	border-bottom:1px solid #ccc;
}
.login form .select select{
	display:block;
	color:#053b9d;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
.login ul, .login ul li{
	position:relative;
	display:block;
	list-style:none;
	color:#fff;
	z-index:5;
}
.login ul{
	counter-reset:no;
}
.login ul li{
	padding:5px 0 5px 30px;
	counter-increment:no;
}
.login ul li:before{
	content:counter(no)". ";
	position:absolute;
	top:5px;
	left:0;
}
.login .button{
	position:relative;
	text-align:right;
	z-index:5;
}
.login .button button, .login .button a{
	display:inline-block;
	line-height:normal;
	padding:14px 20px;
	min-width:160px;
	text-align:center;
	background:#1ab2c7;
	background-image:linear-gradient(90deg, transparent, #053b9d);
	color:#fff;
	border-radius:80px;
	margin:40px auto;
	cursor:pointer;
	transition: all 250ms ease;
}
.login .button button{
	margin-left:20px;
}
.login .button a.inline{
	min-width:auto;
	border-radius:0;
	padding:14px 10px;
	margin-right:30px;
	border-bottom:1px dotted #333;
	background:none !important;
}
.login .button button:hover, .login .button a:hover{
	background:#053b9d;
	background-image:linear-gradient(90deg, transparent, #053b9d);
}
.login .button a.inline:hover{
	color:red;
	border-bottom:1px dotted red;
}
.login .button a{
	background:#fff;
	color:#053b9d;
}
.login .button a:hover{
	background:#1ab2c7;
	color:#fff;
}
.login .button a.delete{
	background:tomato;
	color:#fff;
}
.login .button a.delete:hover{
	background:red;
}
.login .warning, .login .success{
	float:left;
	width:100%;
	margin-bottom:20px;
	padding:20px 60px;
	background:red;
	color:#fff;
	font-style:italic;
	text-align:center;
}
.login .success{
	background:dodgerBlue;
	border-radius:10px;
}


.profil-layout{
	position:relative;
	float:left;
	width:100%;
	padding:40px 80px;
}
.profil{
	position:relative;
	float:left;
	width:100%;
}
.profil-img{
	position:relative;
	float:left;
	width:100px;
	height:100px;
	border-radius:5%;
	background:#ccc;
	margin:10px 0;
	overflow:hidden;
}
.profil-img img{
	width:100%;
	height:100%;
	border-radius:5%;
	object-fit:cover;
	border:none;
}
.profil ul, .profil ul li{
	float:left;
	width:100%;
	list-style:none;
}
.profil h2{
	font-size:1.4em;
	margin-bottom:10px;
	color:#053b9d;
}
.profil ul li span{
	position:relative;
	float:left;
	width:calc(100% - 230px);
}
.profil ul li span:nth-of-type(1){
	width:230px;
}
.profil ul li span:nth-of-type(1):after{
	content:":";
	position:absolute;
	top:0;
	right:20px;
}
.profil-button{
	position:absolute;
	top:0;
	right:0;
	width:50%;
	height:100%;
}
.profil-button p{
	position:absolute;
	top:0;
	right:0;
}
.profil-button p a{
	display:block;
	padding:12px 30px;
	border-radius:10px;
	border:1px solid #053b9d;
	color:#053b9d;
	margin:10px auto;
	text-align:center;
}
.profil-button a:hover{
	background:#053b9d;
	color:#fff;
}
.profil-test, .profil-score, .profil-info{
	float:left;
	width:100%;
	padding:30px;
	border-radius:10px;
	border:1px solid #ccc;
	margin-top:40px;
}
.profil-test h2, .profil-score h2, .profil-info h2{
	font-family:content;
	font-size:1.2em;
	color:#053b9d;
}
.profil-test ul, .profil-test ul li, .profil-score ul, .profil-score ul li{
	position:relative;
	float:left;
	width:100%;
	list-style:none;
}
.profil-score ul{
	width:50%;
	padding:20px 20px 0 0;
}
.profil-score ul li:last-of-type{
	width:90%;
	border-top:1px solid #ccc;
	font-weight:bold;
	margin-top:20px;
	padding-top:10px;
}
.profil-score ul li:last-of-type span:nth-of-type(2){
	font-size:1.2em;
}
.profil-score ul li span{
	position:relative;
	float:left;
	width:calc(100% - 240px);
}
.profil-score ul li span:nth-of-type(1){
	width:240px;
}
.profil-score ul li span:nth-of-type(2){
	color:#053b9d;
}
.profil-score ul li span:nth-of-type(1):before{
	content:":";
	position:absolute;
	top:0;
	right:20px;
}
.profil-test ul{
	padding:100px 0 20px 0;
}
.profil-test ul:before, .profil-test ul:after{
	content:"";
	position:absolute;
	top:74px;
	left:0;
	right:0;
	width:calc(100% - 25%);
	height:2px;
	margin:auto;
	background:#ccc;
}
.profil-test ul:after{
	left:120px;
	right:auto;
	width:0%;
	margin:0;
	background:#053b9d;
}
.profil-test ul li{
	font-size:0.9em;
	width:calc(100% / 4);
	text-align:center;
	line-height:1em;
}
.profil-test ul li:before{
	content:"";
	position:absolute;
	top:-30px;
	left:0;
	right:0;
	width:10px;
	height:10px;
	margin:auto;
	background:#aaa;
	border-radius:50%;
	z-index:1;
}
.profil-test ul.p1:after{
	width:calc(((100% - 25%) / 3) / 2);
}
.profil-test ul.p2:after{
	width:calc((((100% - 25%) / 3) / 2) * 2);
}
.profil-test ul.p3:after{
	width:calc((((100% - 25%) / 3) / 2) * 3);
}
.profil-test ul.p4:after{
	width:calc((((100% - 25%) / 3) / 2) * 4);
}
.profil-test ul.p5:after{
	width:calc((((100% - 25%) / 3) / 2) * 5);
}
.profil-test ul.p6:after{
	width:calc((((100% - 25%) / 3) / 2) * 6);
}
.profil-test ul.p7:after{
	width:calc((((100% - 25%) / 3) / 2) * 7);
}
.profil-test ul.p8:after{
	width:calc((((100% - 25%) / 3) / 2) * 8);
}
.profil-test ul.p9:after{
	width:calc((((100% - 25%) / 3) / 2) * 9);
}
.profil-test ul.p10:after{
	width:calc((((100% - 25%) / 3) / 2) * 10);
}
.profil-test ul.p11:after{
	width:calc((((100% - 25%) / 3) / 2) * 11);
}
.profil-test ul.p12:after{
	width:calc((((100% - 25%) / 3) / 2) * 12);
}
.profil-test ul.p13:after{
	width:calc((((100% - 25%) / 3) / 2) * 13);
}
.profil-test ul.p14:after{
	width:calc((((100% - 25%) / 3) / 2) * 14);
}
.profil-test ul.p15:after{
	width:calc((((100% - 25%) / 3) / 2) * 15);
}
.profil-test ul.p16:after{
	width:calc((((100% - 25%) / 3) / 2) * 16);
}

ul.p0 li:nth-of-type(1):before, 
ul.p1 li:nth-of-type(1):before, 
ul.p2 li:nth-of-type(1):before, ul.p2 li:nth-of-type(2):before,
ul.p3 li:nth-of-type(1):before, ul.p3 li:nth-of-type(2):before,
ul.p4 li:nth-of-type(1):before, ul.p4 li:nth-of-type(2):before, ul.p4 li:nth-of-type(3):before,
ul.p5 li:nth-of-type(1):before, ul.p5 li:nth-of-type(2):before, ul.p5 li:nth-of-type(3):before,
ul.p6 li:nth-of-type(1):before, ul.p6 li:nth-of-type(2):before, ul.p6 li:nth-of-type(3):before, ul.p6 li:nth-of-type(4):before,
ul.p7 li:nth-of-type(1):before, ul.p7 li:nth-of-type(2):before, ul.p7 li:nth-of-type(3):before, ul.p7 li:nth-of-type(4):before,
ul.p8 li:nth-of-type(1):before, ul.p8 li:nth-of-type(2):before, ul.p8 li:nth-of-type(3):before, ul.p8 li:nth-of-type(4):before, ul.p8 li:nth-of-type(5):before, 
ul.p9 li:nth-of-type(1):before, ul.p9 li:nth-of-type(2):before, ul.p9 li:nth-of-type(3):before, ul.p9 li:nth-of-type(4):before, ul.p9 li:nth-of-type(5):before, 
ul.p10 li:nth-of-type(1):before, ul.p10 li:nth-of-type(2):before, ul.p10 li:nth-of-type(3):before, ul.p10 li:nth-of-type(4):before, ul.p10 li:nth-of-type(5):before, ul.p10 li:nth-of-type(6):before,
ul.p11 li:nth-of-type(1):before, ul.p11 li:nth-of-type(2):before, ul.p11 li:nth-of-type(3):before, ul.p11 li:nth-of-type(4):before, ul.p11 li:nth-of-type(5):before, ul.p11 li:nth-of-type(6):before,
ul.p12 li:nth-of-type(1):before, ul.p12 li:nth-of-type(2):before, ul.p12 li:nth-of-type(3):before, ul.p12 li:nth-of-type(4):before, ul.p12 li:nth-of-type(5):before, ul.p12 li:nth-of-type(6):before, ul.p12 li:nth-of-type(7):before,
ul.p13 li:nth-of-type(1):before, ul.p13 li:nth-of-type(2):before, ul.p13 li:nth-of-type(3):before, ul.p13 li:nth-of-type(4):before, ul.p13 li:nth-of-type(5):before, ul.p13 li:nth-of-type(6):before, ul.p13 li:nth-of-type(7):before,
ul.p14 li:nth-of-type(1):before, ul.p14 li:nth-of-type(2):before, ul.p14 li:nth-of-type(3):before, ul.p14 li:nth-of-type(4):before, ul.p14 li:nth-of-type(5):before, ul.p14 li:nth-of-type(6):before, ul.p14 li:nth-of-type(7):before, ul.p14 li:nth-of-type(8):before,
ul.p15 li:nth-of-type(1):before, ul.p15 li:nth-of-type(2):before, ul.p15 li:nth-of-type(3):before, ul.p15 li:nth-of-type(4):before, ul.p15 li:nth-of-type(5):before, ul.p15 li:nth-of-type(6):before, ul.p15 li:nth-of-type(7):before, ul.p15 li:nth-of-type(8):before,
ul.p16 li:nth-of-type(1):before, ul.p16 li:nth-of-type(2):before, ul.p16 li:nth-of-type(3):before, ul.p16 li:nth-of-type(4):before, ul.p16 li:nth-of-type(5):before, ul.p16 li:nth-of-type(6):before, ul.p16 li:nth-of-type(7):before, ul.p16 li:nth-of-type(8):before, ul.p16 li:nth-of-type(9):before
{
	background:#053b9d;
}
.profil-test-button{
	float:left;
	width:100%;
	padding:40px 0 20px 0;
	text-align:center;
}
.profil-test-button p{
	display:inline-block;
	font-size:1.2em;
	padding:15px 40px;
	border-radius:80px;
	border:1px solid #053b9d;
	color:#053b9d;
	background:#EAEAEA;
}
.profil-test-button a{
	display:inline-block;
	font-size:1.2em;
	padding:15px 40px;
	border-radius:80px;
	background:#1ab2c7;
	background-image:linear-gradient(90deg, transparent, #053b9d);
	color:#fff;
}
.profil-test-button a:hover{
	background:#053b9d;
	background-image:linear-gradient(90deg, transparent, #053b9d);
}
.profil-info ul, .profil-info ol, .profil-info li{
	position:relative;
}
.profil-info ul, .profil-info ol{
	left:20px;
}
.profil-info li{
	padding:2px 20px;
}
.profil-info a{
	color:#053b9d;
	border-bottom:1px dotted currentcolor;
}



.soal{
	position:relative;
	float:left;
	width:100%;
	padding:160px 80px 140px 80px;
	min-height:720px;
	overflow:hidden;
	z-index:3;
}

.soal-loading{
	position:relative;
	float:left;
	width:100%;
	padding-top:120px;
	text-align:center;
}
.soal-loading img{
	display:block;
	width:300px;
	margin-bottom:120px;
}
.soal-loading h2{
	display:none;
	font-family:content;
	font-size:1.2em;
}
.soal-loading h2.active{
	display:block;
}
.soal-loading h2 .icon{
	display:block;
	width:60px;
	height:60px;
	line-height:60px;
	text-align:center;
	border-radius:50%;
	border:1px solid #555;
	margin:20px auto;
}
.soal-loading .loading-box{
	display:none;
}
.soal-loading .loading-box.active{
	display:block;
}
.soal-loading p{
	font-size:1.4em;
	margin-bottom:10px;
}
.soal-loading .loading{
	display:block;
	width:360px;
	height:5px;
	border-radius:10px;
	border:1px solid #0b58a6;
}
.soal-loading .loading span{
	display:block;
	margin:0;
	width:0%;
	height:5px;
	border-radius:10px;
	background:linear-gradient(315deg, #0b58a6, #1ab2c7);
}
.soal-loading a{
	display:none;
	font-size:1.4em;
	width:240px;
	padding:20px 40px;
	background:linear-gradient(315deg, #0b58a6, #1ab2c7);
	color:#fff;
	border-radius:10px;
	transition:none;
}
.soal-loading a:hover{
	background:#0b58a6;
}
.soal-loading a.active{
	display:block;
}

.imgBg2{
	float:left;
	height:50px;
}
.imgBg2 img{
	height:100%;
}
.imgBg3{
	position:absolute;
	bottom:-100px;
	left:-40px;
	height:50px;
}
.imgBg3 img{
	height:100%;
}
.soal-blank{
	position:relative;
	float:left;
	width:100%;
	text-align:center;
	z-index:2;
}
.soal-blank h2{
	font-size:3em;
	color:#0b58a6;
}
.soal-blank h2 span{
	display:block;
	font-family:content;
	font-size:0.8em;
}
.soal-blank h4{
	padding-top:40px;
	font-size:1.8em;
	color:#555;
}
.soal-blank h4 span{
	display:block;
	margin-top:10px;
	font-family:content;
	font-size:0.8em;
	color:#777;
}
.soal-blank i{
	font-size:2em;
	display:block;
	margin:80px auto;
	width:90px;
	height:90px;
	line-height:90px;
	color:#555;
	border:1px solid #555;
	border-radius:50%;
}
.soal-blank img.icons{
	display:block;
	margin:80px auto;
	width:90px;
	height:90px;
	line-height:90px;
	border:4px solid #000;
	border-radius:50%;
	padding:10px;
	opacity:0.7;
}
.soal-blank p{
	margin:80px auto;
	max-width:640px;
}
.soal-blank a{
	display:block;
	font-size:1.4em;
	width:240px;
	padding:20px 40px;
	background:linear-gradient(315deg, #0b58a6, #1ab2c7);
	color:#fff;
	border-radius:10px;
	transition:none;
}
.soal-blank a:hover{
	background:#0b58a6;
}
.soal-blank a.edit{
	font-size:1em;
	width:280px;
	border:1px solid dodgerBlue;
	background:#fff;
	color:dodgerBlue;
	margin-top:20px;
}
.soal-blank a.edit:hover{
	background:dodgerBlue;
	color:#fff;
}

.soal-header{
	position:absolute;
	top:0;
	left:0;
	right:0;
	padding:40px;
}
.soal-header h2{
	position:relative;
	font-size:2em;
	color:#053b9d;
}
.soal-header h2:after{
	content:"";
	position:absolute;
	bottom:-40px;
	left:0;
	height:6px;
	width:120px;
	background-image:linear-gradient(90deg, #1ab2c7, #053b9d);
}
.soal-header h2 span{
	font-family:content;
	font-size:0.5em;
	font-style:italic;
	color:#1ab2c7;
}
.soal-timer{
	position:absolute;
	top:30px;
	right:40px;
	width:70px;
	width:140px;
	height:70px;
	line-height:70px;
	text-align:center;
	letter-spacing:-0.05em;
	font-size:1.8em;
	border-radius:50%;
	border-radius:20px;
	
	background:#EAEAEA;
	
	background-image: linear-gradient(top, #f6f6f6, #eaeaea);
	box-shadow:0 1px 1px rgba(0, 0, 0, 0.25), 0 2px 3px rgba(0, 0, 0, 0.1);
	z-index:1;
	
	color:#333;
	text-shadow:0px 1px 2px #333;
}
.soal-timer.square{
	position:absolute;
	top:30px;
	right:40px;
	width:140px;
	height:70px;
	line-height:70px;
	text-align:center;
	font-size:2em;
	border-radius:20px;
}
.soal-timer:before{
	content:"";
	position:absolute;
	top:-8px;
	bottom:-8px;
	left:-8px;
	right:-8px;
	border-radius:50%;
	z-index:-1;
	background:#EAEAEA;
	opacity:0.5;
}

.soal-footer{
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	padding:40px;
	text-align:center;
	border-top:1px solid #ccc;
}
.soal-footer .edit{
	position:absolute;
	top:20px;
	left:20px;
	padding:10px 20px;
	border-radius:10px;
	background:#fff;
	border:1px solid dodgerBlue;
	color:dodgerBlue;
}
.soal-footer .edit:hover{
	background:dodgerBlue;
	color:#fff;
	border-radius:10px;
}
.soal-footer p{
	float:left;
	padding:40px 0 0 0;
	color:#555;
}
.soal-button{
	float:right;
	font-size:1.4em;
	min-width:240px;
	padding:20px;
	border-radius:10px;
	background:#1ab2c7;
	background-image:linear-gradient(90deg, transparent, #053b9d);
	color:#fff;
	cursor:pointer;
	transition: all 250ms ease;
	margin-left:40px;
	text-align:center;
}
.soal-button:hover{
	background:#053b9d;
	background-image:linear-gradient(90deg, transparent, #053b9d);
}
.soal-button i{
	font-size:0.85em;
}

.soal-card{
	display:block;
	width:720px;
	max-width:100%;
	text-align:center;
	padding:40px;
	border-radius:10px;
	background:#EAEAEA;
	color:#333;
	box-shadow:0 2px 4px rgba(0,0,0,0.4), 0 2px 20px rgba(0,0,0,0.1);
	margin-bottom:40px;
}
.soal-card.red{
	background-image:linear-gradient(315deg, #464cf9, #fb5ef1);
}
.soal-card.blue{
	background-image:linear-gradient(315deg, #5f8ffd, #4df2cd);
}
.soal-card video{
	max-width:100%;
	max-height:100%;
	margin-bottom:20px;
}
.soal-card h2{
	font-size:1.6em;
	opacity:0.9;
	padding:10px 0;
	text-transform:uppercase;
}
.soal-card p.borderBox{
	background:#fff;
	padding:20px;
	border-radius:10px;
	border:1px solid #ccc;
}
.soal-card h2 span{
	font-family:content;
	font-size:0.8em;
	display:block;
	opacity:0.7;
	margin:10px auto;
}
.soal-card i{
	font-size:2em;
	opacity:0.8;
	width:90px;
	height:90px;
	line-height:90px;
	text-align:center;
	margin:20px 0;
	border-radius:50%;
	border:1px solid #333;
}
.soal-card img{
	display:block;
	margin:20px auto;
	width:90px;
	height:90px;
	line-height:90px;
	border:4px solid #000;
	border-radius:50%;
	padding:10px;
	opacity:0.7;
}
.soal-card .card p{
	font-size:1em;
	padding:10px 0;
	opacity:0.8;
	margin-bottom:40px;
}
.soal-card .card a{
	display:inline-block;
	margin-bottom:20px;
	padding:15px 40px;
	border-radius:10px;
	background:#ffcc5b;
	color:#053b9d;
}
.soal-card .card a:hover{
	background:#053b9d;
	color:#ffcc5b;
}
.soal-map, .soal-map ul{
	float:left;
	width:100%;
	list-style:none;
}
.soal-map{
	margin:40px 0 20px 0;
}
.soal-map ul li{
	display:inline-block;
	font-size:0;
}
.soal-map ul li a{
	font-size:18px;
	display:block;
	width:40px;
	height:40px;
	line-height:40px;
	text-align:center;
	background:#ccc;
	margin:2px;
	border-radius:5px;
}
.soal-map ul li a.active, .soal-map ul li a:hover{
	background:#053b9d;
	color:#fff;
}

.pertanyaan{
	position:relative;
	float:left;
	width:100%;
	font-size:1.1em;
	padding:20px 0;
	min-height:300px;
}
.pertanyaan h4{
	float:left;
	width:100%;
	position:relative;
	font-family:content;
	font-size:1em;
	padding-left:40px;
	margin-bottom:20px;
}
.pertanyaan h4.center{
	font-size:1.2em;
	color:#333;
	text-align:center;
	padding-left:0;
	margin:20px auto;
}
.pertanyaan h4 strong{
	color:#053b9d;
}
.pertanyaan h4 span.no{
	position:absolute;
	top:0;
	left:0;
}
.pertanyaan h4 span.fa{
	font-size:1.2em;
	margin-top:-30px;
	width:60px;
	height:60px;
	line-height:60px;
	text-align:center;
	border:1px solid #555;
	color:#555;
	border-radius:50%;
	margin-right:20px;
}
.pertanyaan h4 img{
	display:block;
	width:60px;
	height:60px;
	line-height:60px;
	border:2px solid #000;
	border-radius:50%;
	padding:10px;
	opacity:0.7;
	margin:0;
}
.pertanyaan h4.tall{
	line-height:80px;
}
.pertanyaan h4.tall span[data-no]{
	line-height:normal;
	position:relative;
	display:inline-block;
	cursor:pointer;
	border-bottom:3px solid #333;
}
.pertanyaan h4.tall span[data-no]:before{
	font-size:1.2em;
	content:attr(data-no);
	text-transform:uppercase;
	position:absolute;
	bottom:-35px;
	left:50%;
	transform:translateX(-50%);
	text-align:center;
}
.pertanyaan h4.tall span[data-no]:after{
	font-family:fontawesome;
	content:"\f1db";
	position:absolute;
	bottom:-45px;
	left:50%;
	transform:translateX(-50%);
	text-align:center;
	font-size:2.4em;
	color:#1ab2c7;
	display:none;
}
.pertanyaan h4.tall span[data-no].active{
	border-bottom:3px solid #1ab2c7;
	color:#1ab2c7;
}
.pertanyaan h4.tall span[data-no].active:after{
	display:block;
}
.pertanyaan pre{
	position:relative;
	left:-40px;
	float:left;
	width:calc(100% + 80px);
	padding:28px 20px 40px 120px;
	background:#eee;
	font-size:0.9em;
	border-radius:5px;
	line-height:24px;
	background:repeating-linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1) 1px, rgba(0,0,0,0.05) 1px, rgba(0,0,0,0.05) 24px);
	border:1px solid rgba(0,0,0,0.2);
	margin-top:-10px;
	margin-bottom:30px;
}
.pertanyaan pre p{
	position:relative;
}
.pertanyaan pre strong{
	display:block;
	margin-bottom:24px;
}
.pertanyaan pre p[data-no="5"]:before, .pertanyaan pre p[data-no="10"]:before, .pertanyaan pre p[data-no="15"]:before, .pertanyaan pre p[data-no="20"]:before, .pertanyaan pre p[data-no="25"]:before, .pertanyaan pre p[data-no="30"]:before, .pertanyaan pre p[data-no="35"]:before, .pertanyaan pre p[data-no="40"]:before, .pertanyaan pre p[data-no="45"]:before, .pertanyaan pre p[data-no="50"]:before{
	position:absolute;
	top:2px;
	left:-100px;
	content:"Line " attr(data-no);
	color:#053b9d;
	letter-spacing:-1px;
}
.pertanyaan ul, .pertanyaan ul li{
	list-style:none;
	float:left;
	width:100%;
}
.pertanyaan ul{
	margin-bottom:40px;
}
.pertanyaan ul li a{
	position:relative;
	display:inline-block;
	min-width:180px;
	padding:5px 5px 5px 80px;
	margin:4px auto;
	text-shadow:0px 0 2px #fff;
}
.pertanyaan ul li a:before{
	font-family:fontawesome;
	content:"\f1db";
	position:absolute;
	top:5px;
	left:28px;
	font-size:2.4em;
	color:#1ab2c7;
	display:none;
}
.pertanyaan ul li a span{
	position:absolute;
	top:5px;
	left:40px;
}
.pertanyaan ul li a:hover, .pertanyaan ul li a.active{
	color:#1ab2c7;
}
.pertanyaan ul li a.active:before{
	display:block;
}
.pertanyaan .pertanyaan-detail{
	float:left;
	width:100%;
	padding:0 0 40px 40px;
	font-style:italic;
	color:#555;
	font-size:0.9em;
}
.pertanyaan .pertanyaan-detail.center{
	text-align:center;
	padding:40px 0;
	color:#555;
}
.pertanyaan .pertanyaan-title{
	float:left;
	width:100%;
	padding:120px 0 0 0;
	font-size:1.4em;
	text-align:center;
}

.pertanyaan-icon{
	float:left;
	width:100%;
	text-align:center;
	padding:20px;
}
.pertanyaan-icon span{
	font-size:2em;
	text-shadow:0px 1px 1px #fff;
	display:inline-block;
	width:120px;
	height:120px;
	line-height:120px;
	background:#EAEAEA;
	border:1px solid #ccc;
	border-radius:10px;
}

.help{
	float:left;
	width:100%;
	padding:40px 160px 140px 160px;
}
.help ul, .help ul li{
	position:relative;
	float:left;
	width:100%;
	list-style:none;
}
.help ul{
	border-radius:5px;
	box-shadow:0 2px 4px rgba(0,0,0,0.4), 0 2px 20px rgba(0,0,0,0.1);
}
.help ul li h2{
	font-family:content;
	font-size:1.1em;
	padding:20px;
	border-bottom:1px solid #ccc;
	cursor:pointer;
}
.help ul li:last-of-type h2{
	border-bottom:none;
}
.help ul li:nth-child(odd) h2{
	background:#eee;
}
.table tr:nth-child(even) {
	background:#eee;
}
.help ul li h2:hover, .help ul li h2.active{
	color:#1ab2c7;
}
.help ul li h2.active{
	background:#0958a5 !important;
	background-image:linear-gradient(315deg, #0b58a6, #1ab2c7) !important;
	color:#fff !important;
	border-bottom:1px solid #fff !important;
}
.help ul li p{
	display:none;
	padding:10px 20px 20px 20px;
	background:#0958a5;
	background-image:linear-gradient(315deg, #0b58a6, #1ab2c7);
	color:#fff;
}

.table-scroll{
	position:relative;
	width:100%;
	padding:10px 5px;
	overflow-x:auto;
	box-sizing:border-box;
	display:block;
	/* Tambahan agar scroll selalu muncul jika overflow */
	max-width:100vw;
}
.table{
	position:relative;
	width:100%;
	max-width:100%;
	overflow-x:auto;
	display:block;
	float:none;
}
.table table, .table th, .table td{
	border:1px solid #ccc;
	border-collapse:collapse;
}
.table table{
	width:100%;
	min-width:1200px; /* agar scroll horizontal aktif jika kolom banyak */
	box-shadow:0 2px 4px rgba(0,0,0,0.4), 0 2px 20px rgba(0,0,0,0.1);
	table-layout:auto;
	display:table;
	overflow-x:auto;
	max-width:none;
}
.table th{
	font-weight:normal;
	position:relative;
	text-align:left;
	padding:10px 8px;
	white-space:nowrap;
}
.table th i{
	font-size:0.65em;
	position:absolute;
	top:22px;
	right:20px;
}
.table td{
	font-size:0.9em;
	padding:10px 8px;
	white-space:nowrap;
	max-width:180px;
	overflow:hidden;
	text-overflow:ellipsis;
}
.table td:nth-of-type(4), .table td:nth-of-type(5), .table td:nth-of-type(6){
	text-align:center;
}
.table td:nth-of-type(3), .table td:nth-of-type(4), .table td:nth-of-type(5){
	min-width:130px;
}
.table tr:first-of-type{
	background:#0958a5;
	background-image:linear-gradient(315deg, #0b58a6, #1ab2c7);
	color:#fff;
	cursor:pointer;
}
.table tr:nth-child(even){
	background:#eee;
}
.table tr:not(:first-of-type){
	display:none;
}
.table td a{
	display:block;
	text-align:center;
	width:80px;
	border-radius:5px;
	background:orange;
	color:#333;
}
.table td a:hover{
	background:gold;
	color:#333;
}
.table td span{
	display:none;
}
.table-setting{
	float:left;
	width:100%;
	padding:20px 0;
}
.table-option{
	float:left;
	width:50%;
}
.table-option.w90{
	width:85%;
}
.table-option.w60{
	width:60%;
}
.table-option.w40{
	width:40%;
}
.table-option.w10{
	width:15%;
}
.table-setting .show{
	position:relative;
	float:left;
	border:1px solid #ccc;
	border-radius:10px;
	margin-left:10px;
}
.table-setting .show:hover{
	background:#ccc;
	color:#333;
	border:1px solid #1ab2c7;
}
.table-setting .show span{
	float:left;
	width:60px;
	padding:10px;
}
.table-setting .show section{
	position:relative;
	float:left;
	width:70px;
}
.table-setting .show section i{
	position:absolute;
	top:15px;
	right:10px;
	font-size:0.8em;
	opacity:0.7;
}
.table-setting .show section p{
	padding:10px;
}
.table-setting .show select{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	opacity:0;
	z-index:5;
	cursor:pointer;
}
.table-setting .search{
	position:relative;
	float:left;
	border:1px solid #ccc;
	border-radius:10px;
	padding:0 20px 0 0;
	cursor:pointer;
}
.table-setting .search:hover{
	background:#ccc;
	color:#333;
	border:1px solid #1ab2c7;
}
.table-setting .search input{
	padding:10px;
	display:block;
}
.table-setting .search i{
	position:absolute;
	top:12px;
	right:15px;
	opacity:0.7;
}
.table-setting .nav{
	position:relative;
	float:right;
	border:1px solid #ccc;
	border-radius:10px;
	text-align:center;
	overflow:hidden;
}
.table-setting .nav a{
	float:right;
	padding:10px 20px;
}
.table-setting .nav a:hover{
	background:#ccc;
	color:#333;
}
.table-info{
	float:left;
	width:50%;
	padding:10px 0;
	color:#555;
}
.table-info span{
	color:#053b9d;
}
.table-add{
	float:left;
	width:220px;
	position:relative;
	float:left;
}
.table-add a{
	display:block;
	text-align:center;
	padding:10px;
	border-radius:10px;
	margin-right:20px;
	background:limeGreen;
	color:#fff;
}
.table-add a:hover{
	background:green;
	color:#fff;
}

.soal-edit-layout{
	float:left;
	width:100%;
	padding:40px;
}
.soal-edit{
	position:relative;
	float:left;
	width:100%;
	border-radius:10px;
	overflow:hidden;
	border:1px solid #ccc;
}
.soal-edit ul{
	font-size:0.95em;
	float:left;
	width:240px;
	list-style:none;
	border-right:1px solid #ccc;
	background:#EAEAEA;
	padding:10px;
	transition: all 500ms ease;
}
.soal-edit ul li{
	float:left;
	width:100%;
}
.soal-edit ul li a{
	float:left;
	width:100%;
	padding:5px 10px;
	border-radius:5px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.soal-edit ul li a:hover{
	background:#1ab2c7;
}
.soal-edit ul li a.active{
	background:#053b9d;
	color:#fff;
}
.soal-edit ul li a span{
	float:left;
	width:50px;
}
.soal-isi{
	position:relative;
	float:left;
	width:calc(100% - 240px);
	padding:40px;
}
.soal-isi h2{
	position:relative;
	font-size:1.6em;
	color:#053b9d;
	margin-bottom:60px;
}
.soal-isi h2:after{
	content:"";
	position:absolute;
	bottom:-30px;
	left:0;
	height:4px;
	width:120px;
	background-image:linear-gradient(90deg, #1ab2c7, #053b9d);
}
.soal-isi h2 span{
	font-family:content;
	font-size:0.6em;
	font-style:italic;
	color:#1ab2c7;
}
.soal-isi .login{
	float:left;
	width:100%;
}
.soal-isi .login label{
	padding:20px;
}
.soal-isi .login label.split2{
	width:50%;
	padding-right: 10px;
}
.soal-isi .login label.split3{
	width:calc(100% / 3);
}
.soal-isi .login label .textarea{
	float:left;
	width:100%;
	background:#EAEAEA;
	border-radius:10px;
	padding:30px;
	background:repeating-linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.15) 1px, rgba(0,0,0,0.05) 1px, rgba(0,0,0,0.05) 30px);
	border:1px solid rgba(0,0,0,0.2);
	overflow:auto;
}
.soal-isi .login label textarea{
	float:left;
	width:100%;
	min-width:800px;
	font-size:1em;
	letter-spacing:-1px;
	line-height:30px;
	overflow:hidden;
	resize:none;
}
.soal-isi .login label pre{
	float:left;
	width:100%;
	font-size:0.9em;
	letter-spacing:-1.5px;
	line-height:30px;
	background:#EAEAEA;
	padding:10px;
	border-radius:10px;
	background:repeating-linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.15) 1px, rgba(0,0,0,0.05) 1px, rgba(0,0,0,0.05) 30px);
	border:1px solid rgba(0,0,0,0.2);
}
.soal-isi .login .button{
	padding:20px;
}
.soal-isi .button .a-left{
	float:left;
	width:auto;
	min-width:auto;
	background:none !important;
	border-radius:none;
	color:#555;
	padding:14px 0;
	margin-right:20px;
}
.soal-isi .button .a-left:hover{
	color:#1ab2c7;
}
.soal-preview{
	position:absolute;
	top:20px;
	right:20px;
	padding:10px 20px;
	border-radius:10px;
	background:limeGreen;
	color:#333;
	z-index:200;
}
.soal-preview:hover{
	background:green;
	color:#fff;
}
.icon-menu-side{
	display:none;
	position:absolute;
	top:20px;
	left:20px;
	width:50px;
	height:50px;
	line-height:50px;
	text-align:center;
	border-radius:50%;
	background:#0958a5;
	background-image:linear-gradient(315deg, #0b58a6, #1ab2c7);
	color:#fff;
	z-index:100;
}
.icon-menu-side.active{
	left:260px;
}
.icon-menu-side span{
	position:absolute;
	top:0;
	left:100%;
	color:#555;
	white-space:nowrap;
	margin-left:20px;
}

.tabel{
	float:left;
	width:100%;
	background:#fff;
	font-size:0.8em;
}
.tabel ul, .tabel ul li{
	float:left;
	list-style:none;
}
.tabel ul{
	width:100%;
	padding:5px;
}
.tabel ul li{
	width:100%;
}
.tabel ul li span{
	float:left;
	width:calc(100% / 15);
	padding:5px 10px;
	border:1px solid #ccc;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}











@media screen and (max-width:900px){
	.table-scroll {
		padding: 5px 0;
	}
	.table table {
		min-width: 700px;
	}
	.table th, .table td {
		padding: 8px 4px;
		font-size: 0.85em;
	}
}

@media screen and (max-width:600px){
	.table-scroll {
		padding: 2px 0;
	}
	.table table {
		min-width: 500px;
	}
	.table th, .table td {
		padding: 6px 2px;
		font-size: 0.8em;
	}
}