<style>
/*flow*/
.flow_top{padding:8px;border-radius:4px 4px 0 0;text-transform:uppercase;font-size:0.7em;}
.flow_arrow{padding:8px;height:24px;background:transparent url(https://images.hrtemplates.co.uk/icons/32x32/down-arrow.png) no-repeat center center;}
.current{font-size:1.2em;}
.flow_box{border-radius:8px;border:2px solid #666;padding:18px 12px 18px 12px;margin:0;text-align:center;position:relative;font-size:0.8em;}
.flow-connector {
  width: 2px;               /* thickness of line */
  height: 20px;             /* length of line */
  background: #000;         /* colour */
  margin: 0 auto;           /* centred */
}
.flow-hr{padding:0;margin:0 auto;border:none;text-align:center;border-top:2px solid #000;height:2px;}
.flow-option{max-width: 70px;
  margin: 0 auto;            /* tiny controlled gap */
  padding: 6px;
  border-radius: 4px;
  transform: skewX(-20deg);   /* slants the sides */
  background: #000;
  color: #fff;
  font-size: 0.8em;
  text-align: center;}
  

/* un-skew the text so it looks normal */
.flow-option span {
  display: block;
  transform: skewX(20deg);
}
.option {
  display: inline-block;
  padding: 12px 18px;
  background: #f0f8ff;
  border: 2px solid blue;
  margin: 0 auto;
  box-sizing: border-box;
}
.end{display: inline-block;
  padding: 12px 18px;       /* more horizontal space = pill shape */
  background: #ffe5e5;
  border: 2px solid red; 
  border-radius: 50px;      /* makes it oval */
  text-align: center;
  margin: 0 auto;}
.flow_more {
  color: #fff;             /* white text */
  font-weight: bold;
  font-size: 0.7em;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;             /* circle width */
  height: 50px;            /* circle height */
  background: #28a745;     /* green */
  border-radius: 50%;      /* circle shape */
  margin: 0 auto;       /* centre it */
}

.flow_more a {
  color: #fff;             /* white text */
  text-align: center;
  text-decoration: none;   /* remove underline */
  display: block;
  width: 100%;
  height: 100%;
  line-height: 50px;       /* vertically centres single-line text */
}

.flow_more a:hover {
  text-decoration: none;   /* no underline on hover */
  color: #fff;             /* stays white on hover */
}
</style>