.box {
  border: 1px solid #00BCD4;
  cursor: move !important;
}

.box-wrapper {
  position: absolute;
  transform-origin: center center;
  user-select: none;
}

.dot {
  height: 10px;
  width: 10px;
  background-color: #1E88E5;
  position: absolute;
  border-radius: 100px;
  border: 1px solid white;
  user-select: none;
}

.dot:hover {
  background-color: #0D47A1;
}

.dot.left-top {
  top: -5px;
  left: -5px;
  cursor: nw-resize;
}

.dot.left-bottom {
  bottom: -5px;
  left: -5px;
  cursor: sw-resize;
}

.dot.right-top {
  top: -5px;
  right: -5px;
  cursor: ne-resize;
}

.dot.right-bottom {
  bottom: -5px;
  right: -5px;
  cursor: se-resize;
}

.dot.top-mid {
  top: -5px;
  left: calc(50% - 5px);
  cursor: n-resize;
}

.dot.left-mid {
  left: -5px;
  top: calc(50% - 5px);
  cursor: w-resize;
}

.dot.right-mid {
  right: -5px;
  top: calc(50% - 5px);
  cursor: e-resize;
}

.dot.bottom-mid {
  bottom: -5px;
  left: calc(50% - 5px);
  cursor: s-resize;
}

.dot.rotate {
  top: -30px;
  left: calc(50% - 5px);
}

.rotate-link {
  position: absolute;
  width: 1px;
  height: 15px;
  background-color: #1E88E5;
  top: -20px;
  left: calc(50% + 0.5px);
  z-index: -1;
}