/* the #grap-placeholder is used as a placeholder. It can be removed and replaced with real graph placeholder, but some of its current properties may be required, such as relative postion, width, max-width, overflow */
#grap-placeholder {
    position: relative;
    overflow: visible;
    width:100%; 
    max-width:850px; 
    display: flex; 
    align-items: center; 
    justify-content:center; 
    color:#999;
}

.x-labels, .y-labels {
  font-family: "HelveticaNeueW01-55Roma", "Helvetica Neue Regular", Helvetica, Arial, "sans-serif";
  font-size:12px;
  line-height:12px;
  letter-spacing: 0.2px;
  color:#999;
  /*margin-right: -62px;*/  
}

.x-labels div {padding-top:26px;}
.x-labels div:not(:first-child) span {display:inline-block; margin-left:-15px;}
.x-labels div span.x-last {position: absolute; top:26px; right:0;}

.graph-grid, .y-labels {
  position: absolute;
  top:0;
  left:0;
  bottom: 0;
  right: 0;
  width: 100%; /* good one 96.5%*/
  height: calc(100% - 40px);
  z-index: -1;
  border-collapse: collapse;
}

.graph-grid {border-top:1px solid #f2f2f1;}
.graph-grid div {border-right:1px solid #f2f2f1;}

.graph-grid td {border:1px solid #f2f2f1;}

.y-labels td {vertical-align: top;}
.y-labels td span {display: block; margin-top: -7px; text-align: right; box-sizing: border-box; padding-right: 24px;}
.y-labels td span.upper {margin-top:0; margin-bottom: -7px;}
.y-labels td div.y-prime {position: absolute; bottom:-3px; right:24px}


.rectangle {
    border-radius: 0 !important;
    position: absolute;
    background-color: rgba(99,140,28,0.08);
  }

  /* segment ataches to Y-axis */
#rect1 {
  /* top: calc(50% - (73px - 8px / 2)); */
  right: calc(50% - 8px / 2);
  height: 73px;
  width: auto;
  margin-right: -3px;
  margin-bottom: -1px;
  border-bottom: 1px solid rgba(219, 170,0,.5);
  border-right: 1px solid rgba(99, 140, 28,.5);
  z-index: 11;
}

/* segment ataches to X-axis  */
#rect2 {
    top:calc(50% + 8px / 2);
    left:calc(50% + 8px / 2);
    height: auto;
    width: 187px;
    margin-left: 1px;
    border-left: 1px solid rgba(219, 170,0,.5);
    border-top: 1px solid rgba(99, 140, 28,.5);
    z-index: 22;
  }

  /* main node on yellow graph  */
  #graph-node {
    position: absolute;
    top:50%;
    left:50%;
    margin-top: -5px;
    margin-left: -2px;
    height: 8px;
    width: 8px;
    background-color: #DBAA00;
    border-radius: 50%;
    z-index: 33;
  }

  #pin-box-h {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    margin-bottom: -29px;
    box-sizing: content-box;
  }

  #pin-box-v {
    height: 100%;
    position: absolute;
    left: 0;
    margin-left: -31px;
  }