.table tbody td.graph-container {
  padding: 0;
  position: relative;
  opacity: 0.6;
}

.graph-container .graph-fork {
  position: absolute;
  height: calc(100% + 1px);
  width: 20px;
}

.graph-container .graph-fork .graph-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 20px;
  background-position: center;
  background-repeat: no-repeat repeat;
}

.graph-container .graph-fork .graph-layer-block {
  padding: 12px 5px;
  font-size: 11px;
  color: black;
}

.graph-container .graph-fork .graph-layer-vline {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB9wIHAYSMjc5iPMAAAAiSURBVDjLY2AgDvyHYoKAiYHKYNTAUQNHDRw1cNTAoWIgAMbwAiWGIjvFAAAAAElFTkSuQmCC");
}

.graph-container .graph-fork .graph-layer-bline {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB9wIHAYSMjc5iPMAAAAiSURBVDjLY2AgDvyHYoKAiYHKYNTAUQNHDRw1cNTAoWIgAMbwAiWGIjvFAAAAAElFTkSuQmCC");
  top: 50%;
  height: 50%;
}

.graph-container .graph-fork .graph-layer-tline {
  height: 11px;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB9wIHAYSMjc5iPMAAAAiSURBVDjLY2AgDvyHYoKAiYHKYNTAUQNHDRw1cNTAoWIgAMbwAiWGIjvFAAAAAElFTkSuQmCC");
}

.graph-container .graph-fork .graph-layer-fork {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB9wIHAcELNBsanAAAACZSURBVDjLY2RgYGBkIAz+QWkmQgqZiDBMkoEEQIyBuVC6jloGakPpB9QyUANK3yDW24x4sDkDA8N/BgaGXwwMDEIE1MIwXsmNUAPnEmkYXgODoS77z8DAIEupgflIhq0iwTBGBqgmZPwbib2URMOwGvifgYHhIQMDQwsZhmF4mZuBgUGdTIMYGRgYGBmJzMtUzXqjBo4aiAYAetAczGJolWwAAAAASUVORK5CYII=");
  background-repeat: no-repeat;
}

.graph-container .graph-fork .graph-layer-hline {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB9wIHAYTA3/8uYgAAAA3SURBVDjLY2AYBUMecIwGAQZgZGBg+E+RCVwMDFzfIExpBgYGJoqdxMXAwAWhGG6PRtAoGK4AAB2zAym2GI80AAAAAElFTkSuQmCC");
  background-repeat: repeat no-repeat;
}

.graph-container .graph-fork .graph-layer-rline {
  left: 50%;
  width: 50%;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB9wIHAYTA3/8uYgAAAA3SURBVDjLY2AYBUMecIwGAQZgZGBg+E+RCVwMDFzfIExpBgYGJoqdxMXAwAWhGG6PRtAoGK4AAB2zAym2GI80AAAAAElFTkSuQmCC");
  background-repeat: repeat no-repeat;
}

.graph-container .graph-fork .graph-layer-lline {
  width: 5px;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB9wIHAYTA3/8uYgAAAA3SURBVDjLY2AYBUMecIwGAQZgZGBg+E+RCVwMDFzfIExpBgYGJoqdxMXAwAWhGG6PRtAoGK4AAB2zAym2GI80AAAAAElFTkSuQmCC");
  background-repeat: repeat no-repeat;
}