.flow {
    width: 49%;
    height: 100%;
}

.scatter {
    width: 49%;
    height: 100%;
    /* width: 500px;
    height: 500px; */
}

line {
    
    stroke: rgb(111, 0, 255);
    stroke-width: 3;
  }

.control {
    position: absolute;
    /* position: relative; */
    width: 140px;
    background-color: white;
    border: 1px solid darkgrey;
    border-radius: 5px;
    top: 10px;
    right: 10px;
    font-size: 12px;
    padding: 5px;

    /* vertical-align: bottom; */
}

.control .tickCount {
    width: 100%;
    text-align: center;
    display: block
}

.control #doOneUpdate {
    width: 100%;
}

text {
    font: bold 16px monospace;
  }
  
/* .enter {
fill: green;
}

.update {
fill: rgb(248, 99, 0);
}

.exit {
fill: red;
} */


/* Format X and Y Axis */
.axis path,
.axis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}

.axis text {
    font-family: sans-serif;
    font-size: 11px;
}


.tooltip {
    position: absolute;
    font-size: 12px;
    width:  auto;
    height: auto;
    pointer-events: none;
    background-color: white;
}


.regression {
    stroke-width: 2px;
    stroke: steelblue;
    stroke-dasharray: 10,5;
  }