@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap");

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");





body {
  font-family: "Poppins", sans-serif;
  font-size: 10pt;
  background-color: #ffffff;
  

}


a {
  text-decoration: none;
  
}


.sidebar {
  width: 240px;
  height: 100%;
  position: fixed;
  margin-left: -270px;
  transition: 0.4s;
  overflow: auto;

}





 
  .card-body{
    border: 0px;
  }


  .active-table{
    width: 100%
  }


  #myChart {
    max-width: 100%;
    height: auto;
    display: block;
  }

  .sub-menu {
    display: flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: #f4d30c; /* abu-abu */
    text-transform: uppercase;
    margin: 30px 15px 10px;
    padding-left: 5px;
  }
  
 
  .sub-menu::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid #f4d30c;
    margin-left: 10px;
  }
  
  a.menu {
    display: block;
    color: #c7c7c7;
    text-decoration: none;
    padding: 5px;
    margin: 5px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.3s ease;
  }
  
  a.menu:hover {
    background-color: #7f7315;
    color: #020000;
  }
  
  a.menu.actip {
    color: #000000;
    background-color: #f4d30c; /* Indigo-500 */
    font-weight: 600;
    padding: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }


    .dashed-line {
      border-top: 1px dashed black;
      margin: 10px 0;
  }








    .text-hijau{
      color: #f9c145
    }



    .bg-hijau{
      background-color:#136940
    }







    a.menu:hover:not(.actip) {
    margin-left: 10px;
    color:rgb(214, 218, 219);

    }

  @media only screen and (min-width: 768px){

    .active-main-content {
      margin-left: 240px;
    }

    .active-sidebar {
      margin-left: 0px;
    }


    #main-content {
      transition: 0.4s;
      
    }
    #navbar {
      transition: 0.4s;
    }



  




    
  }


  .btn-roll{
    transform: rotate(180deg)
  }





  .offcanvas{

    position: fixed;
    transition: 0.4s;
    overflow: auto;


  }

 




 



  .card{
    border-radius: 15px;
  }



.option-radius option {
  border-radius: 30px;
}


.dropzone{

  border-color: rgb(133, 132, 131) !important;
}

.dropzone .dz-preview .dz-image {
    display: flex;
    justify-content: center;  /* horizontal center */
    align-items: center;      /* vertical center */
    background-color: #f0f0f0; /* opsional: warna background */
    overflow: hidden;
}

/* Thumbnail image */
.dropzone .dz-preview .dz-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;      /* contain, bukan cover */
    object-position: center;  /* posisi di tengah */
}



a{

  color: #787878 ;
}





.bg-warning{

  background-color: #f4d30c !important;
}


.btn-warning,
.btn-info{

  background-color: #f4d30c !important;
  border-color: #f4d30c !important;
  color: #06103d !important;

}


.text-primary{

  color: #06103d !important;
}





.text-menu{

  color: #6d6211 !important;
}






.bg-primary{

  background-color: #06103d !important;
}


.btn-primary{

  background-color: #06103d !important;
  border-color: #06103d !important;

}

.btn-outline-primary{

  color: #06103d !important;
  border-color: #06103d !important;

  

}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    color: #fff !important;
    background-color: #06103d !important;
    border-color: #06103d !important;
}


.btn-outline-warning{

  color: #f4d30c !important;
  border-color: #f4d30c !important;

  

}

.btn-outline-warning:hover,
.btn-outline-warning:focus,
.btn-outline-warning:active {
    color: #fff !important;
    background-color: #f4d30c !important;
    border-color: #f4d30c !important;
}



.btn-outline-warning{

  color: #f4d30c !important;
  border-color: #f4d30c !important;

  

}

.btn-outline-info:hover,
.btn-outline-info:focus,
.btn-outline-info:active {
    color: #fff !important;
    background-color: #f4d30c !important;
    border-color: #f4d30c !important;
}


.search-input {
    background-color: #050d3c;
    border: 0;
    border-bottom: 2px solid rgb(106, 106, 106)!important;
    border-radius: 0 !important;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    /* Ikon search */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85zm-5.242 1.656a5 5 0 1 1 0-10 5 5 0 0 1 0 10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 14px;
    background-position: 0 50%; /* kiri, tengah */
    padding-left: 25px !important; /* ruang untuk ikon */
}



.search-input:focus,
.search-input:active {
    background-color: #0a1b7b !important;   /* mencegah putih */
    outline: none !important;
    box-shadow: none !important;               /* menghapus efek bootstrap */
    border-bottom-color: #f4d30c !important;   /* opsional: warna hijau saat aktif */
    color: #f4d30c !important;

}

.form-login:focus,
.form-login:hover,
.form-login:active {
    background-color: #06103d !important;   /* mencegah putih */
    outline: none !important;
    box-shadow: none !important;               /* menghapus efek bootstrap */
    border-bottom-color: #f4d30c !important;   /* opsional: warna hijau saat aktif */
    color: #f4d30c !important;

}


.form-login {
    background-color: #06103d;
    border: 0;
    border-bottom: 2px solid rgb(106, 106, 106)!important;
    border-radius: 0 !important;
    padding-left: 0.5rem;
    padding-right: 0.5rem;

}




.search-input::placeholder {
    color: rgba(169, 169, 169, 0.7) !important;  /* sedikit transparan biar cantik */
}