/*
 * jquery.flowchart - CSS definitions
 */

		.main-flowchart {
			width: 750px;
			height: 1000px;
			background: white;
			border: none; /* 1px solid #BBB; */
			margin-bottom: 10px;
		}

		.draggable_operator img {
		    max-width: 4em;
		    border: none;
		}

		.flow-button img {
		    max-width: 4em;
		    border: none;
		}

		.draggable_operator:hover {
			opacity: 1;
		}
		.draggable_operator {
			opacity: 0.8;
		}
		
		.draggable_operators {
			float: left;
			width: 100px;
			max-width: 100px;
    		margin-bottom: 10px;
    		font-size: 0.8em;
    	}
		
		.flowEditor {
			height: 100%;
			width: 100%;
			display: flex;
			flex-flow: column;
			align-items: center;
		}
		
		.flow-button:hover {
			opacity: 1;
		}

		.flow-button {
    		width: 90px;
		opacity: 0.8;
    		padding-left: 10px;
    		padding-right: 10px;
		line-height: 1.3em;
		cursor: pointer;
    		display: table-cell;
		    border: 1px solid gray;
		    background-color: #f1f0f0;
	    	vertical-align: middle;
	    	text-align: center;    		
    	}
    	
    	#operator_properties {
    		margin-top: 10px;
    		margin-bottom: 10px;
    	}
    	
    	
    	#chart-container {
    		float: left;
    		height: 500px;
    		overflow-y: scroll;
    		border: 1px solid gray;
    	}
    	
.flowEditor {
    height: 100%;
    width: 800px;
    display: flex;
    flex-flow: column;
    align-items: center;
    background-color: #f6fffb;
    padding: 20px;
    border: 1px solid gray;
    box-shadow: 5px 5px 5px silver;
}    

#operator_title {
	width: 500px;
    margin-left: 10px;
}	
    	
	.flowMain {
	    width: 100vw;
	    display: flex;
	    align-items: center;
	    flex-direction: column;
	    min-height: 100vh;
	    justify-content: center;
	    position: fixed;
	    top: 0px;
	    z-index: 9999;
	    background-color: #ffffff8a;
	    left: 0px;
	}    	
		


.flowchart-container {
    position: relative;
    overflow: hidden;
}

.flowchart-links-layer, .flowchart-operators-layer, .flowchart-temporary-link-layer {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

.flowchart-operators-layer, .flowchart-temporary-link-layer {
    pointer-events: none;
}

.flowchart-temporary-link-layer {
    display: none;
}

.flowchart-link, .flowchart-operator {
    cursor: default;
}

.draggable_operators {
	display: table;
}

.draggable_operator {
	display: table-cell;
	vertical-align: middle;
}

.draggable_operator.ui-draggable.ui-draggable-handle {
    width: 70px;
    border: 1px dotted gray;
    padding: 5px;
    margin-bottom: 5px;
    text-align: center;
    cursor: pointer;
}

.flowchart-operator-connector {
    position: relative;
    padding-top: 5px;
    padding-bottom: 5px;
}

.flowchart-operator-connector-label {
    font-size: small;
}

.flowchart-operator-inputs .flowchart-operator-connector-label {
    margin-left: 14px;
}

.flowchart-operator-outputs .flowchart-operator-connector-label {
    text-align: right;
    margin-right: 5px;
}

.flowchart-operator-connector-arrow {
    width: 0px;
    height: 0px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid rgb(204, 204, 204);
    position: absolute;
    top: 0px;
}

.flowchart-operator-connector-small-arrow {
    width: 0px;
    height: 0px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid transparent; /*rgb(100, 100, 100);*/
    position: absolute;
    top: 5px;
    pointer-events: none;
}

.flowchart-operator-connector:hover .flowchart-operator-connector-arrow {
    border-left: 10px solid rgb(153, 153, 153);
}

.flowchart-operator-inputs .flowchart-operator-connector-arrow {
    left: -1px;
}

.flowchart-operator-outputs .flowchart-operator-connector-arrow {
    right: -10px;
}

.flowchart-operator-inputs .flowchart-operator-connector-small-arrow {
    left: -1px;
}

.flowchart-operator-outputs .flowchart-operator-connector-small-arrow {
    right: -7px;
}

.unselectable {
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}


/* Default Operator */

.flowchart-operator {
    position: absolute;
    width: 175px;
    border: 1px solid #CCCCCC;
    background: #f0f0f0b5;
    pointer-events: auto;
    font-size: 0.75em;
}

.flowchart-operator.hover {
    border-color: #999;
}

.flowchart-operator.selected {
    border-color: #555;
}


#chart-container .flowchart-operator .flowchart-operator-title {
    cursor: move;
}

.flowchart-operator .flowchart-operator-title {
    width: 100%;
    padding: 5px;
    font-weight: regular;
    box-sizing: border-box;
    line-height: 1.4em;
    border-bottom: 1px solid #DDDDDD;
    background: #f0f0f0b5;
    height: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: unset;
    text-align: center;
    color: black;
    min-height: 2.3em;
}

.flowchart-operator .flowchart-operator-inputs-outputs {
    display: table;
    width: 100%;
    margin-top: 5px;
    margin-bottom: 5px;
}

.flowchart-operator .flowchart-operator-inputs, .flowchart-default-operator .flowchart-operator-outputs {
    display: table-cell;
    width: 50%;
}

/*
 * flowchart-vertical
 */

.flowchart-vertical .flowchart-operator-inputs,
.flowchart-vertical .flowchart-operator-outputs {
    position: relative;
    text-align: center;
    display: table;
    width: 100%;
}
.flowchart-vertical .flowchart-operator-connector-set {
    display: table-cell;
}
.flowchart-vertical .flowchart-operator-connector {
    position: relative;
}
.flowchart-vertical .flowchart-operator-connector-label {
    position: relative;
    text-align: center;
    width: 100%;
    display: none;
}
.flowchart-vertical .flowchart-operator-inputs .flowchart-operator-connector-label {
    margin-left: auto;
}
.flowchart-vertical .flowchart-operator-connector-arrow {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #ccc;
    left: calc(50% - 10px);
   cursor: pointer;
}
.flowchart-vertical .flowchart-operator-connector:hover .flowchart-operator-connector-arrow {
    border-left-color: transparent;
    border-top-color: #999;
}
.flowchart-vertical .flowchart-operator-connector-small-arrow {
    border-right: 5px solid transparent;
    top: 2px;
    left: calc(50% - 5px);
}
.flowchart-vertical .flowchart-operator-connector-arrow {
    top: 0px;
}
.flowchart-vertical .flowchart-operator-outputs .flowchart-operator-connector-arrow {
    bottom: -20px;
    top: auto;
}
.flowchart-vertical .flowchart-operator-outputs .flowchart-operator-connector-small-arrow {
    left: calc(50% - 5px);
    bottom: -12px;
    top: auto;
}
.flowchart-vertical .flowchart-link rect {
    display: none;
}

/*
 * flowchart-operator-body
 */
.flowchart-operator-body {
    padding: 5px;
    cursor: move;
}