* {box-sizing:border-box;}
@media print {
  body * {visibility:hidden;}
  #printarea, #printarea * {
    visibility:visible;
	-webkit-print-color-adjust:exact;
	margin:0;
  }
  #ikut_print {display:block;}
  #tidak_print, #tidak_print *, .tidak_print , .tidak_print * {display:none;}
  .box_batas {width:100%;}
  #printarea {
	width:100%;
    position:absolute;
    left:0;
    top:0;
  }
}

/*SCROLLBAR*/
::-webkit-scrollbar {width:7px;height:7px;}
::-webkit-scrollbar-track {background-color:#EEE;}
::-webkit-scrollbar-thumb {background-color:#008040;}
::-webkit-scrollbar-thumb:window-inactive {background-color:#008040;}
::-webkit-scrollbar-thumb:hover {background-color:#333;}
#ikut_print {display:none;}
/*font-family:'TISA',Helvetica,sans-serif;*/
a {color:#009933;text-decoration:none;}
a:hover {color:#33de6c;text-decoration:none;}
body {
	font-family:'Rajdhani', sans-serif;
	font-size:15px;
	color:#3d4051;
	margin-top:0;
	margin-bottom:10px;
	background-color:#ebf0f4;
}

.tab_menu {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
	color: #F8F8F8;
    font-size: 9pt;
    border-bottom: 3px solid #008040;
    margin-bottom:7px;
	display: flex;
	justify-content: space-around;
}
.tab_menu a {
    width:50%;
    background-color: #f8f8f8;
    color: #008040;
	font-weight: bold;
    padding: 15px;
}
.tab_menu>.aktif {
    width:50%;
    background-color: #008040;
    color: #ffffff;
	font-weight: bold;
    padding: 15px;
}
.header {padding-bottom:50px;}

.header .menu_anteng {
    z-index:1000;
    color:#FFFFFF;
	height:50px;
	width:101%;
	padding-top:6px;
	position:fixed;
	background-color:#008040;
	margin-top:-11px;
	margin-left:-10px;
	box-shadow:-3px 1px 3px #666666;
}

.isi {
    margin-bottom:50px;
	padding-left:auto;
	padding-right:auto;
}

#fix_bawah {
    z-index:1;
    background-color:#454545;
    position:fixed;
    bottom:0;
    width:100%;
    margin-left:-8px;
    margin-top:50px;
    text-align:center;
	color:#F8F8F8;
    font-size:9pt;
	display:flex;
	justify-content:space-around;
}

#fix_bawah a {
    color:#F8F8F8;
	font-weight:bold;
    padding:15px;
    padding-top:20px;
}

#fix_bawah a:active, #fix_bawah a:hover {
    background-color:#333;
}

.menu_alat {
	width: 100%;
	right: 20px;
	top: 10px;
	text-align: right;
	box-sizing: border-box;
	position: fixed;
}
.menu_alat .item {
	float: right!important;
	margin-left: 10px;
	display: inline-block;
}
.menu_alat .item a {
	font-size: small;
	padding: 8px;
	border-radius: 3px; 
	color: #fff; 
	font-weight: bold;
	border: none;
	cursor: pointer;
	background: #006F37;
	text-decoration: none;
}
.menu_alat img {
	float: right;
	margin-left: 10px;
}
	
/*BREADCRUMB*/
ul.breadcrumb {
  padding:10px 16px;
  list-style:none;
  background-color:#ccd4de;
}

ul.breadcrumb li {
  display:inline;
  font-size:17px;
}

ul.breadcrumb li+li:before {
  padding:8px;
  color:black;
  content:"/\00a0";
}

ul.breadcrumb li a {
  color:#0275d8;
  text-decoration:none;
}

ul.breadcrumb li a:hover {
  color:#01447e;
  text-decoration:underline;
}

/*COLOR*/
.c_hitam {color: #434343 !important;}
.c_merah {color: #fa465b !important;}
.c_biru {color: #0c81e8 !important;}
.c_putih {color: #ffffff !important;}
.c_abu {color: #eeeeee !important;}
.c_gelap {color: #868686 !important;}
.c_hijau {color: #006F37 !important;}
.c_kuning {color: #fcf2c2 !important;}
.c_orange {color: #eb6e2a !important;}

/*BACKGROUND*/
.bg_hitam {background-color: #434343 !important;color:#f8f8f8;}
.bg_merah {background-color: #fa465b !important;}
.bg_biru {background-color: #0c81e8 !important;}
.bg_putih {background-color: #ffffff !important;}
.bg_abu {background-color: #eeeeee !important;}
.bg_gelap {background-color: #868686 !important;}
.bg_hijau {background-color: #006F37 !important;}
.bg_kuning {background-color: #fcf2c2 !important;}

/*BORDER*/
.bor_hitam {border:thin solid #434343 !important;}
.bor_merah {border:thin solid #fa465b !important;}
.bor_biru {border:thin solid #0c81e8 !important;}
.bor_putih {border:thin solid #ffffff !important;}
.bor_abu {border:thin solid #eeeeee !important;}
.bor_gelap {border:thin solid #868686 !important;}
.bor_hijau {border:thin solid #006F37 !important;}
.bor_kuning {border:thin solid #fcf2c2 !important;}

.bor_hitamG {border:thin solid #292929 !important;}
.bor_merahG {border:thin solid #fa465b !important;}
.bor_biruG {border:thin solid #0c81e8 !important;}
.bor_putihG {border:thin solid #ffffff !important;}
.bor_abuG {border:thin solid #eeeeee !important;}
.bor_gelapG {border:thin solid #868686 !important;}
.bor_hijauG {border:thin solid #006F37 !important;}
.bor_kuningG {border:thin solid #fcf2c2 !important;}

/*TOMBOL*/

.grup_btn .btn {
    margin:5px;
    padding:10px; 
    border-radius:3px; 
    font-weight:bold;
	cursor:pointer;
	background-color:#DDD;
	border:thin solid #DDD;
	color:#111;
	display: inline-block;
}
.grup_btn .aktif {
    margin:5px;
    padding:10px; 
    border-radius:3px; 
    font-weight:bold;
	cursor:pointer;
    background-color:#006F37;
	border:thin solid #006F37;
    color:#fff; 
}
.btn {
    margin:5px;
    padding:10px; 
    border-radius:3px; 
    color:#fff; 
    font-weight:bold;
	cursor:pointer;
    background-color:#006F37;
	border:thin solid #006F37;
}
.btn_hitam{
    background-color:#434343;
	border:thin solid #434343;
}
.btn_merah{
    background-color:#fa465b;
	border:thin solid #fa465b;
}
.btn_biru {
    background-color:#0c81e8;
	border:thin solid #0c81e8;
}
.btn_putih {
	background-color:#fff;
	border:thin solid #fff;
	color:#111;
}
.btn_abu {
	background-color:#DDD;
	border:thin solid #DDD;
	color:#111;
}
.btn_kuning{
    background-color:#f7df63;
	border:thin solid #f7df63;
	color:#917703;
}
.btn_p:hover {
	background-color:#CCC;
	border-color:#ccc;
}

span.btn {display: inline-block;}

#bt_print {
    top:50px;
    right:85px;
    position:fixed;
    padding:5px;
    background-color:#DDD;
    border-radius:3px;
	cursor:pointer;
}
img#bt_print {
	width:28px;
	height:28px;
}

.tab_menu {
    width: 99%;
    text-align: center;
	color: #F8F8F8;
    font-size: 9pt;
    border-bottom: 3px solid #008040;
    margin-bottom:7px;
	display: flex;
	justify-content: space-around;
}

.tab_menu div {
    width:50%;
    background-color: #f8f8f8;
    color: #008040;
	font-weight: bold;
    padding: 15px;
}
.tab_menu>.aktif {
    width:50%;
    background-color: #008040;
    color: #ffffff;
	font-weight: bold;
    padding: 15px;
}

/*PADDING*/
.p0 {padding: 0;}
.p3 {padding: 3px;}
.p5 {padding:5px;}
.p10 {padding:10px;}
.p15 {padding:15px;}
.p20 {padding:20px;}
.p30 {padding:30px;}
.pha {padding-left:auto;padding-right:auto;}
.ph0 {padding-left:0;padding-right:0;}
.ph5 {padding-left:5px;padding-right:5px;}
.ph10 {padding-left:10px;padding-right:10px;}
.ph15 {padding-left:15px;padding-right:15px;}
.ph20 {padding-left:20px;padding-right:20px;}
.ph30 {padding-left:30px;padding-right:30px;}
.pv0 {padding-top:0;padding-bottom:0;}
.pv5 {padding-top:5px;padding-bottom:5px;}
.pv10 {padding-top:10px;padding-bottom:10px;}
.pv15 {padding-top:15px;padding-bottom:15px;}
.pv20 {padding-top:20px;padding-bottom:20px;}
.pv30 {padding-top:30px;padding-bottom:30px;}

/*MARGIN*/
.m0 {margin:0;}
.m5 {margin:5px;}
.m10 {margin:10px;}
.m15 {margin:15px;}
.m20 {margin:20px;}
.m30 {margin:30px;}
.mha {margin-left:auto;margin-right:auto;}
.mh0 {margin-left:0;margin-right:0;}
.mh5 {margin-left:5px;margin-right:5px;}
.mh10 {margin-left:10px;margin-right:10px;}
.mh15 {margin-left:15px;margin-right:15px;}
.mh20 {margin-left:20px;margin-right:20px;}
.mh30 {margin-left:30px;margin-right:30px;}
.mv0 {margin-top:0;margin-bottom:0;}
.mv5 {margin-top:5px;margin-bottom:5px;}
.mv10 {margin-top:10px;margin-bottom:10px;}
.mv15 {margin-top:15px;margin-bottom:15px;}
.mv20 {margin-top:20px;margin-bottom:20px;}
.mv30 {margin-top:30px;margin-bottom:30px;}

/*POSISI*/
.p_a {position:absolute;}
.p_f {position:fixed;}
.p_r {position:relative;}
.p_t {left:50%;top:50%;transform: translate(-50%,-50%);}
.l0 {left:0;}
.r0 {right:0;}
.t0 {top:0;}
.b0 {bottom:0;}
.full_layar {top:0;right:0;bottom:0;left:0;}

/*FLOAT*/
.float_l {float:left;}
.float_r {float:right;}

/*DISPLAY*/
.d_i {display:inline;}
.d_b {display:block;}
.d_ib {display:inline-block;}
.d_n {display:none;}
.d_f {display:flex;justify-content:space-around;}
.flex_s {justify-content:flex-start;}
.flex_e {justify-content:flex-end;}
.flex_c {justify-content:center;}
.flex_a {justify-content:space-around;}
.flex_b {justify-content:space-between;}
.flex_ev {justify-content:space-evenly;}

.t_tengah {text-align: center!important;}
.t_kiri {text-align: left!important;}
.t_kanan {text-align: right!important;}
.t_justify {text-align: justify!important;}

.full {width:100%;}
.lebar90 {width:90%;}
.lebar80 {width:80%;}
.lebar50 {width:50%;}

.spasi {clear:both;height:10px;}

/*FONT*/
.f_size_s {font-size: small;}
.f_size_l {font-size: large;}
.f_size_xl {font-size: x-large;}
.f_bold {font-weight: bold;}
.t_d_n {text-decoration: none;}
.t_shadow {text-shadow: 2px 2px #ccc;}

/*TRANSFORM*/
.trans_al {transform: translate(-50%,-50%);left:50%;top:50%;}
.trans_alh {transform: translateX(-50%);left:50%;}
.trans_alv {transform: translateY(-50%);top:50%;}

/*TABEL*/
table.klasik {border-collapse:collapse;margin-left: auto;margin-right: auto;}
tr:nth-child(even) {background-color: #f2f2f2;}
.klasik td {padding:5px;border:thin solid #e0e0e0;}
.klasik th {padding:5px;}

table.klasik thead tr,table.klasik tfoot{
    background-color:#454545;
    color:#f8f8f8;
}

/*FORM*/
.teks,.input_box,.tCari,.textar {
	border-radius:3px;
	padding:5px;
	color:#666666;
	border:1px solid #CCCCCC;
	margin-bottom:5px;
}
.teks {
	height:35px;
}
.textar {
font-size:14pt;
}
.tCari {
width:15px;
}
.input_box {
margin-right:5px;
	height:37px;
}
.teks:hover,.teks:focus,.input_box:hover,.input_box:focus,.teks_icon:focus,.teks_icon:hover,textar:hover,.textar:focus {
	background-color:#EEEEEE;
	color:#008040;
	border:solid thin #008040;
}

.teks_icon{
	width:100%;
	border-radius:3px;
	padding:10px;
height:35px;
	padding-left:40px;
	color:#666666;
	border:1px solid #CCCCCC;
	margin-bottom:-10px;
}

.t_icon {
	position:absolute;
	margin-left:40px;
	margin:2px;
	border-right:1px solid #CCCCCC;
	width:32px;
}

/* Customize the label (the container) */
.wadahcb {
  display:block;
  position:relative;
  padding-left:35px;
  margin-bottom:12px;
  cursor:pointer;
  font-size:22px;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}

/* Hide the browser's default checkbox */
.wadahcb input {
  position:absolute;
  opacity:0;
  cursor:pointer;
  height:0;
  width:0;
}

/* Create a custom checkbox */
.checkmark {
  position:absolute;
  top:0;
  left:0;
  height:25px;
  width:25px;
  background-color:#eee;
}

/* On mouse-over, add a grey background color */
.wadahcb:hover input ~ .checkmark {
  background-color:#ccc;
}

/* When the checkbox is checked, add a blue background */
.wadahcb input:checked ~ .checkmark {
  background-color:#2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content:"";
  position:absolute;
  display:none;
}

/* Show the checkmark when checked */
.wadahcb input:checked ~ .checkmark:after {
  display:block;
}

/* Style the checkmark/indicator */
.wadahcb .checkmark:after {
  left:9px;
  top:5px;
  width:5px;
  height:10px;
  border:solid white;
  border-width:0 3px 3px 0;
  -webkit-transform:rotate(45deg);
  -ms-transform:rotate(45deg);
  transform:rotate(45deg);
}

#show_pass {
	position:fixed;
	Float:right;
	margin:4px;
	width:32px;
}

.caption {
	background-color:#454545;
	color:#FFFFFF;
	padding:10px;
	margin-bottom:10px;
	-webkit-print-color-adjust:exact;
}

.judul {
	background-color:#008a45;
	border-radius:5px;
	color:#FFFFFF;
	text-transform:uppercase;
	font-weight:bold;
	height:35px;
	text-align:center;
	-webkit-print-color-adjust:exact;
}

.l_kel {
	position:fixed;
	width:150px;
	height:150px;
	border-radius:50%;
	bottom:50px;
	left:0;
	margin-bottom:-75px;
	margin-left:-75px;
}

.l_kel:hover {
	width:auto;
	height:auto;
	box-shadow:3px 3px #666666;
	border-radius:3px;
	margin-bottom:0px;
	margin-left:-0px;
	cursor:pointer;
}

.top {
	position:fixed;
	right:10px;
	bottom:50px;
	z-index:3;
}

.top:hover {
	cursor:pointer;
}

.add {
	position:fixed;
	right:10px;
	bottom:50px;
	z-index:3;
}

.add:hover {
	cursor:pointer;
}
input,select {
    box-sizing:border-box;
    font-family:'Rajdhani',sans-serif;
}
.radio_a {
	background-color:#0066FF;
	border:solid thin #0066FF;
}

#box_list_kel {
    box-sizing:border-box;
	width:25%;
	max-width:155px;
	height:fit-content;
	padding:5px;
    float:left;
}

.header_list_kel{
	background-color:#006F37;
	width:100%;
	font-size:30pt;
	color:white;
	text-align:center;
	padding:15px 0;
    border-radius:5px 5px 0 0;
}
.header_list_kel:hover {
	background-color:#008040;
}
#icon_list_kel img{
	background-color:#006F37;
	width:100%;
    border-radius:5px 5px 0 0;
}
#icon_list_kel img:hover {
	background-color:#008040;
}
#icon_list_kel_biru img {
	background-color:#00aa99;
	width:100%;
    border-radius:5px 5px 0 0;
}
#icon_list_kel_biru img:hover {
	background-color:#007acc;
}
#teks_list_kel {
    color:#FFFFFF;
    font-size:8pt;
	width:100%;
	text-align:center;
	background-color:#454545;
	font-weight:bold;
	padding:5px 0;
}
/*
[placeholder]:hover::-webkit-input-placeholder,
:focus::-webkit-input-placeholder{
	transition:opacity .5s .5s ease;
	opacity:0;
}*/
.table_scroll {
	margin:-20px;
	overflow-y:auto;
	overflow-x:scroll;
}
.judul_menu {
	text-align:center;
	margin-top:17px;
	font-weight:normal;
	font-size:large;
}
.judul_menu a {
	color:#ffffff;
	padding:12px;
	margin-right:-9px;
}
.judul_menu a:hover {
	color:#008833;
}

.nb {
	margin:10px 0;
	padding:10px;
	background-color:#fcf2c2;
	border:2px solid #c9a502;
	color:#917703;
	border-radius:5px;
	width:auto;
}

#notifikasi {
	max-width:75%;
	border-radius:10px;
	padding:5px;
	padding-top:15px;
	background-color:#333333;
	margin-bottom:10px;
	margin-top:-35px;
	text-align:center;
	font-size:20px;
	color:white;
} 

#masuk_menteng {
	cursor:pointer;
	color:white;
	background-color:#006F37;
	float:right;
	margin:0px;
	padding:11px;
	font-size:15px;
	font-weight:bold;
	position:fixed;
	font-style:uppercase;
	top:0px;
	right:0px;
}

#tb_close {
	pointer:cursor;
	position:fixed;
	margin-top:20px;
	margin-left:-25px;
	width:50px;
	height:50px;
	z-index:10000000003;
}

#wadah_login {
	background-color:#F5F5F5;
	position:fixed;
	padding:auto;
	top:0;
	bottom:0;
	right:0;
	left:0;
	margin-left:0px;
	width:100%;
	max-width:700px;
	z-index:10000000001;
}

#wadah_login table {
	margin:auto;
	margin-top:30%;
	width:70%;
	max-width:450px;
	z-index:10000000001;
}

thead {
	text-align:center;
	font-weight:bold;
}

.tabel_login {
	margin-top:20%;
	padding-right:auto;
	padding-left:auto;
	position:fixed;
	width:50%;
	max-width:450px;
	z-index:10000000001;
}

#bt_menu_lain {
width:40px;
height:40px;
filter:invert(100%);
	cursor:pointer;
	position:fixed;
	top:4px;
	right:7px;
}

#menu_lain {
	background-color:#008040;
	position:fixed;
	top:45px;
	right:0px;
	width:150px;
border-bottom-radius:5px;
	box-shadow:0px 1px 2px 0px #777777;
text-align:left;
z-index:1;
}

#menu_lain a {
width:130px;
color:#F8F8F8;
padding:10px;
padding-left:20px;
padding-right:20px;
display:inline-block;
}

#sekat_menu_lain {
border-bottom:inset 1px #F8F8F8;
margin-left:15px;
width:80%;
}

#theader {
	cursor:pointer;
	color:white;
	float:left;
	margin:0px;
	padding:13px;
	padding-top:10px;
	padding-bottom:10px;
	font-size:22px;
	font-weight:bold;
	position:fixed;
	font-style:uppercase;
	width:auto;
	top:0px;
	left:0px;
}

#theader a{
color:#F8F8F8;
}

.bt_checkbox {
  padding:15px;
  border-radius:3px;
  text-align:center;
  margin:7px;
  background-color:#ccc;
  border:1px solid #ddd;
  color:#f8f8f8;
  font-weight:bold;
  display:inline-block;
  margin-bottom:12px;
  cursor:pointer;
}

.bt_checkbox:hover {
  background-color:#bbb;
}

/*BOX ITEM*/
.box {
	padding:10px; 
	margin:5px; 
	box-shadow:0 0 3px 1px #CCC;
	border-radius:5px;
	background-color: #f8f8f8;
}
.box_batas {width:100%;overflow:auto;}
.item {
	padding:15px;
	border-radius:3px;
	font-size:15px;
	text-align:center;
	background-color:#454545;
	border:1px solid #454545;
	font-weight:bold;
	margin:3;
	width:89%;
	float:left;
}
.item:hover {
    background-color:#f8f8f8;
    border:1px solid #454545;
}
.item a {color:#F8F8F8;text-decoration:none;}