ul.wizard,
ul.wizard li {
  margin: 0;
  padding: 0;
  display: flex;
  width: 98%;
  
}

ul.wizard {
  counter-reset: num;
  display: flex;
  padding: 16px;
  border: 1px solid  #E3E4E4;
  justify-content: flex-end;
  align-items: center;
  flex: 1 0 0;
  border-radius: 24px;


}

ul.wizard li {
  flex-direction: column;
  align-items: center;
  position: relative;
  padding: 12px;
}


/* Cerchio*/

ul.wizard li::before {
  content: '02';
  text-align: center;
  line-height: 28px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  width: 40px;
  height: 40px;
  padding: 6px 8px 6px 7px;
  border: 1px solid #C7C8C8;
  justify-content: center;
  align-items: center;
  color: #606161;
  cursor: pointer;
  font-size: 18px;

}


/* Linea */

ul.wizard li ~ li::after {
  content: '';
  position: absolute;
  width: 100%;
  left: 50%;
  height: 4px;
  background-color: #c1c1c1;
  top: calc(0.75em - 2px);
  z-index: -1;
}


/* Tutte le righe che vengono dopo l'ultimo completed */

ul.wizard li.completed ~ li::after {
  content: '';
  position: absolute;
  width: 100%;
  left: 50%;
  height: 2px;
  top:30px;
  z-index: -1;
}

[dir= ltr] ul.wizard li.completed ~ li::after {
	left: -50% !important;
}

ul.wizard li.active::before {
  background: #246E9E;
  color: white;
}

ul.wizard li.active::after {
  background: #246E9E;
  color: white;
}

ul.wizard span {
	font-size: 16px;
	font-style: normal;
	font-weight: 600;
	line-height: 24px;
	color: #606161;
}
ul.wizard span.active {
	color: #004C72 !important;
	font-size: 16px;
	font-style: normal;
	font-weight: 600;
	line-height: 24px;
  }

/*  updated sample  */


/*  number and circle  */
ul.wizard li.completed.second::before {
	content:"02" ;
	background: #fff;
	display: flex;
	width: 40px;
	height: 40px;
	padding: 6px 8px 6px 7px;
	border: 1px solid #005F8E;
	justify-content: center;
	align-items: center;
	color: #005F8E;
	font-size: 18px;
	line-height: 28px;
  }
ul.wizard li.completed::before {
  content:"01" ;
  background: #fff;
  display: flex;
  width: 40px;
  height: 40px;
  padding: 6px 8px 6px 7px;
  border: 1px solid #005F8E;
  justify-content: center;
  align-items: center;
  color: #005F8E;
  font-size: 18px;
  line-height: 28px;
}
ul.wizard li.completed.active::before {
	background: #005F8E;
	display: flex;
	width: 40px;
	height: 40px;
	padding: 6px 8px 6px 7px;
	border: 1px solid #005F8E;
	justify-content: center;
	align-items: center;
	color: #fff;
  }

ul.wizard li.completed span {
  /*  text  */
  color: #606161;
}

ul.wizard li.completed.active + li::after {
  background: linear-gradient(
    to left,
    #246E9E 0%,
    #246E9E 50%,
    #C7C8C8 50%,
    #C7C8C8 100%
  );  }

ul.wizard li.completed::after {
  /*  line before circle  */
  background: #C7C8C8;
}
.form_wizard{
display: flex;
padding: 32px;
flex-direction: column;
align-items: stretch;
gap: 9px;
border-radius: 24px;
border: 1px solid  #E3E4E4;
background: #FFF;
align-self: stretch;
width: 100%;
}