.bar-chart-wrapper {
		position: relative;
		padding: 40px 40px 40px 80px;
		width: 100%;
	}

	.bar-chart {
		height: 100%;
		width: 100%;
		position: relative;
		border-bottom: 1px solid #ccc;
		border-left: 1px solid #ccc;
		margin: 25px 0 40px;

		white-space: nowrap;

		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}

	.bar-chart .hidden-style {
		visibility: hidden;
	}

	.bar-chart .bar {
		bottom: 0;
		position: relative;
		height: 100%;
		display: inline-block;
	}

	.bar-chart .bar-value {
		position: absolute;
		bottom: 0;
		width: 100%;
	}

	.bar-chart .bar-value-sum {
		font-size: 0.6em;
		text-align: center;
		position: absolute;
		width: 100%;
		margin-bottom: 8px;
	}

	.bar-chart .bar-line {
		width: 100%;
		background: #1F578E;
		position: absolute;
		bottom: 0;
	}



	.bar-chart .bar-line.active {
		z-index: 1000;
	}

	.bar-chart .bar-title {
		font-size: 0.7em;
		top: 100%;
		margin-top: 8px;
		position: absolute;
		text-align: center;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-weight: normal;
	}

	.bar-chart .bar-y,
	.bar-chart .bar-x {
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
	}

	.bar-chart .bar-x-value,
	.bar-chart .bar-y-value {
		pointer-events: none;
		position: absolute;
		font-size: 0.7em;
	}

	.bar-chart .bar-x-value {
		height: 100%;
		width: 0;
		border-left: 1px solid rgba(200,200,200,0.2);
		top: -16px;
	}


	.bar-chart .bar-y-value {
		bottom: 35px;
		left: -3px;
		height: 0;
		width: 100%;
		border-top: 1px solid rgba(200,200,200,0.2);
	}

	.bar-chart .bar-y-value div {
		width: 54px;
		left: -54px;
		position: absolute;
		top: -7px;
		text-align: right;
	}

	.bar-chart .bar-y-value div,
	.bar-chart .bar-x-value div {
		font-weight: normal;
	}

	.bar-chart-wrapper .bar-legend {
		margin-top: 24px;
		padding: 20px;
		background: rgba(0, 0, 0, 0.03);
		margin-left: -40px;
	}

	.bar-chart-wrapper .bar-legend span {
		display: inline-block;
		width: 19%;
		margin-right: 1%;
		text-overflow: ellipsis;
		overflow: hidden;
		height: 20px;
		font-size: 0.8em;
		cursor: pointer;
	}

	.bar-chart-wrapper .bar-legend .legend-item-wrapper {
		display: inline-block;
		width: 100%;
		max-width: 250px;
		position: relative;
		cursor: pointer;
		margin-bottom: -2px;

		-webkit-user-select: none;
		-moz-user-select: none;
		user-select: none;

		white-space: nowrap;
	}

	.bar-chart-wrapper .bar-legend .legend-item {
		font-size: 0.7em;
		display: inline-block;
	}

	.bar-chart-vertical {
		border-top: 1px solid #ccc;
		border-bottom: none;
		height: auto;
		padding-bottom: 16px;
		margin-top: 32px;
		margin-left: 40px;
		width: calc(100% - 80px);
	}

	.bar-chart-vertical .bar-line {
		max-height: 40px;
		height: 100%;
		max-width: none;
	}

	.bar-chart-vertical .bar-value {
		height: 100%;
	}


	.bar-chart-vertical .bar {
		bottom: auto;
		left: 0;
		width: 100%;
		display: block;
		height: 24px;
		margin-top: 8px;
	}

	.bar-chart-vertical .bar-value-sum {
		font-size: 0.6em;
		text-align: center;
		position: absolute;
		margin-left: 8px;
		margin-top: 6px;
		width: auto;
	}

	.bar-chart-vertical .bar-title {
		margin: 0;
		width: 0;
		top: 8px;
		left: -60px;
		overflow: visible;
	}



	.chart-tooltip {
		position: absolute;
		padding: 10px;
        bottom:0;
        left:0;
		background: #fff;
		box-shadow: 0 2px 3px 0 rgba(0,0,0,0.3);
		font-size: 1em;
		z-index: 1000;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		pointer-events: none;
        -webkit-transition: all ease 0.3s;
        -o-transition: all ease 0.3s;
        -moz-transition: all ease 0.3s;
        -ms-transition: all ease 0.3s;
        transition: all ease 0.3s;
        outline:1px solid #288cad;
	}
.chart-tooltip:after{
    display: none;
    content:"";
    position: absolute;
    left:50%;
    margin-left:-4px;
    bottom:-12px;
    border-color:#ffffff transparent transparent;
    border-style: solid;
    border-width: 6px;
}

	.chart-tooltip .tooltip-title {
		color: #288cad;
		font-size: 0.8em;
	}

	.chart-tooltip .tooltip-change {
		color: #6c6864;
		font-weight: bold;
		float: left;
	}

	.chart-tooltip .tooltip-value {
		float: left;
		color: #999;
		margin-left: 5px;
	}

	.chart-tooltip .tooltip-change,
	.chart-tooltip .tooltip-value {
		font-size: 1em;
	}

	.chart-tooltip .tooltip:before, 
	.chart-tooltip .tooltip:after {
		content: "";
		position: absolute;
		border-right: 10px solid transparent;
		top: 100%;
		left: 23px;
	}

	.chart-tooltip .tooltip:before {
		border-top: 10px solid rgba(0,0,0,0.2);
		margin-top: 0;
	}

	.chart-tooltip .tooltip:after {
		border-top: 10px solid #fff;
		margin-top: -2px;
		z-index: 1;
	}

	.chart-tooltip .tooltip-change small {
		color: #999;
		font-weight: normal;
		font-size: 0.8em;
	}



	.legend-group {

		background-color: rgba(255,255,255,0.9);
		box-shadow: 0 3px 3px rgba(0,0,0,0.3);
		border: 1px solid #aaa;

		position: absolute;
		padding: 8px 10px;
		margin-top: 20px;
		z-index: 10000;

		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}

	.legend-group .legend-item {
		font-size: 0.7em;
	}

	.legend-items-group {
		max-height: 130px;
		overflow: auto;
	}

	.legend-item-group {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.legend-item-group-link {
		text-decoration: underline;
	}

	.legend-group strong {
		margin-bottom: 16px;
		display: inline-block;
	}
.bar{
    -webkit-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    transition: all ease 0.3s;
}


	.checkbox {
		width: 14px;
		height: 14px;
		display: inline-block;
		vertical-align: top;
		margin: 4px;
		cursor: pointer;
		background: #000 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAOCAYAAABZ/o57AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODBFMDVFN0Y3NzMzMTFFNUJDNDZERDRGMzc2QjkxODQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODBFMDVFN0U3NzMzMTFFNUJDNDZERDRGMzc2QjkxODQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QTg5NUI2OTVEN0MyMTFFNDhGRjdBRjVEQUI4N0I1QjUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QTg5NUI2OTZEN0MyMTFFNDhGRjdBRjVEQUI4N0I1QjUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5b9XnhAAAA0UlEQVR42mL8//8/w1AALCDi169fJLmWjY2Nkd76mOgQGA+oYQitHboAiA2BeMNgdigoJAuBWACIHQaLQ7FFbyA7O/sHID0f6tgBd+gBaPQuQBJrBDryws+fPxvwhSYok+DDyGoZQcUThbkXFGqOUIedB/GBbEcg2wDIPo8v16M7Bh0gq2OhQogKQKMXFKqBIAGgI0Fi6wlpJCWAqJVGDYCO6weG5AMQBvL7gViBmjmTGlGPkoGg9HpqF/gsVC6S5tO0CqUiEKCVQxmHSqMEIMAAqexd8CM7ZGcAAAAASUVORK5CYII=') no-repeat;
	}

	.checkbox:not(.partial).checked {
		background-position: -14px 0;
	}



	.checkbox.partial.checked {
		background-position: -28px 0;
	}



/*customization*/
.bar{
    overflow: hidden;
}
.visible-x .bar{
    overflow: visible;
}
.bar .bar-title{
    opacity: 0;
    transition: all ease 0.3s ;
    -moz-transition: all ease 0.3s ;
    -ms-transition: all ease 0.3s ;
    -webkit-transition: all ease 0.3s ;
    -o-transition: all ease 0.3s ;
}
.visible-x .bar .bar-title{
    opacity: 1;
}
.bar-chart .bar-line{
    height:0px;
    width:60%;
    left:0;
    right:0;
    margin:0 auto;
    -webkit-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
    -moz-transform: translateY(100%);
    transform: translateY(100%);
    transition: transform ease 1.5s 0.5s;
    -moz-transition: transform ease 1.5s 0.5s;
    -ms-transition: transform ease 1.5s 0.5s;
    -webkit-transition: transform ease 1.5s 0.5s;
    -o-transition: transform ease 1.5s 0.5s;
}

.loaded.bar-chart .bar-line{
     -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    -moz-transform: translateY(0);
    transform: translateY(0);
}
.bar-chart-wrapper{
    max-width:1170px;
    margin: 0 auto;
    width:100%;
}
#chart .chart-tooltip{
    opacity: 1;
}
.bar-value-sum{
    opacity: 0;
/*
    transition: all ease 0.3s 1s;
    -moz-transition: all ease 0.3s 1s;
    -ms-transition: all ease 0.3s 1s;
    -webkit-transition: all ease 0.3s 1s;
    -o-transition: all ease 0.3s 1s;
*/
}
/*
.loaded .bar-value-sum{
    opacity: 1;
}
*/
.bar-chart .bar-active .bar-line{
    background-color:#006666 !important;
}
.bar-active{
    background:#d1e0e0;
}
.bar-chart-wrapper .bar-legend{
    display: none;
}
.bar-chart .bar-y-value,.visible-x .bar .bar-title,.bar-title,.bar-chart .bar-value-sum{
    font-size: 12px;
}
.bar-chart-wrapper{
    padding: 0 20px 20px 40px;
}
.tooltip-title{
    display: block;
    font-weight:normal;
    font-size:12px;
    text-align:left;
    position: relative;
    top:-5px;
}