#viz-container {
  position: relative;
  width: 100%;
  height: 750px;
  font-family: "Lato", sans-serif !important;
  color: #444;
  pointer-events: none; 
}

#viz-container:fullscreen {
  background-color: #FFFFFF;
  pointer-events: auto;
}

#viz-container:-ms-fullscreen {
  background-color: #FFFFFF;
  pointer-events: auto;
}

.viz-frame {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  min-height: 500px;
  height: 100%;
  overflow: auto;
}

#viz-container .iframe-wrapper {
  height: 100%;
  position: static;
  padding-bottom: 0px;
}

#visualisation {
  height: 95vh;
  padding-top: 10px
  padding-bottom: 30px;
  opacity: 1;
  background-color: #FFFFFF;
}

#visualisation svg {
  z-index: -100;
}

.tooltip-table,
data {
  max-width: 200px;
  font-size: 11px;
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

#d3plus-tooltip-0{
  position: absolute;
  max-width: 150px;
  z-index: 1000;
}

.button {
  background-color: #eeeeee;
  border: none;
  color: white;
  padding: 10px 10px;
  text-align: left;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 10px;
  border: 10px white;
}

a.button:hover {
  opacity: 70%;
}

.tooltip {
  position: relative;
  display: inline-block;
  height: 15px;
  font-weight: bold;
  margin: 10px;
  cursor: pointer;
  color: grey;
  border-bottom: 1px dotted grey; /* If you want dots under the hoverable text */
}


/* Tooltip text */
.tooltip .tooltipcontent {
  visibility: hidden;
  z-index: 1;
  max-width: 300px;
  max-height: 200px;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltipcontent {
  visibility: visible;
}

.tooltip-title {
  max-width: 200px;
  font-size: 13px;
  color: #444;
}

.tooltip-text {
  margin: 0;
  padding: 0;
  font-size: 0.8em;
}


#button-1 {
  background-color: #50c35f;
}

#button-2 {
  background-color: #272736;
}

#button-3 {
  background-color: #08bfe3;
}

#button-4 {
  background-color: #f70606;
}

#button-5 {
  background-color: #7c533d;
}

#button-6 {
  background-color: #f9803a;
}

#button-7 {
  background-color: #46802b;
}


.curveText {
  font-family: "Lato", sans-serif !important;
/*
  -webkit-filter: invert(100%);
  filter: invert(100%);
  mix-blend-mode: difference;
*/  
}