.ui-document-designer {
  background-color: white;
  border: 1px dotted darkgrey;
  position: relative; }
  .ui-document-designer .selected {
    background: rgba(250, 255, 250, 0.9);
    border: 1px solid green;
    box-shadow: 0 0 2px 2px #c8ffc8; }

.designer.tools span[class] {
  background-color: white;
  display: inline-block;
  height: 16px;
  padding: 4px;
  vertical-align: top; }
  .designer.tools span[class]:not(.free-text) {
    color: transparent;
    font-size: 0.1px !important;
    width: 20px; }
  .designer.tools span[class].free-text {
    border: 1px solid darkgrey;
    height: 14px;
    white-space: nowrap; }
  .designer.tools span[class].horizontal.line {
    border-top: 1px solid black;
    height: 15px; }
    .designer.tools span[class].horizontal.line.snap {
      border-top-style: dashed; }
  .designer.tools span[class].rectangle {
    border: 1px solid black;
    height: 14px;
    margin-left: 4px;
    width: 18px; }
  .designer.tools span[class].vertical.line {
    border-left: 1px solid black;
    width: 19px; }
    .designer.tools span[class].vertical.line.snap {
      border-left-style: dashed; }

.ui-document-designer > div.ui-draggable,
.ui-document-designer-dragging {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid darkgrey;
  border-radius: 2px;
  cursor: pointer;
  font-size: 16px;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap;
  z-index: 4 !important; }
  .ui-document-designer > div.ui-draggable.line,
  .ui-document-designer-dragging.line {
    border: none;
    color: transparent;
    font-size: 0.1px !important;
    z-index: 3 !important; }
    .ui-document-designer > div.ui-draggable.line.horizontal,
    .ui-document-designer-dragging.line.horizontal {
      border-top: 1px solid black;
      height: 0;
      width: 100px; }
      .ui-document-designer > div.ui-draggable.line.horizontal.snap,
      .ui-document-designer-dragging.line.horizontal.snap {
        border-top-style: dashed;
        width: 100%;
        z-index: 1 !important; }
      .ui-document-designer > div.ui-draggable.line.horizontal > .ui-draggable-handle,
      .ui-document-designer-dragging.line.horizontal > .ui-draggable-handle {
        cursor: ns-resize;
        height: 10px;
        left: 0;
        position: absolute;
        top: -5px;
        width: 100%; }
      .ui-document-designer > div.ui-draggable.line.horizontal > .ui-resizable-handle,
      .ui-document-designer-dragging.line.horizontal > .ui-resizable-handle {
        top: -5px; }
    .ui-document-designer > div.ui-draggable.line.vertical,
    .ui-document-designer-dragging.line.vertical {
      border-left: 1px solid black;
      height: 100px;
      width: 0; }
      .ui-document-designer > div.ui-draggable.line.vertical.snap,
      .ui-document-designer-dragging.line.vertical.snap {
        border-left-style: dashed;
        height: 100%;
        z-index: 1 !important; }
      .ui-document-designer > div.ui-draggable.line.vertical > .ui-draggable-handle,
      .ui-document-designer-dragging.line.vertical > .ui-draggable-handle {
        cursor: ew-resize;
        height: 100%;
        left: -5px;
        position: absolute;
        top: 0;
        width: 10px; }
      .ui-document-designer > div.ui-draggable.line.vertical > .ui-resizable-handle,
      .ui-document-designer-dragging.line.vertical > .ui-resizable-handle {
        left: -5px; }
  .ui-document-designer > div.ui-draggable.rectangle,
  .ui-document-designer-dragging.rectangle {
    background: transparent;
    border: 1px solid black;
    color: transparent;
    font-size: 0.1px !important;
    height: 50px;
    width: 100px;
    z-index: 2 !important; }
  .ui-document-designer > div.ui-draggable .ui-resizable-handle,
  .ui-document-designer-dragging .ui-resizable-handle {
    display: block;
    font-size: 0.1px !important;
    position: absolute;
    touch-action: none; }
    .ui-document-designer > div.ui-draggable .ui-resizable-handle.ui-resizable-e,
    .ui-document-designer-dragging .ui-resizable-handle.ui-resizable-e {
      cursor: e-resize;
      height: 100%;
      min-height: 10px;
      right: -5px;
      top: 0;
      width: 10px; }
    .ui-document-designer > div.ui-draggable .ui-resizable-handle.ui-resizable-n,
    .ui-document-designer-dragging .ui-resizable-handle.ui-resizable-n {
      cursor: n-resize;
      height: 10px;
      left: 0;
      min-width: 10px;
      top: -5px;
      width: 100%; }
    .ui-document-designer > div.ui-draggable .ui-resizable-handle.ui-resizable-ne,
    .ui-document-designer-dragging .ui-resizable-handle.ui-resizable-ne {
      cursor: ne-resize;
      height: 10px;
      right: -5px;
      top: -5px;
      width: 10px; }
    .ui-document-designer > div.ui-draggable .ui-resizable-handle.ui-resizable-nw,
    .ui-document-designer-dragging .ui-resizable-handle.ui-resizable-nw {
      cursor: nw-resize;
      height: 10px;
      left: -5px;
      top: -5px;
      width: 10px; }
    .ui-document-designer > div.ui-draggable .ui-resizable-handle.ui-resizable-s,
    .ui-document-designer-dragging .ui-resizable-handle.ui-resizable-s {
      bottom: -5px;
      cursor: s-resize;
      height: 10px;
      left: 0;
      min-width: 10px;
      width: 100%; }
    .ui-document-designer > div.ui-draggable .ui-resizable-handle.ui-resizable-se,
    .ui-document-designer-dragging .ui-resizable-handle.ui-resizable-se {
      bottom: -5px;
      cursor: se-resize;
      height: 10px;
      right: -5px;
      width: 10px; }
    .ui-document-designer > div.ui-draggable .ui-resizable-handle.ui-resizable-sw,
    .ui-document-designer-dragging .ui-resizable-handle.ui-resizable-sw {
      bottom: -5px;
      cursor: sw-resize;
      height: 10px;
      left: -5px;
      width: 10px; }
    .ui-document-designer > div.ui-draggable .ui-resizable-handle.ui-resizable-w,
    .ui-document-designer-dragging .ui-resizable-handle.ui-resizable-w {
      cursor: w-resize;
      height: 100%;
      left: -5px;
      min-height: 10px;
      top: 0;
      width: 10px; }