.graphicsBar:nth-child(1) {
  height: 1.5px;
  background: #00ed64;
  width: 50%;
}

.graphicsBar:nth-child(2) {
  height: 23vh;
  width: 50%;
  margin-right: -90vh;
  display: flex;
  flex-direction: row;
  justify-content: right;
}
.graphicsBar:nth-child(3) {
  height: 0.3vh;
  overflow: hidden;
  width: 90%;
  position: relative;
  margin-right: -100%;
}

.graphicsBar:nth-child(4) {
  height: 25vh;

  width: 50%;
  margin-right: -90vh;
  display: flex;
  flex-direction: row;
  justify-content: right;
}
.graphicsBar:nth-child(5) {
  height: 0.3vh;
  overflow: hidden;
  width: 50%;
  position: relative;
}
.graphicsBar:nth-child(6) {
  height: 25vh;

  width: 50%;
  margin-right: -90vh;
  display: flex;
  flex-direction: row;
  justify-content: right;
}

.graphicsBar:nth-child(7) {
  height: 0.3vh;
  overflow: hidden;
  width: 50%;
  position: relative;
}
.graphicsBar:nth-child(8) {
  height: 25vh;

  width: 50%;
  margin-right: -90vh;
  display: flex;
  flex-direction: row;
  justify-content: right;
}
.graphicsBar:nth-child(9) {
  height: 0.3vh;
  overflow: hidden;
  width: 50%;
  position: relative;
}
.graphicsBar:nth-child(10) {
  height: 25vh;
  width: 50%;
  margin-right: -90vh;
  display: flex;
  flex-direction: row;
  justify-content: right;
}
.graphicsBar:nth-child(11) {
  height: 0.3vh;
  overflow: hidden;
  width: 50%;
  position: relative;
}

.verticalLine1 {
  height: 50%;
  width: 1.5px;
  background: #00ed64;
}
.verticalLine2 {
  height: 50%;
  width: 1.5px;
  background: #00ed64;
}
.verticalLine3 {
  height: 50%;
  width: 1.5px;
  background: #00ed64;
}
.verticalLine4 {
  height: 100%;
  width: 1.5px;
  background: #00ed64;
}
.verticalLine5 {
  height: 100%;
  width: 1.5px;
  background: #00ed64;
}
.verticalLine6 {
  height: 100%;
  width: 1.5px;
  background: #00ed64;
}

.horizontalLine1 {
  height: 1.5px;
  width: 100%;
  background: #00ed64;
  position: absolute;

  right: 0%;
  overflow: hidden;
}
.horizontalLine2 {
  height: 1.5px;
  width: 100%;
  background: #00ed64;
  position: absolute;

  right: 0%;
  overflow: hidden;
}
.horizontalLine3 {
  height: 1.5px;
  width: 100%;
  background: #00ed64;
  position: absolute;

  right: 0%;
  overflow: hidden;
}
.horizontalLine4 {
  height: 1.5px;
  width: 100%;
  background: #00ed64;
  position: absolute;

  right: 0%;
  overflow: hidden;
}
.horizontalLine5 {
  height: 1.5px;
  width: 100%;
  background: #00ed64;
  position: absolute;

  right: 0%;
  overflow: hidden;
}

@media (min-width: 100px) and (max-width: 700px) {
  .graphicsBar:nth-child(1) {
    height: 1.5px;
    background: #00ed64;
    width: 90%;
  }

  .graphicsBar:nth-child(2) {
    height: 23vh;
    width: 90%;
    margin-right: -90vh;
    display: flex;
    flex-direction: row;
    justify-content: right;
  }
  .graphicsBar:nth-child(3) {
    height: 0.3vh;
    overflow: hidden;
    width: 90%;
    position: relative;
    margin-right: -100%;
  }

  .graphicsBar:nth-child(4) {
    height: 25vh;

    width: 90%;
    margin-right: -90vh;
    display: flex;
    flex-direction: row;
    justify-content: right;
  }
  .graphicsBar:nth-child(5) {
    height: 0.3vh;
    overflow: hidden;
    width: 90%;
    position: relative;
  }
  .graphicsBar:nth-child(6) {
    height: 25vh;

    width: 90%;
    margin-right: -90vh;
    display: flex;
    flex-direction: row;
    justify-content: right;
  }

  .graphicsBar:nth-child(7) {
    height: 0.3vh;
    overflow: hidden;
    width: 90%;
    position: relative;
  }
  .graphicsBar:nth-child(8) {
    height: 25vh;

    width: 90%;
    margin-right: -90vh;
    display: flex;
    flex-direction: row;
    justify-content: right;
  }
  .graphicsBar:nth-child(9) {
    height: 0.3vh;
    overflow: hidden;
    width: 90%;
    position: relative;
  }
  .graphicsBar:nth-child(10) {
    height: 25vh;

    width: 90%;
    margin-right: -90vh;
    display: flex;
    flex-direction: row;
    justify-content: right;
  }
  .graphicsBar:nth-child(11) {
    height: 0.3vh;
    overflow: hidden;
    width: 90%;
    position: relative;
  }

  .verticalLine1 {
    height: 100%;
    width: 1.5px;
    background: #00ed64;
  }
  .verticalLine2 {
    height: 100%;
    width: 1.5px;
    background: #00ed64;
  }
  .verticalLine3 {
    height: 100%;
    width: 1.5px;
    background: #00ed64;
  }
  .verticalLine4 {
    height: 100%;
    width: 1.5px;
    background: #00ed64;
  }
  .verticalLine5 {
    height: 100%;
    width: 1.5px;
    background: #00ed64;
  }
  .verticalLine6 {
    height: 100%;
    width: 1.5px;
    background: #00ed64;
  }

  .horizontalLine1 {
    height: 1.5px;
    width: 100%;
    background: #00ed64;
    position: absolute;

    right: 0%;
    overflow: hidden;
  }
  .horizontalLine2 {
    height: 1.5px;
    width: 100%;
    background: #00ed64;
    position: absolute;

    right: 0%;
    overflow: hidden;
  }
  .horizontalLine3 {
    height: 1.5px;
    width: 100%;
    background: #00ed64;
    position: absolute;

    right: 0%;
    overflow: hidden;
  }
  .horizontalLine4 {
    height: 1.5px;
    width: 100%;
    background: #00ed64;
    position: absolute;

    right: 0%;
    overflow: hidden;
  }
  .horizontalLine5 {
    height: 1.5px;
    width: 100%;
    background: #00ed64;
    position: absolute;

    right: 0%;
    overflow: hidden;
  }
}