

.edge {
  position: absolute;
  border: 2px solid #fff;
  background-color: #4CAF50;
  transform-origin: top left;
  border-radius: 2px;
  z-index: 0;
  opacity: 1;

}


/* .weight{
  position: absolute;
  color:wheat;
} */

.st-btn,
.end-btn {

    position: absolute;
     bottom: -20px;
  border: none;
  background-color: #3498db;
  color: white;
  padding: 4px 15px;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
 
}

.st-btn {
  background-color: #27ae60;
}

.end-btn {
  background-color: #e74c3c;
}

.st-btn:hover {

  background-color: #219653;
  transform: scale(1.05);

}

.end-btn:hover {

  background-color: #c0392b;
  transform: scale(1.05);

}



.Path {

  border-radius: 4px;
  border: 4px dashed rgb(215, 12, 12);
  border-bottom:0px;

  /* transition: background-color 0.3s, transform 0.2s; */
  box-shadow: 0 0 5px rgba(215, 12, 12, 0.5);
 
}


.Path:hover {

  box-shadow: 0 0 10px rgba(215, 12, 12, 0.7);
 
}


.finish{ display: block;}

/* 


#result{

  background-color: rgb(184,190,165);
} */




.Station {


  background-color: #e59a20;
  display: flex;
  position:absolute ;
  justify-content: center;
  align-items: center;
  z-index: 1;
  width: 50px;
  height: 50px;
  line-height: 40px;
  border-radius: 50%;
  color: rgb(15, 14, 14);
  font-weight: bold;
  font-size: 14px;
  font-weight: bold;
  border-width: 30%;
  border-color: bisque;
  box-shadow: 4% 4% bisque;

}

.Station:hover {

  background-color: yellowgreen;
  transform: scale(1.05);

}




.height {
  /* Define styling for the value display */
  display: block;
  text-align: center;
  font-size: 20px;
  color: wheat;
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
}
