/*
TODO: update comment (now using an svg, not divs)
We want the following properties for the root (div) element:
It should always fill the backgroud  (and register as the target of
  drop events when there's nothing above it).
If the elements inside it extend below the screen,
  we should be able to scroll down (and it should still fill the background).
If the elements inside do not extend below the screen,
  the page should not be scrollable.

I can't easily find a way to do all of these, so there's some code
 which redirects drops on the backgroud to the root
*/
#mainsvg{
  position: absolute;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  overflow-x: auto;
  cursor: default;
}
#imports{
  transform:translateX(-100px);
}
html,body{
  margin: 0px;
  padding:0px;
  overflow:hidden;
}
.hidden{
  display: none;
}
.invisible{
  visibility: hidden;
}
.filled>g{ /*make other things in filled holes invisible*/
  visibility: hidden;
}
.filled>.filling{
  visibility: inherit;
}
path{
  stroke-width: 0.96;
  fill-rule: evenodd;
  /*fill:none;
  stroke:red;*/
}
#hsTerm{
  position: absolute;
  bottom:0px;
}
#entry{
  position: absolute;
  top:0px;
}
#manual{
  position:absolute;
  right:0%;
  text-align:right;
  max-width:50%;
  color:grey;
  pointer-events: none;
  padding-right: 5px;
}
#reduceButton{
  position:absolute;
  right:0%;
}
.dragging{
  z-index: 10;
}
text{
  font-size: 16px;
  stroke:none;
  fill:initial;
}
#testtext{
  fill:none;
}
g:hover>path{
  stroke-width:1.5;
}
.defn{
  fill: white;
  stroke:black;
}
.line{
  fill:none;
  stroke:none;
}