#data-table{border:none;border-top:1px solid #ccc;width:540px}
#data-table caption{color:#545454;font-size:14px;font-weight:400;line-height:20px;margin:0 0 20px;padding:0;text-align:center}
#data-table thead {
  background:#f0f0f0
}
#data-table th, #data-table td {
  border:none;
  border-bottom:1px
  solid #ccc;
  margin:0;
  padding:10px;
  text-align:left
}
 
#figure{ position: relative; width: 100%; float: left;  }
#figure ul{list-style:none;margin:0;padding:0}
#figure h4{ display:none; }

#data-table{display:none}
#figure ul.legend{ padding: 25px 0 50px; float: right; text-align: center; padding: 50px 0; }
.legend li{ margin: 15px 20px; display:inline-block; }

.wrap-table{ padding-right: 50px; padding-bottom:0px; }
#wrapper-inner{ width: 100%; float:left; }
.graph{ position:relative; width: 100%; float: left; }
.x-axis {
  position:initial;
  width:18%;
  float:left;
  text-align: right;
}
.x-axis li {
  width:100%;
  float: left;
  margin: 0;
  height: 100px;
}
.x-axis li span{
  font-size:16px;
  color:#555;
}

.y-axis{ position:initial; width:82%; float:left; }
.y-axis li{ width:11.11%; float: right; height: 300px; position: relative; border: none; }
.y-axis li:before{ content:''; background:url(../assets/border.png) repeat-y; width:0px; display: inline-block; position: absolute; right: 0; height: 100%; }
.y-axis li span{ display: none; width: initial; margin:0; position: absolute; bottom: -35px; right: -15px; padding: 0; font-size: 20px; line-height: 35px; z-index: 99; color:#555; }
/*
.y-axis li:before{ content:''; background:url(../assets/border.png) repeat-y; width:2px; display: inline-block; position: absolute; right: 0; height: 100%; }
.y-axis li span{ width: initial; margin:0; position: absolute; bottom: -35px; right: -15px; padding: 0; font-size: 20px; line-height: 35px; z-index: 99; color:#555; }
*/
.bar-group{ width: 100%; float:left; margin: 0; height: 100px;   }
.bars{ position:absolute; bottom: -5px; right: 0; z-index:10; }
.bar{ left:0; height: 10px; position:absolute;text-align:center; }
.bar p{ position:absolute; right: -25px; margin: 0; bottom: -48px; font-size: 15px; }
.bar span{ width: 50px; height: 50px; font-size: 18px; line-height: 40px; background: #fff; border-radius:50%; z-index:99; position:absolute; margin-top: -25px; top: 50%; right: -25px;  display:inline-block;}

.bar.fig0 span{border:5px solid #00afec;color:#00afec}
.bar.fig1 span{border:5px solid #bde7fa;color:#bde7fa}
.bar.fig2 span{border:5px solid #d1d3d4;color:#d1d3d4}
.bar.fig3 span{border:5px solid #ececec;color:#ececec}

.bar.fig0{ background:#00afec; z-index: 9; }
.bar.fig1{ background:#bde7fa; z-index: 8; }
.bar.fig2{ background:#d1d3d4; z-index: 7; }
.bar.fig3{ background:#ececec; z-index: 6; }

.icon.fig0{ background:#00afec;  }
.icon.fig1{ background:#bde7fa;  }
.icon.fig2{ background:#d1d3d4;  }
.icon.fig3{ background:#ececec;  }

.icon{ width: 20px; height: 20px; display: inline-block; vertical-align: -4px; margin-right: 10px; }


@media (max-width:1499px) {
	.x-axis li span, .y-axis li span {
    font-size: 16px;
  }
}

@media (max-width:991px) {
	.bar p {
    font-size: 12px;
  }
	.bar span{
    width: 40px;
    height: 40px;
    font-size: 15px;
    line-height: 36px;
    margin-top: -20px;
    right: -20px;
    border-width:3px !important;
  }
	.wrap-table {
    padding-right: 20px;
  }
}

@media (max-width:767px ) {
	#figure ul.legend{width:100% !important;padding:10px 0 20px 20px;}
}

@media (max-width:557px) {
	.x-axis li span, .y-axis li span {
    font-size: 13px;
  }
}

@media(max-width:479px) {
	.x-axis {
    width:25%;
  }
	.y-axis {
    width:75%;
  }
	.x-axis li span, .y-axis li span {
    font-size: 10px;
  }

	.bar{ height: 5px; }
	.bar span {  width: 30px;  height: 30px;  font-size: 12px;  line-height: 25px;  margin-top: -15px;  right: -15px;}
	.bar p { font-size: 10px; bottom: -35px; right: -13px; }
	.bars{ bottom: -10px; }
}

@media (max-width:374px) {
	bar p {
    font-size: 8px;
  }
}