/* //change bootstrap dark color  */
:root {
  --bs-dark: #17283a; /* Change the primary dark color */
  --bs-dark-rgb: 26, 26, 46;
  --bs-body-bg: #121212; /* Change background */
  --bs-body-color: #e0e0e0; /* Text color */
  --table-dark: #17283a;
}
.bg-dark {
  background-color: var(--bs-dark) !important;
}
.text-dark {
  color: var(--bs-dark) !important;
}

.table-dark{
  background-color: var(--bs-dark) !important;;
}

/* // End change bootstrap dark color  */

.collapsible {
    /* background-color: #777; */
    color: white;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
  }
  
  .active, .collapsible:hover {
    /* background-color: #555; */
  }
  
  .content {
    padding: 0 18px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.1s ease-out;
    background-color: #4d72de;
    font-size: 10pt;
    
  }

  .content a {
    text-decoration: none;
  }

  .collapse-item{
    padding: 20px 0 20px 0;
  }

  .focus-item{
    padding: 0 -8rem;
    /* background-color: #9a11d5; */
  }
  .nav-link.active{
    color:#fff;
    font-weight: bolder;
    background-color: #55637b;
  }

    .hidden-sidebar {
    display: none;
}
.focus-item {
  /* background-color: #ffffff; White background */
  /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); Sharp shadow for elevation */
  transition: transform 0.2s ease, box-shadow 0.2s ease; /* Smooth transition */
  /* border-radius: 8px; Rounded corners */
  /* padding: 8px 12px; Add some padding */
  /* margin-bottom: 10px; Space between items */
}

.focus-item:hover {
  transform: translateY(-4px); /* Slight lift on hover */
  /* box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3); Sharper and more intense shadow on hover */
}

.nav-link-primary {
  color: #000; /* Default text color */
  text-decoration: none; /* Remove underline */
}

.nav-link-primary.active {
  color: #0d6efd; /* Active link color (Bootstrap primary) */
}

.nav-link-primary:hover {
  color: #0d6efd; /* Change text color on hover */
}

/* mobile responsive */
@media (max-width: 768px) {
  #accordionSidebar {
      display: none;
  }
  .focus-item {
     text-align: center; 
    font-size: 10px;
  }

  .card-header h4{
    display: none;
  }
}

@media (min-width: 768px) {
  #accordionSidebar {
      display: block;
  }
}

.header-x {
  background-color: #6610f2;
}

.tblinput {
  max-width: 190px;
  background-color: #f5f5f5;
  color: #242424;
  padding: .15rem .5rem;
  min-height: 40px;
  border-radius: 4px;
  outline: none;
  border: none;
  line-height: 1.15;
  box-shadow: 0px 10px 20px -18px;
}

.tblinput:focus {
  border-bottom: 2px solid #5b5fc7;
  border-radius: 4px 4px 2px 2px;
}

.tblinput:hover {
  outline: 1px solid lightgrey;
}

 
/* Make Delete btn visible on hover in TRansactionTbl */
.transaction-row:hover .delete-btn {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}
.delete-btn {
  visibility: hidden;
  opacity: 0;
}
/* End Make Delete btn visible on hover in TRansactionTbl */

/* Active Link  */

.nav-link {
  color: #6c757d; /* Default color */
  transition: color 0.3s ease, background-color 0.3s ease;
}

.nav-link:hover, .nav-link.active {
  color: #ffffff !important;
  background-color: #23374c !important;
  font-weight: bold;
  border-radius: 5px;
}

/* End active link  */

.select-sm {
  font-size: 0.875rem; /* Smaller font size */
  padding: 0.25rem 2.5rem; /* Padding: top/bottom 0.25rem, left/right 1rem */  height: 2rem; /* Adjust height if needed */
  border:solid 1px #17283a;
  margin-left: 0.25rem;
}

.table-sm th, .table-sm td {
  padding: 2px !important;  /* Reduce padding for smaller row height */
  font-size: 12px;  /* Adjust font size */
}

/* CSS Table for responsive table */
.table-responsive {
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
  .table th, .table td {
      font-size: 12px; /* Smaller text for mobile */
      padding: 8px; /* Reduced padding */
  }

  .table input {
      font-size: 12px; /* Smaller input text */
      padding: 5px; /* Smaller padding */
  }

  /* Optional: Resize the table on smaller screens */
  .table {
      font-size: 10px; 
  }
}
/* End CSS Table for responsive table */

.clickable-cell {
  cursor: pointer;
  padding: 5px !important;  /* Reduce padding for smaller row height */
  vertical-align: middle;   /* Center content vertically */
}

.clickable-cell input {
  width: 100%;
  height: 15px; /* Adjust input height */
  font-size: 12px; /* Reduce font size for a more compact look */
  padding: 2px 5px; /* Reduce input padding */
}


    .member-count-chart {
        position: relative;
        width: 100%;
        padding: 5px;
        /* text-align: center; */
        color: #333;
        font-weight: bold;
        background: linear-gradient(135deg, #FFD700, #FFEA70); /* Gradient yellow */
        overflow: hidden;
        border-radius: 15px;
    }

/* Chart CSs  */
 


    /* Abstract Shapes */
    .member-count-chart::before,
    .member-count-chart::after {
        content: '';
        position: absolute;
        width: 100px;
        height: 100px;
        background: rgba(255, 193, 7, 0.3); /* Lighter yellow */
        border-radius: 50%;
        z-index: 0;
    }

    .member-count-chart::before {
        top: -20px;
        left: -30px;
    }

    .member-count-chart::after {
        bottom: -30px;
        right: -20px;
    }

    h2 {
        position: relative;
        z-index: 1;
    }
 

/* End chart css  */

/* Adjust row height */
.datatable tbody tr {
  height: 10px; /* Adjust this value for row height */
}

/* Adjust text size for table data */
.datatable tbody td {
  font-size: 10px; /* Adjust text size to 12px */
  text-transform: capitalize;
}

/* Adjust text size for table headers (optional) */
.datatable thead th {
  font-size: 10px; /* Adjust header text size to 12px */
}

.datatable tfoot {
  font-size: 10px; /* Adjust header text size to 12px */
}
 

.net-income-svg {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" opacity="0.1"><circle cx="20" cy="30" r="15" fill="%23faa592"/><circle cx="80" cy="10" r="25" fill="%23faa592"/><circle cx="150" cy="50" r="10" fill="%23faa592"/><circle cx="40" cy="120" r="20" fill="%23faa592"/><circle cx="180" cy="150" r="12" fill="%23faa592"/><circle cx="100" cy="180" r="18" fill="%23faa592"/></svg>');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: auto 70%;
 }

 .extra-large-text{
  font-size: clamp(54px, 5vw, 80px) !important;

}

  .scrollable-column {
    max-height: 100vh; /* Limit the height to the full viewport */
    overflow-y: auto; /* Enable scrolling */
  }
  .fixed-column {
    position: sticky;
    top: 0;
    height: 100vh; /* Full height to match the viewport */
    overflow: hidden; /* Prevent scrolling */
  }