body { position: relative; }

.qn-orderforms-wrapper{	display: flex;}

.form-info-txt {

	font-weight: 100; 
	font-style: italic; 
	font-size: .875rem; 
	margin: 0 0 15px 0; 
	padding: 0 20px

}

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

	.qn-orderforms-wrapper{
		display: flex;
		flex-direction: column;
	}
}

.form-box-container{

	border: solid 1px black;
	border-radius: 10px;
	margin-bottom: 10px;
	padding:  10px;

}

.qn-order-forms-2021 input+.error {	color: red; }

.qn-orderforms-2021-left-column{

	display: flex;
	flex-direction: column;
	flex-basis: 50%;
	margin-right: 20px;
}

.qn-orderforms-2021-right-column{

	display: flex;
	flex-direction: column;
	flex-basis: 50%;

}

.produkt-hastighet-container{

	display: flex;
	flex-direction: column;

}
.summation{
	display: flex;
	flex-direction: column;
	padding: 1em 2em;
    background-color: #fff;
    border-radius: 10px;
}

.order__price-labels{
	border-bottom: 1px solid #ccc;
    margin-bottom: 10px;
    padding-bottom: 10px;

}

.order__price-labels, .order__prices{
	display: flex;
	justify-content: space-between;
		
}
.order__price-labels > div{

	flex: 1;
	text-align: right;

}
.order__prices > h4{

	flex: 1;
	text-align: right;

}
.order__prices > h4:first-child{

	flex: 1;
	text-align: left;

}

.order-button-container{

	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

}

.user-agree-wrapper { padding: 1rem 0 0 0; }

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

	.orderform-select { max-width: 100%; }

}
.orderform-select{
	margin-bottom: 1em;
	min-width: 100%;
	padding: 10px;
	background-color: #FAFAFA;
}
#ort option { background-color: #FAFAFA; }
.form-group { margin: 5px 0; }

.form-group span.info { font-size: 14px; margin-left: 25px; }
.form-group .field-group input[type="radio"] {
	margin-bottom: 0px;
}

.form-group input[type="text"], input[type="email"], input[type="tel"], input[type="date"], textarea{
	display:block;
	min-width: 100%;
	
}

.order-confirmation{

	width: 100%;
	height: 100%;
	border: 1px solid black;
	border-radius: 20px;
	padding: 20px;
	box-shadow: 1px 1px 0px 0px black;
	text-align: center;
}

.order-confirmation ul{
	list-style-type: none;
	padding: 0px;
	margin: 0px;
}

.qnoferror{

	display: flex;
	padding: 10px;
	background-color: #fafafa;
	border-radius: 10px;
	margin-bottom: 10px;

}

.qnvalidationerrors {

	display: flex;
	padding: 10px;
	background-color: #fafafa;
	border-radius: 10px;
	margin-bottom: 10px;
	color:red;

}

.qnvalidationerrors ul{
	list-style-type: none;
}

.error-modal-container{

	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	
	border-radius: 2px;
	box-shadow: 1px 2px 10px 0px rgba(0,0,0,0.3);
	overflow: hidden;
	background: rgba(0,0,0,0.5);
	z-index: 999;
}

.error-modal{

	position: fixed;
	width: 450px;
	height: 250px;
	top: 95px;
	left: 60px;
	background: #fff;
	border-radius: 3px;
	box-shadow: 4px 8px 12px 0 rgba(0,0,0,0.4);
	text-align: center;
	overflow: hidden;
	-webkit-animation: show-modal .7s ease-in-out;
	animation: show-modal .7s ease-in-out;
	left:50%;
	top:60%;
	margin-left:-250px;
	margin-top:-250px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 16px;
	padding: 16px;
}

/* .error-modal-container.hide { } */

.error-modal i{
	font-size: 30px;
}

.error-modal h2{
	display: block;
	font-size: 18px;
	line-height: 24px;
	font-weight: 400;
	margin: 0;
}

.error-modal p{
	font-size: 14px;
	font-weight: 300;
	line-height: 19px;
	margin: 0;
	padding: 0;
}

.error-modal .dismiss{
	position: relative;
	height: fit-content;
	width: fit-content;
	min-width: 50%;
	bottom: 0;
	left: 0;
	right: 0;
	background: #F65656;
	border:none;
	color: #fff;
	line-height: normal;
	font-size: 14px;
	font-weight: bold;
	cursor: pointer;
	transition: background .3s ease-in-out;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 16px;
}

.dismiss:hover { background: #EC3434; }

@-webkit-keyframes show-modal {
	0% { transform: scale(0); }
	60% { transform: scale(1.1); }
	80% { transform: scale(.95); }
	100% { transform: scale(1);	}
}

@keyframes show-modal {
	0% { transform: scale(0); }
	60% { transform: scale(1.1); }
	80% { transform: scale(.95); }
	100% { transform: scale(1);	}
}