PluginProbe
weForms – Easy Drag & Drop Contact Form Builder For WordPress / 1.6.17
weForms – Easy Drag & Drop Contact Form Builder For WordPress v1.6.17
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 / css / admin.css

admin.css in weForms – Easy Drag & Drop Contact Form Builder For WordPress 1.6.17, at assets/css/admin.css

1,655 lines 41.5 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 th.col-form-name {
2 width: 25%;
3 }
4 th.col-form-shortcode {
5 width: 25%;
6 }
7 th.col-form-entries,
8 th.col-form-views,
9 th.col-form-conversion {
10 width: 10%;
11 }
12 th.col-entry-details {
13 width: 10%;
14 }
15 table.wpuf-contact-form td,
16 table.wpuf-contact-form th {
17 vertical-align: top;
18 }
19 .wpuf-form-builder-field-options .panel-field-opt.panel-field-name > label {
20 display: block;
21 clear: both;
22 }
23 .wpuf-form-builder-field-options .panel-field-opt.panel-field-name .name-field-placeholder,
24 .wpuf-form-builder-field-options .panel-field-opt.panel-field-name .name-field-value {
25 float: left;
26 width: 48%;
27 }
28 .wpuf-form-builder-field-options .panel-field-opt.panel-field-name .name-field-placeholder label,
29 .wpuf-form-builder-field-options .panel-field-opt.panel-field-name .name-field-value label {
30 font-size: 10px;
31 }
32 .wpuf-form-builder-field-options .panel-field-opt.panel-field-name .name-field-placeholder {
33 margin-right: 4%;
34 }
35 .wpuf-contact-form-entry-wrap {
36 margin-top: 20px;
37 width: 100%;
38 overflow: hidden;
39 }
40 .wpuf-contact-form-entry-wrap .wpuf-contact-form-entry-left {
41 float: left;
42 width: 70%;
43 }
44 .wpuf-contact-form-entry-wrap .wpuf-contact-form-entry-left.weforms-quiz-entry .field-points {
45 float: right;
46 }
47 .wpuf-contact-form-entry-wrap .wpuf-contact-form-entry-left.weforms-quiz-entry .field-value.right-answer {
48 background: #dff0d8;
49 }
50 .wpuf-contact-form-entry-wrap .wpuf-contact-form-entry-left.weforms-quiz-entry .field-value.wrong-answer {
51 background: #FFE4E4;
52 }
53 .wpuf-contact-form-entry-wrap .wpuf-contact-form-entry-right {
54 float: right;
55 width: 28%;
56 }
57 .wpuf-contact-form-entry-wrap h2.hndle {
58 padding: 8px 12px;
59 margin: 0;
60 font-size: 14px;
61 }
62 .wpuf-contact-form-entry-wrap table.widefat {
63 border: none;
64 }
65 .wpuf-contact-form-entry-wrap .button .dashicons {
66 margin-top: 4px;
67 }
68 .postboxes.two-col {
69 display: flex;
70 flex-wrap: wrap;
71 width: 100%;
72 }
73 .postboxes.two-col .postbox {
74 width: 48%;
75 display: flex;
76 flex-direction: column;
77 }
78 .postboxes.two-col .postbox:nth-child(2n+1) {
79 margin-right: 3%;
80 }
81 .postboxes.two-col .postbox:nth-child(2n+2) {
82 margin-right: 0;
83 }
84 .postboxes.two-col .submit-wrapper {
85 margin-top: auto;
86 text-align: right;
87 padding-right: 10px;
88 border-top: 1px solid #eee;
89 padding-top: 10px;
90 background: #fafafa;
91 padding-bottom: 10px;
92 }
93 .export-import-wrap select.forms-list {
94 min-width: 300px;
95 }
96 .export-import-wrap .loading-spinner {
97 float: none;
98 display: block;
99 margin: 0 auto;
100 margin-top: 20px;
101 }
102 .export-import-wrap .upload-status .spinner {
103 float: none;
104 display: inline-block;
105 margin: 0;
106 background-size: 18px 18px;
107 }
108 .weforms-premium .wp-badge {
109 background: #40ce65 url(../images/weforms-pro.png) no-repeat;
110 background-size: 100px 90px;
111 background-position: 35px 5px;
112 }
113 .weforms-premium .weforms-upgrade-sticky-footer {
114 position: fixed;
115 bottom: 0;
116 background: #fff;
117 width: calc(100% - 195px);
118 z-index: 9;
119 margin-left: -25px;
120 text-align: center;
121 border: 1px solid #dfdfdf;
122 padding: 20px 0;
123 border-bottom: none;
124 }
125 .weforms-premium .four-col .col {
126 -webkit-align-self: flex-start;
127 -ms-flex-item-align: start;
128 align-self: flex-start;
129 min-width: 23%;
130 max-width: 23%;
131 }
132 a.add-notification .dashicons {
133 margin-top: 4px;
134 }
135 .notification-wrap {
136 width: 100%;
137 overflow: hidden;
138 display: block;
139 margin-top: 20px;
140 }
141 .notification-wrap .notification-row.notification-field .mce-tinymce {
142 border: 1px solid #ddd;
143 }
144 .notification-wrap .notification-row.notification-field .mce-tinymce .mce-i-shortcode::before {
145 font-family: dashicons;
146 content: "\f475";
147 }
148 .notification-wrap .notification-table-wrap {
149 width: 100%;
150 }
151 .notification-wrap .notification-table-wrap table.wpuf-cf-notification-table {
152 width: 70%;
153 transition: width 0.3s ease-in-out;
154 }
155 .notification-wrap .notification-table-wrap table.wpuf-cf-notification-table .col-toggle {
156 width: 35px;
157 }
158 .notification-wrap .notification-table-wrap table.wpuf-cf-notification-table .col-name {
159 width: 35%;
160 }
161 .notification-wrap .notification-table-wrap table.wpuf-cf-notification-table .col-name a {
162 font-weight: bold;
163 }
164 .notification-wrap .notification-table-wrap table.wpuf-cf-notification-table .col-action {
165 width: 15%;
166 }
167 .notification-wrap .notification-edit-area {
168 background: #fff;
169 border: 1px solid #e5e5e5;
170 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
171 margin-bottom: 30px;
172 display: none;
173 }
174 .notification-wrap .notification-edit-area a {
175 text-decoration: none;
176 }
177 .notification-wrap .notification-edit-area .notification-head {
178 padding: 8px 10px;
179 background: #f9f9f9;
180 border-bottom: 1px solid #e1e1e1;
181 margin-bottom: 15px;
182 }
183 .notification-wrap .notification-edit-area .notification-head input {
184 width: 100%;
185 padding: 8px;
186 }
187 .notification-wrap .notification-edit-area .form-fields {
188 padding: 8px 10px;
189 }
190 .notification-wrap .notification-edit-area .form-fields input,
191 .notification-wrap .notification-edit-area .form-fields textarea {
192 width: 100%;
193 padding: 6px 25px 6px 6px;
194 }
195 .notification-wrap .notification-edit-area .form-fields input[type='radio'] {
196 width: auto;
197 }
198 .notification-wrap .notification-edit-area .form-fields .notification-row {
199 margin-bottom: 10px;
200 position: relative;
201 }
202 .notification-wrap .notification-edit-area .form-fields .notification-row:after {
203 clear: both;
204 content: "";
205 display: table;
206 }
207 .notification-wrap .notification-edit-area .form-fields .row-one-half {
208 float: left;
209 width: 48%;
210 position: relative;
211 }
212 .notification-wrap .notification-edit-area .form-fields .row-one-half.first {
213 margin-right: 4%;
214 }
215 .notification-wrap .notification-edit-area .form-fields label {
216 display: block;
217 padding-bottom: 5px;
218 }
219 .notification-wrap .notification-edit-area .form-fields .advanced-field-wrap {
220 display: none;
221 }
222 .notification-wrap .notification-edit-area .form-fields .notification-conditional-logic .help {
223 margin-bottom: 0px;
224 }
225 .notification-wrap .notification-edit-area .form-fields .notification-conditional-logic .condition-status {
226 margin-bottom: 0px;
227 margin-top: 8px;
228 }
229 .notification-wrap .notification-edit-area .form-fields .notification-conditional-logic .condiotional-logic-repeater {
230 margin: 8px 0px;
231 }
232 .notification-wrap .notification-edit-area .submit-area {
233 padding: 8px 10px;
234 background: #f9f9f9;
235 border-top: 1px solid #e1e1e1;
236 margin-top: 5px;
237 }
238 .notification-wrap .notification-edit-area .submit-area:after {
239 clear: both;
240 content: "";
241 display: table;
242 }
243 .notification-wrap .notification-edit-area .submit-area .button {
244 float: right;
245 }
246 .notification-wrap.editing .notification-table-wrap {
247 width: 40%;
248 float: left;
249 }
250 .notification-wrap.editing .notification-table-wrap table.wpuf-cf-notification-table .col-toggle,
251 .notification-wrap.editing .notification-table-wrap table.wpuf-cf-notification-table .col-subject,
252 .notification-wrap.editing .notification-table-wrap table.wpuf-cf-notification-table .col-action {
253 display: none;
254 }
255 .notification-wrap.editing .notification-edit-area {
256 float: right;
257 width: 60%;
258 display: block;
259 }
260 /* Make clicks pass-through */
261 #nprogress {
262 pointer-events: none;
263 /* Fancy blur effect */
264 /* Remove these to get rid of the spinner */
265 }
266 #nprogress .bar {
267 background: #29d;
268 position: fixed;
269 z-index: 1031;
270 top: 0;
271 left: 0;
272 width: 100%;
273 height: 2px;
274 }
275 #nprogress .peg {
276 display: block;
277 position: absolute;
278 right: 0px;
279 width: 100px;
280 height: 100%;
281 box-shadow: 0 0 10px #29d, 0 0 5px #29d;
282 opacity: 1.0;
283 -webkit-transform: rotate(3deg) translate(0px, -4px);
284 -ms-transform: rotate(3deg) translate(0px, -4px);
285 transform: rotate(3deg) translate(0px, -4px);
286 }
287 #nprogress .spinner {
288 display: block;
289 position: fixed;
290 z-index: 1031;
291 top: 15px;
292 right: 15px;
293 }
294 #nprogress .spinner-icon {
295 width: 18px;
296 height: 18px;
297 box-sizing: border-box;
298 border: solid 2px transparent;
299 border-top-color: #29d;
300 border-left-color: #29d;
301 border-radius: 50%;
302 -webkit-animation: nprogress-spinner 400ms linear infinite;
303 animation: nprogress-spinner 400ms linear infinite;
304 }
305 .nprogress-custom-parent {
306 overflow: hidden;
307 position: relative;
308 }
309 .nprogress-custom-parent #nprogress .spinner,
310 .nprogress-custom-parent #nprogress .bar {
311 position: absolute;
312 }
313 .weforms-modules {
314 margin-top: 15px;
315 overflow: hidden;
316 }
317 .weforms-modules .plugin-card {
318 border: 1px solid #e5e5e5;
319 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
320 }
321 .weforms-modules .plugin-card .plugin-name {
322 color: #0073aa;
323 }
324 .weforms-modules .plugin-card .desc,
325 .weforms-modules .plugin-card .name {
326 margin-left: 115px;
327 }
328 .weforms-modules .plugin-card .plugin-card-top {
329 min-height: 105px;
330 }
331 .weforms-modules .plugin-card .plugin-icon {
332 width: 96px;
333 height: 96px;
334 margin: 0 20px 0px 0;
335 }
336 .weforms-modules .activate-deactivate-all {
337 margin-top: 15px;
338 }
339 .weforms-modules .activate-deactivate-all a {
340 text-decoration: none;
341 }
342 .weforms-help-page {
343 display: flex;
344 flex-wrap: wrap;
345 align-items: center;
346 margin-top: 30px;
347 }
348 .weforms-help-page * {
349 box-sizing: border-box;
350 }
351 .weforms-help-page .help-block {
352 flex: 1;
353 align-self: flex-start;
354 min-width: 31%;
355 max-width: 32%;
356 border: 1px solid #ddd;
357 margin-right: 2%;
358 margin-bottom: 25px;
359 border-radius: 3px;
360 padding: 25px 15px;
361 text-align: center;
362 background: #fff;
363 }
364 .weforms-help-page .help-block:hover {
365 background: #f9f9f9;
366 }
367 .weforms-help-page .help-block img {
368 max-height: 70px;
369 }
370 @-webkit-keyframes nprogress-spinner {
371 0% {
372 -webkit-transform: rotate(0deg);
373 }
374 100% {
375 -webkit-transform: rotate(360deg);
376 }
377 }
378 @keyframes nprogress-spinner {
379 0% {
380 transform: rotate(0deg);
381 }
382 100% {
383 transform: rotate(360deg);
384 }
385 }
386 @keyframes color-me-in {
387 /* You could think of as "step 1" */
388 0% {
389 background: orange;
390 }
391 /* You could think of as "step 2" */
392 100% {
393 background: black;
394 }
395 }
396 @keyframes weFormsZoomIn {
397 from {
398 opacity: 0;
399 transform: scale3d(0.3, 0.3, 0.3);
400 }
401 50% {
402 opacity: 1;
403 }
404 }
405 @keyframes weFormsFadeIn {
406 from {
407 opacity: 0;
408 }
409 to {
410 opacity: 1;
411 }
412 }
413 .wefroms-form-templates .wpuf-form-template-modal .choose-form-categroy {
414 float: right;
415 font-size: 14px;
416 margin-right: 70px;
417 font-weight: normal;
418 }
419 .wefroms-form-templates .wpuf-form-template-modal .content {
420 max-width: 985px;
421 }
422 .wefroms-form-templates .wpuf-form-template-modal .content h2 {
423 font-size: 15px;
424 color: #5d6d74;
425 width: 100%;
426 }
427 .wefroms-form-templates .wpuf-form-template-modal .content ul li:nth-child(3n+1) {
428 margin-left: 3.0612244897959% !important;
429 clear: none !important;
430 }
431 .wefroms-form-templates .wpuf-form-template-modal .content ul li:nth-child(4n+1) {
432 margin-left: 0 !important;
433 clear: both !important;
434 }
435 .wefroms-form-templates .wpuf-form-template-modal .content .blank-form .blank-form-text {
436 margin-top: 70px;
437 font-size: 15px;
438 }
439 .wefroms-form-templates .wpuf-form-template-modal .content .blank-form .blank-form-text .title {
440 color: #929292;
441 }
442 .wefroms-form-templates .wpuf-form-template-modal .content ul li {
443 text-align: center;
444 min-height: 280px;
445 width: 220px;
446 border: 0px;
447 box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1);
448 position: relative;
449 border-radius: 3px;
450 }
451 .wefroms-form-templates .wpuf-form-template-modal .content ul li img {
452 width: 100%;
453 }
454 .wefroms-form-templates .wpuf-form-template-modal .content ul li .form-create-overlay {
455 position: absolute;
456 display: none;
457 }
458 .wefroms-form-templates .wpuf-form-template-modal .content ul li:hover {
459 background: #fff;
460 }
461 .wefroms-form-templates .wpuf-form-template-modal .content ul li:hover .form-create-overlay {
462 animation: weFormsFadeIn .25s;
463 padding: 10px;
464 text-align: center;
465 display: flex;
466 flex-direction: column;
467 justify-content: center;
468 background: rgba(0, 0, 0, 0.7);
469 height: 100%;
470 width: 100%;
471 top: 0px;
472 left: 0px;
473 color: #fff;
474 border-radius: 3px;
475 }
476 .wefroms-form-templates .wpuf-form-template-modal .content ul li:hover .form-create-overlay .title {
477 color: #fff;
478 }
479 .wefroms-form-templates .wpuf-form-template-modal .content ul li:hover .form-create-overlay .description {
480 color: #fff;
481 }
482 .wefroms-form-templates .wpuf-form-template-modal .content ul li:hover .form-create-overlay button {
483 height: 30px;
484 }
485 .wefroms-form-templates .wpuf-form-template-modal .content ul li h3 {
486 margin-top: 0px;
487 border: 0px;
488 background: #1E87B6;
489 padding: 13px;
490 font-weight: normal;
491 font-size: 13px;
492 color: #fff;
493 border-radius: 3px 3px 0px 0px;
494 text-align: left;
495 }
496 .wefroms-form-templates .wpuf-form-template-modal .content ul li.template-inactive h3 {
497 background: #ccc;
498 }
499 .ann-form-btn {
500 background: #e74c3c !important;
501 }
502 .ann-form-btn.sharing_on {
503 background: #27ae60 !important;
504 }
505 .weforms-single-product-price-warp {
506 display: table;
507 }
508 .weforms-single-product-price-warp span {
509 padding: 6px 12px;
510 font-size: 14px;
511 font-weight: 400;
512 line-height: 1;
513 color: #555;
514 text-align: center;
515 background-color: #eee;
516 border: 1px solid #ddd;
517 border-radius: 4px;
518 border-top-right-radius: 0;
519 border-bottom-right-radius: 0;
520 width: 1%;
521 white-space: nowrap;
522 vertical-align: middle;
523 display: table-cell;
524 border-right: 0px;
525 }
526 .weforms-single-product-price-warp input {
527 display: table-cell;
528 width: 99%;
529 margin: 0px;
530 }
531 #weforms-settings {
532 height: 100%;
533 }
534 #weforms-settings #weforms-settings-tabs-warp {
535 margin-top: 15px;
536 margin-bottom: 15px;
537 box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.15);
538 background: #fff;
539 border-radius: 2px;
540 display: flex;
541 }
542 #weforms-settings #weforms-settings-tabs-warp.weforms-pro-deactivate {
543 width: 75%;
544 float: left;
545 }
546 #weforms-settings #weforms-settings-tabs-warp #weforms-settings-tabs {
547 background: #f1f1f1;
548 min-width: 220px;
549 border-radius: 2px;
550 margin: 0;
551 padding: 0;
552 border-bottom: 0px;
553 border-top-right-radius: 0px;
554 border-bottom-right-radius: 0px;
555 border-right: 1px solid #e5e5e5;
556 }
557 #weforms-settings #weforms-settings-tabs-warp #weforms-settings-tabs ul {
558 list-style-type: none;
559 padding: 0;
560 margin: 0;
561 min-height: 200px;
562 }
563 #weforms-settings #weforms-settings-tabs-warp #weforms-settings-tabs ul li {
564 margin: 0;
565 padding: 0;
566 }
567 #weforms-settings #weforms-settings-tabs-warp #weforms-settings-tabs ul li a {
568 display: block;
569 padding: 13px 25px;
570 text-decoration: none;
571 color: #444;
572 border: 0px;
573 transition: 0s;
574 border-bottom: 1px solid #e5e5e5;
575 margin-right: 0px;
576 }
577 #weforms-settings #weforms-settings-tabs-warp #weforms-settings-tabs ul li a img {
578 width: 20px;
579 margin-right: 10px;
580 vertical-align: middle;
581 max-height: 20px;
582 }
583 #weforms-settings #weforms-settings-tabs-warp #weforms-settings-tabs ul li a.we-settings-nav-tab-active {
584 background: #fff;
585 }
586 #weforms-settings #weforms-settings-tabs-warp #weforms-settings-tabs ul li:last-child a {
587 border-bottom: 0;
588 }
589 #weforms-settings #weforms-settings-tabs-warp #weforms-settings-tabs ul li:last-child a.we-settings-nav-tab-active {
590 border-bottom: 1px solid #e5e5e5;
591 }
592 #weforms-settings #weforms-settings-tabs-warp #weforms-settings-tabs ul li:focus,
593 #weforms-settings #weforms-settings-tabs-warp #weforms-settings-tabs ul li a:focus {
594 outline: 0;
595 -webkit-box-shadow: none;
596 box-shadow: none;
597 }
598 #weforms-settings #weforms-settings-tabs-warp #weforms-settings-tabs-contents {
599 width: 100%;
600 padding-left: 0px;
601 margin-left: 0px;
602 }
603 #weforms-settings #weforms-settings-tabs-warp #weforms-settings-tabs-contents .tab-content {
604 min-height: 500px;
605 }
606 #weforms-settings #weforms-settings-tabs-warp #weforms-settings-tabs-contents .inside {
607 padding: 0px 20px;
608 }
609 #weforms-settings #weforms-settings-tabs-warp #weforms-settings-tabs-contents .inside .form-table {
610 clear: right;
611 }
612 #weforms-settings #weforms-settings-tabs-warp #weforms-settings-tabs-contents h3.hndle {
613 border-bottom: 1px solid #eff4f6;
614 padding-left: 24px;
615 margin: 0px;
616 }
617 #weforms-settings #weforms-settings-tabs-warp #weforms-settings-tabs-contents .submit-wrapper {
618 border-top: 1px solid #eff4f6;
619 margin-top: 10px;
620 }
621 #weforms-settings #weforms-settings-tabs-warp #weforms-settings-tabs-contents .submit-wrapper,
622 #weforms-settings #weforms-settings-tabs-warp #weforms-settings-tabs-contents h3.hndle {
623 padding: 14.5px 20px;
624 }
625 #weforms-settings #weforms-settings-page-sidebar {
626 width: 25%;
627 display: inline-block;
628 padding-left: 15px;
629 box-sizing: border-box;
630 }
631 #weforms-settings #weforms-settings-page-sidebar .weforms-settings-page-sidebar-content {
632 background: #fff;
633 padding: 15px 15px 50px 15px;
634 margin-top: 15px;
635 box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.15);
636 border-radius: 2px;
637 }
638 #weforms-settings #weforms-settings-page-sidebar .weforms-settings-page-sidebar-content h2 {
639 margin-top: 0;
640 font-size: 20px;
641 line-height: 26px;
642 }
643 #weforms-settings #weforms-settings-page-sidebar .weforms-settings-page-sidebar-content ul li {
644 margin-bottom: 20px;
645 padding-left: 30px;
646 position: relative;
647 }
648 #weforms-settings #weforms-settings-page-sidebar .weforms-settings-page-sidebar-content ul li span.dashicons {
649 color: #fff;
650 background: #58B99D;
651 border-radius: 50%;
652 position: absolute;
653 left: 0;
654 top: 2px;
655 }
656 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-header .wpuf-integration-header-label img.icon {
657 width: 24px;
658 }
659 .weforms-field-mapping-custom table td {
660 min-width: 300px;
661 vertical-align: top;
662 }
663 .weforms-field-mapping-custom table select,
664 .weforms-field-mapping-custom table input {
665 width: 100%;
666 }
667 .weforms-field-mapping-custom table .fa-minus-circle {
668 color: #000;
669 }
670 .weforms-field-mapping-custom table .remove {
671 margin-top: 5px;
672 margin-left: 5px;
673 display: inline-block;
674 }
675 .weforms-field-mapping-custom table .custom-field-input input {
676 width: 90%;
677 float: right;
678 }
679 .weforms-field-mapping-custom .wpuf-int-form-row::before,
680 .weforms-field-mapping-custom .wpuf-int-form-row::after {
681 display: inline-block !important;
682 }
683 .weforms-field-mapping-custom a.merge-tag-link {
684 margin-top: -1px;
685 }
686 .weforms-field-mapping-custom button.add {
687 margin-top: 10px;
688 margin-left: 5px;
689 }
690 .wpuf-contact-form-entries .subsubsub a.current,
691 .wpuf-contact-form-entries .subsubsub a:focus {
692 box-shadow: none;
693 }
694 .field-text-with-tag {
695 position: relative;
696 }
697 .name-merge-tag-holder {
698 position: relative;
699 }
700 .name-merge-tag-holder .wpuf-merge-tag-wrap .merge-tag-link {
701 top: 3px;
702 }
703 .name-merge-tag-holder .wpuf-merge-tag-wrap .wpuf-merge-tags {
704 top: 27px;
705 }
706 th.weforms-form-status-col-title {
707 text-align: center;
708 }
709 td.weforms-form-status {
710 text-align: center;
711 }
712 td.weforms-form-status p {
713 font-size: 12px;
714 font-weight: 700;
715 margin: 0;
716 }
717 td.weforms-form-status span {
718 display: block;
719 font-style: italic;
720 font-size: 10px;
721 margin-left: 8px;
722 margin-bottom: 0;
723 }
724 td.weforms-form-status span.weforms-status-closed {
725 color: red;
726 }
727 .weforms-form-status .open {
728 color: #3aa73a;
729 }
730 .contact-form-list th.col-form-shortcode {
731 width: 170px;
732 }
733 .contact-form-list th.col-form-entries,
734 .contact-form-list th.col-form-views {
735 width: 50px;
736 }
737 .contact-form-list th.col-form-conversion {
738 width: 80px;
739 }
740 td.weforms-form-creator img {
741 max-width: 30px;
742 border-radius: 50%;
743 float: left;
744 margin-right: 8px;
745 margin-top: 4px;
746 }
747 td.weforms-form-creator span {
748 text-transform: capitalize;
749 display: block;
750 }
751 td.weforms-form-creator span.date {
752 font-size: 10px;
753 }
754 label.weforms-switch {
755 position: relative;
756 display: block;
757 padding-left: 20px;
758 margin-bottom: 5px;
759 margin-top: 5px;
760 /* Rounded sliders */
761 }
762 label.weforms-switch input[type=checkbox] {
763 opacity: 0;
764 width: 0;
765 height: 0;
766 }
767 label.weforms-switch .switch-slider {
768 position: absolute;
769 cursor: pointer;
770 top: 0;
771 left: 0;
772 right: 0;
773 bottom: 0;
774 background-color: #ccc;
775 -moz-transition: .4s;
776 -webkit-transition: .4s;
777 transition: .4s;
778 width: 35px;
779 height: 18px;
780 }
781 label.weforms-switch .switch-slider:before {
782 position: absolute;
783 content: "";
784 height: 14px;
785 width: 14px;
786 left: 3px;
787 bottom: 2px;
788 background-color: white;
789 -moz-transition: .4s;
790 -webkit-transition: .4s;
791 transition: .4s;
792 }
793 label.weforms-switch input:checked + .switch-slider {
794 background-color: #8DC63F;
795 }
796 label.weforms-switch input:checked + .switch-slider:before {
797 -webkit-transform: translateX(16px);
798 -ms-transform: translateX(16px);
799 transform: translateX(16px);
800 }
801 label.weforms-switch .switch-slider.round {
802 border-radius: 34px;
803 }
804 label.weforms-switch .switch-slider.round:before {
805 border-radius: 50%;
806 }
807 ul.wpuf-form .wpuf-field-columns {
808 padding: 0;
809 border: 0;
810 overflow: hidden;
811 }
812 ul.wpuf-form .wpuf-field-columns.has-columns-1 .wpuf-column .wpuf-column-inner-fields {
813 width: 100%;
814 float: left;
815 }
816 ul.wpuf-form .wpuf-field-columns.has-columns-1 .wpuf-column .wpuf-column-inner-fields:nth-child(1) {
817 padding-right: 0!important;
818 }
819 ul.wpuf-form .wpuf-field-columns.has-columns-1 .wpuf-column .column-1 .ui-resizable-handle {
820 display: none !important;
821 }
822 ul.wpuf-form .wpuf-field-columns.has-columns-1 .wpuf-column .column-2.wpuf-column-inner-fields,
823 ul.wpuf-form .wpuf-field-columns.has-columns-1 .wpuf-column .column-3.wpuf-column-inner-fields {
824 display: none;
825 }
826 ul.wpuf-form .wpuf-field-columns.has-columns-2 .wpuf-column .wpuf-column-inner-fields {
827 width: 50%;
828 float: left;
829 }
830 ul.wpuf-form .wpuf-field-columns.has-columns-2 .wpuf-column .wpuf-column-inner-fields:nth-child(2) {
831 padding-right: 0!important;
832 }
833 ul.wpuf-form .wpuf-field-columns.has-columns-2 .wpuf-column .column-2 .ui-resizable-handle {
834 display: none !important;
835 }
836 ul.wpuf-form .wpuf-field-columns.has-columns-2 .wpuf-column .column-3.wpuf-column-inner-fields {
837 display: none;
838 }
839 ul.wpuf-form .wpuf-field-columns.has-columns-3 .wpuf-column .wpuf-column-inner-fields {
840 width: 33.33%;
841 float: left;
842 }
843 ul.wpuf-form .wpuf-field-columns.has-columns-3 .wpuf-column .wpuf-column-inner-fields:nth-child(3) {
844 padding-right: 0!important;
845 }
846 ul.wpuf-form .wpuf-field-columns .wpuf-column-field-inner-columns {
847 margin-left: 0;
848 margin-right: 0;
849 }
850 ul.wpuf-form .wpuf-field-columns .wpuf-column-field-inner-columns .wpuf-column {
851 padding: 0;
852 border: 0;
853 float: none;
854 width: 100%;
855 display: flex;
856 }
857 ul.wpuf-form .wpuf-field-columns .wpuf-column-field-inner-columns .wpuf-column .wpuf-column-inner-fields {
858 padding: 0 5px 0 0;
859 position: relative;
860 }
861 ul.wpuf-form .wpuf-field-columns .wpuf-column-field-inner-columns .wpuf-column .wpuf-column-inner-fields ul.wpuf-column-fields-sortable-list {
862 border: 1px dashed #ffb900;
863 background: rgba(255, 185, 0, 0.08);
864 margin: 0;
865 padding: 0 0 50px 0;
866 }
867 ul.wpuf-form .wpuf-field-columns .wpuf-column-field-inner-columns .wpuf-column .wpuf-column-inner-fields ul.wpuf-column-fields-sortable-list li.column-field-items {
868 background: #fff;
869 -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
870 box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
871 }
872 ul.wpuf-form .wpuf-field-columns .wpuf-column-field-inner-columns .wpuf-column .wpuf-column-inner-fields ul.wpuf-column-fields-sortable-list li.column-field-items.current-editing {
873 background-color: rgba(255, 185, 0, 0.15);
874 }
875 ul.wpuf-form .wpuf-field-columns .wpuf-column-field-inner-columns .wpuf-column .wpuf-column-inner-fields ul.wpuf-column-fields-sortable-list li.column-field-items:last-child {
876 margin-bottom: 0;
877 }
878 ul.wpuf-form .wpuf-field-columns .wpuf-column-field-inner-columns .wpuf-column .wpuf-column-inner-fields ul.wpuf-column-fields-sortable-list li.column-field-items:hover .wpuf-column-field-control-buttons {
879 display: block;
880 }
881 ul.wpuf-form .wpuf-field-columns .wpuf-column-field-inner-columns .wpuf-column .wpuf-column-inner-fields ul.wpuf-column-fields-sortable-list li.column-field-items .wpuf-column-field-control-buttons {
882 position: absolute;
883 top: 0;
884 left: 0;
885 z-index: 10;
886 display: none;
887 width: 100%;
888 height: 100%;
889 margin: 0;
890 text-align: center;
891 background: rgba(255, 185, 0, 0.08);
892 border: 1px dashed #ffb900;
893 }
894 ul.wpuf-form .wpuf-field-columns .wpuf-column-field-inner-columns .wpuf-column .wpuf-column-inner-fields ul.wpuf-column-fields-sortable-list li.column-field-items .wpuf-column-field-control-buttons p {
895 position: absolute;
896 top: 50%;
897 left: 50%;
898 margin: -10px 0 0 -43px;
899 line-height: 1;
900 color: #eee;
901 background-color: #23282d;
902 }
903 ul.wpuf-form .wpuf-field-columns .wpuf-column-field-inner-columns .wpuf-column .wpuf-column-inner-fields ul.wpuf-column-fields-sortable-list li.column-field-items .wpuf-column-field-control-buttons i {
904 cursor: pointer;
905 padding: 5px;
906 font-size: 10px;
907 }
908 ul.wpuf-form .wpuf-field-columns .wpuf-column-field-inner-columns .wpuf-column .wpuf-column-inner-fields ul.wpuf-column-fields-sortable-list li.column-field-items .wpuf-column-field-control-buttons i:hover {
909 background-color: #0073aa;
910 }
911 ul.wpuf-form .wpuf-field-columns .wpuf-column-field-inner-columns .wpuf-column .wpuf-column-inner-fields ul.wpuf-column-fields-sortable-list li.column-field-items .wpuf-column-field-control-buttons i.move {
912 cursor: move;
913 }
914 ul.wpuf-form .wpuf-field-columns .wpuf-column-field-inner-columns .wpuf-column .wpuf-column-inner-fields .drop-message {
915 text-align: center;
916 border: 1px dashed #ffb900;
917 border-top: 0;
918 background: rgba(255, 185, 0, 0.08);
919 margin: 0;
920 padding: 15px 0;
921 }
922 #form-preview-stage .field-items .wpuf-field-columns + div.control-buttons {
923 top: 10px;
924 z-index: 10;
925 height: auto;
926 margin: 0;
927 background: transparent;
928 border: 0;
929 }
930 /**
931 * UTILITY CSS
932 */
933 * {
934 box-sizing: border-box;
935 }
936 .weforms-premium {
937 font-weight: 300;
938 margin: 60px;
939 max-width: 1003px;
940 margin: 0 auto;
941 padding-top: 50px;
942 }
943 .weforms-premium img {
944 max-width: 100%;
945 }
946 .weforms-premium h1,
947 .weforms-premium h2 {
948 font-weight: 600;
949 }
950 .weforms-premium h1 {
951 font-size: 40px;
952 }
953 .weforms-premium h2 {
954 font-size: 28px;
955 }
956 .weforms-premium h3 {
957 font-size: 20px;
958 }
959 .weforms-premium p {
960 font-size: 14px;
961 line-height: 20px;
962 color: #758598;
963 }
964 .weforms-premium .wf-btn {
965 font-size: 12px;
966 line-height: 14px;
967 font-weight: 500;
968 display: inline-flex;
969 padding: 13px 18px;
970 text-decoration: none;
971 white-space: nowrap;
972 border-radius: 3px;
973 transition: all .3s ease;
974 }
975 .weforms-premium .wf-btn.wf-btn-primary {
976 background: #1A9ED4;
977 color: #fff;
978 }
979 .weforms-premium .wf-btn.wf-btn-default {
980 background: #fff;
981 color: #12CE66;
982 }
983 .weforms-premium .wf-btn.wf-btn-lg {
984 font-size: 15px;
985 line-height: 18px;
986 padding: 15px 28px;
987 letter-spacing: 1.01px;
988 font-weight: 300;
989 }
990 .weforms-premium .wf-btn:hover {
991 box-shadow: 0 7px 18px 0 rgba(0, 0, 0, 0.31);
992 }
993 .weforms-premium .wf-section-wrapper {
994 width: 100%;
995 margin-bottom: 80px;
996 }
997 .weforms-premium .wf-section-wrapper .section-header {
998 margin-bottom: 45px;
999 }
1000 .weforms-premium .wf-section-wrapper .section-header h2 {
1001 text-align: center;
1002 margin: 0;
1003 }
1004 @keyframes play_effect_btn {
1005 0% {
1006 box-shadow: 0 0 0 20px rgba(199, 245, 236, 0.35), 0 0 0 10px rgba(199, 245, 216, 0.65);
1007 }
1008 50% {
1009 box-shadow: none;
1010 }
1011 100% {
1012 box-shadow: 0 0 0 20px rgba(199, 245, 236, 0.35), 0 0 0 10px rgba(199, 245, 236, 0.65);
1013 }
1014 }
1015 /*
1016 * Component: Modal
1017 */
1018 .wf-modal {
1019 display: flex;
1020 align-items: center;
1021 justify-content: center;
1022 position: fixed;
1023 top: 0;
1024 left: 0;
1025 width: 100%;
1026 height: 100%;
1027 z-index: 99;
1028 background: rgba(0, 0, 0, 0.5);
1029 opacity: 0;
1030 visibility: hidden;
1031 transition: all 0.3s ease-in-out;
1032 }
1033 .wf-modal span.modal-close {
1034 width: 24px;
1035 height: 24px;
1036 text-align: center;
1037 border-radius: 50%;
1038 background: rgba(0, 0, 0, 0.8);
1039 border: 1px solid #f2f2f2;
1040 position: absolute;
1041 top: -8px;
1042 right: -8px;
1043 z-index: 9999;
1044 cursor: pointer;
1045 }
1046 .wf-modal span.modal-close i {
1047 font-size: 7px;
1048 }
1049 .wf-modal span.modal-close:hover {
1050 background: #000000;
1051 }
1052 .wf-modal .wf-modal-dialog {
1053 position: relative;
1054 width: 95%;
1055 max-width: 820px;
1056 max-height: 100%;
1057 margin-top: -100px;
1058 transition: all 0.3s ease-in-out;
1059 }
1060 .wf-modal .wf-modal-content {
1061 background-color: #fff;
1062 border: 1px solid #F5F5F5;
1063 border-radius: 4px;
1064 box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
1065 background-clip: padding-box;
1066 outline: 0;
1067 max-height: 90vh;
1068 overflow-y: auto;
1069 }
1070 .wf-modal.wf-modal-open {
1071 opacity: 1;
1072 visibility: visible;
1073 }
1074 .wf-modal.wf-modal-open .wf-modal-dialog {
1075 margin-top: 0px;
1076 }
1077 .wf-modal-header {
1078 padding: 20px;
1079 display: flex;
1080 justify-content: space-between;
1081 align-items: center;
1082 border-radius: 3px 3px 0 0;
1083 font-weight: 600;
1084 color: #000;
1085 }
1086 .wf-modal-header h2,
1087 .wf-modal-header h3,
1088 .wf-modal-header h4,
1089 .wf-modal-header h5 {
1090 margin: 0;
1091 font-size: 23px;
1092 }
1093 .wf-modal-header.has-border {
1094 border-bottom: 1px solid #F5F5F5;
1095 }
1096 .wf-modal-header.has-bg {
1097 background: #F5F5F5;
1098 }
1099 .wf-modal-header .wf-close {
1100 color: #cec9cb;
1101 font-size: 16px;
1102 padding: 5px;
1103 margin-right: -5px;
1104 cursor: pointer;
1105 }
1106 .wf-modal-header .wf-close:hover {
1107 color: #ccc;
1108 }
1109 .wf-modal-header .wf-icon {
1110 color: #ccc;
1111 margin-right: 10px;
1112 vertical-align: text-top;
1113 }
1114 .wf-modal-header .wf-icon:before {
1115 font-size: 20px;
1116 }
1117 .wf-modal-body {
1118 position: relative;
1119 padding: 20px;
1120 background: #fff;
1121 }
1122 .wf-modal-footer {
1123 padding: 20px;
1124 text-align: right;
1125 }
1126 .wf-modal-footer.has-border {
1127 border-top: 1px solid #F5F5F5;
1128 }
1129 .wf-modal-footer .wf-btn + .wf-btn {
1130 margin-left: 15px;
1131 margin-bottom: 0;
1132 }
1133 .wf-modal-footer .wf-btn-group .wf-btn + .wf-btn {
1134 margin-left: -1px;
1135 }
1136 .wf-modal-footer .wf-btn-block + .wf-btn-block {
1137 margin-left: 0;
1138 }
1139 .wf-modal-scrollbar-measure {
1140 position: absolute;
1141 top: -9999px;
1142 width: 50px;
1143 height: 50px;
1144 overflow: scroll;
1145 }
1146 .modal-title {
1147 margin-bottom: 20px;
1148 }
1149 .modal-title * {
1150 margin: 0;
1151 font-size: 18px;
1152 font-weight: 400;
1153 }
1154 /**
1155 * Banner section styles
1156 */
1157 .wf-banner-section {
1158 padding: 76px 62px;
1159 display: flex;
1160 align-items: center;
1161 justify-content: space-between;
1162 flex-wrap: nowrap;
1163 background: #12CE66 url('../images/premium/banner-bg.svg');
1164 background-size: cover;
1165 border-radius: 3px;
1166 }
1167 .wf-banner-section h1 {
1168 color: #fff !important;
1169 margin-bottom: 0;
1170 letter-spacing: 1.1px;
1171 text-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
1172 }
1173 .wf-banner-section p {
1174 color: #E8FFF2 !important;
1175 }
1176 .wf-banner-section .banner-thumb {
1177 position: relative;
1178 max-height: 200px;
1179 }
1180 .wf-banner-section .banner-icon {
1181 background: #FFFFFF;
1182 box-shadow: 0 8px 19px 0 rgba(0, 0, 0, 0.16);
1183 display: inline-flex;
1184 padding: 12px;
1185 border-radius: 10px;
1186 margin-bottom: 15px;
1187 }
1188 .wf-banner-section .video-play-icon {
1189 background: #FFFFFF;
1190 box-shadow: 1px 17px 44px 0 rgba(0, 0, 0, 0.11);
1191 width: 50px;
1192 height: 50px;
1193 border-radius: 50%;
1194 display: flex;
1195 align-items: center;
1196 justify-content: center;
1197 position: absolute;
1198 bottom: 0;
1199 right: -25px;
1200 animation: play_effect_btn 3s infinite ease-in-out;
1201 }
1202 .wf-banner-section .wf-modal-body iframe {
1203 width: 100%;
1204 }
1205 .wf-banner-section .wf-modal .modal-close {
1206 color: #fff;
1207 font-size: 13px;
1208 }
1209 .wf-banner-section .banner-content {
1210 margin-bottom: 30px;
1211 }
1212 .wf-banner-section .banner-buttons a:not(:last-child) {
1213 margin-right: 18px;
1214 }
1215 @media (max-width: 767px) {
1216 .wf-banner-section {
1217 flex-direction: column;
1218 }
1219 .wf-banner-section .wf-btn-primary {
1220 margin-bottom: 10px;
1221 }
1222 }
1223 @media (max-width: 500px) {
1224 .wf-banner-section {
1225 padding: 50px 25px;
1226 }
1227 .wf-banner-section .video-play-icon {
1228 right: -20px;
1229 bottom: 20px;
1230 }
1231 }
1232 /**
1233 * Feature section styles
1234 */
1235 .wf-features-wrapper .section-content {
1236 margin-bottom: -42px;
1237 }
1238 .wf-features-wrapper .feature-row {
1239 margin: 0 -27px;
1240 display: flex;
1241 flex-wrap: wrap;
1242 }
1243 .wf-features-wrapper .feature-row .feature-column {
1244 flex-basis: 33.33%;
1245 max-width: 33.33%;
1246 padding: 0 27px;
1247 }
1248 @media (max-width: 1200px) {
1249 .wf-features-wrapper .feature-row {
1250 margin: 0 -15px;
1251 }
1252 .wf-features-wrapper .feature-row .feature-column {
1253 padding: 0 15px;
1254 }
1255 }
1256 @media (max-width: 767px) {
1257 .wf-features-wrapper .feature-row .feature-column {
1258 flex-basis: 50%;
1259 max-width: 50%;
1260 }
1261 }
1262 @media (max-width: 420px) {
1263 .wf-features-wrapper .feature-row .feature-column {
1264 flex-basis: 100%;
1265 max-width: 100%;
1266 }
1267 .wf-features-wrapper .feature-row .feature-column .feature-thumb {
1268 width: 100%;
1269 }
1270 }
1271 .wf-features-wrapper .feature-thumb {
1272 display: inline-block;
1273 width: auto;
1274 box-shadow: -3px 2px 38px 0 rgba(0, 0, 0, 0.06);
1275 }
1276 .wf-features-wrapper .feature-thumb img {
1277 width: 100%;
1278 display: flex;
1279 }
1280 .wf-features-wrapper .feature-column {
1281 margin-bottom: 42px;
1282 }
1283 .wf-features-wrapper .feature-column h3 {
1284 margin: 30px 0 17px;
1285 }
1286 .wf-features-wrapper .feature-column p {
1287 margin: 0;
1288 }
1289 /**
1290 * Integration section styles
1291 */
1292 .wf-integration-wrapper {
1293 padding: 70px 45px;
1294 background: #fff;
1295 border-radius: 3px 3px 0 0;
1296 text-align: center;
1297 margin-bottom: 0 !important;
1298 }
1299 .wf-integration-wrapper .section-header {
1300 margin-bottom: 70px !important;
1301 }
1302 .wf-integration-wrapper .section-content {
1303 margin-bottom: -30px;
1304 }
1305 .wf-integration-wrapper .integration-row {
1306 margin: 0 -22px;
1307 display: flex;
1308 flex-wrap: wrap;
1309 }
1310 .wf-integration-wrapper .integration-column {
1311 padding: 0 22px;
1312 margin-bottom: 30px;
1313 flex-basis: 25%;
1314 max-width: 25%;
1315 }
1316 @media (max-width: 1200px) {
1317 .wf-integration-wrapper .integration-column {
1318 flex-basis: 33.33%;
1319 max-width: 33.33%;
1320 }
1321 }
1322 @media (max-width: 767px) {
1323 .wf-integration-wrapper .integration-column {
1324 flex-basis: 50%;
1325 max-width: 50%;
1326 }
1327 }
1328 @media (max-width: 427px) {
1329 .wf-integration-wrapper .integration-column {
1330 flex-basis: 100%;
1331 max-width: 100%;
1332 }
1333 }
1334 .wf-integration-wrapper .integration-column h3 {
1335 margin: 20px 0 17px;
1336 }
1337 .wf-integration-wrapper .integration-column p {
1338 margin-bottom: 0;
1339 }
1340 .wf-import-wrapper {
1341 border-top: 1px solid #E2E2E2;
1342 padding: 40px;
1343 background: #fff;
1344 }
1345 .wf-import-wrapper .section-content {
1346 display: flex;
1347 justify-content: space-between;
1348 align-items: center;
1349 }
1350 @media (max-width: 767px) {
1351 .wf-import-wrapper .section-content {
1352 flex-direction: column;
1353 }
1354 .wf-import-wrapper .section-content .import-left {
1355 margin-bottom: 30px;
1356 }
1357 .wf-import-wrapper .section-content .import-left,
1358 .wf-import-wrapper .section-content .import-right {
1359 width: 100%;
1360 }
1361 }
1362 .wf-import-wrapper .import-left {
1363 display: flex;
1364 flex: 1;
1365 }
1366 .wf-import-wrapper .import-left p,
1367 .wf-import-wrapper .import-left h2 {
1368 margin: 0;
1369 }
1370 .wf-import-wrapper .import-left p {
1371 color: #1ABC9C;
1372 font-size: 16px;
1373 line-height: 26px;
1374 }
1375 .wf-import-wrapper .import-left h2 {
1376 font-size: 25px;
1377 line-height: 36px;
1378 }
1379 .wf-import-wrapper .import-left .import-icon {
1380 display: flex;
1381 align-items: center;
1382 justify-content: center;
1383 flex-basis: 65px;
1384 height: 65px;
1385 background: #12CE66;
1386 box-shadow: 0 11px 25px 0 rgba(0, 0, 0, 0.16);
1387 border-radius: 8px;
1388 margin-right: 30px;
1389 }
1390 #wpuf-form-builder .tab-content {
1391 overflow-x: hidden;
1392 }
1393 .wpuf-integrations-wrap {
1394 display: flex;
1395 flex-wrap: wrap;
1396 margin: 0 -10px;
1397 }
1398 .wpuf-integrations-wrap .wpuf-integration {
1399 padding: 0 10px;
1400 flex-basis: 25%;
1401 max-width: 25%;
1402 margin-bottom: 0;
1403 background-color: transparent;
1404 box-shadow: none;
1405 border: 0;
1406 }
1407 @media (max-width: 767px) {
1408 .wpuf-integrations-wrap {
1409 margin: 0;
1410 }
1411 .wpuf-integrations-wrap .wpuf-integration {
1412 flex-basis: 50%;
1413 max-width: 50%;
1414 }
1415 }
1416 @media (max-width: 450px) {
1417 .wpuf-integrations-wrap .wpuf-integration {
1418 flex-basis: 100%;
1419 max-width: 100%;
1420 }
1421 .wpuf-integrations-wrap .wpuf-integration label {
1422 margin: 0 0 10px;
1423 }
1424 .wpuf-integrations-wrap .wpuf-integration .wpuf-int-form-row {
1425 flex-direction: column;
1426 }
1427 .wpuf-integrations-wrap .wpuf-integration .wpuf-int-field {
1428 width: 100%;
1429 position: relative;
1430 }
1431 .wpuf-integrations-wrap .wpuf-integration .wpuf-int-field input:not([type='checkbox']),
1432 .wpuf-integrations-wrap .wpuf-integration .wpuf-int-field select,
1433 .wpuf-integrations-wrap .wpuf-integration .wpuf-int-field textarea {
1434 padding: 7px 12px;
1435 border-radius: 3px;
1436 max-width: 100%;
1437 width: 100%;
1438 }
1439 .wpuf-integrations-wrap .wpuf-integration .wpuf-int-field .wpuf-merge-tag-wrap .merge-tag-link {
1440 position: absolute;
1441 top: 7px;
1442 right: 7px;
1443 }
1444 .wpuf-integrations-wrap .wpuf-integration .wpuf-int-field .wpuf-merge-tag-wrap .wpuf-merge-tags {
1445 top: 35px;
1446 }
1447 }
1448 .wpuf-integrations-wrap .wpuf-setting {
1449 display: flex;
1450 align-items: center;
1451 }
1452 .wpuf-integrations-wrap .wpuf-setting a {
1453 display: inline-flex;
1454 margin-right: 10px;
1455 }
1456 .wpuf-integrations-wrap .wpuf-setting span {
1457 font-size: 16px;
1458 font-weight: 400;
1459 }
1460 .wpuf-integrations-wrap .wf-modal .wf-modal-dialog {
1461 max-width: 600px;
1462 }
1463 .wpuf-integrations-wrap .wf-modal-header {
1464 border-bottom: 1px solid #E2E2E2;
1465 background: #FBFBFB;
1466 padding: 10px 20px;
1467 }
1468 .wpuf-integrations-wrap .wf-modal-header img {
1469 opacity: .5;
1470 filter: grayscale(100%);
1471 transition: all 0.3s ease-in-out;
1472 }
1473 .wpuf-integrations-wrap .wf-modal-header .wpuf-toggle-switch.checked ~ img {
1474 opacity: 1;
1475 filter: none;
1476 }
1477 .wpuf-integrations-wrap .wf-modal-header .modal-close {
1478 color: #777;
1479 width: 52px;
1480 height: 52px;
1481 border-radius: 0;
1482 background: transparent;
1483 display: flex;
1484 align-items: center;
1485 justify-content: center;
1486 top: 0;
1487 right: 0;
1488 border-left: 1px solid #ddd;
1489 font-size: 18px;
1490 font-weight: 300;
1491 border-radius: 0 3px 0 0;
1492 border-bottom: 0;
1493 }
1494 .wpuf-integrations-wrap .wf-modal-header .modal-close:hover {
1495 background: #eee;
1496 opacity: 0.8;
1497 }
1498 .wpuf-integrations-wrap .wf-modal-header .modal-header-left {
1499 display: flex;
1500 align-items: center;
1501 }
1502 .wpuf-integrations-wrap .wf-modal-header .modal-header-left img {
1503 margin-left: 15px;
1504 }
1505 .wpuf-integrations-wrap .wf-modal-footer {
1506 border-top: 1px solid #E2E2E2;
1507 background: #FBFBFB;
1508 padding: 10px 20px;
1509 }
1510 .wpuf-integrations-wrap fieldset {
1511 border: 1px solid #E2E2E2 !important;
1512 padding: 20px;
1513 margin-bottom: 10px;
1514 }
1515 .wpuf-integrations-wrap fieldset legend {
1516 font-weight: 600;
1517 font-size: 15px;
1518 padding: 0 10px;
1519 }
1520 .wpuf-integrations-wrap fieldset label {
1521 font-weight: 600;
1522 }
1523 .wpuf-int-form-row {
1524 display: flex;
1525 margin-bottom: 10px;
1526 }
1527 .wpuf-int-form-row .wpuf-integration-updater {
1528 display: inline-flex;
1529 margin-left: 5px;
1530 }
1531 .wpuf-int-form-row .wpuf-int-field-label {
1532 margin-right: 10px;
1533 min-width: 120px;
1534 display: inline-flex;
1535 }
1536 .wpuf-int-form-row .wpuf-int-field {
1537 width: calc(100% - 120px);
1538 position: relative;
1539 }
1540 .wpuf-int-form-row .wpuf-int-field input:not([type='checkbox']),
1541 .wpuf-int-form-row .wpuf-int-field select,
1542 .wpuf-int-form-row .wpuf-int-field textarea {
1543 padding: 7px 12px;
1544 border-radius: 3px;
1545 max-width: 100%;
1546 width: 100%;
1547 }
1548 .wpuf-int-form-row .wpuf-int-field .wpuf-merge-tag-wrap .merge-tag-link {
1549 position: absolute;
1550 top: 7px;
1551 right: 7px;
1552 }
1553 .wpuf-int-form-row .wpuf-int-field .wpuf-merge-tag-wrap .wpuf-merge-tags {
1554 top: 35px;
1555 }
1556 .wpuf-int-form-row .wpuf-int-field-label label {
1557 font-weight: 600;
1558 display: block;
1559 margin-top: 6px;
1560 }
1561 .wpuf-panel {
1562 border: 1px solid #E2E2E2;
1563 margin-bottom: 20px;
1564 }
1565 .wpuf-panel.panel-checked .wpuf-panel-body img {
1566 filter: none;
1567 opacity: 1;
1568 }
1569 .wpuf-panel .wpuf-panel-body {
1570 position: relative;
1571 background: #fff;
1572 height: 163px;
1573 padding: 10px 20px;
1574 display: flex;
1575 align-items: center;
1576 justify-content: center;
1577 border-radius: 4px 4px 0 0;
1578 }
1579 .wpuf-panel .wpuf-panel-body img {
1580 max-height: 100%;
1581 max-width: 160px;
1582 filter: grayscale(100%);
1583 opacity: .5;
1584 transition: all 0.3s ease-in-out;
1585 }
1586 .wpuf-panel .wpuf-panel-body .premium-badge {
1587 font-size: 12px;
1588 font-weight: 400;
1589 line-height: 20px;
1590 color: #fff;
1591 background: #7ED321;
1592 display: inline-block;
1593 padding: 3px 12px;
1594 position: absolute;
1595 top: 20px;
1596 right: -1px;
1597 border-radius: 20px 0 0 20px;
1598 }
1599 .wpuf-panel .wpuf-panel-footer {
1600 border-radius: 0 0 4px 4px;
1601 background: #FBFBFB;
1602 border-top: 1px solid #E2E2E2;
1603 padding: 10px 20px;
1604 display: flex;
1605 justify-content: space-between;
1606 align-items: center;
1607 }
1608
1609 /* Premium CTA */
1610 .wpuf-premium-cta {
1611 display: flex;
1612 align-items: baseline;
1613 font-size: 1.5em;
1614 font-weight: 500;
1615 flex-direction: column;
1616 padding: 1em;
1617 margin: 1em auto;
1618 max-width: max-content;
1619 box-shadow: 0px 1px 4px #8f8f8f;
1620 border-radius: 0 2px 2px 0;
1621 border-left: 5px solid #7ad376;
1622 }
1623 .wpuf-premium-cta img {
1624 max-height: 30px;
1625 }
1626 .wpuf-premium-cta .button {
1627 background-color: #7ad376;
1628 color: #FFFFFF;
1629 border-color: #7ad376;
1630 }
1631 .wpuf-premium-cta .button:hover {
1632 background-color: #ffffff;
1633 color: #7ad376;
1634 border-color: #7ad376;
1635 }
1636 @media( min-width: 768px ) {
1637 .wpuf-premium-cta * {
1638 margin-right: 1em;
1639 }
1640 .wpuf-premium-cta {
1641 flex-direction: row;
1642 align-items: center;
1643 margin: 1em 0;
1644 }
1645 }
1646
1647 /* Privacy Page */
1648 .wpuf-privacy-page {
1649 max-width: 1200px;
1650 margin: 0 auto 0 0;
1651 }
1652 .wpuf-privacy-page p,
1653 .wpuf-privacy-page li {
1654 font-size: 1.2em;
1655 }