:root {
  --viz-color-blue: #4e79a7;
  --viz-color-red: #e15759;
  --viz-font-size: 11;
}

body {
  margin: 0;
}

.chart-container {
  width: 100vw;
  height: 100vh;
}

.chart-container > svg {
  width: 100%;
  height: 100%;
  will-change: transform;
  transform: translateZ(0);
}

.control-panel {
  position: absolute;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: .25rem;
  background-color: #fff;
  background-clip: padding-box;
}

.control-panel.top {
  top: 0;
}

.control-panel.bottom {
  bottom: 0;
}

.control-panel.left {
  left: 0;
}

.control-panel.right {
  right: 0;
}

.zoom-button {
  padding: 0;
  min-width: 32px;
  height: 32px;
  font-size: 24px;
  line-height: 1;
}

.tail-select {
  display: block;
}

.alert {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.chart-tooltip {
  position: absolute;
  font-size: 0.875rem;
  top: 0;
  left: 0;
  max-width: 420px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
  max-height: 100vh;
  overflow-y: auto;
}

.chart-tooltip img {
  max-width: 100%;
}

.tooltip-content > * {
  margin: 0;
}

.tooltip-content > * + * {
  margin-top: 0.5em;
}

.chart-tooltip.show {
  opacity: 1;
}

.link {
  fill: none;
  stroke: var(--viz-color-blue);
}

.connection {
  fill: none;
  stroke: var(--viz-color-red);
}

.label {
  stroke: #ffffff;
  stroke-width: 3;
  paint-order: stroke;
  cursor: default;
  font-size: calc(var(--viz-font-size) * 1px);
}

.label.found,
.label:hover {
  font-weight: bold;
}

.label.has-popup {
  color: var(--viz-color-red);
}

.label.has-url {
  cursor: pointer;
}