$font-stack: Helvetica, sans-serif;
$tooltip-gray: #323232;

.relationshipGraph-block {
  stroke: #F7F7F7;
  stroke-width: 1px;
  pointer-events: all;
}

.relationshipGraph-block:hover {
  cursor: pointer;
}

.relationshipGraph-Text {
  font-family: $font-stack;
  font-size: 10pt;
  fill: $tooltip-gray;
}

.relationshipGraph-measurement {
  font-family: $font-stack;
  font-size: 13px;
  position: absolute;
  width: auto;
  height: auto;
  left: -100%;
  top: -100%;
}

.relationshipGraph-tip {
  font-weight: bold;
  font-family: $font-stack;
  font-size: 9pt;
  line-height: 1;
  padding: 12px;
  background: $tooltip-gray;
  color: #e7e7e7;
  border-radius: 6px;
  z-index: 50;
  max-width: 350px;
  max-height: 300px;
}

.relationshipGraph-tip:after {
  display: inline-block;
  font-size: 15px;
  width: 100%;
  height: 5px;
  color: $tooltip-gray;
  content: "\25B6";
  position: absolute;
}

.relationshipGraph-tip.n:after {
  content: "\25BC";
  margin: -1px 0 0 0;
  top: 100%;
  left: 12px;
  text-align: center;
}

.relationshipGraph-tip.e {
  margin-left: 15px;
}

.relationshipGraph-tip.e:after {
  content: "\25C0";
  margin: -2px 0 0 0;
  top: 50%;
  left: -11px;
}

.relationshipGraph-tip.s {
  margin-top: 15px;
}

.relationshipGraph-tip.s:after {
  content: "\25B2";
  margin: 0 0 1px 0;
  top: -12px;
  left: 12px;
  text-align: center;
}

.relationshipGraph-tip.w:after {
  content: "\25B6";
  margin: -4px 0 0 -1px;
  top: 50%;
  left: 100%;
}
