.tm-circle-progress-chart {
	&.style-01 {
		text-align: center;

		.chart {
			position: relative;
			margin: 0 auto 33px;
			width: 126px;
			height: 126px;

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

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

		.chart-number {
			font-size: 18px;
			line-height: 1;
			margin-bottom: 0;
		}

		.chart-icon {
			font-size: 55px;
		}

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

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

		.title {
			font-size: 20px;
		}
	}

	&.style-02 {
		display: flex;

		.chart {
			flex-shrink: 0;
			position: relative;
			width: 126px;
			height: 126px;

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

		.chart-info {
			flex-grow: 1;
			padding-top: 34px;
			padding-left: 34px;
		}

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

		.chart-number {
			font-size: 18px;
			line-height: 1;
			margin-bottom: 0;
		}

		.chart-icon {
			font-size: 55px;
		}

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

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

		.title {
			font-size: 20px;
		}
	}

	&.style-03 {
		display: flex;

		.chart {
			flex-shrink: 0;
			order: 1;
			position: relative;
			width: 126px;
			height: 126px;

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

		.chart-info {
			flex-grow: 1;
			padding-top: 34px;
			padding-right: 34px;
		}

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

		.chart-number {
			font-size: 18px;
			line-height: 1;
			margin-bottom: 0;
		}

		.chart-icon {
			font-size: 55px;
		}

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

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

		.title {
			font-size: 20px;
		}
	}
}

@include media-breakpoint-down(xs) {
	.tm-circle-progress-chart {
		.chart {
			margin-bottom: 30px;
		}

		&.style-02,
		&.style-03 {
			display: block;
			text-align: center;

			.chart {
				margin-left: auto;
				margin-right: auto;
			}

			.chart-info {
				padding: 0;
			}
		}
	}
}
