.up-graphic-progress {
		display: flex;
		flex-direction: column;
		gap: 5px;

		width: 100%;
		height: 250px;

		padding-top: 5px;
		padding-bottom: 5px;
		padding-left: 2px;
		padding-right: 2px;

		background-color: var(--container-color-active);
		border-radius: 3px;
		border-style: solid;
		border-width: 2px;
		border-color: var(--container-color);
	}
	.up-graphic-progress span {
		position: absolute;
		top: 10px;
		left: 0%;
		transform: translate(-50%, -100%);
		font-size: 14px;
		z-index: 2;

		width: auto;
		border: 3px solid var(--container-color);
		background-color: var(--container-color-active);

		padding: 5px;
		padding-top: 3px;
		padding-bottom: 3px;
		border-radius: 5px;
		pointer-events: none;

		transition: opacity .5s ease;
	}
	.up-graphic-progress {
		position: relative;
	}
	.up-graphic-progress-lines {
		position: relative;

		display: flex;
		align-items: end;

		height: 100%;
		width: 100%;
	}
	.up-graphic-progress-lines > div {
		flex-grow: 1;

		border-top: 2px solid  white;
		background-color: var(--accent-color-hover);

		transition: height .4s cubic-bezier(0.4,0,0.2,1);

		/* Add a subtle box-shadow for smoother look */
		box-shadow: 0 -5px 5px 0 rgba(0,0,0,0.08);

		/* Optional: Add a vertical gradient for anti-aliasing effect */
		background-image: linear-gradient(to bottom, var(--accent-color), rgba(255,255,255,0.15));
	}
	.up-graphic-progress-labels {
		display: flex;
		font-size: 8px;
		width: 100%;
		height: 20px;
		overflow: hidden;
		margin-top: 2px;
		margin-bottom: 2px;
		background-color: var(--container-color);
	}
	.up-graphic-progress-labels div {
		display: flex;
		align-items: center;
		justify-content: center;

		flex: 1 1 0;
		overflow: show;
		white-space: nowrap;
		min-width: 0;
		padding: 2px;
	}