.node-graph {
    --font-sans: "GT America", sans-serif;
    --text-xs: 0.75rem;
    --text-xs--line-height: 1.125rem;
    --text-sm: 0.875rem;
    --text-sm--line-height: 1.25rem;
    --text-md: 1rem;
    --text-md--line-height: 1.5rem;
    --color-white: #ffffff;
    --color-black: #000000;
    --color-grey-100: #f8f9fa;
    --color-grey-200: #e9ecef;
    --color-grey-300: #dee2e6;
    --color-grey-400: #ced4da;
    --color-grey-500: #6c757d;
    --color-grey-600: #495057;
    --color-grey-700: #343a40;
    --color-grey-800: #212529;
    --color-e-blue-100: #CCD4F8;
    --color-e-blue-200: #8094EC;
    --color-e-blue-300: #5570E6;
    --color-e-blue-400: #2B4DE0;
    --color-e-blue-500: #0029DA;
    --color-e-blue-600: #0022B6;
    --color-e-blue-700: #001B91;
    --color-e-blue-800: #000E49;
    --color-e-blue-900: #00082C;
    --color-e-purple-100: #d1d1e1;
    --color-e-purple-200: #b2b2cd;
    --color-e-purple-300: #64669c;
    --color-e-purple-400: #3e3f83;
    --color-e-purple-500: #17196a;
    --color-e-purple-600: #0f1147;
    --color-e-purple-700: #0c0d35;
    --color-e-purple-800: #080823;
    --color-e-purple-900: #050515;
    --color-e-green-100: #cef4d9;
    --color-e-green-200: #adecc0;
    --color-e-green-300: #84e2a0;
    --color-e-green-400: #5cd981;
    --color-e-green-500: #0ac642;
    --color-e-green-600: #08a537;
    --color-e-green-700: #07842c;
    --color-e-green-800: #056321;
    --color-e-green-900: #02280d;
    --color-e-orange-100: #ffd4cd;
    --color-e-orange-200: #ffb7ac;
    --color-e-orange-300: #ff7058;
    --color-e-orange-400: #ff4c2f;
    --color-e-orange-500: #ff2805;
    --color-e-orange-600: #d42104;
    --color-e-orange-700: #aa1b03;
    --color-e-orange-800: #801403;
    --color-e-orange-900: #550d02;
    --background-color: var(--color-white);
    --link-stroke: var(--color-grey-500);
    --link-stroke-width: 2px;
    --node-fill: var(--background-color);
    --node-stroke-width: 2px;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    color: var(--color-grey-500);
    position: relative;
    user-select: none;
    overflow-x: auto;
}

.node-graph text {
  fill: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  paint-order: stroke;
}

.node-graph .node.is-selected text {
   fill: #000000;
   font-weight: bold;
   stroke-linecap: round;
   stroke-linejoin: round;
   paint-order: stroke;
}

.node-graph .link {
  stroke: var(--link-stroke);
  stroke-width: var(--link-stroke-width);
}

.node-graph .node {
  cursor: pointer;
  fill: var(--node-fill);
}

.node-graph .node[data-status="normal"] {
  --node-stroke: var(--color-grey-500);
}

.node-graph .node[data-status="terminated"] {
  --node-stroke: var(--color-e-orange-500);
}

.node-graph .node[data-status="waiting"] {
  --node-stroke: var(--color-e-purple-500);
}

.node-graph .node.is-selected[data-status="normal"] {
  --node-fill: var(--color-grey-100);
  --node-stroke: var(--color-e-blue-300);
}

.node-graph .node.is-selected[data-status="terminated"] {
  --node-fill: var(--color-e-orange-100);
}

.node-graph .node.is-selected[data-status="waiting"] {
  --node-fill: var(--color-e-purple-100);
}

.node-graph .node__circle {
  stroke-width: var(--node-stroke-width);
  stroke: var(--node-stroke, currentColor);
  fill: var(--node-fill);
  transition: transform 0.15s, fill 0.15s;
}

.node-graph .node:hover .node__circle {
  transform: scale(1.05);
}

.node-graph .tip {
  z-index: 9999;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  background-color: var(--background-color);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  box-shadow: 0px 4px 6px -2px #10182808, 0px 0px 16px -4px #10182814;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.15s, opacity 0.15s;
}

.node-graph .tip.is-visible {
  visibility: visible;
  opacity: 1;
}

.node-graph .tip dl {
  margin: 0;
}

.node-graph .tip dt {
  display: inline;
  color: var(--color-grey-500);
}

.node-graph .tip dt::after {
  content: ":";
}

.node-graph .tip dd {
  display: inline;
  color: var(--color-grey-800);
  margin: 0;
}