.flow-chart .preloader {
    position: absolute;
    left: 0;
    right: 0;
    height: 100%;
}

.flow-chart .no-data {
    left: 0;
    right: 0;
}

.flow-chart .disabled {
    transition:0.2s linear all;
    opacity: 0.3;
}

.flow-chart .clickable {
    cursor: pointer;
}

.flow-chart .red {
    color: rgb(195, 62, 37);
}

.flow-chart .green {
    color: rgb(81, 168, 44);
}

.flow-chart .blue {
    color: rgb(49, 99, 168);
}

.flow-chart {
    width: 100%;
    margin-bottom: 50px;
}

    .flow-chart .chart-wrapper {
        width: 100%;
        min-height: 500px;
    }

    .flow-chart .chart-header {
        display: table;
        width: 1100px;
        margin: 0 auto;
        margin-top: 40px;
        margin-bottom: 30px;
    }

    .flow-chart .chart-empty-title {
        color: #CCC;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
        margin: 100px 0 100px;
        display: none;
    }

    .flow-chart .chart-header .title {
        position: relative;
        display: table-cell;
        width: 33.3%;
        font-weight: 500;
    }

    .flow-chart .chart-header div {
        font-weight: normal;
        font-size: 8pt;
    }

    .flow-chart .chart-header .c1 {
        text-align: left;
    }

    .flow-chart .chart-header .c2 {
        text-align: center;
        /*left: -15px;*/
    }

    .flow-chart .chart-header .c3 {
        text-align: right;
    }

    .flow-chart .btn-zoom-out {
        position: fixed;
        right: 10px;
        bottom: 50%;
        margin: 0!important;
        -ms-opacity: 0.4;
        opacity: 0.4;
    }

        .flow-chart .btn-zoom-out:hover {
            -ms-opacity: 1.0;
            opacity: 1.0;
        }

    .flow-chart .chart {
        width: 700px;
        min-height: 500px;
        margin: 0 auto;
        height: auto;
        overflow: visible;
    }

    .flow-chart svg {
        margin: 0 auto;
        display: block;
        float: none;
    }

        .flow-chart svg .link {
            fill: none;
            stroke: #CCC;
            stroke-opacity: 0.1;
            overflow: visible !important;
        }

        .flow-chart svg .active {
            stroke-opacity: 0.3;
        }

        .flow-chart svg .disabled {
            stroke-opacity: 0.05;
        }

        .flow-chart svg:not(:root) {
            overflow: visible !important;
        }

        .flow-chart svg g text,
        .flow-chart svg g tspan {
            font-size: 10pt;
            font-weight: 500;
            pointer-events: none;
            text-shadow: 0 1px 0 #fff;
            color: #3f444a;
        }

        .flow-chart svg .node rect {
            -webkit-shape-rendering: crispEdges;
            -moz-shape-rendering: crispEdges;
            -ms-shape-rendering: crispEdges;
            -o-shape-rendering: crispEdges;
            shape-rendering: crispEdges;
            stroke: 0;
        }

        .flow-chart svg .hidden {
            stroke-opacity: 0.0 !important;
            display: none;
        }

        .flow-chart svg .clickable {
            cursor: pointer;
        }