/* body {
    font: 10px sans-serif;
  }
  
  /* .axis path,
  .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
  }
  
  .grid path,
  .grid line {
    fill: none;
    stroke: rgba(0, 0, 0, 0.25);
    shape-rendering: crispEdges;
  }
  
  .x.axis path {
    display: none;
  }
  
  .line {
    fill: none;
    stroke-width: 2.5px;
  }
.tick line{
opacity: 0.2;
} 
*/
/* tell the SVG path to be a thin blue line without any area fill */
 /* body {
    font: 12px Arial;
    margin: 0;
    padding: 0;
}

svg {
    background-color: #FFFFFF;
    padding: 30px;
}

path {
    fill: none;
    stroke: steelblue;
    stroke-width: 2;
}

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

.axis text {
    fill: #766;
    font-family: 'PT Sans Narrow', sans-serif;
    font-size: 12px;
}

.line-chart
    {
        border: 1px solid lightgray;
    }

    .line {
        fill: none;
        stroke: steelblue;
        stroke-width: 1.5px;
      } */

      /* body {
        font: 11.5px lato;
      }
      
      path.line {
        fill: none;
        stroke: #004ecc;
        stroke-width: 4px;
      }
      
      path.line2 {
        fill: none;
        stroke: #cc0000;
        stroke-width: 4px;
      }
      
      path.area {
        fill: #e7e7e7;
      }
      
      .guideline {
        margin-right: 100px;
        float: right;
      }
      
      .axis path,
      .axis line {
        fill: none;
        stroke-width: 5px;
      }
      
      .x.axis path {
        display: none;
      }
      
      .y.axis path {
        display: none;
      }
      
      .grid .tick {
        stroke: black;
        stroke-width: 0.2px;
        opacity: 5;
      }
      
      .line {
        fill: none;
        stroke: steelblue;
        stroke-width: 2px;
      }
      
      .graph-column {
        float: left;
      }

      .chart {
        font-family: Arial, sans-serif;
        font-size: 10px;
      }
    
      .axis path, .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
      }
    
      .bar {
        fill: steelblue;
      }  

       body {
        font: 12px Arial;
    }
    path {
        stroke: steelblue;
        stroke-width: 2;
        fill: none;
    }
    .axis path, .axis line {
        fill: none;
        stroke: grey;
        stroke-width: 1;
        shape-rendering: crispEdges;
    } 

    .line {
      fill: none;
      stroke: steelblue;
      stroke-width: 2px;
    }
     */
    .grid line {
      stroke: lightgrey;
      stroke-opacity: 0.7;
      shape-rendering: crispEdges;
    }
    
    .grid path {
      stroke-width: 0;
    }
    .bar.positive {
      fill: steelblue;
    }
    
    .bar.negative {
      fill: brown;
    }
    
    .axis text {
      font: 10px sans-serif;
    }
    
    .axis path,
    .axis line {
      fill: none;
      stroke: rgb(80, 80, 80);
      shape-rendering: crispEdges;
    }

    /* .x.axis path {
      display: none;
    } */