.tf-progress-bar-circle {
	text-align: center;

	.progress-wrap {
		background-color: transparent !important;
		width: 110px;
		height: 110px;
		position: relative;
		box-shadow: none;
		margin-left: auto !important;
		margin-right: auto !important;

		&::after {
			content: "";
			width: 100%;
			height: 100%;
			border-radius: 50%;
			border: 5px solid #C4C4C4;
			position: absolute;
			top: 0;
			left: 0;
		}

		& > span {
			width: 50%;
			height: 100%;
			overflow: hidden;
			position: absolute;
			top: 0;
			z-index: 1;
		}

		.progress-bar {
			width: 100%;
			height: 100%;
			background: none;
			border-width: 5px;
			border-style: solid;
			position: relative;
			top: 0;
			border-color: rgba(177, 66, 51, 0.3);
			overflow: visible;
		}

		.progress-left {
			left: 0;

			.circle::after {
				top: 125px;
				right: 65px;
			}

			.progress-bar {
				left: 100%;
				border-top-right-radius: 80px;
				border-bottom-right-radius: 80px;
				border-left: 0;
				-webkit-transform-origin: center left;
				transform-origin: center left;
			}
		}

		.progress-right {
			right: 0;

			.circle::after {
				bottom: 125px;
				left: 65px;
			}

			.progress-bar {
				left: -100%;
				border-top-left-radius: 80px;
				border-bottom-left-radius: 80px;
				border-right: 0;
				-webkit-transform-origin: center right;
				transform-origin: center right;
			}
		}

		.progress-value {
			position: absolute;
			top: 0;
			left: 0;
			font-size: 24px;
			line-height: 30px;
			font-weight: 600;
			color: var(--theme-secondary-color);

		}
	}

	.title {
		display: block;
		font-size: 18px;
		line-height: 30px;
		font-weight: 700;
		font-family: var(--theme-font-primary);
		color: #272B2E;
	}
}

.tf-progress-bar-horizontal {
	.progress-wrap {
		height: 5px;
		background-color: rgba(35, 38, 41, 0.07);
		border-radius: 20px;
	}

	.progress-bar {
		background-color: var(--theme-secondary-color);
		border-radius: 20px;
	}

	.perc {
		@include d-flex();
		@include align-items-center();

	}

	.progress-value {
		margin-left: auto;
	}

	.wrap-perc-title {
		margin-bottom: 10px;
	}

	.title {
		display: block;
		font-size: 16px;
		line-height: 30px;
		font-weight: 700;
		font-family: var(--theme-font-primary);
		color: #272B2E;
	}
}

