html {scroll-behavior:smooth;}
.ignielToTop {
  width:40px; 
  height:40px; 
  position:fixed; 
  bottom:10px; 
  right: 3px; 
  z-index:99; 
  cursor:pointer; 
  border-radius:100px; 
  transition:all .5s; 
  background:rgba(0,90,0,0.40);
  text-align: center;
  font-size: 35px;
  color:white;
}

.ignielToTop:hover {
  background:#06CB0F;
}

body{
	font-family: arial, sans-serif;
	font-size: 14px;
	background:url('../image/bg5.jpg');
    background-size: cover;
    background-attachment:fixed;

}

table{
	border-collapse: collapse;
}

td{
	padding:7px;
}

.distr:hover{
	background: linear-gradient(#3cd313, #cdffbf);
}
.trbuttom{
	padding:10px;
	border-bottom: 1px solid #CCC8C8;
}
.formlogin{
	background: #FFFFFF;
	color: #514D4D;
	border:1px solid #F3F2F2;
	font-size: 16px;
	padding:6px;
	width: 320px;
	border-radius: 4px;
	box-shadow: 0px 0px 20px #FFFFFF;
	position: relative;
}

.formlogin_m{
	background: #FFFFFF;
	color: #514D4D;
	border:1px solid #F3F2F2;
	font-size: 16px;
	padding:6px;
	width: 90%;
	border-radius: 4px;
	box-shadow: 0px 0px 20px #FFFFFF;
	position: relative;
	
}
.ina{
	border:1px solid silver;
	font-size: 18px;
	padding:4px;
	border-radius: 4px;
	outline: none;
	-webkit-transition: all 0.5s ease-out;
}

.ina:hover{
	border:1px solid #0e5136;
}

.ina2{
	width: 100%;
	border:1px solid silver;
	font-size: 18px;
	padding:4px;
	border-radius: 4px;
	outline: none;
	-webkit-transition: all 0.5s ease-out;
}

.ina2:hover{
	border:1px solid #0e5136;

}
.inaj{
	border:1px solid #C13909;
	font-size: 20px;
	width: 80%;
	padding:8px;
	border-radius: 20px ;
	outline: none;
	-webkit-transition: all 0.5s ease-out;
}

.inajvircap{
	border:1px solid #C13909;
	font-size: 20px;
	width: 75px;
	padding:8px;
	border-radius: 20px ;
	outline: none;
	-webkit-transition: all 0.5s ease-out;
}

.inajs{
	background: #C13909;
	border: 1px solid #C13909;
	color:#E0DDDD;
	font-size: 20px;
	padding: 8px;
	border-radius: 4px 0px 0px 4px ;
	width: 20%;
}

.nodisplay{
	border-color: transparent;
	width: 98%;
	padding:2px;
	font-size: 14px;
}

.nodisplay:hover{
	background: #091BCC;
	color:#FFFFFF;
}
.nodisplay:focus{
	background: #091BCC;
	color:#FFFFFF;
}

.tombol{
	background:#106cc2;
	border:1px solid #106cc2;
	font-size: 18px;
	color:#ffffff;
	padding:5px;
	text-decoration: none;
	border-radius: 10px;
	cursor: pointer;
	box-shadow: 0px 0px 10px #095104;
	transition: transform .2s;
	margin:2px;
	display:inline-block;
	outline: none;-webkit-transition: all 0.5s ease-out;
}

.tombol:hover{
	background:#7151FC;
	border:1px solid #7151FC;
	text-decoration: none;
	box-shadow: 0px 0px 50px #04077A;
	transform: scale(1.1);
}

.tombol:disabled{
	background:#747575;
	border:1px solid #747575;
	box-shadow: 0px 0px 2px #656464;
	cursor: not-allowed;
}

.tombolmerah{
	background:#E60808;
	border:1px solid #E60808;
	font-size: 18px;
	color:#ffffff;
	padding:5px;
	text-decoration: none;
	border-radius: 10px;
	cursor: pointer;
	outline: none;
	box-shadow: 0px 0px 10px #930606;
	transition: transform .2s;
	-webkit-transition: all 0.5s ease-out;
}

.tombolmerah:hover{
	background: #ce6802;
	border:1px solid #ce6802;
	text-decoration: none;
	box-shadow: 0px 0px 50px #892401;
	transform: scale(1.1);
}

.tomboloren{
	background:#C86607;
	border:1px solid #C86607;
	font-size: 18px;
	color:#ffffff;
	padding:5px;
	text-decoration: none;
	border-radius: 10px;
	cursor: pointer;
	outline: none;
	box-shadow: 0px 0px 10px #692C03;
	transition: transform .2s;
	-webkit-transition: all 0.5s ease-out;
}

.tomboloren:hover{
	background: #D30B01;
	border:1px solid #D30B01;
	text-decoration: none;
	box-shadow: 0px 0px 50px #6C0101;
	transform: scale(1.1);
}
.tombolj{
	background:#186905;
	border:1px solid #186905;
	font-size: 24px;
	color:#ffffff;
	padding:10px;
	text-decoration: none;
	border-radius: 50px;
	cursor: pointer;
	outline: none;
	-webkit-transition: all 0.5s ease-out;
}

.tombolj:hover{
	background:#1942F3;
	border:1px solid #1942F3;
	text-decoration: none;
	box-shadow: 0px 0px 30px #656464;
}

.tombolj:disabled{
	background:#747575;
	border:1px solid #747575;
	box-shadow: 0px 0px 2px #656464;
	cursor: not-allowed;
}

.tombolj2{
	background:#0B5CE1;
	border:1px solid #0B5CE1;
	font-size: 24px;
	color:#ffffff;
	padding:10px;
	text-decoration: none;
	border-radius: 10px;
	width: 90%;
	cursor: pointer;
	outline: none;
	box-shadow: 0px 0px 8px #656464;
	-webkit-transition: all 0.5s ease-out;
}

.tombolj2:hover{
	background:#5C91FC;
	border:1px solid #5C91FC;
	text-decoration: none;
	box-shadow: 0px 0px 30px #656464;
}

.tombolj2:disabled{
	background:#747575;
	border:1px solid #747575;
	box-shadow: 0px 0px 2px #656464;
	cursor: not-allowed;
}

.tombolj3{
	background:#0B5CE1;
	border:1px solid #0B5CE1;
	font-size: 24px;
	color:#ffffff;
	padding:10px;
	text-decoration: none;
	border-radius: 10px;
	width: 90%;
	cursor: pointer;
	outline: none;
	box-shadow: 0px 0px 8px #656464;
	-webkit-transition: all 0.5s ease-out;
}

.tombolj3:hover{
	background:#5C91FC;
	border:1px solid #5C91FC;
	text-decoration: none;
	box-shadow: 0px 0px 30px #656464;
}

.tombolj3:disabled{
	background:#747575;
	border:1px solid #747575;
	box-shadow: 0px 0px 2px #656464;
	cursor: not-allowed;
}

.tombolmerahj{
	background:#E60808;
	border:1px solid #E60808;
	font-size: 24px;
	color:#ffffff;
	padding:10px;
	text-decoration: none;
	border-radius: 50px;
	cursor: pointer;
	outline: none;
	-webkit-transition: all 0.5s ease-out;
}

.tombolmerahj:hover{
	background: #ce6802;
	border:1px solid #ce6802;
	text-decoration: none;
	box-shadow: 0px 0px 30px #656464;
}
.modal-window {
 position:fixed;
  background-color: rgba(0,0,0,0.50);

 top:0;
 right:0;
 bottom:0;
 left:0;
 z-index:999;
 opacity:0;
 pointer-events:none;
 -webkit-transition:all 0.3s;
 -moz-transition:all 0.3s;
 transition:all 0.3s;
}

.modal-window:target {
 opacity:1;
 pointer-events:auto;
}

.modal-window>div {
 width:300px;
 position:relative;
 margin:10% auto;
  padding:20px;
 background:#fff;
 color:#095c75;;
   border-radius:6px;
}

.modal-window header {
 font-weight:bold;
}

.modal-close {
 color:#aaa;
 line-height:50px;
 font-size:80%;
 position:absolute;
 right:0;
 text-align:center;
 top:0;
 width:70px;
 text-decoration:none;
}

.modal-close:hover {
 color:#000;
}

.modal-window h1 {
  font-size: 150%;
  margin: 0 0 15px;
}

.labelhijau{
	background: #bdf7b9;
	color: #075901;
	border-left: 5px solid #075901;
	padding: 4px;
	font-size: 16px;
}

.labelorange{
	background: #f7f3b2;
	color: #8e5904;
	border-left: 5px solid #8e5904;
	padding: 4px;
	font-size: 16px;
}

.labelmerah{
	background: #f7d5c8;
	color: #e54100;
	border-left: 5px solid #e54100;
	padding: 4px;
	font-size: 16px;
}
.labelmerahex{
	background: #E90000;
	color: #FFFFFF;
	border-left: 5px solid #840404;
	padding: 4px;
	font-size: 16px;
}

header{
	background: linear-gradient(to right, #1c65c4, #0b8cf5);
	color:#FFFFFF;
	padding: 4px;
	font-size: 18px;
	text-align: center;
	top:0;
	left: 0;
	position: fixed;
	width: 100%;
	z-index: 99;
}

.mheader{
	width: 100%;
	height: 60px;
	top:0;
	left:0;
	position: fixed;
	display: flex;
	background: linear-gradient(to right, #1c65c4, #0b8cf5);
	padding:8px;
	color:#FFFFFF;
	z-index: 999;

}
.menu{
	border:2px solid transparent;
	border-radius:8px;
	text-align: center;
	transition: transform .2s;
	width: 80px;
	-webkit-transition: all 0.5s ease-out;
	margin-bottom:10px;
}

.menu:hover{
	box-shadow: 0px 0px 50px #088711;
	transform: scale(1.1);
}

.menu img{
	width:35px;

}

.menu a {
	color:#0f37e7;
	text-decoration: none;
	font-size: 14px;

}
.avatar{
	top:60px;
	position: absolute;
	width: 340px;
	text-align: center;

	
}

.avatare{
	border:3px solid #06E8D5;
	border-radius: 50%;
}
.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('../image/loading2.gif') 50% 50% no-repeat rgb(249,249,249);
    opacity: .8;
}

.pesan{
	background:linear-gradient(to right bottom, #1f1fbd, #5656ec);
	font-size: 18px;
	color:#ffffff;
	padding:10px;
	text-decoration: none;
	border-radius: 0px 30px 30px 20px;
	outline: none;
	-webkit-transition: all 0.5s ease-out;
}


.pesan:hover{
	box-shadow: 0px 0px 30px #656464;
}

.tagtgl{
	font-size: 12px;
	color:#ffffff;
}

.tombolbawah{
	bottom: 0px;
	left: 0px;
	width:100%;
	height: 35px;
	background: #030303;
	text-align: center;
	position: fixed;
	z-index: 20;

}

.tombolbawah-a{
	width: 50px;
	height: 50px;
	margin-left: 20px;
	margin-right: 20px;
	border:1px solid #FFFFFF;
	border-radius: 50%;
	padding:5px;
	background:#030303;
	color:#FFFFFF;
	font-size: 25px;
	text-decoration: none;

}

.konten{
	margin-top: 60px;
	margin-bottom: 45px;
}

.pwd-eye{
	background: transparent;
	border:1px solid transparent;
	font-size: 20px;
	text-decoration: none;
	outline: none;
	right:40px;
	padding-top:8px;
	position: absolute;
	z-index: 7;
}