@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;
  

}


.bg-primary{

  background-color: #fc6668 !important
}


.sudut{

  border-radius: 0px;
}


.text-emas{

  color:#A47F67
}


.text-success{

  color:rgb(39, 168, 125) !important;
}




@import url('https://fonts.googleapis.com/css2?family=DynaPuff:wght@400..700&family=Playwrite+GB+S:ital,wght@0,100..400;1,100..400&family=Sofia&display=swap');







.latin {
  font-family: "Playwrite GB S", cursive;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.dynapuff {
  font-family: "DynaPuff", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}


.sofia {
  font-family: "Sofia", cursive;
  font-weight: 400;
  font-style: normal;
}




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{

    margin: 5px;
    display: block;
    color:#000000;
    margin-left: 15px;
    margin-top: 20px;

    
  }

  a.menu {
    display: block;
    color:rgb(99, 96, 96);
    text-decoration: none;
    padding: 5px;
    margin-right: 15px;
    margin-left: 15px;

    }

  a.menu.actip {
    /* color:rgba(57, 226, 170, 0.418); */

    color: black;
    background-color: rgb(212, 203, 247);

   
    
    
    }





    .text-menu{
      color: #7854dd;
      font-weight: bold;
    }



    .bg-menu{
      background-color:#7854dd
    }







    a.menu:hover:not(.active) {
    margin-left: 10px;
    color:black;

    }

  @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;


  }

 




 



  


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


label{

  color: rgb(121, 115, 115);
}



.card {
  border: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  background-color: #f9f9f9;
}
.card-body {
  padding: 20px;
}
.card-body blockquote {
  font-style: italic;
  color: #555;
}
.blockquote-footer {
  margin-top: 15px;
  font-size: 0.9rem;
  color: #6c757d;
}
/* Custom styling for the carousel */
.carousel-inner {
  padding: 20px;
}
.carousel-item {
  transition: transform 0.8s ease, opacity 0.8s ease;
}



body {
    font-size: 16px; /* Ukuran default untuk desktop */
}

/* Saat layar lebih kecil dari 768px (HP) */
@media (max-width: 768px) {
    body {
        font-size: 14px; /* Ukuran lebih kecil untuk HP */
    }
}

/* Jika ingin lebih kecil untuk HP sangat kecil (max 480px) */
@media (max-width: 480px) {
    body {
        font-size: 12px; /* Ukuran lebih kecil lagi */
    }
}