/*----------------------------------------------------------------------
progress
----------------------------------------------------------------------*/
.progress.progress-linear {
	width: 100%;
	background-color: var(--color-frame);
	border-radius: 25px;
	height: 16px;
}
.progress.progress-linear .inner {
	display: flex;
	align-items: center;
	justify-content: center;	
	height: 100%;
	width: 0%;
	background-color: var(--color-secondary);
	box-shadow: 0 0 10px var(--color-secondary);
	color: white;
	font-size: 0.7rem;
	text-indent: 25px;
	border-radius: 25px;
	transition: width 0.5s ease;
}
.progress.progress-ring {
	position: relative;
	width: 100px;
	height: 100px;
}
.progress.progress-ring .inner {
	transform: rotate(-90deg);
	overflow: visible;
}
.progress.progress-ring .inner circle {
	fill: none;
	stroke-width: 10;
}
.progress.progress-ring .inner circle.background {
	stroke: var(--color-frame);
}
.progress.progress-ring .inner circle.progress {
	stroke: var(--color-secondary);
	stroke-linecap: round;
	stroke-dasharray: 283; /* In accordance with the circular environment, 45 */
	stroke-dashoffset: 283; /* The initial value equal to the circular environment, 45 */
	filter: drop-shadow(0px 0px 3px var(--color-secondary));
	transition: stroke-dashoffset 0.3s ease;
}
.progress.progress-ring .ring-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 24px;
	font-weight: bold;
	color: #333;
}