/** form resets **/

form input,
form select,
form textarea	{
	margin: 0;
	
}

form select {
	-webkit-appearance: none;
	-moz-appearance: none;
	padding: 8px;
	border-radius: 0;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: $dark-grey;
}
::-moz-placeholder { /* Firefox 19+ */
  color: $dark-grey;
}
:-ms-input-placeholder { /* IE 10+ */
  color: $dark-grey;
}
:-moz-placeholder { /* Firefox 18- */
  color: $dark-grey;
}

::disabled	{
	color: $dark-grey;
}

:focus,
:active {
	outline: none;
}


/** FORM CONTAINER **/

.form-container {
	/*box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.35);*/
	padding:20px;
	
	&.basic {
		padding: 0;
		box-shadow: none;
	}
	
	&.lt-grey-bg,
	&.bg-light-grey {
		p, label {
			color: $brand-dark;
		}
	}
	
	&.dark {
		p, label {
			color: #ffffff;
		}
	}
	
	&.no-padd {
		padding-left: 0;
		padding-right: 0;
		
		form {
			width: calc(100% - 20px);
			margin-left: -10px;
		}
	}
}

.form-container a:not('button') {
	color: $blue;
}


/** MARKETO FORM LAYOUT **/
body .mktoForm {
	width: 100% !important;
	margin: auto;
	padding: 0px 0;

	.mktoFormRow,
	.mktoFormCol {
		float: none;
		width: 100%;
	}
	
	.mktoFieldWrap,
	.mktoSelect {
		float: none;
		width: 100%;
		padding-left: 10px;
		padding-right: 10px;
	}
	
	.mktoSelect	{
		position: relative;
		width: 100%;
		
	}
	
	.mktoHasWidth {
		max-width: 100%;
		width: auto !important;
	}
	
	.mktoOffset,
	.mktoGutter {
		display: none;	
	}
	

}


@media (min-width: 576px) { 	
	body .mktoForm  {		
		.mktoFormRow,
		.mktoFormCol  {
			display: flex;
			justify-content: center;
			align-items: flex-start;
			min-height: auto;
		}
		
		.mktoFormRow .mktoFormCol {
			/*min-width: 250px;*/
			flex-wrap: wrap;
		}
	}
}



/* LABELS and RICHTEXT */

body .mktoForm {
	
	margin-top: 40px;
	
	fieldset {
		background: transparent;
		padding: 0 !important;
		border: none !important;
		
		legend { 
			padding: 0;
			margin: 0;
			font-size: 18px;
		}
	}
	
	.mktoRequiredField .mktoAsterix {
		display: none;
	}
			
	.mktoHtmlText {
		margin: 5px 0 0 0;	
		width: 100% !important;
		position: relative;
		padding: 0;
		font-size: 16px;
		font-family: $alt-font;	
		
		p {
			font-family: $alt-font;
			font-size: 16px;
		}
		
		.more-info {
			font-weight: $weight-semibold;
			text-align: center;
			padding-bottom: 10px;
		}
		
		a {
			padding: 0 !important;
		}
	}
	
		
	.mktoFieldWrap {
		position: relative;
		
		label {
			text-align: left;
			font-weight: $weight-normal !important;
			float: none;
			color: $brand-primary;
			line-height: 1;
			font-family: $brand-font;
			font-size: 14px;

		}
		
		:not(.mktoLogicalField) > label,
		:not(.mktoRadioList) > label {
			position: static;	
		}
		
	}	
}


/** INPUTS **/

body .mktoForm {
	input[type=text], 
	input[type=url], 
	input[type=email], 
	input[type=tel], 
	input[type=number], 
	input[type=date], 
	textarea.mktoField, 
	select.mktoField	{
		width: 100% !important;
		padding: 15px 10px;
		margin: 5px 0 15px 0;
		border:1px solid $darkest-grey;
		background-color: #ffffff;
		font-family: $brand-font;
		height: auto !important;
		color: $darkest-grey;	
		border-radius: 0px;
		font-size: 16px;
	}
	
	
	area:focus, 
	input:focus, 
	textarea:focus, 
	select:focus {
	  border: 1px solid $darkest-grey;
	  outline: none;
	  box-shadow: none;
	}

	/*dropdown arrow**/

	.mktoSelect:after {
	  content: "";
	  position: absolute;
	  pointer-events: none;
	  color: $darkest-grey;
	  content: "\25BC";
	  height: 1em;
	  font-size: 10px;
	  line-height: 1;
	  right: 20px;
	  top: 50%;
	
	}

	/** checkboxes **/	
	.mktoRadioContainer, 
	.mktoCheckboxContainer {
		
	}
	
	.mktoRadioList, 
	.mktoCheckboxList {
		padding: 0px;
	}
	
	.mktoRadioList,
	.mktoCheckboxPair {
		position: relative;
		
		input {
			font-size: 20px;
			height: 25px;
			margin: 0;
		}
		
		label {
			margin: 0;
			line-height: 25px;
			padding-left: 5px;
		}
	}
	
	.mktoCheckboxPair,
	.mktoRadioPair {
		padding-left: 30px;	
		margin: 5px 0;
		position: relative;
	}

	/* hover style just for information */
	label:hover:before {
	  border: 2px solid #4778d9!important;
	}

}


/** Form Buttons **/

body .mktoForm .mktoButtonRow {
	padding: 10px 15px;
    width: 100%;
    text-align: center;
	
	.mktoButtonWrap {
		margin:0 auto !important;
		display: block;
		width: 100%;
		text-align: center;
	}

	button.mktoButton	{
		color: #ffffff;	
		font-size: 16px;
	}	
}

/* error handling */

body .mktoForm .mktoError .mktoErrorArrowWrap	{
	position: relative;
	left: calc(50% - 8px);
	width: 30px;
	height: 10px;
	
	.mktoErrorArrow {
		border:none;
		background: #e03e03;
	}
}


body .mktoForm input.mktoInvalid,
body .mktoForm select.mktoInvalid,
body .mktoForm textarea.mktoInvalid	{
	 border: 1px solid #e03e03 !important;
}

body .mktoForm input.mktoValid,
body .mktoForm select.mktoValid,
body .mktoForm textarea.mktoValid	{
	
}

body .mktoForm .mktoError {
	background: none;
	top: calc(100% - 15px);
    bottom: 0 !important;
    right: 10px !important;
    left: 10px;
    min-width: calc(100% - 20px);
    width: fit-content;

	 .mktoErrorMsg	{
		margin: 0 auto;
		border:none;
		/*max-width: fit-content;*/
		padding: 5px 15px;
		border-radius: 1px;
		width: auto;
		text-align: center;
		background: #e03e03;
		box-shadow: none;
	    text-shadow: none;
	    position: relative;
	    z-index: 1;

		.mktoErrorDetail {
			text-align: center;
			color: #ffffff;
		}
	    
    }
}

/** BLOG NEWSLETTER **/

#blog-form {
	border:2px solid $orange;
	padding: 15px;
	
	form {
		padding: 0;
	}
	
	p {
		text-align: center;
	}
	
	button {
		font-size: .9rem;
	}
}

/** Dark background **/

body [class*="bg-dark"] .mktoForm {		
	
	input:-webkit-autofill,
	input:-webkit-autofill:hover, 
	input:-webkit-autofill:focus,
	input:-webkit-autofill:active,
	textarea:-webkit-autofill,
	textarea:-webkit-autofill:hover
	textarea:-webkit-autofill:focus,
	textarea:-webkit-autofill:active,
	select:-webkit-autofill,
	select:-webkit-autofill:hover,
	select:-webkit-autofill:focus,
	select:-webkit-autofill:active,
	input:-internal-autofill-previewed, 
	input:-internal-autofill-selected, 
	textarea:-internal-autofill-previewed, 
	textarea:-internal-autofill-selected, 
	select:-internal-autofill-previewed, 
	select:-internal-autofill-selected  {
		background-color: $purple !important;
		color: #ffffff !important;
		-webkit-text-fill-color: #ffffff !important;
		-webkit-box-shadow: 0 0 0px 1000px $purple inset !important;
	}
	
	input[type=text], 
	input[type=url], 
	input[type=email], 
	input[type=tel], 
	input[type=number], 
	input[type=date], 
	textarea.mktoField, 
	select.mktoField {
		border:1px solid $purple;
		background-color: $purple;
		color: #ffffff;
	}
	
	label {
		color: #ffffff;
	}
	
	area:focus, 
	input:focus, 
	textarea:focus, 
	select:focus {
	  border:1px solid $purple;
	}	
	
	.styled-select::before,
	.styled-select::after {

		color: #ffffff;
	}


}