/* circle progress bar start */
.circle-progress-bar {
	position: relative;
}

.circle-progress-bar .progress-content {
	position: relative;
}
.circle-progress-bar .circle-wrap {
	margin: 0px auto;
	width: 100px;
	height: 100px;
	background: rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	position: relative;
	color: #fff;
	margin: 2px;
}

.circle-progress-bar .circle-wrap .circle .mask,
.circle-progress-bar .circle-wrap .circle .fill {
	width: 100%;
	height: 100%;
	position: absolute;
	border-radius: 50%;
}

.circle-progress-bar .circle-wrap .circle .mask {
	clip: rect(0px, 100px, 100px, 50px);
}

.circle-progress-bar .circle-wrap .circle .mask .fill {
	clip: rect(0px, 50px, 100px, 0px);
	background-color: #fff;
}

.circle-progress-bar .circle-wrap .circle .mask.full,
.circle-progress-bar .circle-wrap .circle .fill {
	/* animation: fill ease-in-out 3s;
	transform: rotate(126deg); */
	transition: all ease-in-out 1s;
}


.circle-progress-bar .circle-wrap .inside-circle {
	width: 88%;
	height: 88%;
	border-radius: 50%;
	background: #000;
	text-align: center;
	position: absolute;
	z-index: 100;
	font-size: 14px;
	left: 0px;
	right: 0px;
	margin: 0 auto;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	justify-content: center;
	align-items: center;

}
/* resize */
.circle-progress-bar .circle-wrap {
	width: 40px; 
	height: 40px;
}
.circle-progress-bar .circle-wrap .circle .mask {
	clip: rect(0px, 40px, 40px, 20px);
}

.circle-progress-bar .circle-wrap .circle .mask .fill {
	clip: rect(0px, 20px, 40px, 0px);
}
.circle-progress-bar .circle-wrap .inside-circle {font-size: 10px;}

.circle-progress-bar.white .circle-wrap {background: rgba(255, 255, 255, 0.3); color: #fff;}
.circle-progress-bar.white .circle-wrap .circle .mask .fill {background-color: #fff;}
.circle-progress-bar.white .circle-wrap .inside-circle{background-color: #4C4C4C;}

/* circle progress bar end */
/* horizontal progress bar start */
	#horizontal-progress-panel{display: none;}
	#horizontal-progress-div {
		position: absolute;
		bottom: 0em;	
		width: 100%;	
		height: 0.5em;	
		background-color:#023761;	
		left: 0em;
		z-index: 1;
	}
	#horizontal-progress-div .full-strip{position: absolute; left: 0em; bottom: 0em; width: 100%; height: 0.5em; background-color: #616161;}
	#horizontal-progress-div .curr-strip{position: absolute; left: 0em; bottom: 0em; width: 0%; height: 0.5em; background-color: #141E55; transition: all 1s ease-in;}

	#horizontal-progress-div .highlighter{
		position: absolute;
		left: calc(1% - 1em);	
		bottom: 0em;	
		width: 1em;	
		height: 1em;	
		background-color:#0F4DBC;
		transition: all 1s ease-in;
	}
/* horizontal progress bar end */

@media screen and (max-width: 834px) {
	
	.circle-progress-bar .circle-wrap {
		width: 34px; 
		height: 34px;
		background-color: rgba(0, 0, 0, 0.3);
		color: #393939;
	}
	.circle-progress-bar .circle-wrap .circle .mask {
		clip: rect(0px, 34px, 34px, 17px);
	}
	
	.circle-progress-bar .circle-wrap .circle .mask .fill {
		clip: rect(0px, 17px, 34px, 0px); background-color: #000;
	}
	.circle-progress-bar .circle-wrap .inside-circle {font-size: 8px; background: #fff;}
	
}