.chart-grid{
  display: flex;
  flex-flow: row wrap-reverse;
  justify-content: flex-start;
  align-items: flex-end; 
}


.contentcontainer{
  width: 90%;
  float:right;
}



.chart-menu
{
  flex-grow: 2;
  flex-shrink: 1;
  flex-basis: 40%;
  margin: 0.5%;
}

 .chart-menu:hover{
  box-shadow: 3px -3px 4px #babdb6;
  transition: 0.2s;
} 

.chart-bar{
  width: 10%;
  display:inline-flex;
  float:left;
  background-color: white;
  border-right-color: solid lightgray;
}

.chart-list{
  padding: 0px;
  width: 100%;
  border-left: 1px solid #babdb6;
  border-top: 1px solid #babdb6;
}


.chart-a{
  padding: 0px;
  border-bottom: 1px solid #babdb6;
  opacity: 1.0;
}

.nav-pills > li > a{
  border-radius: 0;
  height: 40px;
  text-align: center;
}

.nav-pills > li > a > i{
  font-size: 1.5em;
}

.nav-stacked>li+li{
  margin-top: 0px;
}


.chart-wrapper{
  width: 80% ;
  display:inline-flex;
  position: absolute;
}

.box.chart-wrapper{
  margin-bottom: 0px;
  margin-top: 0px;
}

/* level 1: toolbar for manipulating / saving the chart
  -> not printed */
.toolbar
{
  position: relative;
  left:     0;
  top:      0px;
  width:    100%;
  height:   50px;
  z-index:  50;
}

/* Toolbar Save Options */

[id ^= "savepng"], [id ^= "savesvg"] {
  display: inline-block;
  vertical-align: middle;
}

[id ^= "save-button-area"]
{
  position: absolute;
  top: 7%;
  right: 10px;
}

/* Toolbar Switch */

[id ^= "graph-options"] {
  position: absolute;
  top: 7%;
  left: 10px;
  height: 30px;  
  font-size:0px;    
  text-align: center;
  vertical-align: middle;
  margin: 5px;

}
/* Switch title */
[id ^= "graph-options"] > p {
  display: inline-block;
  font-size:12px;
  margin: 0px;
  margin-right:10px;
  vertical-align: middle;
}

[id^="graph-option-"] {
  padding:0px 10px;
  display: inline-block;
  font-size:12px;
  vertical-align: middle;
  line-height: 28px !important;
  cursor: pointer;

  color: #FFF;
  border-width: 1px;
  border-style: solid;

  background-color: #808080;
  border-color: transparent;
}

[id ^= "graph-option-"]:hover {
  color: #FFF;
  background-color: #337ab7;
  border-color: #2e6da4;
  opacity: 0.75;
  text-decoration: none;
}


[id ^= "graph-option-first"] {
  border-right:none;
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
}

[id ^= "graph-option-middle"] {
  
  border-right-color: #666666; 
  border-left-color: #666666;
}

[id ^= "graph-option-last"] {
  border-left:none;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
}

.graph-active {
  background-color: #337ab7;
  color: #FFF;
  -moz-box-shadow:    inset 0 0 10px #666666;
  -webkit-box-shadow: inset 0 0 10px #666666;
  box-shadow:         inset 0 0 10px #666666;
}





.close-chart{
  position: absolute;
  width: 20px;
  height: 20px;
  right: -15px;
  top: -19px;
  background-color: white;
  border:none;
}

.close-chart:hover{
  color: #eeeeee !important;
  background-color: white !important;
}

.close-chart:active{
  background-color: white;
  border:none;
  width:20px;
  height:20px;
}

#closeIcon{
  color: black;
}

.svg-content-responsive
{
  display:  inline-flex;
  position: absolute;
  float:    left;
  left:     0;

}

.distbar{
  width: 1.5em;
  height: 1.5em;
}

.switch-icons-img{
  width: 12px;
  height: 12px;
}

[id ^= "infobox-chartless-"] {
  position: absolute;
  margin:  10% 10% 0px 10%;
  border: 1px solid #babdb6;
  padding: 15px;
}