@import url('../../css/style.css');

.progressbar-item {
    margin-bottom: 17px;
}

.progress-bar {
    margin: 0 0 10px;
    overflow: visible;
    background: transparent;
}

.progress-number {
    padding-bottom: 6px;
    position: relative;
    margin: 4px 0;
    font-family: var(--font1);
    font-size: 15px;
    line-height: 15px;
    font-weight: 400;
    color: #444;
}

.progress-title {
	z-index: 100;
	font-size: 15px;
	font-weight: 400;
	margin: 0;
	font-family: var(--font2);
    text-transform: capitalize;
}

.progress-number-mark {
    font-family: var(--font1);
    font-weight: 500;
    font-size: 16px;
    line-height: 1;
    padding: 8px 8px 7px;
    border-radius: 3px;
    color: var(--progress-number-color, #fff);
    margin-bottom: 4px;
    border-radius: 3px;
    background:  #5f5f5f;
    position: absolute;
    bottom: 0;
    transform: translateX(-50%);
    background: var(--brand);
}

.down-arrow {
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid var(--brand);
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
}

.progress-bg {
    height: 6px;
    background: #f0f0f0;
    overflow: hidden;
    border-radius: 6px;
}

.progress-fill {
	height: 6px;
	background: var(--brand2);
	width: 0%;
	border-radius: 6px;
}