


/*to make the svg resizable*/ /*
.svg-container {
    display: inline-block;
    position: relative;
    width: 100%;
    /*padding-bottom: 100%; /* aspect ratio */ /*
    vertical-align: top;
    /*overflow: hidden;*/ /*
}

.svg-content-responsive {
    display: inline-block;
    position: absolute;
    top: 10px;
    left: 0;
} */ /*

svg {
  border: 1px solid #999;
  /*overflow: hidden;*/ /*
} */

.canvas {
  overflow: visible;
}
.canvas .wrapper.outer > .background {
  fill: #FFFFFF;
  stroke: black;
}
.canvas .wrapper.inner > .background {
  fill: #FFFFFF;
  cursor: move;
}
.canvas .background {
  fill: #FFFFFF;
  cursor: move;
}
.canvas .panCanvas {
  cursor: click;
}

.canvas .minimap {
  stroke-width: 1px;
}

.canvas .minimap .frame {
  pointer-events: all;
}

.canvas .minimap .container {
  stroke: #000000; /* #111111 */
  /*stroke-width: 1px;*/
  /*border: 1px solid #999;*/
}

.canvas .minimap .frame .background {
  stroke: #FF0000; /* #111111 */
  stroke-width: 10px;
  fill-opacity: 0.1;   /*grey shade of mini-map*/
  fill: #FFFFFF; /* #FF0000 */
  /*fill: url(#minimapGradient_qwpyza); */
  filter: url(#minimapDropShadow_qwpyza);
  cursor: move;
  border: 1px solid #999;
}

/*
.cluster rect {
  stroke: #333;
  fill: #000;
  fill-opacity: 0.1;
  stroke-width: 1.5px;
}*/

h1, h2 {
  color: #333;
}

/*textarea {
  width: 800px;
}*/

text {
  font-family: sans-serif;
  font-size: 14px;
  /* no effect:
  text-align: center;
  word-wrap: break-word;
  width: 50px;
  max-width: 60px;
  */
}

.activityNameText {
    color:black;
    text-align: center;
}
.locationText {
    color: grey;
    text-align: center;
    /*font-weight:bold;*/
}
.edgeText {
    color:darkblue;
    text-align: center;
}

.node {
    fill: black;  /* text color of nodes*/
    /* no effect:
    white-space: nowrap;
    */
    cursor: pointer;
}

.node[data-expanded="1"]::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='100' cy='50' r='40' stroke='black' stroke-width='2' fill='red'/%3E%3Cpolyline points='20,20 40,25 60,40 80,120 120,140 200,180' style='fill:none;stroke:black;stroke-width:3'/%3E%3C/svg%3E ");
  width: 200px;
  height: 200px;
}

.node rect {
  stroke: #333;
  fill: #fff;
  stroke-width: 3px;
}



.node.demand {
  /*stroke: #333;  */
  font-weight: bold
}

.node.demand rect {
  stroke: darkblue;
  fill: #fff;
  stroke-width: 4px;
}

.node.market rect {
  stroke: #ed9736;
  fill: #fff;
  stroke-width: 3px;
}

.node.marketgroup rect {
  stroke: #ffc34c;
  fill: #fff;
  stroke-width: 3px;
}

.node.treatment rect {
  stroke: #f4425c;
  fill: #fff;
  stroke-width: 3px;
}

.node .triangle {
    stroke: black;
    fill: #f8f404;
}

.node .triangle[data-expanded="1"] {
    opacity: 0;
}

.node .triangle:hover {
    opacity: 50%;
}

/* Edges */
/*.edgePath path.path {
  stroke: red;
  /*fill: darkred; /* Arrow head */
  /*lineInterpolate: basis;*/
/*}*/

.edgePath.impact path.path {
  stroke: red;
  opacity: 0.7;
}

.edgePath.benefit path.path {
  stroke: green;
  opacity: 0.7;
}

.edgePath path.path:hover {
  opacity: 0.5;
}

/* Arrowhead */
.edgePath path {
  stroke: none;
  /*fill: black;*/
  opacity: 0.3;
}

/*.edgePath marker {
  fill: darkgrey; /* Arrow head */
  /*opacity: 1;
}*/

.edgeLabel {
    fill: darkblue;  /* text color of edges*/
}




/*.label {
   /* text color*/
  /* no effect:
  margin-top: 30em;
fill: red;
  display: block;
  text-align: right;
  font: 20px sans-serif;
  background: #fffce2;
  padding: 200px; */
/*}

.edgeLabel {
   /* text color*/
  /* no effect:
  fill: red;
  margin-top: 30em;
  display: block;
  text-align: right;
  font: 20px sans-serif;
  background: #fffce2;
  padding: 200px; */
/*}*/

.error {
  color: red;
}

div.tooltip {
    position: absolute;
    text-align: left;
    width: auto;
    height: auto;
    padding: 2px;
    font: 12px sans-serif;
    background: #fffce2;
    border: 1px;
    border-radius: 8px;
    pointer-events: none;
    /*color: red;*/
}

