/******************** Form ********************/

form {}

legend {}

label {
    width: 100%;
    line-height: 1.5em;
    display: block;
}

input[type="text"],
input[type="password"],
input[type="select"],
input[type="search"],
button {
    display: block;
    cursor: text;
    @include fontFace($amaqMedium);
}

input[type="radio"] {
    margin: 0 4px 3px 1px;
}

input[type="checkbox"] {
    margin: 0 4px 3px 1px;
}

input[type="file"] {
    margin: 0px 6px 3px 6px;
}

input[type="radio"],
input[type="checkbox"],
input[type="file"],
input[type="text"],
input[type="email"],
input[type="password"],
input[type="select"],
input[type="search"],
input[type="submit"],
input[type="reset"],
input[type="button"],
textarea {
    font: normal 100%/140% $amaqMedium;
    cursor: pointer;
	-webkit-border-radius: 0;
	outline: none;
	&:hover, &:focus { outline: none; box-shadow: none; }
}

input[type="text"],
input[type="email"],
input[type="password"],
textarea {
    cursor: text;
}

select {
    /*display: block;*/
    margin: 0px;
	outline: none;
	&:hover, &:focus { outline: none; box-shadow: none; }
}

textarea {
    width: 99%;
    line-height: 1.5em;
    display: block;
    clear: left;
    overflow: auto;
    @include fontFace($amaqMedium);
}

label {
    cursor: pointer;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
    -webkit-border-radius: 0;
}

//forms
.formBlock {
	@include clearfix;
	@extend .row;
	[class^="fw"] { 
		line-height: 38px;
		position: relative; 
		@include clearfix; 
	}
	label {
		@include fontFace($amaqMedium);
		@include fontSize(16);
		@include lineHeight(38, 16);
		height: 38px;
  		color: #c3c5ff;
  		border-bottom: $blue 1px solid;
  		display: block;
  		margin-bottom: 0;
  		@include transition($transition-base);
	}
	input[type="text"], input[type="number"], input[type="email"] {
		@include fontSize(16);
		height: 38px;
		color: #fff !important;
		background: none;
		border: none;
		border-radius: 0;
		width: 100%;
		border-bottom: $blue 1px solid;
		display: block;
		float: left;
		-webkit-appearance: none;
	    -moz-appearance: none;
	    text-indent: 1px;
	    text-overflow: '';
		// box-shadow: 0 0 0 0 $white inset;
		@include transition($transition-base);
		&:hover {
			border-bottom-color: $white !important;
			outline: none; box-shadow: none;
		}
		&:focus {
			border-bottom-color: $white !important;
			border-bottom-width: 2px;
			outline: none; box-shadow: none;
		}
		&.datePicker {
			background: transparent url('/assets/img/svg/calendar-icon.svg') no-repeat right center;	
		}
	}
	select {
		@include fontSize(16);
		height: 38px;
		color: #fff;
		background: none;
		border: none;
		width: 100%;
		border-bottom: $blue 1px solid;
		border-radius: none;
		display: block;
		float: left;
		background: transparent url('/assets/img/icons/select-arrow-def.png') no-repeat right center;
		// box-shadow: 0 0 0 0 $white inset;
		@include transition($transition-base);
		
		-webkit-appearance: none;
	    -moz-appearance: none;
	    text-indent: 1px;
	    text-overflow: '';
	    &::-ms-expand {
		    display: none;
		}

		&:hover {
			border-bottom-color: $white !important;
			outline: none; box-shadow: none;
		}
		&:focus {
			border-bottom-color: $white !important;
			border-bottom-width: 2px;
			outline: none; box-shadow: none;
		}

		option { background: $purple; color: $white; }
	}
	textarea {
		@include fontSize(16);
		height: 161px;
		color: #fff !important;
		background: #5950d9;
		border: none;
		width: 100%;
		border-bottom: $blue 1px solid;
		border-radius: 5px 5px 0 0;
		display: block;
		float: left;
		-webkit-appearance: none;
	    -moz-appearance: none;
	    text-indent: 1px;
	    text-overflow: '';
		// box-shadow: 0 0 0 0 $white inset;
		@include transition($transition-base);
		&:hover {
			background: #5950d9;
			border-bottom-color: $white !important;
			outline: none; box-shadow: none;
		}
		&:focus {
			background: #5950d9;
			border-bottom-color: $white !important;
			border-bottom-width: 2px;
			outline: none; box-shadow: none;
		}
	}
	input[type="submit"] {
		@include fontFace($amaqMedium);
		@include fontSize(16);
		@include lineHeight(38, 16);
		color: #fff;
		background: transparent;
		border: none;
		padding: 0 10px;
		float: right;
	}
	.submit button {
		float: right;
	}
	.submit button.btn-form {
		@include fontFace($amaqMedium);
		@include fontSize(16);
		@include lineHeight(38, 16);
		color: #fff;
		background: transparent;
		border: none;
		padding: 0 10px;
		margin: 0 0 0 40px;
		float: right;
		position: relative;
		&:after, &:before {
			content: ""; display: block;
			height: 4px; position: absolute;
			left: 0; bottom: 0;
			border-radius: 2px;
			@include transition($transition-pozition);
		}
		&:after {
			width: 50%;
			background: $yellow;
		}
		&:before {
			width: 100%;
			background: $green;
		}
		&:hover {
			&:after { left: 50%; }
		}
	}


	//custom checkbox
	// input[type="checkbox"] { display: none; }
	// label.check { 
	// 	@include fontFace($amaqMedium);
	// 	@include fontSize(16);
	// 	@include lineHeight(38, 16);
	// 	height: 38px; color: #fff;
	// 	padding: 0 0 0 35px;
  		
 //  		&:after { 
	// 		content: ""; width: 30px; height: 30px; /* display: none; */
	// 		position: absolute; left: 0px; top: 4px; border-radius: 50%;
	// 		background: rgba(0,215,160,.25);
	// 		box-shadow: 0 0 0 0 rgba(255, 80, 85, 0) inset, 0 0 0 0 rgba(105,95,255,0) inset, 0 0 0 0 rgba(255,80,85,0) inset, 0 0 0 0 rgba(105,95,255,0) inset, 0 0 0 0 rgba(255,80,85,0) inset; 
	// 		@include transition($transition-shadow);
	// 	}
	// }
	// input[type="checkbox"]:checked + label:after { 
	// 	/* display: block;  */
	// 	box-shadow: 0 0 0 3px rgba(255, 80, 85, 0.2) inset, 0 0 0 5px rgba(105,95,255,1) inset, 0 0 0 8px rgba(255, 80, 85, 0.6) inset, 0 0 0 10px rgba(105,95,255,1) inset, 0 0 0 15px rgba(255,80,85,1) inset; 
	// }
	input[type="checkbox"] { display: none; }
	input[type="checkbox"] + label.check {
		position: relative; display: inline-block;
		padding: 0 0 0 30px;
		&:before, &:after {
			content: ""; display: block;
			position: absolute;
			@include transition($transition-base);
		}
		&:before {
			width: 18px; height: 18px;
			border-radius: 3px;
			background-color: $purple;
			box-shadow: 0 0 0 2px #3e3894 inset;
			left: 0; top: 8px;
		}
		&:after {
			// @include svg-sprite($check-small-icon-svg);
			left: 4px; top: 13px;
			opacity: 0;
		}
	}
	input[type="checkbox"]:checked + label.check {
		&:before { box-shadow: 0 0 0 2px #23d7a1 inset; }
		&:after { opacity: 1; }
	}

	//custom radio button
	input[type="radio"] { display: none; }
	label.radio { 
		@include fontFace($amaqMedium);
		@include fontSize(16);
		@include lineHeight(38, 16);
		height: 38px; color: #fff;
		padding: 0 0 0 28px;
  		
  		&:after { 
			content: ""; width: 18px; height: 18px; /* display: none; */
			position: absolute; left: 0px; top: 9px; border-radius: 50%;
			background-color: #fff;
			box-shadow: 0 0 0 2px #3e3796 inset, 0 0 0 10px #695fff inset; 
			@include transition($transition-shadow);
		}
	}
	input[type="radio"]:checked + label:after { 
		/* display: block;  */
		box-shadow: 0 0 0 2px #00fafa inset, 0 0 0 5px #695fff inset; 
	}

	//error 
	.errorBlock {
		background-color: #ff5055;
		color: #fff;
		border-radius: 10px;
	}
}

.activeFormBlock .formBlock {
	label,
	input[type="text"], 
	input[type="number"],
	input[type="email"] {
		color: $turq;
		border-bottom: $turq 1px solid;
	}
}

dl.formBlock {
	@include clearfix;
	@extend .row;
	margin-block-start: 0;
	margin-block-end: 0;
	dt {
		@extend .col-sm-12;
		@extend .col-md-4;
		padding-right: 0;
		margin: 0;
	}
	dd {
		@extend .col-sm-12;
		@extend .col-md-8;
		padding-left: 0;
		margin: 0;
		&.submit { @extend .col-md-12; }
	}
	.fw { margin: 0 0 40px 0; }
	.fw2 { margin: 0 0 0 0; }
}

ul.formBlock {
	@include clearfix;
	@extend .row;
	@extend .list-unstyled; 
	margin-block-start: 0;
	margin-block-end: 0;
	li {
		@extend .col-sm-12;
		@extend .col-md-6;
		// padding-left: 0;
		margin: 0;
		position: relative;
		&.submit { @extend .col-md-12; }
	}
	&.fullWidth li { @extend .col-md-12; }
	.fw { margin: 0 0 33px 0; }
	.fw2 { margin: 0 0 0 0; }
	.fw3 { margin: 10px 0 10px 0; }
	label {
		border: none;
		color: $turq;
	}
	input[type="text"], 
	input[type="number"],
	input[type="email"], 
	select,
	textarea {
		border-bottom-color: $turq;
	}
	input[type="text"] + label, 
	input[type="email"] + label, 
	input[type="number"] + label,
	select + label {
		position: absolute;
		left: 0; bottom: 28px;
		@include transition($transition-base);
		// background-color: #3e3894;
	}
	input[type="text"]:hover + label, 
	input[type="email"]:hover + label, 
	input[type="number"]:hover + label {
		// background-color: #23d7a1;
	}
}

ul.funkyFormBlock, dl.funkyFormBlock {
	input[type="text"] + label, 
	input[type="email"] + label, 
	input[type="number"] + label {
		bottom: 0;
	}
	input[type="text"]:hover + label, 
	input[type="email"]:hover + label, 
	input[type="number"]:hover + label {
	}
	input[type="text"]:focus + label,
	// input[type="text"]:valid + label,
	input[type="email"]:valid + label,
	input[type="number"]:focus + label,
	input[type="number"]:focus + label,
	input[type="email"]:valid + label {
		bottom: 28px;
	}
}

.modal-dialog {
	ul.formBlock {
		li { @extend .col-md-12; }
		.fw { margin: 33px 0 0 0; };
		.fw2 { margin: 0 0 0 0; };
	}
}

ul.formBlock.sendSms {
	label {
		@include fontSize(18);
		// @include lineHeight(38, 18);
  		color: #ffffff;
  		em { 
  			font-style: normal;
  			color: #c3c5ff;
  		}
	}
}