:root {
  --color-primary: #0b3b48;
  --color-secondary: #e8f54a;
}
.card-bg-primary {
  background-color: var(--color-primary);
  /* Primary color for the second card */
  color: #ffffff;
}

.card-bg-secondary {
  background-color: var(--color-secondary);
  /* Secondary color for the first card */
}


table.table--light thead th {
  border: none;
  background-color: #0b3b48;
  color: #ffffff;
}

.btn--primary {
  background: linear-gradient(
    to right,
    #0b3b48,
    #0b3b48
  ); /* Approximate colors from image */
  border: none;
  color: white; /* This sets the text color to white */
}

.btn-primary {
  background: linear-gradient(
    to right,
    #0b3b48,
    #0b3b48
  ); /* Approximate colors from image */
  color: white; /* This sets the text color to white */
}

.menu-div-active {
  background-color: var(--color-primary);
  /* Primary color for the second card */
  color: #ffffff;
}

.menu-div:hover {
  background: linear-gradient(
    to right,
    #e8f54a,
    #0b3b48
  ); /* Approximate colors from image */
}

.btn-primary:hover {
  background: linear-gradient(
    to right,
    #e8f54a,
    #0b3b48
  ); /* Approximate colors from image */
}

.text-chart-green {
  color: #4caf50;
  /* A specific green for chart values (income) */
}

.text-chart-red {
  color: #ef4444;
  /* A specific red for chart values (expenses) */
}
/* Custom styles if needed, though Tailwind should cover most */
.card-bg-gradient {
  background: linear-gradient(
    to right,
    #0f6a6e,
    #168285
  ); /* Approximate colors from image */
}
.money-flow-chart-height {
  height: 150px; /* Adjust as needed */
}