#settingSidebar {
    min-width: 250px; /* Default lebar sidebar */
    max-width: 300px; /* Batas maksimum lebar */
    transition: all 0.3s ease; /* Animasi transisi untuk toggle sidebar */
}

#settingSidebar a.title{
    color: #495057 !important;
}

#settingSidebar a.nav-link i{
    color: #495057 !important; /* Warna teks link */
    font-size: 0.9rem; /* Ukuran teks lebih kecil */
}

#settingSidebar a.nav-link {
    color: #495057 !important; /* Warna teks link */
    font-size: 0.9rem; /* Ukuran teks lebih kecil */
}

#mobileButton {
    display: none; /* Default: disembunyikan */
}

@media (max-width: 767.98px) {
    #mobileButton {
        display: block; /* Tampil hanya di ukuran mobile */
        align-items: center;
        justify-content: center;
    }
}



.sidebar-divider {
    border-color: #dcdcdc; /* Warna garis pembagi */
}

@media (max-width: 768px) {
    #settingSidebar {
        min-width: 0; /* Lebar minimal untuk layar kecil */
        max-width: 100%; /* Sidebar memenuhi layar kecil */
        position: fixed; /* Sidebar tetap di layar */
        z-index: 1050; /* Agar berada di atas elemen lain */
    }
}


#canvasIncome{
    height: 100%;
    width: 100%;
}

#canvasWahana{
    height: 100%;
    width: 100%;
}

.chart-container {
    height: 100% !important; /* Sesuaikan tinggi chart agar pas dengan tampilan */
    width: 100%;   /* Memastikan chart mengisi lebar kontainer */
}

body.body{
	background: #dbd4bd !important;
    height: 100vh;
}


nav{
    border-radius:  0 10px 10px 0 !important;
}

.sidebar_2 .nav-item .nav-link {
    color: #555f61 !important; /* Ubah dengan warna yang Anda inginkan */
}

.sidebar_2 .nav-item .nav-link i{
    color: #555f61 !important; /* Ubah dengan warna yang Anda inginkan */
}

hr.sidebar-divider.dark{
    background: #555f61 !important; /* Ubah dengan warna yang Anda inginkan */
    color: #555f61 !important; 
    opacity:0.25;
    /* Ubah dengan warna yang Anda inginkan */
}

.custom-legend {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
}

.legend-item {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.chartjs-legend {
    display: none !important;
}

.legend-color {
    width: 12px;
    height: 12px;
    margin-right: 8px;
    border-radius: 2px;
    display: inline-block;
}



.sidebar_2{
    width: 18rem !important;
}

.sidebar_2.open {
    width: 10rem !important;
}


.dark-f{
   color: #555f61 !important;  
}

.nav_hover{

 color: #555f61 !important;
}

.nav_hover:hover{
    background: #c1c7c9 !important;
}
li a.button{
    background: #f57e12 !important;
    color: #fff !important;
}

div button.orange{
    background: #f0531c !important;
    color: #fff !important;
}

.orange{
    background: #f0531c !important;
    border: #fff;
    color: #fff !important;
}

.page-item.active .page-link{

    background: #f57e12 !important;
    border-color: #f57e12 !important;
}

a.page-link.dark{
    color: #858796;
}

.modal-backdrop {
    z-index: 0 !important;
}

.modal {
    z-index: 1050 !important;
}

.modal-dialog {
    z-index: 1060 !important;
}

.modal-content {
    z-index: 1070 !important;
}
.btn-font{
    font-size: 0.8rem !important;
}

.btn-font-2{
    font-size: 0.77rem !important;
}

.btn-font-3{
    font-size: 0.75rem !important;
}

.clr-warn{
    color: #47221c !important;
}

.scrollable {

    width: 300px; /* Lebar div */
    height: 600px !important; /* Tinggi div */
    overflow-y: auto; /* Menambahkan scroll vertikal jika diperlukan */
    overflow-x: hidden;
    padding: 4px ; /* Ruang di dalam div */
}

.Ddmenu{
    position: absolute !important;
    z-index: 1050 !important;
    pointer-events: auto !important;
    top: 0;
    right: 0
}



.scrollable::-webkit-scrollbar {
    width: 5px; /* Lebar scrollbar */
}

.scrollable::-webkit-scrollbar-track {
    background: #f1f1f1; /* Warna latar belakang track scrollbar */
    border-radius: 10px; /* Sudut track yang melengkung */
}

.scrollable::-webkit-scrollbar-thumb {
    background: #888; /* Warna thumb scrollbar */
    border-radius: 10px; /* Sudut thumb yang melengkung */
}

.scrollable::-webkit-scrollbar-thumb:hover {
    background: #555; /* Warna thumb saat hover */
}

.scrollablee {
    position:relative !important;
    width: 300px; /* Lebar div */
    height:300px; /* Tinggi div */
    overflow-y: auto; /* Menambahkan scroll vertikal jika diperlukan */
    overflow-x: hidden;
    padding: 10px; /* Ruang di dalam div */
}

.scrollablee::-webkit-scrollbar {
    width: 5px; /* Lebar scrollbar */
    height: 5px;
}

.scrollablee::-webkit-scrollbar-track {
    background: #f1f1f1; /* Warna latar belakang track scrollbar */
    border-radius: 10px; /* Sudut track yang melengkung */
}

.scrollablee::-webkit-scrollbar-thumb {
    background: #888; /* Warna thumb scrollbar */
    border-radius: 10px; /* Sudut thumb yang melengkung */
}

.scrollablee::-webkit-scrollbar-thumb:hover {
    background: #555; /* Warna thumb saat hover */
}

ul.toogled li a.button span{
    display: none;
    opacity: 0;
}

div.border{
  border-left: 4px solid #f57e12 !important;

}

div.border-top{
  border-top: 10px solid #f57e12 !important;

}

div.yellow{
    color:#fdb90c !important ;
}

div.borderr{
    border: 1px solid #000;
    border-radius: 2px;
}

.h-10{
    height: 100vh;
}

img.profile{
    width:2.3rem;
    height: 2.3rem;
    border-radius: 50%;
}

img.profile3{
    width:3.3rem;
    height: 3.3rem;
    border-radius: 50%;
}

img.profile2{
    width:1.5rem;
    height:2rem;
    border-radius: 50%;
}

button{
    border-style: none;
    outline: none;
}

div.column{
    flex-direction:column ;
}

.pointer{
    cursor: pointer;
}

.hover-red{

}

.hover-red:hover{
    color: #db2d21 !important;
   
}

select {
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 2px 12px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  outline: none;
}

select.daily{
  text-align: center;
  appearance: none; /* Removes default arrow */
}

select:focus {
  border-color: #888; /* Slightly darker on focus */
}

select::-ms-expand {
  display: none; /* Removes the arrow in IE */
}

.profile-big{
    width: 8rem !important;
    width: 8rem !important;
    border-radius: 50% !important;
}

.sort-btn{
    padding: 4px 8px;
  
    border: 1px solid #ccc;
    border-radius: 9px;
    color: #333;
     font-size: 14px;
     cursor: pointer;
     outline: none;

}
.index-10{
    z-index: 5 !important;
}

.trash{

}

.trash:hover{
    color: #e74a3b !important;
}

.sec{

}

.card-green{
    background-color: !important;
}

.sec:hover{
    color: #36b9cc !important;
}

.grey{
    background: #f2f3f4 !important;
}

.dead{
    background: #dadedf !important;
}
button.olive-hover{
    font-weight: 700;
    background-color: #768960 !important;
    border: #fff;
    color:#fff;
}

button.olive-hover:hover{
    background-color: #A3B285 !important;
    color:#fff;
}

 button.orange-hover {
   font-weight: 700;
    background-color:#dc8029 !important;
    border: #fff;
    color:#fff;
}

button.orange-hover:hover {

    background-color: #cc7421 !important;
    color: #fff;
   
}

.round{
    border-radius: 10px;
}

@keyframes showtop{
 from{
    opacity: 0;
    transform: translate(0,100px);
 }to{
    opacity: 1;
    transform: translate(0,0);
 }
}

@keyframes fadeLeftAnimation {
from {
        opacity: 1;
        transform: translate(0,0);
    }
    to {
        opacity: 0;
        transform: translate(-40px,0);
    }
}

.animationTop{
    animation: showtop 0.5s ease-in-out 1 forwards !important;
}

.fadeLeft{
    animation: fadeLeftAnimation  0.5s ease-in-out 1 forwards !important;

}


.delay-01{
    animation-delay:0.1s !important;
}
.delay-02{
    animation-delay:0.2s !important;
}
.delay-03{
    animation-delay:0.3s !important;
}
.delay-04{
    animation-delay:0.4s !important;
}
.delay-05{
    animation-delay:0.5s !important;
}

.delay-06{
    animation-delay:0.6s !important;
}

.delay-07{
    animation-delay:0.7s !important;
}
.delay-08{
    animation-delay:0.8s !important;
}
.delay-09{
    animation-delay:0.9s !important;
}
.delay-10{
    animation-delay:1s !important;
}

.delay-11{
    animation-delay:1.1s !important;
}

.delay-12{
    animation-delay:1.2s !important;
}

.delay-13{
    animation-delay:1.3s !important;
}


.delay-14{
    animation-delay:1.4s !important;
}

.delay-15{
    animation-delay:1.2s !important;
}

.full{
    height: 100% !important;
}

p,h1,h2,h3,h4,h5{
    cursor: default; !important;
}

.text-xss{
    font-size: 0.8rem !important;
}

.text-xsss{
    font-size: 0.92rem !important;
}