.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: rgb(230,0,0);
}
.rountangle.active {
  fill: darkorange;
  fill-opacity: 0.2;
  /* filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7)); */
  stroke-width: 3px;
}

.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;
}

#arrowEnd {
  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: 8px;
}
text.helper:hover {
  stroke: blue;
  stroke-opacity: 0.2;
}

.draggableText, .draggableText.highlight {
  /* text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff, 1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff; */
  /* -webkit-text-stroke: 4px white; */
  paint-order: stroke;
  stroke: white;
  stroke-width: 4px;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-opacity: 1;
  fill-opacity:1;
  /* font-weight: 800; */
}

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

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

.arrow.error {
  stroke: rgb(230,0,0);
}
text.error, tspan.error {
  fill: rgb(230,0,0);
  font-weight: 600;
}

.errorHover {
  display: none;
}

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

text.uid {
  fill: lightgrey;
}