svg.DNA
{
    background: #454545;
}

svg.DNA .nodeRect
{
    fill: #101310;
    fill-opacity: 0.55;
    stroke: black;  
}

svg.DNA .nodeRect:hover
{
    stroke-width: 4;
    stroke: lightgray;
}


svg.DNA .nodeRect.selected:hover
{
    stroke-width: 4;
    stroke: orange;
}

svg.DNA .nodeRect.function
{
    fill: #101310;
    fill-opacity: 0.55;
    stroke: #01a905;  
}

svg.DNA .nodeRect.function.selected
{
    fill: #101310;
    fill-opacity: 0.55;
    stroke: orange;  
}

svg.DNA .nodeRect.function:hover
{
    stroke-width: 4;
    stroke: lightgray;
}


svg.DNA .nodeRect.function.selected:hover
{
    stroke-width: 4;
    stroke: orange;
}


svg.DNA .nodeRect.breakpointHit
{
	stroke-width : 4;
	stroke : darkred;
}

svg.DNA .titleType
{
    stroke: transparent;
    fill: #D7D7D7;
    font-size: 8pt;
    font-family: Arial;
    //font-weight: bold;
    -webkit-user-select: none;
    cursor: default;
    pointer-events: none;
}

svg.DNA .titleName
{
    stroke: transparent;
    fill: #D7D7D7;
    font-size: 8pt;
    font-family: Arial;
    //font-weight: bold;
    -webkit-user-select: none;
    cursor: default;
    pointer-events: none;
}

svg.DNA .collapse
{
    stroke: transparent;
    fill: lightgray;
    font-size: 8pt;
    font-family: Arial;
    -webkit-user-select: none;
    cursor: pointer;
}

svg.DNA .port
{
    stroke-width: 1;
    fill: transparent;
}

svg.DNA .executePort
{
    stroke: lightgray;
    stroke-width: 1;
    fill: transparent;
}

svg.DNA .executePort.isLinked
{
    fill: #D7D7D7;
}

svg.DNA .executePort:hover
{
    stroke-width: 4;
    stroke: white;    
}

svg.DNA .port.activated
{
    stroke: darkorange;
    fill: orange;
}

svg.DNA .port:hover
{
    stroke-width: 4;
    stroke: lightgray;
}

svg.DNA .breakpoint
{
    stroke: darkred;
    fill: transparent;
}

svg.DNA .breakpoint.enabled
{
    fill: red;
}

svg.DNA .portText
{
    stroke: transparent;
    fill: #D7D7D7;
    font-size: 8pt;
    font-family: Arial;  
    -webkit-user-select: none;
    cursor: pointer;
}

svg.DNA .portText.isExecute
{
    fill: #D7D7D7;
}

svg.DNA .portText.isCustom
{
    fill: #D7D7D7;
}

svg.DNA .portText:hover
{
    fill:white;
}

svg.DNA .portText.selected
{
    fill: orange;
    stroke: transparent !important;
}

svg.DNA .portText.isCustom
{
}

svg.DNA .addCustomPort
{
    fill: blue;
    font-size: 6pt;
    cursor: pointer;
}

svg.DNA .removeCustomPort
{
    fill: blue;
    font-size: 6pt;
    cursor: pointer;
    text-anchor: middle;
}

svg.DNA .removeCustomPort:hover
{
    text-decoration: underline;
}

svg.DNA .port.isCustom
{
}

svg.DNA .link .outer-path
{
    stroke: transparent;
    stroke-width: 20;
    fill: none;
}

svg.DNA .link .inner-path
{
    stroke-width: 2;
    fill: none;
}

svg.DNA .link .inner-path.execution
{
    stroke: #D7D7D7;
}

svg.DNA .link .inner-path.activated
{
    stroke-width: 8;
    fill: none;
	stroke-dasharray: 7;
	animation: dash-to-right 10s linear;
	animation-iteration-count: infinite;
}

svg.DNA .link .inner-path.execution.activated
{
    stroke-width: 8;
    fill: none;
	stroke-dasharray: 7;
	animation: dash-to-right 10s linear;
	animation-iteration-count: infinite;
}

@keyframes dash-to-right {
  to {
    stroke-dashoffset: -500;
  }
}

@keyframes dash-to-left {
  to {
    stroke-dashoffset: 500;
  }
}

svg.DNA .link:hover .inner-path
{
    stroke-width: 4;
    stroke: lightgray;
}


svg.DNA .labelAddInput
{
    stroke: transparent;
    fill: rgb(200, 200, 200);
    font-family: Arial;
    font-style: italic;
    font-size: 8pt;
    alignment-baseline: hanging;
    cursor: pointer;
}

svg.DNA .labelAddInput:hover
{
    font-size: 9pt;
}

svg.DNA .labelAddOutput
{
    stroke: transparent;
    fill: rgb(200, 200, 200);
    font-family: Arial;
    font-style: italic;
    font-size: 8pt;
    text-anchor: end;
    alignment-baseline: hanging;
    cursor: pointer;
}

svg.DNA .labelAddOutput:hover
{
    font-size: 9pt;
}

svg.DNA .groupOfNodesRect
{
	fill : rgba(169, 169, 169, 0.4);
	stroke : #666666;
	filter: url(#dropShadowFilter);
}


svg.DNA .groupOfNodesRect:hover
{
    stroke-width: 4;
    stroke: lightgray;
}

svg.DNA .groupOfNodesRect.selected:hover
{
    stroke-width: 4;
    stroke: orange;
}

svg.DNA .groupOfNodesName
{
	fill : white;
	stroke : none;
	font-size: 10pt;
    font-family: Arial;	
}

svg.DNA .resizeBorder
{
	stroke: transparent;
	fill : none;
	vector-effect : non-scaling-stroke;
	stroke-width : 5px;
}

svg.DNA .resizeBorder.horizontal
{
	cursor: ns-resize;
}

svg.DNA .resizeBorder.vertical
{
	cursor: ew-resize;
}

svg.DNA .resizeHandle
{
	stroke:transparent;
	fill:transparent;
}

svg.DNA .resizeHandle.topLeft
{
	cursor: nw-resize;
}

svg.DNA .resizeHandle.bottomLeft
{
	cursor: sw-resize;
}

svg.DNA .resizeHandle.topRight
{
	cursor: ne-resize;
}

svg.DNA .resizeHandle.bottomRight
{
	cursor: se-resize;
}


svg.DNA .selected
{
    stroke: orange;
    stroke-width: 3;
}

svg.DNA .inlineEditor
{
    font-size: 8pt;
    font-family: Arial;
    background-color: transparent;
    color: lightgray;
    border: solid 1px gray;
    width: 100%;
}

svg.DNA .inlineEditor option
{
    background-color: #101310;
    color: lightgray;
}

svg.DNA input[type=checkbox].inlineEditor
{
    width: auto;
}

svg.DNA input[type=text].nameEditor.rightAlign
{
    text-align: right;
}


svg.DNA .TYPE_BOOL
{
    stroke: #930000;
}

svg.DNA .TYPE_BOOL.isLinked
{
    fill: #930000;
}

svg.DNA .TYPE_STRING
{
    stroke: #FC00D2;
}

svg.DNA .TYPE_STRING.isLinked
{
    fill: #FC00D2;
}

svg.DNA .TYPE_INTEGER
{
    stroke: #1DE0AD;
}

svg.DNA .TYPE_INTEGER.isLinked
{
    fill: #1DE0AD;
}

svg.DNA .TYPE_FLOAT
{
    stroke: #85D13A;
}

svg.DNA .TYPE_FLOAT.isLinked
{
    fill: #85D13A;
}

svg.DNA .TYPE_OBJECT
{
    stroke: #00A8F2;
}

svg.DNA .TYPE_OBJECT.isLinked
{
    fill: #00A8F2;
}

svg.DNA .TYPE_COLOR
{
    stroke: #0058CA;
}

svg.DNA .TYPE_COLOR.isLinked
{
    fill: #0058CA;
}

svg.DNA .TYPE_DATETIME
{
    stroke: #FCC822;
}

svg.DNA .TYPE_DATETIME.isLinked
{
    fill: #FCC822;
}

svg.DNA .TYPE_ARRAY
{
    filter: url(#filter_TYPE_ARRAY);
}

svg.DNA .TYPE_UNDEFINED
{
    stroke: gray;
}

svg.DNA .TYPE_UNDEFINED.isLinked
{
    fill: gray;
}

svg.DNA .inner-path.selected
{
    stroke: orange !important;
    stroke-width: 3;
}


#leftSideBar
{
	position: absolute;
	width: 200px;
	top: 0px;
	left: 0px;
}

#rightSideBar
{
	position: absolute;
	width: 250px;
	top: 0px;
	right: 0px;
}


#rightSideBar span
{
    color: lightgray;
    font-family: Arial;
    list-style-type: none;
    font-size: 12px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 5px;
}

#rightSideBar input
{
    margin: 5px;
}

#rightSideBar select
{
    margin: 5px;
}

#rightSideBar input.customInputOutputField
{
	font-size: 8pt;
	width: 100%;
	flex: 1;
}

svg.DNA .boxSelection
{
    stroke-width: 1px;
    stroke: white;
    fill:transparent;
    vector-effect: non-scaling-stroke;
    shape-rendering: crispEdges;
    stroke-dasharray: 6,3;
}

svg.DNA .underBoxSelection
{
    stroke: orange;
    stroke-width: 2px;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 6,3;
}

#rightSideBar .function-ports-section
{
	display: flex;
	flex-direction: column;
	padding-bottom: 20px;
}

svg.DNA .nodeInfo circle
{
	stroke: yellow;
	fill: yellow;
}

svg.DNA .nodeInfo text
{
	stroke: transparent;
	fill: black;
	font-weight: bold;
}

.dna-group-of-nodes-tooltip
{
    position: absolute;
    color: black;
    border: solid 1px white;
    background: #bbbbbb;	
	font-size: 10pt;
	font-family: Arial;
	border-radius: 4px;
    padding: 2px;	
}

.dna-graph-menu {
  position: absolute;
  width: 200px;
  padding: 2px;
  margin: 0;
  border: 1px solid #bbb;
  background: #eee;
  background: -webkit-linear-gradient(to bottom, #fff 0%, #e5e5e5 100px, #e5e5e5 100%);
  background: linear-gradient(to bottom, #fff 0%, #e5e5e5 100px, #e5e5e5 100%);
  z-index: 100;
  border-radius: 3px;
  box-shadow: 1px 1px 4px rgba(0,0,0,.2);
  opacity: 0;
  -webkit-transform: translate(0, 15px) scale(.95);
  transform: translate(0, 15px) scale(.95);
  transition: transform 0.1s ease-out, opacity 0.1s ease-out;
  pointer-events: none;	
}

.dna-graph-menu-item {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  white-space: nowrap;	
}

.dna-graph-menu-btn {
  background: none;
  line-height: normal;
  overflow: visible;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  display: block;
  width: 100%;
  color: #444;
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 6px 8px;
  border-radius: 3px;
}
 .dna-graph-menu-btn::-moz-focus-inner, .dna-graph-menu-btn::-moz-focus-inner {
 border: 0;
 padding: 0;
}

.dna-graph-menu-text { margin-left: 25px; }

.dna-graph-menu-btn .fa {
  position: absolute;
  left: 8px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.dna-graph-menu-item:hover > .dna-graph-menu-btn {
  color: #fff;
  outline: none;
  background-color: #2E3940;
  background: -webkit-linear-gradient(to bottom, #5D6D79, #2E3940);
  background: linear-gradient(to bottom, #5D6D79, #2E3940);
  border: 1px solid #2E3940;
}

.dna-graph-menu-item.disabled {
  opacity: .5;
  pointer-events: none;
}

.dna-graph-menu-item.disabled .dna-graph-menu-btn { cursor: default; }

.dna-graph-menu-separator {
  display: block;
  margin: 7px 5px;
  height: 1px;
  border-bottom: 1px solid #fff;
  background-color: #aaa;
}

.dna-graph-menu-item.submenu::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-left-color: #808080;
}

.dna-graph-menu-item.submenu:hover::after { border-left-color: #fff; }

.dna-graph-menu .dna-graph-menu {
  top: 4px;
  left: 99%;
}

.show-menu, .dna-graph-menu-item:hover > .dna-graph-menu {
  opacity: 1;
  -webkit-transform: translate(0, 0) scale(1);
  transform: translate(0, 0) scale(1);
  pointer-events: auto;
}

.dna-graph-menu-item:hover > .dna-graph-menu {
  -webkit-transition-delay: 100ms;
  transition-delay: 300ms;
}