.svgCanvas {
  cursor: crosshair;
  background-color: var(--or-state-bg-color);
}

.svgCanvas.dragging  {
  cursor: grabbing !important;
}

/* do not render helpers while dragging something */
.svgCanvas.dragging .helper:hover {
  visibility: hidden !important;
}


.svgCanvas text {
  user-select: none;
}

/* rectangle drawn while a selection is being made */
.selecting {
  fill: var(--light-accent-color);
  stroke-width: 1px;
  stroke: var(--accent-border-color);
  stroke-dasharray: 7 6;
}

.rountangle {
  fill: var(--and-state-bg-color);
  stroke: var(--rountangle-stroke-color);
  stroke-width: 2px;
}

.rountangle.selected {
  /* fill: rgba(0, 0, 255, 0.2); */
}
.rountangle.error {
  stroke: var(--error-color);
}
.rountangle.active {
  stroke: var(--active-state-border-color);
  /* stroke: none; */
  /* fill:rgb(255, 240, 214); */
  fill: var(--active-state-bg-color);
  /* filter: drop-shadow( 2px 2px 2px rgba(124, 37, 10, 0.729)); */
}

.selected:hover:not(:active) {
  cursor: grab;
}

line.helper {
  stroke: rgba(0, 0, 0, 0);
  stroke-width: 16px;
}
line.helper:hover:not(:active) {
  stroke: var(--light-accent-color);
  cursor: grab;
}

path.helper {
  fill: none;
  stroke: rgba(0, 0, 0, 0);
  stroke-width: 16px;
}
path.helper:hover:not(:active) {
  stroke: var(--light-accent-color);
  cursor: grab;
}

circle.helper {
  fill: rgba(0, 0, 0, 0);
}
circle.helper:hover:not(:active) {
  fill: var(--light-accent-color);
  cursor: grab;
}

.rountangle.or {
  stroke-dasharray: 7 6;
  fill: var(--or-state-bg-color);
}

.arrow {
  fill: none;
  stroke: var(--rountangle-stroke-color);
  stroke-width: 2px;
}
.arrow.selected {
  stroke: var(--accent-border-color);
  stroke-width: 3px;
}

.arrow::marker {
  fill: content-stroke;
}

#arrowEnd {
  fill: context-stroke;
}
#initialMarker {
  fill: context-stroke;
}

.arrow:hover {
  cursor: grab;
}

line.selected, circle.selected {
  fill: var(--light-accent-color);
  stroke: var(--accent-border-color);
  stroke-width: 4px;
}

.draggableText.selected, .draggableText.selected:hover {
  fill: var(--accent-border-color);
  font-weight: 600;
}
text.helper {
  fill: rgba(0,0,0,0);
  stroke: rgba(0,0,0,0);
  stroke-width: 6px;
}
text.helper:hover {
  stroke: var(--light-accent-color);
  cursor: grab;
}

.draggableText, .draggableText.highlight {
  paint-order: stroke;
  fill: var(--text-color);
  stroke: var(--background-color);
  stroke-width: 4px;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-opacity: 1;
  fill-opacity:1;
}

.draggableText.highlight:not(.selected) {
  fill: var(--associated-color);
  font-weight: 600;
}

.draggableText.selected {
  fill: var(--accent-border-color);
}

.highlight:not(.selected):not(text) {
  stroke: var(--associated-color);
  stroke-width: 3px;
  fill: none;
}

.arrow.error {
  stroke: var(--error-color);
}
.arrow.fired {
  stroke: var(--fired-transition-color);
  stroke-width: 3px;
  animation: blinkTransition 1s;
}

@keyframes blinkTransition {
  0% {
    stroke: var(--firing-transition-color);
    stroke-width: 6px;
    filter: drop-shadow(0 0 5px var(--firing-transition-color));
  }
  100% {
    stroke: var(--fired-transition-color);
  }
}


text.error, tspan.error {
  fill: var(--error-color);
  font-weight: 600;
}

.errorHover {
  display: none;
}

g:hover > .errorHover {
  display: inline;
}

text.uid {
  fill: var(--separator-color);
}