#module_view_progress_div {
	position:fixed;
	width:60px;
	height:60px;
	padding: 10px auto;
	line-height: 60px;
	bottom:160px;
	right:22px;
	color:#FFF;
	border-radius:50px;
	text-align:center;
	box-shadow: 2px 2px 3px #999;
	z-index: 9999;
}

@keyframes growProgressBar {
	0%{
		--pgPercentage: 0;
	}

	100% {
		--pgPercentage: var(--value);
	}
}

@property --pgPercentage {
	syntax: '<number>';
	inherits: false;
	initial-value: 0;
}

.module_view_progress_class {
	opacity:0.6;
	--size: 4rem;
	--fg: #F7941D;
	--bg: #F7eecD;
	--pgPercentage: var(--value);
	animation: growProgressBar ease-in 1s;
	width: var(--size);
	height: var(--size);
	border-radius: 50%;
	display: grid;
	place-items: center;
	background:
		radial-gradient(closest-side, white 80%, transparent 0 99.9%, white 0),
		conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0);
	font-family: Helvetica, Arial, sans-serif;
	font-size: calc(var(--size) / 5);
	color: var(--fg);
	margin: 0;
	padding: 0;
}

.module_view_progress_class::before {
	counter-reset: percentage var(--value);
	content: counter(percentage) '%';
}

.checkmark__circle {
	stroke-dasharray: 166;
	stroke-dashoffset: 166;
	stroke-width: 2;
	stroke-miterlimit: 10;
	stroke: #F7941D;
	fill: none;
	animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	display: block;
	stroke-width: 2;
	stroke: #fff;
	stroke-miterlimit: 10;
	margin: 0;
	box-shadow: inset 0px 0px 0px #F7941D;
	animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}

.checkmark__check {
	transform-origin: 50% 50%;
	stroke-dasharray: 48;
	stroke-dashoffset: 48;
	animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
	100% {
		stroke-dashoffset: 0;
	}
}

@keyframes scale {

	0%,
	100% {
		transform: none;
	}

	50% {
		transform: scale3d(1.1, 1.1, 1);
	}
}

@keyframes fill {
	100% {
		box-shadow: inset 0px 0px 0px 144px #F7941D;
	}
}