.form-control:disabled, .form-control[readonly] {
    background: #e8e8e8 !important;
    border-color: #e8e8e8 !important;
    color: #303336 !important;
    font-weight: bold;
}


.text-sm{font-size: 10px;}
.font-10{font-size: 10px!important;}
.font-11{font-size: 11px!important;}
.font-12{font-size: 12px!important;}
.width-full{width:100%;}
.con-page{min-height:500px;}
.padtop-0{padding-top:0px;}
.headertitle{
padding: 15px 0px;
}
.headertitle h1{
font-size:1.8rem;
}
.displaynone{
	display:none;
}
.bg-aktif{
	background:#1572e8;
	color:#fff;
}
.text-grey{
	color:#999;
}
.vimg{
	background:#f4f4f4;
}

.w-60 {
    width: 60%!important;
}
.w-40 {
    width: 40%!important;
}
.ml-form{
	margin-left: -25px!important;
}

.bg-login{
	background-color: rgba(0, 0, 0, 0); 
	background: url('images/back.png') no-repeat top right; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
  }
  .btn-default {
    color: #212529!important ;
    background-color: #f1f1f1!important;
    border-color: #f0f0f0!important;
}  
  .select2-container--bootstrap .select2-results__option{
	  border-bottom: solid 1px #f0f0f0;
  }
.minpage-500{
	min-height: 500px!important;
}

/*loading */
.loading_area table{  opacity:0.30;}
.loading_area input{  opacity:0.30;}
.loading_area img{  opacity:0.10;}
.loading_area label{  opacity:0.40;}
.loading_area p{  opacity:0.40;}
.loading_area h1{  opacity:0.40;}
.loading_area h2{  opacity:0.40;}
.loading_area h3{  opacity:0.40;}
.loading_area h4{  opacity:0.40;}
.loading_area h5{  opacity:0.40;}
.loading_area {background: #fff;}

#loading_content_area{
	position:absolute;;
	left:0;
	width:100%;
	height:800px;
	background-color:rgb(38, 55, 80);
	z-index: 500;
}
.loading_content{
	margin:200px auto;}
.loading_content h1{
	font-family: 'Actor', sans-serif;
	color:#f4f4f4;
	font-size:16px;
	letter-spacing:1px;
	font-weight:200;
	text-align:center;
	position: relative;
}
.loading_content span{
	width:16px;
	height:16px;
	border-radius:50%;
	display:inline-block;
	position:absolute;
	left:50%;
	margin-left:-10px;
	-webkit-animation:3s infinite linear;
	-moz-animation:3s infinite linear;
	-o-animation:3s infinite linear;
	
}
.loading_content span:nth-child(2){
	background:#E84C3D;
	-webkit-animation:kiri 1.2s infinite linear;
	-moz-animation:kiri 1.2s infinite linear;
	-o-animation:kiri 1.2s infinite linear;
	
}
.loading_content span:nth-child(3){
	background:#F1C40F;
	z-index:100;
}
.loading_content span:nth-child(4){
	background:#2FCC71;
	-webkit-animation:kanan 1.2s infinite linear;
	-moz-animation:kanan 1.2s infinite linear;
	-o-animation:kanan 1.2s infinite linear;
}


#loading_maps_area{
	position:fixed;
	left:0;
	width:100%;
	height:700px;
	background-color:rgb(38, 55, 80);
	z-index: 500;
}
.loading_maps{
	margin:300px auto;
}
.loading_maps h1{
	font-family: 'Actor', sans-serif;
	color:#f4f4f4;
	font-size:16px;
	letter-spacing:1px;
	font-weight:200;
	text-align:center;
	position: relative;
}
.loading_maps span{
	width:16px;
	height:16px;
	border-radius:50%;
	display:inline-block;
	position:absolute;
	left:50%;
	margin-left:-10px;
	-webkit-animation:3s infinite linear;
	-moz-animation:3s infinite linear;
	-o-animation:3s infinite linear;
	
}
.loading_maps span:nth-child(2){
	background:#E84C3D;
	-webkit-animation:kiri 1.2s infinite linear;
	-moz-animation:kiri 1.2s infinite linear;
	-o-animation:kiri 1.2s infinite linear;
	
}
.loading_maps span:nth-child(3){
	background:#F1C40F;
	z-index:100;
}
.loading_maps span:nth-child(4){
	background:#2FCC71;
	-webkit-animation:kanan 1.2s infinite linear;
	-moz-animation:kanan 1.2s infinite linear;
	-o-animation:kanan 1.2s infinite linear;
}

/*tabel */
.tabel table, .tabel th, .tabel td {
	border: 1px solid #607d8b;
	padding:5px 10px;
  }

/*tabel costum 1*/
.tborder{
	font-size:12px;
}
.tborder table {
  border-collapse:collapse;
  width:100%;
  margin:0 auto 25px auto;
}
.tborder table, .tborder th, .tborder td {
  border: 1px solid #607d8b;
  padding:4px 10px;
}
.tborder tr {
  color:black;
  font:normal 12px Arial, Helvetica, sans-serif;
  -webkit-transition:All 1s ease;
  -moz-transition:All 1s ease;
  -o-transition:All 1s ease;
  transition:All 1s ease;
}
.tborder th {
  color:white;
  font-weight:bold;
  background-color:#6c8fa4;
}
 
.hoverlink:hover{
	color:blue;
}


/*tabel costum 2*/
.tborder-bottom{
	font-size:14px;
}
.tborder-bottom table {
  border-collapse:collapse;
  width:100%;
  margin:0 auto 25px auto;
}
.tborder-bottom table, .tborder-bottom th, .tborder-bottom td {
  border-bottom: 1px solid #4d4d4d;
  padding:5px 10px;
}
.tborder-bottom tr {
  color:black;
  font:normal 14px Arial, Helvetica, sans-serif;
  -webkit-transition:All 1s ease;
  -moz-transition:All 1s ease;
  -o-transition:All 1s ease;
  transition:All 1s ease;
}
.tborder-bottom th {
  color:white;
  font-weight:bold;
  background-color:#009688;
}


/*tabel costum 3*/
.tborder_2{
	font-size:12px;
}
.tborder_2 table {
  border-collapse:collapse;
  width:100%;
  margin:0 auto 25px auto;
}
.tborder_2 table, .tborder_2 th, .tborder_2 td {
  border: 1px solid #cacaca;
  padding:5px 10px;
}
.tborder_2 tr {
  color:rgb(255, 255, 255);
  font:normal 12px Arial, Helvetica, sans-serif;
  -webkit-transition:All 1s ease;
  -moz-transition:All 1s ease;
  -o-transition:All 1s ease;
  transition:All 1s ease;
}
.tborder_2 th {
  color:rgb(94, 94, 94);
  font-weight:bold;
  background-color:#d4dadd;
}
.hoverlink:hover{
	color:rgb(194, 194, 250);
}

/*tabel costum 4*/
.tborder_2-bottom{
	font-size:13px;
}
.tborder_2-bottom table {
  border-collapse:collapse;
  width:100%;
  margin:0 auto 25px auto;
}
.tborder_2-bottom table, .tborder_2-bottom th, .tborder_2-bottom td {
  border-bottom: 1px solid #cacaca;
  padding:5px 10px;
}
.tborder_2-bottom tr {
  color:black;
  font:normal 14px Arial, Helvetica, sans-serif;
  -webkit-transition:All 1s ease;
  -moz-transition:All 1s ease;
  -o-transition:All 1s ease;
  transition:All 1s ease;
}
.tborder_2-bottom th {
	color:rgb(94, 94, 94);
	font-weight:bold;
	background-color:#d4dadd;
}

/*tabel costum 5*/
.tborder_3{
	font-size:12px;
}
.tborder_3 table {
  border-collapse:collapse;
  width:100%;
  margin:0 auto 25px auto;
}
.tborder_3 table, .tborder_3 th, .tborder_3 td {
  border-bottom: 0px solid #cacaca;
  padding:5px 10px;
}
.tborder_3 tr {
  color:black;
  font:normal 14px Arial, Helvetica, sans-serif;
  -webkit-transition:All 1s ease;
  -moz-transition:All 1s ease;
  -o-transition:All 1s ease;
  transition:All 1s ease;
}
.tborder_3 th {
	color:rgb(94, 94, 94);
	font-weight:bold;
	background-color:#d4dadd;
}



@-webkit-keyframes kanan {
    0% {-webkit-transform:translateX(20px);
    }
   
	50%{-webkit-transform:translateX(-20px);
	}
	
	100%{-webkit-transform:translateX(20px);
	z-index:200;
	}
}
@-moz-keyframes kanan {
    0% {-moz-transform:translateX(20px);
    }
   
	50%{-moz-transform:translateX(-20px);
	}
	
	100%{-moz-transform:translateX(20px);
	z-index:200;
	}
}
@-o-keyframes kanan {
    0% {-o-transform:translateX(20px);
    }
   
	50%{-o-transform:translateX(-20px);
	}
	
	100%{-o-transform:translateX(20px);
	z-index:200;
	}
}

@-webkit-keyframes kiri {
     0% {-webkit-transform:translateX(-20px);
	z-index:200;
    }
	50%{-webkit-transform:translateX(20px);
	}
	100%{-webkit-transform:translateX(-20px);
	}
}

@-moz-keyframes kiri {
     0% {-moz-transform:translateX(-20px);
	z-index:200;
    }
	50%{-moz-transform:translateX(20px);
	}
	100%{-moz-transform:translateX(-20px);
	}
}
@-o-keyframes kiri {
     0% {-o-transform:translateX(-20px);
	z-index:200;
    }
	50%{-o-transform:translateX(20px);
	}
	100%{-o-transform:translateX(-20px);
	}
}

/*--------------------------------------------------------*/


@media only screen and (max-width: 480px) {
	.m-hide{display: none;}
}
@media only screen and (max-width: 680px) {

}
@media only screen and (max-width: 820px) {

}
@media only screen and (max-width: 1000px) {

}

@media only screen and (min-width: 1024px) { 

}
  