.bar-line-line .info-the-title{
	margin-bottom: 5px;
}
.bar-line .info-the-title span{
	font-size: 17px;
	font-weight: 500;
	opacity: 0;
	animation: progression 0.5s 1.5s linear forwards;
}

@keyframes progression{
	100%{
		opacity: 1;
	}
}

.bar-line .progress-line{
	position: relative;
	width:100%;
	border-radius: 10px;
	transform: scaleX(0);
	transform-origin: left;
	animation: animate 1s cubic-bezier(1,0,0.5,1) forwards;
    text-align: left!important;
}


.bar-line .progress-line span{
	height: 100%;
	position: absolute;
	border-radius: 10px;
	transform: scaleX(0);
	transform-origin: left;
	animation: animate 1s 1s  cubic-bezier(1,0,0.5,1) forwards;
}

@keyframes animate{
	100%{
		transform: scaleX(1);
	}

}


.bar-line .progress-line span::before{
	position: absolute;
	content: "";
	right: 0;
	top: -10px;
	height: 0;
	width: 0;
	border: 7px solid transparent;
	border-bottom-width: 0px;
	border-right-width: 0px;
	opacity: 0;
	animation: progression 2 0.5s 1.5s linear forwards;

}

.bar-line .progress-line span::after{
	position: absolute;
	right: 0;
	top: -28px;
	font-size: 13px;
	font-weight: 500;
	padding: 1px 8px;
	border-radius: 3px;
	opacity: 0;
	animation: progression 2 0.5s 1.5s linear forwards;
}

@keyframes progression{
	100%{
		opacity: 1;
	}
}


.progress-line.percentage span {
    margin-left: -2px;
}

.info-the-title {
    padding-bottom: 10px;
}


.percentage span::after {
    font-weight: 900!important;
    white-space: nowrap!important;
}