#svgroot {
  -moz-user-select: none;
  -webkit-user-select: none;
  display: block;
}

#svg_editor {
  background: var(--z1);
}

#svgcanvas {
  background-color: var(--z2);
  display: block;
}

#workarea {
  display: block;
  position:absolute;
  top: var(--x8);
  left: var(--x12);
  bottom: var(--x10);
  right: calc(var(--panel-width) + var(--x4));
  background-color: var(--z2);
  overflow: auto;
  align-items: center;
  justify-content: center;
  transition: transform 500ms cubic-bezier(0.13,0.66,0.24,0.92);
  border-radius: var(--x2);
  box-shadow: var(--shadow-bg);
}

.inverted #svgcanvas,
.inverted #workarea {
  background:  var(--z1);
}

#workarea.rect, #workarea.line, #workarea.ellipse, #workarea.path, #workarea.shapelib {
  cursor: crosshair;
}

#workarea.text {
  cursor: text;
}

#workarea.eyedropper {
  cursor: url(../images/eyedropper.svg) 0 16, crosshair;
}

#workarea.fhpath {
  cursor: url(../images/pencil_cursor.png) 0 16, crosshair;
}

#workarea.rotate * {
  cursor: url(../images/rotate.png) 12 12, auto;
}

#workarea.select text, #workarea.multiselect text {
  cursor: default;
}

#workarea.n-resize * {cursor: n-resize !important;}
#workarea.e-resize * {cursor: e-resize !important;}
#workarea.w-resize * {cursor: w-resize !important;}
#workarea.s-resize * {cursor: s-resize !important;}

#workarea.ne-resize * {cursor: ne-resize !important;}
#workarea.se-resize * {cursor: se-resize !important;}
#workarea.nw-resize * {cursor: nw-resize !important;}
#workarea.sw-resize * {cursor: sw-resize !important;}

#workspace.dragging *,
body.dragging * {
  cursor: url(../images/dragging.png), move;
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
}

#workspace.drag * {
  cursor: url(../images/dragging.png), move;
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
}

#workarea.copy {
  cursor: copy;
}

#workarea.zoom {
  cursor: crosshair;
  cursor:-moz-zoom-in;
  cursor:-webkit-zoom-in;
}
#workarea.zoom.out {
  cursor: crosshair;
  cursor:-moz-zoom-out;
  cursor:-webkit-zoom-out;
}

#selectorRubberBand {
  shape-rendering: crispEdges;
}