//------------------------------------------------------
//
// TABLE OF CONTENTS
//
// 		1 - Font Family
//
//		2 - Form Width
//
//		3 - Label Width
//
// 		4 - Label Alignment
//
// 		5 - Font Size
//
// 		6 - Label Style
//
//		7 - Color Scheme
//			2.7.1 - Background color mixin
//			2.7.2 - Frame bg color
//			2.7.3 - Text color
//			2.7.4 - Input background color
//			2.7.5 - Focus state color
//			2.7.6 - Error state color
//
// 		8 - Form Controls (input styles)
// 			2.8.1 - Mixin for creating custom radio buttons & checkboxes
//			2.8.2 - Create form control styles ( Add new input styles here )
//
//		9 - Background Images
//
//		10 - Line Spacing
//
//		11 - Line Padding
//
//		12 - Rounded Inputs
//
//		13 - Button Size
//
//		14 - Header Size
//
//		15 - Header Text Align
//
// 		16 - Header BG Url
//
// 		17 - Input Widths
//
// 		18 - Input Padding
//
//		19 - Header Font Family
//
// 		20 - Form Padding
//
// 		21 - Header Margin
//
//		22 - Header Padding
//
//		23 - Header Color
//
// 		24 - Text Inputs
//
// 		25 - Dropdowns
//
// 		26 - Button Alignment
//
//		27 - Header Bottom Border
//
//		28 - Image Styles
//
//		31 - Form Cover
//
// ------------------------------------------------------


@import "global";

// -----------------
//  0 - CLEARFIX
// -----------------

.form-all {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

// -----------------
//  1 - FONT FAMILY
// -----------------

@fontFamily: Lucida Grande;

.form-all {
	font-family: "@{fontFamily}", sans-serif;
	& when ( "@{fontFamily}" = "Libre Baskerville"), ("@{fontFamily}" = "Merriweather"), ("@{fontFamily}" = "Vollkorn"), ("@{fontFamily}" = "Times New Roman") {
		font-family: "@{fontFamily}", serif;
	}
}


// ----------------
//  2 - FORM WIDTH
// ----------------

@formWidth: 720px;
@formResponsive: false;


.form-all {
	width: unit(@formWidth, px);

	& when ( @formResponsive = true ) {
		width: 100%;
		max-width: unit(@formWidth, px);
	}
}


// -----------------
//  3 - LABEL WIDTH
// -----------------

@labelWidth: 150;

.form-label-left,
.form-label-right {
	width: unit(@labelWidth, px);
}

// ---------------------
//  4 - LABEL ALIGNMENT
// ---------------------

@labelAlign: none;

.form-label {
	white-space: normal;
	&.form-label-auto {
		& when ( @labelAlign = Left ) {
			display: inline-block;
			float: left;
			text-align: left;
			word-break: break-word;
			width: unit(@labelWidth, px);
		}

		& when (@labelAlign = Right ) {
			display: inline-block;
			float: left;
			text-align: right;
			word-break: break-word;
			width: unit(@labelWidth, px);
		}

		& when (@labelAlign = Top ) {
			display: block;
			float: none;
			word-break: break-word;
			text-align: left;
		}
	}
}


.form-label-left {
	display: inline-block;
	white-space: normal;
	float: left;
	text-align: left;
}

.form-label-right {
	display: inline-block;
	white-space: normal;
	float: left;
	text-align: right;
}

.form-label-top {
	white-space: normal;
	display: block;
	float: none;
	text-align: left;
}

.form-radio-item {
	label:before {
		top: 0;
	}
}

// ---------------
//  5 - FONT SIZE
// ---------------

@fontSize: 16;

.form-all {
	font-size: unit(@fontSize, px);
}


// -----------------
//  6 - LABEL STYLE
// -----------------

@labelStyle: boldLabel;

& when (@labelStyle = boldLabel) {
	.form-label {
		font-weight: bold;
	}

	.form-checkbox-item label,
	.form-radio-item label {
		font-weight: normal;
	}
}

& when (@labelStyle = boldValue) {
	.form-label {
		font-weight: normal;
		font-size:0.95em;
	}
}

& when ( @labelStyle = noLabel) {
	.form-label {
		position: relative;
		&:after {
			content:'This label will not be seen on the form.';
			background: #FFFFE0;
			position: absolute;
			left: 0;
			top: 110%;
			width: 90px;
			opacity: 0;
			padding: 6px 9px 8px;
			.rounded(3px);
			font-size: 10px;
			font-weight: normal;
			border:1px solid fade(black, 20%);
		}
		&:hover {
			&:after {
				opacity: 0.8;
			}
		}
	}


	.supernova .form-label:after {
		display: none;
	}

	.jotform-form {
		.form-line[data-type="control_textbox"],
		.form-line[data-type="control_textarea"],
		.form-line[data-type="control_fullname"],
		.form-line[data-type="control_email"],
		.form-line[data-type="control_address"],
		.form-line[data-type="control_phone"] {
			.form-label {
				display: none;
			}
		}
	}
}

// ------------------
//  7 - COLOR SCHEME
// ------------------


// 7.1 -  Background color mixin

@clrBg: #fff;
@clrFrame: none;

.supernova {
	background-color: @clrFrame;
	background-color: @clrBg;
	body { background-color: transparent; }
}


@width30: 480px;
@width60: 768px;
@width90: 1024px;
@fw: unit((@formWidth - 1), px);

@media screen and (min-width: @width30) {
	.supernova {
		& when not (@clrFrame = none) {
			.form-all {
				border:1px solid darken(@clrBg, 10%);
				.box-shadow(0 3px 9px fade(black, 10%));
			}
		}

	}
}
/* | */

/* | */
@media screen and (max-width: @width30) {
	.jotform-form .form-all {
		width: 100%;
	}
}
/* | */

/* | */
@media screen and (min-width: @width30) and (max-width: unit((@width60 - 1), px)) {
	.jotform-form .form-all {
		width: 100%;
	}
}
/* | */

/* | */
@media screen and (min-width: @width30) and (max-width: @fw) {
	.jotform-form .form-all {
		width: 100%;
	}
}
/* | */

/* | */
@media screen and (min-width: @width60) {
	.jotform-form { padding: 60px 0; }
}
/* | */

/* | */
@media screen and (max-width: @fw) {
	.jotform-form .form-all {
		width: 100%;
	}
}
/* | */


// 7.2 - Frame bg color

@clrFrame: none;

.supernova .form-all, .form-all {
	background-color: @clrFrame;
	border: 1px solid transparent;
}

& when not (@clrFrame = none) {
	.form-header-group {
		border-color: darken(@clrFrame, 10%);
	}

	.form-matrix-table {
		tr {
			border-color: darken(@clrFrame, 10%);
			&:nth-child(2n) {
				background-color: darken(@clrFrame, 5%);
			}
		}
	}
}


// 7.3 - Text color

@clrText: #555;
@clrLabel: @clrText;

.form-all {
	color: @clrText;
}

.form-header-group {
	.form-header{ color: @clrText; }

	& when (iscolor(@clrText)) {
		.form-subHeader{ color: lighten(@clrText, 10%); }
	}
}

& when (iscolor(@clrText)) {
	.form-sub-label {
		color: lighten(@clrText, 10%);
	}
}

& when ( @labelStyle = boldLabel) {
	.form-label-top,
	.form-label-left,
	.form-label-right,
	.form-html {
		color: @clrLabel;
	}


	.form-checkbox-item label,
	.form-radio-item label {
		& when (iscolor(@clrText)) {
			color: lighten(@clrLabel, 10%);
		}
	}
}

& when ( @labelStyle = boldValue) {
	.form-label-top,
	.form-label-left,
	.form-label-right,
	.form-html {
		& when (iscolor(@clrText)) {
			color: lighten(@clrLabel, 10%);
		}
	}

	.form-checkbox-item label,
	.form-radio-item label {
		color: @clrLabel;
	}
}



// 7.5 - Focus state color

@clrActive: #FFFFE0;

.form-line.form-line-active {
	.transition(all; 0.3s; ease;);
	background-color: @clrActive;
}


/* omer */
@radioVerticalPadding: 0;
.form-radio-item, .form-checkbox-item {
	padding-bottom: unit(@radioVerticalPadding, px)!important;
	&:last-child {
		padding-bottom: 0;
	}
}

/* omer */


// -------------------
//  8 - FORM CONTROLS
// -------------------


// 8.1 - Mixin for creating custom radio buttons & checkboxes

@radioHorizontalPadding: 15px;
@radioWidth: @inputWidth;

& when ( @radioWidth > -1 ) {

	[data-type="control_radio"],
	[data-type="control_checkbox"] {
		.form-input,
		.form-input-wide {
			width:100%;
			max-width: unit(@radioWidth, px);
		}
	}

	// Radio & checboxes
	.form-radio-item,
	.form-checkbox-item {
		width: 100%;
		max-width: unit(@radioWidth, px);
		.border-box();
	}

	// Radio & Checkbox other inputs
	.form-textbox.form-radio-other-input,
	.form-textbox.form-checkbox-other-input {
		width:80%;
		margin-left: 3%;
		.border-box;
	}

	// Radio & Checkbox Columns
	.radio-cols-width(@cols) when (@cols < 10) {

		&[data-columncount="@{cols}"] {
			.form-radio-item,
			.form-checkbox-item {
				width:(100/@cols) * 1%;
			}
		}

		.radio-cols-width(@cols+1);
	}

	.form-multiple-column {
		width: 100%;

		.form-radio-item,
		.form-checkbox-item {
			width : 10%;
		}

		.radio-cols-width(1);
	}
}

.ctrl-custom-size(@bgSize, @tickSize, @tickOffsetTop, @tickOffsetLeft, @radius) {

	input[type="checkbox"], input[type="radio"] {
		opacity: 0;
		width: 0;
		margin: 0;
		padding: 0;
	}
	.form-radio-other, .form-checkbox-other {
		display: inline-block!important;
		margin-left: unit(@radioHorizontalPadding + 2, px);
		margin-right: unit(@radioHorizontalPadding - 2, px);
		margin-top: unit(@radioVerticalPadding, px);
	}
	.form-checkbox-other-input, .form-radio-other-input  {
		margin: 0;
	}


	label {
		line-height: @bgSize;
		float: left;
		margin-left: @bgSize + 4px + unit(@radioHorizontalPadding, px);
		outline: none !important;
	}

	label:before {
		content: '';
		position: absolute;
		display: inline-block;
		vertical-align: baseline;
		margin-right: 4px;
		.border-box();
		.rounded(@radius);
		left: 4px;
		width: @bgSize;
		height: @bgSize;
		cursor: pointer;
	}

	label:after {
		content: '';
		position: absolute;
		z-index: 10;
		display: inline-block;
		opacity: 0;
		top:@tickOffsetTop;
		left:@tickOffsetLeft;
		width: @tickSize;
		height: @tickSize;
	}

	input:checked + label:after {
		opacity: 1;
	}

}

.ctrl-custom-size-ios(@bgSize, @col, @bWidth) {

	input[type="checkbox"], input[type="radio"] {
		opacity: 0;
		width: 0;
		margin: 0;
		padding: 0;
	}
	.form-radio-other, .form-checkbox-other { display: inline-block!important; }
	.form-checkbox-other-input, .form-radio-other-input  {
		margin: 0;
	}

	label {
		line-height: @bgSize;
		float: left;
		margin-left: (@bgSize*2) + unit(@radioHorizontalPadding, px);
	}

	label:before {
		content: '';
		position: absolute;
		display: inline-block;
		vertical-align: baseline;
		margin-right: 4px;
		.border-box();
		.rounded(@bgSize/2);
		left: 4px;
		width: @bgSize*1.8;
		height: @bgSize;
		cursor: pointer;
		background: #f3f3f3;
		border: @bWidth solid #dedede;
	}

	label:after {
		content: '';
		position: absolute;
		z-index: 10;
		display: inline-block;
		top: 0px;
		left: 4px;
		width: @bgSize;
		height: @bgSize;
		.rounded(@bgSize/2);
		border: @bWidth solid #dedede;
		background: #fff;
		.transition(all;0.2s;ease);
		.border-box();
	}

	input:checked + label:before {
		background: lighten(@col, 5%);
		border-color: @col;
	}

	input:checked + label:after {
		border-color: @col;
		left: @bgSize*0.8 + @bWidth;
	}

}

// 8.2 - Create form control style here

@formControlStyle: "ctrl-default";
@formControlSize: small;
@okColor: green;

.form-single-column .form-checkbox-item, .form-single-column .form-radio-item {
	width: 100%;
}

.form-checkbox-item .editor-container div, .form-radio-item .editor-container div{
	position: relative;
	&:before {
		display: inline-block;
		vertical-align: middle;
		.border-box();
		left: 0;
		& when ( @formControlSize = small )  {
			width: 18px;
			height: 18px;
		}
		& when ( @formControlSize = big )  {
			width: 24px;
			height: 24px;
		}
	}
}

& when ( @formControlStyle = ctrl-default ) {

	.form-checkbox-item,
	.form-radio-item {
		padding-left: 2px;
		input {
			margin-top:2px;
		}
	}
}

// First Type
& when ( @formControlStyle = ctrl-1 ) {

	.form-radio-item:not(#foo) { position: relative;
		.form-radio-other-input , .form-checkbox-item:not(#foo) .form-checkbox-other-input{  margin-left: 0; }
		.form-radio-other.form-radio{display:none !important}
		.ctrl-custom-size(18px, 8px, 5px, 9px, 50%);	// 18px radio

		& when ( @formControlSize = big )  {
			.ctrl-custom-size(24px, 10px, 7px, 11px, 50%);	// 24px radio
		}
		
		label:before {
			border: 2px solid @okColor;
		}


		label:after {
			background-color: @okColor;
			.rounded(50%);
			cursor: pointer;
		}

		.editor-container div {
			&:before {
				content: '';
				border: 2px solid @okColor;
				border-radius: 50%;
				margin: 0 4px 0 -6px;
			}
		}
	}

	.form-checkbox-item:not(#foo) { position: relative;
		
		label{display:block}		
		.form-radio-other-input , .form-checkbox-item:not(#foo) .form-checkbox-other-input{  margin-left: 0; }
		.form-checkbox-other.form-checkbox{display:none !important}
		.ctrl-custom-size(18px, 3px, 8px, 9px, 50%); // 18px
		label:before {
			border: 2px solid @okColor;
		}

		label:after {
			background-color: @okColor;
			box-shadow: 0 2px 0 0 @okColor,2px 2px 0 0 @okColor,4px 2px 0 0 @okColor,6px 2px 0 0 @okColor;
			transform: rotate(-45deg);
		}

		.editor-container div {
			&:before {
				content: '';
				border: 2px solid @okColor;
				border-radius: 50%;
				margin: 0 4px 0 -6px;
			}
		}

		& when ( @formControlSize = big ) {
			.ctrl-custom-size(24px, 4px, 11px, 10px, 50%); //24px
			label:after {
				background-color: @okColor;
				box-shadow: 0 3px 0 0 @okColor,3px 3px 0 0 @okColor,6px 3px 0 0 @okColor,8px 3px 0 0 @okColor;
				transform: rotate(-45deg);
			}
		}

	}
}

// Second Type
& when ( @formControlStyle = ctrl-2 ) {
	@bgColor: @clrFrame;

	.form-radio-item:not(#foo) { position: relative;
		.form-radio-other.form-radio{display:none !important}
		.ctrl-custom-size(18px, 10px, 4px, 8px, 2px);	// 18px radio

		& when ( @formControlSize = big ) {
			.ctrl-custom-size(24px, 14px, 5px, 9px, 3px);	// 24px radio
		}

		label:before {
			background-color: transparent;
			border: 2px solid #828282;
		}

		label:focus:before {
			border-color: #588ee6;
		}

		.editor-container div:before {
			content:'';
			background-color: transparent;
			border: 2px solid #828282;
			margin: 0 4px 0 -6px;
		}

		label:after {
			background-color: @okColor;
			cursor: pointer;
		}
	}

	.form-checkbox-item:not(#foo) { position: relative;
		.form-checkbox-other.form-checkbox{display:none !important}
		.ctrl-custom-size(18px, 4px, 6px, 10px, 2px); // 18px

		label:before {
			background-color: transparent;
			border: 2px solid #828282;
		}

		label:focus:before {
			border-color: #588ee6;
		}

		.editor-container div:before {
			content:'';
			background-color: transparent;
			border: 2px solid #828282;
			margin: 0 4px 0 -6px;
		}

		label:after {
			background-color: @okColor;
			box-shadow: 0 3px 0 0 @okColor,3px 3px 0 0 @okColor,6px 3px 0 0 @okColor,9px 3px 0 0 @okColor,8px 6px 0 0 @bgColor,10px 1px 0 0 @bgColor;
			transform: rotate(-45deg);
		}

		& when ( @formControlSize = big ) {
			.ctrl-custom-size(24px, 6px, 8px, 10px, 3px); //24px
			label:after {
				background-color: @okColor;
				box-shadow: 0 5px 0 0 @okColor,5px 5px 0 0 @okColor,10px 5px 0 0 @okColor,13px 5px 0 0 @okColor,10px 8px 0 0 @bgColor,15px 2px 0 0 @bgColor;
				transform: rotate(-45deg);
			}
		}
	}
}

// Third Type
& when ( @formControlStyle = ctrl-3 ) {

	.form-radio-item:not(#foo) { position: relative;
		.form-radio-other.form-radio{display:none !important}
		.ctrl-custom-size(18px, 8px, 5px, 9px, 0%);	// 18px radio

		label:after {
				background-color: #bbb;
				.rounded(50%);
				cursor: pointer;
				opacity: 1;
		}
		.editor-container div:before {content:''; margin: 0 4px 0 -6px;} 
		.editor-container div:after {
			background-color: #bbb;
			.rounded(50%);
			cursor: pointer;
			opacity: 1;
			content:'';
			position: absolute;
			z-index: 10;
		}

		input:checked + label:after {
			background-color: @okColor;
		}
		& when ( @formControlSize = small ) {
			.editor-container div:after {
				width: 8px;
				height: 8px;
				left: -1px;
				top: 5px;
			}
		}
		& when ( @formControlSize = big ) {
			.ctrl-custom-size(24px, 10px, 7px, 11px, 0%);	// 24px radio
			label:after {
				opacity: 1;
			}
			.editor-container div:after {
				width: 10px;
				height: 10px;
				left: 0;
				top: 7px;
			}
		}

	}

	.form-checkbox-item:not(#foo) { position: relative;
		.form-checkbox-other.form-checkbox{display:none !important}
		.ctrl-custom-size(18px, 3px, 8px, 9px, 0%); // 18px

		label:after{
			background-color: #bbb;
			box-shadow: 0 2px 0 0 #bbb,2px 2px 0 0 #bbb,4px 2px 0 0 #bbb,6px 2px 0 0 #bbb;
			transform: rotate(-45deg);
			opacity: 1;
		}
		.editor-container div:before {content:''; margin: 0 4px 0 -6px;} 		
		.editor-container div:after {
			background-color: #bbb;
			box-shadow: 0 2px 0 0 #bbb,2px 2px 0 0 #bbb,4px 2px 0 0 #bbb,6px 2px 0 0 #bbb;
			transform: rotate(-45deg);
			content:'';
			position: absolute;
			z-index: 10;
			width:3px;
			height:3px;
			left:-1px;
			top:8px;
		}
		input:checked + label:after {
			background-color: @okColor;
			box-shadow: 0 2px 0 0 @okColor,2px 2px 0 0 @okColor,4px 2px 0 0 @okColor,6px 2px 0 0 @okColor;
		}

		& when ( @formControlSize = big ) {
			.ctrl-custom-size(24px, 4px, 11px, 10px, 0%); //24px
			label:after {
				background-color: #bbb;
				box-shadow: 0 3px 0 0 #bbb,3px 3px 0 0 #bbb,6px 3px 0 0 #bbb,8px 3px 0 0 #bbb;
				transform: rotate(-45deg);
				opacity: 1;
			}
			.editor-container div:after {
				background-color: #bbb;
				box-shadow: 0 3px 0 0 #bbb,3px 3px 0 0 #bbb,6px 3px 0 0 #bbb,8px 3px 0 0 #bbb;
				transform: rotate(-45deg);
				width: 4px;
				height: 4px;
				left: 0;
				top: 11px;
			}
			input:checked + label:after {
				background-color: @okColor;
				box-shadow: 0 3px 0 0 @okColor,3px 3px 0 0 @okColor,6px 3px 0 0 @okColor,8px 3px 0 0 @okColor;
			}
		}
	}
}

// Fourth Type
& when ( @formControlStyle = ctrl-4 ) {

	.form-radio-item:not(#foo) { position: relative;
		.form-radio-other.form-radio{display:none !important}
		.ctrl-custom-size(18px, 8px, 5px, 9px, 50%);	// 18px radio

		label:before {
			background-color: #444;
		}	

		.editor-container div:before {
			background-color: #444;
			border-radius: 50%;
			content:'';
			margin: 0 4px 0 -6px;
		}	

		label:after {
			background-color: @okColor;
			.rounded(50%);
			cursor: pointer;
		}

		& when ( @formControlSize = big ) {
			.ctrl-custom-size(24px, 10px, 7px, 11px, 50%);	// 24px radio
		}
	}

	.form-checkbox-item:not(#foo) { position: relative;
		.form-checkbox-other.form-checkbox{display:none !important}
		.ctrl-custom-size(18px, 3px, 8px, 9px, 50%); // 18px

		label:before {
			background-color: #444;
		}	

		.editor-container div:before {
			background-color: #444;
			border-radius: 50%;
			content:'';
			margin: 0 4px 0 -6px;			
		}	

		label:after {
			background-color: @okColor;
			box-shadow: 0 2px 0 0 @okColor,2px 2px 0 0 @okColor,4px 2px 0 0 @okColor,6px 2px 0 0 @okColor;
			transform: rotate(-45deg);
		}

		& when ( @formControlSize = big ) {
			.ctrl-custom-size(24px, 4px, 11px, 10px, 50%); //24px
			label:after {
				background-color: @okColor;
				box-shadow: 0 3px 0 0 @okColor,3px 3px 0 0 @okColor,6px 3px 0 0 @okColor,8px 3px 0 0 @okColor;
				transform: rotate(-45deg);
			}
		}
	}
}

// Fifth Type
& when ( @formControlStyle = ctrl-5 ) {

	.form-radio-item:not(#foo) { position: relative;
		.form-radio-other.form-radio{display:none !important}
		.form-radio-other-input  {
			width: 70%;
		}
		.ctrl-custom-size-ios(24px, @okColor, 3px);

		.editor-container div:before {
			width: 43.2px;
			height: 24px;
			content:'';
			border-radius: 12px;
			margin: 0 4px 0 -6px;
			.border-box();			
			left: 4px;
			cursor: pointer;
			background: #f3f3f3;
			border: 3px solid #dedede;
		}

		.editor-container div:after{
			content: '';
			position: absolute;
			z-index: 10;
			display: inline-block;
			top: 0px;
			left: -6px;
			width: 24px;
			height: 24px;
			.border-box();
			.rounded(12px);
			border: 3px solid #dedede;
			background: #fff;
		}
		
		& when ( @formControlSize = big ) {
			.ctrl-custom-size-ios(36px, @okColor, 4px);
			.form-radio-other-input  {
				margin: 0 0 0 75px !important;
				width: 60%;				
			}
			.editor-container div:before {
				width: 64.8px;
				height: 36px;
				.rounded(18px);
				border: 4px solid #dedede;							
			}
			.editor-container div:after {
				width: 36px;
				height: 36px;
				.rounded(50%);
				border: 4px solid #dedede;						
			}
		}

	}

	.form-checkbox-item:not(#foo) { position: relative;  max-width:unset;
		.form-checkbox-other.form-checkbox{display:none !important}
		.form-radio-other-input  {
			width: 70%;
		}
		.ctrl-custom-size-ios(24px, spin(@okColor,10%), 3px); // 18px

		.editor-container div:before {
			width: 43.2px;
			height: 24px;
			content:'';
			border-radius: 12px;
			margin: 0 4px 0 -6px;
			.border-box();			
			left: 4px;
			cursor: pointer;
			background: #f3f3f3;
			border: 3px solid #dedede;
		}

		.editor-container div:after{
			content: '';
			position: absolute;
			z-index: 10;
			display: inline-block;
			top: 0px;
			left: -6px;
			width: 24px;
			height: 24px;
			.border-box();
			.rounded(12px);
			border: 3px solid #dedede;
			background: #fff;
		}

		& when ( @formControlSize = big ) {
			.ctrl-custom-size-ios(36px, spin(@okColor,10%), 4px); //24px
			.form-checkbox-other-input  {
				margin: 0 0 0 75px !important;
				width: 60%;				
			}
			.editor-container div:before {
				width: 64.8px;
				height: 36px;
				.rounded(18px);
				border: 4px solid #dedede;							
			}
			.editor-container div:after {
				width: 36px;
				height: 36px;
				.rounded(50%);
				border: 4px solid #dedede;						
			}
		}
	}
}

// Sixth Type
& when ( @formControlStyle = ctrl-6 ) {

	.form-checkbox-item:not(#foo), .form-radio-item:not(#foo) {
		position: relative;
		input[type="checkbox"], input[type="radio"] {
			opacity: 0;
			width: 0;
			margin: 0;
			padding: 0;
		}
		.form-radio-other, .form-checkbox-other { display: none!important; }
		.form-checkbox-other-input, .form-radio-other-input  {
			width: 50%;
		}

		label {
			line-height: 27px;
			float: left;
			margin-left: 100px + unit(@radioHorizontalPadding, px);
		}

		label:before {
			content: 'OFF';
			position: absolute;
			text-indent: 0;
			text-align: right;
			font-size: 10px;
			color: #8b8b8b;
			padding-right: 10px;
			text-shadow: none;
			display: inline-block;
			vertical-align: baseline;
			.border-box();
			.rounded(3px);
			left: 4px;
			width: 96px;
			height: 27px;
			cursor: pointer;
			border: 1px solid #7a7a7a;
			background: #8a8a8a;
			background: linear-gradient(to bottom,  #8a8a8a 0%,#f4f4f4 100%);
		}

		label:after {
			content: '';
			position: absolute;
			z-index: 10;
			display: inline-block;
			top: 0px;
			left: 4px;
			height: 27px;
			width: 48px;
			border: 1px solid #a2a2a2;
			-webkit-box-shadow: inset 0 0 0 1px #f3f3f4;
			box-shadow: inset 0 0 0 1px #f3f3f4;
			background: #d7d8d8;
			background: linear-gradient(to bottom,  #d7d8d8 0%,#f9f9fa 100%);
			.transition(all, .15s, ease);
			.border-box();
			.rounded(3px);
		}

		.editor-container div:before {
			content: 'OFF';
			text-indent: 0;
			text-align: right;
			font-size: 10px;
			color: #8b8b8b;
			padding-right: 10px;
			text-shadow: none;
			display: inline-block;
			.border-box();
			.rounded(3px);
			width: 96px;
			height: 27px;
			cursor: pointer;
			border: 1px solid #7a7a7a;
			background: #8a8a8a;
			background: linear-gradient(to bottom,  #8a8a8a 0%,#f4f4f4 100%);
			line-height:26px;
			margin: 0 4px 0 -6px;						
		}

		.editor-container div:after {
			content: '';
			position: absolute;
			z-index: 10;
			display: inline-block;
			top: 0px;
			left: -6px;
			height: 27px;
			width: 48px;
			border: 1px solid #a2a2a2;
			-webkit-box-shadow: inset 0 0 0 1px #f3f3f4;
			box-shadow: inset 0 0 0 1px #f3f3f4;
			background: #d7d8d8;
			background: linear-gradient(to bottom,  #d7d8d8 0%,#f9f9fa 100%);
			.transition(all, .15s, ease);
			.border-box();
			.rounded(3px);
		}

		input:checked + label:before {
			content: "ON";
			text-align: left;
			padding-left: 12px;
			text-shadow: 0 0 2px #000;
			color: #fff;
			border-color: darken(@okColor,13%);
			background-color: darken(@okColor,10%);
			background-image: linear-gradient(top, darken(@okColor,15%), @okColor);
		}

		input:checked + label:after {
			left: 52px;
		}
	}
}



& when ( @formControlStyle = ctrl-plain ) {

	.form-radio-item {
		.ctrl-custom-size(14px, 8px, 5px, 3px, 50%);

		label:before {
			background-color: #ddd;
			border:1px solid #bbb;
		}

		label:after {
			background-color: #555;
		}
	}

	.form-checkbox-item {
		.ctrl-custom-size(14px, 8px, 5px, 3px, 20%);

		label:before {
			background-color: #ddd;
			border:1px solid #bbb;
		}

		label:after {
			background-color: #555;
		}
	}
}


& when ( @formControlStyle = ctrl-green ) {

	.form-radio-item {
		.ctrl-custom-size(16px, 8px, 4px, 4px, 50%);

		label:before {
			background-color: fade(white, 50%);
			border:1px solid fade(black, 20%);
		}

		label:after {
			background-color: green;
		}
	}

	.form-checkbox-item {
		.ctrl-custom-size(16px, 8px, -1px, 2px, 20%);

		label:before {
			background-color: fade(white, 50%);
			border:1px solid fade(black, 20%);
		}

		label:after {
			font-size:14px;
			font-weight: bold;
			content:'\2714';
			color:green;
		}
	}
}


& when ( @formControlStyle = ctrl-fancy ) {

	.form-radio-item {
		.ctrl-custom-size(16px, 8px, 6px, 4px, 50%);

		label:before {
			top:2px;
			background-color: transparent;
			border:3px solid fade(black, 20%);
		}

		input:checked + label:hover:before {
			border-color:fade(black, 20%);
		}

		label:after {
			background-color: green;
			width: 8px;
			height: 8px;
			position: absolute;
			top:6px;
			left: 4px;
		}

		input:checked + label:after {
			background-color: green;
		}

		label:hover:after {
			opacity: 0.3;
			background-color: green;
		}

	}

	.form-checkbox-item {
		.ctrl-custom-size(16px, 8px, -1px, 0, 20%);
		label:before {
			background-color: transparent;
			border:3px solid fade(black, 20%);
			opacity: 1;
			top: 1px;
			margin-right: 6px;
		}

		input:checked + label:before {
			opacity: 0;
		}

		input:checked + label:hover:before {
			opacity: 0.5;
		}


		label:after {
			font-family: FontAwesome;
			font-weight: bold;
			color:green;
			content:'\f00c';
		}
		label:hover:after {
			content:'\f00c';
			opacity: 0.2;
		}
	}
}

// -----------------------
//  9 - BACKGROUND IMAGES
// -----------------------

@bgURL: "";
@bgRepeat: false;
@bgAttach: true;
@bgCover: true;

.supernova {
	height: 100%;
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: center top;

	& when ( @bgRepeat = true ) {
		background-repeat: repeat;
	}

	& when ( @bgAttach = true ) {
		background-attachment: fixed;
		background-size: auto;
	}

	& when ( @bgCover = true ) {
		background-size: cover;
	}
}


.supernova {
	background-image: none;
	& when not ( @bgURL = "" ) {
		background-image: url("@{bgURL}");
	}
}


#stage {
	background-image: none;
	& when not ( @bgURL = "" ) {
		background-image: url("@{bgURL}");
	}
}

/* | */


@frameBgURL: "";
@frameBgRepeat: false;
@frameBgAttach: false;
@frameBgCover: true;

.form-all {
	& when not ( @frameBgURL = "" ) {
		background-image: url("@{frameBgURL}");
	}

  & when (@frameBgURL = "|nobackground|") {
    background-image: none;
  }

	// background-size: contain;
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: center top;

	& when ( @frameBgRepeat = true ) {
		background-repeat: repeat;
	}

	& when ( @frameBgAttach = true ) {
		background-attachment: fixed;
		background-size: auto;
	}

	& when ( @frameBgCover = true ) {
		background-size: cover;
	}
}

// @headerBgURL: "//cdn.jotfor.ms/themes/img/blank.gif";
@headerBgRepeat: false;
@headerBgAttach: false;
@headerBgCover: false;

.form-header-group {
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: center top;

	& when ( @headerBgRepeat = true ) {
		background-repeat: repeat;
	}

	& when ( @headerBgAttach = true ) {
		background-attachment: fixed;
		background-size: auto;
	}

	& when ( @headerBgCover = true ) {
		background-size: cover;
	}
}

// -------------------
//  10 - LINE SPACING
// -------------------

@lineSpacing: 12;

.form-line {
	margin-top: unit(@lineSpacing, px);
	margin-bottom: unit(@lineSpacing, px);
}


// -------------------
//  11 - LINE PADDING
// -------------------

@linePaddingVer:12;
@linePaddingHor:36;

.form-line {
	padding: unit(@linePaddingVer, px) unit(@linePaddingHor, px);
}


// ---------------------
//  12 - ROUNDED INPUTS
// ---------------------

@ctrlRound: -1;

& when (@ctrlRound > -1) {

	.form-all {
		.form-textbox,
		.form-radio-other-input,
		.form-checkbox-other-input,
		.form-captcha input,
		.form-spinner input,
		.form-pagebreak-back,
		.form-pagebreak-next,
		.qq-upload-button,
		.form-error-message {
			.rounded(unit(@ctrlRound, px));
		}
		& when ( @ctrlRound > 3px) {
			.form-sub-label {
				margin-left: 3px;
			}
		}

		.form-textarea {
			.rounded(unit(@ctrlRound, px));
			& when ( @ctrlRound > 6 ) {
				padding: 10px;
			}
			& when ( @ctrlRound > 50 ) {
				.rounded(12px);
			}
		}
	}

}

@btnRound: -1;

& when (@btnRound > -1) {
	.form-all {
		.form-submit-button,
		.form-submit-reset,
		.form-submit-print {
			.rounded(unit(@btnRound, px));
		}
		& when ( @btnRound > 3px) {
			.form-sub-label {
				margin-left: 3px;
			}
		}
	}
}

@pageBreakBtnRound: -1;

& when (@pageBreakBtnRound > -1) {
	.form-all {
		.form-pagebreak-back,
		.form-pagebreak-next {
			.rounded(unit(@pageBreakBtnRound, px));
		}
		& when ( @pageBreakBtnRound > 3px) {
			.form-sub-label {
				margin-left: 3px;
			}
		}
	}
}

@dropdownRound: -1;

& when (@dropdownRound > -1) {

	& when not ( @formDdStyle = dd-default ) {
		.form-dropdown {
			.rounded(unit(@dropdownRound, px));
			appearance : none;
			margin: 0;
		}
	}
}

@formRound: -1;

& when (@formRound > -1) {

	.form-all {
		.rounded(unit(@formRound, px));
	}
	.form-section{
		&:first-child {
			.rounded(unit(@formRound, px) unit(@formRound, px) 0 0);
		}
		&:last-child {
			.rounded(0 0 unit(@formRound, px) unit(@formRound, px));
		}
	}
}


// ------------------
//  13 - BUTTON SIZE
// ------------------

@buttonSize: normal;
@buttonWidth : -1;
@buttonHeight : -1;
@buttonCustomPriority : template;
@buttonFontFamily : @fontFamily;
@clrButton: #555;
@clrButtonBg: -1;
@clrButtonBorder : -1;
@buttonFontSize : @fontSize;
@buttonBorderStyle : solid;
@buttonBorderWidth : -1;
@buttonFontWeight : normal;

.qq-upload-button,
.submit-button,
.form-submit-reset,
.form-submit-print {

	& when ( @buttonHeight > -1 ){
		height : unit(@buttonHeight, px);
	}

	& when ( @buttonWidth > -1 ){
		width : unit(@buttonWidth, px);
	}

	& when ( @buttonSize = small ) {
		font-size: 0.85em;
		padding: 6px 9px;
	}

	& when ( @buttonSize = normal ) {
		font-size: 1em;
		padding: 9px 15px;
	}

	& when ( @buttonSize = large ) {
		font-size: 1.15em;
		padding: 12px 18px;
	}

	& when ( @buttonSize = block ) {
		font-size: 1.15em;
		padding: 12px 18px;
		display: block;
		width: 100%;
		margin:0;
	}

	font-size : unit(@buttonFontSize, px);
	font-weight : @buttonFontWeight;
	font-family: inherit;

	& when ( @buttonBorderWidth > -1) {
		border:none;
		border-width : unit(@buttonBorderWidth, px) !important;
		border-style : @buttonBorderStyle !important;
	}


}

& when not( @buttonFontFamily = -1 ) {
	.submit-button {
		font-family: "@{buttonFontFamily}", sans-serif;
	}
}
& when ( @buttonSize = large ) {
	.form-submit-print {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

& when ( @buttonSize = block ) {
	.form-buttons-wrapper {
		margin-left:0 !important;
	}

	.form-pagebreak-back-container,
	.form-pagebreak-next-container {
		width:48% !important;
		padding: 24px 0;
	}

	.form-pagebreak-next-container {
		margin-left: 4%;
	}

	.form-submit-print {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

& when (@buttonCustomPriority = custom) {
	& when (iscolor(@clrButton)) {
		.qq-upload-button,
		.submit-button,
		.form-submit-reset,
		.form-submit-print {
			color : @clrButton;
		}
	}
	& when (iscolor(@clrButtonBg)) {
		.qq-upload-button,
		.submit-button,
		.form-submit-reset,
		.form-submit-print {
			background-color : @clrButtonBg;
			box-shadow : none;
			text-shadow : none;
			&:hover {
				background-color: darken(@clrButtonBg, 20%);
			}
		}
		.form-buttons-wrapper button.jf-form-buttons.form-sacl-button {
			color : @clrButtonBg;
			border-color : @clrButtonBg;
			background-image: none;
			background-color: @clrButton;
			&:hover {
				background-color: darken(@clrButtonBg, 20%);
				border-color: darken(@clrButtonBg, 20%);
			}
		}
	}
	& when (iscolor(@clrButtonBorder)) {
		.qq-upload-button,
		.submit-button,
		.form-submit-reset,
		.form-submit-print,
		.form-buttons-wrapper button.jf-form-buttons.form-sacl-button {
			border-color : @clrButtonBorder;
		}
	}
}

// ------------------
//  13 - PAGE BREAK BUTTONS
// ------------------

@pbButtonSize : normal;
@pbButtonWidth : -1;
@pbButtonHeight : -1;
@pbButtonCustomPriority : template;
@pbButtonFontFamily : @fontFamily;
@pbClrButton : @clrText;
@pbClrButtonBg : -1;
@pbClrButtonBorder : -1;
@pbButtonFontSize : @fontSize;
@pbButtonBorderStyle : solid;
@pbButtonBorderWidth : -1;
@pbButtonFontWeight : normal;

.form-pagebreak-back-container,
.form-pagebreak-next-container {
	& when ( @pbButtonWidth > -1 ){
		width : unit(@pbButtonWidth, px) !important;
	}
}

.form-pagebreak-back,
.form-pagebreak-next {

	& when ( @pbButtonWidth > -1 ){
		width: 100%;
	}

	& when ( @pbButtonHeight > -1 ){
		height : unit(@pbButtonHeight, px);
	}

	& when ( @pbButtonSize = small ) {
		font-size: 0.85em;
		padding: 6px 9px;
	}

	& when ( @pbButtonSize = normal ) {
		font-size: 1em;
		padding: 9px 15px;
	}

	& when ( @pbButtonSize = large ) {
		font-size: 1.15em;
		padding: 12px 18px;
	}

	& when ( @pbButtonSize = block ) {
		font-size: 1.15em;
		padding: 12px 18px;
		display: block;
		width: 100%;
		margin:0;
	}

	font-size : unit(@pbButtonFontSize, px);
	font-weight : @pbButtonFontWeight;

	& when ( @pbButtonBorderWidth > -1){
		border:none;
		border-width: unit(@pbButtonBorderWidth, px) !important;
		border-style: @pbButtonBorderStyle !important;
	}
}


& when ( @pbButtonSize = large ) {
	.form-submit-print {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

& when ( @pbButtonSize = block ) {
	.form-buttons-wrapper {
		margin-left:0 !important;
	}

	.form-pagebreak-back-container,
	.form-pagebreak-next-container {
		width:48% !important;
		padding: 24px 0;
	}

	.form-pagebreak-next-container {
		margin-left: 4%;
	}

	.form-submit-print {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}
& when (@pbButtonCustomPriority = custom){
	& when (iscolor(@pbClrButton)) {
		.form-pagebreak-back,
		.form-pagebreak-next  {
			color : @pbClrButton;
		}
	}
	& when (iscolor(@pbClrButtonBg)) {
		.form-pagebreak-back,
		.form-pagebreak-next {
			background-color : @pbClrButtonBg;
			box-shadow : none;
			text-shadow : none;
			&:hover {
				background-color: darken(@pbClrButtonBg, 20%);
			}
		}
		.form-pagebreak button.jf-form-buttons.form-sacl-button {
			color : @pbClrButtonBg;
			border-color : @pbClrButtonBg;
			background-image: none;
			background-color: @pbClrButton;
			&:hover {
				background-color: darken(@pbClrButtonBg, 20%);
				border-color: darken(@pbClrButtonBg, 20%);
			}
		}
	}
	& when (iscolor(@pbClrButtonBorder)) {
		.form-pagebreak-back,
		.form-pagebreak-next,
		.form-pagebreak button.jf-form-buttons.form-sacl-button {
			border-color: @pbClrButtonBorder;
		}
	}
}

// ------------------
//  14 - HEADER SIZE
// ------------------

@headerSize: normal;

h2.form-header {
	line-height: 1.618em;
	& when ( @headerSize = small ) { font-size: 1.5em; }
	& when ( @headerSize = normal ) { font-size: 1.714em; }
	& when ( @headerSize = big ) { font-size: 2.143em; }
}

h2 ~ .form-subHeader {
	line-height: 1.5em;
	& when ( @headerSize = small ) { font-size: 0.9em; }
	& when ( @headerSize = normal ) { font-size: 1.071em; }
	& when ( @headerSize = big ) { font-size: 1.1em; }
}

// ------------------------
//  15 - HEADER TEXT ALIGN
// ------------------------

@headerTextAlign: Left;

.form-header-group {
	& when ( @headerTextAlign = Left ) { text-align: left; }
	& when ( @headerTextAlign = Center ) { text-align: center; }
	& when ( @headerTextAlign = Right ) { text-align: right; }
}

// --------------------
//  16 - HEADER BG URL
// --------------------

@headerbgURL: '';
.form-header-group {
	& when not ( @headerbgURL = "" ) {
		background-image: url("@{headerbgURL}");
	}
}



// -------------------
//  17 - INPUT WIDTHS
// -------------------

@inputWidth: -1;


& when ( @inputWidth > -1 ) {
	.form-line {
		.clearfix();
	}



	.form-captcha input,
	.form-spinner input
	/*.form-error-message*/ {
		width: unit(@inputWidth, px);
	}

	.form-textbox,
	.form-textarea {
		width: 100%;
		max-width: unit(@inputWidth, px);
		.border-box();
	}

	.form-input,
	.form-address-table,
	.form-matrix-table {
		width: 100%;
		max-width: unit(@inputWidth, px);
	}

	// Radio & checboxes
	.form-radio-item,
	.form-checkbox-item {
		width: 100%;
		max-width: unit(@inputWidth, px);
		//white-space: nowrap;
		.border-box();
	}

	// Radio & Checkbox other inputs
	.form-textbox.form-radio-other-input,
	.form-textbox.form-checkbox-other-input {
		width:80%;
		margin-left: 3%;
		.border-box;
	}

	// Radio & Checkbox Columns
	.radio-cols-width(@cols) when (@cols < 10) {

		&[data-columncount="@{cols}"] {
			.form-radio-item,
			.form-checkbox-item {
				width:(100/@cols) * 1%;
			}
		}

		.radio-cols-width(@cols+1);
	}

	.form-multiple-column {
		width: 100%;

		.form-radio-item,
		.form-checkbox-item {
			width : 10%;
		}

		.radio-cols-width(1);
	}


	// Dropdown
	[data-type="control_dropdown"] .form-dropdown {
		width: 100% !important;
		max-width: unit(@inputWidth, px);
	}

	// Fullname
	[data-type="control_fullname"] .form-sub-label-container {
		.border-box();
		width: 48%;

		&:first-child {
			margin-right: 4%;
		}
	}
	// Phone number
	[data-type="control_phone"] .form-sub-label-container {
		width: 62.5%;
		margin-left: 2.5%;
		margin-right: 0;
		float: left;
		position: relative;
		&:first-child {
			width: 32.5%;
			margin-right: 2.5%;
			margin-left: 0;
			[data-component=areaCode] {
				width: 93%;
				float: left;
				& ~ .form-sub-label {
					display: inline-block;
				}
			}
			.phone-separate {
				position: absolute;
				top: 0;
				right: -16%;
				width: 24%;
				text-align: center;
				text-indent: -4px;
			}
		}
	}

	// Birthdate
	[data-type="control_birthdate"] .form-sub-label-container {
		width: 22%;
		margin-right: 3%;
		&:first-child {
			width: 50%;
		}
		&:last-child {
			margin-right: 0;
		}

		.form-dropdown {
			width:100%;
		}
	}

	// Payment Fields
	[data-type="control_payment"] .form-sub-label-container {
		width: auto;

		.form-dropdown {
			width:100%;
		}
	}

	// Address field
	.form-address-table td {

		.form-dropdown {
			width: 100%;
		}

		.form-sub-label-container {
			width: 96%;
		}

		&:last-child .form-sub-label-container {
			margin-left:4%;
		}

		&[colspan="2"] .form-sub-label-container {
			width: 100%;
			margin: 0;
		}
	}
}

& when ( @inputWidth > ( unit(@formWidth, px) -  ( @linePaddingHor * 2 ))) {
	.form-line,
	.form-input,
	.form-input-wide,
	.form-dropdown,
	.form-sub-label-container,
	.form-address-table,
	.form-matrix-table {
		.border-box;
		width: 100%;
		max-width: none;
	}


	.form-textbox,
	.form-textarea,
	.form-radio-item,
	.form-checkbox-item,
	.form-captcha input,
	.form-spinner input,
	.form-error-message {
		width:100%;
		max-width: none;
		.border-box;
	}
}



// -------------------
//  18 - INPUT PADDING
// -------------------

@inputPaddingVer:3;
@inputPaddingHor:3;

.form-captcha input,
.form-spinner input,
.form-error-message {
	padding: unit((@inputPaddingVer + 1), px) unit(@inputPaddingHor, px) unit((@inputPaddingVer - 1), px) unit(@inputPaddingHor, px);
}

// -------------------
//  19 - HEADER FONT
// -------------------

@headerFontFamily: false;

& when not(@headerFontFamily = false) {
	.form-header-group {
		font-family: "@{headerFontFamily}", sans-serif;
	}
}


// -------------------
//  20 - FORM PADDING
// -------------------

@formPaddingVer:0;
@formPaddingHor:0;

.form-section {
	padding: unit(@formPaddingVer, px) unit(@formPaddingHor, px) unit(@formPaddingVer, px) unit(@formPaddingHor, px);
}

// -------------------
//  21 - HEADER MARGIN
// -------------------

@headerMarginVer:12;
@headerMarginHor:36;

.form-header-group {
	margin: unit(@headerMarginVer, px) unit(@headerMarginHor, px) unit(@headerMarginVer, px) unit(@headerMarginHor, px);
}

// -------------------
//  22 - HEADER PADDING
// -------------------

@headerPaddingVer:24;
@headerPaddingHor:0;

.form-header-group {
	padding: unit(@headerPaddingVer, px) unit(@headerPaddingHor, px) unit(@headerPaddingVer, px) unit(@headerPaddingHor, px);
}

// -------------------
//  23 - HEADER COLOR OPTIONS
// -------------------

@clrHeader: "";

& when (iscolor(@clrHeader)) {
	.form-header-group {
		.form-header, .form-subHeader {
			color: @clrHeader;
		}
	}
}

@clrHeaderBg: "";

& when (iscolor(@clrHeaderBg)) {
	.form-header-group {
		background-color: @clrHeaderBg;
	}
}

// -------------------
//  24 - TEXT INPUTS
// -------------------

@textInputBorderWidth: -1;
@textInputBorderStyle: -1;
@clrTextInputBorder: -1;
@clrTextInputBg: -1;
@clrTextInputFont: -1;
@textInputPaddingVer: 3;
@textInputPaddingHor: 3;
@textInputHeight: -1;
@textAreaHeight: -1;
@textInputWidth: @inputWidth;



.form-textbox,
.form-textarea {
	& when not ( @textInputBorderWidth = -1 ) {
		border-width: unit(@textInputBorderWidth, px);
	}

	& when not ( @textInputBorderStyle = -1 ) {
		border-style: @textInputBorderStyle;
	}

	& when (iscolor(@clrTextInputBorder)) {
		border-color: @clrTextInputBorder;
	}



	& when (iscolor(@clrTextInputFont)) {
		color: @clrTextInputFont;
	}

	padding: unit((@textInputPaddingVer + 1), px) unit(@textInputPaddingHor, px) unit((@textInputPaddingVer - 1), px) unit(@textInputPaddingHor, px);
}



& when (iscolor(@clrTextInputBg)) {
	.form-textbox,
	.form-textarea,
	.form-radio-other-input,
	.form-checkbox-other-input,
	.form-captcha input,
	.form-spinner input {
		background-color: @clrTextInputBg;
	}
}


// Heights

.form-textbox {
	& when (@textInputHeight > -1) {
		height: unit(@textInputHeight, px);
	}
}

.form-textarea {
	& when (@textAreaHeight > -1) {
		height: unit(@textAreaHeight, px);
	}
}


// Width
& when (@textInputWidth > -1) {
	.form-textbox,
	.form-textarea {
		width: 100%;
		max-width: unit(@textInputWidth, px);
		.border-box();
	}

	[data-type="control_textbox"],
	[data-type="control_textarea"],
	[data-type="control_fullname"],
	[data-type="control_phone"],
	[data-type="control_datetime"],
	[data-type="control_address"],
	[data-type="control_email"],
	[data-type="control_passwordbox"],
	[data-type="control_autocomp"] {
		.form-input,
		.form-input-wide {
			width: 100%;
			max-width: unit(@textInputWidth, px);
		}
	}

	// Fullname
	[data-type="control_fullname"] .form-sub-label-container {
		.border-box();
		width: 48%;
		margin-right: 0;
		float:left;

		&:first-child {
			margin-right: 4%;
		}
	}
	// Phone number
	[data-type="control_phone"] .form-sub-label-container {
		width: 62.5%;
		margin-left: 2.5%;
		margin-right: 0;
		float: left;
		position: relative;
		&:first-child {
			width: 32.5%;
			margin-right: 2.5%;
			margin-left: 0;
			[data-component=areaCode] {
				width: 93%;
				float: left;
				& ~ .form-sub-label {
					display: inline-block;
				}
			}
			.phone-separate {
				position: absolute;
				top: 0;
				right: -16%;
				width: 24%;
				text-align: center;
				text-indent: -4px;
			}
		}
		.date-separate {
				visibility: hidden;
		}
	}


	// Matrix
	.form-matrix-table {
		width: 100%;
		max-width: unit(@textInputWidth, px);
	}

	// Address field
	.form-address-table {
		width: 100%;
		max-width: unit(@textInputWidth, px);
		td {
			.form-dropdown {
				width: 100%;
			}

			.form-sub-label-container {
				width: 96%;
			}

			&:last-child .form-sub-label-container {
				margin-left:4%;
			}

			&[colspan="2"] .form-sub-label-container {
				width: 100%;
				margin: 0;
			}
		}
	}
}

.form-matrix-row-headers,
.form-matrix-column-headers,
.form-matrix-values {
	padding: 4px;
}

// -------------------
//  25 - DROPDOWN
// -------------------

@dropdownBorderWidth: -1;
@dropdownBorderStyle: -1;
@clrDropdownBorder: -1;
@clrDropdownBg: -1;
@clrDropdownFont: -1;
@dropdownHeight: -1;
@dropdownWidth: @inputWidth;

.form-dropdown {
	& when (@dropdownBorderWidth > -1) {
		border-width: unit(@dropdownBorderWidth, px);
	}

	& when not (@dropdownBorderStyle = -1) {
		border-style: @dropdownBorderStyle;
	}

	& when not (@clrDropdownBorder = -1) {
		border-color: @clrDropdownBorder;
	}

	& when not (@clrDropdownFont = -1) {
		color: @clrDropdownFont;
	}

	& when not (@clrDropdownBg = -1) {
		background-color: @clrDropdownBg;
	}

	& when (@dropdownHeight > -1) {
		height: unit(@dropdownHeight, px);
	}
}

& when not ( @dropdownWidth > -1 ) {
	[data-type="control_dropdown"] {
		.form-input,
		.form-input-wide {
			width: 150px;
		}
	}
}

& when ( @dropdownWidth > -1 ) {
	[data-type="control_dropdown"],
	[data-type="control_birthdate"],
	[data-type="control_time"] {
		.form-input,
		.form-input-wide {
			width: 100%;
			max-width: unit(@dropdownWidth, px);
		}
	}

	// Dropdown
	[data-type="control_dropdown"] .form-dropdown {
		width: 100% !important;
		max-width: unit(@dropdownWidth, px);
	}

	// Birthdate
	[data-type="control_birthdate"] .form-sub-label-container {
		width: 22%;
		margin-right: 3%;
		&:first-child {
			width: 50%;
		}
		&:last-child {
			margin-right: 0;
		}

		.form-dropdown {
			width:100%;
		}
	}
}

@formDdStyle: "dd-0";

& when ( @formDdStyle = dd-0 ) {

	.form-dropdown {
		margin: 0;
		border-color: #a6a6a6;
		appearance : menulist!important;
		border-width: 1px;
	}
}


& when ( @formDdStyle = dd-1 ) {

	.form-dropdown{
	    margin: 0;
	    appearance: none;
	    padding-left: 5px;
	}

	li[data-type="control_dropdown"] > div.form-input,
	li[data-type="control_dropdown"] > div.form-input-wide,
	li[data-type="control_time"] div .form-sub-label-container {
	    position: relative;
	}

	li[data-type="control_time"] div .form-sub-label-container {
	    margin-bottom: 16px;
	    .form-sub-label {
	    	position: absolute;
	    }
	}

	li[data-type="control_dropdown"] > div.form-input:before,
	li[data-type="control_dropdown"] > div.form-input-wide:before,
	li[data-type="control_time"] div .form-sub-label-container:before {
	    width: 18px;
	    content: "";
	    display: inline-block;
			top: 1px;
	    bottom: 1px;
	    right: 1px;
	    border-left: 1px solid #828282;
	    background-color: #fff;
	    .rounded(0 4px 4px 0);

	    & when (@dropdownBorderWidth > -1) {
			border-left-width: unit(@dropdownBorderWidth, px);
			top: unit(@dropdownBorderWidth, px);
		    bottom: unit(@dropdownBorderWidth, px);
		    right: unit(@dropdownBorderWidth, px);
		    width: 20px + unit(@dropdownBorderWidth, px);
		}

		& when not (@dropdownBorderStyle = -1) {
			border-left-style: @dropdownBorderStyle;
		}

		& when not (@clrDropdownBorder = -1) {
			border-left-color: @clrDropdownBorder;
		}

	    & when not (@clrDropdownBg = -1) {
			background-color: @clrDropdownBg;
		}

	    & when (@dropdownRound > -1) {
			.rounded(0 unit(@dropdownRound, px) unit(@dropdownRound, px) 0);
		}

	    position: absolute;
	    pointer-events: none;
	    cursor: pointer;
	}

	li[data-type="control_dropdown"] > div.form-input:after,
	li[data-type="control_dropdown"] > div.form-input-wide:after,
	li[data-type="control_time"] div .form-sub-label-container:after {
	    content: "";
	    display: inline-block;
	    width: 0;
	    height: 0;
	    border-width: 5px;
	    border-color: #828282 transparent transparent transparent;
	    & when not (@clrDropdownBorder = -1) {
			border-color: @clrDropdownBorder transparent transparent transparent;
		}
	    position: absolute;
	    border-style: solid;
	    top: 44%;
	    right: 5px;
	    & when (@dropdownBorderWidth > -1) {
		    right: unit((@dropdownBorderWidth - 1)/2, px) + 7px;
		}
	    pointer-events: none;
	    cursor: pointer;
	}

}

& when ( @formDdStyle = dd-2 ) {

	.form-dropdown{
	    margin: 0;
	    appearance: none;
	    padding-left: 5px;
	}



	li[data-type="control_time"] div .form-sub-label-container {
	    margin-bottom: 16px;
	    .form-sub-label {
	    	position: absolute;
	    }
	}

	li[data-type="control_dropdown"] > div.form-input,
	li[data-type="control_dropdown"] > div.form-input-wide,
	li[data-type="control_time"] div .form-sub-label-container {
	    position: relative;
	}

	li[data-type="control_dropdown"] > div.form-input:before,
	li[data-type="control_dropdown"] > div.form-input-wide:before,
	li[data-type="control_time"] div .form-sub-label-container:before {
		width: 18px;
		content: "";
		display: inline-block;
		top: 1px;
		bottom: 1px;
		right: 1px;
		border: 1px solid #828282;
		background-color: #fff;
		.rounded(4px);
		.border-box();
		& when (@dropdownBorderWidth > -1) {
		border-width: unit(@dropdownBorderWidth, px);
		top: unit(@dropdownBorderWidth + 1, px);
		bottom: unit(@dropdownBorderWidth + 1, px);
		right: unit(@dropdownBorderWidth + 1, px);
		width: 20px + unit(2*@dropdownBorderWidth, px);
	}

	& when not (@dropdownBorderStyle = -1) {
		border-style: @dropdownBorderStyle;
	}

	& when not (@clrDropdownBorder = -1) {
		border-color: @clrDropdownBorder;
	}

	& when not (@clrDropdownBg = -1) {
		background-color: @clrDropdownBg;
	}

	& when (@dropdownRound > -1) {
		.rounded(unit(@dropdownRound, px));
	}

		position: absolute;
		pointer-events: none;
		cursor: pointer;
	}

	li[data-type="control_dropdown"] > div.form-input:after,
	li[data-type="control_dropdown"] > div.form-input-wide:after,
	li[data-type="control_time"] div .form-sub-label-container:after {
	    content : "";
	    display : inline-block;
	    width: 0;
	    height: 0;
	    border-width: 5px;
	    border-color: #828282 transparent transparent transparent;
	    & when not (@clrDropdownBorder = -1) {
			border-color: @clrDropdownBorder transparent transparent transparent;
		}
	    position: absolute;
	    border-style: solid;
	    top: 44%;
	    right: 5px;
	    & when (@dropdownBorderWidth > -1) {
		    right: unit(2*@dropdownBorderWidth, px) + 6px;
		}
	    pointer-events: none;
	    cursor: pointer;
	}

}



// -----------------------
//  26 - BUTTON ALIGNMENT
// -----------------------

// To Do: Find a way to remove !important

@btnAlign: -1;

& when not ( @btnAlign = -1 ) {
	.form-buttons-wrapper {
		margin-left: 0 !important;

		& when ( @btnAlign = auto ) {
			& when not (@labelAlign = Top) {
				margin-left: unit(@labelWidth+6, px) !important;
			}
			& when (@labelAlign = top) {
				margin-left: 0 !important;
			}
			text-align: left;
		}

		& when ( @btnAlign = left ) {
			text-align: left;
		}

		& when ( @btnAlign = center ) {
			text-align: center;
		}

		& when ( @btnAlign = right ) {
			text-align: right;
		}
	}
}

// -----------------------
//  26 - PAGE BREAK BUTTON ALIGNMENT
// -----------------------

// To Do: Find a way to remove !important

@pbBtnAlign: -1;

& when not ( @pbBtnAlign = -1 ) {

 	.form-pagebreak{
		& when ( @pbBtnAlign = left ) {
			text-align: left !important;
		}

		& when ( @pbBtnAlign = center ) {
			text-align: center !important;
		}

		& when ( @pbBtnAlign = right ) {
			text-align: right !important;
		}
	}

	.form-pagebreak-back-container, .form-pagebreak-next-container {
		float: none !important;
		display: inline-block !important;
	}
}


// --------------------------
//  26 - HEADER BORDER BOTTOM
// --------------------------

@hideHeaderBorder: false;

& when ( @hideHeaderBorder = true ) {
	.form-header-group {
		border-bottom:none;
	}
}


// -------------------
//  26 - LABEL SPACING
// -------------------

@labelSpacing: -1;

& when (@labelSpacing > -1 ) {
	.form-label {
		& when (@labelAlign = Top) {
			margin-bottom: unit(@labelSpacing, px);
			margin-right: 0;
		}

		& when (@labelAlign = Left), (@labelAlign = Right) {
			margin-right: unit(@labelSpacing, px);
			margin-bottom: 0;
		}
	}
}

// -------------------
//  28 - IMAGE STYLES
// -------------------


@imageWidth: -1;
@imageHeight: -1;
@imageAlign: left;
@imageBorderStyle: solid;
@imageBorderWidth: 0;
@clrImageBorder : false;

li[data-type="control_image"] div {
	text-align: @imageAlign;
}

li[data-type="control_image"] img {
	border:none;
	border-width : unit(@imageBorderWidth, px) !important;
	border-style : @imageBorderStyle !important;
	border-color : @clrImageBorder !important;
}

& when (@imageWidth > -1 ) {
	.form-image {
		width: unit(@imageWidth, px);
		height: auto;
	}
}

& when (@imageHeight > -1 ) {
	.form-image {
		height: unit(@imageHeight, px);
		width: auto;
	}
}

& when (@imageHeight > -1 ) {
	& when (@imageWidth > -1 ) {
		.form-image {
			height: unit(@imageHeight, px);
			width: unit(@imageWidth, px);
		}
	}
}





// -------------------
//  29 - FORM COLUMNS
// -------------------

// Don't move above input, dd, radio or textbox widths

@formCols : -1;

.form-line-column {
	width: auto;

	& when ( @formCols > 1 ) {
		width: (100/@formCols) * 1%;
		.border-box();

		& when ( @formCols > 2 ) {
			padding-right: unit(@linePaddingHor / 2, px);
			padding-left: unit(@linePaddingHor / 2, px);
		}

		.loop(@n) when (@n < 11) {
			@startCols: (@formCols * @n) + 1;
			@endCols: (@formCols * @n);

			&.form-col-@{startCols} {
				padding-left:unit(@linePaddingHor, px);
				padding-right: unit(@linePaddingHor / 2, px);
			}

			&.form-col-@{endCols} {
				padding-left: unit(@linePaddingHor / 2, px);
				padding-right:unit(@linePaddingHor, px);
			}
			.loop(@n+1);
		}

		.loop(0);
	}
}



// -------------------
//  30 - ERROR STATES
// -------------------

@clrErrorBg: #FFF4F4;
@clrErrorMsg: #FF3200;
@clrNewErrorMsg: #6e6e6e;

@formErrorStateStyle: es-0;

& when ( @formErrorStateStyle = es-0 ) {

	.form-line-error {
		overflow: hidden;
		.transition(none; 0.3s; ease;);
		background-color: @clrErrorBg;

		.form-error-message {
			background-color: @clrErrorMsg;
			clear: both;
			float: none;
			.form-error-arrow {
				border-bottom-color: @clrErrorMsg;
			}
		}

		input:not(#coupon-input),
		textarea,
		.form-validation-error {
			border: 1px solid @clrErrorMsg;
			.box-shadow(0 0 3px @clrErrorMsg);
		}
	}

}


& when ( @formErrorStateStyle = es-1 ) {

	.form-line-error {
		background-color: @clrFrame;

		.form-sub-label-container {
			margin-bottom: 16px;
			position: relative;
			.form-sub-label {
				position: absolute;
			}
		}

		input:not(#coupon-input),
		textarea,
		.form-validation-error {
			.transition(none; 0.3s; ease;);
			border-width: unit(@textInputBorderWidth, px);
			border-style: @textInputBorderStyle;
			border-color: @clrTextInputBorder;
			border-right: 3px solid @clrErrorBg;
			box-shadow: none;
			padding-right: 1px;
		}

		.form-error-message {
			margin: 0;
			position: absolute;
			color: #fff;
			box-shadow: none;
			display: inline-block;
			right: 0;
			font-size: 10px;
			top: unit(@linePaddingVer, px);
			color: #FFF;
			background: @clrErrorMsg;
			padding: 0px 5px;
			opacity: 1;
			bottom: auto;
			min-width: 105px;
			line-height: 12px;
			.transition(opacity; 0.3s; ease;);
			.rounded(0);
			img, .form-error-arrow { display: none; }

			&:after {
				width: 22px;
				height: 22px;
				content: "!";
				color: #FFF;
				background: @clrNewErrorMsg;
				position: absolute;
				text-align: center;
				left: -23px;
				top: 0;
				line-height: 22px;
			}
		}
	}
}

& when ( @formErrorStateStyle = es-2 ) {
	.form-line-error {
		background-color: @clrFrame;
		box-shadow: inset 0px 3px 11px -7px @clrErrorMsg;

		input:not(#coupon-input),
		textarea,
		.form-validation-error {
			.transition(none; 0.3s; ease;);
			border: 1px solid @clrErrorBg;
			box-shadow: 0 0 3px @clrErrorBg;
		}

		.form-error-message {
			margin: 0;
			position: absolute;
			color: #fff;
			box-shadow: none;
			display: inline-block;
			right: 0;
			font-size: 12px;
			position: absolute!important;
			.rounded(0);
			bottom: auto;
			box-shadow: none;
			top: 0px;
			color: #FFF;
			background: @clrErrorMsg;
			padding: 0px 5px;
			bottom: auto;
			.rounded(0);
			box-shadow: 0px 2px 4px rgba(102, 102, 102, 0.5);
			img, .form-error-arrow { display: none; }
		}
	}
}

& when ( @formErrorStateStyle = es-3 ) {
	.form-line-error {
		background-color: @clrFrame;

		input:not(#coupon-input),
		textarea,
		.form-validation-error {
			.transition(none; 0.3s; ease;);
			border: 1px solid @clrErrorBg;
			box-shadow: 0 0 3px @clrErrorBg;
		}

		.form-error-message {
			img, .form-error-arrow { display: none; }
			position: absolute;
			top: 0px;
			bottom: auto;
			right: 0;
			top: unit(@lineSpacing, px);
			float: left;
			background-color: @clrErrorMsg;
			.rounded(0);
		}
	}
}



// -------------------
//  31 - FORM COLLAPSE
// -------------------

@collapseBgColor: -1;
@collapseTextColor: -1;
@collapsePaddingHor: -1;
@collapsePaddingVer: -1;
@collapseMarginVer: -1;
@collapseMarginHor: -1;

.form-collapse-table {
	& when not (@collapseBgColor = -1) {
		border: 1px solid rgba(0,0,0,0.2);
		.bg-clip(padding);
		& when (iscolor(@collapseBgColor)) {
			.gradient(lighten(@collapseBgColor, 10%), @collapseBgColor);
		}
		.box-shadow(0 1px 0 ~"rgba(255,255,255,0.5) inset, 0 1px 0 rgba(0,0,0,0.2)");

		&:hover {
			& when (iscolor(@collapseBgColor)) {
				.gradient(lighten(@collapseBgColor, 20%), lighten(@collapseBgColor, 10%));
			}
		}

		&:active {
			.box-shadow(0 1px 0 ~"rgba(255,255,255,0.5) inset");
			& when (iscolor(@collapseBgColor)) {
				.gradient(@collapseBgColor, lighten(@collapseBgColor, 10%));
			}
		}

		.form-collapse-mid {
			text-shadow:none;
		}
	}

	& when not (@collapseTextColor = -1) {
		color: @collapseTextColor;

	}

	& when ( @collapsePaddingHor > -1 ) {
		padding-left: unit(@collapsePaddingHor, px);
		padding-right: unit(@collapsePaddingHor, px);

		.form-collapse-mid {
			margin-right: 0;
			margin-left: 0;
		}
	}


	& when ( @collapsePaddingVer > -1 ) {
		padding-top:unit(@collapsePaddingVer, px);
		padding-bottom:unit(@collapsePaddingVer, px);

		.form-collapse-mid {
			margin-top:0;
			margin-bottom:0;
		}

		.form-collapse-right {
			height:24px;
			top:50%;

		}
		.form-collapse-right-show { margin-top: -15px; }
		.form-collapse-right-hide { margin-top: -12px; }

		height: auto;
		.border-box();
		max-height: 60px;
		overflow: hidden;
	}

	& when (@collapseMarginVer > -1) {
		margin-top: unit(@collapseMarginVer, px);
		margin-bottom: unit(@collapseMarginVer, px);
	}

	& when (@collapseMarginHor > -1) {
		margin-left: unit(@collapseMarginHor, px);
		margin-right: unit(@collapseMarginHor, px);
	}
}

[data-type="control_clear"] { display: none; }

// mobile compatibility classes
/* | */
@media  screen and (max-width: @width30), screen and (max-device-width: unit((@width60 - 1), px)) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape) {

  .testOne { letter-spacing: 0; }

  .form-all {
    border: 0;
    // Enables us to show a little of the background.
    max-width: initial;
  }

  .form-sub-label-container {
    width: 100%;
    margin: 0;
    margin-right: 0;
    float: left;
    .border-box();
  }

  span.form-sub-label-container + span.form-sub-label-container { margin-right: 0 }
  .form-sub-label { white-space: normal }


  .form-address-table td,
  .form-address-table th { padding: 0 1px 10px }

  .form-submit-button,
  .form-submit-print,
  .form-submit-reset {
    width: 100%;
    margin-left: 0!important;
  }

  div[id*=at_] {
    font-size: 14px;
    font-weight: 700;
    height: 8px;
    margin-top: 6px;
  }

  .showAutoCalendar { width: 20px }
  img.form-image { max-width: 100%; height: auto }
  
  .form-matrix-row-headers {
    width: 100%;
    word-break: break-all; 
    min-width: 80px;
  }
  .form-collapse-table,
  .form-header-group { margin: 0 }

  .form-collapse-table { height: 100%; display: inline-block; width: 100% }
  .form-collapse-hidden { display: none!important }


  .form-input { width: 100% }
  .form-label { width: 100%!important }

  .form-label-left,
  .form-label-right {
    display: block;
    float: none; 
    text-align: left;
    width: auto!important;
  }

  .form-line,
  .form-line.form-line-column {
    padding: 2% 5%;
    .border-box();
  }

  input[type=text],
  input[type=email],
  input[type=tel],
  textarea {
    width: 100%;
    .border-box();
    // Didn't work if input width property was specified. resetting max-width fixes that.
    max-width: initial !important;
  }

  .form-radio-other-input, .form-checkbox-other-input{
	max-width: 55% !important;
  }

  .form-dropdown,
  .form-textarea,
  .form-textbox {
    width: 100%!important;
    .border-box();
  }

  .form-input,
  .form-input-wide,
  .form-textarea,
  .form-textbox,
  .form-dropdown {
    // 100% width didn't work if input width property was specified. resetting max-width fixes that.
    max-width: initial!important;
  }

  .form-checkbox-item:not(#foo), .form-radio-item:not(#foo) {
	  width: 100%;
  }

  .form-address-city,
  .form-address-line,
  .form-address-postal,
  .form-address-state,
  .form-address-table,
  .form-address-table .form-sub-label-container,
  .form-address-table select,
  .form-input { width: 100% }


  div.form-header-group {
    // Initially based on users input, left & right consistent with form-line if horizontal margin = 0
    padding: unit(@headerPaddingVer, px) unit(@headerPaddingHor, px) !important;
    & when ( @headerMarginHor = 0 ) {
      padding-left: 5%!important;
      padding-right: 5%!important;
    }
    //  vertical margins made smaller. horizontal initially based on users input, consistent with form-line if horizontal padding = 0
    margin: 0 unit(@headerMarginVer, px) 2% !important;
    & when ( @headerPaddingHor = 0 ) {
      margin-left: 5%!important;
      margin-right: 5%!important;
    }

    .border-box();
    &.hasImage img { max-width: 100% }
  }

  [data-type="control_button"] { margin-bottom: 0 !important }


  [data-type=control_fullname] .form-sub-label-container {
    width: 48%;
    &:first-child { margin-right: 4% }
  }

  [data-type=control_phone] .form-sub-label-container{
    width: 65%;
    margin-right: 0;
		margin-left: 0;
    float: left;
    &:first-child { width: 31%; margin-right: 4% }
  }

  [data-type=control_datetime] .allowTime-container { width: 100% }
  [data-type=control_datetime] .allowTime-container .form-sub-label-container { width: 24%!important; margin-left: 6%; margin-right: 0 }
  [data-type=control_datetime] .allowTime-container .form-sub-label-container:first-child { margin-left: 0; }
  [data-type=control_datetime] span + span + span > span:first-child { display: block; width: 100%!important }

  [data-type=control_birthdate] .form-sub-label-container,
  [data-type=control_time] .form-sub-label-container { width: 27.3%!important; margin-right: 6%!important }
  [data-type=control_time] .form-sub-label-container:last-child { width: 33.3%!important; margin-right: 0!important }

  
  .form-pagebreak-back-container,
  .form-pagebreak-next-container {
  	min-height: 1px;
  	width: 50%!important
  }

  .form-pagebreak-back,
  .form-pagebreak-next,
  .form-product-item.hover-product-item { width: 100% }

  .form-pagebreak-back-container { padding: 0; text-align: right }
  .form-pagebreak-next-container { padding: 0; text-align: left }
  .form-pagebreak { margin: 0 auto }

  .form-buttons-wrapper {
    margin: 0!important;
    margin-left: 0!important;

    button { width: 100% }
    .form-submit-print { margin: 0 !important }
  }

  table {
    width: 100%!important;
    // 100% width didn't work if input width property was specified. resetting max-width fixes that.
    max-width: initial!important;

    td + td { padding-left: 3%; }
  }

  .form-checkbox-item,
  .form-radio-item {
    white-space:normal!important;

    input { width: auto; }
  }


  // Made Form collapse margins consistent with form line.
  .form-collapse-table {
    margin: 0 5%;
    width: auto;
    display: block;
    .clearfix();
    width: auto;
  }
  
  .fb-like-box { width: 98%!important }
  .form-error-message { clear: both; bottom:-10px }

  .date-separate,
  .phone-separate { display: none }

  .custom-field-frame,
  .direct-embed-widgets,
  .signature-pad-wrapper { width: 100%!important }
}
/* | */