.the-graph-app {
  background-color: var-bg;
  position: relative;
}

svg {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.view {
}
.arrow {
  cursor: default;
}
.click {
  cursor: pointer;
}
.drag {
  cursor: pointer;
  cursor: -moz-grab;
  cursor: -webkit-grab;
  cursor: grab;
}

/* defaults */

.node-border {
  fill: var-node-border-bg;
  stroke: var-node-border;
  stroke-width: 2px;
};
.node-rect {
  fill: var-node;
  stroke: none;
}

@-webkit-keyframes error {
  0% { fill: var-node; }
  100% { fill: var-node-error; }
}
@-moz-keyframes error {
  0% { fill: var-node; }
  100% { fill: var-node-error; }
}
@-o-keyframes error {
  0% { fill: var-node; }
  100% { fill: var-node-error; }
}
@keyframes error {
  0% { fill: var-node; }
  100% { fill: var-node-error; }
}

.node.error .node-rect {
  -webkit-animation: error 1s linear infinite alternate;
     -moz-animation: error 1s linear infinite alternate;
       -o-animation: error 1s linear infinite alternate;
          animation: error 1s linear infinite alternate;
  stroke: none;
}

.eventcatcher {
  fill: var-type-a;
  fill-opacity: 0.1;
}

.node:hover
  .node-rect
    fill: var-node-hover
  .node-border
    stroke: var-node-hover-border
  .port-arc
    fill: var-node-hover-border

.ex-inports .node-border {
  fill: var-export-bg;
  stroke: none;
}
.ex-outports .node-border {
  fill: var-export-bg;
  stroke: none;
}
.ex-inports .node .node-rect,
.ex-outports .node .node-rect,
.ex-inports .node:hover .node-rect,
.ex-outports .node:hover .node-rect {
  fill: none;
}

.selection 
  .ex-inports .node .node-border
  .ex-outports .node .node-border 
    fill: var-export-bg

.small 
  .node-border
    fill: var-node
    stroke: none
  .ex-inports .node .node-border
  .ex-outports .node .node-border 
    fill: var-export-bg


.node-bg {
  opacity: 0;
}

/* de-emphasizing the rest of the nodes */
/* emphasizing the selection */

.selection
  .node
    .node-rect
      fill: var-node-deselected
    .node-border
      stroke: var-node-deselected-border
    .port-arc
      fill: var-node-deselected-border
    .node-icon
      fill: var-node-deselected-icon
  .node.selected
    .node-rect
      fill: var-node-selected
    .node-border
      stroke: var-node-selected-border
    .port-arc
      fill: var-node-selected-border
    .node-icon
      fill: var-node-selected-icon
  .ex-inports .node .node-icon
    fill: var-route02-fade
  .ex-outports .node .node-icon
    fill: var-route04-fade


.small .selection
  .node
    .node-rect
      fill: none
    .node-border
      fill: var-node-deselected
      stroke: none
  .node.selected
    .node-rect
      fill: none
    .node-border
      fill: var-node-selected
      stroke: none




path {
  fill: none;
}

.arrow-bg {
  stroke: var-edge-bg;
  stroke-width: ((var-edge-width+1)/2);
}
.edge-bg {
  stroke: var-edge-bg;
  stroke-width: (var-edge-width + 2);
}
.edge-fg {
  stroke: var-route00;
  stroke-width: var-edge-width;

  transition-property: stroke-width;
  transition-duration: 0.5s;
}
.edge-touch {
  stroke-width: (var-edge-width + 4);
  opacity: 0;
}
.edge:hover .edge-bg, .edge:hover .arrow-bg {
  stroke: var-edge-hover-bg;
}
.edge.selected .arrow-bg {
  stroke: var-selection-box-border;
  stroke-width: var-edge-width + 1;
}
.edge.selected .edge-bg {
  stroke-width: (var-edge-width * 2 + 2);
  stroke: var-selection-box-border;
}
.small .edge-bg {
  stroke-width: (var-edge-width * 2 + 2);
}
.small .edge-fg {
  stroke-width: (var-edge-width * 2);
}


/* marching ants for animated arrows */

@-webkit-keyframes arrow-heartbeats {
  0% { stroke-width: (var-edge-width + 1); }
  10% { stroke-width: ((var-edge-width + 1) * 2); }
  30% { stroke-width: (var-edge-width + 1); }
  40% { stroke-width: ((var-edge-width + 1) * 2); }
  60% { stroke-width: (var-edge-width + 1); }
}
@-moz-keyframes arrow-heartbeats {
  0% { stroke-width: (var-edge-width + 1); }
  10% { stroke-width: ((var-edge-width + 1) * 2); }
  30% { stroke-width: (var-edge-width + 1); }
  40% { stroke-width: ((var-edge-width + 1) * 2); }
  60% { stroke-width: (var-edge-width + 1); }
}
@-o-keyframes arrow-heartbeats {
  0% { stroke-width: (var-edge-width + 1); }
  10% { stroke-width: ((var-edge-width + 1) * 2); }
  30% { stroke-width: (var-edge-width + 1); }
  40% { stroke-width: ((var-edge-width + 1) * 2); }
  60% { stroke-width: (var-edge-width + 1); }
}
@keyframes arrow-heartbeats {
  0% { stroke-width: (var-edge-width + 1); }
  10% { stroke-width: ((var-edge-width + 1) * 2); }
  30% { stroke-width: (var-edge-width + 1); }
  40% { stroke-width: ((var-edge-width + 1) * 2); }
  60% { stroke-width: (var-edge-width + 1); }
}
.edge.animated .arrow-bg {
  stroke-linecap: round;
  stroke-width: (var-edge-width + 1);
  stroke: var-selection-box-border;

  -webkit-animation: arrow-heartbeats 4s linear infinite;
     -moz-animation: arrow-heartbeats 4s linear infinite;
       -o-animation: arrow-heartbeats 4s linear infinite;
          animation: arrow-heartbeats 4s linear infinite;
}


/* marching ants for animated edges */

@-webkit-keyframes heartbeats {
  0% { stroke-width: (var-edge-width * 2); }
  10% { stroke-width: (var-edge-width * 4); }
  30% { stroke-width: (var-edge-width * 2); }
  40% { stroke-width: (var-edge-width * 4); }
  60% { stroke-width: (var-edge-width * 2); }
}
@-moz-keyframes heartbeats {
  0% { stroke-width: (var-edge-width * 2); }
  10% { stroke-width: (var-edge-width * 4); }
  30% { stroke-width: (var-edge-width * 2); }
  40% { stroke-width: (var-edge-width * 4); }
  60% { stroke-width: (var-edge-width * 2); }
}
@-o-keyframes heartbeats {
  0% { stroke-width: (var-edge-width * 2); }
  10% { stroke-width: (var-edge-width * 4); }
  30% { stroke-width: (var-edge-width * 2); }
  40% { stroke-width: (var-edge-width * 4); }
  60% { stroke-width: (var-edge-width * 2); }
}
@keyframes heartbeats {
  0% { stroke-width: (var-edge-width * 2); }
  10% { stroke-width: (var-edge-width * 4); }
  30% { stroke-width: (var-edge-width * 2); }
  40% { stroke-width: (var-edge-width * 4); }
  60% { stroke-width: (var-edge-width * 2); }
}
.edge.animated .edge-bg {
  stroke-linecap: round;
  stroke-width: (var-edge-width * 2);
  stroke: var-selection-box-border;

  -webkit-animation: heartbeats 4s linear infinite;
     -moz-animation: heartbeats 4s linear infinite;
       -o-animation: heartbeats 4s linear infinite;
          animation: heartbeats 4s linear infinite;
}


text {
  font-family: "SourceCodePro", "Source Code Pro", Helvetica, Arial, sans-serif;
  text-rendering: geometricPrecision; /* makes text scale smoothly */
  font-size: 14px;
  fill: var-type-a;
  text-anchor: middle;
  dominant-baseline: central;
}

.text-bg-rect {
  fill: var-text-bg;
}

.node-label,
.node-sublabel {
  text-anchor: middle;
}
.small .node-label-bg {
  visibility: hidden;
}

.node-sublabel {
  font-size: 9px;
}
.node-sublabel-bg {
  visibility: hidden;
}
.big .node-sublabel-bg {
  visibility: visible;
}


/* IIPs */
.iip-path {
  stroke-width: 1px;
  stroke: var-route00;
}
.iip-info {
  visibility: hidden;
}
.iip-info .text-bg-text {
  font-size: 5px;
  text-anchor: end;
}
.big .iip-info {
  visibility: visible;
}


/* Context menu - node */
.context-modal-bg {
  fill: var-menu-modal-bg;
}
.context-node-rect {
  fill: var-menu-icon-bg;
  stroke: var-menu-border;
  stroke-width: 0.5px;
}
.context-node-icon {
  font-size: 30px;
  fill: var-type-a;
}
.context-icon {
  font-size: 20px;
  fill: var-type-a;
}
.context-node-label {
  text-anchor: middle;
}
.context-arc {
  stroke-width: 72px;
  stroke: var-menu-bg;
}
.context-slice.click:hover .context-arc {
  stroke: var-menu-bg-hover;
}
.context-circle {
  stroke: var-menu-border;
  fill: none;
  stroke-width: 1.5px;
}
.context-circle-x {
  stroke: var-menu-border;
  fill: none;
  stroke-width: 1px;
}

.context-arc-icon-label {
  font-size: 12px;
}


/* Context menu - port */
.context-port-bg {
  fill: var-menu-bg;
}
.context-port-bg.highlight {
  stroke: var-menu-border;
  stroke-width: 1px;
}
.context-port-hole {
  stroke-width: 2px;
  fill: var-menu-bg;
  stroke: var-menu-border;
}
.context-port-path {
  stroke: var-menu-border;
}
.context-port-label {
  fill: var-type-a;
  dominant-baseline: central;
}
.context-port-in .context-port-label {
  text-anchor: end;
}
.context-port-out .context-port-label {
  text-anchor: start;
}



/* Context menu - edge */
.context-edge-label-out {
  text-anchor: end;
  dominant-baseline: central;
}
.context-edge-label-in {
  text-anchor: start;
  dominant-baseline: central;
}


.tooltip {
  opacity: 1.0;

  transition-property: opacity;
  transition-duration: 0.3s;
}
.tooltip.hidden {
  opacity: 0;
}
.tooltip-bg {
  fill: var-tooltip-bg;
  opacity: 0.75;
}
.tooltip-label {
  text-anchor: start;
  font-size: 10px;
}

.icon {
  font-family: 'FontAwesomeSVG';
  text-anchor: middle;
  dominant-baseline: central;
}
.node-icon {
  font-size: 45px;
  fill: var-node-icon;

  transition-property: font-size, fill;
  transition-duration: 0.5s,      0.3s;
}
.small .node-icon {
  fill: var-node-icon-small;
  font-size: 66px;
}
.big .node-icon {
  fill: var-node-icon-big;
}

.ex-inports .node-icon,
.small .ex-inports .node-icon {
  fill: var-route02;
}
.ex-outports .node-icon,
.small .ex-outports .node-icon {
  fill: var-route04;
}

.port-circle-bg {
  fill: var-node-border;
  opacity: 0;
}
.port-arc {
  fill: var-node-border;
}
.port-circle-small {
  fill: none;
}
.small .port-circle {
  visibility: hidden;
}
.port-label {
  fill: var-type-b; 
  visibility: hidden;
  font-size: 6px;
  dominant-baseline: central;
}

.inports .port-label {
  text-anchor: start;  
}
.outports .port-label {
  text-anchor: end;  
}
.big .port-label {
  visibility: visible;
}
.big .ex-inports .port-label,
.big .ex-outports .port-label {
  visibility: hidden;
}


/* Groups */
.group-box {
  fill: var-group00;

  transition-property: fill;
  transition-duration: 0.3s;
}
.group-box:hover {
  fill: var-group00-hover;
}
.small .group-box {
  stroke-width: 8px;
}

.group-box.color0 
  fill: var-group00
  stroke: var-group00-stroke
.group-box.color1 
  fill: var-group01
  stroke: var-group01-stroke
.group-box.color2 
  fill: var-group02
  stroke: var-group02-stroke
.group-box.color3 
  fill: var-group03
  stroke: var-group03-stroke
.group-box.color4 
  fill: var-group04
  stroke: var-group04-stroke
.group-box.color5 
  fill: var-group05
  stroke: var-group05-stroke
.group-box.color6 
  fill: var-group06
  stroke: var-group06-stroke
.group-box.color7 
  fill: var-group07
  stroke: var-group07-stroke
.group-box.color8 
  fill: var-group08
  stroke: var-group08-stroke
.group-box.color9 
  fill: var-group09
  stroke: var-group09-stroke
.group-box.color10
  fill: var-group10
  stroke: var-group10-stroke

.group-box.color0:hover 
  fill: var-group00-hover
.group-box.color1:hover 
  fill: var-group01-hover
.group-box.color2:hover 
  fill: var-group02-hover
.group-box.color3:hover 
  fill: var-group03-hover
.group-box.color4:hover 
  fill: var-group04-hover
.group-box.color5:hover 
  fill: var-group05-hover
.group-box.color6:hover 
  fill: var-group06-hover
.group-box.color7:hover 
  fill: var-group07-hover
.group-box.color8:hover 
  fill: var-group08-hover
.group-box.color9:hover 
  fill: var-group09-hover
.group-box.color10:hover
  fill: var-group10-hover

/* deselected group */
.selection
  .group-box.color0 
    fill: var-group00-fade
  .group-box.color1 
    fill: var-group01-fade
  .group-box.color2 
    fill: var-group02-fade
  .group-box.color3 
    fill: var-group03-fade
  .group-box.color4 
    fill: var-group04-fade
  .group-box.color5 
    fill: var-group05-fade
  .group-box.color6 
    fill: var-group06-fade
  .group-box.color7 
    fill: var-group07-fade
  .group-box.color8 
    fill: var-group08-fade
  .group-box.color9 
    fill: var-group09-fade
  .group-box.color10
    fill: var-group10-fade

/* selected pseudo-group */
.selection
  .group-box.selection
    fill: var-selection-box
    stroke: var-selection-box-border
    stroke-width: 1px
  .group-box.selection:hover
    fill: var-selection-box-hover


.group-label {
  text-anchor: start;  
  fill: var-type-a;
  font-size: 20px;
  transition-property: font-size;
  transition-duration: 0.5s;
}
.small .group-label {
  font-size: 30px;
  transition-property: font-size;
  transition-duration: 0.5s;
}

.group-description {
  fill: var-type-a;
  font-size: 12px;
  text-anchor: start;  
}
.small .group-description {
  visibility: hidden;
}

.stroke
.stroke.route0
.selection .selected .stroke
.selection .selected .stroke.route0
  stroke: var-route00
.stroke.route1
.selection .selected .stroke.route1
  stroke: var-route01
.stroke.route2
.selection .selected .stroke.route2
  stroke: var-route02
.stroke.route3
.selection .selected .stroke.route3
  stroke: var-route03
.stroke.route4
.selection .selected .stroke.route4
  stroke: var-route04
.stroke.route5
.selection .selected .stroke.route5
  stroke: var-route05
.stroke.route6
.selection .selected .stroke.route6
  stroke: var-route06
.stroke.route7
.selection .selected .stroke.route7
  stroke: var-route07
.stroke.route8
.selection .selected .stroke.route8
  stroke: var-route08
.stroke.route9
.selection .selected .stroke.route9
  stroke: var-route09
.stroke.route10
.selection .selected .stroke.route10
  stroke: var-route10

.selection
  .stroke
  .stroke.route0
    stroke: var-route00-fade
  .stroke.route1
    stroke: var-route01-fade
  .stroke.route2
    stroke: var-route02-fade
  .stroke.route3
    stroke: var-route03-fade
  .stroke.route4
    stroke: var-route04-fade
  .stroke.route5
    stroke: var-route05-fade
  .stroke.route6
    stroke: var-route06-fade
  .stroke.route7
    stroke: var-route07-fade
  .stroke.route8
    stroke: var-route08-fade
  .stroke.route9
    stroke: var-route09-fade
  .stroke.route10
    stroke: var-route10-fade

.fill
.fill.route0
.selection .selected .fill
.selection .selected .fill.route0
  fill: var-route00
.fill.route1
.selection .selected .fill.route1
  fill: var-route01
.fill.route2
.selection .selected .fill.route2
  fill: var-route02
.fill.route3
.selection .selected .fill.route3
  fill: var-route03
.fill.route4
.selection .selected .fill.route4
  fill: var-route04
.fill.route5
.selection .selected .fill.route5
  fill: var-route05
.fill.route6
.selection .selected .fill.route6
  fill: var-route06
.fill.route7
.selection .selected .fill.route7
  fill: var-route07
.fill.route8
.selection .selected .fill.route8
  fill: var-route08
.fill.route9
.selection .selected .fill.route9
  fill: var-route09
.fill.route10
.selection .selected .fill.route10
  fill: var-route10

.selection
  .fill
  .fill.route0
    fill: var-route00-fade
  .fill.route1
    fill: var-route01-fade
  .fill.route2
    fill: var-route02-fade
  .fill.route3
    fill: var-route03-fade
  .fill.route4
    fill: var-route04-fade
  .fill.route5
    fill: var-route05-fade
  .fill.route6
    fill: var-route06-fade
  .fill.route7
    fill: var-route07-fade
  .fill.route8
    fill: var-route08-fade
  .fill.route9
    fill: var-route09-fade
  .fill.route10
    fill: var-route10-fade