.bar-chart-wrapper{
	position: relative;
}
.bar-chart{
	overflow: auto;
	position: absolute;
	top: 0;
	left: 0;
	width: calc( 100% + 24px );
	height: 100%;
	display: flex;
	margin-right: -12px;
	margin-left: -12px;
	padding-bottom: 30px;
}
.has-tabs-chart .bar-chart,
.has-legend-chart .bar-chart{
	padding-bottom: 78px;
}
.bar-chart .bar-wrapper{
	position: relative;
	width: 100%;
	min-width: 52px;
	max-width: 100%;
	height: 100%;
	padding-right: 12px;
	padding-left: 12px;
	flex-basis: 0;
	flex-grow: 1;
	display: flex;
	align-items: flex-end;
}
.bar-chart .bar-wrapper.stacked-chart{
	padding-top: 27px;
	flex-direction: column-reverse;
}
.bar-chart .bar{
	overflow: hidden;
	position: relative;
	background: #707070;
	width: 100%;
	max-width: 100%;
	flex-basis: 0;
	flex-grow: 1;
	max-height: 0%;
	cursor: pointer;
	transition: background-color 300ms ease, max-height 1s ease;
}
.bar-chart .stacked-chart .bar{
	overflow: visible;
	flex-basis: auto;
	flex-shrink: 0;
	flex-grow: 0;
}

.bar-chart .stacked-chart .bar:nth-child(1){background:#d8232a}
.bar-chart .stacked-chart .bar:nth-child(2){background:#707070}
.bar-chart .stacked-chart .bar:nth-child(3){background:#f39068}
.bar-chart .stacked-chart .bar:nth-child(4){background:#710509}

.bar-chart .bar-wrapper:nth-child(1) .bar{ transition-delay: 0s, .1s }
.bar-chart .bar-wrapper:nth-child(2) .bar{ transition-delay: 0s, .2s }
.bar-chart .bar-wrapper:nth-child(3) .bar{ transition-delay: 0s, .3s }
.bar-chart .bar-wrapper:nth-child(4) .bar{ transition-delay: 0s, .4s }
.bar-chart .bar-wrapper:nth-child(5) .bar{ transition-delay: 0s, .5s }
.bar-chart .bar-wrapper:nth-child(6) .bar{ transition-delay: 0s, .6s }
.bar-chart .bar-wrapper:nth-child(7) .bar{ transition-delay: 0s, .7s }
.bar-chart .bar-wrapper:nth-child(8) .bar{ transition-delay: 0s, .8s }
.bar-chart .bar-wrapper:nth-child(9) .bar{ transition-delay: 0s, .9s }
.bar-chart .bar-wrapper:nth-child(10) .bar{ transition-delay: 0s, 1.0s }
.bar-chart .bar-wrapper:nth-child(11) .bar{ transition-delay: 0s, 1.1s }
.bar-chart .bar-wrapper:nth-child(12) .bar{ transition-delay: 0s, 1.2s }
.bar-chart .bar-wrapper:nth-child(13) .bar{ transition-delay: 0s, 1.3s }
.bar-chart .bar-wrapper:nth-child(14) .bar{ transition-delay: 0s, 1.4s }
.bar-chart .bar-wrapper:nth-child(15) .bar{ transition-delay: 0s, 1.5s }
.bar-chart .bar-wrapper:nth-child(16) .bar{ transition-delay: 0s, 1.6s }
.bar-chart .bar-wrapper:nth-child(17) .bar{ transition-delay: 0s, 1.7s }
.bar-chart .bar-wrapper:nth-child(18) .bar{ transition-delay: 0s, 1.8s }
.bar-chart .bar-wrapper:nth-child(19) .bar{ transition-delay: 0s, 1.9s }
.bar-chart .bar-wrapper:nth-child(20) .bar{ transition-delay: 0s, 2.0s }

.bar-chart-wrapper.animated .bar{
	max-height: 100%;
}
.bar-chart .bar:hover{
	background-color: #D8232A;
}
.bar-chart .bar-label,
.bar-chart .bar-inner-label{
	position: absolute;
	bottom: -30px;
	left: 0;
	right: 0;
	font-size: 14px;
	line-height: 1.71;
	text-align: center;
	color: #707070;
}
.bar-chart .bar-inner-label{
	top: 2px;
	bottom: auto;
	color: #fff;
}
.bar-chart .stacked-chart .bar-inner-label{
	top: -27px;
	color: #707070;
}
.chart-tabs,
.chart-legend{
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	line-height: 1.71;
	color: #000;
}
.chart-legend > div{
	position: relative;
	margin: 10px 12px 0;
	padding-left: 15px;
}
.chart-legend > div:before{
	content: '';
	display: block;
	width: 12px;
	height: 12px;
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -6px;
}
.chart-legend > div:nth-child(1):before{background:#d8232a}
.chart-legend > div:nth-child(2):before{background:#707070}
.chart-legend > div:nth-child(3):before{background:#f39068}
.chart-legend > div:nth-child(4):before{background:#710509}

.chart-tabs a{
	display: block;
	color: #000;
}
.chart-tabs a.active{
	text-decoration: underline;
}
.chart-tabs a + a{
	margin-left: 24px;
}

.horizontal-bars .bar-chart{
	flex-direction: column;
	width: 100%;
	margin: -6px 0;
}
.horizontal-bars .bar-chart .bar-wrapper{
	padding: 6px 0;
	align-items: flex-start;
	flex-direction: row-reverse;
}
.horizontal-bars .bar-chart .bar{
	height: 100%;
	max-height: 52px;
	max-width: 0%;
	flex-grow: 0;
	flex-basis: auto;
	transition: background-color 300ms ease, max-width 1s ease;
}
.horizontal-bars.bar-chart-wrapper.animated .bar{
	max-width: 100%;
	margin-right: auto;
}
.horizontal-bars .bar-chart .bar-label{
	top: 50%;
	bottom: auto;
	left: -56px;
	right: auto;
	transform: translateY(-50%);
}
.horizontal-bars .bar-chart .bar-inner-label{
	top: 50%;
	left: auto;
	right: 5px;
	transform: translateY(-50%);
}
.horizontal-bars .bar-chart{
	padding-left: 56px;
}
.horizontal-bars.has-tabs-chart .bar-chart,
.horizontal-bars.has-legend-chart .bar-chart{
	padding-bottom: 42px;
}

.bar-chart .bar-wrapper.label-above-bar{
	padding-top: 27px;
}
.bar-chart .label-above-bar .bar{
	overflow: visible;
}
.bar-chart .label-above-bar .bar-inner-label{
	top: -27px;
	color: #707070;
}

@media (max-width: 1199px){
	.bar-chart{
		width: calc( 100% + 16px );
		margin-left: -8px;
		margin-right: -8px;
	}
	.bar-chart .bar-wrapper{
		padding: 0 8px;
	}
}

@media (max-width: 767px){
	.has-legend-chart .bar-chart{
		padding-bottom: 95px;
	}
}