.single-chart {
			width: 100%;
			justify-content: space-around;
		}

		.circular-chart {
			display: block;
			margin: 10px auto;
			max-width: 80%;
			max-height: 250px;
		}

		.circle-bg {
			fill: none;
			stroke: #eee;
			stroke-width: 3.8;
		}

		.circle {
			fill: none;
			stroke-width: 2.8;
			stroke-linecap: round;
		}

		@keyframes progress {
			0% {
				stroke-dasharray: 0 100;
			}
		}

		.circular-chart.orange .circle {
			stroke: #ff9f00;
		}

		.circular-chart.green .circle {
			stroke: #4CC790;
		}

		.circular-chart.blue .circle {
			stroke: #3c9ee5;
		}
		
		.circular-chart.poor .circle {
			stroke: #cc0000;
		}

		.circular-chart.acceptable .circle {
			stroke: #ff8800;
		}

		.circular-chart.good .circle {
			stroke: #009900;
		}
		
		.circular-chart.excellent .circle {
			stroke: #23cc23;
		}
		

		.percentage {
			fill: #666;
			font-family: sans-serif;
			font-size: 0.5em;
			text-anchor: middle;
		}