body {
  /* overflow-x: hidden; */
}

.container {
  display: grid;
  grid-template-columns: 15% auto;
}
.input_output {
  background: rgb(105, 158, 140);
  text-align: center;
  box-shadow: inset -4px -4px 3px 1px rgb(220, 243, 209);
  color: white;
}
.svgContainer {
  background: rgb(220, 243, 209);
}
#svgArea {
  width: 1000px;
  height: 800px;
  z-index: 0;
}

button {
  width: 100px;
  height: 30px;
  cursor: pointer;
  margin-bottom: 1rem;
  border-radius: 7px;
  border: 1px solid black;
}
button:hover {
  background-color: rgb(235, 215, 189);
}

input {
  width: 20px;
  height: 26px;
  border: 1px solid grey;
}

.node {
  width: 50px;
  height: 50px;
  font-size: 15px;
  border-radius: 50%;
  background-color: green;
  position: absolute;
  z-index: 2;
  text-align: center;
  line-height: 45px;
  color: yellow;
  cursor: pointer;
  user-select: none;
}

.node:hover {
  fill: greenyellow;
  color: brown;
  /* transform: scale(1.2); */
  transition: 0.3s;
}
.txt {
  cursor: pointer;
}

.vertDivision {
  width: 100%;
  display: grid;
  justify-content: center;
  z-index: 1;
  /* background-color: gray; */
}

.line {
  stroke: rgba(155, 33, 33, 0.849);
  z-index: 1;
  stroke-width: 5;
  position: absolute;
}
#input {
  border: 1px solid black;
  height: 200px;
  width: 100px;
  overflow: auto;
  padding: 10px;
  padding-top: 0px;
}