@keyframes jump {
	0% {
		transform: translateY(-10px) scale(.9, .9);
	}

	100% {
		transform: translateY(10px) scale(1, 1);
	}
}

.tm-circle-progress-chart {
	.chart-number {
		margin-bottom: 0;
	}

	.tm-svg {
		line-height: 0;

		* {
			stroke: currentColor;
		}
	}

	.outer {
		display: inline-block;
	}

	&.style-01 {
		.chart {
			position: relative;
			width: 126px;
			height: 126px;
			margin-left: 8px;

			canvas {
				position: absolute;
				top: 0;
				left: 0;
			}
		}

		.inner-content {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.chart-number {
			font-size: 24px;
			font-weight: 400;
			color: #333;
			margin-bottom: 0;
		}
	}

	&.style-02 {
		.inner {
			display: flex;
		}

		.chart-wrap {
			position: relative;
			flex-shrink: 0;
		}

		.chart {
			position: relative;
			width: 126px;
			height: 126px;
			margin-left: 8px;

			canvas {
				position: absolute;
				top: 0;
				left: 0;
			}
		}

		.inner-content {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.chart-number {
			font-size: 34px;
			line-height: 1;
			color: #fff;
		}

		.chart-icon {
			font-size: 50px;
			color: #fff;
		}

		.tm-svg {
			color: #fff;
			width: 50px;
		}

		.circle-content {
			width: 100%;
			height: 100%;
			padding: 13px;
		}

		.inner-circle {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}

		.title-wrap {
			margin-bottom: 17px;
		}

		.chart-info {
			flex-grow: 1;
			margin-left: 35px;
			text-align: left;
		}

		.title {
			font-size: 18px;
			color: #333;
			margin-bottom: 0;
		}

		.chart-content {
			line-height: 2.14;
		}

		.circle-design {
			position: absolute;
			border-radius: 50%;
			animation: jump infinite 2s;
			animation-direction: alternate;

			&.one {
				width: 43px;
				height: 43px;
				left: 0;
				bottom: 28px;
			}

			&.two {
				width: 17px;
				height: 17px;
				right: 0;
				top: 50%;
				margin-top: -8px;
				animation-delay: 1s;
			}
		}
	}
}

@include media-breakpoint-down(xs) {
	.tm-circle-progress-chart {
		&.style-02 {
			.inner {
				display: block;
			}

			.chart-info {
				margin-top: 30px;
				margin-left: 0;
			}
		}
	}
}