PluginProbe
weForms – Easy Drag & Drop Contact Form Builder For WordPress / 1.1.0
weForms – Easy Drag & Drop Contact Form Builder For WordPress v1.1.0
1.6.7 1.6.8 1.6.9 1.6.12 1.6.13 1.6.14 1.6.15 1.6.16 1.6.17 1.6.18 1.6.19 1.6.2 1.6.20 1.6.21 1.6.22 1.6.23 1.6.24 1.6.25 1.6.26 1.6.27 1.6.28 1.6.3 1.6.4 1.6.5 1.6.6 All 74 releases
weforms / assets / wpuf / css / wpuf-form-builder.css

wpuf-form-builder.css in weForms – Easy Drag & Drop Contact Form Builder For WordPress 1.1.0, at assets/wpuf/css/wpuf-form-builder.css

1,201 lines 29.1 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 [v-cloak] {
2 display: none;
3 }
4 .wpuf-pro-text-alert {
5 font-style: italic;
6 color: #cccccc;
7 }
8 .wpuf-pro-text-alert a {
9 text-decoration: none;
10 color: #aaa;
11 }
12 #wpuf-pro-content {
13 opacity: 0.7;
14 }
15 .clearfix:before,
16 .clearfix:after {
17 content: " ";
18 display: table;
19 }
20 .clearfix:after {
21 clear: both;
22 }
23 .pull-left {
24 float: left !important;
25 }
26 .pull-right {
27 float: right !important;
28 }
29 .text-center {
30 text-align: center;
31 }
32 .text-right {
33 text-align: right;
34 }
35 .margin-0 {
36 margin: 0;
37 }
38 .margin-bottom-10 {
39 margin-bottom: 10px;
40 }
41 .list-inline {
42 padding-left: 0;
43 list-style: none;
44 margin-left: -5px;
45 }
46 .list-inline > li {
47 display: inline-block;
48 padding-left: 5px;
49 padding-right: 5px;
50 }
51 .disabled {
52 pointer-events: none;
53 cursor: not-allowed;
54 opacity: 0.7;
55 }
56 .label-hr {
57 border-bottom: 1px solid #ccc;
58 display: block;
59 padding-bottom: 8px;
60 }
61 .slide-fade-enter-active {
62 -webkit-transition: all 0.6s;
63 -o-transition: all 0.6s;
64 transition: all 0.6s;
65 overflow: hidden;
66 }
67 .slide-fade-leave-active {
68 -webkit-transition: all 0.4s;
69 -o-transition: all 0.4s;
70 transition: all 0.4s;
71 overflow: hidden;
72 }
73 .slide-fade-enter,
74 .slide-fade-leave-active {
75 opacity: .3 !important;
76 max-height: 0 !important;
77 margin: 0 !important;
78 }
79 .sweet-alert {
80 border-radius: 0;
81 }
82 .sweet-alert h2 {
83 font-size: 26px;
84 line-height: 1.6;
85 }
86 .sweet-alert p {
87 font-size: 15px;
88 font-weight: 400;
89 color: #656565;
90 line-height: 1.7;
91 }
92 .sweet-alert p a {
93 text-decoration: none;
94 }
95 .sweet-alert button {
96 border-radius: 3px;
97 padding: 10px 20px;
98 min-width: 100px;
99 }
100 .loader,
101 .loader:after {
102 border-radius: 50%;
103 width: 25px;
104 height: 25px;
105 }
106 .loader {
107 display: inline-block;
108 position: relative;
109 text-indent: -9999em;
110 border-top: 3px solid rgba(0, 115, 170, 0.2);
111 border-right: 3px solid rgba(0, 115, 170, 0.2);
112 border-bottom: 3px solid rgba(0, 115, 170, 0.2);
113 border-left: 3px solid #0073aa;
114 -webkit-transform: translateZ(0);
115 -ms-transform: translateZ(0);
116 transform: translateZ(0);
117 -webkit-animation: wpuf_form_builder_loader 1.1s infinite linear;
118 animation: wpuf_form_builder_loader 1.1s infinite linear;
119 }
120 .button.button-ajax-working .loader {
121 display: inline-block;
122 width: 17px;
123 height: 17px;
124 top: 4px;
125 margin-right: 3px;
126 border-top: 1px solid #66c6e4;
127 border-right: 1px solid #66c6e4;
128 border-bottom: 1px solid #66c6e4;
129 border-left: 1px solid rgba(102, 198, 228, 0);
130 }
131 @-webkit-keyframes wpuf_form_builder_loader {
132 0% {
133 -webkit-transform: rotate(0deg);
134 transform: rotate(0deg);
135 }
136 100% {
137 -webkit-transform: rotate(360deg);
138 transform: rotate(360deg);
139 }
140 }
141 @keyframes wpuf_form_builder_loader {
142 0% {
143 -webkit-transform: rotate(0deg);
144 transform: rotate(0deg);
145 }
146 100% {
147 -webkit-transform: rotate(360deg);
148 transform: rotate(360deg);
149 }
150 }
151 #toast-container.toast-top-right {
152 top: 40px;
153 right: 18px;
154 }
155 #toast-container > div {
156 opacity: 1;
157 }
158 #toast-container > :hover {
159 opacity: .9;
160 }
161 .wp-core-ui .button-group.wpuf-flex-button-group {
162 position: relative;
163 z-index: 1;
164 display: flex;
165 flex-flow: row nowrap;
166 justify-content: flex-start;
167 align-content: center;
168 align-items: center;
169 }
170 .wp-core-ui .button-group.wpuf-flex-button-group .button {
171 flex-grow: 1;
172 flex-shrink: 1;
173 flex-basis: 0;
174 align-self: auto;
175 text-align: center;
176 }
177 .selectize-input {
178 padding: 6px 5px;
179 border: 1px solid #ddd;
180 }
181 .selectize-dropdown .active {
182 background-color: #0073aa;
183 color: #fff;
184 }
185 .selectize-element-group {
186 display: none;
187 }
188 .selectize-element-group + .selectize-control {
189 display: none;
190 }
191 .selectize-element-group.active + .selectize-control {
192 display: block;
193 margin-top: 10px;
194 }
195 .selectize-control.multi .selectize-input [data-value] {
196 text-shadow: 0 1px 0 rgba(0, 51, 83, 0.3);
197 -webkit-border-radius: 3px;
198 -moz-border-radius: 3px;
199 border-radius: 3px;
200 background-color: rgba(0, 115, 170, 0.64);
201 background-image: -moz-linear-gradient(top, rgba(0, 115, 170, 0.4), #0073aa);
202 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 115, 170, 0.4)), to(#0073aa));
203 background-image: -webkit-linear-gradient(top, rgba(0, 115, 170, 0.4), #0073aa);
204 background-image: -o-linear-gradient(top, rgba(0, 115, 170, 0.4), #0073aa);
205 background-image: linear-gradient(to bottom, rgba(0, 115, 170, 0.4), #0073aa);
206 background-repeat: repeat-x;
207 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#660073aa', endColorstr='#ff0073aa', GradientType=0);
208 -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.2),inset 0 1px rgba(255,255,255,0.03);
209 box-shadow: 0 1px 0 rgba(0,0,0,0.2),inset 0 1px rgba(255,255,255,0.03);
210 }
211 .selectize-control.multi .selectize-input [data-value].active {
212 background-color: rgba(0, 115, 170, 0.64);
213 background-image: -moz-linear-gradient(top, rgba(0, 115, 170, 0.4), #0073aa);
214 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 115, 170, 0.4)), to(#0073aa));
215 background-image: -webkit-linear-gradient(top, rgba(0, 115, 170, 0.4), #0073aa);
216 background-image: -o-linear-gradient(top, rgba(0, 115, 170, 0.4), #0073aa);
217 background-image: linear-gradient(to bottom, rgba(0, 115, 170, 0.4), #0073aa);
218 background-repeat: repeat-x;
219 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#660073aa', endColorstr='#ff0073aa', GradientType=0);
220 }
221 #wpuf-form-builder {
222 width: calc(100% - 200px);
223 padding-top: 10px;
224 position: fixed;
225 top: 25px;
226 background: #f1f1f1;
227 }
228 #wpuf-form-builder * {
229 box-sizing: border-box;
230 }
231 #wpuf-form-builder > fieldset > .nav-tab-wrapper .nav-tab:focus {
232 outline: 0;
233 -webkit-box-shadow: none;
234 box-shadow: none;
235 }
236 #wpuf-form-builder > fieldset > .nav-tab-wrapper .button {
237 font-weight: 400;
238 }
239 #wpuf-form-builder > fieldset > .tab-contents {
240 border-bottom: 1px solid #cccccc;
241 }
242 #wpuf-form-builder > fieldset > .tab-contents > .group {
243 display: none;
244 }
245 #wpuf-form-builder > fieldset > .tab-contents > .group.active {
246 display: block;
247 }
248 #wpuf-form-builder > fieldset > .tab-contents > .group:not(#wpuf-form-builder-container):not(#wpuf-form-builder-settings) {
249 height: calc(100vh - 125px);
250 overflow-y: auto;
251 padding-top: 15px;
252 }
253 #wpuf-form-builder .wpuf-settings-nav-tab-wrapper {
254 width: 200px;
255 }
256 #wpuf-form-builder .wp-picker-holder * {
257 box-sizing: content-box;
258 }
259 #wpuf-form-builder .tab-content {
260 height: calc(100vh - 140px);
261 overflow-y: auto;
262 margin-top: 15px;
263 }
264 #wpuf-form-builder-settings {
265 position: relative;
266 margin-top: 15px;
267 min-height: 380px;
268 }
269 #wpuf-form-builder-settings .nav-tab-wrapper {
270 position: absolute;
271 top: 0;
272 left: 0;
273 width: 170px;
274 border-bottom: 0;
275 }
276 #wpuf-form-builder-settings .nav-tab-wrapper a {
277 width: calc(100% - -1px);
278 margin-left: 0;
279 margin-bottom: .5em;
280 border-right: 1px solid #cccccc;
281 border-bottom: 1px solid #cccccc;
282 font-weight: 400;
283 font-size: 13px;
284 }
285 #wpuf-form-builder-settings .nav-tab-wrapper a.nav-tab-active {
286 border-right-color: #f1f1f1;
287 }
288 #wpuf-form-builder-settings .nav-tab-wrapper a:focus {
289 outline: 0;
290 -webkit-box-shadow: none;
291 box-shadow: none;
292 }
293 #wpuf-form-builder-settings .tab-contents {
294 margin-left: 170px;
295 border-left: 1px solid #cccccc;
296 padding-left: 20px;
297 }
298 #wpuf-form-builder-settings .tab-contents > .group {
299 display: none;
300 height: calc(100vh - 140px);
301 overflow-y: auto;
302 }
303 #wpuf-form-builder-settings .tab-contents > .group.active {
304 display: block;
305 }
306 #wpuf-form-builder-settings .tab-contents .form-table {
307 margin-top: 0;
308 }
309 #wpuf-form-builder-payment {
310 position: relative;
311 margin-top: 15px;
312 min-height: 380px;
313 }
314 #wpuf-form-builder-payment .nav-tab-wrapper {
315 position: absolute;
316 top: 0;
317 left: 0;
318 width: 170px;
319 border-bottom: 0;
320 }
321 #wpuf-form-builder-payment .nav-tab-wrapper a {
322 width: calc(100% - -1px);
323 margin-left: 0;
324 margin-bottom: .5em;
325 border-right: 1px solid #cccccc;
326 border-bottom: 1px solid #cccccc;
327 font-weight: 400;
328 font-size: 13px;
329 }
330 #wpuf-form-builder-payment .nav-tab-wrapper a.nav-tab-active {
331 border-right-color: #f1f1f1;
332 }
333 #wpuf-form-builder-payment .nav-tab-wrapper a:focus {
334 outline: 0;
335 -webkit-box-shadow: none;
336 box-shadow: none;
337 }
338 #wpuf-form-builder-payment .tab-contents {
339 margin-left: 170px;
340 border-left: 1px solid #cccccc;
341 padding-left: 20px;
342 }
343 #wpuf-form-builder-payment .tab-contents > .group {
344 display: none;
345 height: calc(100vh - 140px);
346 overflow-y: auto;
347 }
348 #wpuf-form-builder-payment .tab-contents > .group.active {
349 display: block;
350 }
351 #wpuf-form-builder-payment .tab-contents .form-table {
352 margin-top: 0;
353 }
354 #wpuf-form-builder-container {
355 position: relative;
356 }
357 #wpuf-form-builder-container header {
358 height: 45px;
359 border-right: 1px solid #cccccc;
360 }
361 #wpuf-form-builder-container header .form-title {
362 cursor: pointer;
363 font-size: 1.3em;
364 font-weight: 600;
365 float: left;
366 margin-right: 10px;
367 margin-top: 10px;
368 line-height: 1.5;
369 max-width: 300px;
370 white-space: nowrap;
371 overflow: hidden;
372 text-overflow: ellipsis;
373 }
374 #wpuf-form-builder-container header .form-title:hover {
375 background-color: rgba(85, 85, 85, 0.2);
376 }
377 #wpuf-form-builder-container header .form-switcher-arrow {
378 cursor: pointer;
379 font-size: 24px;
380 margin-top: 10px;
381 line-height: 1;
382 width: 20px;
383 text-align: center;
384 }
385 #wpuf-form-builder-container header .form-switcher-arrow:hover {
386 background-color: rgba(85, 85, 85, 0.2);
387 }
388 #wpuf-form-builder-container header .form-id {
389 color: #fff;
390 background-color: #008ec2;
391 line-height: 170%;
392 padding: 0 8px;
393 border-radius: 2px;
394 font-size: 13px;
395 display: inline-block;
396 margin: 10px 0 0 15px;
397 cursor: pointer;
398 }
399 #wpuf-form-builder-container section {
400 height: calc(100vh - 170px);
401 overflow-y: auto;
402 }
403 #wpuf-form-builder-container #builder-form-fields {
404 position: absolute;
405 top: 0;
406 right: 0;
407 width: 360px;
408 }
409 #wpuf-form-builder-container #builder-form-fields header ul {
410 margin: 0;
411 }
412 #wpuf-form-builder-container #builder-form-fields header ul li {
413 width: 50%;
414 text-align: center;
415 float: left;
416 line-height: 1;
417 margin: 0;
418 }
419 #wpuf-form-builder-container #builder-form-fields header ul li a {
420 text-decoration: none;
421 line-height: 44px;
422 display: block;
423 background-color: #e5e5e5;
424 color: #777;
425 border-bottom: 1px solid #cccccc;
426 -webkit-transition: background-color 0.4s;
427 -o-transition: background-color 0.4s;
428 transition: background-color 0.4s;
429 }
430 #wpuf-form-builder-container #builder-form-fields header ul li a:hover {
431 background-color: #f2f2f2;
432 }
433 #wpuf-form-builder-container #builder-form-fields header ul li a:focus {
434 outline: 0;
435 -webkit-box-shadow: none;
436 box-shadow: none;
437 }
438 #wpuf-form-builder-container #builder-form-fields header ul li.active a {
439 background-color: #fff;
440 color: #444;
441 border-bottom: 1px solid #fff;
442 }
443 #wpuf-form-builder-container #builder-form-fields header ul li:first-child {
444 border-right: 1px solid #cccccc;
445 }
446 #wpuf-form-builder-container #builder-form-fields section {
447 background-color: #fff;
448 border-right: 1px solid #cccccc;
449 }
450 #wpuf-form-builder-container #builder-form-fields section .wpuf-form-builder-panel {
451 padding: 10px;
452 }
453 #wpuf-form-builder-container #builder-stage {
454 margin-right: 360px;
455 }
456 #wpuf-form-builder-container #builder-stage section {
457 background-color: #6b6b6b;
458 padding: 30px;
459 }
460 #wpuf-form-builder-container #builder-stage section #form-preview {
461 background-color: #fff;
462 -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
463 box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
464 padding: 25px;
465 max-width: 800px;
466 margin: 0 auto;
467 }
468 #form-preview-stage .field-items {
469 position: relative;
470 background-color: #fff;
471 }
472 #form-preview-stage .field-items .control-buttons {
473 position: absolute;
474 top: 0;
475 left: 0;
476 z-index: 10;
477 display: none;
478 width: 100%;
479 height: 100%;
480 margin: 0;
481 text-align: center;
482 background: rgba(255, 185, 0, 0.08);
483 border: 1px dashed #ffb900;
484 }
485 #form-preview-stage .field-items .control-buttons p {
486 position: absolute;
487 top: 50%;
488 left: 50%;
489 margin: -14px 0 0 -61px;
490 line-height: 1;
491 color: #eee;
492 background-color: #23282d;
493 }
494 #form-preview-stage .field-items .control-buttons i {
495 cursor: pointer;
496 padding: 8px;
497 }
498 #form-preview-stage .field-items .control-buttons i.move {
499 cursor: move;
500 }
501 #form-preview-stage .field-items .control-buttons i:hover {
502 background-color: #0073aa;
503 }
504 #form-preview-stage .field-items:hover .control-buttons {
505 display: block;
506 }
507 #form-preview-stage .field-items.current-editing {
508 background-color: rgba(255, 185, 0, 0.15);
509 }
510 #form-preview-stage .field-items.current-editing.ui-sortable-helper {
511 background-color: #fff;
512 }
513 #form-preview-stage .field-items.ui-sortable-helper {
514 -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
515 box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
516 }
517 #form-preview-stage .form-preview-stage-dropzone {
518 background-color: rgba(255, 185, 0, 0.3) !important;
519 border: 1px solid #ffb900;
520 height: 50px;
521 }
522 #form-preview-stage .wpuf-submit + .button + .form-preview-stage-dropzone,
523 #form-preview-stage .field-items.empty-list-item + .form-preview-stage-dropzone {
524 display: none;
525 }
526 #form-preview-stage .field-items.empty-list-item {
527 padding: 24px;
528 margin: 0;
529 border: 1px dashed rgba(35, 40, 45, 0.5);
530 }
531 #form-preview-stage .form-preview-stage-dropzone + .field-items.empty-list-item {
532 display: none;
533 }
534 #form-preview-stage .hidden-field-list {
535 border-top: 1px dashed #cccccc;
536 }
537 #form-preview-stage .hidden-field-list h4 {
538 font-weight: 400;
539 font-size: 16px;
540 margin: 12px 0;
541 }
542 #form-preview-stage .hidden-field-list ul li {
543 background-color: #f1f1f1;
544 }
545 .panel-form-field-group {
546 margin-bottom: 15px;
547 }
548 .panel-form-field-group h3 {
549 margin: 0;
550 font-size: 15px;
551 border-bottom: 1px solid #eee;
552 padding-bottom: 10px;
553 cursor: pointer;
554 }
555 .panel-form-field-group h3 i {
556 float: right;
557 }
558 .panel-form-field-group .panel-form-field-buttons {
559 opacity: 1;
560 max-height: 100vh;
561 overflow: hidden;
562 margin: 15px 0 0;
563 }
564 .panel-form-field-group .button {
565 display: block;
566 width: 48%;
567 margin: 0 0 10px 0;
568 float: left;
569 text-align: left;
570 }
571 .panel-form-field-group .button:nth-child(odd) {
572 margin-right: 2%;
573 }
574 .panel-form-field-group .button.button-faded {
575 opacity: .5;
576 }
577 .button.ui-draggable-dragging {
578 margin: 0;
579 text-align: left;
580 }
581 .wpuf-form-builder-field-options .option-fields-section {
582 margin-bottom: 15px;
583 }
584 .wpuf-form-builder-field-options .section-title {
585 margin: 0;
586 font-size: 15px;
587 border-bottom: 1px solid #eee;
588 padding-bottom: 10px;
589 cursor: pointer;
590 }
591 .wpuf-form-builder-field-options .section-title i {
592 float: right;
593 }
594 .wpuf-form-builder-field-options .option-field-section-fields {
595 margin-top: 15px;
596 max-height: 150vh;
597 opacity: 1;
598 }
599 .wpuf-form-builder-field-options .panel-field-opt {
600 margin-bottom: 15px;
601 }
602 .wpuf-form-builder-field-options .panel-field-opt .field-helper-text {
603 color: rgba(35, 40, 45, 0.5);
604 margin-left: 6px;
605 }
606 .wpuf-form-builder-field-options .panel-field-opt.panel-field-opt-text input[type="text"],
607 .wpuf-form-builder-field-options .panel-field-opt.panel-field-opt-text input[type="number"] {
608 display: block;
609 width: 100%;
610 margin: 5px 0 0;
611 line-height: 1.75;
612 }
613 .wpuf-form-builder-field-options .panel-field-opt.panel-field-opt-radio > label {
614 display: block;
615 margin-bottom: 5px;
616 }
617 .wpuf-form-builder-field-options .panel-field-opt.panel-field-opt-radio > ul {
618 margin-top: 0;
619 margin-bottom: 0;
620 }
621 .wpuf-form-builder-field-options .panel-field-opt.panel-field-opt-select select {
622 width: 100%;
623 height: 32px;
624 margin: 4px 0 0;
625 }
626 .wpuf-form-builder-field-options .panel-field-opt .chosen-select + .chosen-container {
627 margin-top: 10px;
628 }
629 .wpuf-form-builder-field-options .panel-field-opt .label-title-block {
630 display: block;
631 margin-bottom: 3px;
632 }
633 .option-field-option-chooser {
634 margin: 12px 0 0;
635 }
636 .option-field-option-chooser.margin-0 {
637 margin: 0;
638 }
639 .option-field-option-chooser .selector,
640 .option-field-option-chooser .sort-handler,
641 .option-field-option-chooser .label,
642 .option-field-option-chooser .value,
643 .option-field-option-chooser .action-buttons {
644 float: left;
645 }
646 .option-field-option-chooser .selector {
647 width: 25px;
648 }
649 .option-field-option-chooser .selector input {
650 margin-top: 14px;
651 }
652 .option-field-option-chooser .sort-handler {
653 width: 22px;
654 cursor: ns-resize;
655 }
656 .option-field-option-chooser .sort-handler i {
657 margin-top: 14px;
658 font-size: 15px;
659 }
660 .option-field-option-chooser .label {
661 width: 208px;
662 margin-right: 8px;
663 }
664 .option-field-option-chooser.show-value .label,
665 .option-field-option-chooser.show-value .value {
666 width: 100px;
667 margin-right: 8px;
668 }
669 .option-field-option-chooser .header .label,
670 .option-field-option-chooser .header .value {
671 color: #909090;
672 }
673 .option-field-option-chooser .action-buttons {
674 width: 36px;
675 }
676 .option-field-option-chooser .action-buttons i {
677 cursor: pointer;
678 font-size: 16px;
679 margin-top: 13px;
680 }
681 .option-field-option-chooser .plus-buttons {
682 padding: 5px;
683 font-size: 18px;
684 text-align: center;
685 cursor: pointer;
686 border: 1px solid #ccc;
687 width: 61%;
688 margin-left: 14%;
689 }
690 .panel-field-opt-repeater-columns .repeater-columns li > div {
691 float: left;
692 }
693 .panel-field-opt-repeater-columns .repeater-columns .sorter {
694 width: 30px;
695 }
696 .panel-field-opt-repeater-columns .repeater-columns .sorter i {
697 cursor: ns-resize;
698 font-size: 16px;
699 margin-top: 5px;
700 }
701 .panel-field-opt-repeater-columns .repeater-columns .input-container {
702 width: 195px;
703 margin-right: 10px;
704 }
705 .panel-field-opt-repeater-columns .repeater-columns .input-container input {
706 width: 100%;
707 }
708 .panel-field-opt-repeater-columns .repeater-columns .action-buttons {
709 width: 50px;
710 }
711 .panel-field-opt-repeater-columns .repeater-columns .action-buttons i {
712 cursor: pointer;
713 font-size: 16px;
714 padding: 0 3px;
715 margin-top: 4px;
716 }
717 .panel-field-opt-textarea textarea {
718 display: block;
719 width: 100%;
720 margin: 5px 0 0;
721 line-height: 1.75;
722 }
723 .panel-field-html-help-text pre {
724 max-width: 100%;
725 overflow-x: auto;
726 }
727 .panel-field-opt-select .opt-select-element {
728 display: block;
729 max-width: 100%;
730 }
731 ul.wpuf-form li .wpuf-text-editor .wp-editor-wrap {
732 border: 0;
733 }
734 .form-switcher-content {
735 position: absolute;
736 background-color: #f9f9f9;
737 min-width: 160px;
738 box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
739 z-index: 9999;
740 margin: 0;
741 }
742 .form-switcher-content li {
743 margin: 0;
744 }
745 .form-switcher-content a {
746 color: black;
747 padding: 12px;
748 text-decoration: none;
749 display: block;
750 text-align: center;
751 }
752 .form-switcher-content a:hover {
753 color: #fff;
754 background-color: #008ec2;
755 }
756 .form-switcher-content a.active {
757 font-weight: bold;
758 color: #fff;
759 background-color: #008ec2;
760 }
761 .insert-photo-icon {
762 vertical-align: text-top;
763 color: #82878c;
764 font-size: 18px;
765 }
766 .password-strength-meter {
767 border-style: solid;
768 border-width: 1px;
769 float: left;
770 margin: 0;
771 padding: 3px 5px;
772 text-align: center;
773 width: 200px;
774 display: block;
775 background-color: #eee;
776 border-color: #ddd;
777 }
778 ul.wpuf-form li .wpuf-password-field {
779 width: 100%;
780 margin-bottom: 10px;
781 }
782 ul.wpuf-form li .wpuf-password-field:after {
783 clear: both;
784 content: "";
785 display: table;
786 }
787 .wpuf-recaptcha-placeholder {
788 width: 304px;
789 }
790 .wpuf-merge-tag-wrap .merge-tag-link {
791 position: absolute;
792 right: 5px;
793 top: 30px;
794 color: #999;
795 text-decoration: none;
796 }
797 .wpuf-merge-tag-wrap .merge-tag-link:hover {
798 color: #555;
799 }
800 .wpuf-merge-tag-wrap .wpuf-merge-tags {
801 max-height: 110px;
802 overflow: hidden;
803 overflow-y: scroll;
804 border: 1px solid #e5e5e5;
805 box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.04);
806 display: none;
807 position: absolute;
808 right: 0px;
809 top: 60px;
810 background: #fff;
811 z-index: 1000;
812 min-height: 150px;
813 }
814 .wpuf-merge-tag-wrap .wpuf-merge-tags .merge-tag-head {
815 font-weight: bold;
816 background: #f0f0f0;
817 padding: 3px 10px;
818 }
819 .wpuf-merge-tag-wrap .wpuf-merge-tags .merge-tag-section ul {
820 margin: 0;
821 padding: 5px 10px;
822 }
823 .wpuf-form-template-modal {
824 background: #fff;
825 position: fixed;
826 top: 5%;
827 bottom: 5%;
828 right: 10%;
829 left: 10%;
830 display: none;
831 box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1);
832 z-index: 160000;
833 }
834 .wpuf-form-template-modal.show {
835 display: block;
836 }
837 .wpuf-form-template-modal * {
838 box-sizing: border-box;
839 }
840 .wpuf-form-template-modal a.close {
841 position: absolute;
842 top: 0;
843 right: 0;
844 font: 300 1.71429em "dashicons" !important;
845 color: #777;
846 content: '\f335';
847 display: inline-block;
848 padding: 10px 20px;
849 z-index: 5;
850 text-decoration: none;
851 height: 50px;
852 cursor: pointer;
853 border-left: 1px solid #ddd;
854 }
855 .wpuf-form-template-modal a.close:hover {
856 background: #eee;
857 opacity: 0.8;
858 text-decoration: none;
859 }
860 .wpuf-form-template-modal a.close:active {
861 background: #eee;
862 opacity: 0.4;
863 }
864 .wpuf-form-template-modal .modal-header {
865 position: absolute;
866 top: 0;
867 left: 0;
868 right: 0;
869 height: 50px;
870 z-index: 4;
871 border-bottom: 1px solid #ddd;
872 padding-left: 15px;
873 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
874 }
875 .wpuf-form-template-modal .modal-header h2 {
876 line-height: 50px;
877 text-align: left;
878 margin-top: 0;
879 color: #5d6d74;
880 font-size: 20px;
881 text-shadow: 0 1px 1px #fff;
882 }
883 .wpuf-form-template-modal .modal-header h2 small {
884 font-weight: normal;
885 font-size: 13px;
886 margin-left: 15px;
887 }
888 .wpuf-form-template-modal .content-container {
889 position: absolute;
890 top: 50px;
891 right: 0;
892 bottom: 50px;
893 left: 0;
894 overflow: auto;
895 padding: 2em 2em;
896 }
897 .wpuf-form-template-modal .content-container.no-footer {
898 bottom: 0;
899 }
900 .wpuf-form-template-modal .content {
901 margin: 0 auto;
902 max-width: 900px;
903 text-align: left;
904 }
905 .wpuf-form-template-modal .content ul {
906 width: 100%;
907 margin: 0;
908 padding: 0;
909 }
910 .wpuf-form-template-modal .content ul li {
911 float: left;
912 width: 31.292517006803%;
913 border: 1px solid #e4e4e4;
914 padding: 0;
915 margin-left: 3.0612244897959%;
916 margin-bottom: 30px;
917 position: relative;
918 min-height: 120px;
919 }
920 .wpuf-form-template-modal .content ul li.on-progress:before {
921 content: "\f463";
922 display: inline-block;
923 font: normal 20px/1 'dashicons';
924 color: #f56e28;
925 -webkit-animation: rotation 2s infinite linear;
926 animation: rotation 2s infinite linear;
927 position: absolute;
928 top: 40%;
929 left: 45%;
930 }
931 .wpuf-form-template-modal .content ul li.on-progress a {
932 pointer-events: none;
933 opacity: 0.2;
934 }
935 .wpuf-form-template-modal .content ul li:hover {
936 background: #F5F5F5;
937 }
938 .wpuf-form-template-modal .content ul li a {
939 text-decoration: none;
940 color: #555;
941 padding: 20px;
942 display: block;
943 min-height: 118px;
944 }
945 .wpuf-form-template-modal .content ul li .title {
946 font-size: 17px;
947 margin: 0 0 10px 0;
948 line-height: 23px;
949 }
950 .wpuf-form-template-modal .content ul li .description {
951 color: #888;
952 }
953 .wpuf-form-template-modal .content ul li:nth-child(3n+1) {
954 margin-left: 0;
955 clear: both;
956 }
957 .wpuf-form-template-modal .content ul li.template-inactive .title,
958 .wpuf-form-template-modal .content ul li.template-inactive .description {
959 color: #ddd;
960 }
961 .wpuf-form-template-modal .content ul li.blank-form {
962 text-align: center;
963 }
964 .wpuf-form-template-modal .content ul li.blank-form span {
965 display: block;
966 }
967 .wpuf-form-template-modal .content ul li.blank-form span.dashicons {
968 font-size: 45px;
969 color: #ddd;
970 margin: 0 auto;
971 width: auto;
972 height: auto;
973 }
974 .wpuf-form-template-modal footer {
975 position: absolute;
976 left: 0;
977 bottom: 0;
978 width: 100%;
979 padding: 12px 20px;
980 border-top: 1px solid #ddd;
981 background: #fff;
982 text-align: left;
983 }
984 .wpuf-form-template-modal-backdrop {
985 position: fixed;
986 z-index: 159999;
987 top: 0;
988 left: 0;
989 right: 0;
990 bottom: 0;
991 min-height: 360px;
992 background: #000;
993 opacity: .7;
994 display: none;
995 }
996 .wpuf-form-template-modal-backdrop.show {
997 display: block;
998 }
999 /* Smartphones (portrait and landscape) ----------- */
1000 @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
1001 .wpuf-form-template-modal .modal-header h2 small {
1002 display: none;
1003 }
1004 .wpuf-form-template-modal .content ul li {
1005 float: none;
1006 width: 100%;
1007 margin-left: 0;
1008 }
1009 }
1010 .wpuf-toggle-switch {
1011 cursor: pointer;
1012 text-indent: -9999px;
1013 width: 25px;
1014 height: 15px;
1015 background: #ccc;
1016 display: block;
1017 border-radius: 100px;
1018 position: relative;
1019 }
1020 .wpuf-toggle-switch:after {
1021 content: '';
1022 position: absolute;
1023 top: 2px;
1024 left: 2px;
1025 width: 12px;
1026 height: 12px;
1027 background: #fff;
1028 border-radius: 50%;
1029 transition: 0.3s;
1030 }
1031 .wpuf-toggle-switch.checked {
1032 background: #0085ba;
1033 }
1034 .wpuf-toggle-switch.checked:after {
1035 left: calc(90%);
1036 transform: translateX(-100%);
1037 }
1038 .wpuf-toggle-switch.big {
1039 width: 35px;
1040 height: 20px;
1041 }
1042 .wpuf-toggle-switch.big:after {
1043 top: 3px;
1044 left: 3px;
1045 width: 15px;
1046 height: 15px;
1047 }
1048 .wpuf-toggle-switch.big.checked:after {
1049 left: calc(95%);
1050 }
1051 .wpuf-integrations-wrap:before,
1052 .wpuf-integrations-wrap:after {
1053 content: " ";
1054 display: table;
1055 }
1056 .wpuf-integrations-wrap:after {
1057 clear: both;
1058 }
1059 .wpuf-integrations-wrap:before,
1060 .wpuf-integrations-wrap:after {
1061 content: " ";
1062 display: table;
1063 }
1064 .wpuf-integrations-wrap:after {
1065 clear: both;
1066 }
1067 .wpuf-integrations-wrap .wpuf-integration {
1068 margin-bottom: 15px;
1069 background-color: #fff;
1070 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
1071 border: 1px solid #e5e5e5;
1072 }
1073 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-header {
1074 padding: 0;
1075 position: relative;
1076 margin: 0 auto;
1077 border-bottom: 1px solid #eee;
1078 display: flex;
1079 flex-direction: row;
1080 }
1081 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-header .wpuf-integration-header-toggle {
1082 width: 65px;
1083 padding: 10px 10px 8px 14px;
1084 border-right: 1px solid #eee;
1085 margin-right: 10px;
1086 }
1087 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-header .wpuf-integration-header-label {
1088 width: 100%;
1089 padding-top: 10px;
1090 font-weight: 500;
1091 font-size: 1.1em;
1092 }
1093 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-header .wpuf-integration-header-label img.icon {
1094 height: 24px;
1095 width: auto;
1096 float: left;
1097 margin-top: -3px;
1098 margin-right: 5px;
1099 border: 1px solid #eee;
1100 border-radius: 50%;
1101 }
1102 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-header .wpuf-integration-header-label .label-premium {
1103 font-weight: normal;
1104 font-size: 11px;
1105 background: #7cbb34;
1106 color: #fff;
1107 border-radius: 3px;
1108 padding: 3px 5px;
1109 margin-left: 5px;
1110 }
1111 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-header .wpuf-integration-header-actions {
1112 width: 44px;
1113 display: block;
1114 }
1115 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-header .wpuf-integration-header-actions button.toggle-area {
1116 border: none;
1117 border-left: 1px solid #eee;
1118 background-color: #fff;
1119 width: 100%;
1120 height: 100%;
1121 outline: none;
1122 }
1123 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-header .wpuf-integration-header-actions .toggle-indicator:before {
1124 content: "\f140";
1125 content: "\f142";
1126 display: inline-block;
1127 font: normal 20px/1 dashicons;
1128 speak: none;
1129 -webkit-font-smoothing: antialiased;
1130 -moz-osx-font-smoothing: grayscale;
1131 text-decoration: none !important;
1132 }
1133 .wpuf-integrations-wrap .wpuf-integration.collapsed .wpuf-integration-settings {
1134 display: none;
1135 }
1136 .wpuf-integrations-wrap .wpuf-integration.collapsed .wpuf-integration-header .wpuf-integration-header-actions .toggle-indicator:before {
1137 content: "\f140";
1138 }
1139 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings {
1140 padding: 15px;
1141 }
1142 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings p:first-child {
1143 margin-top: 0;
1144 }
1145 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row {
1146 margin-bottom: 10px;
1147 }
1148 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row:before,
1149 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row:after {
1150 content: " ";
1151 display: table;
1152 }
1153 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row:after {
1154 clear: both;
1155 }
1156 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row:before,
1157 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row:after {
1158 content: " ";
1159 display: table;
1160 }
1161 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row:after {
1162 clear: both;
1163 }
1164 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row .wpuf-int-field-label {
1165 float: left;
1166 width: 160px;
1167 }
1168 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row .wpuf-int-field-label a.wpuf-integration-updater {
1169 text-decoration: none;
1170 float: right;
1171 margin-right: 10px;
1172 }
1173 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row .wpuf-int-field-label a.wpuf-integration-updater.updating .dashicons:before {
1174 display: inline-block;
1175 -webkit-animation: rotation 2s infinite linear;
1176 animation: rotation 2s infinite linear;
1177 }
1178 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row .wpuf-int-field {
1179 float: left;
1180 width: 80%;
1181 position: relative;
1182 }
1183 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row .wpuf-int-field .wpuf-int-field-small {
1184 max-width: 350px;
1185 position: relative;
1186 }
1187 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row .wpuf-int-field .wpuf-merge-tag-wrap .merge-tag-link {
1188 top: 5px;
1189 }
1190 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row .wpuf-int-field .wpuf-merge-tag-wrap .wpuf-merge-tags {
1191 top: 30px;
1192 }
1193 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings fieldset {
1194 border: 1px solid #eee;
1195 padding: 10px;
1196 margin-bottom: 10px;
1197 }
1198 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings fieldset legend {
1199 padding: 0 10px;
1200 }
1201