:root {
	--brand-primary: #027f00;
	--white: #fff;
	--grey-light: #e1e1e1;
	--orange-light: #FFB732;
	--smooth: cubic-bezier(0, 0.72, 0.58, 1);
}

.remain-steps:before {
	content: counter(stepNum);
	font-family: inherit;
	font-weight: 700;
}

.remain-steps:after {
	background-color: var(--grey-light);
}

.multi-steps {
	display: table;
	table-layout: fixed;
	width: 100%;
}

.multi-steps>li {
	counter-increment: stepNum;
	text-align: center;
	display: table-cell;
	position: relative;
	color: var(--brand-primary);
}

.multi-steps>li:before {
	content: counter(stepNum);
	display: block;
	margin: 0 auto 4px;
	background-color: var(--brand-primary);
	width: 36px;
	height: 36px;
	line-height: 32px;
	text-align: center;
	font-weight: bold;
	border: 2px solid var(--brand-primary);
	border-radius: 50%;
	color: white;
}

.multi-steps>li:last-child:after {
	display: none;
}

.multi-steps>li.is-active:before {
	background-color: var(--white);
	border-color: var(--brand-primary);
	color: var(--brand-primary);
	animation: pulse 1s infinite;
}

.multi-steps>li.is-active~li {
	color: #808080;
}

.multi-steps>li.is-active~li:before {
	background-color: var(--grey-light);
	border-color: var(--grey-light);
	color: #808080;
}

.is-complete {
	background: linear-gradient(to right, var(--brand-primary) 50%, var(--grey-light) 50%);
	background-size: 200% 100%;
	background-position: right bottom;
	transition: all 0.5s ease-out;
}

@keyframes pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(2, 127, 0, 0.44);
	}

	100% {
		box-shadow: 0 0 0 10px rgba(2, 127, 0, 0);
	}
}

@keyframes nextStep {
	0% {
		width: 0%;
	}

	100% {
		width: 100%;
	}
}

/* just for demo purposes */
.progress-bar {
	cursor: pointer;
	user-select: none;
}

.progress-bar {
	background-color: var(--grey-light);
	height: 7px;
	overflow: hidden;
	position: absolute;
	left: 50%;
	bottom: calc(50% + 20px);
	width: 100%;
	z-index: -1;
}

.progress-bar--success {
	background-color: var(--brand-primary);
}

.progress-bar__bar {
	background-color: var(--grey-light);
	bottom: 0;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;

}



/* Style for disabled inputs */
form[disabled] input {
	pointer-events: none;
	/* Disable mouse events */
	background-color: #f4f4f4;
	/* Change background color to visually indicate disabled state */
	color: #999;
	/* Change text color to visually indicate disabled state */
}


@media print {
 @page {
  size: A4;
  
}


.container {
	border: none ! important;
}

.shadow {
	box-shadow: none ! important;
}
 
}