.pattern-contaienr {
  border: 1px solid #ccc;
  width: 576px;
  height: 324px;
}

.iconPistion {
  border-width: 2px;
  border-style: solid;
  border-color: #409eff;
  background-color: rgba(128, 128, 128, 0.5);
  box-sizing: border-box;

  .icon-slot {
    font-size: 12px;
  }
}

.patternContent {
  display: flex;

  .patternLeft {
    margin: 10px;
  }

  .patternRight {
    width: 400px;
    margin: 10px;
  }
}


.icon-slot {
  width: 100%;
  height: 100%;

  .status {
    text-align: left;
    color: #000;
  }

  .order {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

.activePattern {
  border-style: solid;
  border-color: #08de05;
}


.drag-handle,
.drag-cancel {
  padding: 6px;
  margin: 6px;
  background-color: #CCC;
  border: 2px solid;
}

.drag-handle:hover {
  cursor: move;
}

.drag-cancel:hover {
  cursor: not-allowed;
}

.my-handle-class {
  position: absolute;
  border: 1px solid black;
  border-radius: 50%;
  height: 14px;
  width: 14px;
  font-size: 1em;
  line-height: 1em;
  box-sizing: border-box;
  -webkit-transition: all 300ms linear;
  -ms-transition: all 300ms linear;
  transition: all 300ms linear;
}

.my-handle-class-tl {
  top: -14px;
  left: -14px;
  cursor: nw-resize;
}

.my-handle-class-tm {
  top: -14px;
  left: 50%;
  margin-left: -7px;
  cursor: n-resize;
}

.my-handle-class-tr {
  top: -14px;
  right: -14px;
  cursor: ne-resize;
}

.my-handle-class-ml {
  top: 50%;
  margin-top: -7px;
  left: -14px;
  cursor: w-resize;
}

.my-handle-class-mr {
  top: 50%;
  margin-top: -7px;
  right: -14px;
  cursor: e-resize;
}

.my-handle-class-bl {
  bottom: -14px;
  left: -14px;
  cursor: sw-resize;
}

.my-handle-class-bm {
  bottom: -14px;
  left: 50%;
  margin-left: -7px;
  cursor: s-resize;
}

.my-handle-class-br {
  bottom: -14px;
  right: -14px;
  cursor: se-resize;
}

.my-handle-class-tl:hover,
.my-handle-class-tm:hover,
.my-handle-class-tr:hover,
.my-handle-class-ml:hover,
.my-handle-class-mr:hover,
.my-handle-class-bl:hover,
.my-handle-class-bm:hover,
.my-handle-class-br:hover {
  transform: scale(1.4);
}
