@font-face {
 font-family: 'Proto Grotesk';
 src: local('☺️'),
  url('https://static.istories.media/public/fonts/Proto Grotesk-Regular-Web.woff2') format('woff2'),
  url('https://static.istories.media/public/fonts/Proto Grotesk-Regular-Web.woff') format('woff'),
  url('https://static.istories.media/public/fonts/Proto Grotesk-Regular-Web.ttf') format('truetype');
 font-weight: normal;
 font-style: normal;
 font-display: swap;
}
@font-face {
 font-family: 'Proto Grotesk';
 src: local('☺️'),
  url('https://static.istories.media/public/fonts/Proto Grotesk-Bold-Web.woff2') format('woff2'),
  url('https://static.istories.media/public/fonts/Proto Grotesk-Bold-Web.woff') format('woff'),
  url('https://static.istories.media/public/fonts/Proto Grotesk-Bold-Web.ttf') format('truetype');
 font-weight: bold;
 font-style: normal;
 font-display: swap;
}
g {
 font: normal 15px "Proto Grotesk";
}
html {
    width: 100%;
    height: 100%;
    overflow:  hidden;
}
body {

    width: 100%;
    height: 100%;
}
#figure{
    width: 100%;
    height: 100%;
    fill: #9a9a9a;
    //background-color: #E6E6E6;
}
.axis path,
.axis line {
  fill: none;
  stroke: none;
  shape-rendering: crispEdges;
}
.y .tick line {
    stroke: #ddd;
  fill: #9a9a9a;
  }
.x .tick line {
    fill: none;
    stroke: #ddd;
  fill: #9a9a9a;
  }

.toolTip {
    font: normal 14px "Proto Grotesk";

  position: absolute;
  display: none;
  min-width: 50px;
  height: auto;
  background: none repeat scroll 0 0 #676767;
  border: 1px solid #676767;
  padding: 3px;
  text-align: center;
  color: white;
  opacity: 0.9;
      border-radius: 5px;

}
.text {
          font: normal 17px "Proto Grotesk";
          pointer-events: none;
          fill: #676767;
      }