MAINHACK

Viewing / Editing File: form.less

/*
CSS to be used on the pages which show the form
*/

@shadow: 0 0 0 0.5px rgba(0,20,40,.1), 0 2px 8px 0 rgba(50,55,90,.2);

@-webkit-keyframes loadAnimate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes loadAnimate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

html .powered-by-slide {
	position:absolute;
	bottom:0;
	left:12px;
}

html .pre-populate-data {
	display: none;
}

#fc-form-preview {
	position: fixed;
	top: 12px;
	left: 10px;
	padding: 9px 14px 8px 14px;
	color: #555;
	border-radius: 2px;
	background-color: #fff;
	box-shadow: @shadow;
	z-index: 999;
	font-size: 95%;
}
.fc-form-tip-cover {
	position: fixed;
	top: 58px;
	left: 10px;
	color: #555;
	border-radius: 2px;
	font-size: 95%;
}
.fc-form-tip
{
	display: block;
	max-width: 300px;
	padding: 9px 14px 8px 14px;
	color: #555;
	border-radius: 2px;
	background-color: #fff;
	box-shadow: @shadow;
	z-index: 999;
}
.formcraft-css .rtl, .rtl .formcraft-css
{
	direction: rtl;
	.fc-pagination .page-name {
		letter-spacing: 0;
	}
	.fc-form.label-floating .form-element .form-element-html .field-cover > span {
		text-align: right;
	}
	.fc-form.label-floating .field-cover select {
		background-position: 2% 52%;
	}
	.fc-form.label-floating .field-cover > span {
		right: 0;
		left: auto;
		-webkit-transform-origin: 100% 0;
	}
	.fc-pagination > div:after {
		display: none;
	}
	.prev-next > div:first-child {
		float: right;
		border-left: 1px solid rgba(0,0,0,.1);
	}
	.prev-next>div span {
		letter-spacing: 0;
	}	
	.prev-next > div:last-child {
		border: 0px;
	}
	.prev-next i {
		display: none;
	}
	.time-fields-cover {
		text-align: right;
	}
	.fc-form .form-element .field-cover .formcraft-icon {
		left: 0 !important;
		right: auto !important;
	}
	.fc-form select {
	    background-position: 3% 50%;
	}	
}
html .rtl .formcraft-css .fc-form .form-element .checkbox-cover>div label input
{
	margin-left: .3em;
	margin-right: 0;
}
.form-disabled-message
{
	font-size: 1em;
	color: inherit;
	margin: 20px 0;
}
html body .fc-form-modal
{
	text-align: center;
}

// Form Modal CSS
html body .fc-form-modal {
	.fc_modal-dialog
	{
		display: inline-block;
		width: auto;
		padding: 40px 0 90px 0;
	}
	.fc_modal-dialog .form-live
	{
		position: relative;
		width: auto;
		margin: 0 auto;
		padding: 0 1px;
	}
	 .formcraft-css .fc-pagination .active .page-number
	{
		border-color: transparent;
	}
	.formcraft-css .form-cover .prev-next
	{
		margin-left: auto;
		margin-right: auto;
	}
	.formcraft-css .fc-pagination .pagination-trigger .page-number,
	.formcraft-css .fc-pagination .pagination-trigger:hover .page-number
	{
		box-shadow: 0 0 1px rgba(0,0,0,0.8);
	}
}
html body .fc_modal .formcraft-css form.fc-form
{
	margin: 0 auto;
	box-shadow: 0px 2px 4px rgba(0,0,0,.4);
	-webkit-box-shadow: 0px 2px 4px rgba(0,0,0,.4);
}
html body .fc_modal .formcraft-css .prev-next
{
	box-shadow: 0px 1px 6px rgba(0,0,0,.5);
	-webkit-box-shadow: 0px 1px 6px rgba(0,0,0,.5);
}
html body .fc-form-modal.fc_modal .fc-pagination
{
	padding: 0 0;
}
html body .fc-form-modal.fc_modal .fc-pagination-cover
{
	height: 100px;
}
html body .fc_modal-dialog .powered-by
{
	background: rgba(20,20,20,.22);
	padding: 5px 12px 4px 12px;
	border-radius: 3px;
	color: rgba(255,255,255,.7);
	margin-top: 20px;
	font-weight: 600;
	display: inline-block;
	width: auto !important;
	box-shadow: 1px 1px 0px rgba(0,0,0,0.12) inset;
	font-weight: normal;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .6px;
	&:hover
	{
		background: rgba(20,20,20,.22);
		color: rgba(255,255,255,.77);
	}
}

// Sticky Form CSS
html body .formcraft-css .fc-sticky {
	.powered-by
	{
		position: static !important;
		font-weight: normal;
		text-decoration: none;
		text-transform: uppercase;
		font-size: 11px;
		font-weight: 600;
		letter-spacing: .4px;
	}	
	.form-cover .fc-form,
	.fc-pagination-cover .fc-pagination,
	.form-cover .prev-next
	{
		margin-left: 0;
		margin-right: 0;
	}
	.form-cover .fc-form,
	.fc-pagination-cover .fc-pagination,
	.form-cover .prev-next
	{
		margin-left: 0;
		margin-right: 0;
	}
	.fc-pagination-cover
	{
		height: auto;
		border-bottom: 1px solid #e8e8e8;
	}
	.fc-pagination-cover .fc-pagination
	{
		margin: 0 auto;
		margin-top: 10px !important;
	}
	.form-cover .prev-next
	{
		margin: 0 0;
		box-shadow: none;
		width: 100%;
		max-width: 100%;
		border-top: 1px solid #e8e8e8;
	}	
}

html .formcraft-css {
	a[data-toggle] {
	  cursor: pointer;
	}	
	.powered-by
	{
		color: #888;
		position: relative;
		z-index: 999;
		display: inline-block;
		text-align: center;
		margin: 13px auto;
		font-weight: normal;
		text-decoration: none;
		text-transform: uppercase;
		font-size: 11px;
		font-weight: 600;
		letter-spacing: .4px;
		&:hover
		{
			color: #48e;
		}
	}
	.fc-sticky-button
	{
		z-index: 99998;
		cursor: pointer;
		transition: transform .3s cubic-bezier(0,0,0,1);
		-webkit-transition: -webkit-transform .3s cubic-bezier(0,0,0,1);
	}
	.fc-sticky
	{
		max-width: 100%;
		display: none;
		position: fixed;
		overflow: auto;
		bottom: -5px;
		right: 50px;
		box-shadow: 0 0 3px rgba(0,0,0,.35);
		-moz-box-shadow: 0 0 3px rgba(0,0,0,.35);
		border-radius: 3px 3px 0 0;
		background-color: white;
		z-index: 99999;
		transition: transform .35s cubic-bezier(0,0,0,1);
		-webkit-transition: -webkit-transform .35s cubic-bezier(0,0,0,1);
		&.show
		{
			transition: transform .35s ease-in;
			-webkit-transition: -webkit-transform .35s ease-in;
		}
		&.fc-sticky-right
		{
			top: 50%;
			bottom: auto;
			right: 0px;
			left: auto;
			display: block;
			opacity: 0;
			transform: translate3d(100%, 0, 0);
			-webkit-transform: translate3d(100%, 0, 0);
			&.show
			{
				opacity: 1;
				transform: translate3d(0, 0, 0);
				-webkit-transform: translate3d(0, 0, 0);
				display: block;
				.form-cover
				{
					-webkit-animation: sticky_show_right .55s cubic-bezier(0,0,0,1);
					animation: sticky_show_right .55s cubic-bezier(0,0,0,1);
					display: block;
				}
			}
			&.hiding
			{
				opacity: 1;
				transform: translate3d(100%, 0, 0);
				-webkit-transform: translate3d(100%, 0, 0);
				display: block;
			}
		}
		&.fc-sticky-left
		{
			top: 50%;
			bottom: auto;
			left: 0px;
			right: auto;
			display: block;
			opacity: 0;
			transform: translate3d(-100%, 0, 0);
			-webkit-transform: translate3d(-100%, 0, 0);
			&.show
			{
				opacity: 1;
				transform: translate3d(0, 0, 0);
				-webkit-transform: translate3d(0, 0, 0);
				display: block;
				.form-cover
				{
					-webkit-animation: sticky_show_left .55s cubic-bezier(0,0,0,1);
					animation: sticky_show_left .55s cubic-bezier(0,0,0,1);
					display: block;
				}
			}
			&.hiding
			{
				opacity: 1;
				transform: translate3d(-100%, 0, 0);
				-webkit-transform: translate3d(-100%, 0, 0);
				display: block;
			}
		}
		&.fc-sticky-bottom-right
		{
			top: 50%;
			bottom: 0;
			top: auto;
			left: auto;
			right: 50px;
			display: block;
			opacity: 0;
			transform: translate3d(0, 100%, 0);
			-webkit-transform: translate3d(0, 100%, 0);
			&.show
			{
				opacity: 1;
				transform: translate3d(0, 0, 0);
				-webkit-transform: translate3d(0, 0, 0);
				display: block;
				.form-cover
				{
					-webkit-animation: sticky_show .55s cubic-bezier(0,0,0,1);
					animation: sticky_show .55s cubic-bezier(0,0,0,1);
					display: block;
				}
			}
			&.hiding
			{
				opacity: 1;
				transform: translate3d(0, 100%, 0);
				-webkit-transform: translate3d(0, 100%, 0);
				display: block;
			}
		}
		&.calculated
		{
			display: none;
			opacity: 1;
		}
		.fc-form
		{
			box-shadow: none;
		}
	}
	.simple_button
	{
		display: inline-block;
		padding: 6px 15px 7px 15px;
		border-radius: 2px;
		outline: none;
		box-shadow: none;
		cursor: pointer;
		&:hover
		{
			box-shadow: 0px 0px 30px rgba(0,0,0,.12) inset;
		}
	}
	&.image_button_cover
	{
		position: fixed;
		top: 50%;
		box-shadow: none;
		z-index: 99999;
		transition: transform .3s cubic-bezier(0,0,0,1);;
		-webkit-transition: -webkit-transform .3s cubic-bezier(0,0,0,1);;
		a
		{
			padding: 6px 15px 12px 15px;
			font-size: 15px;
			font-weight: bold;
			display: inline-block;
			position: relative;
			transition: transform .3s;
			-webkit-transition: -webkit-transform .3s;
		}
		&.placement-left
		{
			left: 0;
			a
			{
				border-radius: 3px 3px 0 0;
				transform: translate3d(-200%,0,0) rotate(90deg);
				-webkit-transform: translate3d(-200%,0,0) rotate(90deg);
				transform-origin:0 100%;
				-webkit-transform-origin:0 100%;
			}
			&.now-show a
			{
				transform: translate3d(-4px,0,0) rotate(90deg);
				-webkit-transform: translate3d(-4px,0,0) rotate(90deg);
			}
			a:hover
			{
				transform: translate3d(0px,0,0) rotate(90deg);
				-webkit-transform: translate3d(0px,0,0) rotate(90deg);
			}
		}
		&.placement-right
		{
			right: 0;
			a
			{
				border-radius: 3px 3px 0 0;
				transform: translate3d(200%,0,0) rotate(-90deg);
				-webkit-transform: translate3d(200%,0,0) rotate(-90deg);
				transform-origin: 100% 100%;
				-webkit-transform-origin: 100% 100%;
			}
			&.now-show a
			{
				transform: translate3d(4px,0,0) rotate(-90deg);
				-webkit-transform: translate3d(4px,0,0) rotate(-90deg);
			}
			a:hover
			{
				transform: translate3d(0,0,0) rotate(-90deg);
				-webkit-transform: translate3d(0,0,0) rotate(-90deg);
			}
		}
		&.placement-bottom-right
		{
			position: relative;
			top: auto;
			z-index: 99997;
			a.fc-sticky-button
			{
				right: 50px;
				position: fixed;
				bottom: 0;
				top: auto !important;
				border-radius: 3px 3px 0 0;
				transform: translate3d(0,50px,0);
				-webkit-transform: translate3d(0,50px,0);
				transform-origin: 100% 100%;
				-webkit-transform-origin: 100% 100%;
			}
			&.now-show a.fc-sticky-button
			{
				transform: translate3d(0,6px,0);
				-webkit-transform: translate3d(0,6px,0);
			}
			&:hover a.fc-sticky-button
			{
				transform: translate3d(0,0,0);
				-webkit-transform: translate3d(0,0,0);
			}
		}
		a
		{
			box-shadow: none;
			border: 0px;
		}
	}
	.form-page-logo
	{
		display: block;
		margin: 30px auto;
		max-width: 90%;
		height: auto;
	}
	.form-logic
	{
		display: none;
	}
	.prev-next
	{
		display: none;
		width: 100%;
		letter-spacing: -4px;
		border-radius: 2px;
		overflow: hidden;
		box-shadow: @shadow;
		margin: 15px auto;
		background: white;
		input
		{
			box-shadow: none;
			border: 0px;
			border-radius: 0px;
			padding: 8px;
			background: transparent;
			text-align: center;
			display: none !important;
			padding: 15px 15px;
			font-size: .9em;
			text-transform: uppercase;
			font-weight: 600;
			letter-spacing: .6px;
			color: inherit;
		}
		> div
		{
			display: inline-block;
			width: 49.5%;
			letter-spacing: 0;
			text-align: center;
			span .icon-angle-left,
			span .icon-angle-right
			{
				font-size: 1.2em;
				vertical-align: middle;
				position: relative;
				top: -2px;
			}
			span
			{
				display: block;
				padding: 15px 15px;
				font-size: .87em;
				text-transform: uppercase;
				font-weight: 600;
				letter-spacing: .6px;
				cursor: pointer;
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				-o-user-select: none;
				user-select: none;
			}
			span.inactive
			{
				opacity: .5;
				cursor: default;
				&:hover
				{
					color: inherit;
				}
			}
			&:last-child
			{
				border-left: 1px solid #e8e8e8;
				box-sizing: border-box;
				float: right;
			}
		}
	}
	#form-cover-html
	{
		text-align: center;
		position: relative;
		min-width: 100%;
		> form
		{
			margin: 0 auto;
		}
	}
	.fc-pagination-cover
	{
		text-align: center;
		height: 130px;
		display: none;
		position: relative;
		max-width: 100%;
	}
	.fc-pagination
	{
		white-space: nowrap;
		text-align: center;
		position: relative;
		display: block;
		padding: 12px 0;
		margin: 0 auto;
		max-width: 100%;
		transition: background .3s;
		-webkit-transition: background .3s;
		> div
		{
			display: inline-block;
			padding: 0 15px;
			position: relative;
			z-index: 101;
			cursor: default;
			vertical-align: top;
			cursor: pointer;
			color: #999;
			transition: padding .3s;
			-webkit-transition: padding .3s;
			&:hover
			{
				color: #777;
				.page-number
				{
					box-shadow: 0 0 0 0.5px rgba(0,20,40,.18), 0 2px 10px 0 rgba(50,55,90,.3);
				}
			}
			&:first-child.active,
			&:last-child.active
			{
				z-index: 101;
			}
			&.active
			{
				z-index: 102;
				.page-number
				{
					transform: scale(1.25);
				}
				.page-name
				{
					color: #444;
					text-shadow: 0 0 12px white;
				}
			}
			&:after
			{
				position: absolute;
				border-top: 2px solid rgba(255,255,255,.8);
				top: 25px;
				width: 100%;
				height: 2px;
				content: '';
				left: 0;
				z-index: 101;
			}
		}
		> div:first-child
		{
			//padding-left: 0;
			&:after
			{
				width: 110px;
				left: 50%;
				margin-left: -15px;
			}
		}
		> div:last-child
		{
			//padding-right: 0;
			&:after
			{
				width: 110px;
				right: 50%;
				left: auto;
				margin-right: -15px;
			}
		}
		.page-number
		{
			font-weight: bold;
			display: inline-block;
			background-color: white;
			border-radius: 3px;
			padding: 5px;
			margin-bottom: 10px;
			margin-top: 10px;
			min-width: 30px;
			position: relative;
			z-index: 103;
			transition: transform .3s, background .3s, border-color .3s;
			-webkit-transition: transform .3s, background .3s, border-color .3s;
			border-width: 0px;
			box-shadow: @shadow;
			border: 1px solid transparent;
			box-sizing: border-box;
			-moz-box-sizing: border-box;
		}
		.page-name
		{
			display: block;
			font-size: .88em;
			letter-spacing: .4px;
			font-weight: 600;
			width: 110px;
			text-transform: uppercase;
			padding: 5px 0;
			white-space: normal;
		}
	}
	.fc-form
	{
		background: white;
		box-shadow: @shadow;
		border-radius: 3px;
		letter-spacing: -4px;
		text-align: left;
		margin: 0 auto;
		min-width: 140px;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		position: relative;
		max-width: 100%;
    .twitter-typeahead {
      display: block;
      width: 100%;
      .tt-dropdown-menu {
        background: white;
      	min-width: 160px;
      	margin-top: 2px;
      	padding: 5px 0;
      	background-color: #ffffff;
      	border-radius: 3px;
      	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
      	background-clip: padding-box;
        z-index: 999;
      }
      .tt-suggestion {
      	display: block;
      	padding: 4px 14px;
        cursor: pointer;
      }
      .tt-suggestion:hover {
      	background-color: #eee;
      }
      .tt-suggestion p {
      	margin: 0;
      }
    }
    .form-element-type-address {
      z-index: 998 !important;
    }
		&.field-alignment-center
		{
			text-align: center;
			.form-element
			{
				margin-left: auto;
				margin-right: auto;
			}
			.form-element .form-element-html .field-cover > span,
			.form-element .form-element-html .field-cover > div
			{
				padding-top: 0px;
				text-align: center;
			}
			&.label-floating .form-element .form-element-html .field-cover > div,
			&.label-floating .form-element .form-element-html .field-cover > span
			{
				text-align: left;
			}
		}
		&.field-alignment-right
		{
			text-align: right;
			.form-element
			{
				margin-left: auto;
				margin-right: auto;
			}
			.form-element .form-element-html .field-cover > span,
			.form-element .form-element-html .field-cover > div
			{
				text-align: right;
			}
		}
		&.icons-hide-true
		{
			.form-element .field-cover div .formcraft-icon
			{
				display: none;
			}
			.form-element-type-star .field-cover div .formcraft-icon
			{
				display: block;
			}
		}
		.form-page-content
		{
			padding: 1.5em 1.5em;
			padding-right: 0;
			padding-bottom: 0;
		}
		.form-page-content > p
		{
			margin: 0px !important;
			padding: 0px !important;
			display: inline !important;
		}
		.form-page-content .form-element-type-customText,
		.form-page-content .form-element-type-heading
		{
			top: -.75em;
			position: relative;
		}
		.form-page-content .form-element-type-customText:first-child .customText-cover,
		.form-page-content .form-element-type-heading:first-child .heading-cover
		{
			border-radius: 2px 2px 0 0;
			padding-bottom: 1.5em;
			padding-top: .75em;
		}
		.form-page-content .form-element-type-customText:last-child .customText-cover,
		.form-page-content .form-element-type-heading:last-child .heading-cover
		{
			border-radius: 0 0 2px 2px;
			padding-bottom: 1.5em;
			margin-bottom: -1.5em;
		}
		.form-page-content .form-element-type-customText:last-child .form-element-html
		{
			margin-bottom: 1.5em;
		}
		.form-page-content .form-element-type-customText:first-child,
		.form-page-content .form-element-type-heading:first-child
		{
			margin-top: -.75em;
		}
		.form-page-content .form-element-type-customText:last-child,
		.form-page-content .form-element-type-heading:last-child
		{
			margin-bottom: -.75em;
		}
		h1 {
			font-size: 2em;
			margin: .5em 0;
			color: inherit;
		}
		h2
		{
			font-size: 1.6em;
		}
		h3
		{
			font-size: 1.5em;
		}
		h2, h3
		{
			margin: .4em 0;
		}
		h1,h2,h3,h4,h5,h6
		{
			font-weight: bold;
			display: inline-block;
			color: inherit;
			line-height: normal;
			margin-top: 0;
			margin-bottom: .2em;
		}
		&.label-placeholder
		{
			&.remove-asterisk-false,
			&.remove-asterisk- {
        .is-required-true .field-cover.oneLineText-cover::after,
        .is-required-true .field-cover.address-cover::after,
				.is-required-true .field-cover.email-cover::after,
				.is-required-true .field-cover.textarea-cover::after,
				.is-required-true .field-cover.dropdown-cover::after,
				.is-required-true .field-cover.datepicker-cover::after
				{
					content: '*';
					position: absolute;
					color: red;
					top: -3px;
					right: -1px;
					font-size: 26px;
				}
			}
			.field-cover > span
			{
				display: none;
			}
			.checkbox-cover > span,
			.star-cover > span,
			.thumb-cover > span,
			.slider-cover > span
			{
				display: block;
				width: 100%;
				top: 0;
				text-align: left;
			}
			.field-cover > div
			{
				width: 100%;
				display: block;
			}
			.field-cover > div.tooltip
			{
				width: auto;
			}
			.slider-cover .ui-slider-cover
			{
				top: 0;
			}
		}
		&.label-floating
		{
			.form-element .form-element-html .field-cover
			{
				> span > span.main-label > span::after
				{
					right: -8px;
				}
			}
			.form-element .submit-cover .submit-button
			{
				padding: 8px 18px 8px 18px;
			}
			.form-element.error-field .form-element-html
			{
				.checkbox-cover > div,
				.star-cover > div,
				.matrix-cover > div,
				.fileupload-cover > div
				{
					margin-top: 4px;
					border-color: red;
				}
			}
			.field-cover
			{
				position: relative;
				> span
				{
					z-index: 101;
				}
				input[type="text"],
				input[type="email"],
				input[type="tel"],
				input[type="password"],
				textarea
				{
					background-color: transparent !important;
					background-position: 102% 50%;
				}
				select
				{
					background-color: transparent !important;
					cursor: pointer;
				}
			}
			.field-cover div .formcraft-icon
			{
				bottom: 4px;
				top: auto;
				line-height: 1.4em;
				margin: 10px 2px 6px 2px;
			}
			.form-element.form-element-type-customText .form-element-html
			{
				padding-top: 0;
			}
			.form-element .form-element-html
			{
				input[type="text"],
				input[type="email"],
				input[type="tel"],
				input[type="password"],
				textarea,
				select
				{
					border-width: 0px;
					border-radius: 0px;
					border-bottom-width: 1px;
					box-shadow: none;
					margin: 0;
					margin-top: 6px;
					margin-bottom: 4px;
					padding: 10px 2px 6px 2px;
				}
				.timepicker-cover .time-fields-cover
				{
					border-width: 0px;
					border-radius: 0px;
					border-bottom-width: 1px;
					box-shadow: none;
					background-color: transparent;
					select,
					input[type="text"].meridian-picker
					{
						padding-top: 3px;
						padding-bottom: 3px;
					}
				}
			}
			.form-element.error-field .form-element-html
			{
				input[type="text"],
				input[type="email"],
				input[type="tel"],
				input[type="password"],
				textarea,
				select
				{
					border-color: red;
				}
			}
			.form-element.error-field .form-element-html .field-cover > span
			{
				color: red;
			}
			.field-cover > span
			{
				display: block;
				color: #a8a8a8;
				z-index: 98;
				width: 100%;
				text-align: left;
				padding: 10px 2px 6px 2px;
				font-weight: normal;
				font-size: 1em;
				position: absolute;
				left: 0;
				top: 6px;
				transform-origin: 0 0;
				-webkit-transform-origin: 0 0;
				transition: transform .2s linear;
				-webkit-transition: transform .2s linear;
			}
			.form-element .form-element-html
			{
				.textarea-cover,
        .oneLineText-cover,
        .address-cover,
				.email-cover,
				.datepicker-cover,
				.password-cover,
				.dropdown-cover
				{
					.error
					{
						font-size: 11px;
						position: absolute;
						margin: 0;
						padding: 0;
						border: 0px;
						top: auto;
						bottom: -7px;
						right: 2px;
						background: none;
					}
				}
			}
			.field-cover.has-input > span,
			.field-cover.has-focus > span
			{
				transform: translate3d(0, -19px, 0) scale(0.8);
				-webkit-transform: translate3d(0, -19px, 0) scale(0.8);
			}
			.field-cover .sub-label
			{
				display: none;
			}
			.checkbox-cover > span,
			.star-cover > span,
			.thumb-cover > span,
			.matrix-cover > span,
			.slider-cover > span,
			.fileupload-cover > span,
			.timepicker-cover > span,
			.checkbox-cover.has-focus > span,
			.star-cover.has-focus > span,
			.matrix-cover.has-focus > span,
			.slider-cover.has-focus > span,
			.fileupload-cover.has-focus > span,
			.timepicker-cover.has-focus > span
			{
				transform: none;
				position: static;
				display: block;
				width: 100%;
				top: 0;
				font-size: 1em;
				padding-bottom: 2px;
				text-align: left;
			}
			.field-cover > div
			{
				width: 100%;
				position: relative;
				z-index: 99;
			}
			.slider-cover .ui-slider-cover
			{
				top: 0;
			}
		}
		&.label-block
		{
			.field-cover > span
			{
				display: block;
				text-align: left;
				top: 0;
				width: 100%;
			}
			.form-element.is-required-true .field-cover > span > span:first-child > span {
				display: inline-block;
			}
			.field-cover > div
			{
				display: block;
				width: 100%;
				margin-top: 2px;
			}
			.field-cover .sub-label
			{
				margin-bottom: 2px;
			}
			.form-element .slider-cover .ui-slider-cover
			{
				top: 0;
			}
		}
		&.frame-hidden
		{
			box-shadow: none;
			-moz-box-shadow: none;
			padding: 0;
			.form-page-content
			{
				padding: 0px;
				margin-right: -1.5em;
			}
		}
		&.field-border-hidden {
			.form-element .form-element-html input[type="text"],
			.form-element .form-element-html input[type="radio"],
			.form-element .form-element-html input[type="checkbox"],
			.form-element .form-element-html input[type="radio"]:checked,
			.form-element .form-element-html input[type="checkbox"]:checked,
			.form-element .form-element-html input[type="password"],
			.form-element .form-element-html input[type="color"],
			.form-element .form-element-html input[type="date"],
			.form-element .form-element-html input[type="datetime"],
			.form-element .form-element-html input[type="datetime-local"],
			.form-element .form-element-html input[type="email"],
			.form-element .form-element-html input[type="month"],
			.form-element .form-element-html input[type="number"],
			.form-element .form-element-html input[type="search"],
			.form-element .form-element-html input[type="tel"],
			.form-element .form-element-html input[type="tel"],
			.form-element .form-element-html input[type="time"],
			.form-element .form-element-html input[type="url"],
			.form-element .form-element-html input[type="week"],
			.form-element .form-element-html select,
			.form-element .form-element-html textarea
			{
				border-color: transparent !important;
			}			
		}
		&.align-left
		{
			margin-left: 0;
			margin-right: auto;
		}
		&.align-center
		{
			margin-left: auto;
			margin-right: auto;
		}
		&.align-right
		{
			margin-left: auto;
			margin-right: 0;
		}
		&.remove-asterisk-true .form-element.is-required-true .field-cover > span > span:first-child > span::after
		{
			content: none;
		}
		.form-element.is-required-true
		{
			.field-cover
			{
				> span > span:first-child > span
				{
					position: relative;
				}
				.main-label > span::after
				{
					content: '*';
					position: absolute;
					color: red;
					top: -3px;
					right: -6px;
				}
			}
		}
		.field-cover
		{
			letter-spacing: -4px;
			.tooltip
			{
				position: absolute;
				border: 0px !important;
				padding: 0 5px !important;
			}
			&.textarea-cover .tooltip
			{
				top: 0px !important;
				position: absolute;
			}
			&.slider-cover .tooltip
			{
				top: -2px !important;
				padding: 0 5px;
			}
			&.slider-cover .tooltip-arrow
			{
				top: 20px !important;
			}
			> div
			{
				position: relative;
			}
			> span, > div
			{
				letter-spacing: 0;
				display: inline-block;
				box-sizing: border-box;
				-moz-box-sizing: border-box;
			}
			> span
			{
				width: 30%;
				text-align: right;
				padding-right: 9px;
				vertical-align: top;
				display: inline-block;
				position: relative;
				font-weight: 600;
				> span
				{
					display: block;
					width: 100%;
					line-height: 1.45em;
				}
			}
			> span span.sub-label
			{
				font-weight: normal;
				position: relative;
				font-style: italic;
				font-size: .9em;
				margin-top: -1px;
				opacity: .8;
			}
			.sub-label-false
			{
				top: .7em;
				span.sub-label
				{
					display: none;
				}
			}
			> div
			{
				width: 70%;
				display: inline-block;
				text-align: left;
				input[type="text"],
				input[type="email"],
				input[type="password"],
				input[type="tel"],
				textarea,
				select
				{
					width: 100%;
					margin: 0;
				}
			}
			> div.full
			{
				width: auto;
				display: block;
				hr
				{
					margin: 0px -1.5em;
					border-top: 0px;
					opacity: .4;
					border-bottom: 1px solid #e5e5e5;
				}
			}
		}
		.final-success
		{
			letter-spacing: 0;
			display: block;
			text-align: center;
			padding: 40px 30px 35px 30px;
			font-size: 1.2em;
			line-height: normal;
			z-index: 999;
			display: none;
			.final-success-check
			{
				font-size: 135%;
		    border: 2px solid #1daa1d;
		    border-radius: 100%;
		    padding: .2em;
		    margin-bottom: .5em;
			}
			span
			{
				display: block;
				-webkit-animation: successIn .8s;
				animation: successIn .8s;
				color: inherit;
			}
		}
		&.submitted .form-element
		{
			transition: transform .8s, opacity .8s;
			-webkit-transition: -webkit-transform .8s, opacity .8s;
			opacity: 0;
			transform: translate3d(0,-500px,0);
			-webkit-transform: translate3d(0,-500px,0);
		}
		&.submitted
		{
			overflow: hidden;
			min-height: 130px;
		}
		.form-element-type-slider
		{
			z-index: 103;
		}
		.form-element
		{
			position: relative;
			display: inline-block;
			letter-spacing: 0;
			vertical-align: top;
			opacity: 1;
			border-radius: 2px;
			z-index: 101;
			border: 0px;
			float: none !important;
			overflow: visible;
			&.error-field
			{
				.error
				{
					display: block;
					white-space: nowrap;
				}
				.form-element-html .checkbox-cover > div,
				.form-element-html .star-cover > div,
				.form-element-html .matrix-cover > div,
				.form-element-html .fileupload-cover > div
				{
					border-color: red;
					padding-left: 8px;
				}
				.star-cover > div,
				.matrix-cover > div
				{
					padding-left: 0;
				}
				.checkbox-cover.images-true > div
				{
					padding-left: 0;
				}
				.slider-cover > div
				{
					border: 1px solid red;
					border-radius: 3px;
				}
				.form-element-html input[type='text'],
				.form-element-html input[type='password'],
				.form-element-html input[type='tel'],
				.form-element-html textarea,
				.form-element-html select
				{
					border-color: red;
				}
			}
			.form-element-html input[type="text"],
			.form-element-html input[type="password"],
			.form-element-html input[type="color"],
			.form-element-html input[type="date"],
			.form-element-html input[type="datetime"],
			.form-element-html input[type="datetime-local"],
			.form-element-html input[type="email"],
			.form-element-html input[type="month"],
			.form-element-html input[type="number"],
			.form-element-html input[type="search"],
			.form-element-html input[type="tel"],
			.form-element-html input[type="tel"],
			.form-element-html input[type="time"],
			.form-element-html input[type="url"],
			.form-element-html input[type="week"],
			.form-element-html select,
			.form-element-html textarea
			{
				box-sizing: border-box;
				padding: .72em .9em .65em;
				border-radius: 2px;
				border: 1px solid #d6d8d9;
				background-color: #fafafa;
				line-height: 1.4em;
				font-family: inherit;
				height: auto;
				box-shadow: none;
				-webkit-box-shadow: none;
				-webkit-appearance: none;
				font-size: inherit;
			}
			input.is-read-only,
			textarea.is-read-only {
				opacity: .75;
			}			
			.form-element-html input[type="text"]
			{
				background-image: none !important;
			}
			.error
			{
				display: none;
				position: absolute;
				top: -4px;
				z-index: 103;
				font-size: .85em;
				line-height: 8px;
				margin: 0;
				padding: 0;
				border: 0px;
				margin-top: 0em;
				background: white;
				right: 30px;
				color: red;
				-webkit-animation: fadeInRight .3s ease-out;
				animation: fadeInRight .3s ease-out;
			}
			.form-element-html
			{
				padding: 1.5em 1.5em;
				padding-left: 0;
				padding-top: 0;
			}
			.field-cover
			{
				position: relative;
				display: block;
			}
			&.index-true
			{
				z-index: 103 !important;
			}
			&.form-element-type-customText .form-element-html
			{
				position: static;
			}
			.field-cover.heading-cover
			{
				.bold-true
				{
					font-weight: bold;
				}
				> div
				{
					line-height: normal;
					width: 100%;
				}
			}
			.field-cover.heading-cover
			{
				white-space: pre-wrap;
				position: relative;
				line-height: 1.5em;
				margin: 0 -1.5em;
				padding: .75em 1.5em;
				padding-bottom: 1.5em;
				line-height: 1.5em;
				margin-bottom: -1.5em;
			}
			.field-cover.customText-cover
			{
				white-space: pre-wrap;
				position: relative;
				line-height: 1.5em;
				margin: 0 -1.5em;
				padding: .75em 1.5em;
				line-height: 1.5em;
				margin-bottom: -1.5em;
				ul
				{
					list-style: inherit;
					margin-left: 1.8em;
				}
				img
				{
					max-width: none;
				}
				iframe
				{
					max-width: 100%;
				}
				&.absolute-true
				{
					position: absolute;
					margin: 0;
					margin-left: -1.5em;
					margin-right: -1.5em;
					padding-top: 0;
					padding-bottom: 0;
					img
					{
						max-width: none;
					}
				}
				h2,h1,h3,h4
				{
					display: block;
					letter-spacing: 0;
					line-height: 1.6em;
				}
				p
				{
					margin: .3em 0;
					width: 100% !important;
					display: block;
					font-size: 1em;
				}
				a
				{
					text-decoration: none;
				}
			}
			.textarea-cover
			{
				.count-,
				.count-false
				{
					display: none;
				}
				.count-true
				{
					display: block;
					text-align: right;
					font-size: .87em;
					padding: 1px 0px;
					letter-spacing: .4px;
				}
				textarea
				{
					resize: none;
					display: block;
					min-height: 0;
				}
			}
			.field-cover .formcraft-icon
			{
				position: absolute;
				right: 0px;
				top: 0;
				cursor: text;
				line-height: 1.4em;
				font-size: 1.25em;
				margin: .45em 12px .45em 12px;
				width: 1.1em;
				color: inherit;
				background-color: transparent;
			}
			.field-cover .formcraft-icon.icon-type-no-icon {
				display: none;
			}
			.datepicker-cover input
			{
				background-repeat: no-repeat;
				background-position: 100% 50%;
				background-size: 30px;
			}
			.submit-response
			{
				display: block;
				text-align: center;
				> span
				{
					padding-top: 15px;
					display: inline-block;
				}
				> span.has-error
				{
					color: rgb(241, 16, 16);
				}
				> span a
				{
					padding: 0;
					margin: 0;
					display: inline;
				}
			}
			.required_field
			{
				opacity: 0;
			}
			.submit-cover
			{
				float: none !important;
				margin: 0;
				transition: padding .5s;
				&.enabled
				{
					opacity: 1;
					.text
					{
						display: block;
					}
				}
				&.align-right
				{
					text-align: right;
				}
				&.align-left
				{
					text-align: left;
				}
				&.align-center
				{
					text-align: center;
				}
				&.align-right .submit-button
				{
					margin-right: 0px;
				}
				&.align-left .submit-button
				{
					margin-left: 0px;
				}
				&.align-center .submit-button
				{
					margin-left: auto;
					margin-right: auto;
				}
				.loading-icon
				{
					height: 22px;
					font-size: 22px;
					text-align: center;
					margin: 0;
					line-height: .95em;
				}
				.spin-cover,
				.spin-cover:after {
				  border-radius: 100%;
				  width: 1.2em;
				  height: 1.2em;
				  display: inline-block;
				}
				.spin-cover {
					opacity: 0;
				  margin: 0;
				  font-size: 12px;
				  position: absolute;
				  right: 2em;
				  top: 50%;
				  margin-top: -0.55em;
				  text-indent: -9999em;
				  border-top: 2px solid #fff;
				  border-right: 2px solid #fff;
				  border-bottom: 2px solid #fff;
				  border-left: 2px solid transparent;
				  -webkit-transform: translateZ(0);
				  -ms-transform: translateZ(0);
				  transform: translateZ(0);
				  -webkit-animation: loadAnimate 1.1s infinite linear;
				  animation: loadAnimate 1.1s infinite linear;
				  display: none;
				}
				.loading-icon:before
				{
					left: 0;
					line-height: 1em;
				}
				&.disabled
				{
					.submit-button:hover
					{
						box-shadow: none;
					}
					.submit-button
					{
						opacity: .75;
						padding-right: 38px;
					}					
					.spin-cover
					{
						right: 1em;
						display: block;
						opacity: 1;
					}
					.icon-spin5,
					.loading-icon
					{
						display: none;
					}
				}
				.submit-button
				{
					box-shadow: none;
					height: auto;
					font-size: 1em;
					line-height: 1.5em;
					position: relative;
					text-transform: none;
					margin: 0 auto;
					padding: 9px 18px 9px 18px;
					border: 0px;
					border-radius: 2px;
					width: auto;
					cursor: pointer;
					font-weight: 600;
					font-family: inherit;
					letter-spacing: 0px;
					white-space: nowrap;
					transition: padding .25s;
					-webkit-transition: padding .25s;
					&:hover
					{
						box-shadow: 0px 0px 100px rgba(50,50,50,.08) inset;
					}
				}
			}
			.dropdown-cover {
				.awesomplete ul {
					position: absolute;
					padding: 0;
					z-index: 99;
					background: white;
					width: 100%;
					border-radius: 2px;
					margin-top: 2px;
					box-shadow: 0 0 0 0.5px rgba(0,10,20,.1), 10px 0 10px -10px rgba(0,10,20,.18), 10px 10px 10px -10px rgba(0,10,20,.18), -10px 10px 10px -10px rgba(0,10,20,.18);					
					li {
						width: 100%;						
						list-style: none;
						margin: 0;
						padding: .72em .9em .65em;
						cursor: pointer;
					}
					li:hover {
						background: rgba(0,0,0,.1);
					}
				}
				.visually-hidden {
					display: none;
				}
				&.autocomplete-type-false,
				&.autocomplete-type- {
					select {
						display: block !important;
					}
					input {
						display: none !important;
					}					
				}
				&.autocomplete-type-true {
					select {
						display: none !important;
					}
					input {
						display: block !important;
					}
				}
			}
			.checkbox-cover
			{		
				&.images-true
				{
					> div label
					{
						text-align: center;
						vertical-align: bottom;
						opacity: .75;
						padding: 3px 5px 3px 5px;
						box-sizing: border-box;
					}
					> div label:hover,
					> div label.active
					{
						opacity: 1;
					}
					> div label img
					{
						display: block;
						margin: 0 auto;
						margin-bottom: .5em;
						max-width: 100%;
					}
				}
				&.images-false
				{
					> div label img
					{
						display: none;
					}
				}
				> div
				{
					padding-bottom: 4px;
					padding-top: 5px;
					border-radius: 2px;
					border: 1px solid transparent;
					transition: padding .15s linear;
					-webkit-transition: padding .15s linear;
				}
				> div label
				{
					padding: .3em 10px .3em 0;
					display: inline-block;
					cursor: pointer;
					font-size: .95em;
					img
					{
						display: none;
					}
					input
					{
						position: relative;
						opacity: 1;
						margin-right: .35em;
						margin-bottom: 0;
						left: auto;
						visibility: visible;
						display: inline-block !important;
						vertical-align: middle;
					}
					> span
					{
						vertical-align: middle;
					}
					a
					{
						color: #48e;
					}
					a:hover
					{
						text-decoration: underline;
					}
				}
			}
			.submit-cover
			{
				&.wide-true.animate-false
				{
					.submit-button
					{
						width: 100% !important;
						border-radius: 2px !important;
						padding-left: 0;
						padding-right: 0;
						text-align: center;
					}
				}
				&.wide-true
				{
					.submit-button
					{
						width: 100%;
					}
				}
			}
			.fileupload-cover.field-cover
			{
				> div
				{
					border-radius: 3px;
					margin-top: -8px;
					padding-top: 8px;
					padding-bottom: 8px;
					padding-right: 8px;
					border: 1px solid transparent;
					transition: padding .15s linear;
					-webkit-transition: padding .15s linear;
				}
				.button-file .icon-upload-cloud
				{
					font-size: 46px;
					position: absolute;
					display: block;
					z-index: 1;
					color: #fff;
					left: 0px;
					top: auto;
					opacity: .18;
					bottom: -20px;
					right: auto;
					margin: 0;
					transform: none;
					-webkit-transform: none;
				}
				.button-file
				{
					display: inline-block;
					overflow: hidden;
					font-size: 1em;
					padding: 0 16px;
					padding-left: 55px;
					height: 36px;
					line-height: 36px;
					text-transform: none;
					font-weight: bold;
					letter-spacing: 0;
					padding-bottom: 3px;
					box-shadow: none;
					border: 0px;
					border-radius: 2px;
					text-align: center;
					cursor: pointer;
					position: relative;
					&:before {
						display: none;
					}
					input {
						background-color: red;
						position: absolute;
						cursor: pointer;
						margin: 0;
						left: 0;
						right: 0;
						bottom: 0;
						height: 105%;
						width: 100%;
						opacity: 0;
						z-index: 2;
					}
					::-webkit-file-upload-button {
						cursor: pointer;
					}
					&:hover
					{
						box-shadow: 0px 0px 100px rgba(50,50,50,.08) inset;
					}
				}			
				.button-file span
				{
					position: relative;
					z-index: 1;
				}
				.files-list
				{
					margin: 10px 0;
					margin-bottom: 0;
					padding: 0;
					li
					{
						display: block;
						letter-spacing: -4px;
						position: relative;
						display: none;
						list-style: none;
						border-radius: 2px;
						margin-bottom: 6px;
						box-shadow: 0px 1px 2px #aaa inset;
						background-color: #eee;
						&:last-child
						{
							margin-bottom: 0;
						}
						div
						{
							transition: width .1s ease;
							-webkit-transition: width .1s ease;
							letter-spacing: 0;
							height: 2.95em;
							line-height: 2.95em;
							white-space: nowrap;
							display: block;
							width: 0%;
							background-color: #22C222;
							border: 1px solid #27A615;
							border-radius: 3px;
							color: white;
							font-size: .9em;
							padding: 0px 8px;
							overflow: hidden;
							box-sizing: border-box;
						}
						.icon-ok,
						.delete-file
						{
							letter-spacing: 0;
							position: absolute;
							top: 7px;
							font-weight: bold;
							right: 3px;
							font-size: 12px;
							color: #eee;
							background-color: #22C222;
							cursor: pointer;
							-webkit-animation: bounceIn .3s;
							animation: bounceIn .3s;
						}
						.delete-file.animate-spin
						{
							-moz-animation: spin 2s infinite linear;
							-o-animation: spin 2s infinite linear;
							-webkit-animation: spin 2s infinite linear;
							animation: spin 2s infinite linear;
							display: inline-block;
							font-size: 16px;
							top: 7px;
							right: 5px;
							padding: 0;
							color: #fff;
						}
						.delete-file:hover
						{
							color: white;
						}
						.delete-file
						{
							font-size: 21px;
							line-height: inherit;
							right: 1px;
							padding: 0 9px;
							font-weight: 500;
							top: 4px;
						}
					}
				}
			}
			.slider-cover
			{
				> div
				{
					padding: 15px 3px;
					border: 1px solid transparent;
					top: 5px;
				}
				&.show-scale-true > div
				{
					padding-top: 27px;
					top: -2px;
				}
				&.show-scale-false,
				&.show-scale-
				{
					.range-min,
					.range-max
					{
						display: none;
					}
				}
				.range-min,
				.range-max
				{
					position: absolute;
					top: 4px;
					width: 40px;
					text-align: center;
					color: inherit;
					font-weight: 500;
					left: -7px;
					font-size: .85em;
					&::before
					{
						content: '';
						position: absolute;
						width: 1px;
						height: 7px;
						background-color: #ccc;
						left: 50%;
						top: 16px;
					}
				}
				.range-max
				{
					right: -3px;
					left: auto;
				}
				.ui-slider-cover
				{
					display: block;
					width: 98%;
					margin-left: 1%;
					height: 6px;
					position: relative;
					padding-right: 18px;
					background-color: #e9e9e9;
					box-shadow: 0px 1px 1px #ccc inset;
					border-radius: 3px;
				}
				.ui-slider-range
				{
					height: 6px;
					position: relative;
					border-radius: 3px 0 0 3px;
				}
				.ui-slider
				{
					cursor: pointer;
					display: block;
					width: 100%;
					height: 18px;
					font-size: inherit;
					top: -6px;
					padding-top: 6px;
					position: relative;
					z-index: 101;
					border: 0px;
					background: none;
				}
				.ui-slider-range .ui-slider-handle-nos
				{
					top: -41px;
					left: 50%;
					margin-left: -16px;
				}
				.ui-slider-handle-nos
				{
					-webkit-animation: tooltipTop .2s;
					animation: tooltipTop .2s;
					position: absolute;
					white-space: nowrap;
					display: none;
					top: -36px;
					border-radius: 2px;
					background-color: white;
					height: 26px;
					min-width: 30px;
					line-height: 26px;
					padding: 0 6px;
					left: 0px;
					color: #777;
					text-align: center;
					font-size: .85em;
					font-weight: bold;
					box-shadow: 0 0 0 0.5px rgba(0,20,40,.11), 0 2px 8px 0 rgba(50,55,90,.2);
					&:before
					{
						content: '';
						width: 0;
						height: 0;
						border-left: 4px solid transparent;
						border-right: 4px solid transparent;
						border-top: 5px solid rgba(0,10,20,.15);
						position: absolute;
						left: 50%;
						margin-left: -4px;
						bottom: -5px;
						z-index: 100;
					}
					&:after
					{
						content: '';
						width: 0;
						height: 0;
						border-left: 4px solid transparent;
						border-right: 4px solid transparent;
						border-top: 5px solid #fff;
						position: absolute;
						left: 50%;
						margin-left: -4px;
						bottom: -4px;
						z-index: 101;
					}
				}
				.ui-slider-handle
				{
					-webkit-user-select: none;
					-moz-user-select: none;
					-ms-user-select: none;
					-o-user-select: none;
					user-select: none;
					cursor: pointer;
					outline: none;
					background: #fff;
					border: 0px;
					box-shadow: 0 0 0 .5px rgba(0,10,20,.12) ,0 0 8px rgba(0,10,20,.14);
					width: 20px;
					height: 20px;
					top: 50%;
					margin-top: -10px;
					margin-left: -2px;
					display: block;
					border-radius: 40px;
					position: absolute;
					transition: left .1s;
					&::before,
					&::after
					{
						display: none;
						content: none;
					}
					&:hover
					{
						box-shadow: 0 0 0 .5px rgba(0,10,20,.22) ,0 0 8px rgba(0,10,20,.24);
					}
				}
			}
			.timepicker-cover
			{
				.time-fields-cover
				{
					border-radius: 2px;
					overflow: hidden;
					display: block;
					font-size: 1.1em;
					position: relative;
					background-color: #fafafa;
					border: 1px solid #ddd;
					border-top-color: #bababa;
					border-left-color: #bfbfbf;
					background-repeat: no-repeat;
					background-position: 100% 50%;
					background-size: 30px;
					select,
					select:first-child,
					input.meridian-picker
					{
						padding: 9px 10px 7px 4.5%;
					}
					input.meridian-picker
					{
						text-transform: uppercase;
						letter-spacing: .6px;
					}
					&:after
					{
						content: '';
						position: absolute;
						line-height: 35px;
						top: 50%;
						margin-top: -17px;
						left: 67px;
					}
					&.hide-meridian-true input.meridian-picker
					{
						display: none !important;
					}
				}
				select,
				input.meridian-picker
				{
					vertical-align: middle;
					display: inline-block !important;
					margin: 0px !important;
					border: 0px !important;
					cursor: pointer;
					text-align: left;
					box-shadow: none;
					border-radius: 0px;
					min-width: 35px;
					width: 30%;
					max-width: 56px;
					border: 0px;
					background: none;
				}
				select:first-child
				{
					padding-left: 13px;
				}
				select:focus,
				input:hover
				{
					border: 0px;
				}
				select:hover,
				input:hover
				{
					background-color: #eee;
				}
			}
			.thumb-cover
			{
				.thumb-label-cover
				{
					letter-spacing: -4px;
					.thumbs-up,
					.thumbs-down
					{
						font-size: 3.5em;
					}
					label input[type='radio']
					{
						position: absolute;
						left: -999em;
					}
					label
					{
						transition: all .2s;
						transform: translate3d(0,0,0) scale(.95);
						display: inline-block;
						cursor: pointer;
						letter-spacing: 0;
						padding: 7px 0;
						.formcraft-icon
						{
							position: relative;
							margin: 0;
							padding: 0;
							font-size: 3em;
							line-height: 1;
							cursor: pointer;
							margin: 0 .2em;
							padding: 0;
						}
						&.active
						{
							transform: translate3d(0,0,0) scale(1.05);
						}
					}
					.thumbs-up
					{
						display: none;
					}
					.tooltip
					{
						-webkit-animation: none;
						animation: none;
						margin-top: -10px;
						font-family: inherit;
						width: auto;
						border: 0px;
					}
					.tooltip .tooltip-inner
					{
						max-width: 120px;
						min-width: 60px;
						height: auto;
						font-family: inherit;
						font-size: 12px;
						font-weight: 500;
						padding-bottom: 6px;
						text-align: center;
						box-shadow: 0 0px 2px rgba(0, 0, 0, 0.5);
						-webkit-box-shadow: 0 0px 2px rgba(0, 0, 0, 0.5);
					}
					label.active,
					label:hover
					{
						color: red;
					}
					label.odd.active,
					label.odd:hover
					{
						color: green;
					}
					label.odd
					{
						.thumbs-up
						{
							display: block;
						}
						.thumbs-down
						{
							display: none;
						}
					}
				}
			}
			.star-cover
			{
				> div
				{
					border-radius: 2px;
					border: 1px solid transparent;
					transition: padding .15s linear;
					-webkit-transition: padding .15s linear;
				}
				.star-label-cover .tooltip
				{
					-webkit-animation: none;
					animation: none;
					margin-top: -5px;
					font-family: inherit;
					width: auto;
					border: 0px;
				}
				.star-label-cover .tooltip .tooltip-arrow
				{
					height: 0;
				}
				.star-label-cover .tooltip .tooltip-inner
				{
					max-width: 120px;
					min-width: 60px;
					height: auto;
					font-family: inherit;
					font-size: 12px;
					font-weight: 500;
					padding-bottom: 6px;
					text-align: center;
					box-shadow: 0 0px 2px rgba(0, 0, 0, 0.5);
					-webkit-box-shadow: 0 0px 2px rgba(0, 0, 0, 0.5);
				}
				.star-label-cover > div
				{
					display: inline-block;
					min-height: 40px;
				}
				label
				{
					font-size: 2em;
					cursor: pointer;
					display: inline-block;
					padding: 0;
					opacity: 1;
					min-width: 40px;
					.formcraft-icon
					{
						cursor: pointer;
						position: relative;
						display: block;
						margin: 0;
						padding: 0;
						-webkit-transition: -webkit-transform .2s;
						transform: translate3d(0,0,0) scale(1);
						-webkit-transform: translate3d(0,0,0) scale(1);
						color: #f3a10b;
						opacity: .35;
						font-size: 1.6em;
						line-height: 1;
						transition: all .3s;
					}
					.star
					{
						display: none;
					}
					.star-empty
					{
						display: block;
						transition: transform .3s;
						-webkit-transition: -webkit-transform .3s;
						transform: translate3d(0,0,0) scale(1);
						-webkit-transform: translate3d(0,0,0) scale(1);
					}
				}
				> div > div label.fake-empty .formcraft-icon
				{
					opacity: .35;
				}
				label.fake-hover .formcraft-icon
				{
					opacity: 1;
				}
				label.fake-click .formcraft-icon,
				label.fake-click:hover .formcraft-icon,
				label.active .formcraft-icon
				{
					opacity: 1;
				}
				label:hover .formcraft-icon
				{
					opacity: 1;
					transform: translate3d(0,0,0) scale(1.1);
					-webkit-transform: translate3d(0,0,0) scale(1.1);
				}
				label input[type='radio']
				{
					position: absolute;
					left: -999em;
				}
			}
			.matrix-cover
			{
				> div
				{
					border-radius: 2px;
					border: 1px solid transparent;
				}
				table
				{
					width: 100%;
					font-size: 1em;
					color: inherit;
					border: 0px;
				}
				table td
				{
					padding: 0;
					border: 0px;
				}
				table th
				{
					padding: 7px 6px 7px 6px;
					text-align: center;
					border: 0px;
				}
				table td label
				{
					display: block;
					text-align: center;
					cursor: pointer;
				}
				table td label input
				{
					margin-right: 0;
					margin: .9em 0;
				}
				table tr td:first-child
				{
					text-align: left;
					padding: 9px 6px 9px 10px;
				}
				table tr:nth-child(odd) td
				{
					background-color: rgba(0,0,0,.045);
				}
				table tr:nth-child(even) td
				{
					background-color: rgba(0,0,0,.00);
				}
				table tr:nth-child(odd) td label:hover
				{
					background-color: rgba(0,0,0,.055);
				}
				table tr:nth-child(even) td label:hover
				{
					background-color: rgba(0,0,0,.02);
				}
				table thead th
				{
					text-align: center;
				}
			}
		}
	}
}

html .form-live .fc-form.fc-temp-class .form-element.default-true
{
	display: none;
}
html .form-live
{
	.form-element.state-shown.even
	{
		display: inline-block;
		transform-origin: 50% 0;
		-webkit-transform-origin: 50% 0;
		-webkit-animation: fieldShowEven .35s ease-out;
		animation: fieldShowEven .35s ease-out;
	}
	.form-element.state-shown.odd
	{
		display: inline-block;
		transform-origin: 50% 0;
		-webkit-transform-origin: 50% 0;
		-webkit-animation: fieldShowOdd .35s ease-out;
		animation: fieldShowOdd .35s ease-out;
	}
	.form-element.state-hidden.even
	{
		transform-origin: 50% 0;
		-webkit-transform-origin: 50% 0;
		-webkit-animation: fieldHideEven .5s ease-out;
		animation: fieldHideEven .5s ease-out;
	}
	.form-element.state-hidden.odd
	{
		transform-origin: 50% 0;
		-webkit-transform-origin: 50% 0;
		-webkit-animation: fieldHideOdd .5s ease-out;
		animation: fieldHideOdd .5s ease-out;
	}
}

.form-live
{
	width: 100%;
	.form-cover
	{
		-webkit-perspective: 750px;
		perspective: 750px;
	}
	.form-spinner
	{
		margin-top: 50px;
	}
	.form-spinner > div
	{
		background-color: #999;
		width: 15px;
		margin: 0 1px;
		height: 15px;
	}
	.fc-form
	{
		&.shake
		{
			-webkit-animation: shake .5s linear;
			animation: shake .5s linear;
		}
		.options-panel,
		.form-options
		{
			display: none;
		}
    .form-element-type-address {
      z-index: 998 !important;
      .address-field-map {
        height: 240px;
        margin-top: 20px;
      }
    }
	}
}

// Media Queries for Responsiveness
@media (max-width : 480px) {
	html body .fc-form-modal .formcraft-css .fc-pagination>div.active .page-name
	{
		color: white;
		text-shadow: 0px 0px 8px #777;
	}
	html body .fc-form-modal .fc_modal-dialog .formcraft-css .fc-pagination
	{
		box-shadow: 0 1px 6px rgba(0,0,0,.5);
		border-radius: 2px;
	}
	html body .fc-form-modal .fc_modal-dialog .formcraft-css .fc-pagination>div .page-name
	{
		color: #666;
		text-shadow: none;
	}
	html body .fc-form-modal .fc_modal-dialog .formcraft-css .fc-pagination>div.active .page-name
	{
		color: #666;
		text-shadow: none;
	}
	html body .fc-form-modal.fc_modal .fc_modal-dialog .fc-pagination-cover
	{
		height: 65px;
	}
	html body .fc-form-modal.fc_modal .fc_modal-dialog .fc_close
	{
		margin-right: 3px;
	}
	html body .fc-form-modal.fc_modal .fc_close
	{
		font-size: 26px;
		font-weight: normal;
	}
	html body .form-live
	{
		overflow: hidden;
	}
	html .formcraft-css .fc-pagination-cover
	{
		left: 0px;
		margin-left: 0;
	}
	html body .formcraft-css .fc-sticky
	{
		right: 3%;
		max-width: 94%;
	}
	html body .formcraft-css.image_button_cover.placement-bottom-right a
	{
		right: 3%;
	}
	html body .formcraft-css .fc-form .form-element .timepicker-cover .time-fields-cover select,
	html body .formcraft-css .fc-form .form-element .timepicker-cover .time-fields-cover select:first-child,
	html body .formcraft-css .fc-form .form-element .timepicker-cover .time-fields-cover input.meridian-picker,
	html body .formcraft-css .fc-form.label-floating .form-element .form-element-html .timepicker-cover input[type="text"].meridian-picker
	{
		padding-right: 0;
	}
	html body .fc-form-modal .fc_modal-dialog
	{
		max-width: 96%;
		padding-top: 0;
		padding-bottom: 0;
	}
	html body .fc-form .form-element
	{
		width: 100% !important;
	}
	html body .fc-form-modal
	{
		padding-top: 3%;
		padding-bottom: 3%;
	}
}

Cancel / Back

[ MAINHACK ]

Viewing / Editing File: form.less

Server Info

System Features

User Info