:root{
  --bg-navbars:#F2F2F2;
}

@font-face {
   font-family: 'candara';src: url('../fonts/Candara.ttf') format('truetype'); 
  }
@font-face {
   font-family: 'Glyphicons Halflings';
   src: url('../fonts/glyphicons-halflings-regular.eot');
   src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),          url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

.text-white{
	color:white;
	}
.text-gray{
	color:gray;
	}
.text-disabled{
	color: #E4E4E4;
	}  
.pull-right {
  float: right !important;
}

.text-keterangan{
  font-size: 80%;
  color: gray;
  font-weight: normal;
}
.my2-preloader{
	position:absolute;
  left:45%;
  right:55%;
  margin-left:auto;
  margin-right:auto;
  margin-top:10%;
	z-index:99999 !important;
	opacity:0.3!important;
  width: 100px;
  height: 100px;
  border: 10px solid #C6FDF8;
  border-top: 10px solid red;
  border-bottom: 10px solid blue;
  border-radius: 50%;
  animation: spin 2s linear infinite;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  -moz-animation: spin 2s linear infinite; 
  -o-animation: spin 2s linear infinite; 
  -ms-animation: spin 2s linear infinite; 
	}

.my-preloader{
	position:absolute;
  left:45%;
  right:55%;
  margin-left:auto;
  margin-right:auto;
  margin-top:10%;
	z-index:99999 !important;
	opacity:0.3!important;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  border: 10px solid white;
  border-top: 10px solid #747474;
  animation: spin 2s linear infinite;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  -moz-animation: spin 2s linear infinite; 
  -o-animation: spin 2s linear infinite; 
  -ms-animation: spin 2s linear infinite;   
}
.splash-info{
	position:absolute;
  left:0;
  right:0;
  margin-left:auto;
  margin-right:auto;
  margin-top:10%;
  width: 300px;
  height: auto;
  padding:10px;  
  z-index:99999 !important;
  border: 1px solid #F0F0F0;
  border-radius: 10px;
  border-left:10px solid #C4C4C4;
  border-right:10px solid #C4C4C4;
  background-color: #FEFDD8;
  box-sizing: content-box;
}


a:hover{
  text-decoration: none;
}
.bare-select{
  /*select style*/
  border: #DADADA thin solid;
  padding:0px 4px 0px 4px;
  font-size: small;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.badge-select{
  border: 1px solid #EAEAEA;
  border-radius:14px;
  padding:2px 4px 2px 4px;
  appearance: none;
  font-size: 0.85em;
  font-weight: bolder;
  color: gray;
  background-color: #EAEAEA;
  text-align: center;
  -webkit-appearance: none;
  -moz-appearance: none;
  transition: background-color linear 0.15s;
  }
.badge-select option{
  outline: 1px solid #ccc;
  background-color:gray;
  color:white;
  border: solid thin gray;
  border-radius: 4px;
}
.badge-select option:hover{
  background-color: #5D5D5D;
}
.badge-select:hover{
  border: 1px solid #DBDBDB;
  background-color: silver;
  color: #5C5C5C;
  cursor: pointer;
  transition: background-color linear 0.15s;
  }

/*menu*/

#left-menu .dropdown-toggle:hover{
  color: #4FFFFF;
}

#left-menu .dropdown-toggle:after {
   font-family: FontAwesome;
   content: "\f104";
   display: inline-block;
   vertical-align: middle;
   font-weight: 900;
   float: right;
}
#left-menu .dropdown-toggle.active:after{
   font-family: FontAwesome;
   content: "\f107";
   display: inline-block;
   vertical-align: middle;
   font-weight: 900;
   float: right;
}

#left-menu .dropdown-menu li a:before{
   font-family: FontAwesome;
   content: "\f10c";
   display: inline-block;
   vertical-align: middle;
   margin-right: 0.7em;
   font-size: 0.8em;
}
#left-menu .dropdown-menu li a:hover:before{
   font-family: FontAwesome;
   content: "\f111";
   color: #00FF40;
}
.list_no_arrow {
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
}

/* style untuk dataTable2 */
/* style ini berhubungan dengan dataTable DOM (di JS)*/
.search{float: right;}
.search input:hover,.top select:hover { background-color: #FFFFCC;}
.x{border: #EEEEEE thin solid; background-color: #F4F4F4; border-radius: 5px; padding: 5px 5px 0px 5px; margin-bottom: 10px;}
.pages{float: right;}
.info{float: left;}

/* dataTable search */
input[type=search]{
  padding:1em;
}

thead{
    background-color: #00B9B9!important;
    color: white;
    font-size: 0.9em;
    font-weight: bold;
}
table.table td,table.table th{
  border-color: #E1FEFF;
}
/*menu*/
.ajax-menu{
  cursor: pointer;
}
/*teks kecil di bawah objek, sebagai keterangan*/
.petunjuk{
  margin-top: -0.8em;
  font-size: 0.8em;
  color: maroon;
  cursor: pointer;
}
.petunjuk:hover{
  font-weight: bolder;
}

input:focus:not(.err_sty), select:focus:not(.err_sty), area:focus:not(.err_sty){
  background-color: #FFFFF0;
  border-color: teal!important;
  box-shadow: none!important;
}
select:-moz-focusring{
  color:transparent;
  text-shadow: 0 0 0 black;
}
.err_sty{
  background-color: #FFF4F4;
  border-color:red;
}
.caption{
  color: #FFFFFF;
  font-size: 1.5em!important;
  font-family: candara;
  font-style: italic;  
}
.separator{
  border-bottom: 1px solid #009D9D;
  margin: 0 1em 0 1em;
}
.iconic{
  opacity: 0.8;
  margin-right: 0.5em;
  font-weight: normal;
}
.iconic.fa,.iconic .fa{
  font-size: 1.2em;
}
.iconic:hover{
  opacity: 1;
  cursor: pointer;
}
[class^="icon-"]{
  font-size: 1.2em;  
  display: inline-block;
  vertical-align: middle;
  font-weight: normal;
  font-style: normal!important;
}
[class^="icon-"]:hover{
  filter: invert(1);  
  }
  
/* icon operasional */
.icon-delete:before{
   font-family: FontAwesome;
   content: "\f014";
   color: #B90000;
  }
.icon-edit:before{
   font-family: FontAwesome;
   content: "\f044";
   color: #800040;
  }
.icon-file:before{
   font-family: FontAwesome;
   content: "\f15c";
   color: #046AD0;
  }
.icon-list:before{
   font-family: FontAwesome;
   content: "\f03a";
   color: #11A6C6;
  }
.icon-plus:before{
   font-family: FontAwesome;
   content: "\f055";
   color: green;
  }
.icon-print:before{
   font-family: FontAwesome;
   content: "\f02f";
   color: #0000A0;
  }
.icon-money:before{
   font-family: FontAwesome;
   content: "\f0d6";
   color: #FF8040;
  }

.devoops-modal[class*="col"]{
  padding:0;
}
.modalclose{
  position: absolute;
  color:blue;
  left:50%;
  top:25%;
  margin-left: auto; 
  margin-right: auto; 
  z-index: 15000; 
  font-size: 2em;
  opacity:0.1; 
  cursor:pointer;
}
.modalclose:hover:after{
  content:"Close";
}

/*tampilan tabel pada HAPE*/
@media screen and (max-width: 600px) {
  .search{float: left;width: 100%;}
  .pages{float: left;}
}

/*sembunyikan kolom tabel KECUALI kelas ini*/
@media screen and (max-width: 600px) {
  th:not(.shw),td:not(.show-on-small-view){
    display:none;
  }
}

/*untuk dicetak*/
@media print{
  .dokumen{
    font-size: 9pt!important;
  }
}
@page{
  size: a4;
  margin-top:2cm;
  margin-bottom:2cm;
  margin-left:0.5cm;
  margin-right:0.5cm;
}
@media all{
  .perjanjian{
    padding-right:1cm;
    padding-left:2cm; 
  }
  .perjanjian .pasal{
    display: table;
    page-break-inside: avoid;
  }
  .perjanjian li,.perjanjian p,.perjanjian table{
    page-break-inside: avoid;
  }
  .dokumen{
    page-break-before: always;
    page-break-inside: avoid;
    padding: 0px;
  }
  .dokumen:first-of-type {
    page-break-before: avoid;
  }  
  .dokumen .full-height{
    height:100%;
    /*21x29,7cm*/
  }

  .box-lampiran{
    margin-top: 1em;
    border:1px black solid;
    padding:5px 2em 5px 2em;
    border-radius:2px;
    font-weight: bold;
    display: block;
  } 
  .box-footer{
    /* box untuk tombol */
    -webkit-border-radius: 3px 3px 0 0;
    -moz-border-radius: 3px 3px 0 0;
    border-radius: 3px 3px 0 0;
    color: gray;
    font-size: 14px;
    position:relative;
    overflow: hidden;
    background: #F7F7F7;
    height: 38px;
    padding:5px;
  }
  .dokumen li,.dokumen p{
    margin-top: 0.2em;
  }
  .dokumen table tr th,.dokumen table tr td{
    padding: 4px 10px 4px 10px;
    vertical-align: top;
  }
  .border-top{
    border-top:1px solid black;
  }
  .border-bottom{
    border-bottom:1px solid black;
  }
  .border-top-dashed{
    border-top:1px dashed black;
  }
  .border-bottom-dashed{
    border-bottom:1px dashed black;
  }
  .border-top-dotted{
    border-top:1px dotted black;
  }
  .border-bottom-dotted{
    border-bottom:1px dotted black;
  }

  .dokumen .blank{
    color:red;
  }
  .sub-item{
    font-weight: bold;
    margin-top: 1em;
    color:red;
    display: block;
  } 
  .middle{
    vertical-align: middle;
  } 
  .center{
    text-align:center;
  }
  .ttd{
    position: relative;    
    top: -1em;
    bottom:2em;
    margin-left: 2em;
  }
  .ttd-frame{
    height:5em;
  }
  .click-toggle{
    cursor: pointer;
  }
  .opacity-toggle{
    opacity: 0;
  }
}

/*datetime picker*/
th.switch:hover,th.next:hover,th.prev:hover{
  background-color: #00AAAA!important;
}
/*autocomplete sugestion agar tampak pada saat dimuat dalam modal*/
.ui-menu{
  z-index: 100000!important;
}
.ui-menu-item-wrapper{
  font-size: 90%;
}
.ui-menu-item-wrapper:hover{
  color:white;
  border:none;
  background: #009D9D;
}
/*menghilangkan box-header saat dalam modal*/
.devoops-modal-inner .box-header{
  display: none!important;
}
.datetimepicker{
  transform:translate(0,3.5em);
}

#sub-info:not(:empty){
  border-left: red solid 2px;
  color: gray;
  padding-left: 1em;
  margin-left: 1em;
}
#sub-caption:not(:empty){
  border-left: red solid 2px;
  color: #FFFFD9;
  font-size: smaller;
  padding-left: 1em;
  margin-left: 1em;
}
/*help*/
.help-doc{
  background-color: #00B9B9;
}

/*contextual menu*/
#onfly .pop{
    padding-left:0.6em;
    line-height: 2em;
  }
#onfly .pop a{
  color: whitesmoke!important;
}
#onfly .pop:hover{
    cursor: pointer;
    background-color: rgba(0,0,0,0.9);
  }
#onfly .fa{
  color: #00D2D2;
  margin-right: 0.25em;
}

/* icon print */
.print-link{
  background-color: white;
  border:1px whitesmoke solid;
  border-radius:3px;
  padding:2px 2px 2px 6px;
  left: auto;
  right: auto;
}
.print-link:hover{
  box-shadow: 1px 2px 2px;
}

/*Total JUMLAH*/
.total{
  padding: 2px 6px 2px 6px; 
  border-radius:3px;
  float: right !important;
}
  .editable{
    color: #9D4F00;
  }
  .editable:hover{
    cursor: pointer;
  }
  .editable input[type="text"]{
    width:200px;
  }
.btn-xs{
  margin-bottom: 0;
}

/* mengecilkan teks dalam LEGEND dalam name-box */
.box-name>legend{
  font-size: 1em!important;
}

/* kombinasi SPAN dan INPUT untuk diedit langsung ditempat */
.inline-edit>span:hover:after{
  font-family: FontAwesome;
  content: "\f044";
  font-size: 1.5em;
  margin-left: 0.5em ;
  color: #1B73DE;
  cursor: pointer;
}