fieldset {
	display: flex;
	border: 0;
	margin: 0;
	padding: 0;
}

a.button,
input[type="button"],
input[type="submit"], 
button {
	display: inline-block;
	border: 0;
	border-radius: 4px;
	padding: 10px 28px;
	margin: 10px 0 10px 0;
	cursor: pointer;
	box-shadow: 0 1px 1px 0 rgba(0,0,0,.3);

	background-color: var(--color-lemon);
	color: #333;
}

a.button.button--lemon,
input[type="button"].button--lemon,
input[type="submit"].button--lemon, 
button.button--lemon {
	/* = default */
}

a.button.button--petrol,
input[type="button"].button--petrol,
input[type="submit"].button--petrol, 
button.button--petrol {	
	background-color: var(--color-petrol);
	color: white;
}

a.button.button--fullwidth,
input[type="button"].button--fullwidth,
input[type="submit"].button--fullwidth, 
button.button--fullwidth {
		width: 100%;		
		text-align: center;
}

a.button--icon-shoppingcart:before,
input[type="button"].button--icon-shoppingcart:before,
input[type="submit"].button--icon-shoppingcart:before, 
button.button--icon-shoppingcart:before {
    background-image: url('../assets/icons/shoppingcart.svg');
    background-size: 20px 20px;
    display: inline-block;
    width: 20px; 
    height: 20px;
    margin: -5px 5px -5px -5px;
    content:"";	
}

/* Needed because IBM Watson does not accept files with form and no real submit button */
input[type="button"].button--hidden,
input[type="submit"].button--hidden, 
button.button--hidden {
	display: none; 
}

select {
	margin-top: 3px;
}

select,
input[type="text"],
input[type="email"],
input[type="phone"] {
	width: 100%;
	border: none;	
	border-bottom: 1px solid var(--color-lemon);
	border-radius: 0;
	margin-bottom: 1px; /* preserve space for focussed state where border increases */
	background-color: transparent;
	-webkit-appearance: none;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
	border-bottom: 2px solid var(--color-lemon);
	margin-bottom: 0;
}

select.invalid,
input[type="text"].invalid,
input[type="email"].invalid,
input[type="phone"].invalid {
	border-bottom: 2px solid red;
	background-color: rgba(255, 0, 0, 0.1);
}

label { 
	opacity: 0; 
    transition: opacity 0.5s ease-in-out;	
}

label.label--not-hidden {
	opacity: 1;
}

label.label--block {
	display: block;
	margin-top: -18px;
	margin-left: 28px;
}

form .row { margin-top: 10px; margin-bottom: 10px;}

#form {
	opacity: 1;
	transition: all 1s;	
}

#form.sent {
	opacity: 0;
}

#formResult {
	opacity: 0;
	transition: all 1s;	
}

#formResult.sent {
	opacity: 1;
}


#formLayer {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: scroll;
	z-index: 1000;
	background-color: white;
	display: none;
}

.formModeOrder #boxSmallCompanies  { display: block; }
.formModeOrder #form__submit_order { display: block; }

.formModeOrder #boxBigCompanies    { display: none;  }
.formModeOrder #form__submit_offer { display: none;  }


.formModeOffer #boxBigCompanies    { display: block; }
.formModeOffer #form__submit_offer { display: block; }

.formModeOffer #boxSmallCompanies  { display: none;  }
.formModeOffer #form__submit_order { display: none;  }



#overviewLayer {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: scroll;
	z-index: 1001;
	background-color: white;
	display: none;
}

#overviewLayer th, td { padding: 4px; } 
#overviewLayer th { text-align: left; }


.closeLayer {
	position: absolute;
	left: 17px;
	top: 15px;
	width: 32px;
	height: 32px;
	font-size: 32px;
	color: gray;
	margin: 0;
	padding: 0;
	cursor: pointer;
}


#user {
	display: none;
}

#user.active {
	display: block;
}

#billingAdress {
	display: none;
}

#billingAdress.active {
	display: block;
}





/* LG */
@media only screen and (min-width: 75em) {
}

/* MD */
@media only screen and (min-width: 64em) {
}

/* SM */
@media only screen and (min-width: 48em) {
}   

/* XS */
@media only screen and (max-width: 48em) {
	a.button,
	input[type="button"],
	input[type="submit"], 
	button {
		width: 100%;		
		padding: 10px 0;
		margin: 10px 0 10px 0;
		text-align: center;
	}	
	a.button.button--halfwidth,
	input[type="button"].button--halfwidth,
	input[type="submit"].button--halfwidth, 
	button.button--halfwidth {
		width: 76%;
	}	
}