body {
  background-color: #3c3f42;
  padding: 20px;
}

.card {
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  background-color: #2a292b;
}

/* Expense Box Styling */
.add-expense-box {
  background-color: #ba92cc;
  padding: 20px;
  border-radius: 10px;
}

.add-expense-box .btn {
  background-color: #752a97;
  border-style: none;
}

/* Style for "Found no expenses. backgroud"  */
.no-expenses-message {
  background-color: #34393f;
  border: none;
  border-radius: 10px;
  padding: 12px;
}

/*Vertical progress bars */
.chart-container {
  display: flex;
  justify-content: space-between; /* Space between bars */
  padding: 20px;
  background-color: #b17aca;
  border-radius: 10px;
}

.chart-container .d-flex {
  flex-direction: column;
  align-items: center;
  width: 4.5%;
}

.chart-container .progress {
  position: relative;
  width: 100%;
  height: 200px;
  background-color: #cbbed1;
  border-radius: 10px;
  display: flex;
  flex-direction: column-reverse; /* Ensure bar grows upward */
}

.chart-container .progress-bar {
  background-color: #272657;
  width: 100%;
}

.chart-container .d-flex span:last-child {
  color: #ffffff;
  font-weight: bold;
  margin-top: 10px;
  font-size: 0.8rem; /* Default font size for months */
}

/* Media query for small screens */
@media (max-width: 768px) {
  .chart-container .d-flex span:last-child {
    font-size: 0.6rem;
  }
}

@media (max-width: 576px) {
  .chart-container .d-flex span:last-child {
    font-size: 0.4rem;
  }
}

/* Style for grouping individual expense items */
#expenseList .list-group-item {
  background-color: #34393f;
  border: none;
  border-radius: 10px;
  padding: 12px;
}

/* Style for the show amount span */
#expenseList .expense-amount {
  font-weight: bold;
  color: #ffffff;
}

/* Style for the title span */
#expenseList .expense-title {
  color: #ffffff;
}

/* Highlight expense amounts*/
.expense-amount {
  font-weight: bold;
  background-color: #752a97;
  padding: 5px 10px;
  border: 1px solid #ffffff;
  border-radius: 5px;
}

.expense-item .expense-month {
  font-size: 1.1rem;
  font-weight: bold;
  color: #ffffff;
}

.expense-date-box {
  width: 80px; /* Width of the box */
  height: 80px; /* Height of the box */
  border: 2px solid #ffffff; /* White border */
  border-radius: 12px; /* Rounded corners */
  background-color: #333333; /* Dark background */
  color: #ffffff; /* White text */
}

.expense-date-box .expense-month {
  font-size: 0.8rem;
  font-weight: bold;
}

.expense-date-box .expense-year {
  font-size: 0.7rem;
  color: #ffffff;
}

.expense-date-box .expense-day {
  font-size: 1rem;
  font-weight: bold;
}

/* Style for Monthly Spending Summary */
.card h5 {
  color: #f7f8f7;
  font-weight: bold;
  margin-bottom: 15px;
}

#summaryList .list-group-item {
  background-color: #34393f;
  border: none;
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 15px; /* Add gap between items */
}

#summaryList .list-group-item span {
  color: #ffffff;
  font-size: 1rem;
  font-weight: bold;
}

.delete-expense {
  font-size: 0.5rem; /* Smaller font size */
  padding: 4px 8px; /* Reduced padding */
  line-height: 1.5; /* Tighter line spacing */
}