.budget-portlet-card {
  border: 1px solid #dee2e6; /* Light gray border */
  background-color: #fff;
  min-height: 830px;
  display: flex;
  flex-direction: column;
}

.budget-header {
  background-color: #e8eff7; /* The light blue background from the image */
  color: #2c3e50;
  font-weight: bold;
  text-align: center;
  padding: 15px;
  font-size: 1.1rem;
  text-transform: uppercase;
}

.budget-highlight-number {
  color: #3b5998; /* Dark blue */
  font-size: 2rem;
  font-weight: 600;
  margin-top: 20px;
  margin-bottom: 20px;
}

.budget-highlight-sub {
  font-size: 1rem;
  font-style: italic;
  color: #3b5998;
}

.section-title {
  font-weight: 500;
  margin-bottom: 15px;
}

/* Legend List Styling */
.legend-item {
  display: flex;
  justify-content: space-between; /* Pushes text to left and number to right */
  align-items: center;
  margin-bottom: 10px;
  padding: 5px 0;
}

.legend-dot {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 15px;
}

.legend-text {
  color: #6c757d;
  flex-grow: 1; /* Takes up available space */
}

.legend-value {
  font-weight: bold;
  color: #000;
}

/* Colors based on image */
.bg-orange {
  background-color: #fca576;
}

.bg-red {
  background-color: #ed2f35;
}

.bg-blue {
  background-color: #2d55ea;
}

.bg-beige {
  background-color: #fce1c4;
}

/* Chart Placeholder */
.chart-placeholder {
  height: 250px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #ccc;
  background-color: #fafafa;
  color: #999;
  margin-bottom: 20px;
}

.chart-wrapper {
  position: relative;
  /* We can reduce height slightly now that text is single-line, 
     but keeping it reasonable allows the chart to expand */
  height: 350px;
  width: 100%;
  margin: 0 auto;
}

.spacer-box {
  height: 60px; /* Adjust to match the height of the "Chi" top number */
  width: 100%;
  display: block;
}

.footer-btn-container {
  position: absolute; /* Remove from flow */
  bottom: 20px; /* 20px from the bottom edge */
  left: 0;
  right: 0; /* Stretch full width */
  text-align: center; /* Center the button */
  height: 40px; /* Fixed height for stability */
  z-index: 10;
}