body, html {
  height: 100%;
  margin: 0px;
}

svg {
  overflow: hidden;
  display: inline;
  width: inherit;
  min-width: inherit;
  max-width: inherit;
  height: inherit;
  min-height: inherit;
  max-height: inherit;
}

svg .node.root {
  visibility: visible !important;
}
svg g.node.root rect.basic {
  stroke: cc3a3a;
}

svg .node.root .down-arrow-container {
  visibility: hidden !important;
}

svg .node.terminal .up-arrow-container {
  visibility: hidden !important;
}

g.node.default rect.basic{
  fill: none !important;;
  stroke: #545454 !important;;
}


#container-fullname {
  position: fixed;
  bottom: 1%;
  font-family: 'Tex Gyre Schola';
  font-style: italic;
  transform: rotate(-180deg);
  writing-mode: vertical-rl;
  display: flex;
  align-content: center;
  width: inherit;
}


#container-fullname p {    
  margin: 0px;
}

#container-fullname span.span-lineage {    
  display: block;
  font-size: 0.5rem;
}

#container-fullname span.span-fullname {
  display: block;
  font-size: 1rem;
}

#svgContainer {
  overflow: hidden;
  width: 100%;
}

.svg-pan-zoom_viewport {
  transition: transform 0.5s ease;
}

.screen{
    position: absolute;
    width: 100%;
    height: 100%;
    background: #fffdff;
    z-index: 100;
    text-align: center;
    transition: opacity 250ms ease-in, visibility 0ms ease-in 250ms;
}

.hiddenfade {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 500ms, opacity 500ms linear;
}