@property --pgPercentage {
	syntax: '<number>';
	inherits: false;
	initial-value: 0;
}

div[role="progressbar"] {
	--size: 12rem;
	--fg: #369;
	--bg: #def;
	--pgPercentage: var(--value);
	animation: growProgressBar 3s 1 forwards;
	width: var(--size);
	height: var(--size);
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: 
		radial-gradient(closest-side, white 80%, transparent 0 99.9%, white 0),
		conic-gradient(var(--fg) calc(var(--pgPercentage) * 10%), var(--bg) 0)
		;
	font-family: Helvetica, Arial, sans-serif;
	font-size: calc(var(--size) / 5);
	color: var(--fg);
}

div[role="progressbar"]::before {
	counter-reset: number var(--value);
	content: counter(number) '';
	/* counter-reset: percentage var(--value); */
	/* content: counter(percentage) '%'; */
}


.tbl-scroll{
	width: 100%;
	overflow: auto;
	padding: 10px;
}

.div-scroll{
	overflow: auto;
	max-height: 500px;
	padding: 10px;
}

.div-scroll-short{
	overflow: auto;
	max-height: 200px;
	padding: 10px;
}

.div-side-scroll{
	overflow: auto;
	max-width: 100%;
	padding: 10px 0 10px 0;
}

.c-cd{
	background: #ddd;
}

.t-img{
	width: 50px;
}

.card-bg-grey{
	background: #ddd;
	padding: 7px;
	border-radius: 5px;
	margin-bottom: 10px;
}

.card-bg-btn{
	background: #1d2b46;
	padding: 7px;
	border-radius: 5px;
	margin-bottom: 10px;
}

.card-bg-grey div {
	font-size: 10px;
	font-weight: bold;
}

.card-body small{
	font-size: 9px;
}

.s-bar{
	height: 50%;
}

.card .c-2{
	/* margin: 1px; */
	text-align: center;
	color: #fff;
}

.dashboard-bg-grey{
	background: #f3f3f3;
	padding: 7px;
	border-radius: 10px;
	margin-bottom: 10px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}