.error{
  font-weight: normal !important;
}
.form-group + .error{
  position: relative;
  top: -10px;
}
input[type='number'] {
    -moz-appearance:textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
.btn-next-lapor{
    padding:10px;border-radius:13px;text-align: center;cursor: pointer;
    background-color: #6c89c5;color: white;font-size: 17px;
}
.btn-prev-lapor{
    padding:10px;border-radius:13px;text-align: center;cursor: pointer;color:black;
    background-color: #fff;font-size: 17px;
}

@media screen and (min-width: 800px) {
    #c-content-form {
        padding: 20px 50px 50px 100px !important;
    }
}

@media screen and (max-width: 799px) {
    #c-content-form {
        padding: 20px 20px 20px 20px !important;
    }
}

.unggah_visa{
    padding:7px 30px;background-color: #e4e5e7;border-radius:130px;text-align: center;cursor: pointer;color:black;
}

/* Base for label styling */
.check-custom[type="checkbox"]:not(:checked),
.check-custom[type="checkbox"]:checked {
  position: absolute;
  left: -9999px;
}
.check-custom[type="checkbox"]:not(:checked) + label,
.check-custom[type="checkbox"]:checked + label {
  position: relative;
  padding-left: 1.5em;
  margin-left: 10px;
  font-weight: normal !important;
  margin-bottom: 15px;
  cursor: pointer;
  -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
}

/* checkbox aspect */
.check-custom[type="checkbox"]:not(:checked) + label:before,
.check-custom[type="checkbox"]:checked + label:before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 1.25em; height: 1.25em;
  border: 1px solid #d2d6de;
  background: #fff;
  /*border-radius: 4px;*/
  box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
}
/* checked mark aspect */
.check-custom[type="checkbox"]:not(:checked) + label:after,
.check-custom[type="checkbox"]:checked + label:after {
  content: '✔';
  position: absolute;
  bottom: .2em; left: .1em;
  font-size: 1.4em;
  line-height: 0.8;
  color: #2A465D;
  transition: all .2s;
  font-family: Helvetica, Arial, sans-serif;
}
/* checked mark aspect changes */
.check-custom[type="checkbox"]:not(:checked) + label:after {
  opacity: 0;
  transform: scale(0);
}
.check-custom[type="checkbox"]:checked + label:after {
  opacity: 1;
  transform: scale(1);
}
/* disabled checkbox */
.check-custom[type="checkbox"]:disabled:not(:checked) + label:before,
.check-custom[type="checkbox"]:disabled:checked + label:before {
  box-shadow: none;
  border-color: #bbb;
  background-color: #ddd;
}
.check-custom[type="checkbox"]:disabled:checked + label:after {
  color: #999;
}
.check-custom[type="checkbox"]:disabled + label {
  color: #aaa;
}
/* accessibility */
.check-custom[type="checkbox"]:checked:focus + label:before,
.check-custom[type="checkbox"]:not(:checked):focus + label:before {
  border: 1px dotted blue;
}

/* hover style just for information */
.check-custom[type="checkbox"]:checked + label:hover:before {
  border: 1px solid #2A465D!important;
}

.rad-custom[type="radio"]:checked,
.rad-custom[type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}
.rad-custom[type="radio"]:checked + label,
.rad-custom[type="radio"]:not(:checked) + label
{
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
    color: #666;
    -webkit-user-select: none;  
    -moz-user-select: none;    
    -ms-user-select: none;      
    user-select: none;
}
.rad-custom[type="radio"]:checked + label:before,
.rad-custom[type="radio"]:not(:checked) + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    border: 1px solid #ddd;
    border-radius: 100%;
    background: #fff;
}
.rad-custom[type="radio"]:checked + label:after,
.rad-custom[type="radio"]:not(:checked) + label:after {
    content: '';
    width: 12px;
    height: 12px;
    background: #2A465D;
    position: absolute;
    top: 3px;
    left: 3px;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
.rad-custom[type="radio"]:not(:checked) + label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}
.rad-custom[type="radio"]:checked + label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

fieldset{
    border: 2px solid #E3EEF8 !important;
    padding: 0 1.4em 1.4em 1.4em !important;
    margin: 0 0 1.5em 0 !important;
    -webkit-box-shadow:  0px 0px 0px 0px #000;
    box-shadow:  0px 0px 0px 0px #000;
}

.img-resume{
  margin-bottom: 15px;
}

@media (min-width: 768px){
  .fieldset-body{
    margin-left: -1.4em;
  }

  .img-resume{
    position: absolute;
    right: 30px;
  }
}

legend{
    color: #337ab7;
    font-weight: bold !important;
    text-align: left !important;
    width:inherit; /* Or auto */
    padding:0 10px; /* To give a bit of padding on the left and right */
    border-bottom:none;
    font-size: 14px;
}

.dropdown:hover ul.dropdown-menu{
	display:block !important;
}

/*.select2 {
    width: 100% !important;
}*/

.header(
	-webkit-box-shadow: 0px 8px 33px -5px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 8px 33px -5px rgba(0,0,0,0.75);
  box-shadow: 0px 8px 33px -5px rgba(0,0,0,0.75);
)

@media (max-width: 767px) {
  .select2 {
      width: 100% !important;
  }

  .pull-right{
      float: none !important;
  }
}
@media (min-width: 1280px) {
  .container {
      width: 1280px;
  }
}
a .fa{
  cursor: pointer;
}
body{
  background: #ECF0F5 !important;
  overflow-x: hidden !important;
}
textarea{
    resize: none;
}
.container{
  padding-top: 15px;
}

.no-padding{
  padding-right: 0 !important;
  padding-left: 0 !important;
}

label{
  font-weight: normal;
  font-size: 16px;
}

form label,
.form-group label{
  font-size: 14px !important;
  font-weight: bold;
  position: relative;
  top: 7px;
}

.button_crud{
  position: relative;
  float: left;
  cursor: pointer;
  margin-left: 5px;
  cursor: pointer;
  padding: 6px 6px 6px 6px;
}

.button_crud:hover {
  background-color: #eee;
}

.row.kotak{
  margin-bottom: 15px;
  background: #fff;
  border: 1px solid #ddd;
}
.kotak-pelayanan{
  position: relative;
  background: #fff;
  margin-bottom: 30px;
}
.title-pelayanan{
  width: 100%;
  height: 100px;
  display: table;
  position: absolute;
}
.text-title{
  color: #fff;
  text-align: center;
  font-size: 24px;
  display: table-cell;
  padding: 0px 30px;
  vertical-align: middle;
  font-weight: bold;
}
.text-pelayanan{
  display: table;
  padding: 20px 20px;
  height: 100px;
  text-align: center;
  overflow: hidden;
}
.table{
  margin-bottom: 0px;
}
.table tbody tr.r-merah td{
  background-color: #f0a4a1;
}
.table tbody tr.r-kuning td{
  background-color: #f3eba6;
}
.table tbody tr.active td{
  background-color: #8CAFD9;
}
.table tbody tr.active:hover td{
  background-color: #8CAFD9;
}
.input-control{
    display: inline;
}
.form-control.input-control,
span.input-control{
    position: relative;
    top: 2px;
}
.input-control .form-control-feedback{
    top: -5px;
}
.dataTables_empty{
    text-align: center;
}
.disable-select {
    -webkit-user-select: none;  
    -moz-user-select: none;    
    -ms-user-select: none;      
    user-select: none;
}
.displayfield{
  padding: 6px 12px 6px 12px;
  background-color: #fff !important;
}
.filetext.form-control[readonly]{
    background: #fff;
}
.select2-container--default.select2-container--disabled .select2-selection--multiple {
    background-color: #eee;
    cursor: default;
    background: none;
    border: none;
}
.btn-uu{
    background: #F7941E;
    color: #fff;
}
.separator{
    width: 100%;
    height: 5px;
    background: rgb(227, 238, 248);
}
#lupa_sandi{
    position: absolute;
    display:none;
    /*background-image:url('<?php echo config_item('img_path');?>bg_trans.png');*/
    padding:5px;
    width:550px;
    float:left;
    position:fixed;
    bottom:0px;
    left:0px;
    z-index:100;
}
#place_notif {
    position: fixed;
    up: 3px;
    right: 3px;
    width: 300px;
    margin-top: 53px;
    z-index: 1;
}

.warning_blink {
    animation-duration: 180ms;
    animation-name: blink;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes blink {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.loading {
  left: 50%;
  top: 50%;
  position: absolute;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%); }
  .loading #spinner {
    box-sizing: border-box;
    stroke: #829CA8;
    stroke-width: 3px;
    -webkit-transform-origin: 50%;
            transform-origin: 50%;
    -webkit-animation: line 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite, rotate 1.6s linear infinite;
            animation: line 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite, rotate 1.6s linear infinite; }

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0);
            transform: rotate(0); }
  to {
    -webkit-transform: rotate(450deg);
            transform: rotate(450deg); } }

@keyframes rotate {
  from {
    -webkit-transform: rotate(0);
            transform: rotate(0); }
  to {
    -webkit-transform: rotate(450deg);
            transform: rotate(450deg); } }

@-webkit-keyframes line {
  0% {
    stroke-dasharray: 2, 85.964;
    -webkit-transform: rotate(0);
            transform: rotate(0); }
  50% {
    stroke-dasharray: 65.973, 21.9911;
    stroke-dashoffset: 0; }
  100% {
    stroke-dasharray: 2, 85.964;
    stroke-dashoffset: -65.973;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg); } }

@keyframes line {
  0% {
    stroke-dasharray: 2, 85.964;
    -webkit-transform: rotate(0);
            transform: rotate(0); }
  50% {
    stroke-dasharray: 65.973, 21.9911;
    stroke-dashoffset: 0; }
  100% {
    stroke-dasharray: 2, 85.964;
    stroke-dashoffset: -65.973;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg); } }

.skin-blue .main-header .navbar{
    /*box-shadow: 1px 4px 10px rgba(0,0,0,0.5);*/
}

.nav.navbar-nav li.dropdown{
    /*background: rgba(0,0,0,0.1);
    margin-right: -15px;
    padding-right: 15px;
    padding-left: 15px;*/
}
.nav.navbar-nav > li.dropdown > a{
    /*font-style: italic;*/
    color: #fff !important;
}

.skin-blue .main-header .navbar .nav .open > a,
.skin-blue .main-header .navbar .nav .open > a:hover,
.skin-blue .main-header .navbar .nav .open > a:focus{
    background: rgba(0,0,0,0.1);
    color: #fff !important;
}

.skin-blue .main-header .navbar .nav > li.dropdown > a:hover,
.skin-blue .main-header .navbar .nav > li.dropdown > a:active,
.skin-blue .main-header .navbar .nav > li.dropdown > a:focus{
    background: rgba(0,0,0,0.1);
}

.header{
  background: #fff;
/*-webkit-box-shadow: 0px 4px 18px -8px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 4px 18px -8px rgba(0,0,0,0.75);
box-shadow: 0px 4px 18px -8px rgba(0,0,0,0.75);*/
}

.header img,
.header button{
  margin-bottom: 15px;
}

.header-text{
  line-height: 1;
  margin-top: 35px;
  padding-left: 60px;
  margin-bottom: 15px;
}

.header-text span{
  display: block;
  color: #2A465D;
  font-size: 20px;
}

.header-text span:last-child{
  font-size: 14px;
  font-weight: bold;
}

.label-center{
  display: block;
  text-align: center;
  font-size: 28px;
  padding-top: 15px;
  padding-bottom: 15px;
  color: #2A465D;
  margin-bottom: 15px;
}

.body-pengumuman,
.body-himbauan,
.body-fasilitas{
  position: relative;
  box-sizing: border-box;
  background: #fff;
  margin-bottom: 15px;
}

.body-pengaduan{
  position: relative;
  box-sizing: border-box;
  background: #F9F9F9;
  margin-bottom: 15px;
  margin-top: 15px;
}

.body-pengumuman,
.body-himbauan{
  min-height: 260px;
}

.body-referensi{
  position: relative;
  box-sizing: border-box;
  background: #fff;
  padding: 15px;
  margin-bottom: 15px;
}

.text-fasilitas{
  padding: 30px;
  text-align: justify;
}

.text-pengumuman,
.text-himbauan{
  padding: 15px;
}

.text-pengumuman a,
.text-himbauan a{
  color: #2A465D;
  font-weight: bold;
}

.text-pengumuman span,
.text-himbauan span{
  display: block;
  font-size: 12px;
  color: #A2A4A6;
  position: absolute;
  bottom: 15px;
  right: 15px;
}

.text-pengaduan{
  padding: 30px;
  text-align: center;
}

.text-referensi{
  line-height: 1.2;
  font-size: 16px;
}

.text-referensi label{
  display: block;
  color: #2A465D;
  font-size: 20px;
  font-weight: bold;
}

.text-referensi span{
  position: relative;
  bottom: 5px;
  font-style: italic;
  color: #A2A4A6;
  display: block;
}

.text-referensi a{
  margin-top: 5px;
  font-style: italic;
  color: #EF4733;
  display: block;
}

.title-img{
  width: 100%;
  text-align: center;
  position: absolute;
  margin: 0 auto;
  top: 25%;
  color: #fff;
  font-size: 28px;
}

footer{
  background: #2A465D;
  color: #fff;
}

footer .row > div{
  margin-bottom: 30px;
  margin-top: 15px;
}

footer label{
  display: block;
  font-size: 20px;
  margin-bottom: 15px;
}

.copyright{
  text-align: center;
  border-top: 1px solid #566A7C;
  padding: 10px 15px;
}

.referensi,
.fasilitas,
.pengumuman,
.info-pelayanan,
.himbauan,
.pelayanan,
.pengaduan{
  margin-bottom: 15px;
}

.pengaduan .kotak{
  padding-left: 15px;
  padding-right: 15px;
  background: #F1F1F2;
  margin-bottom: 15px;
  border: 1px solid #B3B5BA;
}

.himbauan .kotak{
  padding-left: 15px;
  padding-right: 15px;
  background: #F5F5F6;
  margin-bottom: 15px;
}

.himbauan .kotak label{
  text-align: center;
}

.voucher{
  background: #00A65A;
  color: #fff;
  border-box: box-sizing;
  padding: 15px;
}

.pengaduan .kotak label{
  font-size: 20px;
  display: block;
  color: #2A465D;
  margin-bottom: 15px;
}

.label-container{
  display: block;
  font-size: 28px;
  color: #5a5a5a;
  padding-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
  margin-bottom: 15px;
}

.list-travel{
  position: relative;
  background: #fff;
  padding: 15px;
  padding-left: 75px;
  padding-right: 45px;
  color: #2A465D;
  font-size: 18px;
  margin-bottom: 5px;
}

.list-travel:last-child{
  margin-bottom: 15px;
}

.list-travel .fa{
  position: absolute;
  right: 15px;
  font-size: 20px;
  top: 18px;
}

.list-travel img{
  position: absolute;
  left: 15px;
  top: 8px;
}

.merah{
  color: #EF4733;
}

.kuning{
  color: #F3D70E;
}

.hijau{
  color: #00A65A;
}

.flag-national{
  background: #fff;
  padding: 15px;
  height: 105px;
  text-align: center;
  margin-bottom: 15px;
}

.flag-national span{
  display: block;
  color: #2A465D;
  font-size: 80%;
  margin-top: 15px;
}

.detail{
  margin-top: 30px;
  padding-top: 30px;
  background: #ffff;
}
.detail_1
{
  padding-top: 0px!important;
}

.detail p{
  padding-left: 15px;
  padding-right: 15px;
  margin-top: 60px;
  margin-bottom: 60px;
}

.detail .container > .row:first-child label{
  font-size: 20px;
  margin-bottom: 15px;
  margin-left: 15px;
}

.detail .container > .row:first-child{
  margin-bottom: 30px;
}

.detail p label{
  display: block;
  color: #2A465D;
  margin-left: 0px !important;
  margin-bottom: 0px !important;
}

.detail p span{
  display: block;
  color: #A2A4A6;
}

.detail p span:last-child{
  margin-bottom: 15px;
}

.header-form{
  background: #E3EEF8;
  padding: 15px;
  margin-bottom: 15px;
}

.text-success{
  color: #00A65A;
}

.table-box{
  border: 1px solid #CCCDCF;
}

.img-thumbnail > div:hover{
  display: block;
}

.resume{
  background: #fff;
  margin-bottom: 60px;
  margin-top: 45px;
  padding: 30px;
  box-sizing: border-box;
  padding-bottom: 30px;
  text-align: center;
}

.resume label{
  display: block;
  font-size: 28px;
  margin-top: 15px;
}

.resume #btn-kembali{
  margin-top: 30px;
}

.no-pengaduan{
  position: relative;
  box-sizing: border-box;
  background: #eeeeef;
  margin-top: 15px;
  margin-bottom: 15px;
  text-align: left;
  padding: 30px;
  color: #A2A4A6;
}

.no-pengaduan span{
  color: #5a5a5a;
  font-size: 20px;
  margin-left: 28px;
}

.no-pengaduan button,
.no-pengaduan a{
  position: absolute;
  top: 25px;
  right: 15px;
  font-size: 20px;
}

.table-button .info{
  display: block;
  font-size: 16px;
}

.label-card{
  position: relative;
  box-sizing: border-box;
  margin-bottom: 15px;
}

.label-card .fa{
  position: absolute;
  right: 0;
  font-size: 18px;
}

.card{
  position: relative;
  box-sizing: border-box;
  border: 1px solid #aeafb1;
  padding: 15px;
  margin-bottom: 15px;
}

.card .form-group{
  margin-bottom: 0px;
}

.card .nama{
  font-size: 20px;
  color: #6c89c7;
}

.title-kategori{
  position: relative;
  box-sizing: border-box;
  background: #57585a;
  padding: 13px;
  color: #fff;
}

.body-kategori{
  position: relative;
  box-sizing: border-box;
  padding: 15px;
  padding-top: 0;
}

.body-kategori > .row{
  border: 1px solid #57585a;
  border-top: none;
}

.body-kategori .form-group{
  margin-bottom: 5px;
}

.body-kategori .form-group:first-child span{
  font-size: 20px;
}

.img-group{
  margin-bottom: 15px;
}

@media (max-width: 767px) {
  .xs-full{
    width: 100%;
  }

  .header-text{
    margin-top: 0px;
    padding-left: 15px;
  }

  .referensi .label-container,
  .pengumuman .label-container,
  .navbar-logo,
  .info-pelayanan .label-container{
    text-align: center;
  }

  .detail .text-right{
    text-align: left;
  }

  .img-group{
    text-align: center !important;
  }

}






	.active_tab {
	  background: #2d3f66;
	  border: none;
	  left:30px;
	  height: 54px;
	  top : 5px;
	  font-size: 14px;
	  font-weight: normal !important;
	  color:white !important;
	  padding: 0 3px;
	  position: relative;
	}

	.nav-tabs-custom2{
		margin-top:-8px;
		position: relative;
		float:left;
		z-index: 100;
		height:55px;
		width:200px;
		border: none;
		overflow: hidden;
		background: none !important;
	}

	.active_tab:before {
	  background:#2d3f66;
-webkit-box-shadow: 13px -4px 47px -12px rgba(0,0,0,0.61);
-moz-box-shadow: 13px -4px 47px -12px rgba(0,0,0,0.61);
box-shadow: 13px -4px 47px -12px rgba(0,0,0,0.61);
	  content: '';
	  height: 65px; 
	  width: 85px;
	  overflow: hidden;
	  position: absolute;
	  right: -28px;  
	  top: 38%;
	  -webkit-transform: rotate(70deg);
	  transform: rotate(70deg);
	  z-index: -1;
	}

	.active_tab:after {
	  background: #2d3f66;
	  content: '';
	  height: 45px; 
	  width: 65px;
	  overflow: hidden;
	  position: absolute;
	  left: -24px;  
	  top: 30%;
	  -webkit-transform: rotate(-70deg);
	  transform: rotate(-70deg);
	  z-index: -1;
	}

	.button-tab a {
		color: #2d3f66 !important;
	}


	.button-tab {
	  background: #f7f9f8;
	  border: none;
	  left:30px;
	  height: 54px;
	  top : 5px;
	  font-size: 14px;
	  font-weight: normal !important;
	  color:white !important;
	  padding: 0 3px;
	  position: relative;
	}

	.nav-tabs-custom2{
		margin-top: -54px;
	}

	.button-tab:before {
	  background:#f7f9f8;
	  -webkit-box-shadow: 13px -4px 47px -12px rgba(0,0,0,0.61);
	  -moz-box-shadow: 13px -4px 47px -12px rgba(0,0,0,0.61);
	  box-shadow: 13px -4px 47px -12px rgba(0,0,0,0.61);
	  content: '';
	  height: 65px; 
	  width: 85px;
	  overflow: hidden;
	  position: absolute;
	  right: -28px;  
	  top: 38%;
	  -webkit-transform: rotate(70deg);
	  transform: rotate(70deg);
	  z-index: -1;
	}

	.button-tab:after {
	  background: #f7f9f8;
	  content: '';
	  height: 45px; 
	  width: 65px;
	  overflow: hidden;
	  position: absolute;
	  left: -24px;  
	  top: 30%;
	  -webkit-transform: rotate(-70deg);
	  transform: rotate(-70deg);
	  z-index: -1;
	}

	.button-tab li:hover {
		background-color: red !important: 
	}

	.button-tab :hover {
		background-color: red !important: 
	}


	.button-tab a:hover {
		background-color: red !important: 
	}

	.tabs a {
		background:none !important ;
		border: none !important;
		font-size: 15px;
		padding-top: 15px;
	  	font-weight: normal !important;
	  	color:white ; 
	  	cursor: pointer;
	}
	
	.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
		color:white !important;
	}



.pelayanan .kotak{
  padding-left: 15px;
  padding-right: 15px;
  background: #F1F1F2;
  margin-bottom: 15px;
  border: 1px solid #B3B5BA;
}



.kasus_selesai,
.kasus_khusus{
  display: none;
}

.nav-biodata > div{
  position: relative;
  box-sizing: border-box;
  background: #6c89c5;
  padding: 20px;
  color: #fff;
  font-size: 18px;
  text-align: center;
  cursor: pointer;
}

.nav-biodata > div.active{
  background: #4d6290;
}

.header-wni{
  background: url("../../../client/images/profilwni_header.png") no-repeat center center fixed;
  background-size: cover;
  margin-bottom: 30px;
  color: #fff;
  box-sizing: border-box;
  padding: 60px;
}

.menu-faq li,
.menu-wni li{
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border: none;
  padding-left: 0;
  padding-right: 0;
  padding: 0;
}

.menu-faq li a{
  color: #33495d;
  padding: 20px;
  font-weight: bold;
  display: block;
}

.menu-wni li a{
  color: #33495d;
  padding: 30px;
  padding-top: 20px;
  font-weight: bold;
  display: block;
}

.menu-wni li .fa{
  font-size: 30px; position: relative; top: 6px; margin-right: 15px;
}

.menu-faq li.active a,
.menu-faq li:hover a,
.menu-wni li.active a,
.menu-wni li:hover a{
  color: #fff;
  background: #33495d;
  cursor: pointer;
}

#table-biodata thead th,
#table-biodata tbody td{
  border: none;
  padding-left: 30px;
  padding-right: 30px;
}

#table-biodata thead th{
  font-size: 20px;
  padding-top: 20px;
}

#table-biodata > thead > tr > th:nth-child(odd),
#table-biodata > tbody > tr > td:nth-child(odd){
  background: #fafafa;
}

#table-biodata > tbody > tr > td.c-merah{
  background: #fac7c1;
}

#table-biodata > thead > tr > th:first-child,
#table-biodata > tbody > tr > td:first-child{
  background: #eeeeef;
  color: #A2A4A6;
  width: 250px;
}

.kantor-perwakilan .displayfield{
  border: 1px solid #d2d6de !important;
  margin-bottom: 15px;
}

.kantor-perwakilan .displayfield span{
  color: #A2A4A6;
}

.kantor-perwakilan .displayfield.active,
.kantor-perwakilan .displayfield.active div,
.kantor-perwakilan .displayfield.active span{
  background: #00A65A;
  color: #fff;  
}

.pelayanan .content-menu{
    height: auto;
    display: flex;
    flex-flow: row wrap;
    /*justify-content: space-between;*/
    align-content: center;
    padding: 10px;
}

.pelayanan .item-menu{      
    justify-content: space-between;
    align-content: center;
    text-align: center;          
}

.pelayanan .item-menu{
    justify-content: space-between;
    align-content: center;
    text-align: center;          
    width: 48%;
    height: 175px;
    background: #fff;
    margin:8px 2px;
    padding: 5px;
    text-align: center;      
    float: left !important;
}

@media (min-width: 760px) {
  .pelayanan .item-menu{      
      justify-content: space-between;
      align-content: center;
      text-align: center;          
      width: 36%;
      height: 175px;
      background: #fff;
      margin:8px 2px;
      padding: 5px;
      text-align: center;      
  }
}

@media (min-width: 767px) {
  .pelayanan .item-menu{      
      justify-content: space-between;
      align-content: center;
      text-align: center;          
      width: 32%;
      height: 175px;
      background: #fff;
      margin:8px 2px;
      padding: 5px;
      text-align: center;      
  }
}

@media (min-width: 900px) {
  .pelayanan .item-menu{      
      justify-content: space-between;
      align-content: center;
      text-align: center;          
      width: 18%;
      height: 175px;
      background: #fff;
      margin:8px 2px;
      padding: 5px;
      text-align: center;      
  }
}

@media (min-width: 1080px) {
  .pelayanan .item-menu{
      justify-content: space-between;
      align-content: center;
      text-align: center;
      width: 12%;
      height: 175px;
      background: #fff;
      margin:8px 2px;
      padding: 5px;
      text-align: center;
      float: left !important;
  }
}


.pelayanan .item-menu a{
  text-decoration: none;
  color: #57585D;
}


.pelayanan .item-menu .icon{      
    width: 100px;     
    height: 100px;    
}

.pelayanan .item-menu .text-label{          
    text-align: center;
    font-weight: bold;      
    display: block;
}

.surat-keterangan,
.dokumen,
.legalisasi{
  background: #EEEEEF;
  width: 100%;
  height: 100%;
}
.pelayanan .header{
  padding:0 20px;
  margin-bottom: 10px;
}

.pelayanan .main-title,
.legalisasi .main-title,
.surat-keterangan .main-title
{

  font-size: 26px !important;
  font-weight: inherit;
  padding: 20px 15px;
  padding-bottom: 10px;
  color: #2A465D !important;
}

.badge-main-title{
  color: #fff;
  background: #607EBE;
  margin: 20px 0;  
  margin-bottom: 10px;
  padding:5px 20px;
  border-radius: 10px;
  font-size: 16px;
}

.surat-keterangan .form-content,
.legalisasi .form-content{
  background: #fff;
}



.form-legalisasi,
.form-surat-keterangan{
  margin-top: 15px;
}


.biru-color{
  color: #6c89c5;
}

  .btn-lapor {
    padding:15px 30px 15px 30px;
    border-radius: 15px;
    cursor: pointer;
    float:left;
  }

  .btn-lupa{
    padding : 12px 55px 12px 55px;
    border-radius: 14px;
    cursor: pointer;
    margin-left: 0px !important;
    float:left;
    font-size: 16px;
  }

  .sudah_lapor_diri{
    color:black;
    background-color: #ddd;
  }

  .lapor_diri{
    margin-left: 10px;
    color:white;
    background-color: #48b96e;
  }

  .circle{
    width:25px;
    height: 25px;
    padding-top: 4px;
    border-radius: 100px;
    background-color: orange;
  }

  .badge-light{
    background-color: white;
    color:black;
  }

  .lapor-tab{
    background-color: #48b96e;
    color:white;
  }

   .active-lapor label{
    color:white;
  }
     .lapor-tab label{
    color:white;
  }

  .active-lapor{
    background-color: #6c89c5;
  }

  .active-tab-lapor-diri{
    display: block;
  }

  .tab1-lapor-diri{
    display: none;
  }

  .input_nik{
    font-size: 20px;
    padding: 10px 20px 10px 25px;
    border: 1px solid #ddd;
  }

  .input_domisili{
    font-size: 18px;
    padding: 7px 10px 7px 18px;
    border: 1px solid #ddd;
  }

.select2-selection--single{
     /*font-size: 20px;*/
    /*padding: 10px 20px 10px 25px !important;*/
    /*border: 1px solid #ddd !important;*/
    /*height: 45px !important; */
  }

  .tgl_lahir_paspor{
    font-size: 17px;
    padding: 6px 16px 6px 16px;
    border: 1px solid #ddd;
  }


  div.info-nik-box{
    position : absolute;
    right: -21px;
    background-color: white;
    top : 45px;
    border:1px solid #aaa;
    height: 260px;
    width: 400px; 
    z-index: 220;
    background-image: url(../../../media/images/dokumen/G01.png);
    background-size:100%; 
  }

  div.info-nik-panah{
    position : absolute;
    right:8px;
    top : -25px;
    background-image: url(../../../media/images/dokumen/G02.png);
    background-size:100%; 
  }


  div.info-sld{
    position : absolute;
    right: -31px;
    background-color: white;
    top : 45px;
    color: #999;
    border:1px solid #aaa;
    width: 350px; 
    font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif;
    font-size: 15px;
    padding: 13px 4px 12px 7px;
    z-index: 220;
  }

  div.info-sld-panah{
    position : absolute;
    right:14px;
    top : -25px;
    background-image: url(../../../media/images/dokumen/G02.png);
    background-size:100%; 
  }

  div.info-bukti-box{
    position : absolute;
    right: -31px;
    background-color: white;
    top : 45px;
    color: #999;
    border:1px solid #aaa;
    width: 350px; 
    font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif;
    font-size: 15px;
    padding: 13px 4px 12px 7px;
    z-index: 220;
  }

  div.info-bukti-panah{
    position : absolute;
    right:14px;
    top : -25px;
    background-image: url(../../../media/images/dokumen/G02.png);
    background-size:100%; 
  }
  
  
  div.info-datang-box{
    position : absolute;
    right: -31px;
    background-color: white;
    top : 45px;
    color: #999;
    border:1px solid #aaa;
    width: 350px; 
    font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif;
    font-size: 15px;
    padding: 13px 4px 12px 7px;
    z-index: 220;
  }

  div.info-datang-panah{
    position : absolute;
    right:14px;
    top : -25px;
    background-image: url(../../../media/images/dokumen/G02.png);
    background-size:100%; 
  }

  .triangle{
    margin:10px;
    float: left;
  }
    
    /* Kelompok 1 */
    .demo-arrow-up{
      width: 0; 
      height: 0; 

      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-bottom: 15px solid #888;
    }


.tombol{
  border-right: 1px solid #ccc;
}

.nomor{
  border-radius: 50px;
  font-weight: normal;
  color: #6c89c5;
}

.foto-confirm{
  width: 120px;
  height: 130px;
  background-color: #ccc;
  background-image:url(../../../media/images/photo/no-image.jpg);
  background-size:100%;
  margin-bottom: 30px;
}

  .input_paspor{
    font-size: 20px;
    padding: 10px 20px 10px 25px;
    border: 1px solid #ddd;
  }


  div.info-paspor-box{
    position : absolute;
    right: -21px;
    background-color: white;
    top : 45px;
    border:1px solid #aaa;
    height: 260px;
    width: 400px; 
    z-index: 220;
    background-image: url(../../../media/images/dokumen/G02.png);
    background-size:100%; 
  }

  div.info-paspor-panah{
    position : absolute;
    right:8px;
    top : -25px;
  }

  div.info-ktkln-box{
    position : absolute;
    right: -21px;
    background-color: white;
    top : 45px;
    border:1px solid #aaa;
    height: 260px;
    width: 400px; 
    z-index: 220;
    background-image: url(../../../media/images/dokumen/G03.png);
    background-size:100%; 
  }

  

  .paspor-info-depan{
    background-image: url(../../../media/images/dokumen/G03.png);
    background-size:100%; 
    background-repeat: no-repeat;
    min-height:200px; 
  }

  .nik-info-depan{
    min-height: 250px;

  }

  .contoh {
    min-height: 250px;
    margin: 4px;
  }

  div.info-ktkln-panah{
    position : absolute;
    right:8px;
    top : -25px;
  }

  .wajib_isi{
    color:red;
  }

  #form-legilasi,
  #form-legalisasi,
  #form-surat-keterangan,
  .form-default{   
    padding: 20px 70px;
  }

  .text-label{
      font-size: 14px !important;
      font-weight: bold;
      position: relative;    
      left: 0px;
      padding: 0px !important;
  }

  .btn-action{
    background: #939598;
    color: #fff;
    border: none;
  }


  .header-content{
    background: #EEEEEF;
    -webkit-box-shadow:10px 5px 10px #aaa;
    -moz-box-shadow:10px 5px 10px #aaa;
    box-shadow:10px 5px 10px #aaa;
    padding: 15px 25px;
  }

  .header-content .title-text{
    font-size: 20px;
    font-weight: normal;
    margin: 0 10px;
    color: #57585A;
  }

  .no{
    text-align: center;
    width: 60px;
  }

  .padding-5{
    padding-right: 5px !important;
    padding-left: 5px !important;
  }

  .btn-circle{
    border-radius: 50% !important;
  }

  /*pelayanan*/
  #table-pelayanan{

  }

  .table-piramry thead tr th,
  #table-pelayanan thead tr th{
    text-align: center;
    color: #939598;
    font-weight: normal;
  }

  .text-center{
    text-align: center;
  }

  /*end pelayanan*/

  .bg-secondary{
    background: #EEEEEF;
  }

  .form-item-pelayanan{
    display: none;
  }

  .form-item-pelayanan.active{
    display: block;
  }

  .btn-transpaant{
    background: none;
  }

/*  
  .datagrid-header{
     height: 38px !important; 
     background: #fff !important;
  }
  .datagrid-header-row td{  
    padding: 8px 0 !important;    
  }

  .datagrid-header td,
  .datagrid-body td{
    border-width: 0px !important;
    border-style: none !important;
  }

.datagrid-btable tr:nth-child(even) {background: #FFF}
.datagrid-btable tr:nth-child(odd) {background: #FAFAFA}*/

.master-layanan .panel .panel-heading{
  background: #F7F7F8;
}
.master-layanan .panel .panel-heading label{
  padding-top:5px;
  font-size: 24px;
  color: #45BD83;
}


#content-tree-layanan .datagrid-header{
   height: 38px !important; 
   background: #fff !important;
}

#content-tree-layanan .datagrid-header td,
#content-tree-layanan .datagrid-body td{
  border-width: 0px !important;
  border-style: none !important;
}

#content-tree-layanan .datagrid-header-row td{  
  padding: 10px 0 !important;    
}

#content-tree-layanan .datagrid-btable tr:nth-child(even) {
  background: #FFF
}
#content-tree-layanan .datagrid-btable tr:nth-child(odd) {
  background: #FAFAFA
}
#content-tree-layanan .datagrid-row-selected{
  background: #8CAFD9 !important;  
}
#content-tree-layanan .datagrid-header-row .datagrid-cell,
#content-tree-layanan .datagrid-header-row .datagrid-cell span{
    font-size: 14px !important;
    color: #939598 !important;
    text-align: center !important;
}

#content-tree-layanan .datagrid-cell,
#content-tree-layanan .datagrid-row-selected .datagrid-cell{
  font-size: 14px !important;
}

.icon-tree{
  font-size: 18px !important;
  border-radius: 0px !important;
}

.ubah-template{
  color: #B6B7BB;
}
#content-tree-layanan{
  width: 100%;
  margin-bottom: 10px !important;
}

#content-tree-layanan .datagrid-body{
  height: 350px !important;
  overflow: auto !important;


}

.table-layanan-dokumen .body{
  min-height: 400px; 

}

/*CSS FOR IMAGE UPLOAD WITH BOX*/
/* - CONTRIBUTE IQBALUNG - */
#imgContainer {
  width: 100%;
  text-align: center;
}
#imgArea {
  display: inline-block;
  margin: 0 auto;
  width: 100%;
  position: relative;
  background-color: #eee;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
}
#imgArea img {
    outline: medium none;
    height: 250px;
    object-fit: cover;
    position: static;
    margin: auto;
    width: 100%;
}
#imgChange {  
  bottom: 0;
  color: #FFFFFF;
  display: block;
  left: 0;
  line-height: 32px;
  width: 50px;
}
#imgChange input[type="file"] {
  bottom: 0;
  cursor: pointer;
  height: 100%;
  left: 0;
  margin: 0;
  opacity: 0;
  padding: 0;
  position: absolute;
  width: 100%;
  z-index: 0;
}

.thumbnail {
    position:relative;
    overflow:hidden;
}
 
.caption {
    position:absolute;
    top:-100%;
    right:0;
    background:rgba(154, 156, 158, 0.75);
    width:100%;
    height:100%;
    padding:2%;
    text-align:center;
    color:#fff !important;
    z-index:2;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.thumbnail:hover .caption {
    top:0%;
}

select option[disabled]{
  background-color:#ccc;
}


.day.disabled{
  border-radius: 0 !important;
  color: rgba(0,0,0,0.3) !important;
}

.akun_nama{
	text-align:center;
	font-size:20px;
	font-weight:bold;
	padding-top:20px;
}
.kotak_akun{
	height:110px;
}

.kotak_akun_kiri{
	height:100px;
	float:left;
	width:70%;
	padding:10px;
}

.kotak_akun_kanan{
	height:100px;
	float:left;
	width:30%;
	cursor:pointer;
}

.kotak_akun_bawah{
	height:40px;
	background-color:#efefef;
}

.kotak_akun_bawah_keluar{
	height:40px;
	float:left;
	width:40%;
	font-weight:bold;
	padding:10px;
	text-align:center;
	cursor:pointer;
}

.kotak_akun_bawah_password{
	height:40px;
	float:left;
	width:60%;
	font-weight:bold;
	padding:10px;
	text-align:center;
	cursor:pointer;
}

.link:hover{
	background-color:#eee !important;
	color:orange;
}

.item-kantor-perwakilan{
  border:1px solid #d2d6de !important;
  min-height:150px;  
}

.btn-dokumen-layanan{
  background: #E4E5E7;
  border-radius: 12px !important;
  width: 100%;  
}

.direct-chat-text{
  /*padding: 12px;*/
}

.bg-chat-me{
  /*color: #fff;*/
  background: #dff0d8;
  border-color: #dff0d8;
}
.bg-chat-me.direct-chat-text:before,
.bg-chat-me.direct-chat-text:after{
  border-left-color: #dff0d8;
}
.header-chat{
  border-bottom: 1px solid #ddd;
  padding: 10px;
}
.footer-chat{
  border-top: 1px solid #ddd;
  padding: 10px;
}
.field-chat{
  border: none;
}
.btn-chat:hover,
.btn-chat:active,
.btn-chat:focus,
.btn-chat{
  background: none;
  border: none;
}
.inbox > div{
  padding: 10px;
  border-bottom: 2px solid rgb(227, 238, 248);
}
.chat-inbox{
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 30px;
}
.preview-file{
  position: absolute;
  padding: 15px;
  background: #fff;
  display: block;
  width: 100%;
  max-height: 400px;
  overflow: auto;
  display: none;
}
.modal-pelayanan{
  position: fixed;
  width: 100%;
  height: 100%;
  display: table;
  background: rgba(255,255,255, 0.8);
  z-index: -1;
  opacity: 0;
  top: -760px;
}
.modal-pelayanan button{
  margin-left: 15px;
  margin-right: 15px;
  margin-bottom: 15px;
  background: none;
  border: none;
}
.modal-pelayanan .fa-close{
  position: absolute;
  right: 15px;
  top: 15px;
  font-size: 20px;
  cursor: pointer;
}

.btn-menu-pelayanan.disabled{
  background:#5cb85c;
  cursor: default;
}

.grafik{
  position: relative;
  margin-bottom: 20px;
  padding-top: 15px;
  padding-bottom: 15px;
  height: 200px;
}

.kotak-grafik{
  float: left;
}

.garis-grafik{
  position: relative;
  width: 96px;
  height: 5px;
  background: #B5B9BC;
  /* margin-bottom: 120px; */
}

.lingkaran-grafik{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #B5B9BC;
  position: absolute;
  top: 0;
  right: 0;
  margin-top: -13px;
}

.lingkaran-grafik.hijau{
  background: #4ABB6E;
}

.text-grafik{
  position: absolute;
  background: #6C8AC9;
  width: 160px;
  box-sizing: border-box;
  padding: 10px;
  text-align: center;
  color: #fff;
  /* float: left; */
}

.text-grafik:nth-child(odd){
  position: absolute;
  top: 50%;
  /* margin-top: 85px; */
}

.text-grafik.hijau{
  background: #4ABB6E;
}

.text-grafik:nth-child(odd) .fa{
  color: #6C8AC9;
  position: absolute;
  top: -26px;
  left: 50%;
  margin-left: -10px;
  font-size: 40px;
}

.text-grafik:nth-child(even) .fa{
  color: #6C8AC9;
  position: absolute;
  bottom: -23px;
  left: 50%;
  margin-left: -10px;
  font-size: 40px;
}

.text-grafik.hijau .fa{
  color: #4ABB6E;
}

.nav-wni{
  background: #6c89c5;
  color: #fff;
  padding: 15px;
  font-size: 22px;
}

.upper{
  opacity: 1;
  position: relative;
  z-index: 99;
}

.downer {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 50%;
    opacity: 0;
    transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
}

.upper:hover .downer
{
  opacity: 1;
  z-index: 100;
}

.upper:hover .upper
{
  opacity: 0.3;
  z-index: 1;
}


/* JOb ORDER */

.mt-3 {
  width: 100%;
  font-size: 1rem;
  margin-left: 0px!important;
}

label input[type=radio]
{
  display: none;
}

.card-input-element:checked+.card {
    border: #828282 1px solid;
}


.radio-button__control {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 12px;
    vertical-align: middle;
    background-color: inherit;
    color: #017b5f;
    border: 2px solid #666;
    border-radius: 24px;
}

.card-input-element:checked+.card .row div .radio-button__control {

    background-color: #828282;
}

.nav-profil-ketenagakerjaan
{
  width: 100%;
  background: #6c89c5;
}

.nav-profil-ketenagakerjaan li a
{
  padding : 20px!important;
  color: #fff;
  border: none;
}

.nav-profil-ketenagakerjaan li a:hover
{
  background: #4d6290;
  color: #fff;
}

.nav-profil-ketenagakerjaan>li.active>a
{
  background-color: #4d6290!important;
}

.nav-profil-ketenagakerjaan>li
{
  margin-left: 0px!important;
}
li.pip img
{
  width: 300px;
  height: auto;
  
}
li.pip
{
  padding:15px;
  display: inline-block; 
  position: relative;
}
li.pip span
{
  word-wrap: break-word;
  width:300px;
  display: block;
  text-align: center;
  font-weight:700;
  margin: 10px 0px 10px 0px;
}
.pip .closed {
    position: absolute;
    top: 15px;
    width: 35px;
    border-radius: 50%;
    height: 35px;
    /* padding: 9px; */
    padding-left: 12px;
    padding-top: 8px;
    right: 15px;
    background: #ddd;
    /* border-radius: 100%; */
}