/* main css */

body {
  background-color: #F1F3F3    
}


.col-sm-4 {

  padding: 15px;
  border: 1px solid rgba(0, 0, 0, 0.8);
  }

.col-sm-12 {

  padding: 15px;
  border: 1px solid rgba(0, 0, 0, 0.8);
  
}


svg .x.axis text {
  text-anchor: start !important;
  -webkit-transform: rotate(40deg);
  transform: rotate(40deg); }

.axis line,
.axis path {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges; }




svg {
/*  margin-right: auto;
  margin-left: auto;
  display: table;
  float: none !important;
  left: 50%;
  min-width: 100%;
  min-height: 5vh;
  "viewBox": "0 0 250 250";*/
}


.container {
 /* z-index: 0;
  background-color: white;
  min-height: 5vh;*/
 }

 svg.attr({
 /*   "width": "100%",
    "height": "100%",
    "viewBox": "0 0 500 500"*/
})


/* media query example element, mobile first */

@media (max-width: 825px) {
  #container {
    width: 100%;
  }
}

@media (min-width: 826px) {
  #container {
    width: 825px;
  }
}

/*@media (max-width: 525px) {
  #container {
    width: 100%;
  }
}

@media (min-width: 526px) {
  #container {
    width: 525px;
  }
}
*/



#monthly-bubble-chart {
  height: 310px;
}

#day-of-week-chart{
  height: 290px;
}


.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1px;
}

#fluctuation-chart
  {
  fill: none;
  stroke: steelblue;
  stroke-width: 1px;
}

div.tooltip {
  position: absolute;
  text-align: center;
  width: 65px;
  height: 35px;
  padding: 2px;
  font: 12px sans-serif;
  background: lightsteelblue;
  border: 0px;
  border-radius: 8px;
  pointer-events: none;
}

#chart-area {
  width: 100%;
  height: 410px;
  /*height: 100%;*/
 /* position: absolute;*/
}

/*@media (max-width: 825px) {
  #chart-area {
    width: 100%;
  }
}

@media (min-width: 826px) {
  #chart-area {
    width: 825px;
  }
}*/

/*.clearfix {
  overflow: auto;
}*/