html, body {
  overflow: hidden;
  height: 100%;
  margin: 0;
}

.red-line, .green-line, .edge-line {
    stroke-width: 1%;
}

.red-line {
    stroke: red;
}
.green-line {
    stroke: green;
}

.arrow {
    stroke: black;
    stroke-width: 0.8%;
}

#container {
    padding:0;
    margin:0;
}

#x1coord, #b1coord, #x2coord, #b2coord {
    position: relative;
    appearance: none;
    background: #d3d3d3;
    outline: none;
    padding: 0;
    margin: 0;
}

#x1-label, #b1-label {
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    text-align: center;
}

#x2-label, #b2-label {
    margin: 0;
    padding: 0;
    text-align: center;
    position: relative;
}

#x1coord::-webkit-slider-thumb, #x2coord::-webkit-slider-thumb {
    appearance: none;
    width: 26px;
    height: 26px;
    cursor: pointer;
}
#b1coord::-webkit-slider-thumb {
    appearance: none;
    width: 26px;
    height: 26px;
    cursor: pointer;
}

#x2coord::-webkit-slider-thumb, #b2coord::-webkit-slider-thumb {
    appearance: none;
    width: 26px;
    height: 26px;
    cursor: pointer;
}

#x1coord::-webkit-slider-thumb, #x2coord::-webkit-slider-thumb {
    background: black;
}

#b1coord::-webkit-slider-thumb, #b2coord::-webkit-slider-thumb {
    background: blue;
}