@charset "utf-8";
/* CSS Document */

body {
	overflow-x: hidden;
	background:#f9f9f9;
	font-family:Arial;
	font-size:12px;
	color:#333;
	margin:0;
	padding:0;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, p, blockquote, form, fieldset, input, textarea, th, td {  margin:0; padding:0; }
h1 { font-size:36px; font-weight:normal;}
h2 { font-size:28px; font-weight:normal;}
h3 { font-size:24px; font-weight:normal;}
h4 { font-size:18px; font-weight:normal;}
h5 { font-size:12px; font-weight:normal;}
h6 { font-size:11px; font-weight:normal; color:grey; }
h7 { font-size:10px; font-weight:normal;}

/* Css Beranda */
.kotak{
	box-shadow: 0 1px 6px 0 rgba(49, 53, 59, 0.12);
	background-color:#fff;
	padding: 16px 24px 24px;
	margin-bottom: 32px;
	border-radius: 12px;
	width:100%;
}
@media only screen and (max-width: 600px) {
		.kotak{
			padding: 0px !important;
		}
		.button1{
			margin: 10px;
		}
	}
.button1{
	color: #fff;
	background-color: #007bff;
	border-color: #007bff;
	display: inline-block;
	font-weight: 400;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	border: 1px solid transparent;
	padding: .375rem .75rem;
	font-size: 1rem;
	line-height: 1.5;
	border-radius: .25rem;
	transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
/* FORM */
input { 
	font-family:Arial, Helvetica, sans-serif; 
	font-size:12px;
  padding: 10px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #e1e1e1 !important;
  box-sizing: border-box;
} 
input[type=file] { 
	font-family:Arial, Helvetica, sans-serif; 
	font-size:12px; 
	padding:8px; 
	color:#555;
	
	border:1px solid #cecece;
} 
select { 
	display: flex;
    /* -webkit-box-align: center; */
    align-items: center;
    padding: 5px 8px 7px 15px;
    cursor: pointer;
    border: 1px solid rgb(229, 231, 233);
    user-select: none;
    transition: border-radius 280ms ease 0s;
    line-height: 40px;
    background-color: rgb(255, 255, 255);
    pointer-events: all;
	text-align: left;
	
	/* border:1px solid #e1e1e1; */
}
table{
	width: 100% !important;
}
option {
	font-family:Arial, Helvetica, sans-serif; 
	font-size:12px;
	padding:1px 5px; 
	color:#555;
}
textarea { 
	font-family: Arial, Helvetica, sans-serif; 
	font-size:12px;
	padding:8px; 
	color:#555;
	-moz-box-shadow:inset 0 1px 3px rgba(0,0,0,0.1);
	-webkit-box-shadow:inset 0 1px 3px rgba(0,0,0,0.1);
	box-shadow:inset 0 1px 3px rgba(0,0,0,0.1);
	border:1px solid #cecece;
}
a {
	color:#3b86c2;
	text-decoration:none;
}
.batas {
	margin:auto;
	width:980px;

}

#head {
	padding:10px 0;
	display:table;
	width:100%;
}
	#logo {
		height: 70px; /* Adjust the height as needed */
		background: url("../images/logo_sd.png") no-repeat;
		background-size: contain; /* This will fit the image within the div */
		float: left;
		width: 50%;
	}
	#identitas {
		float:right;
		height:50px;
		width:50%;
	}
	#nav {
		width:100%;
		background:#3b86c2;
		margin: 0;
		padding: 0px;
	}
	
	.ddsmoothmenu{
		position: relative;
		margin: 0px;
		padding: 0px 0px 0px 0px;
		display:block;
		margin:auto;
		text-align:left;
		width:100%;
	}
	.bgdropdown{
		position: relative;
		margin: 0px;
		padding: 0px 0px 0px 0px;
		background:#28186e ;
		color:#666;
		display:block;
		text-align:left;
	}
	
	.ddsmoothmenu ul{
		z-index:100;
		margin: 0;
		text-align:left;
		text-transform: capitalize;
		font-size:14px;
		color:#fff;
		padding:0 0;
		display:table;
	}
	
	.ddsmoothmenu ul li{
		position: relative;
		display: inline;
		float: left;
		text-align:left;
		list-style-type: none;
		border-right:1px solid rgba(255,255,255,0.2);
		cursor:pointer;
	}
	.ddsmoothmenu #ada li{
	}
	
	.ddsmoothmenu ul li a{
		display: block;
		padding:14px 12px;
		font-size:12px;
		color:#fff;
		text-decoration: none;
		border:1px solid rgba(0,0,0,0.0);
	}
	* html .ddsmoothmenu ul li a{ 
		display: inline-block;
	}
	
	.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{
	}
	
	.ddsmoothmenu ul li a.selected{ 
		color:#fff;
		background:#28186e;
	}
	
	.ddsmoothmenu ul li a:hover{
		background:#28186e;
		color:#fff;
	}
		
	.ddsmoothmenu ul li ul{
		position: absolute;
		left: 0;
		display: none; 
		visibility: hidden;
		padding:0;
		margin:0;
		color:#fff;
	}
	
	.ddsmoothmenu ul li ul li{
		display: list-item;
		float: none;
		color:#fff;
	}
	
	.ddsmoothmenu ul li ul li ul{
		padding:0;
		margin:0;
		top: 0;
	}
	
	.ddsmoothmenu ul li ul li a{
		font-size:12px;
		width: 200px; /*width of sub menus*/
		margin: 0;
		padding:6.5px 10px;
		border-bottom:1px solid rgba(0,0,0,0.1);
		color:#fff;
	}
	.ddsmoothmenu ul li ul li a:hover{
		width: 200px; /*width of sub menus*/
		padding:6.5px 10px;
		background:rgba(0,0,0,0.1);
	}
	
	* html .ddsmoothmenu{height: 1%;} 
	
		

#loading {
	text-align:center;
	padding:100px;

}
#mainbar {
	display:table;
	margin-top:20px;
	
}
#mainbar h3 {
	font-size:20px;
	font-weight:bold;
	padding:10px 0;
	color:#333;

}

#halfbar {
	float:left;
	width:48%;
	margin:1%;
}
#halfbar h3{
	font-size:24px;
	padding:5px 0;
	border-bottom:1px solid #EAEAEA;
}

#footer {
	border-top:1px solid #EAEAEA;
	background:#f5f5f5;
	font-size:12px;
	padding:10px;
	text-align:right;
	bottom:0;
	position:fixed;
	width:100%;

}


ul.tabs { 
	list-style:none; 
	margin:0 !important; 
	padding:0;	
	border-bottom:1px solid #EAEAEA;	
	height:31px;
	display:table;
	width:100%;
}

ul.tabs li { 
	float:left;	 
	text-indent:0;
	padding:0;
	margin:0 !important;
	list-style-image:none !important; 
}

ul.tabs a { 
	position: relative;
    display: inline-block;
    text-decoration: none;
    padding: 12px;
    text-transform: uppercase;
    font-size: 14px;
    color: #424f5a;
    text-align: center;
}

ul.tabs a:active {
	outline:none;		
}

ul.tabs a:hover {
	color:#333;
	text-decoration:underline;
}

ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
	cursor:default !important; 
	color:#000 !important;
	border-top:1px solid #EAEAEA;
	border-left:1px solid #EAEAEA;
	border-right:1px solid #EAEAEA;
	border-bottom:1px solid #f9f9f9;
}


ul.tabs a.s 			{ background-position: -553px 0; width:81px; }
ul.tabs a.s:hover 	{ background-position: -553px -31px; }
ul.tabs a.s.current  { background-position: -553px -62px; }

ul.tabs a.l 			{ background-position: -248px -0px; width:174px; }
ul.tabs a.l:hover 	{ background-position: -248px -31px; }
ul.tabs a.l.current  { background-position: -248px -62px; }

ul.tabs a.xl 			{ background-position: 0 -0px; width:248px; }
ul.tabs a.xl:hover 	{ background-position: 0 -31px; }
ul.tabs a.xl.current { background-position: 0 -62px; }
div.panes div.pane {
	display:none;		
}
div.panes div {
	display:none;		
	padding:15px 10px;
	border-top:0;
	height:100px;
	font-size:14px;
}

/* INFORMASI */
ul#informasi {
	display:table;
	width:100%;
}

ul#informasi li {
	list-style:none;
	padding:10px;
	border-bottom:1px solid #EAEAEA;
	cursor:pointer;
}
ul#informasi li:hover {
	color :#037985;
}


.tinynav { display: none }

.box {
	background:#fafafa;
	-moz-box-shadow:0 1px 8px rgba(0,0,0,0.1);
	-webkit-box-shadow:0 1px 8px rgba(0,0,0,0.1);
	box-shadow:0 1px 8px rgba(0,0,0,0.1);
	display:table;
	padding:25px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	display:table; 
	margin:100px auto;
	font-size:12px;
}
/* NOTIFICATION */
#notify {
	padding:5px;
	font-weight: bold;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	color: #444;
	margin:5px 0;
}
.valid {
	background:#e0ffe4;
	border:1px solid #55e666;
	text-align:left;
	font-size: 13px;
}
.error {
	background:#ffe0e1;
	border:1px solid #e65555;
	text-align:center;
	font-size: 13px;
}
.warning {
	background:#FFFFE0;
	border:1px solid #e6db55;
	text-align:left;
	font-size: 13px;
}

/* TOMBOL */
.tombolmenu{
	display:table;
	padding:5px 0;
	font-weight:normal;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	color: #444;
}
.tombolmenu #list {
	float:left;
	padding:5px;
	margin:0 0px;
	width:30px;
	font-size:10px;
	cursor:pointer;
}
.tombolmenu #list:hover {
	background:rgba(10,10,10,0.1);
}

.tombol_login {
	text-align:center;
	padding:7px 20px;
	margin:5px 0;
	cursor:pointer;
	border:none;
	background: #025183;
	color:#FAFAFA;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
}
.tombol_simpan {
	text-align:center;
	padding:7px 20px;
	margin:5px 0;
	cursor:pointer;
	border:none;
	background: #3b86c2;
	color:#FAFAFA;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
}
.tombol_reset {
	text-align:center;
	padding:7px 20px;
	margin:5px 0;
	cursor:pointer;
	border:none;
	background:#FAFAFA;
	color:#333;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
}
/* TABEL */
h3#judul_menu {
	padding:7px 0;
	color:#555;
	border-bottom:1px solid #EAEAEA;
	text-transform:uppercase;
	font-weight:bold;
	font-size:16px;
}
#tabelsys {
	font-weight:normal;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	color: #444;
	background:#FAFAFA;
	border-left:1px solid #F0F0F0;
	border-bottom:1px solid #F0F0F0;
	width:100%;
}
.tabelhead {
	height:35px;
	text-transform:uppercase;
	background:#3b86c2;
	color:#FAFAFA;
}
.tabelisi tr{
	height:30px;
}
.tabelisi tr:hover {
	background:#EAEAEA;
}

#tabelsys .tabelbor {
	border-right:1px solid #EAEAEA;
	padding:5px;
}
#tabelsys a {
	cursor:pointer;

}
th.header { 
    cursor: pointer; 
    font-weight: bold; 
    padding-left: 20px; 
    margin-left: 5px; 
    background: url(../images/arrow.png) no-repeat center left; 
} 
th.headerSortUp { 
    background: url(../images/up.png) #555 no-repeat center left; 
}
th.headerSortDown { 
    background: url(../images/down.png) #555 no-repeat center left; 
}

#tabeldetail td {
	border-bottom:1px dotted #EAEAEA;
	padding:8px 0;
	height:15px;
}


#tabelform tr {	height:40px; }
.even {	background:#FDFDFD; }

.odd {	background:#F5F5F5; }

/* PAGING */
#paging {
	padding:10px;
	text-align:right;
	float:right;
	cursor:pointer;
}
.tombol_paging { float:left; margin:0 4px; color:#333; }
.tombol_paging a { display:block; padding:5px 8px; color:#333; }
.tombol_paging a:hover { padding:5px 8px; background:#555; color:#FAFAFA; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; }

#visited { padding:5px 8px; background:#555; color:#FAFAFA; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; }

#tnav{ -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; background: #25668f; color:#FFF; margin:0 4px; float:left; 	cursor:pointer; }
#tnav a{ padding:5px 8px; display:block; color:#FFF; }
#tnav a:hover { -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; padding:5px 8px; background:#555; color:#FFF; }


.check {
	background:url(../images/check.png) no-repeat center;
	height:30px;
	width:30px;
}
.uncheck {
	background:url(../images/uncheck.png) no-repeat center;
	height:30px;
	width:30px;
}

@media screen and (max-width: 730px) {
	#notify{
		margin: 20px;
	}
	#identitas{
		width: 100%;
	}
	#logo{
		width: 80%;
		background-repeat: no-repeat !important;
    background-size: cover !important;
	background-position: center center !important;
	}

	.dataTables_wrapper{
		width: 360px;
		overflow-x: auto;
	}
	input{
		margin: 0;
		width: 100% !important;
	}
	#mainbar{
		padding: 0px 10px 0 0px;
	}
	.batas {
		margin:auto;
		max-width:100%;
		width: 100%;
	
	}
	.tinynav { display: compact }
	/*.ddsmoothmenu{ display: none }*/
}