body {
  text-align:center;
}
#container{
  position:relative;
  width: 80%;
  height: 300px;
  margin:0 auto;
  border: 1px solid black;
  border-radius:10px;
}

.node {
  position:absolute;
  line-height:1.8em;
  font-size:1.2em;
  width: 35px;
  height: 35px;
  border-radius:50%;
  border: 1px solid gray;
  z-index:10;
  background-color:whitesmoke;
}
.node:first-of-type{
  border:2px solid green;
}
.start-node {
  border: 3px solid blue !important;
  background-color: #d4f0ff;
}
/* .node:last-of-type{
  border:2px solid red;
} */
.active{
  background-color:rgba(51, 170, 51, 1);
  color:white;
}

.line {
  z-index:0;
}
.line span {
}

input {
  text-align:center;
  margin:5px auto;
  display:block;
}

connection .line .arrow-fw span {
  padding-left:20px;
}

connection .line .arrow-bw span {
  position:absolute;
  transform:translateX(-40px)
}
/****************************************/
connection .line .arrow {
  top: -5px;
  height: 0px;
  width: 0px;
  position: absolute;
  border-bottom: 6px solid transparent;
  border-top: 6px solid transparent;
  background-clip: border-box;
}
connection .line .arrow-fw {
  border-right: 12px solid black;
  transform: translateX(20px);
}

connection .line .arrow-bw {
  left: 100%;
  border-left: 12px solid black;
  transform: translateX(-32px);
}

connection .line .span {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -100%);
}

connection .line {
  position:absolute;
  height:1px;
  background-color: black;
}

/* Button styling */
.button-container {
  margin: 15px auto;
}

.button-container button {
  padding: 8px 15px;
  margin: 0 5px;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}

.button-container button:hover {
  background-color: #e8e8e8;
}