/*.node {
  font: 300 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
  fill: #444;
}*/

.node {
  font: 300 10px "Verdana", Helvetica, Arial, sans-serif;
  fill: #444;
}


.node:hover {
  fill: #000;
  font-size: 12px;
  cursor: pointer; 
  cursor: hand; 
}

.link {
  stroke: steelblue;
  stroke-opacity: .7;
  fill: none;
  pointer-events: none;
}

.node:hover,
.node--source,
.node--target,
.node--sourcesource,
.node--targettarget,
 {
  font-weight: 700;
}

.node--source {
  fill: #2ca02c;
}

.node--sourcesource {
  fill: #D69696;
}

.node--target {
  fill: #d62728;
}

.node--targettarget {
  fill: #A1B1A1;
}


.link--source,
.link--target,
.link--sourcesource,
.link--targettarget, {
  stroke-opacity: 1;
  stroke-width: 3px;
}

.link--source {
  stroke: #d62728;
}

.link--sourcesource {
  stroke: #D69696;
}

.link--targettarget {
  stroke: #A1B1A1;
}

.link--target {
  stroke: #2ca02c;
}

#tooltip {
  font: 900 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11px;
  color: white;
  opacity: .7;
  background: #333;
  padding: 5px;
  border: 1px solid lightgrey;
  border-radius: 5px;
  position: absolute;
  z-index: 10;
  visibility: hidden;
  white-space: nowrap;
  pointer-events: none;
} 

#sidebar {
  font: 900 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11px;
  color: black;
  background: #cccccc;
  padding: 5px;
  border: 1px solid lightgrey;
  border-radius: 5px;
  z-index: 10;
  top: 5px; 
  left: 5px; 
  display: inline-block;
  white-space: nowrap;
  vertical-align: top;
  margin: 10px;
  height: 400px;
}

.a-target { 
  color: #d62728;
  cursor: pointer; 
  cursor: hand; 
}

.a-source { 
  color: #2ca02c;
  cursor: pointer; 
  cursor: hand; 
}
.a-set { 
  color: #000000;
  cursor: pointer; 
  cursor: hand; 
}


#leftside {
  top: 5px; 
  left: 5px; 
  width: 200px; 
  display: inline-block; 
  vertical-align: top;
}