body, html {
  margin:0;
  padding:0;
  background:white;
}
* {
  box-sizing:border-box;
}
grid-system {
  display: grid;
  grid-template-columns: repeat(var(--columns, 50), minmax(0, 1fr));
  grid-template-rows: repeat(var(--rows, 50), minmax(0, 1fr));
  width:100%;
  height:100%;
  margin-inline: auto;
  container-type: size;
  cell {
    position: relative;
    grid-area: var(--landscape, var(--portrait, var(--pos)));
    z-index:var(--layer);
    @container (max-aspect-ratio: 1/1) { grid-area: var(--portrait, var(--landscape, var(--pos))); }
    container-type: size;
  }
  cell > *:not(.cell-resize-handle) {
      height:100%;
      width:100%;
      overflow:hidden;
      display: flex;
      flex-direction: column;
  }
  cell[data-locked="true"] {
    pointer-events:none;
  }
}

cell[data-wysiwyg-cell="true"] {
  outline: 1px solid blue;
  outline-offset: -1px;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

cell[data-wysiwyg-cell="true"].is-dragging,
cell[data-wysiwyg-cell="true"].is-resizing {
  cursor: grabbing;
  z-index: 1000;
}

cell[data-wysiwyg-cell="true"].is-selected {
  outline: 1px solid red;
}

cell[data-wysiwyg-cell="true"] > .cell-resize-handle {
  position: absolute;
  z-index: 10;
  display: block;
  width: 6px;
  height: 6px;
  padding: 0;
  border: 1px solid red;
  background: #aaa;
  overflow: visible;
}

cell[data-wysiwyg-cell="true"] > .cell-resize-handle[data-handle="n"],
cell[data-wysiwyg-cell="true"] > .cell-resize-handle[data-handle="s"] {
  left: 50%;
  transform: translateX(-50%);
  cursor: ns-resize;
}

cell[data-wysiwyg-cell="true"] > .cell-resize-handle[data-handle="e"],
cell[data-wysiwyg-cell="true"] > .cell-resize-handle[data-handle="w"] {
  top: 50%;
  transform: translateY(-50%);
  cursor: ew-resize;
}

cell[data-wysiwyg-cell="true"] > .cell-resize-handle[data-handle="nw"],
cell[data-wysiwyg-cell="true"] > .cell-resize-handle[data-handle="se"] {
  cursor: nwse-resize;
}

cell[data-wysiwyg-cell="true"] > .cell-resize-handle[data-handle="ne"],
cell[data-wysiwyg-cell="true"] > .cell-resize-handle[data-handle="sw"] {
  cursor: nesw-resize;
}

cell[data-wysiwyg-cell="true"] > .cell-resize-handle[data-handle*="n"] {
  top: -3px;
}

cell[data-wysiwyg-cell="true"] > .cell-resize-handle[data-handle*="s"] {
  bottom: -3px;
}

cell[data-wysiwyg-cell="true"] > .cell-resize-handle[data-handle*="e"] {
  right: -3px;
}

cell[data-wysiwyg-cell="true"] > .cell-resize-handle[data-handle*="w"] {
  left: -3px;
}

cell[data-wysiwyg-cell="true"] > .cell-resize-handle[data-handle="n"],
cell[data-wysiwyg-cell="true"] > .cell-resize-handle[data-handle="s"] {
  right: auto;
}

cell[data-wysiwyg-cell="true"] > .cell-resize-handle[data-handle="e"],
cell[data-wysiwyg-cell="true"] > .cell-resize-handle[data-handle="w"] {
  bottom: auto;
}
.flowFrame svg {
  display: block;
  width: 100%;
  height: 100%;
}

@media print {
  cell[data-wysiwyg-cell="true"] {
    outline: none;
  }
  cell[data-wysiwyg-cell="true"].is-selected {
    outline: none;
  }
  cell[data-wysiwyg-cell="true"] > .cell-resize-handle {
    display: none;
  }
}