/*! -- Stack Forms -- */

@media screen and (-webkit-min-device-pixel-ratio:0) { 
  select,
  textarea,
  input {
    font-size: 16px;
  }
}

form:before,form:after{
	content: '';
}

.bg--dark,.imagebg:not(.image--light){
	input,textarea, select, .input-select:after{
		color: @color-body;
	}
	label{
		color: #fff;
	}
}

.bg--dark{
	form.attempted-submit{
		input.field-error{
			background: #D84D4D;
			color: #fff;
		}
	}
}

form{
	position: relative;
	>div[class*='col-'],>.row > div[class*='col-']{
		&:not(:last-child){
			margin-bottom: @base-line-height/2;
		}
	}
	.boxed{
		&:last-child{
			margin: 0;
		}
	}
	&.form--clearfix{
		margin-left: -15px;
	}
}

@media all and (min-width: 768px){
	div[class*='col-']{
		>form{
			div[class*='col-']{
				&:last-child{
					&:nth-child(2){
						padding-right: 0;
					}
				}
				&:first-child{
					&:nth-last-child(2){
						padding-left: 0;
					}
				}
			}
		}
	}
	form{
		&.form--horizontal{
			>div[class*='col-']{
				margin: 0;
			}	
		}
	}
}

@media all and (max-width: 767px){
	.row{
		form{
			> .row{
				margin-left: 0;
				margin-right: 0;
			}
		}
	}
}

h2+form,.h2+form{
	margin-top: @base-line-height*1.5;
}

h3+form,.h3+form,.lead+form{
	margin-top: @base-line-height*1.5;
}

.cover{
	.lead+form{
		margin-top: @base-line-height*2;
	}
}

form{
	+span.type--fine-print{
		margin-top: 1.08333333333334em;
		display: inline-block;
	}
}

.form--inline{
	>span.h4{
		color: @color-body;
	}
	input,[class*='input-']{
		display: inline-block;
		max-width: 200px;
	}
	>span,input,[class*='input-']{
		&:not(:last-child){
			margin-right: @base-line-height/2;
		}
	}
	button{
		max-width: 200px;
	}
}

.bg--dark,.imagebg:not(.image--light){
	.form--inline{
		>span.h4{
			color: #fff;
		}
	}
}

button, input[type="submit"]{
	&.btn{
		font-size: @h6-size;
		font-weight: 700;
		padding-left: 0;
		padding-right: 0;
		&.btn--primary{
			color: #fff;
		}
		&.type--uppercase{
			letter-spacing: .5px;
			margin-right: -.5px;
		}
	}
	height: 3.25000000000001em;
	&.checkmark{
		&.checkmark--cross{
			width: @base-line-height;
			height: @base-line-height;
			border: none;
			background: @color-error;
			&:before{
				content: '\00d7';
				font-size: 18px;
				top: -1px;
			}
		}
	}
	&[type="submit"]{
		&.btn--loading{
			&:after{
				background: @color-primary;
			}
		}
	}
}

.bg--primary{
	button{
		&.btn{
			border-color: rgba(255,255,255,.5);
			color: #fff;
			&:hover{
				border-color: #fff;
			}
			&.btn--primary{
				color: @color-primary;
				border-color: @color-primary;
			}
			&.btn--primary-1{
				border-color: @color-primary-1;
			}
		}
	}
}

input,select{
	height: @base-line-height*1.5;
}

input{
	&.field-error{
		border-color: #EBA8A8;
	}
	&[type]{
		+input[type],+.input-checkbox,+button,+.input-select{
			margin-top: @base-line-height/2;
		}
	}
}

input,[class*='input-'] label,select,textarea{
	.transition(0.3s,ease);
}

input,select,.input-select,textarea,button[type="submit"]{
	&:not([class*='col-']){
		width: 100%;
	}
}

input[type],select,textarea{
	padding-left: @base-line-height/2;
	&:focus{
		border-color: lighten(@color-primary, 10%);	
	}
}

input[type="image"]{
	border: none;
	padding: none;
	width: auto;
}

label{
	font-size: .85714286em;
}

.bg--primary, .bg--primary-1{
	label{
		color: #fff;
	}
}

.input-icon{
	i{
		top: 8px;
		left: 8px;
	}
	input{
		padding-left: @base-line-height*1.5;
	}
	&.input-icon--right{
		i{
			left: auto;
			right: 8px;
		}
		input{
			padding-right: @base-line-height*1.5;
			padding-left: .92857143em;
		}
	}
}

.text-center{
	.input-checkbox, .input-radio{
		label{
			margin: 0 auto;
		}
	}
}

.input-checkbox label, .input-radio label{
	font-size: 1em;
}

.input-checkbox{
	margin-top: @base-line-height/4;
	&.field-error{
		label{
			border-color: #EBA8A8;
		}
	}
	label{
		background: none;
		border: 1px solid #d3d3d3;
		text-align: center;
		position: relative;
		&:not(:last-child){
			margin-right: @base-line-height/4;
		}
		&:hover{
			border-color: @color-primary;
		}
		&:before{
			content: '';
			left: 0;
			border-radius: 6px;
			position: absolute;
			width: 100%;
			height: 100%;
			border: 1px solid @color-primary;
			opacity: 0;
			.transition(0.3s,ease);
		}
	}
	input:checked{
		+ label{
			border-color: @color-primary;
			background: @color-primary;
			&:after{
				content: 'L';
				transform: rotateY(180deg) rotateZ(-45deg);
				color: #fff;
				position: absolute;
				width: 100%;
				left: 0;
				top: -2px;
				font-weight: 700;
			}
			&:before{
				animation: pulse .45s ease forwards;
				-webkit-animation: pulse .45s ease forwards;
			}
		}
	}
	+span{
		display: inline-block;
		position: relative;
		bottom: 10px;
		margin-left: @base-line-height/2;
		font-size: @fine-print-size;
		white-space: nowrap;
	}
}

.input-checkbox{
	+button[type]{
		margin-top: @base-line-height/2;
	}
	+span+button[type]{
		margin-top: @base-line-height/2;
	}
}

.bg--dark{
	.input-checkbox{
		&:not(.checked){
			label{
				border-color: lighten(@color-dark, 50%);
			}
		}
		+span{
			opacity: .75;
		}
	}
}

.input-checkbox.input-checkbox--switch{
	label{
		width: @base-line-height*2;
		border-radius: 60px;
		&:before{
			width: 20px;
			height: 20px;
			border-radius: 50%;
			border-color: #d3d3d3;
			opacity: 1;
			left: 2px;
			top: 2px;
		}
		&:hover{
			&:before{
				border-color: @color-primary;
			}
		}
	}
	input:checked{
		+ label{
			background: none;
			&:before{
				animation: none !important;
				background: @color-primary;
				border-color: @color-primary;
				transform: translateX(@base-line-height);
			}
			&:after{
				display: none;
			}
		}
	}
}

.input-radio{
	&.field-error{
		label{
			border-color: #EBA8A8;
		}
	}
	.input__label{
		font-size: .85714286em;
		display: inline-block;
		+ label{
			margin-top: @base-line-height/2;
		}
	}
	label{
		position: relative;
		background: none;
		border: 1px solid #d3d3d3;
		&:hover{
			border-color: @color-primary;
		}
		&:before{
			content: '';
			position: absolute;
			width: 100%;
			height: 100%;
			border-radius: 50%;
			border: 1px solid @color-primary;
			.transition(0.3s,ease);
			opacity: 0;
			left: 0;
		}
	}
	input:checked{
		+ label{
			border-color: @color-primary;
			background-color: @color-primary;
			&:after{
				content: '';
				position: absolute;
				width: 10px;
				height: 10px;
				left: 7px;
				top: 7px;
				background-color: #fff;
				border-radius: 50%;
			}
			&:before{
				animation: pulse .4s ease forwards;
			}
		}
	}
}

.input-radio--innerlabel{
	label{
		transition: all .3s ease;
		height: @base-line-height*1.5;
		line-height: @base-line-height*1.35;
		padding: 0 @base-line-height/2;
		border: 1px solid #ececec;
		border-radius: 6px;
		cursor: pointer;
		width: 100%;
		text-align: center;
	}
	&:hover{
		border-color: @color-primary;
	}
	input:checked{
		+label{
			border-color: @color-primary;
			background: @color-primary;
			color: #fff;
			&:after{
				display: none;
			}
			&:before{
				animation: none;
			}
		}
	}
}

@media all and (max-width: 1024px){
	.input-radio input:checked + label:after{
		top: 6px;
		left: 6px;
	}
}

.bg--primary{
	.input-radio--innerlabel{
		border-color: lighten(@color-primary, 10%);
		&:hover{
			border-color: #fff;
		}
		&.checked{
			background: #fff;
			border-color: #fff;
			label{
				color: @color-primary;
			}
		}
	}
}

.bg--primary-1{
	.input-radio--innerlabel{
		border-color: lighten(@color-primary-1, 10%);
		&:hover{
			border-color: #fff;
		}
		&.checked{
			background: #fff;
			border-color: #fff;
			label{
				color: @color-primary-1;
			}
		}
	}
}

.input-select{
	select{
		-moz-appearance: none;
		-webkit-appearance: none;
	}
	select::-ms-expand{
		display:none;
	}
	&:not(:last-child){
		margin-bottom: @base-line-height/2;
	}
	position: relative;
	&:after{
		position: absolute;
		right: 0;
		height: 100%;
		top: 0;
		font-size: 30px;
		content: '\2263';
		pointer-events: none;
		padding:0 13px;
		border-left: 1px solid #ececec;
		line-height: 31px;
	}
	&.input-select--borderless{
		&:after{
			border-left: none;
		}
	}
	&:focus{
		&:after{
			border-color: @color-primary;
		}
	}
	select{
		&:focus{
			border-color: @color-primary;
		}
	}
}

.input-number{
	position: relative;
	> input[type="number"]{
		padding-left: .46428571em;
		&::-webkit-inner-spin-button{
			display: none;
		}
		-moz-appearance: textfield;
		width: 100%;
		text-align: center;
	}
	.input-number__controls{
		position: absolute;
		height: 100%;
		width: 100%;
		right: 0;
		top: 0;
		padding: 0 @base-line-height/2;
		> span{
			position: absolute;
			display: block;
			width: 10%;
			min-width: @base-line-height*2;
			height: 100%;
			cursor: pointer;
			-webkit-user-select: none;
			user-select: none;
			text-align: center;
			padding-top: 6px;
			transition: all .3s ease;
			&:hover{
				color: @color-primary;
			}
		}
		.input-number__increase{
			right: 0;
			border-left: 1px solid #ececec;
		}
		.input-number__decrease{
			left: 0;
			border-right: 1px solid #ececec;
		}
	}
}

input[type="image"]{
  padding: 0;
  width: auto;
  border:  none;
}

/*! -- Stack Subscribe Forms -- */

.subscribe-form-1{
	h3{
		margin-bottom: 0.52em;
	}
	&.boxed{
		form{
			margin: @base-line-height;
		}
	}
}

// Desktop
@media all and (min-width: 991px){
	.subscribe-form-2{
		p{
			top: 2px;
			position: relative;
		}
		input{
			margin: 0;
		}
		form{
			[class*='col-']{
				margin: 0 !important;
			}
		}
	}
}

// Mobile
@media all and (max-width: 990px){
	.subscribe-form-2{
		text-align: center;
		form{
			margin-top: @base-line-height
		}
	}
}

/*! -- Stack Elaborate Forms -- */

@media all and (max-width: 767px){
	.elaborate-form-1{
		.pos-vertical-center{
			padding-left: 15px;
			padding-right: 15px;
		}
		form{
			.col-xs-6:nth-child(even){
				padding-left: 15px;
			}
			.col-xs-6:nth-child(odd){
				padding-right: 15px;
			}
		}
		.row form > .row{
			margin-left: -15px;
			margin-right: -15px;
		}
	}
}

/* Stack Boxed Forms */

.boxed-form{
	h4{
		margin-bottom: 0.684210526315789em;
	}
	&:last-child{
		margin-bottom: 0;
	}
}

/* Stack Datepicker Form */

.datepicker{
	cursor: pointer;
	&.datepicker--fluid{
		+.picker{
			max-width: none;
		}
	}
}

.picker{
	transition: all .3s ease;
	z-index: 10;
	max-width: 100%;
	-webkit-transition: all .3s ease;
	margin-top: @base-line-height/4;
	position: absolute;
	background: @color-bg-site;
	border: 1px solid #ececec;
	border-radius: 6px;
	padding: @base-line-height/2;
	.box-shadow-wide;
	.picker__header{
		text-align: center;
		margin-bottom: @base-line-height/2;
		> div{
			font-weight: 600;
			display: inline-block;
			color: @color-dark;
			&:not(:last-child){
				margin-right: @base-line-height/4;
			}
		}
		.picker__nav--prev, .picker__nav--next{
			height: 10px;
			width: 10px;
			cursor: pointer;
			&:after{
				font-family: 'stack-interface';
			}
		}
		.picker__nav--next{
			float: right;
			&:after{
				content: '\e80c';
			}
		}
		.picker__nav--prev{
			float: left;
			&:after{
				content: '\e80b';
			}
		}
	}
	.picker__day{
		transition: all .3s ease;
		cursor: pointer;
		&.picker__day--highlighted{
			color: @color-primary;
			font-weight: 600;
		}
		&:hover{
			color: @color-primary;
		}
	}
	&:not(.picker--opened){
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: scale(0);
	}
	.picker__holder{
		outline: none !important;
		border: none !important;
	}
	table{
		td{
			padding: @base-line-height/4;
			padding-top: 0;
		}
	}
	.picker__footer{
		text-align: center;
	}
	.picker__button--today{
		float: left;
	}
	.picker__button--close{
		float: right;
	}
	button{
		transition: all .3s ease;
		height: auto;
		border: none;
		display: inline-block;
		&:not(:hover){
			opacity: .5;
		}
	}
}

/* Stack Horizontal Forms */

.form-horizontal{
	display: flex;
	> div[class*='col-'], >div[class*='col-']:not(:last-child){
		margin-bottom: 0;
		display: flex;
		align-items: flex-end;
		flex-wrap: wrap;
	}
	.picker{
		top: 100%;
	}
}

@media all and (max-width: 990px){
	.form-horizontal{
		display: block;
	}
	label{
		margin-top: @base-line-height/4;
	}
	button{
		margin-top: @base-line-height;
	}
}