.wizard {
	margin-top: 24px;
}

.column-header-wizard {
	width: 100%;
	padding: 48px 24px 24px 36px!important;
}

.step {
  padding: 12px 6px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: inherit;
  opacity: 0.4;
}
.v-stepper {
  position: relative;
}
/* step with icon */
.step.icon {
  height: auto;
}
.step.icon.completed {
  opacity: 1;
}
.step.active {
  opacity: 1;
}
.step.icon .content {
  display: none;
  align-items: center;
  margin-inline-start: 0px;
  font-weight: 500;
  text-align: start;
}
.step.icon .v-stepper .icon {
  font-size: 18px;
  position: relative;
  margin-inline-start: 0px;
  padding: 4px;
  z-index: 1;
  font-weight: 500;
	width: 40px;
	height: 40px;
	border-radius: 40px;
	border: 1px solid;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-inline-end: 0px;
}
.step.icon .line {
  top: 24px;
}
/* regular step */
.step .circle {
  border: 1px solid;
  border-radius: 100%;
  width: 11px;    /* +6 for border */
  height: 11px;
  display: inline-block;
  margin-top: 1px;
}
.step .line {
  top: 16px;
	margin-inline-start: 19px;
/* height: 120px; */
  height: 100%;
  position: absolute;
  border-inline-start: 1px solid;
}
.step.completed .circle {
  visibility: visible;
  opacity: 1;
}
.step.completed .line {
  border-inline-start: 1px solid;
  opacity: 1;
}
.step.active .circle {
  visibility: visible;
  opacity: 1;
}
.step.empty .circle {
  visibility: hidden;
}
.step.empty .line {
/*  visibility: hidden; */
/*  height: 150%; */
  top: 0;
  height: 150%;
}
.step:last-child .line {
  border-inline-start: 3px solid;
  z-index: -10; /* behind the circle to completely hide */
  top: 24px;
	display: none;
}
.content {
  margin-inline-start: 14px;
  display: flex;
  align-items: baseline;
  font-size: 0.9em;
  font-weight: 500;
  text-align: start;
}
.step.active .content {
  color: inherit;
  opacity: 1;
}
.step.completed {
  opacity: 1;
}

@media (max-width: 1200px) {
  .wizard {
    padding-bottom: 40px;
  }
	.column-header-wizard {
		width: 100%;
		padding: 48px 24px 24px 30px!important;
	}
}

@media (max-width: 992px) {
	.column-header-wizard {
		width: 100%;
		padding: 48px 24px 24px 56px!important;
	}
}

@media (max-width: 576px) {

	.wizard {
		display: none;
	}

}