*{margin: 0;padding: 0;font-size: 15px;line-height: 1.6;}
#bgcontent{width: 100%;margin: 0 auto;padding: 50px; box-sizing: border-box;}
@media screen and (max-width:990px) {
#bgcontent{width: 95%;margin: 0 auto;padding: 0; box-sizing: border-box;}
}

/* NAVIGATION */
#bonav{width: 18%;float: left;margin: 0;padding: 0 1%;}
#nav{width: 100%;margin: 0;padding: 0;}
.navtit{margin: 0 auto;padding: 0 8px 8px 8px;}
.navtit h1{margin: 0 auto;padding: 0;font-weight: 600;}
ul.navigation{list-style: none;margin: 0;padding: 0;line-height: 1.6;}
ul.navigation li{margin: 0;padding:0;background-color: #fafafa;border-top: 1px solid #3737371e;color: #00000080;cursor:pointer;transition: all 0.4s ease-in-out;}
ul.navigation li.active{margin: 0;padding: 0;background-color: #e2e2e2;border-top: 1px solid #3737371e;color: #00000080;}
ul.navigation ul{margin: 0;padding: 0;background-color: #fafafa;border-top: 1px solid #3737371e;color: #00000080;}
ul.navigation ul.active{margin: 0;padding: 0;background-color: white;border-top: 1px solid #3737371e;color: #00000080;}
ul.navigation li:hover{margin: 0;padding: 0;background-color: #e2e2e2;border-top: 1px solid #3737371e;color: #00000080;}
ul.navigation li.active:hover{margin: 0;padding: 0;background-color: #e2e2e2;border-top: 1px solid #3737371e;color: #00000080;}
ul.navigation li a{position: relative;display: block;margin: 0 auto;width: 100%;padding: 15px;text-indent: 10px;text-transform: capitalize;font-size: 15px;color: #00000080;box-sizing: border-box;}
ul.navigation li a.active{margin: 0;padding: 0;color: red;}
ul.navigation ul li{margin:0;padding:0;background:white;}
ul.navigation ul li:hover{margin:0;padding:0;}
ul.navigation ul li a{position: relative;display: block;margin: 0 auto;width: 100%;padding: 15px;text-indent: 10px;text-transform: capitalize;font-size: 15px;}
.bar{display: none; width: 25px; height: 3px; margin: 5px auto; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; background-color: #101010;}
@media screen and (max-width:990px) {
    #bonav{width: 100%;float: left;margin: 0;padding: 0 1%;}
    #nav{width: 100%;margin: 0;padding: 5px 0;}
    .navtit{margin: 0 auto;padding: 0;display: inline-flex;flex-direction: column;}
    .navtit.active{margin: 0 auto 10px;padding: 0;}
    .navtit h1{margin: 0 auto;padding: 0;font-weight: 600;display: none;}
    #nav ul{display: none; list-style: none;margin: 0;padding: 0;line-height: 1.6;}
    #nav ul.active{display: block; list-style: none;margin: 0;padding: 0;line-height: 1.6;-webkit-tap-highlight-color: transparent;}
    #nav ul.active:hover{display: block; list-style: none;margin: 0;padding: 0;line-height: 1.6;-webkit-tap-highlight-color: transparent;}
    #nav ul li{margin: 0;padding:0;display: block; background-color: #fafafa;border-top: 1px solid #3737371e;color: #00000080;cursor:pointer;}
    #nav ul li.active{margin: 0;padding: 0;background-color: #e2e2e2;border-top: 1px solid #3737371e;color: #00000080;}
    #nav ul ul{margin: 0;padding: 0;background-color: #fafafa;border-top: 1px solid #3737371e;color: #00000080; position:absolute;visibility:hidden;height:0;transform:scaleY(0);transition:all 0.4s ease;}
    #nav ul ul.active{margin: 0;padding: 0;background-color: white;border-top: 1px solid #3737371e;color: #00000080; position:relative;visibility:visible;height:100%;transform:scaleY(1);}
    #nav ul li:hover{margin: 0;padding: 0;background-color: #e2e2e2;border-top: 1px solid #3737371e;color: #00000080;}
    #nav ul li.active:hover{margin: 0;padding: 0;background-color: #e2e2e2;border-top: 1px solid #3737371e;color: #00000080;}
    #nav ul li a{position: relative;display: block;margin: 0 auto;width: 100%;padding: 15px;box-sizing: border-box; text-indent: 10px;text-transform: capitalize;font-size: 15px;color: #00000080;}
    #nav ul li a.active{margin: 0;padding: 0;color: red;}
    #nav ul ul li{margin:0;padding:0;background:white;}
    #nav ul ul li:hover{margin:0;padding:0;}
    #nav ul ul li a{position: relative;display: block;margin: 0 auto;width: 100%;padding: 15px;text-indent: 10px;text-transform: capitalize;font-size: 15px;}
    .bar{display: block; width: 25px; height: 3px; margin: 2.5px 0 2.5px 0; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; background-color: #101010;}
    .paneltitrite.active .bar:nth-child(1){opacity: 0;}
    .paneltitrite.active .bar:nth-child(2){transform: translateY(2.8px) rotate(45deg);}
    .paneltitrite.active .bar:nth-child(3){transform: translateY(-2.8px) rotate(-45deg);}
}

/* FORM USER */
#bouser{width:76%;margin:0 1%;padding:2%;float:left;font-size:13px !important;border-radius:3px;}
#user{width: 100%;margin: 0;padding: 1%;display: block;border:1px solid rgba(0, 0, 0, 0.2);box-sizing: border-box;text-align: unset;}
.usertit{margin: 0 auto;padding: 0;}
.userh{margin: 0 auto;padding: 0;}
.userh h2{margin: 0 auto;padding: 0;font-size: 14px;font-weight: 600;}
.userprofil{width: 20%;margin: 0 auto;padding: 0;float: left;overflow: hidden;}
.profilimg{width: 100%;margin: 0 auto;padding: 0;}
.profilimg img{width:100%;border-radius:50%;}
.userform{display: block;margin: 0;padding: 0;}
.userdata{width: 75%;margin: 0 auto;padding: 0;float: right;}
.userrows{width: 100%;margin: 0 auto;padding: 10px;box-sizing: border-box;border-bottom: 1px solid rgba(0, 0, 0, 0.2);}
.rowstit{width: 40%;margin: 0 auto;padding: 0;float: left;font-size:15px;}
.rowstitnew{width: 100%;margin: 0 auto;padding: 10px;background:white;box-sizing:border-box;}
.rowstitnew h3{font-size:17px;}
.rowsinput{width: 60%;margin: 0 auto;padding: 0;float: left;background-color: #fafafa;}
.rowsedit{width: 60%;margin: 0 auto;padding: 0;float: left;}
.rowsedit input[type="text"]{width: 100%;margin: 0 auto;padding: 3px;box-sizing: border-box;background-color: #fff;border: 1px solid rgba(0, 0, 0, 0.2);border-radius:2px;font-size:13px;}
.rowsedit input:focus[type="text"]{width: 100%;margin: 0 auto;padding: 3px;box-shadow: 0 0 4px 1px rgba(61, 61, 255, 0.412);background-color: white;}
.rowsedit input:hover[type="text"]{width: 100%;margin: 0 auto;padding: 3px;background-color: white;}
.rowsedit input[type="disable"]{width: 100%;margin: 0 auto;padding: 3px;box-sizing: border-box;background-color: #f2f2f2;border: 1px solid rgba(0, 0, 0, 0.2);}
.rowsedit input:focus[type="disable"]{width: 100%;margin: 0 auto;padding: 3px;box-shadow: 0 0 0 4px rgba(61, 61, 255, 0.412);background-color: white;}
.rowsedit input:hover[type="disable"]{width: 100%;margin: 0 auto;padding: 3px;background-color: white;}
.rowsedit input[type="range"]{width: 100%;margin: 0 auto;padding: 3px;box-sizing: border-box;background-color: #f2f2f2;border: 1px solid rgba(0, 0, 0, 0.2);}
.rowsedit input:focus[type="range"]{width: 100%;margin: 0 auto;padding: 3px;box-shadow: 0 0 0 4px rgba(61, 61, 255, 0.412);background-color: white;}
.rowsedit input:hover[type="range"]{width: 100%;margin: 0 auto;padding: 3px;background-color: white;}
.rowsedit textarea{width: 100%;margin: 0 auto;padding: 0;background-color: #f2f2f2;border: 1px solid rgba(0, 0, 0, 0.2);}
.rowsedit textarea:focus{width: 100%;margin: 0 auto;padding: 0;background-color: white;box-shadow: 0 0 0 4px rgba(61, 61, 255, 0.412);}
.rowsedit textarea:hover{width: 100%;margin: 0 auto;padding: 0;background-color: white;}
.rowsedit select{width: 100%;margin: 0 auto;padding: 4px 0;background-color: #fff;border: 1px solid rgba(0, 0, 0, 0.2);font-size:13px;border-radius:2px;}
.rowsedit select:focus{width: 100%;margin: 0 auto;padding: 4px 0;background-color: white;border: 1px solid rgba(0, 0, 0, 0.2);box-shadow: 0 0 0 4px rgba(61, 61, 255, 0.412);}
.rowsedit select:hover{width: 100%;margin: 0 auto;padding: 4px 0;background-color: white;border: 1px solid rgba(0, 0, 0, 0.2);}
#btn-submit{width: 100%;margin: 0;padding: 20px 0;display: block;}
.submit{margin: 0;padding: 0;border: 1px solid rgba(0, 0, 0, 0.2);}
.submit input[type="submit"]{width: 100%; border: none; cursor: pointer; margin: 0;padding: 5px; display: block;background-color: #1C304B;color: white;font-weight: 500;}
#data-tab-1{position:absolute;visibility:hidden;top:0;height:0;overflow:hidden;}
#data-tab-1.current{position:relative;visibility:visible;height:100%;overflow:hidden;}
#data-tab-2{position:absolute;visibility:hidden;top:0;height:0;overflow:hidden;}
#data-tab-2.current{position:relative;visibility:visible;height:100%;overflow:hidden;}
#data-tab-3{position:absolute;visibility:hidden;top:0;height:0;overflow:hidden;}
#data-tab-3.current{position:relative;visibility:visible;height:100%;overflow:hidden;}
.tab{width: 60%;margin: 0;padding: 0 0 10px;position: relative;transition: .4s ease;}
.tab.activated{width: 100%;margin: 0 auto;display: block; padding: 10px;position: fixed;top: 0;left: 0; z-index: 99999999999;background-color: #1C304B;}
.tab.activated ul li.current{width: 28%;float: left;background-color: #ed7200;padding: 8px 10px;}
.tab.activated ul li{width: 28%;float: left;padding: 8px 10px;color: white;}
.tab.activated ul li:hover{width: 28%;float: left;padding: 8px 10px;color: white;background: #dc6a00;}
.tab ul{list-style: none;}
.tab ul li{width: 28%;float: left;cursor: pointer;padding: 8px 10px;transition: .4s ease;}
.tab ul li.current{width: 28%;float: left;background-color: #1C304B;color:white; padding: 8px 10px;}
.tab ul li:hover{width: 28%;float: left;cursor: pointer;background-color: #193559;color: white;}

.p-1{padding: 0 20px 20px !important;}

@media screen and (max-width:990px) {
    #bouser{width: 96%;margin: 0 1%;padding: 1%;float: none;}
    #user{width: 98%;margin: 0;padding: 1%;display: block;border:1px solid rgba(0, 0, 0, 0.2);box-sizing: border-box;}
    .usertit{margin: 0 auto;padding: 0;}
    .userh{margin: 0 auto;padding: 0;}
    .userh h2{margin: 0 auto;padding: 0;font-size: 15px;font-weight: 600;}
	.userdesc{margin:0 auto;padding:0;}
	.userdesc p{font-size:13px;}
    .userprofil{width: 100%;margin: 0 auto;padding: 0;float: left;overflow: hidden;}
    .profilimg{width: 90%;margin: 0 auto;padding: 0 5%;text-align: center;}
    .profilimg img{width:100%;border-radius:50%;}
    .userform{display: block;margin: 0;padding: 0;}
    .userdata{width: 100%;margin: 0 auto;padding: 0;float: right;}
    .userrows{width: 100%;margin: 0 auto;padding: 10px;box-sizing: border-box;border-bottom: 1px solid rgba(0, 0, 0, 0.2);}
    .rowstit{width: 40%;margin: 0 auto;padding: 0;float: left;font-size:13px;}
    .rowstitnew{width: 100%;margin: 0 auto;padding: 10px;background:white;box-sizing:border-box;}
    .rowsinput{width: 60%;margin: 0 auto;padding: 0;float: left;background-color: #fafafa;}
    .rowsedit{width: 60%;margin: 0 auto;padding: 0;float: left;}
    .rowsedit input[type="text"]{width: 100%;margin: 0 auto;padding: 3px;box-sizing: border-box;background-color: #fff;border: 1px solid rgba(0, 0, 0, 0.2);font-size: 12px;border-radius:2px;}
    .rowsedit input:focus[type="text"]{width: 100%;margin: 0 auto;padding: 3px;box-shadow: 0 0 4px 1px rgba(61, 61, 255, 0.412);background-color: white;font-size: 14px;}
    .rowsedit input:hover[type="text"]{width: 100%;margin: 0 auto;padding: 3px;background-color: white;font-size: 14px;}
    .rowsedit input[type="disable"]{width: 100%;margin: 0 auto;padding: 3px;box-sizing: border-box;background-color: #f2f2f2;border: 1px solid rgba(0, 0, 0, 0.2);font-size: 14px;}
    .rowsedit input:focus[type="disable"]{width: 100%;margin: 0 auto;padding: 3px;box-shadow: 0 0 0 4px rgba(61, 61, 255, 0.412);background-color: white;font-size: 14px;}
    .rowsedit input:hover[type="disable"]{width: 100%;margin: 0 auto;padding: 3px;background-color: white;font-size: 14px;}
    .rowsedit input[type="range"]{width: 100%;margin: 0 auto;padding: 3px;box-sizing: border-box;background-color: #f2f2f2;border: 1px solid rgba(0, 0, 0, 0.2);font-size: 14px;}
    .rowsedit input:focus[type="range"]{width: 100%;margin: 0 auto;padding: 3px;box-shadow: 0 0 0 4px rgba(61, 61, 255, 0.412);background-color: white;font-size: 14px;}
    .rowsedit input:hover[type="range"]{width: 100%;margin: 0 auto;padding: 3px;background-color: white;font-size: 14px;}
    .rowsedit textarea{width: 100%;margin: 0 auto;padding: 0;background-color: #f2f2f2;border: 1px solid rgba(0, 0, 0, 0.2);font-size: 14px;}
    .rowsedit textarea:focus{width: 100%;margin: 0 auto;padding: 0;background-color: white;box-shadow: 0 0 0 4px rgba(61, 61, 255, 0.412);font-size: 14px;}
    .rowsedit textarea:hover{width: 100%;margin: 0 auto;padding: 0;background-color: white;font-size: 14px;}
    .rowsedit select{width: 100%;margin: 0 auto;padding: 5px 0;background-color: #fff;border: 1px solid rgba(0, 0, 0, 0.2);font-size: 12px;border-radius:2px;}
    .rowsedit select:focus{width: 100%;margin: 0 auto;padding: 5px 0;background-color: white;border: 1px solid rgba(0, 0, 0, 0.2);box-shadow: 0 0 0 4px rgba(61, 61, 255, 0.412);font-size: 12px;border-radius:2px;}
    .rowsedit select:hover{width: 100%;margin: 0 auto;padding: 5px 0;background-color: white;border: 1px solid rgba(0, 0, 0, 0.2);font-size: 12px;border-radius:2px;}
    #btn-submit{width: 100%;margin: 0;padding: 20px 0;display: block;}
    .submit{margin: 0;padding: 0;border: 1px solid rgba(0, 0, 0, 0.2);}
    .submit input[type="submit"]{width: 100%; border: none; cursor: pointer; margin: 0;padding: 5px; display: block;background-color: #1C304B;color: white;font-weight: 500;}
    #data-tab-1{position:absolute;visibility:hidden;top:0;height:0;overflow:hidden;}
    #data-tab-1.current{position:relative;visibility:visible;height:100%;overflow:hidden;}
    #data-tab-2{position:absolute;visibility:hidden;top:0;height:0;overflow:hidden;}
    #data-tab-2.current{position:relative;visibility:visible;height:100%;overflow:hidden;}
    #data-tab-3{position:absolute;visibility:hidden;top:0;height:0;overflow:hidden;}
    #data-tab-3.current{position:relative;visibility:visible;height:100%;overflow:hidden;}
    .tab{width: 90%;margin: 0;padding: 0 0 10px;position: relative;transition: .4s ease;}
    .tab.activated{width: 100%;margin: 0 auto;display: block; padding: 10px;position: fixed;top: 0;left: 0; z-index: 99999999999;background-color: #1C304B;}
    .tab.activated ul li.current{width: 25%;float: left;background-color: #ed7200;padding: 8px 10px;}
    .tab.activated ul li{width: 25%;float: left;padding: 8px 10px;color: white;}
    .tab ul{list-style: none;}
    .tab ul li{width: 25%;float: left;cursor: pointer;padding: 8px 10px;transition: .4s ease;}
    .tab ul li.current{width: 25%;float: left;background-color: #1C304B;color:white;padding: 8px 10px;}
    .tab ul li:hover{width: 25%;background-color: #193559;color: white;}
    .p-1{padding: 0 20px 20px !important;}

}


#bobayar{width: 77%;margin: 0 auto;padding: 0 1%;float: left;}
.dashcolor{color: white !important;font-size: 18px;font-weight: 600;background-color: #193559 !important;}
.dashsetingedit img{ display: block; margin-left: auto; margin-right: auto;}
#bokartu{width: 77%;margin: 0 auto;padding: 0 1%;float: left;}
.kartutitparent{width: 100%;padding: 20px 15px;margin: 0 auto; background-color: #193559;box-sizing: border-box;}
.kartutit{width: 100%;display: block;margin: 0 auto;padding: 0 0 10px;}
.kartutit h1{font-size: 18px;color: white;font-weight: 600;cursor: pointer;background-image: linear-gradient(90deg, white, white);background-size: 0% 3px;transition: all .4s ease-in-out;}
/* .kartutit h1:hover{font-size: 18px;color: white;font-weight: 600;cursor: pointer;background-image: linear-gradient(90deg, white, white);background-size: 50% 3px;} */
.kartutit h1::after{content: "";width: 150px;height: 3px;display: block; background-color: white;transition: width 0.4s ease;}
.kartutit h1:hover::after{content: "";width: 300px;height: 3px;display: block;visibility: visible; background-color: white;}

.kartubody{width: 100%;padding: 0;margin: 0 auto;display: block;}
.kartu-desc{width: 50%;padding: 0;margin: 0 auto;float: left;}
.kartudesc p{font-size: 15px;color: white;}

.kartu-buk-an{width: 50%;padding: 0;margin: 0 auto;float: left;}
.kartu-buk-an tbody td{height: 80px;}

.table-desc{margin: 0 auto;padding: 5px;background-color: white !important;}
.tr{display: block;width: 100%;margin: 0 auto;padding: 20px 0;}
.tr .td{width: 33%;margin: 0 auto;padding: 0;float: left;}
.tr .td:nth-child(2){width: 10%;margin: 0 auto;padding: 0;float: left;}
.tr .td:nth-child(3){width: 57%;margin: 0 auto;padding: 0;float: left;}


.detail-border{width: 80%;margin: 5% auto;float: none;padding:2% 5% 10% 5%;outline: solid black;}
.detail-box{width: 60%;margin: 3% auto;float: none;padding:2%;outline: solid black; box-sizing:border-box;}
.innerkartudesc{margin: 0 auto;padding: 0;}
.link-body{width: 100%; margin: 0 auto;padding: 0;margin: 15% auto; text-align: center;}
.printingpage{padding: 15px 20px;margin: 0 auto;background-color: #00bb16;border-radius: 3px;color: white;font-weight: 600;transition: all .2s ease;}
.printingpage:hover{padding: 18px 23px;margin: 0 auto;background-color: #008710;border-radius: 3px;color: white;font-weight: 600;}
#bgprint{width: 100%;margin: 0 auto;padding: 0;}
#boprint{width: 990px;margin: 0 auto;padding: 0;}
.detail-head{width: 100%;margin: 0 auto 30px;padding: 0;border-bottom: solid black;}
.headimg{width: 20%;margin: 37px auto;padding: 0;float: left;}
.headimg img{width: 100%;margin: 0;padding: 0;}
.headdesc{width: 73%;margin: 0;padding: 29px 0 29px 29px;float: right;}
.headdesc h1{font-weight: 700;}
#boxdetails{width:50%;margin:0 auto;padding:0;}
#boxsignature{margin:0 auto;padding:0;text-align:center;}
#bouserpage{width:76%;margin:0 auto;padding:20px;background:white;float:left;font-size:13px !important;border-radius:3px;box-sizing:border-box;}
@media screen and (max-width:990px) {
#bouserpage{width:98%;margin:0 auto;padding:10px !important;background:white;float:left;font-size:10px !important;border-radius:3px;}
#bobayar{width: 98%;margin: 0 auto;padding: 1%;float: left;}
.dashcolor{color: white !important;font-size: 13px;font-weight: 600;background-color: #193559 !important;}
.dashsetingedit img{ display: block; margin-left: auto; margin-right: auto;}
#bokartu{width: 98%;margin: 0 auto;padding: 1%;float: left;}
.kartutitparent{width: 100%;padding: 20px 15px;margin: 0 auto; background-color: #193559;box-sizing: border-box;}
.kartutit{width: 100%;display: block;margin: 0 auto;padding: 0 0 10px;}
.kartutit h1{font-size: 18px;color: white;text-decoration: none; font-weight: 600;cursor: pointer;background-image: linear-gradient(90deg, white, white);transition: all .4s ease;}
.kartutit h1:hover{font-size: 18px;color: white;text-decoration: none;font-weight: 600;cursor: pointer;background-image: linear-gradient(90deg, white, white);}

.kartubody{width: 100%;padding: 0;margin: 0 auto;display: block;}
.kartu-desc{width: 50%;padding: 0;margin: 0 auto;float: left;}
.kartudesc p{font-size: 15px;color: white;}

.kartu-buk-an{width: 100%;padding: 0;margin: 0 auto;float: left;}
.kartu-buk-an tbody td{height: 80px;}

.table-desc{margin: 0 auto;padding: 5px;background-color: white !important;}
.tr{display: block;width: 100%;margin: 0 auto;padding: 20px 0;}
.tr .td{width: 33%;margin: 0 auto;padding: 0;float: left;}
.tr .td:nth-child(2){width: 10%;margin: 0 auto;padding: 0;float: left;}
.tr .td:nth-child(3){width: 57%;margin: 0 auto;padding: 0;float: left;}


.detail-border{width: 80%;margin: 5% auto;float: none;padding:2% 5% 10% 5%;outline: solid black;}
.innerkartudesc{margin: 0 auto;padding: 0;}
.link-body{width: 100%; margin: 0 auto;padding: 0;margin: 15% auto; text-align: center;}
.printingpage{padding: 15px 20px;margin: 0 auto;background-color: #00bb16;border-radius: 3px;color: white;font-weight: 600;transition: all .2s ease;}
.printingpage:hover{padding: 18px 23px;margin: 0 auto;background-color: #008710;border-radius: 3px;color: white;font-weight: 600;}
#bgprint{width: 100%;margin: 0 auto;padding: 0;}
#boprint{width: 990px;margin: 0 auto;padding: 0;}
.detail-head{width: 100%;margin: 0 auto 30px;padding: 0;border-bottom: solid black;}
.headimg{width: 20%;margin: 0;padding: 0;float: left;}
.headimg img{width: 100%;margin: 0;padding: 0;}
.headdesc{width: 76%;margin: 0;padding: 29px 0 29px 29px;float: right;}
.headdesc h1{font-weight: 700;}
}
.w-80{width: 80%;margin: 0 auto;padding: 0;float: none;}
.kartululus{width: 100%;margin: 0 auto; padding: 20px;box-sizing: border-box;}
.tablelulus{width: 50%;margin: 0;padding: 10px 0;}
.trlulus{width: 100%;margin: 0;padding: 0;}
.tdlulus:first-child{width: 40%;float: left;margin: 0 auto;padding: 0;}
.tdlulus{width: 20%;float: left;margin: 0 auto;padding: 0;}
.tdlulus:last-child{width: 40%;float: left;margin: 0 auto;padding: 0;}

.lulusketerangan{margin: 0 auto;padding: 0;text-align: center;background-color: #00bb16;color: white;padding: 10px;box-sizing: border-box;}

.tablelulus_2{width: 50%; margin: 0;padding: 10px 0;}
.trlulus_2{width: 100%;margin: 0;padding: 0;}
.tdlulus_2:first-child{width: 40%;float: left;margin: 0 auto;padding: 0;}
.tdlulus_2{width: 20%;float: left;margin: 0 auto;padding: 0;}
.tdlulus_2:last-child{width: 40%;float: left;margin: 0 auto;padding: 0;} 
.btnlulus{width: 100%;margin: 0 auto;padding: 10px;box-sizing: border-box;outline: solid rgba(0, 0, 0, 0.2);}
.sbtnlulus{width: 100%;color: white;display: block;padding: 5px;text-align: center; background-color: #193559;box-sizing: border-box;}
.sbtnlulus:hover{width: 100%;color: white;display: block;padding: 5px;text-align: center; background-color: #102138;box-sizing: border-box;}
.lulusketerangan_not{margin: 0 auto;padding: 0;text-align: center;background-color: #a2220b;color: white;padding: 10px;box-sizing: border-box;}
.trs-nilai{margin: 0 auto; padding:0;display: block;}

/* FORM */
#gsettingform {width:100%;margin:0 auto;padding:0;}
#gsettingleft {width:49%;float:left;margin-right:1%;}
#gsettingrite {width:49%;float:left;margin-left:1%;}
#gsettinglefs {width:69%;float:left;margin-right:1%;}
#gsettingrits {width:29%;float:left;margin-left:1%;}
#gsettingtitle {margin:0 auto;padding:5px 10px;background:#ddd;color:#000;font-weight:400;}

#gsettingrows {width:auto;margin:0 auto;padding:5px 0;border-bottom:1px solid #ddd;font-size:normal;font-size:13px;font-family:'Roboto Condensed', sans-serif;}

#gsettinglabel {width:30%;float:left;padding:0 10px;color:#000;box-sizing:border-box;}
#gsettinginput {width:70%;float:right;padding:4px 7px;background:#f9f9f9;color:#000;border-radius:2px;border:1px solid #ddd;box-sizing:border-box;font-size:13px;font-family:'Roboto Condensed', sans-serif;transition:all 0.3s ease 0s;display:table-cell;}

#gsettingedit {float:left;width:70%;color:#000;}

#gsettingedit input {width:100%;margin-bottom:0px;color:#000;padding:6px 8px;border-radius:2px;border:1px solid #ddd;box-sizing:border-box;font-size:13px;font-family:'Roboto Condensed', sans-serif;transition:all 0.3s ease 0s;display:table-cell;}
#gsettingedit input:focus {color:#000;border:1px solid #000;}

#gsettingedit textarea {width:100%;margin-bottom:0px;color:#000;padding:5px 6px;border-radius:2px;border:1px solid #ddd;box-sizing:border-box;font-size:13px;font-family:'Roboto Condensed', sans-serif;transition:all 0.3s ease 0s;display:table-cell;}
#gsettingedit textarea:focus {color:#000;border:1px solid #000;}

#gsettingedit select {width:100%;margin-bottom:0px;color:#000;padding:5px 4px;border-radius:2px;border:1px solid #ddd;box-sizing:border-box;font-size:13px;font-family:'Roboto Condensed', sans-serif;transition:all 0.3s ease 0s;display:table-cell;}
#gsettingedit select:focus {color:#000;border:1px solid #000;}

#gsettingimage {width:70%;float:right;padding:4px 7px;background:#f9f9f9;color:#000;border-radius:2px;border:1px solid #ddd;box-sizing:border-box;font-size:13px;font-family:'Roboto Condensed', sans-serif;transition:all 0.3s ease 0s;display:table-cell;text-align:center;}
#gsettingimage img {width:100%;height:auto;margin:0 auto;padding:0;text-align:center;}
#gsettingimage span img {width:20px;height:20px;margin:0 auto;padding:0;text-align:center;}

#gsettingtable {width:100%;float:right;padding:4px 7px;background:#f9f9f9;color:#000;border-radius:2px;border:1px solid #ddd;box-sizing:border-box;font-size:13px;font-family:'Roboto Condensed', sans-serif;transition:all 0.3s ease 0s;display:table-cell;text-align:center;}
#gsettingtable img {width:100%;height:auto;margin:0 auto;padding:0;text-align:center;}
#gsettingtable span img {width:20px;height:20px;margin:0 auto;padding:0;text-align:center;}



#gsettingpilih {float:left;width:70%;color:#000;}
#gsettingpilih input {width:96%;margin-bottom:0px;color:#000;padding:10px;border-radius:2px;border:1px solid #ddd;box-sizing:border-box;font-size:13px;font-family:'Roboto Condensed', sans-serif;transition:all 0.3s ease 0s;display:table-cell;}
#gsettingpilih input:focus {border:1px solid #999;}

#gsettingint {float:left;width:70%;color:#000;}
#gsettingint input {width:30%;margin-bottom:0px;color:#000;padding:10px;border-radius:2px;border:1px solid #ddd;box-sizing:border-box;font-size:13px;font-family:'Roboto Condensed', sans-serif;transition:all 0.3s ease 0s;display:table-cell;text-align:right;}
#gsettingint input:focus {border:1px solid #999;}

#gsettingnum {float:left;width:70%;color:#000;}
#gsettingnum input {width:5%;margin-bottom:0px;color:#000;padding:10px;border-radius:2px;border:1px solid #ddd;box-sizing:border-box;font-size:13px;font-family:'Roboto Condensed', sans-serif;transition:all 0.3s ease 0s;display:table-cell;text-align:right;}
#gsettingnum input:focus {border:1px solid #999;}

input.gsettingtd {width:80%;margin-bottom:0px;color:#000;padding:10px;border-radius:2px;border:1px solid #ddd;box-sizing:border-box;font-size:13px;font-family:'Roboto Condensed', sans-serif;transition:all 0.3s ease 0s;display:table-cell;text-align:left;}
input.gsettingtd:focus {border:1px solid #999;}

input.gsettingtdint {width:40%;margin-bottom:0px;color:#000;padding:10px;border-radius:2px;border:1px solid #ddd;box-sizing:border-box;font-size:13px;font-family:'Roboto Condensed', sans-serif;transition:all 0.3s ease 0s;display:table-cell;text-align:center;}
input.gsettingtdint:focus {border:1px solid #999;}

input.gsettingtdnum {width:80%;margin-bottom:0px;color:#000;padding:10px;border-radius:2px;border:1px solid #ddd;box-sizing:border-box;font-size:13px;font-family:'Roboto Condensed', sans-serif;transition:all 0.3s ease 0s;display:table-cell;text-align:right;}
input.gsettingtdnum:focus {border:1px solid #999;}

select.gsettingtd {width:100%;margin-bottom:0px;color:#000;padding:10px;border-radius:2px;border:1px solid #ddd;box-sizing:border-box;font-size:13px;font-family:'Roboto Condensed', sans-serif;transition:all 0.3s ease 0s;display:table-cell;text-align:left;}
select.gsettingtd:focus {border:1px solid #999;}

#gsettingeditcheck {float:left;width:70%;color:#000;}
#gsettingeditcheck input {width:5%;margin:15px 0;padding:10px 1%;border-radius:2px;border:1px solid #ddd;box-sizing:border-box;font-size:normal;font-size:13px;font-family:'Roboto Condensed', sans-serif;color:#000;}

#gsettingicon {float:right;width:70%;color:#000;}
#gsettingicon img {width:50px;height:50px;padding:5px 6px;border-radius:2px;border:1px solid #ddd;box-sizing:border-box;font-size:13px;font-family:'Roboto Condensed', sans-serif;transition:all 0.3s ease 0s;display:inline;}

#gsettingeditimg {float:left;width:70%;color:#000;}
#gsettingeditimg img {width:200px;height:auto;}

#gsettingimagebox {width:18%;float:left;margin:0 auto 2px;padding:1%;background:#f9f9f9;}
.gsettingimageboxtop {width:100%;height:auto;overflow:hidden;}
.gsettingimageboxtop img {width:100%;height:auto;}
.gsettingimageboxbot {text-align:center;}

#gsettingradio {width:70%;float:left;padding:8px;color:#000;border-radius:2px;border:1px solid #ddd;box-sizing:border-box;font-size:13px;font-family:'Roboto Condensed', sans-serif;transition:all 0.3s ease 0s;display:table-cell;}
#gsettingradio input {width:1%;margin-bottom:0px;color:#000;padding:10px;border-radius:2px;border:1px solid #ddd;box-sizing:border-box;font-size:13px;font-family:'Roboto Condensed', sans-serif;transition:all 0.3s ease 0s;display:table-cell;}

#gsettingdate {float:left;width:70%;color:#000;}
#gsettingdate input {width:30%;margin-bottom:0px;color:#000;padding:10px;border-radius:2px;border:1px solid #ddd;box-sizing:border-box;font-size:13px;font-family:'Roboto Condensed', sans-serif;transition:all 0.3s ease 0s;display:table-cell;text-align:center;}
#gsettingdate input:focus {border:1px solid #999;}

#gsettingbutton {width:70%;float:left;color:#000;margin:0;padding:5px 6px;border-radius:2px;border:1px solid #ddd;box-sizing:border-box;font-size:13px;font-family:'Roboto Condensed', sans-serif;transition:all 0.3s ease 0s;display:table-cell;}
.uploadbutton {position:relative;overflow:hidden;display:inline;cursor:pointer;}
.button {border:none;color:#fff;background:#0759D9;padding:5px 10px;border-radius:2px;font-weight:normal;font-size:13px;font-family:'Roboto Condensed', sans-serif;}
.uploadbutton input[type=file] {position:absolute;left:0;top:0;opacity:0;}
#tomboltambah {margin:0;padding:0;text-align:right;}
#tombolsubmit {margin:10px auto;padding:5px 0;border-top:1px solid #000;}

/* BACK BUTTON */
.backbutton {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #666666), color-stop(1, #666666));
	background:-moz-linear-gradient(top, #666666 5%, #666666 100%);
	background:-webkit-linear-gradient(top, #666666 5%, #666666 100%);
	background:-o-linear-gradient(top, #666666 5%, #666666 100%);
	background:-ms-linear-gradient(top, #666666 5%, #666666 100%);
	background:linear-gradient(to bottom, #666666 5%, #666666 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#666666',GradientType=0);
	background-color:#666666;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
	border:0px solid #545454;
	display:inline-block;
	cursor:pointer;
	color:#fff!important;
	font-family:'Roboto Condensed', sans-serif;
	font-size:13px;
	padding:6px 24px;
	text-decoration:none;
}
.backbutton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #333333), color-stop(1, #333333));
	background:-moz-linear-gradient(top, #333333 5%, #333333 100%);
	background:-webkit-linear-gradient(top, #333333 5%, #333333 100%);
	background:-o-linear-gradient(top, #333333 5%, #333333 100%);
	background:-ms-linear-gradient(top, #333333 5%, #333333 100%);
	background:linear-gradient(to bottom, #333333 5%, #333333 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#333333',GradientType=0);
	background-color:#333333;
}
.backbutton:active {
	position:relative;
	top:1px;
}
/* SUBMIT BUTTON */
.submitbutton {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #000), color-stop(1, #000));
	background:-moz-linear-gradient(top, #000 5%, #000 100%);
	background:-webkit-linear-gradient(top, #000 5%, #000 100%);
	background:-o-linear-gradient(top, #000 5%, #000 100%);
	background:-ms-linear-gradient(top, #000 5%, #000 100%);
	background:linear-gradient(to bottom, #000 5%, #000 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#000', endColorstr='#000',GradientType=0);
	background-color:#000;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
	border:0px solid #545454;
	display:inline-block;
	cursor:pointer;
	color:#fff!important;
	font-family:'Roboto Condensed', sans-serif;
	font-size:13px;
	padding:6px 24px;
	text-decoration:none;
}
.submitbutton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #1B2832), color-stop(1, #1B2832));
	background:-moz-linear-gradient(top, #1B2832 5%, #1B2832 100%);
	background:-webkit-linear-gradient(top, #1B2832 5%, #1B2832 100%);
	background:-o-linear-gradient(top, #1B2832 5%, #1B2832 100%);
	background:-ms-linear-gradient(top, #1B2832 5%, #1B2832 100%);
	background:linear-gradient(to bottom, #1B2832 5%, #1B2832 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1B2832', endColorstr='#1B2832',GradientType=0);
	background-color:#1B2832;
}
.submitbutton:active {
	position:relative;
	top:1px;
}
/* ==================================================================================================== */

/* CANCEL BUTTON */
.cancelbutton {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #C00), color-stop(1, #C00));
	background:-moz-linear-gradient(top, #C00 5%, #C00 100%);
	background:-webkit-linear-gradient(top, #C00 5%, #C00 100%);
	background:-o-linear-gradient(top, #C00 5%, #C00 100%);
	background:-ms-linear-gradient(top, #C00 5%, #C00 100%);
	background:linear-gradient(to bottom, #C00 5%, #C00 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#C00', endColorstr='#C00',GradientType=0);
	background-color:#C00;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
	border:0px solid #545454;
	display:inline-block;
	cursor:pointer;
	color:#fff!important;
	font-family:'Roboto Condensed', sans-serif;
	font-size:13px;
	padding:6px 24px;
	text-decoration:none;
	float:right;
}
.cancelbutton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #A70000), color-stop(1, #A70000));
	background:-moz-linear-gradient(top, #A70000 5%, #A70000 100%);
	background:-webkit-linear-gradient(top, #A70000 5%, #A70000 100%);
	background:-o-linear-gradient(top, #A70000 5%, #A70000 100%);
	background:-ms-linear-gradient(top, #A70000 5%, #A70000 100%);
	background:linear-gradient(to bottom, #A70000 5%, #A70000 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#A70000', endColorstr='#A70000',GradientType=0);
	background-color:#A70000;
}
.cancelbutton:active {
	position:relative;
	top:1px;
}

.pilihRite{float:right;background-color:rgb(3, 187, 3);color:white;padding:2px 6px;border: none;cursor: pointer; transition: .3s;}
.pilihRite:hover{float:right;background-color:rgb(4, 155, 4);color:white;padding:2px 6px;border: none;cursor: pointer;}
button.pilihRite{float:right;background-color:rgb(3, 187, 3);color:white;padding:0px 6px;border: none;cursor: pointer; transition: .3s;}
button.pilihRite:hover{float:right;background-color:rgb(4, 155, 4);color:white;padding:0px 6px;border: none;cursor: pointer;}
.pilihbuttongreen{background-color:rgb(3, 187, 3);color:white !important;padding:5px 8px;margin: 0 2px 0 0; transition: .3s;}
.pilihbuttongreen:hover{background-color:rgb(4, 155, 4);color:white !important;padding:5px 8px;margin: 0 2px 0 0;}
.pilihbuttonred{background-color:rgb(172, 21, 1);color:white !important;padding:5px 8px; transition: .3s;margin: 0 2px 0 0;}
.pilihbuttonred:hover{background-color:rgb(139, 17, 1);color:white !important;padding:5px 8px; transition: .3s;margin: 0 2px 0 0;}
#example_wrapper{overflow-x: auto;}
td.td-flex{display: flex;justify-content: space-around;font-size: 12px !important;}