.diagram-canvas {
    width: 100%;
    height: 100%;
    position: inherit;
    outline: 0;
    overflow: hidden;
    cursor: -webkit-grab;
    cursor: grab;
    touch-action: none;
}

.diagram-svg-layer, .diagram-html-layer {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    pointer-events: none;
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.html-layer, .svg-layer {
    position: absolute;
    pointer-events: none;
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.diagram-node {
    position: absolute;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: move;
    pointer-events: all;
    z-index: 1;
    transition: z-index 0.01s;
}

    .diagram-node.selected {
        z-index: 100 !important;
    }

    .diagram-node.locked {
        cursor: pointer;
    }

.diagram-link {
    pointer-events: visiblePainted;
    cursor: pointer;
}

.diagram-navigator {
    z-index: 10;
}

    .diagram-navigator .current-view {
        position: absolute;
        border: 2px solid #000;
    }

.diagram-group {
    position: absolute;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: move;
    pointer-events: all;
}

    .diagram-group .children {
        position: absolute;
        overflow: visible;
        pointer-events: none;
    }

.diagram-link foreignObject.diagram-link-label {
    overflow: visible;
    pointer-events: none;
    width: 1px;
    height: 1px;
}

div.diagram-control {
    position: absolute;
}

.executable.diagram-control {
    pointer-events: all;
    cursor: pointer;
}
