/*-------------------------------*/
/*           tabel            */
/*-------------------------------*/




h5 {
    text-align: center;
    font-size: 0.9em; /* Ukuran font header */
    font-weight: bold; /* Membuat teks lebih tebal */
    color: #007BFF; /* Warna teks biru */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /* Bayangan pada teks */
    letter-spacing: 1px; /* Menambah jarak antar huruf */
    text-transform: uppercase; /* Mengubah teks menjadi kapital seluruhnya */
    transition: all 0.3s ease; /* Transisi halus */
}

label value {
    text-align: center;
    font-size: 0.7em; /* Ukuran font header */
    font-weight: bold; /* Membuat teks lebih tebal */
    color: #2A004E; /* Warna teks hitam */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /* Bayangan pada teks */
    letter-spacing: 1px; /* Menambah jarak antar huruf */
    text-transform: uppercase; /* Mengubah teks menjadi kapital seluruhnya */
    transition: all 0.3s ease; /* Transisi halus */
}

body {
    position: relative;

    background-color: #F0F0D7;
    font-weight: bold; /* Membuat teks lebih tebal */
    color: #2A004E; /* Warna teks hitam */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /* Bayangan pada teks */
   
}

.input-custom {
  width: 50%;
  text-transform: uppercase;
  border: 2px solid #007BFF;
  font-size: 0.8em;
}



body,
html { height: 100%;}
.nav .open > a, 
.nav .open > a:hover, 
.nav .open > a:focus {background-color: transparent;}

}

/*-------------------------------*/
/*           Wrappers            */
/*-------------------------------*/

#wrapper {
    position: absolute;
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled {
    padding-left: 220px;
}

#sidebar-wrapper {
    z-index: 1000;
    left: 220px;
    width: 0;
    height: 100%;
    margin-left: -220px;
    overflow-y: auto;
    overflow-x: hidden;
    background: #80C4E9;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    font-weight: bold;
}

#sidebar-wrapper::-webkit-scrollbar {
  display: none;
}

#wrapper.toggled #sidebar-wrapper {
    width: 220px;
}

#page-content-wrapper {
    width: 98%;
  
}

#wrapper.toggled #page-content-wrapper {
    position: absolute;
    margin-right: -220px;
}

/*-------------------------------*/
/*     Sidebar nav styles        */
/*-------------------------------*/
.navbar {
  padding: 0;

}

.sidebar-nav {
    position: absolute;
    top: 0;
    width: 220px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar-nav li {
    position: relative; 
    line-height: 20px;
    display: inline-block;
    width: 100%;
}

.sidebar-nav li:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    height: 100%;
    width: 3px;
    background-color: #1c1c1c;
    -webkit-transition: width .2s ease-in;
    -moz-transition:  width .2s ease-in;
    -ms-transition:  width .2s ease-in;
    transition: width .2s ease-in;
}

.sidebar-nav li:first-child a {
    color: #fff;
    background-color: #4CAF50; /* Ganti dengan warna hijau lebih terang */
}

.sidebar-nav li:nth-child(5n+1):before {
    background-color: #ff9f00; /* Warna orange terang */
}

.sidebar-nav li:nth-child(5n+2):before {
    background-color: #3f51b5; /* Warna biru lebih cerah */
}

.sidebar-nav li:nth-child(5n+3):before {
    background-color: #00bcd4; /* Warna biru cyan */
}

.sidebar-nav li:nth-child(5n+4):before {
    background-color: #ff5722; /* Warna merah terang */
}

.sidebar-nav li:nth-child(5n+5):before {
    background-color: #9c27b0; /* Warna ungu terang */
}

.sidebar-nav li:hover:before,
.sidebar-nav li.open:hover:before {
    width: 100%;
    -webkit-transition: width .2s ease-in;
    -moz-transition:  width .2s ease-in;
    -ms-transition:  width .2s ease-in;
    transition: width .2s ease-in;
}

.sidebar-nav li a {
    display: block;
    color: #333; /* Ganti dengan teks lebih gelap agar kontras */
    text-decoration: none;
    padding: 10px 15px 10px 30px; 
     
}

.sidebar-nav li a:hover,
.sidebar-nav li a:active,
.sidebar-nav li a:focus,
.sidebar-nav li.open a:hover,
.sidebar-nav li.open a:active,
.sidebar-nav li.open a:focus {
    color: #fff;
    text-decoration: none;
    background-color: transparent;
}

.sidebar-header {
    text-align: center;
    font-size: 20px;
    position: relative;
    width: 100%;
    display: inline-block;
}

.sidebar-brand {
    height: 65px;
    position: relative;
    background: #f3f4f7; /* Warna latar belakang lebih terang */
    background: linear-gradient(to right bottom, #80d0c7 50%, #f3f4f7 50%); /* Gradient cerah */
    padding-top: 1em;
}

.sidebar-brand a {
    color: #333; /* Teks lebih gelap */
}

.sidebar-brand a:hover {
    color: #212121; /* Warna teks lebih gelap saat hover */
    text-decoration: none;
}

.dropdown-header {
    text-align: center;
    font-size: 1em;
    color: #ab9b9b; /* Teks lebih gelap */
    background: #e0f7fa; /* Latar belakang terang biru muda */
    background: linear-gradient(to right bottom, #b2ebf2 50%, #e0f7fa 50%); /* Gradient biru terang */
}

.sidebar-nav .dropdown-menu {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    border-radius: 0;
    border: none;
    background-color: #fafafa; /* Latar belakang terang */
    box-shadow: none;
}

.dropdown-menu.show {
    top: 0;
}



/*-------------------------------*/
/*       Hamburger-Cross         */
/*-------------------------------*/

.hamburger {
  position: fixed;
  top: 5px;  
  z-index: 999;
  display: block;
  width: 32px;
  height: 32px;
  margin-left: 15px;
  background: transparent;
  border: none;
}
.hamburger:hover,
.hamburger:focus,
.hamburger:active {
  outline: none;
}
.hamburger.is-closed:before {
  content: '';
  display: block;
  width: 100px;
  font-size: 14px;
  color: #fff;
  line-height: 32px;
  text-align: center;
  opacity: 0;
  -webkit-transform: translate3d(0,0,0);
  -webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed:hover:before {
  opacity: 1;
  display: block;
  -webkit-transform: translate3d(-100px,0,0);
  -webkit-transition: all .35s ease-in-out;
}

.hamburger.is-closed .hamb-top,
.hamburger.is-closed .hamb-middle,
.hamburger.is-closed .hamb-bottom,
.hamburger.is-open .hamb-top,
.hamburger.is-open .hamb-middle,
.hamburger.is-open .hamb-bottom {
  position: absolute;
  left: 0;
  height: 4px;
  width: 100%;
}
.hamburger.is-closed .hamb-top,
.hamburger.is-closed .hamb-middle,
.hamburger.is-closed .hamb-bottom {
  background-color: #1a1a1a;
}
.hamburger.is-closed .hamb-top { 
  top: 5px; 
  -webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed .hamb-middle {
  top: 50%;
  margin-top: -2px;
}
.hamburger.is-closed .hamb-bottom {
  bottom: 5px;  
  -webkit-transition: all .35s ease-in-out;
}

.hamburger.is-closed:hover .hamb-top {
  top: 0;
  -webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed:hover .hamb-bottom {
  bottom: 0;
  -webkit-transition: all .35s ease-in-out;
}
.hamburger.is-open .hamb-top,
.hamburger.is-open .hamb-middle,
.hamburger.is-open .hamb-bottom {
  background-color: #1a1a1a;
}
.hamburger.is-open .hamb-top,
.hamburger.is-open .hamb-bottom {
  top: 50%;
  margin-top: -2px;  
}
.hamburger.is-open .hamb-top { 
  -webkit-transform: rotate(45deg);
  -webkit-transition: -webkit-transform .2s cubic-bezier(.73,1,.28,.08);
}
.hamburger.is-open .hamb-middle { display: none; }
.hamburger.is-open .hamb-bottom {
  -webkit-transform: rotate(-45deg);
  -webkit-transition: -webkit-transform .2s cubic-bezier(.73,1,.28,.08);
}
.hamburger.is-open:before {
  content: '';
  display: block;
  width: 100px;
  font-size: 14px;
  color: #fff;
  line-height: 32px;
  text-align: center;
  opacity: 0;
  -webkit-transform: translate3d(0,0,0);
  -webkit-transition: all .35s ease-in-out;
}
.hamburger.is-open:hover:before {
  opacity: 1;
  display: block;
  -webkit-transform: translate3d(-100px,0,0);
  -webkit-transition: all .35s ease-in-out;
}

/*-------------------------------*/
/*            Overlay            */
/*-------------------------------*/

.overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(250,250,250,.8);
    z-index: 1;
}

.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 8888;
  background-color: #fff;
}
.preloader .loading {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  font: 14px arial;
}



/*tambahan */

/* Mengatur tampilan header tabel */
.table {
    text-align: left;
    font-size: 0.7em;

}




.table thead th {
    
    position: sticky;
    top: 0;
    z-index: 2; /* Pastikan z-index cukup tinggi */
    background-color: #AAB99A; /* Latar belakang agar tetap terlihat */
    white-space: nowrap; /* Mencegah teks membungkus */
    text-overflow: ellipsis; /* Jika teks terlalu panjang, tambahkan titik-titik (...) */
    overflow: hidden; /* Sembunyikan teks yang melebihi lebar */
    font-weight: bold; /* Membuat teks lebih tebal */
    color: #2A004E; /* Warna teks hitam */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /* Bayangan pada teks */
    letter-spacing: 1px; /* Menambah jarak antar huruf */
    text-transform: uppercase; /* Mengubah teks menjadi kapital seluruhnya */



    
}

/* Mengatur tampilan body tabel */
.table tbody {
    background-color: #D0DDD0; 
    white-space: nowrap; /* Mencegah teks membungkus */
    text-overflow: ellipsis; /* Jika teks terlalu panjang, tambahkan titik-titik (...) */
    overflow: hidden; /* Sembunyikan teks yang melampaui batas */
    font-weight: bold; /* Membuat teks lebih tebal */
    color: #2A004E; /* Warna teks hitam */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /* Bayangan pada teks */
    letter-spacing: 1px; /* Menambah jarak antar huruf */
    text-transform: uppercase; /* Mengubah teks menjadi kapital seluruhnya */
}

/* Mengatur tampilan sel tabel */
.table td {
    word-wrap: break-word; /* Membungkus kata panjang */
    white-space: normal; /* Membiarkan teks membungkus ke baris baru */
    overflow: hidden; /* Menyembunyikan teks yang melampaui batas */
}

/* Mengatur tampilan tabel secara keseluruhan */


/* Sticky header untuk tabel */

#sidebar-wrapper {
    z-index: 1000;
    left: 220px;
    width: 0;
    height: 100%;
    margin-left: -220px;
    overflow-y: auto;
    overflow-x: hidden;
    background: #80C4E9;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    font-weight: bold;
      background: linear-gradient(to right, #80C4E9, #1E90FF); /* Gradient biru langit ke biru terang */





/* tambahan */

/* Sidebar header style */
.sidebar-header {
    padding: 2px;
   
    text-align: center;
    border-bottom: 2px solid #444; /* Garis pemisah bawah */
}

/* Styling untuk brand logo */
.sidebar-logo {
   
    width: 120px; /* Agar tidak melebihi container */
    height: auto; /* Menjaga proporsi */
    margin: 0 auto; /* Menjaga posisi tengah */
    display: block; /* Memastikan tidak ada space tambahan */
    border-radius: 20%; /* Agar lebih bulat */
    object-fit: cover; /* Menyesuaikan gambar tanpa distorsi */
}



/* Styling untuk teks brand */

/* Efek hover pada brand */
.sidebar-brand a:hover {
    color: #79aefe; /* Ganti warna teks saat hover */
    text-decoration: underline;
}

/* Untuk memperbaiki tampilan di perangkat kecil */
@media (max-width: 768px) {
    .sidebar-header {
        text-align: left;
        padding: 15px;
    }

  
}

/* Styling Mobile*/
/* Tambahkan scroll horizontal untuk tabel di layar kecil */
.table-responsive {
    width: 100%; /* Pastikan tabel menggunakan lebar penuh */
    overflow-x: auto; /* Tambahkan scroll horizontal hanya saat diperlukan */
}

/* CSS MOdal sweetallert */

/* Mengubah ukuran font untuk title SweetAlert */
/* Mengubah tampilan title header */
.swal2-title {
    font-size: 0.7em; /* Ukuran font header */
    font-weight: bold; /* Membuat teks menjadi lebih tebal */
    color: #007BFF; /* Mengubah warna teks menjadi biru */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /* Memberikan bayangan pada teks */
    letter-spacing: 1px; /* Menambah jarak antar huruf agar lebih elegan */
    text-transform: uppercase; /* Membuat teks menjadi kapital semua */
    transition: all 0.3s ease; /* Menambahkan efek transisi halus */

}






    select {
  white-space: nowrap; /* Menghindari teks terpotong */
  overflow: hidden;
  text-overflow: ellipsis; /* Menampilkan '...' jika teks terlalu panjang */
}


/* Style untuk chart */



  .chart-container {
            width: 50%;  /* Mengatur lebar menjadi 40% dari layar */
            margin: 50px auto;
        }



/*datatables*/