:root {
  --color1: hsl(0, 100%, 90%);
  --color2: hsl(90, 100%, 90%);
  --color3: hsl(180, 100%, 90%);
  --color4:hsl(270, 100%, 90%);
}

#tab-buttons a {
  color: black;
  text-decoration: none;
  padding-left: 1rem;
  padding-right: 1rem;
}

#tab-buttons a:nth-child(1) {
  background-color: var(--color1);
}

#tab-buttons a:nth-child(2) {
  background-color: var(--color2);
}

#tab-buttons a:nth-child(3) {
  background-color: var(--color3);
}

#tab-buttons a:nth-child(4) {
  background-color: var(--color4);
}

#tab-buttons a:visited {
  color: black;
}

#tabs div:nth-child(1) {
  background-color: var(--color1);
}

#tabs div:nth-child(2) {
  background-color: var(--color2);
}

#tabs div:nth-child(3) {
  background-color: var(--color3);
}

#tabs div:nth-child(4) {
  background-color: var(--color4);
}

#tabs > div {
  height: 70vh;
}

svg text.short {
  pointer-events: bounding-box;
  cursor: pointer;
}

svg text.short ~ text.long {
  visibility: hidden;
}

svg text.short ~ circle.large {
  visibility: hidden;
}

svg text.short:hover {
  font-weight: bold;
}

svg text.short:hover ~ text.long {
  visibility: visible;
  fill: red;
  text-shadow: 0px 0px 7px white;
}

svg text.short:hover ~ circle.large {
  visibility: visible;
  fill: red;
}

svg text.short {
  font-size: 16px;
}

svg text.long {
  font-size: 16px;
}

svg.bai2 text.short {
  font-size: 13px;
}

svg.bai2 text.long {
  font-size: 13px;
}

svg.bai3 text.short {
  font-size: 8px;
}

svg.bai3 text.long {
  font-size: 8px;
}

svg.bai4 text.short {
  font-size: 5px;
}

svg.bai4 text.long {
  font-size: 5px;
}
/*# sourceMappingURL=graph.css.map */