/* Xelio - Barra de Progreso */

.xelio-progress-bar {
	--xelio-progress-color: #3fb3e6;
	--xelio-progress-track: #d9f0f7;
	--xelio-progress-thickness: 18px;
	width: 100%;
}

.xelio-progress-bar__linear-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 10px;
}

.xelio-progress-bar__title {
	color: #315289;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

.xelio-progress-bar__number {
	color: #222;
	font-size: 15px;
	font-weight: 800;
	line-height: 1;
	white-space: nowrap;
}

.xelio-progress-bar__linear-track {
	width: 100%;
	height: 14px;
	background: #d9f0f7;
	overflow: hidden;
}

.xelio-progress-bar__linear-fill {
	width: 0%;
	height: 100%;
	background: #3fb3e6;
	transition-property: width;
	transition-timing-function: cubic-bezier(.22, .61, .36, 1);
}

.xelio-progress-bar__circle-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 16px;
}

.xelio-progress-bar__circle {
	position: relative;
	width: 150px;
	height: 150px;
	--xelio-progress-dasharray: 264;
	--xelio-progress-dashoffset: 264;
}

.xelio-progress-bar__circle svg {
	width: 100%;
	height: 100%;
	display: block;
	transform: rotate(-90deg);
}

.xelio-progress-bar__circle-track,
.xelio-progress-bar__circle-fill {
	fill: none;
	cx: 50;
	cy: 50;
	r: 42;
	stroke-width: var(--xelio-progress-thickness);
}

.xelio-progress-bar__circle-track {
	stroke: var(--xelio-progress-track);
}

.xelio-progress-bar__circle-fill {
	stroke: var(--xelio-progress-color);
	stroke-linecap: butt;
	stroke-dasharray: var(--xelio-progress-dasharray);
	stroke-dashoffset: var(--xelio-progress-dashoffset);
	transition-property: stroke-dashoffset;
	transition-timing-function: cubic-bezier(.22, .61, .36, 1);
}

.xelio-progress-bar__circle .xelio-progress-bar__number {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-size: 26px;
	font-weight: 800;
	color: #222;
}

.xelio-progress-bar--type-2 {
	text-align: center;
}

.xelio-progress-bar--type-2 .xelio-progress-bar__title {
	margin-top: 8px;
	margin-bottom: 8px;
	font-size: 18px;
	font-weight: 800;
}

.xelio-progress-bar--type-2 .xelio-progress-bar__description {
	max-width: 270px;
	margin: 0 auto;
	color: #315289;
	font-size: 15px;
	line-height: 1.45;
}

.xelio-progress-bar--type-3 {
	text-align: center;
	padding: 40px 28px;
	border-radius: 8px;
	background: linear-gradient(135deg, #46dff0 0%, #32a9e8 100%);
}

.xelio-progress-bar--type-3 .xelio-progress-bar__circle {
	width: 120px;
	height: 120px;
}

.xelio-progress-bar--type-3 .xelio-progress-bar__circle-track {
	stroke: rgba(255, 255, 255, .22);
}

.xelio-progress-bar--type-3 .xelio-progress-bar__circle-fill {
	stroke: #fff;
}

.xelio-progress-bar--type-3 .xelio-progress-bar__number,
.xelio-progress-bar--type-3 .xelio-progress-bar__title,
.xelio-progress-bar--type-3 .xelio-progress-bar__description {
	color: #fff;
}

.xelio-progress-bar--type-3 .xelio-progress-bar__title {
	margin-top: 6px;
	margin-bottom: 8px;
	font-size: 17px;
	font-weight: 800;
	text-transform: uppercase;
}

.xelio-progress-bar--type-3 .xelio-progress-bar__description {
	font-size: 14px;
	line-height: 1.45;
	opacity: .9;
}


/* v0.3.1 circle anti-clipping */
.xelio-progress-bar__circle-wrap,
.xelio-progress-bar__circle,
.xelio-progress-bar__circle svg {
	overflow: visible;
}

.xelio-progress-bar__circle {
	box-sizing: content-box;
	padding: calc(var(--xelio-progress-thickness) / 2);
}

.xelio-progress-bar__circle-track,
.xelio-progress-bar__circle-fill {
	r: 42;
}