svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

path.arrow {
  fill: none;
  stroke-width: 2;
  stroke: rgba(127, 127, 127, 0.05);
  transition: stroke 0.6s;
  marker-end: url(#arrowhead);
}
#arrowhead {
  fill: rgba(127, 127, 127, 0.2);
}

path.arrow.rev {
  stroke: #888;
  marker-end: url(#arrowhead-rev);
}
#arrowhead-rev {
  fill: #888;
}

path.arrow.rel {
  stroke: rgb(127, 127, 127, 0.6);
  marker-end: url(#arrowhead-rel);
}
#arrowhead-rel {
  fill: rgb(127, 127, 127, 0.6);
}

span.arrow {
  position: absolute;
  color: #888;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 0em 0.8em;
  border: 1px solid #888;
  border-radius: 12px;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.6s;
  cursor: pointer;
}
span.arrow.rev {
  opacity: 1;
}
span.arrow:hover {
  background-color: #fff;
  z-index: 10;
}

span.arrow > b:before {
  content: "↖";
}

span.arrow > a.id {
  color: #888;
  text-decoration: none;
  display: none;
}
span.arrow:hover > a.id {
  display: block;
}