﻿section {
    width: 100%;
    height: 800px;
    margin: auto;
    padding-bottom: 30px;
}

#leftPane {
	/*background: #fafafa;*/
    height: 600px;
    overflow:hidden;
    float:left;
	/* No margin or border allowed */
}

#rightPane {
	/*background: #fafafa;*/
    height: 600px;
    float:left;
    margin-left: 10px;
    width: 100%;
	/* No margin or border allowed */
}

#kgraphContainer {
    width: 100%;
    height: 100%;
    border:none;
    overflow:auto;
}
			  
.title {
	padding: 10px;
	cursor: move;
}

.highlight {
    background: lightblue !important;
}

.running{
    background: green !important;
}

.active {
	border:1px dotted green;
}
.hover {
	border:1px dotted red;
}


._jsPlumb_endpoint, .endpointTargetLabel, .endpointSourceLabel{ z-index:21;cursor:pointer; }
._jsPlumb_connector { z-index:18; }
._jsPlumb_endpoint { z-index:19; }
._jsPlumb_overlay { z-index:20; }
._jsPlumb_connector._jsPlumb_hover {
    z-index:21 !important;
}
._jsPlumb_endpoint._jsPlumb_hover {
    z-index:22 !important;
}
._jsPlumb_overlay._jsPlumb_hover {
    z-index:23 !important;
}


.hl { border:3px solid red; }

._jsPlumb_dragging { z-index:4000; }


.aLabel._jsPlumb_hover {
	background-color:#5C96BC;
	color:white;	
	border:1px solid #5C96BC;
}

._jsPlumb_drag_select * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    user-select: none
}


body {
    padding:0;
    margin:0;
    background-color:white;    
    font-family:'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;    
    /*background-color:#eaedef;*/
}

.node, .label { 
    
    text-align:center;
    z-index:24;
	cursor:pointer;
	box-shadow: 2px 2px 19px #aaa;
   -o-box-shadow: 2px 2px 19px #aaa;
   -webkit-box-shadow: 2px 2px 19px #aaa;
   -moz-box-shadow: 2px 2px 19px #aaa;
    
}
path, ._jsPlumb_endpoint { cursor:pointer; }


.label {
  font-size:13px; 
  padding:8px;
  padding:8px;
}

.circle-start {
    border-radius: 50%;
    height: 40px;
    width: 40px;
    background: palegreen;
    border: 1px solid yellowgreen;
}

.circle-end {
    border-radius: 50%;
    height: 40px;
    width: 40px;
    background: red;
    border: 1px solid brown;
}

.ctrl_container{
    margin:5px;
    height:40px;
}

.task { 
    background-color: #EEEEEF;
    border: 1px solid #346789;
    border-radius: 0.5em;
    box-shadow: 2px 2px 5px #AAAAAA;
    color: black;
    min-height: 3em;
    position: absolute;
    min-width: 6em;
    text-align:center;
    font-family:helvetica;padding:0.5em;
    font-size:0.9em;
}

.decision{
    transform:rotate(-45deg);
    overflow:hidden;
    border: 1px solid #346789;
    border-radius: 0.3em;
    color: black;
    backface-visibility: hidden;
    background: none repeat scroll 0 0 #F4F4F4;
    box-shadow: 0 0 0 1px #CCCCCC;
    color: #000000;
    display: block;
    height: 40px;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    width: 40px;
}

.decision .ctrl_container{
    display: table-cell;
    height: 40px;
    padding: 0 10px;
    text-align: center;
    transform: rotate(45deg);
    vertical-align: middle;
    width: 40px;
}

.brightness {
    background-color: lightblue;
    display: inline-block;
   
}
.brightness b:hover {
    opacity: .6;
}