@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;900&display=swap');
 /* * {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	font-size: 20px;
	color: #333;
	list-style-type: none;
	text-decoration: none;
} */
/* 
body {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: 20px;
} */

.block {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 90px;
	min-height: 90px;
	max-width: 90px !important;
	max-height: 90px !important;
	border-radius: 50%;
    background-color: #fff;
}

.box {
	margin: 0 !important;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	width: calc(100% - 25px);
	height: calc(100% - 25px);
	border-radius: 50%;
	background-color: transparent;
	box-shadow: 0 0 5px 3px transparent;
}

.box::before {
	position: absolute;
	content: '';
	width: calc(100% + 14px);
	height: calc(100% + 14px);
	border-radius: 50%;
	border: 1px solid #eee;
}

.box .number span {
	color: #e9e9e9;
}

.box .number .num {
	font-size: 21px;
	font-weight: bold;
}

.box .number .sub {
	font-size: 20px;
}

.box .title {
	font-size: 9px;
	color: #9b9b9b;
}

.dots {
	display: block;
	position: absolute;
	z-index: 2;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	transition: 2s transform, 2s opacity ease;
}

.dots::after {
	position: absolute;
	content: '';
	width: 5px;
	height: 5px;
	top: 3px;
	left: 50%;
	border-radius: 50%;
	background-color: #b7b5b5;
	box-shadow: 0 0 5px 2px #585858;
	transform: translateX(-50%);
}

.svg {
	position: absolute;
	width: 100%;
	height: 100%;
	fill: none;
	transform: rotate(-90deg);
}

.circle {
	stroke: blue; /*url(#gradientStyle); */
	stroke-width: 8px;
	stroke-dasharray: 251;
	stroke-dashoffset: 251;
	animation-duration: 2s;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
	transition: 2s stroke-dashoffset;
}