.vdr {
    touch-action: none;
    border: 1px dashed #000
}

.handle, .vdr {
    position: absolute;
    box-sizing: border-box
}

.handle {
    width: 6px;
    height: 6px;
    background: transparent;
    border: none;
    z-index: 3002;
}

.handle-tl {
    top: -3px;
    left: -3px;
    cursor: nw-resize;
}

.handle-tm {
    top: -3px;
    left: 10px;
    right: 10px;
    cursor: n-resize;
    width: auto;
}

.handle-tr {
    top: -3px;
    right: -3px;
    cursor: ne-resize;
    z-index: 3002;
}

.handle-ml {
    left: -3px;
    height: auto;
    cursor: w-resize;
}

.handle-ml, .handle-mr {
    top: 10px;
    bottom: 10px;
}

.handle-mr {
    right: -3px;
    height: auto;
    cursor: e-resize;
}

.handle-bl {
    bottom: -3px;
    left: -3px;
    cursor: sw-resize
}

.handle-bm {
    bottom: -3px;
    left: 10px;
    right: 10px;
    width: auto;
    cursor: s-resize
}

.handle-br {
    bottom: -3px;
    right: -3px;
    cursor: se-resize
}

@media only screen and (max-width: 768px) {
    [class*=handle-]:before {
        content: "";
        left: -10px;
        right: -10px;
        bottom: -10px;
        top: -10px;
        position: absolute
    }
}