.card {
    border: none;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 100%;
}

.card-body {
    padding: 10px;
    position: relative;
}

.form-label {
    font-weight: bold;
    color: #333;
    font-size: 12px;
}

select {
    border-radius: 8px;
    border: 1px solid #ff9058;
    padding: 10px;
    font-size: 12px;
    background-color: #fff;
    color: #333;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
	margin-left: 10px;
}

.canvas-container {
    width: 100%;
    height: 100px; /* Set the height of the chart */
    display: block;
}

canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    padding: 0;
    margin: 0;
}

.card h1,
.card h2,
.card h3,
.card h4,
.card h5,
.card h6 {
    font-size: 14px !important;  /* Smaller font size with !important */
    font-weight: bold;
    color: #fff;
    margin-bottom: 20px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 5px;
    text-align: center;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Adjust select elements with multiple attribute */
select[multiple] {
    height: auto;
    background-image: none; /* Remove arrow for multiple select */
    padding-right: 10px;
    overflow-y: auto;
}

.btn-group-custom button {
    margin: 2px;
    padding: 3px 7px;
    font-size: 10px;
}
.btn-group-custom button.selected {
    background-color: #007bff;
    color: white;
}

/* New styles for scaling buttons */
.tile {
    display: flex;
    flex-direction: column;
    padding: 10px;
    box-sizing: border-box;
    width: 100%;
    max-width: 300px; /* Adjust based on your design */
}

.header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 10px;
}

.btn {
    flex: 1 1 calc(25% - 10px); /* Adjust based on the number of buttons */
    margin: 5px;
    padding: 10px;
    font-size: 14px; /* Adjust font size as needed */
    box-sizing: border-box;
}

.content {
    flex: 1;
}

@media (max-width: 768px) {
    .btn {
        flex: 1 1 calc(50% - 10px); /* Adjust for smaller screens */
    }
}

.main-content {
    margin: 0 auto;
    padding: 0 25px;
}

.nav-box {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 15px;
    text-align: center;
}

.nav-box img {
    max-width: 100%;
    height: auto;
    margin-bottom: 15px;
}

.nav-pills .nav-link {
    font-weight: 700;
    color: #007bff;
    border-radius: 0.25rem;
    transition: background-color 0.3s, color 0.3s;
}

.nav-pills .nav-link.active {
    background-color: #007bff;
    color: #fff;
}

.nav-pills .nav-link:hover {
    background-color: #0056b3;
    color: #fff;
}

.btn-group .btn {
    margin-right: 5px;
}

.card {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-title {
    font-size: 1.25rem;
}

.position-absolute {
    z-index: 1;
}

.btn-group-custom .btn {
    margin-right: 5px;
}

.indicator-positive::before {
    content: '▲';
    color: red;
    margin-right: 5px;
}

.indicator-negative::before {
    content: '▼';
    color: green;
    margin-right: 5px;
}

.indicator-red {
    color: red;
  }
  .indicator-amber {
    color: orange;
  }
  .indicator-green {
    color: green;
  }
  

.form-control::placeholder {
    color: #6c757d;
  }

  .form-control:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  }

/* Increase specificity for custom input fields */
form .form-control.custom-input {
    height: 30px !important; /* Reduce the height */
    font-size: 14px !important; /* Smaller font size */
    padding: 5px 5px !important; /* Adjust padding */
    border-radius: 5px !important; /* Rounded corners */
    border: 1px solid #ced4da !important; /* Ensure border */
    color: #333 !important; /* Ensure text color */
    background-color: #fff !important; /* Ensure background color */
    box-shadow: none !important; /* Remove extra shadows */
}

.form-control.custom-input::placeholder {
    font-size: 12px !important; /* Ensure placeholder is smaller */
    color: #999 !important; /* Lighter placeholder color */
}

.form-control.custom-input:focus {
    border-color: #007bff !important; /* Focus color */
    box-shadow: none !important; /* Remove focus shadow */
}
  

.dropdown-toggle {
    height: 100%; /* Ensures the dropdown matches the height of the title */
    display: flex;
    align-items: center;
    padding: 0.45rem 0.9rem;
}
/* Modal styles */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: rgba(0, 0, 0, 0.5); /* Black background with opacity */
  }
  
  .modal-content {
    background-color: white;
    margin: 15% auto; /* 15% from the top and centered */
    border: 1px solid #888;
    max-width: 600px; /* Max width constraint */
    max-height: 400px; /* Max height constraint */
  }
  
  .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }


/* Light Mode - Keep the card-title purple */
.card-title {
    color: #6f42c1; /* Purple color in light mode */
}

.loan-checkbox {
	display:none;
}

.grid-loading-spinner {
	width: 20px;
}

.relative-container {
    position: relative; /* Ensure the parent container is relative for absolute positioning */
}

.fixed-loading-gif {
    position: absolute; /* Position the loading gif */
    top: 30%;          /* Adjust vertical position */
    left: 50%;         /* Center horizontally */
    transform: translate(-50%, -50%); /* Center the loading gif */
    width: 100px;      /* Width of the loading gif */
    background: white; /* Background color */
    z-index: 100;      /* Ensure it's above the chart */
}

.fixed-loading-gif img {
    max-width: 100%;   /* Responsive image */
    height: auto;      /* Maintain aspect ratio */
}

.pw-card-body-list ul {
    list-style-type: none; /* Removes default bullets */
    padding: 0; /* Removes default padding */
    margin: 0; /* Removes default margin */
}

.pw-card-body-list ul li {
    padding: 10px; /* Adds padding to list items */
    margin-bottom: 5px; /* Adds space between list items */
    border: 1px solid #ddd; /* Adds a border to list items */
    border-radius: 4px; /* Rounds corners of list items */
    background-color: #f9f9f9; /* Light background color */
}

.expandable-table tr {
  transition: background-color 0.3s; /* Smooth transition for hover effect */
}

.expandable-table tr:hover {
  background-color: lightblue !important; /* Light blue for hover, overrides any other background */
}

.group-level-0 {
  background-color: #d9d9d9; /* Light grey for top-level groups */
}

.group-level-1 {
  background-color: #e6e6e6; /* Slightly lighter grey for second-level groups */
}

.group-level-2 {
  background-color: #f2f2f2; /* Even lighter grey for third-level groups */
}

.group-level-3 {
  background-color: white; /* No fill for day-level rows */
}

.expandable-table tr {
  line-height: 1.2; /* Adjust the value to reduce height */
  padding: 0.5rem 0; /* Adjust padding for top and bottom */
  height: auto; /* Ensure the height adjusts dynamically */
}

.expandable-table td, 
.expandable-table th {
  padding: 0.3rem; /* Reduce padding for cells */
}

/* Apply hover effect to the specific table */
.new-expandable-table tr {
    transition: background-color 0.3s; /* Smooth transition for hover effect */
}

.new-expandable-table tr:hover {
    background-color: lightblue !important; /* Light blue for hover */
}

/* Styling for primary rows in the specific table */
.new-expandable-table .primary-row {
    background-color: #e6e6e6; /* Light grey for top-level primary rows */
    font-weight: bold; /* Emphasize primary rows */
}

/* Styling for secondary rows in the specific table */
.new-expandable-table .secondary-row {
    background-color: white;
    font-weight: normal; /* Normal font weight */
}

/* Hide rows in the specific table */
.new-expandable-table .hidden-row {
    display: none;
}

/* Retain padding and height adjustments for the specific table */
.new-expandable-table tr {
    line-height: 1.2;
    padding: 0.5rem 0;
    height: auto;
}

.new-expandable-table td,
.new-expandable-table th {
    padding: 0.3rem;
}

/* Add indent to the Period column for secondary rows */
.new-expandable-table .secondary-row td:first-child {
    padding-left: 20px; /* Adjust the value for the desired indent */
}

/* Disable hover for secondary rows */
.new-expandable-table .secondary-row:hover {
    background-color: inherit !important; /* No hover effect */
}

/* Expand/collapse icon styles */
.expand-icon {
    font-size: 1rem; /* Adjust size as needed */
    font-weight: bold;
    color: #007bff; /* Blue color for clickable icon */
    cursor: pointer;
}

.expand-icon:hover {
    color: #0056b3; /* Darker blue on hover */
}

/* Center-align all columns except the first */
.new-expandable-table th:not(:first-child),
.new-expandable-table td:not(:first-child) {
    text-align: center; /* Center-align text */
	width: 100px;
}

/* Keep the Period column left-aligned */
.new-expandable-table th:first-child,
.new-expandable-table td:first-child {
    text-align: left; /* Left-align text */
}