.barBase {
	overflow: hidden;
	-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
	display:table
}

.barBorder {
	border: 2px solid;
	border-radius: 20px;
    background: rgba(0,0,0,0.3);
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.4);
	border-color: var(--color);
	overflow: hidden;
	-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
	margin:0
}

.overlayTextContainer {
	z-index: 3;
	border-radius: 10px;
	vertical-align: middle;
	display: flex;
	justify-content: center;
	align-items: left;
	position: absolute;
}

.fill {
	background-color: var(--color);
	z-index:2;
    position: absolute;
	overflow: hidden;
	margin-left: -0.5px;
	transition-duration: 0.2s;
	background: linear-gradient(90deg, var(--color), #fff);
    border-radius: 20px 0 0 20px;
    transition: width 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}

.overlayText {
	z-index: 6;
    font-weight: bold;
    text-shadow: 0 0 5px black;
}