.chart-item-container.hidden {

	display:none;

}

.chart-container {
	text-align:center;
}

.chart {

  position: relative;

  display: inline-block;

  margin-top: 50px;

  margin-bottom: 20px;

  text-align: center;

  opacity:1;

}

.chart canvas {

  position: absolute;

  top: 0;

  left: 0;

}

.percent {

  display: inline-block;

  z-index: 2;

  font-size:30px;

}

.percent:after {

  content: '%';

  margin-left: 0.1em;

  font-size: .8em;

}



/* BAR CHARTS */



.bar-main-container {

  margin: 10px auto;

  height: 50px;

  -webkit-border-radius: 4px;

  -moz-border-radius: 4px;

  border-radius: 4px;

  font-family: sans-serif;

  font-weight: normal;

  font-size: 0.8em;

  color: #FFF;

}



.wrap { padding: 8px; }


/*
.bar-percentage {

  float: left;

  background: rgba(0,0,0,0.13);

  -webkit-border-radius: 4px;

  -moz-border-radius: 4px;

  border-radius: 4px;

  padding: 9px 0px;

  width: 18%;

  height: 16px;

}
.bar-container {

  float: right;

  -webkit-border-radius: 10px;

  -moz-border-radius: 10px;

  border-radius: 10px;

  height: 10px;

  background: rgba(0,0,0,0.13);

  width: 78%;

  margin: 12px 0px;

  overflow: hidden;

}
.bar {

  float: left;

  height: 100%;

  -webkit-border-radius: 10px 0px 0px 10px;

  -moz-border-radius: 10px 0px 0px 10px;

  border-radius: 10px 0px 0px 10px;

  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

  filter: alpha(opacity=100);

  -moz-opacity: 1;

  -khtml-opacity: 1;

  opacity: 1;

}
*/

.style1 .bar-percentage {

    background: none repeat scroll 0 0 #2E5C89;
    border-radius: 5px 0 0 5px;
    float: left;
    font-size: 18px;
    height: 22px;
    padding: 6px 0;
    width: 18%;
	text-align:center;
	
}
.style1 .bar {
    border-radius: 0 5px 5px 0;
    float: left;
    height: 100%;
    opacity: 1;
}
.style1 .bar-container {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.13);
    border-radius: 0 5px 5px 0;
    float: right;
    height: 34px;
    overflow: hidden;
    width: 82%;
}

.style2 .bar-percentage {
    float: left;
    font-size: 20px;
    height: 16px;
    padding: 1px 0;
    width: 18%;
	text-align:center;
}

.style2 .bar-container {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.13);
    border-radius: 10px;
    box-shadow: 0 0 2px #555555 inset;
    float: right;
    height: 10px;
    margin: 12px 20px 12px 0;
    overflow: hidden;
    width: 77%;
}

.style2 .bar {
    border-radius: 10px;
    float: left;
    height: 100%;
    opacity: 1;
}