/*
the englobing div must be that:
<div style="width:356px;height:162px;position:relative;  border: 3px solid #0055AA;">
*/
.dot0 {
  height: 32px;
  width: 32px;
  background-color: #bbb;
  /*
  background-color: #00AA55;
  background-image: linear-gradient(to right, rgba(0,85,170,1), rgba(0,85,170,0));
  */
  border-radius: 50%;
  position:absolute;
  top:80px;
  left:30px;
}


.line0 {
  height: 8px;
  width: 100px;
  background-color: #bbb;
  /*
  background-color: #00AA55;
  background-image: linear-gradient(to right, rgba(0,85,170,0), rgba(150,150,150,1));
  */
  position:absolute;
  top:92px;
  left:62px;

}

.dot1 {
  height: 32px;
  width: 32px;
  /*
  background-color: #00AA55;
  */
  background-color: #bbb;
  border-radius: 50%;
  position:absolute;
  top:80px;
  left:162px;

}

.line1 {
  height: 8px;
  width: 100px;
  background-color: #bbb;
  /*
  background-color: #00AA55;
  background-image: linear-gradient(to right, rgba(0,85,170,0), rgba(150,150,150,0));
  */
  position:absolute;
  top:92px;
  left:194px;
}

.dot2 {
  height: 32px;
  width: 32px;
  background-color: #bbb;
  /*
  background-color: #00AA55;
  background-image: linear-gradient(to right, rgba(0,85,170,0), rgba(0,85,170,1));
  */
  border-radius: 50%;
  position:absolute;
  top:80px;
  left:294px;
}

.texto {
  position:absolute;
  color:black;
  text-align:center;
  top:-45px;
  left:-50%;
  /*background:grey;*/
  border-radius: 10%;
  font-weight: bold;
}