html, Body, div, span, applet, object, iframe, caption, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, dl, dt, dd, ol, ul, li, fieldset, form, label, legend {vertical-align:baseline;font-size:100%;outline:0;padding:0;margin:0;border:0;line-height:1.6;}

/*  ATTRIBUTE */
h1 {font-size:20px;font-weight:400;}
h2 {font-size:18px;font-weight:400;}
a {color:#D71D2A;text-decoration:none;}
ol {list-style:decimal;padding-left:20px;}
.clearfix:after {clear:both;content:".";display:block;height:0;visibility:hidden;}
@media screen and (max-width:990px)
{
	h1 {font-size:20px;font-weight:400;}
	h2 {font-size:18px;font-weight:400;}
	a {color:#D71D2A;text-decoration:none;}
	ol {list-style:decimal;padding-left:20px;}
	.clearfix:after {clear:both;content:".";display:block;height:0;visibility:hidden;}
}

/* BACKGROUND */
#bg {font-weight:400;font-size:15px;font-family:'Roboto', sans-serif;line-height:1.6;color:#444;margin:0 auto;padding:0;}
@media screen and (max-width:990px)
{
	#bg {font-weight:400;font-size:15px;font-family:'Roboto', sans-serif;line-height:1.6;color:#444;margin:0 auto;padding:0;}
}
/* ================================================== */


/* TOP */
#bgtop{width:100%;margin:0 auto;padding:20px 0;border-bottom:1px solid #ddd;text-align:center;background:#f2f2f2;}
#botop{max-width:90%;margin:0 auto;padding:0;}
.topimg{width:100%;margin:0 auto;padding:0;height:auto;overflow:hidden;}
.topimg img{width:5%;height:auto;vertical-align:middle;}
.toptit {font-size:16px;font-weight:700;}

.toprite{width:50%;margin:10px auto;padding:0;float:right;text-align:right;}
.toprite span{font-size:18px;font-weight:700;}
#toptimer{margin:0 auto;padding:0;}
#toptimerbox{margin:0 auto;padding:0;float:right;font-size:18px;font-weight:700;}
.boxjam{margin:0 auto;padding:0;float:left;}
.boxjam h1{font-size:18px; font-family:arial;font-weight:700;}
@media screen and (max-width:990px)
{
	#bgtop{width:100%;background:#f2f2f2;margin:0 auto;padding:10px 0 5px;border-bottom:1px solid #ddd;}
	#botop{width:100%;margin:0 auto;padding:0;text-align:center;}
	#top{margin:0 auto;padding:0}
	.topleft{width:100%;margin:0 auto;padding:0;}
	.topimg{width:100%;margin:0 auto;padding:0;height:auto;overflow:hidden;}
	.topimg img{width:15%;height:auto;vertical-align:middle;}
	.topimg span{font-size:13px;font-weight:700;float:left;}
	.toprite{width:100%;margin:0 auto;padding:0;float:right;text-align:center;}
	.toprite span{font-size:13px;font-weight:700;}
	#toptimer{margin:0 auto;padding:0;}
	#toptimerbox{margin:0 auto;padding:0;float:none;font-size:18px;font-weight:700;}
	.boxjam{margin:0 auto;padding:0;float:none;}
	.boxjam h1{font-size:13px; font-family:arial;font-weight:700;}	
}
/* ================================================== */


/* LOGIN */
#bglogin{width:100%;margin:0 auto;padding:50px 0;background:#f9f9f9;}
#bologin{width:90%;margin:0 auto;padding:0;}
#login{width:30%;margin:0 auto;padding:20px;background:#fff;box-shadow:0 0 20px 1px rgb(0,0,0,0.2);}
#bgboxform{width:100%;margin:0 auto;padding:0;}
#boboxform{width:100%;margin:0 auto;padding:0;}
#boxformhead{margin:0 auto 20px;padding:0;}
.boxformtit{margin:0 auto 5px;padding:0 0 5px;font-weight:700;font-size:20px;font-family:'Roboto', sans-serif;border-bottom:2px solid #ddd;  line-height:1.6;}
.boxformdesc{margin:0 auto;padding:0;font-weight:400;font-size:16px;font-family:'Roboto', sans-serif;line-height:1.6; color:#666;}
#boxformbody{margin:0 auto;padding:0;}
#boxformrow{margin:10px auto;padding:0;}
#boxforminput{width:100%;float:left;padding:0;text-align:left;color:#000;background:#fff;}
#boxforminput input{width:100%;margin:0 auto;padding:2%;font-weight:400;font-size:18px;font-family:'Roboto', sans-serif;border:none;border:1px solid #ccc;text-align:left;color:#666;background:#fff;box-shadow:0 1px 1px rgb(0,0,0,0.2) inset;transition:border 0.2s linear 0s, box-shadow 0.2s linear 0s;border-radius:2px;box-sizing:border-box;}
.autobutton{background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #1C304B), color-stop(1, #1C304B));background:-moz-linear-gradient(top, #1C304B 5%, #1C304B 100%);background:-webkit-linear-gradient(top, #1C304B 5%, #1C304B 100%);background:o-linear-gradient(top, #1C304B 5%, #1C304B 100%);background:-ms-linear-gradient(top, #1C304B 5%, #1C304B 100%);background:linear-gradient(to bottom, #1C304B 5%, #1C304B 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1C304B', endColorstr='#1C304B',GradientType=0);background-color:#1C304B;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;border:0px solid #dcdcdc;display:inline-block;cursor:pointer;color:#fff;font-size:15px;font-family:'Roboto', sans-serif;padding:10px 30px;text-decoration:none;width:100%;box-sizing:border-box;}
#boxformfot{margin:0 auto;padding:0;font-weight:400;font-size:18px;font-family:'Roboto', sans-serif;line-height:1.6;}
.boxformfotrite{width:50%;float:left;margin:0 auto;padding:0;text-align:right;}
.boxformforleft{width:50%;margin:0 auto;padding:0;float:left;}
@media screen and (max-width:990px)
{
	#bglogin{width:100%;margin:0 auto;padding:50px 0;background:#f9f9f9;}
	#bologin{width:100%;margin:0 auto;padding:0;}
	#login{width:70%;margin:0 auto;padding:20px;background:#fff;box-shadow:0 0 20px 1px rgb(0,0,0,0.2);}
	#bgboxform{width:100%;margin:0 auto;padding:0;}
	#boboxform{width:100%;margin:0 auto;padding:0;}
	#boxformhead{margin:0 auto 20px;padding:0;}
	.boxformtit{margin:0 auto 5px;padding:0 0 5px;font-weight:700;font-size:17px;font-family:'Roboto', sans-serif;border-bottom:2px solid #ddd;  line-height:1.6;}
	.boxformdesc{margin:0 auto;padding:0;font-weight:400;font-size:14px;font-family:'Roboto', sans-serif;line-height:1.6; color:#666;}
	#boxformbody{margin:0 auto;padding:0;}
	#boxformrow{margin:10px auto;padding:0;}
	#boxforminput{width:100%;float:left;padding:0;text-align:left;color:#000;background:#fff;}
	#boxforminput input{width:100%;margin:0 auto;padding:2%;font-weight:400;font-size:14px;font-family:'Roboto', sans-serif;border:none;border:1px solid #ccc;text-align:left;color:#666;background:#fff;box-shadow:0 1px 1px rgb(0,0,0,0.2) inset;transition:border 0.2s linear 0s, box-shadow 0.2s linear 0s;border-radius:2px;box-sizing:border-box;}
	.autobutton{background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #1C304B), color-stop(1, #1C304B));background:-moz-linear-gradient(top, #1C304B 5%, #1C304B 100%);background:-webkit-linear-gradient(top, #1C304B 5%, #1C304B 100%);background:o-linear-gradient(top, #1C304B 5%, #1C304B 100%);background:-ms-linear-gradient(top, #1C304B 5%, #1C304B 100%);background:linear-gradient(to bottom, #1C304B 5%, #1C304B 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1C304B', endColorstr='#1C304B',GradientType=0);background-color:#1C304B;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;border:0px solid #dcdcdc;display:inline-block;cursor:pointer;color:#fff;font-size:14px;font-family:'Roboto', sans-serif;padding:10px 30px;text-decoration:none;width:100%;box-sizing:border-box;}
	#boxformfot{margin:0 auto;padding:0;font-weight:400;font-size:14px;font-family:'Roboto', sans-serif;line-height:1.6;}
	.boxformfotrite{width:50%;float:left;margin:0 auto;padding:0;text-align:right;font-size:12px;}
	.boxformforleft{width:50%;margin:0 auto;padding:0;float:left;text-align:left;font-size:15px;}

}
/* ================================================== */


/* BOTTOM */
#bgbottom{width:100%;margin:0 auto;padding:0;background:#1C304B;}
#bobottom{width:90%;margin:0 auto;padding:0;}
#bottom{margin:0 auto;padding:0;}
.bottomtit{margin:0 auto;padding:0;text-align:center;color:#fff;font-size:20px;font-weight:700;}
.bottomleft{width:31.3%;margin:1% 1%;padding:0;float:left;text-align:center;}
.bottomleft h4{font-size:15px;font-weight:700;color:#fff;}
.bottomleft p{font-size:14px;font-weight:400;color:#fff;}
.bottomleft span{font-size:14px;font-weight:400;color:#E38A01;}
@media screen and (max-width:990px){
	#bgbottom{width:100%;margin:0 auto;padding:0;background:#1C304B;}
	#bobottom{width:90%;margin:0 auto;padding:0;}
	#bottom{margin:0 auto;padding:0;}
	.bottomtit{margin:0 auto;padding:0;text-align:center;color:#fff;font-size:20px;font-weight:700;}
	.bottomleft{width:100%;margin:2% auto;padding:0;float:left;text-align:center;border-bottom:1px solid #152438;}
	.bottomleft h4{font-size:15px;font-weight:700;color:#fff;}
	.bottomleft p{font-size:14px;font-weight:400;color:#fff;}
	.bottomleft span{font-size:14px;font-weight:400;color:#E38A01;}
}

/* ================================================== */

/* FOOTER */
#bgfooter{width:100%;margin:0 auto;padding:20px 0;background:#152438;}
#bofooter{width:90%;margin:0 auto;padding:0;text-align:center;}
#footer{margin:0 auto;padding:0;color:#fff;}
#footer a{color:#E38A01;}
#footer a:hover{text-decoration:underline;}
@media screen and (max-width:990px){
	#bgfooter{width:100%;margin:0 auto;padding:10px 0;background:#152438;}
	#bofooter{width:90%;margin:0 auto;padding:0;text-align:center; font-size:8px;}
	#footer{margin:0 auto;padding:0;color:#fff;font-size:12px;}
	#footer a{color:#E38A01;}
	#footer a:hover{text-decoration:underline;}	
}
/* ================================================== */

/* ACCOUNT PAGE */
#bgaccountpage {width:100%;margin:0 auto;padding:20px 0;}
#wrapaccountpage {width:580px;margin:0 auto;padding:0;}
#wrapaccountacti {width:580px;margin:0 auto;padding:0 0 15%;}
#accountpagehead {text-align:center;margin-bottom:30px;}
#accountpagetitle {font-family:'Lato', sans-serif;font-size:30px;}
#accountpagedesc {font-size:15px;}
#accountpagelogin {width:500px;margin:0 auto;padding:20px;border:1px solid #ddd;}
#accountpageregister {width:500px;margin:0 auto;padding:20px;border:1px solid #ddd;}
@media screen and (max-width:580px)
{
	#bgaccountpage {width:100%;margin:0 auto;padding:5% 0;}
	#wrapaccountpage {width:100%;margin:0 auto;padding:0;}
	#wrapaccountacti {width:100%;margin:0 auto;padding:25% 0;}
	#accountpagehead {text-align:center;margin-bottom:30px;}
	#accountpagetitle {font-family:'Lato', sans-serif;font-size:30px;}
	#accountpagedesc {font-size:15px;}
	#accountpageregister {width:90%;margin:0 auto;padding:5%;border:1px solid #ddd;}
	#accountpagelogin {width:90%;margin:0 auto;padding:5%;border:1px solid #ddd;}
} 
/* ======================================================= */

/* NILAI SEMESTER */
#bonilai{width:73%;margin:0 1%;padding:2%;background:#f2f2f2;float:left;font-size:13px !important;border-radius:3px;}
#boxcontent{margin:0 auto;padding:0;}
.header{margin:0 auto;padding:0;border-bottom:2px solid #ddd;}
.header h1{margin:0 auto 5px;padding:0;font-weight:700;}
#nilaiprofil{margin:0 auto;padding:0;}
.nilaiprofilkiri{width:50%;margin:0 auto;padding:0;float:left;}
.nilaiprofilkanan{width:50%;margin:0 auto;padding:0;float:left;}
.nilaiperiode{margin:20px auto;padding:0;}
.nilaiperiode p{width:50%;margin:0 auto;padding:10px 0;background:#1C304B;text-align:center;text-transform:uppercase;color:#fff;font-weight:700;}
.nilaitable{width:100%;margin:10px 0;padding:0;}
.nilaimatkul{margin:30px 0;padding:0}
.nilaimatkultit{border-bottom:2px solid #ddd;margin:0 auto 20px;padding:0;}
.nilaimatkultit h2{font-weight:700;font-size:15px;}
@media screen and (max-width:990px)
{
	#bonilai{width:100%;margin:20px auto;padding:2%;background:#f2f2f2;float:left;font-size:13px !important;border-radius:3px;box-sizing:border-box;}
	#boxcontent{width:100%;margin:0 auto;padding:0;}
	.header{margin:0 auto;padding:0;border-bottom:2px solid #ddd;}
	.header h1{margin:0 auto 5px;padding:0;font-weight:700;}
	#nilaiprofil{margin:0 auto;padding:0;}
	.nilaiprofilkiri{width:100%;margin:0 auto;padding:0;float:left;overflow:auto;}
	.nilaiprofilkanan{width:100%;margin:0 auto;padding:0;float:left;}
	.nilaiperiode{margin:20px auto;padding:0;}
	.nilaiperiode p{width:50%;margin:0 auto;padding:10px 0;background:#1C304B;text-align:center;text-transform:uppercase;color:#fff;font-weight:700;font-size:10px;}
	.nilaitable{width:100%;margin:10px 0;padding:0;overflow:auto;}
	.nilaimatkul{width:100%;margin:30px 0;padding:0;overflow:auto;}
	.nilaimatkultit{border-bottom:2px solid #ddd;margin:0 auto 20px;padding:0;}
	.nilaimatkultit h2{font-weight:700;font-size:15px;}
}
/* ======================================================= */

/* KEUANGAN SEMESTER */
#keuangansemester{margin:40px auto;padding:0;}
.tablekeuangan01{width:31.3%;margin:0 1%;padding:0;float:left;}
.keuanganbottom{margin:0 auto;padding:0;}
@media screen and (max-width:990px)
{
	#keuangansemester{margin:40px auto;padding:0;}
	.tablekeuangan01{width:100%;margin:0 auto;padding:0;float:left;}
	.keuanganbottom{margin:0 auto;padding:0;}
}
/* ======================================================= */

/* AKTIVITAS KULIAH */
#aktivitastable{margin:0 auto;padding:0;}
.aktivitaswarning{margin:0 auto 30px;padding:10px 0;background:#1C304B;text-align:center;}
.warningtit{font-size:14px;color:#fff;font-weight:700;}
#aktivitasuts{margin:0 auto;padding:0;}
.aktivitasuas{margin:0 auto;padding:0;}
@media screen and (max-width:990px)
{
	#aktivitastable{margin:0 auto;padding:0;overflow:auto;}
	.aktivitaswarning{margin:0 auto 30px;padding:10px;background:#1C304B;text-align:center;}
	.warningtit{font-size:12px;color:#fff;font-weight:700;}
	#aktivitasuts{margin:0 auto;padding:0;overflow:auto;}
	.aktivitasuas{margin:0 auto;padding:0;overflow:auto;}
}
/* ======================================================= */


/* KEHADIRAN KULIAH */
.kehadirankuliah{margin:20px auto;padding:0;}
@media screen and (max-width:990px)
{
	.kehadirankuliah{margin:20px auto;padding:0;overflow:auto;}
}
/* ======================================================= */

/* HASIL KRS */
.krshasil{margin:20px auto;padding:0;}
#boxkrsrincian{margin:30px auto;padding:0;}
.krsrincianleft{width:50%;margin:0 auto;padding:0;float:left;}
.krsrincianrite{width:49%;margin:0 0 0 1%;padding:0 ;float:left;}
.krsrinciantit{width:100%;margin:0 auto 30px;padding:30px 0;font-size:14px;font-weight:700;color:#fff;background:#990000;text-align:center}
@media screen and (max-width:990px)
{
	.krshasil{margin:20px auto;padding:0;overflow:auto;}
	.krsrincianleft{width:100%;margin:0 auto;padding:0;float:left;}
	.krsrincianrite{width:100%;margin:0 0 0 1%;padding:0 ;float:left;}
	.krsrinciantit{width:100%;margin:0 auto 30px;padding:30px 0;font-size:14px;font-weight:700;color:#fff;background:#990000;text-align:center}
}
/* ======================================================= */

/* DASHBOARD PMB */
#bodash{width:77%;padding:0 1%;margin:0 auto;float:left;}
.dashtop{margin:0 auto 20px;padding:10px;font-size:16px;color:#fff; background:#E56A6A;font-weight:700;}
.dashtit{margin:0 auto 30px;padding:0;text-align:center;}
.dashtit h2{margin:0 auto;padding:0;font-size:24px;color:#014FC5;}
.dashtit p{margin:0 auto;padding:0;color:#666;}
.dashsetingbox{margin:0 auto 50px;padding:0 0 50px;border-bottom:4px double #999;}
.dashsetingbox hr{margin:10px auto ;padding:0;}
.dashsetingtit{width:100%;margin:0 auto 10px ;padding:10px 0 10px 10px;background:#ddd;font-size:18px;box-sizing:border-box;}
.dashsetingsub{width:96%;margin-left:auto;padding:8px 0 8px 10px;background:#f2f2f2;font-size:16px;box-sizing:border-box;}
#dashsetingrow{width:95%;margin-left:auto;padding:10px 0;border-bottom:1px solid #ddd;}
.dashsetinglabel{width:30%;margin:0 auto;padding:7px 0;float:left;}
.dashsetinginput{float:left;width:70%;color:#000;}
.dashsetinginput select{font:normal 15px Roboto;border:1px solid #eee;padding:8px 5px;width:100%;color:#965C6B;background:#f9f9f9;box-sizing:border-box;}
.dashsetinginput input{border:medium none;padding:8px 1%;margin:2px 0;width:100%;color:#965C6B;background:#f9f9f9;font:normal 15px Roboto;box-sizing:border-box;}
.dashsetinginput input:focus{font:normal 15px Roboto;border-color:rgba(82,168,236,0.8);box-shadow:0 1px 1px rgba(0,0,0,0.075) inset,0 0 8px rgba(82,168,236,0.6);outline:0 none}
.dashsetingedit{width:70%;float:left;font:normal 15px Roboto;border:1px solid #eee;padding:8px 5px;color:#965C6B;background:#f9f9f9;box-sizing:border-box;}
.dashsetingradio{width:70%;float:left;color:#965C6B;}
.dashsetingradio input{border:medium none;padding:0;margin:12px 0;width:5%;color:#965C6B;background:#f9f9f9;font:normal 15px Roboto;}
.dashbtnsubmit{width:100%;margin:0 auto;padding:0;background:#1C304B;color:#fff;text-transform:uppercase;font-weight:700;cursor:pointer; display:inline-block; font-family:'Roboto',sans-serif;font-size:15px; padding:7px 50px;text-decoration:none;border:1px solid #1C304B;border-radius:3px;}
.dashbtnsubmit:hover{background:#152438;color:#f5f5f5;}

@media screen and (max-width:990px) {
	#bodash{width:100%;padding:1%;margin:0 auto;float:left;}
	.dashtop{margin:0 auto 20px;padding:10px;font-size:16px;color:#fff; background:#E56A6A;font-weight:700;}
	.dashtit{margin:0 auto 30px;padding:0;text-align:center;}
	.dashtit h2{margin:0 auto;padding:0;font-size:24px;color:#014FC5;}
	.dashtit p{margin:0 auto;padding:0;color:#666;}
	.dashsetingbox{margin:0 auto 50px;padding:0 0 50px;border-bottom:4px double #999;}
	.dashsetingbox hr{margin:10px auto ;padding:0;}
	.dashsetingtit{width:100%;margin:0 auto 10px ;padding:10px 0 10px 10px;background:#ddd;font-size:18px;box-sizing:border-box;}
	.dashsetingsub{width:96%;margin-left:auto;padding:8px 0 8px 10px;background:#f2f2f2;font-size:16px;box-sizing:border-box;}
	#dashsetingrow{width:95%;margin-left:auto;padding:10px 0;border-bottom:1px solid #ddd;}
	.dashsetinglabel{width:30%;margin:0 auto;padding:7px 0;float:left;}
	.dashsetinginput{float:left;width:70%;color:#000;}
	.dashsetinginput select{font:normal 15px Roboto;border:1px solid #eee;padding:8px 5px;width:100%;color:#965C6B;background:#f9f9f9;box-sizing:border-box;}
	.dashsetinginput input{border:medium none;padding:8px 1%;margin:2px 0;width:100%;color:#965C6B;background:#f9f9f9;font:normal 15px Roboto;box-sizing:border-box;}
	.dashsetinginput input:focus{font:normal 15px Roboto;border-color:rgba(82,168,236,0.8);box-shadow:0 1px 1px rgba(0,0,0,0.075) inset,0 0 8px rgba(82,168,236,0.6);outline:0 none}
	.dashsetingedit{width:70%;float:left;font:normal 15px Roboto;border:1px solid #eee;padding:8px 5px;color:#965C6B;background:#f9f9f9;box-sizing:border-box;}
	.dashsetingradio{width:70%;float:left;color:#965C6B;}
	.dashsetingradio input{border:medium none;padding:0;margin:12px 0;width:5%;color:#965C6B;background:#f9f9f9;font:normal 15px Roboto;}
	.dashbtnsubmit{width:100%;margin:0 auto;padding:0;background:#1C304B;color:#fff;text-transform:uppercase;font-weight:700;cursor:pointer; display:inline-block; font-family:'Roboto',sans-serif;font-size:15px; padding:7px 50px;text-decoration:none;border:1px solid #1C304B;border-radius:3px;}
	.dashbtnsubmit:hover{background:#152438;color:#f5f5f5;}
	}
/* ======================================================= */

/* WELCOME PAGE */
#bowelcome{width:77%;margin:0 auto;padding:0 1%;float:left;}
#welcomepage{margin:0 auto;padding:0;}
#welcomepage p{margin:0 auto;padding:0;}
#welcomepage ul{margin:0 auto;padding:0 0 0 20px;box-sizing:border-box;}

@media screen and (max-width:990px) {
	#bowelcome{width:98%;margin:0 auto;padding:1%;float:left;}
	#welcomepage{margin:0 auto;padding:0;}
	#welcomepage p{margin:0 auto;padding:0;}
	#welcomepage ul{margin:0 auto;padding:0 0 0 20px;box-sizing:border-box;}
}


/* ======================================================= */


/* FORMULIR DETAIL */
#boformulir {width:77%;margin:0 1%;padding:0 1%;border:1px solid #eee;box-sizing:border-box;float:left;}
#bgformdetailtit{margin:10px auto 20px;padding:0 10px;font-size:22px;font-weight:700;color:#1C304B;font-family:'Roboto', sans-serif;border-bottom:2px double #1C304B;}
.formdetailtit{margin:0 auto;padding:0;text-align:center;}
#wrapdetail {padding-bottom:5px;margin-bottom:10px;} 
.detailtitle {font-size:18px;}
.detailsubtitle {padding:0 20px;font-size:16px;}

#detail {padding:0 0 0 25px;}
#detailfak {padding:0 0 0 40px;}

#bgdetailcard {width:auto;padding:20px 10px;border:1px solid #eee;}
#detailleft {width:50%;float:left;}
#detailright {width:50%;float:left;}

#detaillabel {float:left;width:30%;padding:0;color:#666;}
#detailinput {float:left;width:70%;padding:0;color:#004FC5;}

#detaildate {float:left;width:70%;color:#000;}
#detaildate input {border:medium none;padding:8px 1%;margin:2px 0;width:20%;color:#965C6B;background:#f9f9f9;font:normal 15px Roboto;}
#detaildate input:focus {font:normal 15px Roboto;border-color:rgba(82,168,236,0.8);box-shadow:0 1px 1px rgba(0,0,0,0.075) inset,0 0 8px rgba(82,168,236,0.6);outline:0 none}

#detailradio {float:left;width:50%;color:#965C6B;}
#detailradio input {border:medium none;padding:0;margin:12px 0;width:5%;color:#965C6B;background:#f9f9f9;font:normal 15px Roboto;}

#detailangka {float:left;width:70%;color:#000;}
#detailangka input {border:medium none;padding:8px 1%;margin:2px 0;width:20%;color:#965C6B;background:#f9f9f9;font:normal 15px Roboto;}
#detailangka input:focus {font:normal 15px Roboto;border-color:rgba(82,168,236,0.8);box-shadow:0 1px 1px rgba(0,0,0,0.075) inset,0 0 8px rgba(82,168,236,0.6);outline:0 none}

#detailemail {float:left;width:70%;color:#000;}
#detailemail input {border:medium none;padding:8px 1%;margin:2px 0;width:50%;color:#965C6B;background:#f9f9f9;font:normal 15px Roboto;}
#detailemail input:focus {font:normal 15px Roboto;border-color:rgba(82,168,236,0.8);box-shadow:0 1px 1px rgba(0,0,0,0.075) inset,0 0 8px rgba(82,168,236,0.6);outline:0 none}

#detailsubmit{margin:20px 0}

#bgtombol {width:100%;margin:0 auto;margin-bottom:20px;text-align:right;}
.tombolaction {width:auto;padding:5px 10px;background:#004FC5;color:#fff;}

#signature1 {margin:25px 0 100px 25px;}
#signature2 {margin:0 0 0 25px;}
#noted {margin:25px 0 0 25px;}

#titledetailright {color:#004FC5;}
#boxdetailright {}
#rowdetailright {width:100%;}
#detailrighthead1 {width:28%;float:left;padding:10px;background:#eee;}
#detailrighthead2 {width:27%;float:left;padding:10px;background:#eee;}
#detailrightlabel {width:28%;float:left;padding:20px 10px;border:1px solid #eee;}
#detailrightprog {width:26%;float:left;padding:32px 10px;border:1px solid #eee;}

#pmb1 {margin:25px 0 0 0;}
#pmb2 {margin:0 0 100px 0;}
#pmb3 {margin:0;}

@media screen and (max-width:1024px)
{
	#boformulir {padding:0;}

	#wrapdetail {padding-bottom:50px;margin-bottom:50px;border-bottom:4px double #999;} 
	.detailtitle {background:#ddd;padding:5px 10px;margin-bottom:5px;font-size:18px;}
	.detailsubtitle {background:#f2f2f2;padding:5px 10px;margin:5px 0 5px 25px;font-size:16px;}
	
	#detail {padding:5px 0;border-bottom:1px solid #ddd;margin-left:55px}
	#detailfak {padding:0 0 0 40px;}

	#bgdetailcard {width:auto;padding:20px 10px;border:1px solid #eee;}
	#detailleft {width:50%;float:left;}
	#detailright {width:50%;float:left;}

	#detaillabel {float:left;width:30%;padding:7px 0;color:#666;}
	#detailinput {float:left;width:70%;color:#000;padding:5px 0;}

	#detailedit {float:left;width:70%;color:#000;}
	#detailedit input {border:medium none;padding:8px 1%;margin:2px 0;width:98%;color:#965C6B;background:#f9f9f9;font:normal 15px Roboto;}
	#detailedit input:focus {font:normal 15px Roboto;border-color:rgba(82,168,236,0.8);box-shadow:0 1px 1px rgba(0,0,0,0.075) inset,0 0 8px rgba(82,168,236,0.6);outline:0 none}

	#detailedit select {font:normal 15px Roboto;border:1px solid #eee;padding:8px 5px;width:auto;color:#965C6B;background:#f9f9f9;}

	#detaildate {float:left;width:70%;color:#000;}
	#detaildate input {border:medium none;padding:8px 1%;margin:2px 0;width:20%;color:#965C6B;background:#f9f9f9;font:normal 15px Roboto;}
	#detaildate input:focus {font:normal 15px Roboto;border-color:rgba(82,168,236,0.8);box-shadow:0 1px 1px rgba(0,0,0,0.075) inset,0 0 8px rgba(82,168,236,0.6);outline:0 none}

	#detailradio {float:left;width:50%;color:#965C6B;}
	#detailradio input {border:medium none;padding:0;margin:12px 0;width:5%;color:#965C6B;background:#f9f9f9;font:normal 15px Roboto;}

	#detailangka {float:left;width:70%;color:#000;}
	#detailangka input {border:medium none;padding:8px 1%;margin:2px 0;width:20%;color:#965C6B;background:#f9f9f9;font:normal 15px Roboto;}
	#detailangka input:focus {font:normal 15px Roboto;border-color:rgba(82,168,236,0.8);box-shadow:0 1px 1px rgba(0,0,0,0.075) inset,0 0 8px rgba(82,168,236,0.6);outline:0 none}

	#detailemail {float:left;width:70%;color:#000;}
	#detailemail input {border:medium none;padding:8px 1%;margin:2px 0;width:50%;color:#965C6B;background:#f9f9f9;font:normal 15px Roboto;}
	#detailemail input:focus {font:normal 15px Roboto;border-color:rgba(82,168,236,0.8);box-shadow:0 1px 1px rgba(0,0,0,0.075) inset,0 0 8px rgba(82,168,236,0.6);outline:0 none}

	#detailsubmit{margin:20px 0}
}
@media screen and (max-width:768px)
{
	#boformulir {width:94%;margin:0 3%;padding:0;}

	#wrapdetail {padding-bottom:10px;margin-bottom:10px;border-bottom:0px double #999;font-size:13px;} 
	.detailtitle {background:#ddd;padding:5px 10px;margin-bottom:5px;font-size:13px;}
	.detailsubtitle {background:#f2f2f2;padding:5px 10px;margin:5px 0 5px;font-size:13px;}
	
	#detail {padding:1px 0;border-bottom:0 solid #ddd;margin-left:0}
	#detailfak {padding:0 0 0 40px;}

	#bgdetailcard {width:auto;padding:20px 10px;border:1px solid #eee;}
	#detailleft {width:100%;float:left;}
	#detailright {width:100%;float:left;}
	
	#detaillabel {float:left;width:96%;padding:2%;color:#666;background:#eee;}
	#detailinput {float:left;width:96%;padding:2%;color:#000;background:#f2f2f2;} 

	#detailedit {float:left;width:100%;color:#000;}
	#detailedit input {border:medium none;padding:8px 1%;margin:2px 0;width:98%;color:#965C6B;background:#f9f9f9;font:normal 15px Roboto;}
	#detailedit input:focus {font:normal 15px Roboto;border-color:rgba(82,168,236,0.8);box-shadow:0 1px 1px rgba(0,0,0,0.075) inset,0 0 8px rgba(82,168,236,0.6);outline:0 none}

	#detailedit select {font:normal 15px Roboto;border:1px solid #eee;padding:8px 5px;width:auto;color:#965C6B;background:#f9f9f9;}

	#detaildate {float:left;width:100%;color:#000;}
	#detaildate input {border:medium none;padding:8px 1%;margin:2px 0;width:27%;color:#965C6B;background:#f9f9f9;font:normal 15px Roboto;}
	#detaildate input:focus {font:normal 15px Roboto;border-color:rgba(82,168,236,0.8);box-shadow:0 1px 1px rgba(0,0,0,0.075) inset,0 0 8px rgba(82,168,236,0.6);outline:0 none}

	#detailradio {float:left;width:100%;color:#965C6B;}
	#detailradio input {border:medium none;padding:0;margin:12px 0;width:5%;color:#965C6B;background:#f9f9f9;font:normal 15px Roboto;}

	#detailangka {float:left;width:100%;color:#000;}
	#detailangka input {border:medium none;padding:8px 1%;margin:2px 0;width:40%;color:#965C6B;background:#f9f9f9;font:normal 15px Roboto;}
	#detailangka input:focus {font:normal 15px Roboto;border-color:rgba(82,168,236,0.8);box-shadow:0 1px 1px rgba(0,0,0,0.075) inset,0 0 8px rgba(82,168,236,0.6);outline:0 none}

	#detailemail {float:left;width:100%;color:#000;}
	#detailemail input {border:medium none;padding:8px 1%;margin:2px 0;width:98%;color:#965C6B;background:#f9f9f9;font:normal 15px Roboto;}
	#detailemail input:focus {font:normal 15px Roboto;border-color:rgba(82,168,236,0.8);box-shadow:0 1px 1px rgba(0,0,0,0.075) inset,0 0 8px rgba(82,168,236,0.6);outline:0 none}

	#detailsubmit{margin:20px 0}
	
	#signature1 {margin:25px 0 100px 0;}
	#signature2 {margin:0 0 0 0;}
	#noted {margin:25px 0 30px 0;}

	#titledetailright {color:#004FC5;}
	#boxdetailright {}
	#rowdetailright {width:100%;}
	#detailrighthead1 {width:45%;float:left;padding:2%;background:#eee;}
	#detailrighthead2 {width:45%;float:left;padding:2%;background:#eee;}
	#detailrightlabel {width:45%;float:left;padding:2%;border:1px solid #eee;}
	#detailrightprog {width:45%;float:left;padding:6.5% 1.5%;border:1px solid #eee;}

	#pmb1 {margin:25px 0 0 0;}
	#pmb2 {margin:0 0 100px 0;}
	#pmb3 {margin:0;}
}
/* === */
/* ======================================================= */

/* BUTTON GOOGLE */
#boxgoogle{background:#fff;padding:10px 20px;text-align:center;border-radius:3px;box-shadow:0 0 20px 1px rgba(0,0,0,0.2);}
.btngoogle{margin:0 auto;padding:0;color:#000;font-weight:600;text-transform:uppercase;}
.btngoogle img{vertical-align:middle;}
.btngoogle span{margin:0 0 0 5px;}
/* ======================================================= */

/* BUTTON FORM PERWALIAN */
.btnsite{margin:10px 0;padding:0;}
.simpanbtn{margin:0 auto;padding:0;background:#1C304B;padding:4px 10px;border-radius:3px;color:#fff;border:1px solid #1C304B;font-size:15px;cursor:pointer;}
.simpanbtn:hover{background:#152438;border:1px solid #152438;}
/* ======================================================= */

/* BUTTON FORM */
.formsearch{margin:0 auto;padding:0;}
.formsearch select{padding:5px 8px;border-radius:3px;}
.btnsort{margin:0 0 0 3px;padding:3px 10px;border-radius:3px;border:none;background:#1C304B;color:#fff;cursor:pointer;}
.btnsort:hover{background:#0E1825;}
@media screen and (max-width:768px)
{
	.formsearch{margin:0 auto;padding:0;text-align:center;}
	.formsearch select{padding:5px 8px;border-radius:3px;}
	.btnsort{margin:0 0 0 3px;padding:3px 10px;border-radius:3px;border:none;background:#1C304B;color:#fff;cursor:pointer;}
	.btnsort:hover{background:#0E1825;}
}

/* ======================================================= */


/* ABSEN */
#boxabsen{margin:0 auto;padding:0;}
.absentit{margin:0 auto;padding:0;}
.absentit h2{margin:0 auto 10px;padding:0;font-size:20px;font-weight:700;font-family:'Roboto', sans-serif;}
#boabsen{width:100%;margin:20px auto;padding:0}
.absenkiri{width:20%;margin:0 auto;padding:0;float:left;}
.absenkiri p{font-size:18px; margin:0  auto;padding:0;font-weight:400;font-family:'Roboto', sans-serif;}
.absenkanan{width:80%;margin:0 auto;padding:0;float:left;}
.absenform{margin:0 auto 10px;padding:0;font-size:16px;font-weight:400;font-family:'Roboto',sans-serif;transition:all 0.3s ease 0s;}
.absenform input{margin:0 5px}
.absenbtn{margin:0 auto;padding:0;}
.submitabsen{margin:0 auto 50px;padding:5px 10px;border:none;background:#1C304B;color:#fff;border-radius:3px;cursor:pointer;}
.submitabsen:hover{background:#0E1825;}
/* ======================================================= */

/* PANEL */
#bgpanel {width:100%;margin:0 auto;padding:50px 0;}
#bopanel {width:90%;margin:0 auto;padding:0;}

#panel {margin:0 auto;padding:0;box-sizing:border-box;}
#panelTit {margin:0 auto 10px;padding:0 0 2px;font-weight:700;font-size:20px;font-family:'Roboto', sans-serif;border-bottom:1px solid #ddd;}

#panelLeft {width:20%;float:left;margin:0 auto;padding:0%;box-sizing:border-box;}
.panelLeftTit {margin:0 auto;padding:10px 15px;font-weight:700;font-size:15px;font-family:'Roboto', sans-serif;background:#f2f2f2;}
.panelLeftDes {margin:0 auto;padding:0;line-height:1.6;}
.panelLeftDes li {margin:0 auto;padding:8px 15px;font-weight:400;font-size:15px;font-family:'Roboto', sans-serif;list-style:none;border-top:1px solid #eee;color:#152438;}
.panelLeftDes li:hover {background:#f9f9f9;color:#000;}

#panelRite {width:85%;float:left;margin:0 auto;padding:0;box-sizing:border-box;}
.panelRiteTit {margin:0 auto 10px;padding:0 0 2px;font-weight:700;font-size:20px;font-family:'Roboto', sans-serif;border-bottom:1px solid #ddd;}
.panelRiteDes {margin:0 auto;padding:0;font-weight:400;font-size:15px;font-family:'Roboto', sans-serif;line-height:1.6;}
.panelRiteDesTop {font-weight:400;font-size:18px;font-family:'Roboto', sans-serif;line-height:1.6;}
.panelRiteDesBot {}
.paneldes a {color:#fff;}
.paneldes a:hover {color:#990000;}

#panelTable {margin:0 auto;padding:0;}
#panelTableTit {margin:0 auto 10px;padding:0 0 10px;border-bottom:1px solid #ddd;}
.panelTableTitLeft {width:50%;float:left;margin:0 auto;padding:0;}
.panelTableTitLeft span {font-weight:700;font-size:15px;font-family:'Roboto', sans-serif;}
.panelTableTitRite {width:50%;float:left;margin:0 auto;padding:0;text-align:right;}
.panelTableTitRite a {margin:0 auto;padding:5px 20px;font-weight:700;font-size:15px;font-family:'Roboto', sans-serif;border:2px solid #990000;color:#990000;border-radius:2px;}
.panelTableTitRite a:hover {background:#990000;color:#fff;}
.plus{display:block; border-left:1px solid #C3C3C3;}
.plus.active{display:none;}
.min{display:none;}
.min.active{display:block;border-left:1px solid #C3C3C3;}
@media screen and (max-width:990px)
{
	#bgpanel {width:100%;margin:0 auto;padding:50px 0;}
	#bopanel {width:100%;margin:0 auto;padding:0;}
	#panel {margin:0 auto;padding:0;box-sizing:border-box;}
	#panelTit {margin:20px auto 0;padding:0 0 2px;font-weight:700;font-size:16px;font-family:'Roboto', sans-serif;border-bottom:1px solid #ddd;}
	.paneltitleft{width:92%;margin:0 auto;padding:0;float:left;}
	.paneltitrite{width:8%;margin:0 auto;padding:0;float:left;}
	#panelLeft {width:100%;float:left;margin:0 auto;padding:0;box-sizing:border-box;}
	.panelLeftTit {margin:0 auto;padding:0;font-weight:700;font-size:15px;font-family:'Roboto', sans-serif;background:#fff;}
	#dashmenu ul a:last-child li{border-bottom:1px solid #ddd;}
	#panelnav.active{display:block !important;padding:1% 3%;background:#ddd;margin:0 auto;}
	#panelnav{display:block !important;padding:1% 3%;background:#ddd;margin:0 auto;}
}
/* ==================================================================================================== */
#buttoneditpendaftaran{width:100%;padding:0;margin:0 auto; text-align:center;}
.editbukti{width:100%;margin:0 auto;padding:5px 47%;text-align:center;background:#1C304B;color:#fff !important;}

.alert{line-height: 1.375rem;}

.alert-warning{background-color: #fff0e1;border-color: #fff0e1;color: #ff9f43;padding: 15px;box-sizing:border-box;border-radius:0.375rem;border:1px solid #ffd9b4;font-size:16px;}


#cartbox{margin:20px auto;padding:0;width:100%;}
.cartleft{width:42%;margin:0 2% 0 0;padding:0;float:left;}
.card{width:100%;margin:0 auto; padding:25px;box-sizing:border-box;float:left;border-radius:0.375rem;background:#fff;box-shadow: 15px 15px 15px rgba(0, 0, 0, 0.1);}
.card-title{font-size:18px;margin:0 auto 1.5rem;}
.card-body{margin:0 auto; padding:0;}
.input-group{margin:0 auto 1.5rem;padding:0;width:100%;}
.form-label{width:35%;line-height: 1.625;margin-right:1%;margin-top:7.81px;font-size:15px;float:left;}
.form-control{width:64%;float:left;display: block;padding: .426rem .9375rem;box-sizing:border-box;font-size: 0.9375rem;font-weight: 400;line-height: 1.625;color: #444050;appearance: none;background-color: rgba(0, 0, 0, 0);background-clip: padding-box;border: 1px solid #d1d0d4;border-radius: 0.375rem;transition: border-color .15s;}
.badge{float:left;display:inline-block;padding:10px;box-sizing:border-box;font-size:15px;line-height:1;font-weight:600;border-radius:0.25rem;}
.bg-label-warning{background-color: #fff0e1;color: #ff9f43;}
.bg-label-success{background-color: #ddf6e8 ;color: #28c76f;}
.bg-label-primary {background-color: #e9e7fd ;color: #7367f0;}
.bg-label-danger {background-color: #ffe2e3 ;color: #ff4c51;}
.form-btn{margin:0 auto;padding:0;}
.btn{float:right;display: inline-flex;align-items: center;justify-content: center;margin:0 auto;padding:0.4812rem 1.25rem;font-size:15px;font-weight:500;line-height:1.375;vertical-align:middle;border:1px solid #1C304B;border-radius:0.375rem;cursor:pointer;}
.btn-primary{color: #fff;background-color: #1C304B;border-color: #1C304B;}
.btn-primary:hover{background:#152438;border-color:#152438;}
.cartright{width:56%;float:left;margin:0 auto;padding:0;}
