.radialProgressBar {
    border-radius: 50%;
    width: 45px;
    height: 45px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background: #ddd;
    margin: 0 20px;
}

.radialProgressBar .overlay {
    border-radius: 50%;
    width: 39px;
    height: 39px;
    margin: auto;
    background: #F5F5F5;
    font-size: 12px;
    font-family: 'Roboto';
  	font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}

.progress-0 {
	background-image: -webkit-linear-gradient(left, #ddd 50%, transparent 50%), -webkit-linear-gradient(left, #4DACA0 50%, #ddd 50%);
	background-image: linear-gradient(90deg, #ddd 50%, transparent 50%), linear-gradient(90deg, #4DACA0 50%, #ddd 50%);
}

.progress-10 {
	background-image: -webkit-linear-gradient(36deg, #ddd 50%, transparent 50%), -webkit-linear-gradient(left, #4DACA0 50%, #ddd 50%);
	background-image: linear-gradient(54deg, #ddd 50%, transparent 50%), linear-gradient(90deg, #4DACA0 50%, #ddd 50%);
}

.progress-20 {
	background-image: -webkit-linear-gradient(72deg, #ddd 50%, transparent 50%), -webkit-linear-gradient(left, #4DACA0 50%, #ddd 50%);
	background-image: linear-gradient(18deg, #ddd 50%, transparent 50%), linear-gradient(90deg, #4DACA0 50%, #ddd 50%);
}

.progress-30 {
	background-image: -webkit-linear-gradient(108deg, #ddd 50%, transparent 50%), -webkit-linear-gradient(left, #4DACA0 50%, #ddd 50%);
	background-image: linear-gradient(-18deg, #ddd 50%, transparent 50%), linear-gradient(90deg, #4DACA0 50%, #ddd 50%);
}

.progress-40 {
	background-image: -webkit-linear-gradient(144deg, #ddd 50%, transparent 50%), -webkit-linear-gradient(left, #4DACA0 50%, #ddd 50%);
	background-image: linear-gradient(-54deg, #ddd 50%, transparent 50%), linear-gradient(90deg, #4DACA0 50%, #ddd 50%);
}

.progress-50 {
	background-image: -webkit-linear-gradient(right, #ddd 50%, transparent 50%), -webkit-linear-gradient(left, #4DACA0 50%, #ddd 50%);
	background-image: linear-gradient(-90deg, #ddd 50%, transparent 50%), linear-gradient(90deg, #4DACA0 50%, #ddd 50%);
}

.progress-60 {
	background-image: -webkit-linear-gradient(left, #4DACA0 50%, transparent 50%), -webkit-linear-gradient(36deg, #4DACA0 50%, #ddd 50%);
	background-image: linear-gradient(90deg, #4DACA0 50%, transparent 50%), linear-gradient(54deg, #4DACA0 50%, #ddd 50%);
}

.progress-70 {
	background-image: -webkit-linear-gradient(left, #4DACA0 50%, transparent 50%), -webkit-linear-gradient(72deg, #4DACA0 50%, #ddd 50%);
	background-image: linear-gradient(90deg, #4DACA0 50%, transparent 50%), linear-gradient(18deg, #4DACA0 50%, #ddd 50%);
}

.progress-80 {
	background-image: -webkit-linear-gradient(left, #4DACA0 50%, transparent 50%), -webkit-linear-gradient(108deg, #4DACA0 50%, #ddd 50%);
	background-image: linear-gradient(90deg, #4DACA0 50%, transparent 50%), linear-gradient(-18deg, #4DACA0 50%, #ddd 50%);
}

.progress-90 {
	background-image: -webkit-linear-gradient(left, #4DACA0 50%, transparent 50%), -webkit-linear-gradient(144deg, #4DACA0 50%, #ddd 50%);
	background-image: linear-gradient(90deg, #4DACA0 50%, transparent 50%), linear-gradient(-54deg, #4DACA0 50%, #ddd 50%);
}

.progress-100 {
	background-image: -webkit-linear-gradient(left, #4DACA0 50%, transparent 50%), -webkit-linear-gradient(right, #4DACA0 50%, #ddd 50%);
	background-image: linear-gradient(90deg, #4DACA0 50%, transparent 50%), linear-gradient(-90deg, #4DACA0 50%, #ddd 50%);
}