/* Normalize basic layout */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  
}

html, body {
  width: 100%;
  height: 100%;
  font-family: Arial, sans-serif;
  background-color: #f8f8f8;
  overflow-x: hidden;
  
}
	/*## LINK*/
a:link {
	color: #000066;
	text-decoration: none;
}
a:visited {
	color: #000066;
	text-decoration: none;
}
a:hover {
	color: #FF0000;
	text-decoration:none;
}
a:active {
	color: #000066;	
	text-decoration: none;
}

h1{
	font-size:18px;
	font-weight:bold;
	text-align:center;
}
img{
	border:none;
}
body{
	margin-left:0; 
	margin-top:0; 
	margin-right:0 ; 
	margin-bottom:0; 
 
	font-family:verdana,arial,sans-serif;
	font-size:12px; 
	color:#000000; 
	font-weight:normal;
}

input[type=button],input[type=submit]{
	color:#FFFFFF;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border:#CCCCCC 1px solid;
	cursor:pointer;
	display:block;
	font-size:14px;
	font-weight:bold;
	padding:5px;
	/* IE10 Consumer Preview */ 
	background-image: -ms-linear-gradient(bottom, #067eee 0%, #0099CC 100%);
	
	/* Mozilla Firefox */ 
	background-image: -moz-linear-gradient(bottom, #067eee 0%, #0099CC 100%);
	
	/* Opera */ 
	background-image: -o-linear-gradient(bottom, #067eee 0%, #0099CC 100%);
	
	/* Webkit (Safari/Chrome 10) */ 
	background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #067eee), color-stop(1, #0099CC));
	
	/* Webkit (Chrome 11+) */ 
	background-image: -webkit-linear-gradient(bottom, #067eee 0%, #0099CC 100%);
	
	/* W3C Markup, IE10 Release Preview */ 
	background-image: linear-gradient(to top, #067eee 0%, #0099CC 100%);
	display:inline;
}
input[type=text],input[type=password],select,textarea {
    border:2px solid #dadada;
    border-radius:2px;
    padding:5px; 
}

input[type=text]:focus,input[type=password]:focus,select:focus,textarea:focus { 
    outline:none;
    border-color:#9ecaed;
    box-shadow:0 0 10px #9ecaed;
}
/*TOMBOL UPLOAD*/
.upload_image_resize{
    display: flex;
    flex-direction: column; /* stack vertikal */
}
.upload_image_resize .preview{
	display: inline-flex;        
	justify-content: center; 
	align-items: center;     
	width:100%;
}
.upload_image_resize .uploader{
	margin-top:5px;
	display: inline-flex;        
	justify-content: center; 
	align-items: center;   
	width:100%;
	gap: 5px;
}
.upload_image_resize .uploader .btn-file,
.upload_image_resize .uploader .btn-clear {
	  appearance: none;
  -webkit-appearance: none;
  background-image: none;
  padding: 10px 18px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  color: #fff;
}

/* tombol upload (hijau) */
.upload_image_resize .uploader .btn-file {
  background-color: #4CAF50;!important;
}
.upload_image_resize .uploader .btn-file:hover {
  background-color: #45a049;!important;
}

/* tombol clear (merah) */
.upload_image_resize .uploader .btn-clear {
  background-color: #f44336;!important;
}
.upload_image_resize .uploader .btn-clear:hover {
  background-color: #d32f2f;!important;
}

 
/*## TABEL DEFAULT ##*/
tabel {
	border:none;
}
.table td{
	border:none;
}
.table th{
	border:none;
}
/*## NAVBAR ##*/
.navbar {
  width: 100vw;
  background-color: #007bff;
  padding: 5px 5px;
  color: white;
  position: relative;
  z-index: 999;
}
a.navbar-brand{
	color:white;
}

.navbar button{
	 border: white solid 1px;
}
.navbar button:focus,
.navbar button:active {
  outline: none;
  box-shadow: none;
}

.navbar .navbar-toggler-icon {
  filter: invert(100%); /* jika pakai ikon default Bootstrap */
}

.navbar-conntainer{
	padding-right:0px;
}

.navbar-brand{
 
	height: auto;
	width: auto;
	color: white !important;
	display:flex;
	text-align:right;
	vertical-align:center;
}
 
.navbar-logo{
	max-height:50px;
	height: auto;
	width: auto;
	max-width: 100%;
	display: block;
	object-fit: contain;
	margin-left:10px;
 
}
 
.nav-link{
	color:#000066 !important;
	font-size:20px;
	font-weight:bold;
	margin-bottom:5px;	
	text-decoration: none !important;
}
 
.nav-link:visited{
	color:#000066 !important;
}
.nav-link:hover{
	 color:#000066 !important;
}

.navbar-brand{
	text-decoration: none !important;
}

/*## TABEL MAIN*/
.tabel_utama{
 	padding:0px;
	width:1200px;
	border-collapse:collapse;
}
.tabel_utama td.header{
 	text-align:center;
	vertical-align:middle;
}
.tabel_utama td.content{
	background-repeat:repeat-y;
	background-position:center;
	vertical-align:top;
	text-align:center;
	padding-top:0px;
	padding-left:25px;
	padding-right:25px;
	padding-bottom:10px;
}
 .tabel_utama td.footer{
 	text-align:center;
	vertical-align:middle;
}

/*## TABEL MENU ATAS*/
.tabel_menu_atas{
	border:none;
	font-size:16px; 
	font-weight:bold;
	background-color:#666666;
	color:#000000; 
	height:30px;
	padding:10px;
	border-collapse:collapse;
}
.tabel_menu_atas td{
 	padding-left:20px;
	padding-right:20px;
}
.tabel_menu_atas a:link {
	color: #FFFFFF;
	text-decoration: none;
}
.tabel_menu_atas a:visited {
	color: #FFFFFF;
	text-decoration: none;
}
.tabel_menu_atas a:hover {
	color: #FFFF33;
}
 
 
/*## TABEL ERROR ##*/
.tabel_error{
	font-weight:normal;
	color: #000000;
	text-decoration:none;
	text-align:center;
	vertical-align:middle;
}

.tabel_error td.header{
	font-size:18px;
	font-weight:bold;
	color: #FF0000;
	height:50px;
}

.tabel_error td.mode{
	font-size:14px;
	font-weight:normal;
	color: #000099;
}
.tabel_error td.detail{
	font-size:12px;
	font-weight:normal;
	color: #000000;
}
.tabel_error td.back{
	font-size:12px;
	font-weight:bold;
	color: #000000;
	height:50px;
}
/*## EDITOR ## */
.tabel_editor{
	font-family:verdana,arial,sans-serif;
	font-size:12px;
	font-weight:normal;
	color:#000000;
	text-decoration:none;
	border-collapse:collapse;
	
}
.tabel_editor td.judul{	
	padding:20px;
	font-weight:bold;
	font-size:16px;
	text-align:center;
	vertical-align:middle;
}


.tabel_editor th{
	font-weight:bold; 
	font-size:14px;
	height:25px;
	text-align:left;
	vertical-align:top;
	padding-left:5px;
	padding-right:5px;
	padding-top:5px;
	padding-bottom:5px;
	width:200px;
}
.tabel_editor td{	
	text-align:left;
	vertical-align:top;
	padding-left:5px;
	padding-right:5px;
	padding-top:5px;
	padding-bottom:5px;
	
}
.tabel_editor td.duakolom{	
	padding:0px;
	text-align:left;
}
.tabel_subeditor{
	font-family:verdana,arial,sans-serif;
	font-size:12px;
	font-weight:normal;
	color:#000000;
	text-decoration:none;
	border-collapse:collapse;
	width:100%;
	
}

.tabel_subeditor th{
	font-weight:bold; 
	font-size:14px;
	height:25px;
	text-align:left;
	vertical-align:top;
	padding-left:5px;
	padding-right:5px;
	padding-top:5px;
	padding-bottom:5px;
	width:200px;
	
}
.tabel_subeditor td{	
	text-align:left;
	vertical-align:top;
	padding-left:5px;
	padding-right:5px;
	padding-top:5px;
	padding-bottom:5px;
	width:350px;
	
}
.genap{
	background-color:#F0F9FF;
}
.ganjil{
	background-color:#FFF;
}
/*## INFO ##*/
.tabel_info{
	font-family:verdana,arial,sans-serif;
	font-size:12px;
	font-weight:normal;
	color:#000000;
	text-decoration:none;
	border-collapse:collapse;
}
.tabel_info td{	
	text-align:left;
	vertical-align:top;
	border:1px solid black;
	padding-left:5px;
	padding-right:5px;
}
.tabel_info th{
	font-weight:bold;
	width:200px;
	text-align:left;
	vertical-align:top;
	border:1px solid black;
	padding-left:5px;
	padding-right:5px
}
 
/*## TABEL CARI ##*/
.tabel_cari{
	font-family:verdana,arial,sans-serif;
	font-size:12px;
	font-weight:normal;
	color:#000000;
	text-decoration:none;
	border-collapse:collapse;
}
.tabel_cari td,th{
 	border:none;
	text-align:left;
	padding-left:2px;
	padding-right:2px;
	vertical-align:middle;
}

 
 
/*## TABEL LIST##*/
.tabel_list{
	font-family:verdana,arial,sans-serif;
	font-size:12px;
	font-weight:normal;
	color:#000000;
	text-decoration:none;
	border-collapse:collapse;
}
 
.tabel_list th{
	background-color:#104692;
	text-align:center;
	color:#FFFFFF;
	font-weight:bold;
	border:1px solid black;
	vertical-align:middle;
	padding-left:2px;
	padding-right:2px;
}
.tabel_list td{ 
	color:#000000;
	font-weight:normal;
	border:1px solid black;
	vertical-align:top;	
	padding-left:2px;
	padding-right:2px;
}
.tabel_list td.menu{ 
	padding-left:0px;
	padding-right:0px;
}
.tabel_list td.menu img{ 
	border:none;
}
.tabel_list tr.genap{
 	background-color:#FFFFFF;
}
.tabel_list tr.ganjil{
 	background-color:#F0F9FF;
}
.tabel_list tr.kosong{
 	background-color:#FFFFFF;
	color:#FF0000;
}


/* HALAMAN */
div.halaman{
	display:block;
	height:20px;
	font-weight:bold;
	width:100%;
	text-align:right;
	font-size:10px;
}
div.halaman_normal{
	padding:5px;
	background-color:#999999;
	color:#000000;
	display:inline;
	font-weight:bold;
}
div.halaman_link{
	padding:5px;
	background-color:#0099FF;
	color:#FFFFFF;
	display:inline;
	font-weight:bold;
}
div.halaman_link a:link,
div.halaman_link a:visited{
	color:#FFFFFF;;
} 
div.halaman_link a:hover{
	color:#FFFF00;;
}
/*## LAIN-LAIN ##*/
.error{
	font-size:10px;
	font-weight:normal;
	color:#FF0000;
}
.petunjuk{
	font-size:10px;
	font-weight:normal;
	color:#999999;
}
.password_success{
	display:block;
	height:300px;
	vertical-align:middle;
}
.info{
	padding:5px;
	color:#3300FF;
	background-color:#FFFFCC;
	text-align:left;
}
input.tombol_edit{ 
	width:16px;
	height:16px;	
}
input.image{
    border:none;
    border-radius:0px;
	background-repeat:no-repeat;
}