.axis path,.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	width: 9px;
	border-width: 2px;
}

.bar-age20-m {
	fill: #4AB46B;
        background-color: #4AB46B;
}

.bar-age20-w {
	fill: #E7BD20;
        background-color: #E7BD20;
}

.bar-age30-m {
	fill: #23B294;
        background-color: #23B294;
}

.bar-age30-w {
	fill: #DC7B25;
        background-color: #DC7B25;
}

.bar-age40-m {
	fill: #388ECB;
        background-color: #388ECB;
}

.bar-age40-w{
	fill: #DA4D3D;
        background-color: #DA4D3D;
}

.bar-age50-m{
	fill: #33485C;
        background-color: #33485C;
        color: white;
}

.bar-age50-w{
	fill: #8D57A0;
        background-color: #8D57A0;
}

.bar-age60-m{
	fill: #93A3A3;
        background-color: #93A3A3;

}

.bar-age60-w{
	fill: #deb887;
        background-color: #deb887;
}

#tag{
  color: #666666;
  width: 320px;
  opacity: 0.95;
  padding: 10px;
  background-color: white;
  border: 1px solid #666666;
  position: absolute;
  display: none;
  font-size: 12px;
  color:#333333;
 box-shadow: 10px 10px 10px rgba(0,0,0,0.4);
}

.tw{
    fill:white;
}
    * {
      margin: 0;
      padding: 0;
  }
  body {
      background: #fff;
      font-family: 'Open-Sans',sans-serif;

  }

#container{
  margin: 0 auto;
  position: relative;
  width:1600px;
  overflow: visible;
}


  .svg {
    width:1600px;
    height:500px;
    overflow: visible;
    position:absolute;
}

.grid .tick {
    stroke: lightgrey;
    opacity: 0.3;
    shape-rendering: crispEdges;
}
.grid path {
      stroke-width: 0;
}

#show-template{
    width: 100%;
    display:table;
}


#show-template li{
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    list-style: none;
    padding: 5px;
}

.panel-body.chart{
    overflow-y: hidden;
    overflow-x: auto;
}
.panel-body.chart text{
    font-size: 14px;
}
svg.chart{
    display: block;
    margin: 0 auto;
}
#tag{
    padding:5px;
    border: 2px solid gray;
    background-color: rgb(255, 255, 255);
    font-size: 14px;
}