.bar-chart-wrapper {
    position: relative;
    padding: 40px;
    width: 100%;
    height: 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 {
    display: none;
}

.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%;
    opacity: 0.5;
    background: #1F578E;
    position: absolute;
    bottom: 0;

    -webkit-transition: opacity 250ms ease-in-out;
    -moz-transition: opacity 250ms ease-in-out;
    -o-transition: opacity 250ms ease-in-out;
    transition: opacity 250ms ease-in-out;
}

.bar-chart .bar-line:hover,
.bar-chart .bar-line.active {
    opacity: 1;
    box-shadow: 0 -1px 3px rgb(204, 204, 204);
}

.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%;
}

.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-wrapper .bar-legend {
    margin-top: 24px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.03);
}

.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;
    width: auto;
}

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



.tooltip {
    position: absolute;
    padding: 10px;
    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;
}

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

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

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

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

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

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

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

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



.legend .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 .legend-group .legend-item {
    font-size: 0.7em;
}

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

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

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

.legend .legend-group strong {
    margin-bottom: 16px;
    display: inline-block;
}



.legend .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;
}

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



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