.resizable{
    margin: 0;
}

.resizable:hover{
    cursor: move;
}

.handles {
    background-color: white;
    width: 7px;
    height: 7px;
    border: 1px solid dodgerblue;
    position: absolute;
    display: none;
}

.n-handle {
    top: -9px;
    left: calc(50% - 3.5px);
}

.ne-handle {
    top: -9px;
    right: -9px;
}

.nw-handle {
    top: -9px;
    left: -9px;
}

.w-handle {
    top: calc(50% - 3.5px);
    left: -9px;
}

.e-handle {
    top: calc(50% - 3.5px);
    right: -9px;
}

.s-handle {
    bottom: -9px;
    left: calc(50% - 3.5px);
}

.se-handle {
    bottom:-9px;
    right: -9px;
}

.sw-handle {
    bottom:-9px;
    left: -9px;
}



.n-handle:hover {
    cursor: n-resize;
}

.ne-handle:hover {
    cursor: ne-resize;
}

.nw-handle:hover {
    cursor: nw-resize;
}

.w-handle:hover {
    cursor: w-resize;
}

.e-handle:hover {
    cursor: e-resize;
}

.s-handle:hover {
    cursor: s-resize;
}

.se-handle:hover {
    cursor: se-resize;
}

.sw-handle:hover {
    cursor: sw-resize;
}