/* .donut						{	position: relative; width: 100.0%; margin-bottom: 20px; }				 */

.donut > div				{	position: relative; width: 200px; height: 200px; margin: 1.00rem auto; border-radius: 100.0%; box-shadow: 0 0 0 15px rgba(255,255,255,0.50); background: white;
								display: flex; flex-flow: row wrap; justify-content: center; align-content: center; align-items: center; }						
.donut > div > div			{	position: relative; width: 100px; height: 100px; border-radius: 100.0%; box-shadow: 8px 8px 20px 0 rgba(000,000,000,0.30), inset 0 0 0 2px white;  
								display: flex; flex-flow: row wrap; justify-content: center; align-content: center; align-items: center;
								background-color: rgba(244,244,244,1.00);
								font-size: 1.32em;
								font-weight: 100;
								 font-family: sofi-300, Arial, Helvetica, sans-serif;
								
								}						
								
.donut > div + span			{	position: absolute; top: 0; left: 0; width: 100.0%; height: 100.00%; margin: 0; border-radius: 0; display: flex; flex-flow: row wrap; justify-content: space-between; align-content: stretch; align-items: stretch; }						


.donut.dq.dq1 > div		{	background: conic-gradient(rgba(091,127,149,1.00) 0 46.3%, rgba(226,000,069,1.00) 0 60.00%, rgba(195,213,229,1.00) 0 60.0%); }
.donut.dq > div > span	{	position: absolute; bottom: calc(50.00% - 2px); left: calc(50.00% - 2px); width: 4px; height: 60.00%; border-radius: 4px; transform: rotate(217deg); transform-origin: center bottom; background-color: rgba(226,000,069,1.00); }