| Current Path : /storage/v11800/affypharma/public_html/wp-content/plugins/formcraft3/assets/less/ |
Linux v11800 5.3.0-1023-aws #25~18.04.1-Ubuntu SMP Fri Jun 5 15:19:18 UTC 2020 aarch64
|
| Current File : /storage/v11800/affypharma/public_html/wp-content/plugins/formcraft3/assets/less/form.less |
#fc-form-preview
{
position: fixed;
top: 12px;
left: 10px;
padding: 9px 14px 8px 14px;
color: #555;
border-radius: 2px;
background-color: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,.3);
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: 0 1px 3px rgba(0,0,0,.3);
z-index: 999;
}
.formcraft-css .rtl, .rtl .formcraft-css
{
direction: rtl;
}
.rtl .formcraft-css .fc-form .form-element .field-cover [class^="icon-"]
{
left: 0;
right: auto;
}
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;
}
html body .fc-form-modal .fc_modal-dialog
{
display: inline-block;
padding: 40px 0 90px 0;
}
html body .fc-form-modal .fc_modal-dialog .form-live
{
width: auto;
margin: 0 auto;
}
html body .fc-form-modal .formcraft-css .fc-pagination .active .page-number
{
border-color: transparent;
}
html body .fc-form-modal .formcraft-css .fc-pagination>div .page-name
{
color: #ddd;
text-shadow: 0px 0px 8px #777;
}
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 .fc_close
{
font-size: 26px;
font-weight: normal;
}
html body .fc-form-modal .formcraft-css .fc-pagination .pagination-trigger .page-number,
html body .fc-form-modal .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 1px 6px rgba(0,0,0,.5);
-webkit-box-shadow: 0px 1px 6px rgba(0,0,0,.5);
}
html .fc-form-modal .formcraft-css .form-cover .prev-next
{
margin-left: auto;
margin-right: auto;
}
html body .formcraft-css .fc-sticky .form-cover .fc-form,
html body .formcraft-css .fc-sticky .fc-pagination-cover .fc-pagination,
html body .formcraft-css .fc-sticky .form-cover .prev-next
{
margin-left: 0;
margin-right: 0;
}
html .formcraft-css .fc-sticky .fc-pagination-cover
{
height: auto;
border-bottom: 1px solid #e8e8e8;
}
html .formcraft-css .fc-sticky .fc-pagination-cover .fc-pagination
{
margin: 0 auto;
margin-top: 10px !important;
}
html .formcraft-css .fc-sticky .form-cover .prev-next
{
margin: 0 0;
box-shadow: none;
width: 100%;
max-width: 100%;
border-top: 1px solid #e8e8e8;
}
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-sticky span .powered-by
{
position: static !important;
font-weight: normal;
text-decoration: none;
text-transform: uppercase;
font-size: 11px;
font-weight: 600;
letter-spacing: .4px;
}
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);
}
}
html .formcraft-css
{
position: relative;
font-size: 14px;
.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;
}
&.align-left .fc-form,
&.align-left .fc-pagination-cover .fc-pagination,
&.align-left .prev-next
{
margin-left: 2px;
}
&.align-right .fc-form,
&.align-right .fc-pagination-cover .fc-pagination,
&.align-right .prev-next
{
margin-right: 2px;
}
.prev-next
{
display: none;
width: 100%;
letter-spacing: -4px;
border-radius: 2px;
overflow: hidden;
box-shadow: 0px 1px 3px rgba(0,0,0,.3);
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;
}
.no-fields
{
display: none;
}
&.nos-10
{
.no-fields
{
display: block;
position: absolute;
cursor: pointer;
right: 0;
z-index: 1;
font-size: 1.5em;
top: 48px;
line-height: 150px;
width: 420px;
left: 50%;
margin-left: -210px;
color: #999;
}
.no-fields:hover
{
color: #777;
}
.fc-form
{
min-height: 150px;
}
}
}
.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: 0px 0px 4px rgba(0,0,0,.5);
}
}
&:first-child.active,
&:last-child.active
{
z-index: 101;
}
&.active
{
z-index: 102;
.page-number
{
transform: scale(1.25);
}
.page-name
{
color: #666;
}
}
&:after
{
position: absolute;
border-top: 2px solid #ccc;
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: 4px;
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: 0px 0px 3px rgba(0,0,0,.4);
border: 1px solid transparent;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.page-name
{
display: block;
font-size: .85em;
letter-spacing: .4px;
font-weight: 600;
width: 110px;
text-transform: uppercase;
padding: 5px 0;
white-space: normal;
}
}
.fc-form
{
background: white;
box-shadow: 0px 1px 3px rgba(0,0,0,.3);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,.3);
border-radius: 2px;
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%;
.tooltip .tooltip-inner
{
min-width: 120px;
display: inline-block;
}
&.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
{
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 [class^="icon-"]
{
display: none;
}
}
.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
{
.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;
background-position: 102% 52%;
cursor: pointer;
}
}
.field-cover div [class^="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 .form-element-html .timepicker-cover
{
input[type="text"].meridian-picker
{
padding: 9px 12px 7px 12px;
}
input[type="text"].meridian-picker
{
padding: 9px 22px 7px 22px;
}
}
.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,
.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%;
}
.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;
}
}
&.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;
}
> span > span:first-child > 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;
color: #1DAA1D;
.icon-ok-circle
{
display: block;
-webkit-animation: successIn .8s;
animation: successIn .8s;
color: inherit;
font-size: 1.6em;
margin-bottom: .3em;
&::before
{
opacity: .8;
}
}
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;
}
input[type='text'],
input[type='password'],
input[type='tel'],
textarea,
select
{
border-color: red;
}
}
input[type="text"],
input[type="password"],
input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="tel"],
input[type="time"],
input[type="url"],
input[type="week"],
select,
textarea
{
line-height: 1.4em;
background-color: #fafafa;
font-family: inherit;
height: auto;
box-shadow: none;
-webkit-box-shadow: none;
-webkit-appearance: none;
}
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;
}
&.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 [class^="icon-"]
{
position: absolute;
right: 0px;
top: 0;
cursor: text;
line-height: 1.4em;
font-size: 1.05em;
margin: 9px 12px 7px 12px;
color: inherit;
background-color: transparent;
&::before
{
line-height: 1.4em;
}
&.icon-clock-1
{
font-size: 1.1em;
right: -1px;
}
}
.emails-cover input
{
background-repeat: no-repeat;
background-position: 100% 50%;
background-size: 30px;
background-image: url(../images/email-icon.png);
}
.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;
&.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
{
display: none;
text-align: center;
left: 0; right: 0;
-webkit-animation: bounceInBig .4s ease-out;
animation: bounceInBig .4s ease-out;
}
.loading-icon:before
{
left: 0;
line-height: 1em;
}
&.disabled
{
.submit-button:hover
{
box-shadow: none;
}
.submit-button
{
opacity: .75;
border-radius: 100px;
}
.spin-cover
{
display: block;
position: absolute !important;
top: 50% !important;
margin-top: -11px !important;
}
.icon-spin5
{
display: block;
display: block;
margin: 0;
bottom: auto;
line-height: normal;
}
.text
{
opacity: 0;
}
}
&.animate-false
{
.submit-button
{
width: auto !important;
border-radius: 2px !important;
}
}
.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: width .3s, padding .5s;
-webkit-transition: width .3s, padding .5s;
> span
{
float: none !important;
background-image: none !important;
position: static !important;
margin: 0 !important;
width: auto;
height: auto;
}
&:hover
{
box-shadow: 0px 0px 100px rgba(50,50,50,.08) inset;
}
}
}
.checkbox-cover
{
input[type="checkbox"]
{
border-radius: 2px;
&::before
{
margin: 2px 0 0 2px;
font-size: 9px;
}
}
&.images-true
{
> div label
{
text-align: center;
vertical-align: bottom;
opacity: .75;
padding: 3px 5px 3px 5px;
}
> div label:hover,
> div label.active
{
opacity: 1;
}
> div label input
{
display: block;
margin: 0 6px .5em auto;
}
> div label img
{
display: block;
margin: 0 auto;
margin-bottom: 5px;
max-width: 94%;
}
}
&.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: .9em;
img
{
display: none;
}
input
{
position: relative;
top: 1px;
left: auto;
visibility: visible;
}
> span
{
vertical-align: top;
}
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;
}
.button-file
{
font-size: 1em;
padding: 0 16px;
padding-left: 55px;
height: 36px;
line-height: 36px;
overflow: hidden;
text-transform: none;
font-weight: bold;
letter-spacing: 0;
padding-bottom: 3px;
box-shadow: none;
border: 0px;
border-radius: 2px;
&: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: 31px;
line-height: 30px;
white-space: nowrap;
display: block;
width: 0%;
background-color: #22C222;
border: 1px solid #27A615;
border-bottom-width: 2px;
border-radius: 3px;
color: white;
font-size: .85em;
padding: 0px 8px;
}
.icon-ok,
.delete-file
{
letter-spacing: 0;
position: absolute;
top: 7px;
font-weight: bold;
right: 3px;
font-size: 12px;
color: #eee;
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: 31px;
right: 0;
padding: 0 9px;
font-weight: 500;
top: 0px;
}
}
}
}
.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: .75em;
&::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 2px rgba(0, 0, 0, .5);
&:before
{
content: '';
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid #bbb;
position: absolute;
left: 50%;
margin-left: -5px;
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: -5px;
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 2px rgba(0, 0, 0, 0.6);
width: 20px;
height: 20px;
top: 50%;
margin-top: -10px;
margin-left: -2px;
display: block;
border-radius: 40px;
position: absolute;
&::before,
&::after
{
display: none;
content: none;
}
&:hover
{
box-shadow: 0 0 2px rgba(0, 0, 0, 0.7);
}
}
}
.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
{
transition: transform .1s;
-webkit-transition: -webkit-transform .1s;
transform: translate3d(0,0,0) scale(.9);
-webkit-transform: translate3d(0,0,0) scale(.9);
display: inline-block;
cursor: pointer;
letter-spacing: 0;
padding: 7px 0;
[class^="icon-"]
{
position: static;
cursor: pointer;
margin: 0;
padding: 0;
}
&.active
{
transform: translate3d(0,0,0) scale(1.1);
-webkit-transform: translate3d(0,0,0) scale(1.1);
}
}
.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;
> div
{
display: block;
background-image: url('../images/star.png');
width: 40px;
margin: 0 auto;
height: 40px;
background-repeat: no-repeat;
background-position: 0 0;
background-size: 120px;
transition: transform .2s;
-webkit-transition: -webkit-transform .2s;
transform: translate3d(0,0,0) scale(1);
-webkit-transform: translate3d(0,0,0) scale(1);
}
.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 > div
{
background-position: 0 0;
}
label.fake-hover > div
{
background-position: -40px 0;
}
label.fake-click > div,
label.fake-click:hover > div,
label.active > div
{
background-position: -80px 0;
}
label:hover > div
{
opacity: 1;
background-position: -40px 0;
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
{
.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;
}
}
}
@media (max-width : 480px) {
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: 94%;
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%;
}
}