.svgCanvas {
  cursor: crosshair;
  background-color: #eee;
}

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

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

.svgCanvas.active {
  /* background-color: rgb(255, 140, 0, 0.2); */
}

.svgCanvas text {
  user-select: none;
}

/* rectangle drawn while a selection is being made */
.selecting {
  fill: blue;
  fill-opacity: 0.2;
  stroke-width: 1px;
  stroke:black;
  stroke-dasharray: 7 6;
}

.rountangle {
  fill: white;
  stroke: black;
  stroke-width: 2px;
}

.rountangle.selected {
  /* fill: rgba(0, 0, 255, 0.2); */
}
.rountangle.error {
  stroke: var(--error-color);
}
.rountangle.active {
  stroke: rgb(192, 125, 0);
  fill:rgb(255, 251, 244);
  filter: drop-shadow( 0px 0px 3px rgba(192, 125, 0, 0.85));
}

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

line.helper {
  stroke: rgba(0, 0, 0, 0);
  stroke-width: 16px;
}
line.helper:hover:not(:active) {
  stroke: blue;
  stroke-opacity: 0.2;
  cursor: grab;
}

path.helper {
  fill: none;
  stroke: rgba(0, 0, 0, 0);
  stroke-width: 16px;
}
path.helper:hover:not(:active) {
  stroke: blue;
  stroke-opacity: 0.2;
  cursor: grab;
}

circle.helper {
  fill: rgba(0, 0, 0, 0);
}
circle.helper:hover:not(:active) {
  fill: blue;
  fill-opacity: 0.2;
  cursor: grab;
}

.rountangle.or {
  stroke-dasharray: 7 6;
  fill: #eee;
}

.arrow {
  fill: none;
  stroke: black;
  stroke-width: 2px;
}
.arrow.selected {
  stroke: blue;
  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: rgba(0, 0, 255, 0.2);
  /* stroke-dasharray: 7 6; */
  stroke: blue;
  stroke-width: 4px;
}

.draggableText.selected, .draggableText.selected:hover {
  fill: blue;
  font-weight: 600;
}
.draggableText:hover:not(:active) {
  /* fill: blue; */
  /* cursor: grab; */
}
text.helper {
  fill: rgba(0,0,0,0);
  stroke: rgba(0,0,0,0);
  stroke-width: 16px;
}
text.helper:hover {
  stroke: blue;
  stroke-opacity: 0.2;
  cursor: grab;
}

.draggableText, .draggableText.highlight {
  paint-order: stroke;
  stroke: white;
  stroke-width: 4px;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-opacity: 1;
  fill-opacity:1;
}

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

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

.arrow.error {
  stroke: var(--error-color);
}
.arrow.fired {
  stroke: rgb(192, 125, 0);
  stroke-width: 3px;
}

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

.errorHover {
  display: none;
}

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

text.uid {
  fill: lightgrey;
}