body {
      font-family: Verdana,Arial,sans-serif;
    }

    h2 {
      font-size: 1.2em;
      margin: 60px 0 5px 0;
    }

    .wrapper {
      width: 80%;
      margin-left: auto;
      margin-right: auto;
    }

    .wrapper > div {
      margin: 35px 0;
    }

    #slider {
      width: 100%;
    }


/* SLIDER PREFERENCES */
.chart {
  shape-rendering: crispEdges;
}

.mini text {
  font: 9px sans-serif; 
}

.main text {
  font: 12px sans-serif;  
}

.month text {
  text-anchor: start;
}

.todayLine {
  stroke: blue;
  stroke-width: 1.5;
}

.axis line, .axis path {
  stroke: black;
}

.miniItem {
  stroke-width: 6;  
}

.future {
  stroke: gray;
  fill: #ddd;
}

.past {
  stroke: green;
  fill: lightgreen;
}

.brush .extent {
  stroke: gray;
  fill: blue;
  fill-opacity: .165;
}

.date .tick {
    font-size: 9px;
}

.nowline {
  stroke: red;
  stroke-width: 0.5;
}

.refPeriod{
  fill: grey;
  opacity: 0.3;
}

.workingPeriod{
  fill: grey;
  opacity: 0.3; 
}
.background {
  fill: grey;
  opacity: 0.1; 
}

.label {
  font-size: 9px;
  font-style: italic;
}
.label.hydro {
}
.meteo.bar {
  fill:#6F9768;
  stroke:#1D4219;
  stroke-width: 0.5;
}
.hydro.bar {
  fill: #618CBD;
  stroke:#191F42;
  stroke-width: 0.5;
}

path.handle {
    fill: #9A9A9A;
    stroke: #6A6A6A;
    stroke-width: 2;
    stroke-linejoin: round;
}
path.handle.active {
  stroke-width: 3.2 ;
  fill:#E7E7E7;
  stroke:#DD2727;
}
rect.brush {
  cursor:ew-resize;
}