/* Progressbar  */
.progressbar{
	margin: 3% 0%;
}

.progressbar>.container{
	width: 95%;
	display: flex;
	align-items: center;
	gap: 40px;
	flex-direction: row;
	flex-wrap: wrap;
	padding-top:8%;
}

.progressbar>.container .steps{
	display: flex;
	align-items: center;
	width: 100%;
	justify-content: space-between;
	position: relative;
}

.steps .circle{
	display: flex;
	align-items: center ;
	justify-content: center;
	color: black;
	font-size: 22px;
	font-weight: 500;
	height: 50px;
	width: 50px;
	border-radius: 50%;
	border: 2px solid black;
	background-color: white;
	transition: all 200ms ease;
	transition-delay: 0ms;
}

.steps .circle.active{
	transition-delay: 100ms;
	background-color: black;
	color: snow;
}

.steps .circle.active:hover{
	border-color: black;
	background-color: black;
	color: snow;
}

.done{
	color: snow !important;
}

.steps .circle.done{
	transition-delay: 100ms;
	border-color: #dd1776;
	background-color: #dd1776;
	color: snow !important;
}

.steps-wrapper{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-left: -13px;
}

.circle-text{
	margin: 0 auto;
  text-align: center;
	font-size: 12px;
	font-weight: bolder;
	font-family: 'Quicksand', sans-serif;
}

.steps .progress{
	position: absolute;
	height: 2px;
	width: 100%;
	background-color: #dd1776;
	z-index: -1;
	margin-top: -18px;
}


.progress .indicator{
	position: absolute;
	height: 100%;
	width: 0%;
	background-color: #dd1776;
	transition: all 300ms ease;
}


.progressbar>.container .buttons{
	display: flex;
	gap: 20px;
	margin: 0 auto;
}

/* Context */

.nuss_context{
	font-size: 18px;
	font-weight: bolder;
	font-family: 'Quicksand', sans-serif;
	color: black;
	padding: 1% 3%;
}

.nuss_context input,.nuss_context select{
	border: 2px black solid;
}

.form-check-input:checked{
	color: black;
	background-color: black;
	border-color: black;
}

.btn-flex-wrapper  {
	margin-top: 30px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	position: relative;
	margin-bottom: 20px;
	width: 100%;
}

.btn-flex-wrapper .nusswahn-btn {
	text-transform: initial;
}

.btn-flex-column {
  display: flex;
  flex-direction: column;
  margin-top: auto;
}



/* TETSETSETESTSTSTSET */ 


/* Responive Design */

@media only screen and (max-width: 768px) {

	.nuss_context{
		margin-top: 5%;
	}

	.progressbar{
		margin-top: 5%;
	}

	#customer-form > .form-group{
			margin: 4% 0%;
	}

	.circle-text{
		font-size: 12px;
	}

	.steps .circle{
		font-size: 18px;
		font-weight: 500;
		height: 40px;
		width: 40px;
		background-color: white;
		transition: all 200ms ease;
		transition-delay: 0ms;
	}

	#order-form, #payment-form {
	  min-height: 60vh;
	  display: flex;
	  flex-direction: column;
	  justify-content: space-between;
	}
	#payment-form{
	  min-height: 75vh;
	}

	#payment-form .form-check{
			margin: 4% 0%;
	}

	.btn-flex-wrapper{
		position: relative;
	}

	#order-form {
	  min-height: 55vh;
	  display: flex;
	  flex-direction: column;
	  justify-content: space-between;
	}



}