.x6-graph {
    position: relative;
    overflow: hidden;
    outline: none;
    touch-action: none;
  }
  .x6-graph-background,
  .x6-graph-grid,
  .x6-graph-svg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  .x6-graph-background-stage,
  .x6-graph-grid-stage,
  .x6-graph-svg-stage {
    user-select: none;
  }
  .x6-graph.x6-graph-pannable {
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
  }
  .x6-graph.x6-graph-panning {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
    user-select: none;
  }
  .x6-node {
    cursor: move;
    /* stylelint-disable-next-line */
  }
  .x6-node.x6-node-immovable {
    cursor: default;
  }
  .x6-node * {
    -webkit-user-drag: none;
  }
  .x6-node .scalable * {
    vector-effect: non-scaling-stroke;
  }
  .x6-node [magnet='true'] {
    cursor: crosshair;
    transition: opacity 0.3s;
  }
  .x6-node [magnet='true']:hover {
    opacity: 0.7;
  }
  .x6-node foreignObject {
    display: block;
    overflow: visible;
    background-color: transparent;
  }
  .x6-node foreignObject > body {
    position: static;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: visible;
    background-color: transparent;
  }
  .x6-edge .source-marker,
  .x6-edge .target-marker {
    vector-effect: non-scaling-stroke;
  }
  .x6-edge .connection {
    stroke-linejoin: round;
    fill: none;
  }
  .x6-edge .connection-wrap {
    cursor: move;
    opacity: 0;
    fill: none;
    stroke: #000;
    stroke-width: 15;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .x6-edge .connection-wrap:hover {
    opacity: 0.4;
    stroke-opacity: 0.4;
  }
  .x6-edge .vertices {
    cursor: move;
    opacity: 0;
  }
  .x6-edge .vertices .vertex {
    fill: #1abc9c;
  }
  .x6-edge .vertices .vertex :hover {
    fill: #34495e;
    stroke: none;
  }
  .x6-edge .vertices .vertex-remove {
    cursor: pointer;
    fill: #fff;
  }
  .x6-edge .vertices .vertex-remove-area {
    cursor: pointer;
    opacity: 0.1;
  }
  .x6-edge .vertices .vertex-group:hover .vertex-remove-area {
    opacity: 1;
  }
  .x6-edge .arrowheads {
    cursor: move;
    opacity: 0;
  }
  .x6-edge .arrowheads .arrowhead {
    fill: #1abc9c;
  }
  .x6-edge .arrowheads .arrowhead :hover {
    fill: #f39c12;
    stroke: none;
  }
  .x6-edge .tools {
    cursor: pointer;
    opacity: 0;
  }
  .x6-edge .tools .tool-options {
    display: none;
  }
  .x6-edge .tools .tool-remove circle {
    fill: #f00;
  }
  .x6-edge .tools .tool-remove path {
    fill: #fff;
  }
  .x6-edge:hover .vertices,
  .x6-edge:hover .arrowheads,
  .x6-edge:hover .tools {
    opacity: 1;
  }
  .x6-highlight-opacity {
    opacity: 0.3;
  }
  .x6-cell-tool-editor {
    position: relative;
    display: inline-block;
    min-height: 1em;
    margin: 0;
    padding: 0;
    line-height: 1;
    white-space: normal;
    text-align: center;
    vertical-align: top;
    overflow-wrap: normal;
    outline: none;
    transform-origin: 0 0;
    -webkit-user-drag: none;
  }
  .x6-edge-tool-editor {
    border: 1px solid #275fc5;
    border-radius: 2px;
  }