.list-flat {
	list-style: none;
	padding: 0;
	margin: 0;
}

.checkout-steps {
	border: 1px solid var(--primary);
	border-radius: .5rem;
	position: relative;
	width: 100%;
	padding: 0;
	margin: 0;
	counter-reset: checkout;
}

.checkout-steps ol,
.checkout-steps li {
	margin-bottom: 0;
}

.checkout-steps ol {
	display: flex;
	flex-wrap: wrap;
	flex: 0 0 100%;
	justify-content: space-between;
	margin: .5rem .5rem 0 .5rem;
	padding: 0;
}

.checkout-steps li {
	display: flex;
	flex-wrap: wrap;
	flex: 0 0 33.333333%;
	position: relative;
	margin: 0;
	padding: 0;
}

.checkout-steps li,
.checkout-steps li a {
	display: flex;
	align-items: center;
	text-align: left;
	color: var(--lighter);
	height: 1.70rem;
}

.checkout-steps li {
	padding-left: 2rem;
	margin-bottom: .5rem;
}

.checkout-steps li:before {
	counter-increment: checkout;
	content: counter(checkout);

	position: absolute;
	top: 0;
	margin-left: -2rem;
	border-radius: 50%;
	font-size: .88rem;

	display: flex;
	justify-content: center;
	align-items: center;
	width: 1.70rem;
	height: 1.70rem;

	background: var(--lighter);
	color: white;
}

.checkout-steps li.active:before {
	background: var(--secondary);
}
.checkout-steps li.active a {
	color: var(--tertiary) !important;
}

.checkout-steps li.current:before {
	background: var(--primary);
}
.checkout-steps li.current {
	font-weight: bold;
	color: var(--primary) !important;
}



@media ( min-width: 768px) {

	.checkout-steps ol {
		display: flex;
		margin: 3.125rem .5rem .5rem .5rem;
	}

	.checkout-steps li {
		flex: 0 0 15%;
		justify-content: center;
		margin-bottom: 0;
	}

	.checkout-steps li:before {
		counter-increment: checkout;
		content: counter(checkout);

		position: absolute;
		top: -2.25rem;
		margin-left: auto;
		/* margin-left: calc(50% - 0.875rem); */
		border-radius: 50%;
		font-size: .92rem;

		display: flex;
		justify-content: center;
		align-items: center;
		width: 1.75rem;
		height: 1.75rem;

		background: var(--lighter);
		color: white;
	}

	.checkout-steps li,
	.checkout-steps li a {
		width: 100%;
		text-align: center;
		height: auto;
		padding-left: 0;
	}

	.checkout-steps li a {
		display: block;
	}

}



/* ------------------------
	 CUSTOM FORM ELEMENTS

	 Usage:

	 <div class="[ custom-radio-checkbox-wrapper ]">
		<input class="input-state" type="radio/checkbox" />
		<label class="label d-inline-flex" for="">
			<div class="row">
				<div class="col-6">Label Text</div>
				<div class="col-6">
					<div class="d-flex align-items-center">
						<div>Value</div>
						<div class="custom-radio-button"></div>
					</div>
				</div>
			</div>
		</label>
	 </div>

	----------------------- */

.custom-radio-checkbox-wrapper {
	/* display: inline-block; */
	position: relative;
	margin: 0;
}

.input-state {
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0;
  pointer-events: none;
}

.label {
  /* display: inline-flex; */
  align-items: center;
  cursor: pointer;
	color: var(--secondary);
	margin-bottom: 0;
}

.text {
  margin-left: 16px;
  opacity: .6;
  transition: opacity .2s linear;
}

/* ----------- Custom radio-button ----------- */

.custom-checkbox,
.custom-radio-button {
	display: flex;
	align-items: center;
	flex-basis: 16px;
	flex-grow: 0;
	flex-shrink: 0;
	flex-wrap: nowrap;
	justify-content: center;
  position: relative;
  height: 16px;
  width: 16px;
	overflow: hidden;
	border: 1px solid var(--tertiary);
}

/* --- Inner area (circle, square), visible, when checked --- */
.custom-checkbox::after,
.custom-radio-button::after {
	content: '';
	position: relative;
	width: 10px;
	height: 10px;
	background-color: var(--primary);
	opacity: 0;
	transform: scale(0,0);
	transition: background-color .1s, transform .2s cubic-bezier(.36,1.18,.7,1.27);
}

.custom-radio-button,
.custom-radio-button::after {
  border-radius: 50%;
}

.input-state:checked ~ .label .custom-checkbox::after,
.input-state:checked ~ .label .custom-radio-button::after {
	opacity: 1;
	transform: scale(1,1);
}

/* --- end custom radio button --- */


.label:hover .text {
  opacity: 1;
}

.link-arrow-icon {
	position: relative;
	width: 24px;
	height: 24px;
	/* margin-left: .5rem; */
	color: var(--primary);
}