// progress-bar 
.progress-bar {
    background-color: var(--bs-primary);
	border-width: 0.125rem;
	border-color: transparent;

	&.primary {
		background-color: var(--bs-primary);
	}
	&.success{
		background-color: $success;
		border-color: $success;
	}
	&.info {
		background-color: $info;
		border-color: $info;
	}
	&.danger {
		background-color: $danger;
		border-color: $danger;
	}
	&.warning {
		background-color: $warning;
		border-color: $warning;
	}
	&.pink {
		background-color: $pink;
		border-color: $pink;
	}
}
 
.progress {
	height: 15px;
    background-color: $white;
    overflow: hidden;
    border-radius: var(--bs-border-radius);
    align-items: center;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.10);
	&-bar{
        border-radius: var(--bs-border-radius);
		height: calc(100% - 5px);
		margin-left: 3px;
		margin-right: 3px;
    }
}

.progress-animated {
    animation-duration: 5s;
    animation-name: myanimation;
    transition: all 5s ease 0s;
}
 
@keyframes myanimation {
    0%{
        width: 0;
    }
}
@keyframes myanimation {
	0% {
		width: 0;
	}
}