#edit-area {
    margin-top: 10px;
    position  : relative;
    height    : 800px;

    #tool-bar {
        position: absolute;
        width   : 300px;
        height  : 100%;

        nz-card {
            overflow  : auto;
            margin-top: 0;
            height    : 100%;
        }

        .tool-box {
            padding              : 10px;
            text-align           : center;
            background-color     : gray;
            color                : white;
            -moz-border-radius   : 5px;
            -webkit-border-radius: 5px;
            border-radius        : 5px;
        }

        .tool-box:hover {
            -moz-box-shadow   : 2px 2px 5px lightgray;
            -webkit-box-shadow: 2px 2px 5px lightgray;
            box-shadow        : 2px 2px 5px lightgray;
        }
    }

    #flow-container {
        border          : 1px solid lightgray;
        background-color: black;
        margin-left     : 310px;
        position        : relative;
        overflow        : auto;
        height          : 100%;
        background-image: linear-gradient(90deg, rgba(0, 255, 213, 0.05) 10%, rgba(0, 0, 0, 0) 10%),
            linear-gradient(rgba(0, 255, 213, 0.05) 10%, rgba(0, 0, 0, 0) 10%);
        background-size: 20px 20px;
    }
}

.tranlate-view {
    transform        : translate(-24px, -24px);
    -webkit-transform: translate(-24px, -24px);
    -moz-transform   : translate(-24px, -24px);
}

.node {
    width     : 200px;
    height    : 50px;
    text-align: center;
    position  : absolute;

    .connectable {
        display         : inline-block;
        width           : 50px;
        height          : 50px;
        line-height     : 50px;
        padding         : 5px;
        background-color: darkgray;
        vertical-align  : middle;
        cursor          : crosshair;
    }

    .draggable {
        display         : inline-block;
        width           : calc(100% - 50px);
        height          : 50px;
        line-height     : 50px;
        font-size       : 16px;
        background-color: lightslategray;
        vertical-align  : middle;
        word-break      : keep-all;
        overflow        : hidden;
        text-overflow   : ellipsis;
        cursor          : move;
    }
}

.sborder {
    display: none;

    .lborder {
        height          : 50px;
        width           : 2px;
        top             : 0px;
        left            : 0px;
        background-color: wheat;
        position        : absolute;
    }

    .rborder {
        height          : 50px;
        width           : 2px;
        top             : 0px;
        left            : 199px;
        background-color: wheat;
        position        : absolute;
    }

    .tborder {
        height          : 2px;
        width           : 200px;
        top             : 0px;
        left            : 0px;
        background-color: wheat;
        position        : absolute;
    }

    .bborder {
        height          : 2px;
        width           : 200px;
        top             : 49px;
        left            : 0px;
        background-color: wheat;
        position        : absolute;
    }
}