// progress-bar 
.progress-bar {
    background-color: var(--primary);
	border-width: 0.125rem;
	border-color: transparent;
	
	&.primary {
		background-color: var(--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: 0.875rem;
	background-color:var(--light);
    overflow: hidden;
    border-radius: $radius;
	
	&-bar{
        border-radius: $radius;
    }
}

.progress-bar-striped {
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent);
}

.progress-vertical {
    display: inline-block;
    margin-bottom: 0;
    margin-right: 2rem;
    min-height: 17rem;
    position: relative;
} 
.progress-vertical-bottom {
    display: inline-block;
    margin-bottom: 0;
    margin-right: 2rem;
    min-height: 17rem;
    position: relative;
    transform: rotate(180deg);
}
 
.progress-animated {
    animation-duration: 5s;
    animation-name: myanimation;
    transition: all 5s ease 0s;
}
 
@keyframes myanimation {
    0%{
        width: 0;
    }
}
@keyframes myanimation {
	0% {
		width: 0;
	}
}