:root {
  --snap-amount: 20px;
  --block-index-edit: 1;
  --block-background-color-edit: rgb(208,211,228,1);
  --block-index-export: 199;
  --block-background-color-export: rgb(208,211,228,1);
  --block-index: 1;
  --block-background-color: rgb(208,211,228,1);
  --grid-color: rgb(0,0,0,0.15);
  --grid-color-edit: rgb(0,0,0,0.15);
  --grid-color-export: rgb(0,0,0,0);
  --grid-dot-color: rgb(68, 76, 247);
  --grid-dot-color-edit: rgb(68, 76, 247);
  --grid-dot-color-edit-smaller: rgb(68, 76, 247, 0.5);
  --grid-dot-color-edit-smallest: rgb(68, 76, 247, 0.1);
  --grid-dot-color-export: rgb(0,0,0,0);
  --original-body-color: #e5e5f7;
  --original-dot-color: #444cf7;
  --cursor-size-thickness: 2px;
  --cursor-size: -7px;
  --snapper-size: 5px;
  --snapper-rounding: 2.5px;
  --border-thickness: 1px;
}

* {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}

html, body {
  height: 100%;
  overflow: hidden !important;
  /*cursor: none;*/
}

body {
  background-color: rgb(250,250,250);
  display: flex;
  align-items: center;
  justify-content: center;
  /*opacity: 1;*/
  /*background-image: linear-gradient(rgb(0,0,0,0.15) 1px, transparent 1px), linear-gradient(to right, rgb(0,0,0,0.15) 1px, #e5e5f7 1px);*/
  /*background-size: var(--snap-amount) var(--snap-amount);*/
  /*background-position: -0.5px -0.5px;*/
  /*background-position: calc(var(--snap-amount) / 2 + 0.5px) calc(var(--snap-amount) / 2 + 0.5px);*/
}

.snap-bar {
  position: absolute;
  top: 5px;
  height: 25px;
  width: 100px;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: rgb(20,20,20);
  padding: 4px;
  border-radius: 12.5px;
}

.snap-down {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background-color: green;
  border-radius: 12.5px;
  color: rgb(255,255,255);
  font-size: 10px;
}

.snap-up {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background-color: green;
  border-radius: 12.5px;
  color: rgb(255,255,255);
  font-size: 10px;
}

.snap-amount {
  font-size: 15px;
  font-weight: 600;
  color: rgb(255,255,255);
}

.export-button {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 25px;
  height: 25px;
  background-color: green;
  border-radius: 12.5px;
  z-index: 200;
}

.reset-button {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 25px;
  height: 25px;
  background-color: red;
  border-radius: 12.5px;
  z-index: 200;
}

.body-grid {
  position: absolute;
  /*top: 10px;*/
  /*left: 10px;*/
  /*right: 22px;*/
  /*bottom: 18px;*/
  width: 1040px;
  height: 640px;
  z-index: 98;
  opacity: 1;
  background-image: linear-gradient(var(--grid-color) 0.5px, transparent 0.5px), linear-gradient(to right, var(--grid-color) 0.5px, transparent 0.5px);
  background-size: var(--snap-amount) var(--snap-amount);
  background-position: -1.25px -1.25px;
  border: solid 1px rgb(0,0,0);
}

.body-overlay {
  position: absolute;
  /*top: 10px;*/
  /*left: 10px;*/
  /*right: 22px;*/
  /*bottom: 18px;*/
  width: 1040px;
  height: 640px;
  z-index: 99;
  background-color: rgb(0,0,0,0);
  background-image: radial-gradient(var(--grid-dot-color) 0.5px, rgb(0,0,0,0) 0.5px);
  background-size: calc(var(--snap-amount) - 0px) calc(var(--snap-amount) - 0px);
  background-position: calc(var(--snap-amount) / 2 + 0px) calc(var(--snap-amount) / 2 - 0px);
}

.body-drawer {
  position: absolute;
  width: 1040px;
  height: 640px;
  z-index: var(--block-index);
  overflow: hidden;
}

.helper-bar {
  z-index: 199;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 60px;
  bottom: 0px;
  background-color: rgb(20,20,20);
  transform: translateX(-60px);
  transition: transform 0.25s;
}

.helper-bar.visible {
  transform: translateX(0px);
  transition: transform 0.25s;
}

.real-cursor {
  opacity: 1;
  pointer-events: none;
  z-index: 100;
  position: absolute;
  top: calc(var(--snap-amount) - 2.5px);
  left: calc(var(--snap-amount) - 2.5px);
  width: 3px;
  height: 3px;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1.5px;
  outline-offset: 5px;
  outline-width: 2px;
  outline-style: solid;
  outline-color: rgb(0,0,0,0);
  transition: outline-offset 0.25s;
}

.real-cursor.held::before {
  content: "";
  position: absolute;
  top: var(--cursor-size);
  right: var(--cursor-size);
  bottom: var(--cursor-size);
  left: var(--cursor-size);
  border: var(--cursor-size-thickness) solid red;
  border-radius: 8px;
}

.real-cursor.held {
  /*z-index: 1;*/
  outline-offset: 10px;
  outline-width: 2px;
  outline-style: dashed;
  outline-color: rgb(0,0,0,0);
  transition: outline-offset 0.25s;
}

.real-cursor.hovering {
  outline-offset: 5px;
  outline-width: 2px;
  outline-style: dashed;
  outline-color: rgb(0,0,0,0);
  transition: outline-offset 0.25s;
}

.real-cursor.hovering > .h {
  width: 0px;
  height: 0px;
  transition: width 0.25s, height 0.25s;
}

.real-cursor.hovering > .v {
  width: 0px;
  height: 0px;
  transition: width 0.25s, height 0.25s;
}

.real-cursor.held > .h {
  width: 0px;
  height: 0px;
  transition: width 0.25s, height 0.25s;
}

.real-cursor.held > .v {
  width: 0px;
  height: 0px;
  transition: width 0.25s, height 0.25s;
}

.real-cursor > .h {
  pointer-events: none;
  position: absolute;
  width: 0px;
  height: 0px;
  background-color: rgb(120,120,120);
  transition: width 0.25s, height 0.25s;
}

.real-cursor > .v {
  pointer-events: none;
  position: absolute;
  height: 0px;
  width: 0px;
  background-color: rgb(120,120,120);
  transition: width 0.25s, height 0.25s;
}

.snapper {
  pointer-events: none;
  z-index: 5;
  position: absolute;
  top: calc(var(--snap-amount) - 2.5px);
  left: calc(var(--snap-amount) - 2.5px);
  width: var(--snapper-size);
  height: var(--snapper-size);
  border-radius: var(--snapper-rounding);
  outline: solid;
  outline-width: 2px;
  outline-color: rgb(0,0,0,0);
  outline-offset: -1px;
  background-color: rgb(0,0,0,0);
  transition-timing-function: linear;
  transition: all 0s;
}

.snapper.moving {
  outline-style: solid;
  outline-width: 3px;
  outline-offset: -1px;
  background-color: rgb(0,0,0,0);
}

.snapper.held {
  outline-offset: 0px;
  outline-width: 1px;
  outline-style: dashed;
  outline-color: rgb(0,0,0,0);
  background-color: rgb(0,0,0,0) !important;
  transition: left 0.1s, top 0.1s;
}

.snapper.hovered {
  outline-offset: 0px;
  outline-width: 2px;
  outline-style: dashed;
  outline-color: rgb(0,0,0,0);
  background-color: rgb(0,0,0,0);
}

@keyframes block {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

.block-label {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

div.block {
  z-index: var(--block-index);
  background-color: var(--block-background-color);
  position: absolute;
  top: 15px;
  left: 15px;
  width: var(--snap-amount);
  height: var(--snap-amount);
  border: solid var(--border-thickness) rgb(20,20,20);
  border-radius: 0px;
  animation-name: block;
  animation-duration: 0.25s;
  transition: all 0.1s;
}

div.block:hover {
  /*outline: dashed 1px green;*/
  /*outline-offset: 0px;*/
}

div.block.hovering {
  /*background-color: red;*/
}

.block.selected {
  outline: solid 2px green !important;
  outline-offset: 2px !important;
}

div.block.w {
}

div.block.n {
}

div.block.e {
}

div.block.s {
}

span.block {
  z-index: var(--block-index);
  background-color: var(--block-background-color);
  position: absolute;
  top: 15px;
  left: 15px;
  width: var(--snap-amount);
  height: var(--snap-amount);
  border: solid var(--border-thickness) rgb(20,20,20);
  border-radius: 0px;
  animation-name: block;
  animation-duration: 0.25s;
  transition: all 0.1s;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.square {
  pointer-events: none;
  position: absolute;
  top: 15px;
  left: 15px;
  width: 20px;
  height: 20px;
  background-color: rgb(240,240,240);
  transition: all 0.15s;
}

.square.closest {
  background-color: rgb(200,200,200);
}

.nw {
  border-top: solid 1px rgb(60,60,60);
  border-left: solid 1px rgb(60,60,60);
}

.ne {
  border-top: solid 1px rgb(60,60,60);
  border-right: solid 1px rgb(60,60,60);
}

.se {
  border-bottom: solid 1px rgb(60,60,60);
  border-right: solid 1px rgb(60,60,60);
}

.sw {
  border-bottom: solid 1px rgb(60,60,60);
  border-left: solid 1px rgb(60,60,60);
}