.overflow-flowchart {
    overflow:hidden;
}

.flowchart-example-container {
    height: 3000px;
    margin-bottom: 10px;
    overflow-y: hidden;
    overflow-x:hidden;
    width:5000px;
}


.flowchart-operator-connector-arrow {
    top: 4px;
}

.flowchart-operator-connector-small-arrow {
    top: 9px;
}


.flowchart-operator-static {
    position: relative;
    width: 50px;
    border: 1px solid #CCCCCC;
    background: #FAFAFA;
    pointer-events: initial;
}

div.hr {
    background: #fff no-repeat scroll center;
    margin-left: 15em;
    margin-right: 15em;
    width: 50em;
    height: .05em;
}

    div.hr hr {
        display: none;
    }

.flowchart-operator-static .flowchart-operator-title-static {
    width: 100%;
    padding: 5px;
    font-weight: bold;
    box-sizing: border-box;
    border-bottom: 1px solid #408AC7;
    background: #F0F0F0;
    height: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: move;
    background-color: #408AC7;
    color: #FFF;
}

.flowchart-example pre {
    display: none;
}

#create_operator {
    margin-bottom: 10px;
}

.flowchart-example-event {
    margin-top: 10px;
    margin-bottom: 10px;
    color: #3366FF;
}

.imgIsOpen {
    background: url(../images/green.png) repeat-x;
    width: 5px;
}

#last_event_example_6 {
    display: block;
    overflow-y: auto;
    height: 100px;
}

#flowchart_data {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 40px;
    height: 140px;
}

h4 {
    margin-top: 40px;
}

#operator_properties, #link_properties {
    display: none;
    margin-top: 20px;
    margin-bottom: 20px;
    border: 4px solid;
    padding: 10px;
}

#example_9 {
    width: 2000px;
    height: 2000px;
    background: white;
}

#chart_container {
    width: 100%;
    height: 500px;
    overflow: hidden;
    background: repeating-linear-gradient( 45deg, #eee, #eee 10px, #e5e5e5 10px, #e5e5e5 20px );
    border: 1px solid black;
}

.draggable_operator {
    display: inline-block;
    padding: 2px 5px 2px 5px;
    border: 1px solid #ccc;
    cursor: grab;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
    -khtml-user-select: none; /* Konqueror */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge */
    user-select: none; /* non-prefixed version, currently
                                  not supported by any browser */
}

.left-column2 {
    width: 100%;
    float: left;
    height: 700px;
    background-color: #F6F6F7;
    overflow-y: auto;
    padding-top: 10px;
}

.left-column {
    width: 25%;
    float: left;
    background-color: #F6F6F7;
}

.title-left-column {
    padding: 10px;
    font-size: 20px;
    color: #FFF;
    background-color: #408AC7;
}

.label-sx-column {
}

.draggable_operators {
    margin-top: 10px;
}

.draggable_operators_label {
    margin-bottom: 5px;
}

.draggable_operators_divs {
    margin-bottom: 20px;
}

.delete_selected_button {
    position:fixed;
    bottom:30px;
    left:26%;
    z-index:50000;
}

.right-column {
    width: 75%;
    float: right;
    overflow:auto;
    height:70vh;
}

.left-column {
    width: 25%;
    float: left;
    background-color: #F6F6F7;
}

    .left-column .ui-widget.ui-widget-content.draggable {
        margin: 7px;
        padding: 15px;
        border-left: 5px solid #286294;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        cursor: move; /* fallback if grab cursor is unsupported */
        cursor: grab;
        cursor: -moz-grab;
        cursor: -webkit-grab;
    }

.IsCompleted {
    background: #00C462 !important;
    color: black !important;
}

.IsInWait {
    background: orange !important;
    color: black !important;
}

.IsOpen {
    background: yellow !important;
    color: black !important;
}

.IsStarted {
    background: white !important;
    color: black !important;
}

.IsBlocked {
    background: #FF5353 !important;
    color: black !important;
}

.IsInWard {
    background-image:url('check.png');   
    background-repeat:no-repeat;
    background-position:5px center;

}
.IsLockByUser {
    background-image: url('lucchetto.png');
    background-repeat: no-repeat;
    background-position: 5px center;
}

.borderIsCompleted {
    color: var(--green) !important;
}

.borderIsCompletedNoValidated {
    color: var(--green) !important;
    text-decoration: underline;
    text-decoration-color: var(--orange) !important;
}

.borderIsInWait {
    color: var(--orange) !important;
}

.borderIsWard {
    background-image:url('divieto.png');   
    background-repeat:no-repeat;
    background-position:5px center;
}

.borderIsOpen {
    color: var(--yellow) !important;
}

.borderBold {
    background-image:url('check.png');   
    background-repeat:no-repeat;
    background-position:5px center;
}


.borderLockByUser {
    background-image: url('lucchetto.png');
    background-repeat: no-repeat;
    background-position: 5px center;
}
.borderLockIPC {
    background-image: url('lucchetto.png');
    background-repeat: no-repeat;
    background-position: 5px center;
    background-color: red;
}

.borderIsStarted {
    color: white !important;
}

.borderIsBlocked {
    color: var(--red) !important;
}



.arrow {
    border-style: dashed;
    border-color: red;
    border-width: 0.20em;
    display: -moz-inline-box;
    display: inline-block; /* Use font-size to control the size of the arrow. */
    font-size: 100px;
    height: 0;
    line-height: 0;
    position: relative;
    vertical-align: middle;
    width: 0;
    background-color: red; /* change background color acc to bg color */
    border-left-width: 0.2em;
    border-left-style: solid;
    border-left-color: #ff0000;
    left: 0.25em;
}

.textalign {
    text-align: left;
}