.chart-container {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 20rem;
	margin-top: 3rem;
}

.chart-grid {
    position: absolute;
    top: 3rem;
    left: 0;
    right: 0;
    bottom: 0;
}

.chart-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-bottom: 1px dashed #E6E7EB;
}

.chart-line:nth-child(1) { top: 10%; }
.chart-line:nth-child(2) { top: 20%; }
.chart-line:nth-child(3) { top: 30%; }
.chart-line:nth-child(4) { top: 40%; }
.chart-line:nth-child(5) { top: 50%; }
.chart-line:nth-child(6) { top: 60%; }
.chart-line:nth-child(7) { top: 70%; }
.chart-line:nth-child(8) { top: 80%; }
.chart-line:nth-child(9) { top: 90%; }
.chart-line:nth-child(10) { top: 100%; }

.chart-bar {
    position: relative;
    width: 80px;
    background: linear-gradient(to top, #04162b, #0059ff);
    border-radius: 0.3rem 0.6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    transition: height 1s ease-out;
    height: 0; /* Start with height 0 for animation */
	margin: 0 0.25rem; /* Add gap between bars */
}

.chart-bar .chart-value {
    position: absolute;
    top: -30px;
    font-size: 0.9rem;
	text-align: center;
    color: #0059ff;
	margin: 0 -0.25rem; /* Remove gap between bars */
}

.poor-bar {
    background: linear-gradient(to top, #000, #666);
}

.poor-bar .poor-value {
    color: #000;
}


.chart-bar .chart-label {
    margin-bottom: 0.2rem;
    font-size: 0.7rem;
    color: #fff;
}