:root {
	--bg-color: #f0f0f0;
	--text-color: #191919;

	--icon-color: #ff9900;

	--menu-bg: #191919;

	--nav-bg: #121212;
	--nav-close: #f0f0f0;
	--nav-text: #f0f0f0;
	--nav-link: #ff9900;

	--proggress-text: #ff9900;
	--progress-bg: rgba(0, 0, 0, .15);

	--title: #111;

	--input-border: #ff9900;
	--input-text: #191919;
	--input-icon: #191919;
	--input-icon-grey: #191919;
	--input-label: #ff9900;

	--input-border-focus: #ff9900;
	--input-icon-focus: #ff9900;
	--input-label-focus: #ff9900;
	--input-error: #FC5B53;

	--btn-bg: #ff9900;
	--btn-text: #fff;
	--btn-bg-disabled: #B3B6B7;
	--btn-text-disabled: rgba(0, 0, 0, .3);

	--form-bottom: #000;

	--footer: #aaa;
}

.webt-icon {
	width: 180px;
	height: 180px;
	margin: 0 auto 10px;
	position: relative;
}
.icon-progress {
	width: 100%;
	height: 100%;
	position: relative;
}
.icon-progress__bg {
	stroke-width: 14px;
	stroke: var(--progress-bg);
	fill: transparent;
}
.webt-icon .progress_arrow {
	width: 120px;
	height: auto;
	opacity: 0;
	transition: all 1s;
	animation: bounceUpDown 2s ease-in-out infinite;
}
@keyframes bounceUpDown {
	0% {
		transform: translateY(0%);
	}
	50% {
		transform: translateY(-5%);
	}
	100% {
		transform: translateY(0%);
	}
}
.webt-icon__value {
	color: var(--proggress-text);
	display: flex;
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
	text-align: center;
	position: absolute;
	font-size: 46px;
	font-weight: 600;
	top: 0;
	left: 0;
}
.meter-1 {
	stroke-dasharray: 800;
	stroke-dashoffset: 0;
	stroke: var(--progress-filled);
	stroke-width: 14px;
	fill: transparent;
	animation: progress-1 4s ease-out;
}
@keyframes progress-1 {
	from {
		stroke-dashoffset: 800;
	}
	to {
		stroke-dashoffset: 0;
	}
}