@import url('https://fonts.googleapis.com/css2?family=Ubuntu+Condensed&display=swap');
 
  
  html {
    font-family: 'Ubuntu Condensed', sans-serif;
  }
  
  div {
    font-family: 'Ubuntu Condensed', sans-serif;
  }
  body {
    font-family: 'Ubuntu Condensed', sans-serif;
    background: #eceff8;
    overflow-x: hidden;
    overflow-y: visible;
  }
  
  input,
  button,
  select,
  optgroup,
  textarea   {
    font-family: 'Ubuntu Condensed', sans-serif;
  }

  
/* Left & Right */

.modal.modal-left .modal-dialog,
.modal.modal-right .modal-dialog {
  position: fixed;
  margin: auto;
  width: 500px;
  max-width: 100%;
  height: 100%;
  
}

.modal.modal-left .modal-content,
.modal.modal-right .modal-content {
  height: 100%;
  overflow-y: auto;
}

.modal.modal-left .modal-body,
.modal.modal-right .modal-body {
  padding: 15px 15px 80px;
  background-color: black;
}

.modal.modal-left.fade .modal-dialog {
  left: -500px;
  -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
  -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
  -o-transition: opacity 0.3s linear, left 0.3s ease-out;
  transition: opacity 0.3s linear, left 0.3s ease-out;
}

.modal.modal-left.fade.show .modal-dialog {
  left: 0;
}

.modal.modal-right.fade .modal-dialog {
  right: -500px;
  -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
  -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
  -o-transition: opacity 0.3s linear, right 0.3s ease-out;
  transition: opacity 0.3s linear, right 0.3s ease-out;
}

.modal.modal-right.fade.show .modal-dialog {
  right: 0;
}

.modal.modal-left .modal-content,
.modal.modal-right .modal-content,
.modal.modal-top .modal-content,
.modal.modal-bottom .modal-content,
.modal.modal-full .modal-content {
  border-radius: 0;
  border: none;
}

.modal.modal-left .modal-dialog.modal-sm,
.modal.modal-right .modal-dialog.modal-sm {
  width: 300px;
}

.modal.modal-left .modal-dialog.modal-lg,
.modal.modal-right .modal-dialog.modal-lg {
  width: 800px;
}

.modal.modal-left .modal-dialog.modal-xl,
.modal.modal-right .modal-dialog.modal-xl {
  width: 1140px;
}

/* Top and Bottom */

.modal.modal-top .modal-dialog,
.modal.modal-bottom .modal-dialog {
  position: fixed;
  margin: auto;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.modal.modal-top .modal-content,
.modal.modal-bottom .modal-content {
  height: auto;
  overflow-y: auto;
}

.modal.modal-top .modal-body,
.modal.modal-bottom .modal-body {
  padding: 15px 15px;
  background-color: #252525;
}

/* Top */

.modal.modal-top.fade .modal-dialog {
  top: -100%;
  -webkit-transition: opacity 0.3s linear, top 0.3s ease-out;
  -moz-transition: opacity 0.3s linear, top 0.3s ease-out;
  -o-transition: opacity 0.3s linear, top 0.3s ease-out;
  transition: opacity 0.3s linear, top 0.3s ease-out;
}

.modal.modal-top.fade.show .modal-dialog {
  top: 0;
}

/* Bottom */

.modal.modal-bottom.fade .modal-dialog {
  bottom: -100%;
  -webkit-transition: opacity 0.3s linear, bottom 0.3s ease-out;
  -moz-transition: opacity 0.3s linear, bottom 0.3s ease-out;
  -o-transition: opacity 0.3s linear, bottom 0.3s ease-out;
  transition: opacity 0.3s linear, bottom 0.3s ease-out;
}

.modal.modal-bottom.fade.show .modal-dialog {
  bottom: 0;
}

.modal.modal-bottom.fade .modal-dialog {
  bottom: -100%;
}

/* Full Screen */

.modal.modal-full .modal-dialog {
  position: fixed;
  margin: auto;
  width: 100%;
  max-width: 100%;
  height: 100%;
}

.modal.modal-full .modal-content {
  height: 100%;
  overflow-y: auto;
}

.modal.modal-full .close-modal {
  position: fixed;
  top: 0;
  right: 3rem;
}

/* Footer */

.modal-footer-fixed {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #fff;
  border-radius: 0;
}

/* XS */

.modal.modal-left.xs .modal-body,
.modal.modal-right.xs .modal-body {
  padding: 15px;
}

/* Full screen modal menu indicators */

a.has-sub:after { font-family: "FontAwesome"; }
a.has-sub:after { content: "\f107"; margin-left: 1rem; }
a.has-sub[aria-expanded="true"]:after { content: "\f106"; }


/* modal end */




.divider_l {
    display: block;
    text-align: center;
    /* margin: 1rem 0; */
    /* overflow: hidden; */
    white-space: nowrap;
   /* font-size: px;*/
}

.divider_l .divider-text_l {
    position: relative;
    display: inline-block;
    font-size: 1.5rem;
    padding: 0rem 1rem;
}

.divider_l.divider-primary_l .divider-text_l::before, .divider_l.divider-primary_l .divider-text_l::after {
    border-color: #eb2727;
    border-width: medium;
    
}

.divider_l .divider-text_l:before {
    right: 100%;
}

.divider_l .divider-text_l:after {
    left: 100%;
}


.divider_l .divider-text_l:before, .divider_l .divider-text_l:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 100vw;
    border-top: 1px solid rgba(67, 89, 113, 0.2);
}


.divider_l.divider-primary_l .divider-text_l::before, .divider_l.divider-primary_l .divider-text_l::after {
    border-color: #eb2727;
    border-width: 6px;
}


.login_ {
  
  background-color: rgb(255, 255, 255);
  /*padding: 40px 30px 30px 30px;*/
  /*border-radius: 10px;*/
  /*position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;*/
 /* -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: -webkit-transform 300ms, box-shadow 300ms;
  -moz-transition: -moz-transform 300ms, box-shadow 300ms;
  transition: transform 300ms, box-shadow 300ms;*/
  box-shadow: 10px 12px 10px rgb(0 0 0 / 45%)

}



@media (min-width: 400px) and (min-height: 500px) {

.login {
  overflow: hidden;
  background-color: white;
  /*padding: 40px 30px 30px 30px;*/
  /*border-radius: 10px;*/
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: -webkit-transform 300ms, box-shadow 300ms;
  -moz-transition: -moz-transform 300ms, box-shadow 300ms;
  transition: transform 300ms, box-shadow 300ms;
  /*box-shadow: 5px 10px 10px rgba(2, 128, 144, 0.2);*/
}
.login::before, .login::after {
  content: "";
  position: absolute;
  width: 600px;
  height: 700px;
  border-top-left-radius: 85%;
  border-top-right-radius: 87%;
  border-bottom-left-radius: 95%;
  border-bottom-right-radius: 90%;
  z-index: -1;
}
.login::before {
  left: 25%;
  bottom: -130%;
  background-color: rgba(69, 105, 144, 0.15);
  -webkit-animation: wawes 6s infinite linear;
  -moz-animation: wawes 6s infinite linear;
  animation: wawes 6s infinite linear;
}
.login::after {
  left: 30%;
  bottom: -125%;
  background-color: rgba(2, 128, 144, 0.2);
  -webkit-animation: wawes 7s infinite;
  -moz-animation: wawes 7s infinite;
  animation: wawes 7s infinite;
}



@-webkit-keyframes wawes {
  from {
    -webkit-transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
@-moz-keyframes wawes {
  from {
    -moz-transform: rotate(0);
  }
  to {
    -moz-transform: rotate(360deg);
  }
}
@keyframes wawes {
  from {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
}

.display-date {
  text-align: start;
  margin-bottom: 10px;
  font-size: 1.1rem;
  font-weight: 400;
  text-transform: uppercase;
  
}

.display-time {
  line-height: 1px;
  text-align: start;
  font-size: 1.1rem;
  font-weight: 600;
 /* border: 2px solid #ffd868;
  padding: 5px 20px;
  border-radius: 5px;
  transition: ease-in-out 0.1s;
  transition-property: background, box-shadow, color;
  -webkit-box-reflect: below 2px linear-gradient(transparent, rgba(255, 255, 255, 0.05));*/
}

.fs-7 {
  font-size: 0.8rem !important;
}

.fs-8 {
  font-size: 1.02rem !important;
}

.fs-88 {
  font-size: 1.09rem !important;
}

.fs-87 {
  font-size: 1.7rem !important;
}

.fs-86 {
  font-size: 1.3rem !important;
}


.bg_login
{
  background-color: rgba(255, 255, 255) !important;
}

.letter_spacing_1
{
  letter-spacing: 0.6px;
  
}

.blue_dark
{
  color:#012970 !important ;
}

.green_dark
{
  color:rgb(11, 62, 54) !important ;
}

.bg_blue_dark
{
  background-color:#012970;
}


/* table*/

td.wrapok {
  white-space:normal
}

table.dataTable>tbody>tr.child ul.dtr-details>li {
  border-bottom: 1px dashed rgb(128, 2, 2);
  padding: 0em 0;
}

table.dataTable>tbody>tr.child span.dtr-title {
  display: inline-block;
  min-width: 150px;
  font-weight: 400;
  color: black;
} 

table.dataTable>tbody>tr.child span.dtr-title br {
  content: "";
}

table.dataTable>tbody>tr.child span.dtr-title br:after {
  content: " ";
}



table.dataTable>tbody>tr.child span.dtr-data {
  
  color: black;
} 


.table th {
  text-transform: uppercase;
  font-size: 0.9rem;
  
}
.table td {
/*  text-transform: uppercase; */
  font-size: 0.9rem;

}

#data_pengguna.table th {
  text-transform: uppercase;
  font-size: 0.95rem;
  
}
#data_pengguna.table td {
/*   text-transform: uppercase; */
  font-size: 0.95rem;

  
}
td.highlight {
      color: #008000;
    /*  font-weight: bold;*/
  }


table.dataTable td {
  padding-right: 5px;
  padding-left: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
}

table.dataTable thead th,table.dataTable thead td {
padding: 10px 18px;

border-bottom: 1px solid black;

}


table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td.dtr-control:before, table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th.dtr-control:before {
  content: "<";
   background-color: #f5f5f9; 
  color: red;
}
table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before, table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before {
  top: 50%;
  left: 5px;
  height: 1em;
  width: 1em;
  margin-top: -6px;
  display: block;
  position: absolute;
  color: #080dff;

  border: 0 solid white; 
  border-radius: 1em; 
  box-shadow: 0 0 0 #f5f5f9; 
  box-sizing: content-box; 

  text-align: center;
  text-indent: 0 !important;
  /* font-family: "Courier New",Courier,monospace; */
  line-height: 1em;
  content: ">";
   background-color: #f5f5f9;
  font-weight: bolder;
  font-size: 12px;
}


/*-- nav tabs --> */
/* Bordered Tabs */
.nav-tabs-bordered {
  border-bottom: 2px solid #cfcfcf;
}


.nav-tabs-bordered .nav-link:hover,
.nav-tabs-bordered .nav-link:focus {
  color: #4154f1;
}

.nav-tabs-bordered .nav-link.active,
.nav-tabs-bordered .nav-link.active:focus {
  background-color: #fff;
  color: #4154f1;
  border-bottom: 2px solid #4154f1;
}


.nav-tabs .nav-item .nav-link:not(.active) {
  background-color: #ffffff;
}

/* button */

.not_hover:hover {

  text-decoration: none;
 /* background: #75a4fa; */

}



.icon-up {
  position: relative;
  padding-left: 1.2em;
}

.icon-up::before {
  content: '>';
  display: block;
  position: absolute;
  transition: transform .2s ease;
  transform: rotate(0);
  left: 0;
  font-weight: 700;
  color:#eb2727;
 

}

.rotate.icon-up::before {
  transform: rotate(90deg);
  font-weight:700;
}

.aktif-side-bar
{
  border-right: rgb(158, 7, 7) solid 5px;
}


.no-round_
{
  border-radius:0;
}

.form-control2 {
  display: block;
  width: 100%;
  padding: 0.4375rem 0.6rem;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.53;
  color: #697a8d;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #d9dee3;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
 /* border-radius: 0.375rem;*/
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.input-group > .form-control2, .input-group > .form-select {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}

td.highlight2 {
  color: #008000;
  /*  font-weight: bold;*/
}


.form-floating > .form-control:focus ~ label::after, .form-floating > .form-control:not(:placeholder-shown) ~ label::after, .form-floating > .form-control-plaintext ~ label::after, .form-floating > .form-select ~ label::after {

  background-color: white;

}

.form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-select ~ label {
  opacity: 1;

}



div.tooltip-inner {
  max-width: 300px;
}


.latar_belakang
{
  background-color: #d3e7c6;
}

.latar_belakang2
{
  background-color: #f1ffed;
}


.latar_belakang3
{
  background-color: #eceef1;
}



.error_{
  border-left: 3px solid #696cff; 
 
}    

.error2_{
  border-left: 3px solid #0d7000; 
 
}  

.floating-label {
 
  font-size: 14px;

}

.minimal_tinggi
{
  min-height: 100%;
}


.cool-link {
  display: inline-block;
  color: #000;
  text-decoration: none;
}

.cool-link::after {
  content: '';
  display: block;
  width: 0;
  height: 3.5px;
  background: #000000;
  transition: width .3s;
}

.cool-link:hover::after {
  width: 100%;
  /*transition: width .3s; */
}

.cool-link_ {
  display: inline-block;
  color: #ffffff;
  text-decoration: none;
}

.cool-link_::after {
  content: '';
  display: block;
  width: 0;
  height: 2px;
  background: #d0c9fd;
  transition: width .3s;
}

.cool-link_:hover::after {
  width: 100%;
  /*transition: width .3s; */
}

.cool-link_2 {
  display: inline-block;
  color: #ffffff;
  text-decoration: none;
}

.cool-link_2::after {
  content: '';
  display: block;
  width: 0;
  height: 2px;
  background: #006920;
  transition: width .3s;
}

.cool-link_2:hover::after {
  width: 100%;
  /*transition: width .3s; */
}


table.dataTable td.dataTables_empty, table.dataTable th.dataTables_empty {
  color: darkred;
  font-style: italic;
  letter-spacing: 1px;
}


table#tabel_kiba.dataTable tbody tr:hover {
  background-color: rgb(228, 253, 220);
}



.select2--small
{
  font-style: italic !important;
  color:#00235f !important ;
  letter-spacing: 0.4px;
}

.select2-container--bootstrap-5 .select2-selection
{
font-size: .93rem !important;
letter-spacing: 0.6px;
}

.card hr {
  color: #8592a3;
  padding-top: 3px !important;
}

.echart_size_zero
{
  min-height: 1px !important;

}


.echart_size
{
  min-height: 400px !important;

}

.echart_font
{
    font-family: 'Ubuntu Condensed', sans-serif;
}

#kiba_aset_tiga.table.dataTable td {
  padding-top: 3px;
  padding-bottom: 3px;
}

#kiba_aset_dua.table.dataTable td {
  padding-top: 3px;
  padding-bottom: 3px;
}

#kiba_aset_satu.table.dataTable td {
  padding-top: 3px;
  padding-bottom: 3px;
}

/*
#kiba_aset_tiga.table.dataTable {
    min-height: 350px;
}

#kiba_aset_dua.table.dataTable {
    min-height: 350px;
}


#kiba_aset_satu.table.dataTable {
    min-height: 350px;
}

*/
table#kiba_aset_satu.dataTable tbody tr:hover {
  background-color: rgb(235, 244, 250);
}

table#kiba_aset_dua.dataTable tbody tr:hover {
   background-color: rgb(235, 244, 250);
}

table#kiba_aset_tiga.dataTable tbody tr:hover {
    background-color: rgb(235, 244, 250);
}


#kiba_aset_tiga_filter.dataTadataTables_filter {
    text-align: right
}


.form_form
{
  width: 100%;
}