PluginProbe
weForms – Easy Drag & Drop Contact Form Builder For WordPress / 1.6.1
weForms – Easy Drag & Drop Contact Form Builder For WordPress v1.6.1
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.1, at assets/css/admin.css

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