index.css

#container {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  height: 600px;
}
#container .main-canvas {
  width: 100%;
  max-width: 500px;
  margin: 0 40px 40px;
}

#lines-svg #lines-group {
  transition: scale 0.4s linear, transform 0.4s linear, matrix 0.4s linear;
}
svg path{
  vector-effect: non-scaling-stroke;
}
.show {
  visibility: visible;
}
.hide {
  visibility: hidden;
}
.checkbox {
  width: 80px;
  padding: 10px 10px 10px 0;
}
.checkbox:hover{
  cursor: pointer;
} 
.checkbox .checkmark {
  stroke-width: 2;
  stroke: white;
}

.checkbox .checkmark__circle {
  stroke: #7ac142;
}
.checkbox.checked .checkmark__circle{
  fill: #7ac142;
}


#y-axi-group .y-axi-text,
#x-axi-group .x-axi-text{
  fill: #55575e;
}
#y-axi-group .y-axi-text {
  font-size: 18px;
}

#x-axi-group .x-axi-text.hide{
  opacity: 0;
  visibility: hidden;
}
#x-axi-group .x-axi-text, #x-axi-group .x-axi-text.show{
  opacity: 1;
  visibility: visible;
  font-size: 15px;
  transition: visibility .5s linear, opacity .5s linear;
}
@media screen and (max-width: 640px) {
  #y-axi-group .y-axi-text {
    font-size: 14px;
  }
}


#y-axi-group .y-axi-line {
  stroke: #eee;
}

.popup, .popup.show {
  opacity: 1;
  visibility: visible;
  transition: visibility .5s linear, opacity .5s linear;
}
.popup.hide {
  opacity: 0;
  visibility: hidden;
}
.popup .popup-circle{
  fill: white;
  stroke-width: 2px;
}
.popup .popup-rect{
  fill: white;
  stroke: black;
}
.popup .popup-line-text{
  fill: #55575e;
}
.popup .popup-line {
  stroke: #eee;
}