:root {
	/*size*/
	--ui-current-round-size: 8px;
	/*color*/
	--ui-current-round-color: #2fc6f6;
	--ui-current-round-bg-track-color: #edeef0;
	--ui-progressround-color-success: #9dcf00;
	--ui-progressround-bg-track-color-success: #d7f282;
	--ui-progressround-color-primary: #2fc6f6;
	--ui-progressround-bg-track-color-primary: #b0e8fa;
	--ui-progressround-color-danger: #ff5752;
	--ui-progressround-bg-track-color-danger: #ffccca;
	--ui-progressround-color-warning: #e5cf4d;
	--ui-progressround-bg-track-color-warning: #f9f0b7;
}

/*region Base style*/
.ui-progressround {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: 100%;
	transition: 250ms linear all;
	align-items: center;
}

.ui-progressround.ui-progressround-bg .ui-progressround-track-bar-bg { stroke: var(--ui-current-round-bg-track-color) !important;}

.ui-progressround-track { position: relative; }

.ui-progressround-track svg {
	display: block;
	transform: rotate(-90deg);
}

.ui-progressround-track-bar-bg {
	stroke: #edeef0;
	stroke-dashoffset: 0;
	fill: transparent;
	stroke-dasharray: 400%
}

.ui-progressround-track-bar-progress {
	fill: transparent;
	stroke: var(--ui-current-round-color) !important;
	transition: 120ms ease-in-out;
}

.ui-progressround-status,
.ui-progressround-status-percent {
	order: 3;
	text-align: center;
}

.ui-progressround-status,
.ui-progressround-status-percent,
.ui-progressround-text-after,
.ui-progressround-text-before {
	padding: 0 17px 4px;
	color: #535c69;
	font: 13px/16px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	font-weight: var(--ui-font-weight-regular, 400);
}

.ui-progressround-text-after {
	padding-left: 15px;
	order: 4;
}

.ui-progressround-text-before {
	padding-right: 15px;
	order: 1;
}

.ui-progressround-pie {}

.ui-progressround-pie:after { }

.ui-progressround-rotation svg {
	animation: infinite uiProgressbarRotation 2500ms linear;
}

@keyframes uiProgressbarRotation {
	from {
		transform: rotate(-90deg);
	}
	to {
		transform: rotate(270deg);
	}
}

.ui-progressround-finished.ui-progressround-rotation svg { animation: none; }

/*endregion*/

/*region Column*/
.ui-progressround-track { order: 3 }

.ui-progressround-text-before {
	padding: 0 0 14px;
	font-size: 14px;
	order: 1;
}

.ui-progressround-text-after {
	padding: 9px 0 0;
	color: #828b95;
	font-size: 12px;
	order: 5;
}

.ui-progressround-status { order: 4 }

.ui-progressround-status-percent {
	color: #333;
	font: 16px/20px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	font-weight: var(--ui-font-weight-regular, 400);
}

.ui-progressround-status-percent-incircle,
.ui-progressround-status-incircle {
	position: absolute;
	top:50%;
	left: 0;
	right: 0;
	text-align: center;
	margin-top: -1px;
	transform: translateY(-50%);
}

/*endregion*/

/*region Bar colors*/
.ui-progressround-bg,
.ui-progressround-primary {
	--ui-current-round-color: var(--ui-progressround-color-primary);
	--ui-current-round-bg-track-color: var(--ui-progressround-bg-track-color-primary)
}

.ui-progressround-danger {
	--ui-current-round-color: var(--ui-progressround-color-danger);
	--ui-current-round-bg-track-color: var(--ui-progressround-bg-track-color-danger)
}

.ui-progressround-warning {
	--ui-current-round-color: var(--ui-progressround-color-warning);
	--ui-current-round-bg-track-color: var(--ui-progressround-bg-track-color-warning)
}

.ui-progressround-success {
	--ui-current-round-color: var(--ui-progressround-color-success);
	--ui-current-round-bg-track-color: var(--ui-progressround-bg-track-color-success)
}

/*endregion*/
.ui-progressround.--air {
	--ui-progressround-air-gradient-1: var(--ui-color-pie-diagram-gradient-primary-1);
	--ui-progressround-air-gradient-2: var(--ui-color-pie-diagram-gradient-primary-2);
}

.ui-progressround.--air.ui-progressround-success {
	--ui-progressround-air-gradient-1: var(--ui-color-pie-diagram-gradient-success-1);
	--ui-progressround-air-gradient-2: var(--ui-color-pie-diagram-gradient-success-2);
}

.ui-progressround.--air.ui-progressround-warning {
	--ui-progressround-air-gradient-1: var(--ui-color-pie-diagram-gradient-warning-1);
	--ui-progressround-air-gradient-2: var(--ui-color-pie-diagram-gradient-warning-2);
}

.ui-progressround.--air.ui-progressround-danger {
	--ui-progressround-air-gradient-1: var(--ui-color-pie-diagram-gradient-alert-1);
	--ui-progressround-air-gradient-2: var(--ui-color-pie-diagram-gradient-alert-2);
}

.ui-progressround.--air .ui-progressround-air-stop-1 {
	stop-color: var(--ui-progressround-air-gradient-1);
}

.ui-progressround.--air .ui-progressround-air-stop-2 {
	stop-color: var(--ui-progressround-air-gradient-2);
}

.ui-progressround.--air .ui-progressround-air-track-stop-1 {
	stop-color: var(--ui-color-pie-diagram-gradient-grey-1);
}

.ui-progressround.--air .ui-progressround-air-track-stop-2 {
	stop-color: var(--ui-color-pie-diagram-gradient-grey-2);
}

.ui-progressround.--air .ui-progressround-track-bar-progress {
	stroke: var(--ui-progressround-air-bar-stroke) !important;
	stroke-linecap: round;
}

.ui-progressround.--air .ui-progressround-track-bar-bg,
.ui-progressround.--air.ui-progressround-bg .ui-progressround-track-bar-bg {
	stroke: var(--ui-progressround-air-track-stroke) !important;
}

.ui-progressround.--air .ui-progressround-track::before {
	content: '';
	position: absolute;
	inset: var(--ui-progressround-air-bg-inset, 12px);
	border-radius: 50%;
	background: transparent;
	box-shadow:
		var(--ui-pie-diagram-bg-box-shadow-x)
		var(--ui-pie-diagram-bg-box-shadow-y)
		8px
		var(--ui-color-pie-diagram-bg-box-shadow-color);
}

.ui-progressround.--air .ui-progressround-status-divider {
	margin-inline: 0.25em;
}

.ui-progressround.--air .ui-progressround-status-divider,
.ui-progressround.--air .ui-progressround-status-symbol {
	color: var(--ui-color-base-2);
}

.ui-progressround.--air .ui-progressround-text-before,
.ui-progressround.--air .ui-progressround-text-after {
	color: var(--ui-color-base-2);
}