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

1,488 lines 34.2 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;
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.06122449% !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 0.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: 0.4s;
779 -webkit-transition: 0.4s;
780 transition: 0.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: 0.4s;
793 -webkit-transition: 0.4s;
794 transition: 0.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 /**
811 * UTILITY CSS
812 */
813 * {
814 box-sizing: border-box;
815 }
816 .weforms-premium {
817 font-weight: 300;
818 margin: 60px;
819 max-width: 1003px;
820 margin: 0 auto;
821 padding-top: 50px;
822 }
823 .weforms-premium img {
824 max-width: 100%;
825 }
826 .weforms-premium h1,
827 .weforms-premium h2 {
828 font-weight: 600;
829 }
830 .weforms-premium h1 {
831 font-size: 40px;
832 }
833 .weforms-premium h2 {
834 font-size: 28px;
835 }
836 .weforms-premium h3 {
837 font-size: 20px;
838 }
839 .weforms-premium p {
840 font-size: 14px;
841 line-height: 20px;
842 color: #758598;
843 }
844 .weforms-premium .wf-btn {
845 font-size: 12px;
846 line-height: 14px;
847 font-weight: 500;
848 display: inline-flex;
849 padding: 13px 18px;
850 text-decoration: none;
851 white-space: nowrap;
852 border-radius: 3px;
853 transition: all 0.3s ease;
854 }
855 .weforms-premium .wf-btn.wf-btn-primary {
856 background: #1A9ED4;
857 color: #fff;
858 }
859 .weforms-premium .wf-btn.wf-btn-default {
860 background: #fff;
861 color: #12CE66;
862 }
863 .weforms-premium .wf-btn.wf-btn-lg {
864 font-size: 15px;
865 line-height: 18px;
866 padding: 15px 28px;
867 letter-spacing: 1.01px;
868 font-weight: 300;
869 }
870 .weforms-premium .wf-btn:hover {
871 box-shadow: 0 7px 18px 0 rgba(0, 0, 0, 0.31);
872 }
873 .weforms-premium .wf-section-wrapper {
874 width: 100%;
875 margin-bottom: 80px;
876 }
877 .weforms-premium .wf-section-wrapper .section-header {
878 margin-bottom: 45px;
879 }
880 .weforms-premium .wf-section-wrapper .section-header h2 {
881 text-align: center;
882 margin: 0;
883 }
884 @keyframes play_effect_btn {
885 0% {
886 box-shadow: 0 0 0 20px rgba(199, 245, 236, 0.35), 0 0 0 10px rgba(199, 245, 216, 0.65);
887 }
888 50% {
889 box-shadow: none;
890 }
891 100% {
892 box-shadow: 0 0 0 20px rgba(199, 245, 236, 0.35), 0 0 0 10px rgba(199, 245, 236, 0.65);
893 }
894 }
895 /*
896 * Component: Modal
897 */
898 .wf-modal {
899 display: flex;
900 align-items: center;
901 justify-content: center;
902 position: fixed;
903 top: 0;
904 left: 0;
905 width: 100%;
906 height: 100%;
907 z-index: 99;
908 background: rgba(0, 0, 0, 0.5);
909 opacity: 0;
910 visibility: hidden;
911 transition: all 0.3s ease-in-out;
912 }
913 .wf-modal span.modal-close {
914 width: 24px;
915 height: 24px;
916 text-align: center;
917 border-radius: 50%;
918 background: rgba(0, 0, 0, 0.8);
919 border: 1px solid #f2f2f2;
920 position: absolute;
921 top: -8px;
922 right: -8px;
923 z-index: 9999;
924 cursor: pointer;
925 }
926 .wf-modal span.modal-close i {
927 font-size: 7px;
928 }
929 .wf-modal span.modal-close:hover {
930 background: #000000;
931 }
932 .wf-modal .wf-modal-dialog {
933 position: relative;
934 width: 95%;
935 max-width: 820px;
936 max-height: 100%;
937 margin-top: -100px;
938 transition: all 0.3s ease-in-out;
939 }
940 .wf-modal .wf-modal-content {
941 background-color: #fff;
942 border: 1px solid #F5F5F5;
943 border-radius: 4px;
944 box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
945 background-clip: padding-box;
946 outline: 0;
947 max-height: 90vh;
948 overflow-y: auto;
949 }
950 .wf-modal.wf-modal-open {
951 opacity: 1;
952 visibility: visible;
953 }
954 .wf-modal.wf-modal-open .wf-modal-dialog {
955 margin-top: 0px;
956 }
957 .wf-modal-header {
958 padding: 20px;
959 display: flex;
960 justify-content: space-between;
961 align-items: center;
962 border-radius: 3px 3px 0 0;
963 font-weight: 600;
964 color: #000;
965 }
966 .wf-modal-header h2,
967 .wf-modal-header h3,
968 .wf-modal-header h4,
969 .wf-modal-header h5 {
970 margin: 0;
971 font-size: 23px;
972 }
973 .wf-modal-header.has-border {
974 border-bottom: 1px solid #F5F5F5;
975 }
976 .wf-modal-header.has-bg {
977 background: #F5F5F5;
978 }
979 .wf-modal-header .wf-close {
980 color: #cec9cb;
981 font-size: 16px;
982 padding: 5px;
983 margin-right: -5px;
984 cursor: pointer;
985 }
986 .wf-modal-header .wf-close:hover {
987 color: #ccc;
988 }
989 .wf-modal-header .wf-icon {
990 color: #ccc;
991 margin-right: 10px;
992 vertical-align: text-top;
993 }
994 .wf-modal-header .wf-icon:before {
995 font-size: 20px;
996 }
997 .wf-modal-body {
998 position: relative;
999 padding: 20px;
1000 background: #fff;
1001 }
1002 .wf-modal-footer {
1003 padding: 20px;
1004 text-align: right;
1005 }
1006 .wf-modal-footer.has-border {
1007 border-top: 1px solid #F5F5F5;
1008 }
1009 .wf-modal-footer .wf-btn + .wf-btn {
1010 margin-left: 15px;
1011 margin-bottom: 0;
1012 }
1013 .wf-modal-footer .wf-btn-group .wf-btn + .wf-btn {
1014 margin-left: -1px;
1015 }
1016 .wf-modal-footer .wf-btn-block + .wf-btn-block {
1017 margin-left: 0;
1018 }
1019 .wf-modal-scrollbar-measure {
1020 position: absolute;
1021 top: -9999px;
1022 width: 50px;
1023 height: 50px;
1024 overflow: scroll;
1025 }
1026 .modal-title {
1027 margin-bottom: 20px;
1028 }
1029 .modal-title * {
1030 margin: 0;
1031 font-size: 18px;
1032 font-weight: 400;
1033 }
1034 /**
1035 * Banner section styles
1036 */
1037 .wf-banner-section {
1038 padding: 76px 62px;
1039 display: flex;
1040 align-items: center;
1041 justify-content: space-between;
1042 flex-wrap: nowrap;
1043 background: #12CE66 url('../images/premium/banner-bg.svg');
1044 background-size: cover;
1045 border-radius: 3px;
1046 }
1047 .wf-banner-section h1 {
1048 color: #fff !important;
1049 margin-bottom: 0;
1050 letter-spacing: 1.1px;
1051 text-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
1052 }
1053 .wf-banner-section p {
1054 color: #E8FFF2 !important;
1055 }
1056 .wf-banner-section .banner-thumb {
1057 position: relative;
1058 max-height: 200px;
1059 }
1060 .wf-banner-section .banner-icon {
1061 background: #FFFFFF;
1062 box-shadow: 0 8px 19px 0 rgba(0, 0, 0, 0.16);
1063 display: inline-flex;
1064 padding: 12px;
1065 border-radius: 10px;
1066 margin-bottom: 15px;
1067 }
1068 .wf-banner-section .video-play-icon {
1069 background: #FFFFFF;
1070 box-shadow: 1px 17px 44px 0 rgba(0, 0, 0, 0.11);
1071 width: 50px;
1072 height: 50px;
1073 border-radius: 50%;
1074 display: flex;
1075 align-items: center;
1076 justify-content: center;
1077 position: absolute;
1078 bottom: 0;
1079 right: -25px;
1080 animation: play_effect_btn 3s infinite ease-in-out;
1081 }
1082 .wf-banner-section .wf-modal-body iframe {
1083 width: 100%;
1084 }
1085 .wf-banner-section .wf-modal .modal-close {
1086 color: #fff;
1087 font-size: 13px;
1088 }
1089 .wf-banner-section .banner-content {
1090 margin-bottom: 30px;
1091 }
1092 .wf-banner-section .banner-buttons a:not(:last-child) {
1093 margin-right: 18px;
1094 }
1095 @media (max-width: 767px) {
1096 .wf-banner-section {
1097 flex-direction: column;
1098 }
1099 .wf-banner-section .wf-btn-primary {
1100 margin-bottom: 10px;
1101 }
1102 }
1103 @media (max-width: 500px) {
1104 .wf-banner-section {
1105 padding: 50px 25px;
1106 }
1107 .wf-banner-section .video-play-icon {
1108 right: -20px;
1109 bottom: 20px;
1110 }
1111 }
1112 /**
1113 * Feature section styles
1114 */
1115 .wf-features-wrapper .section-content {
1116 margin-bottom: -42px;
1117 }
1118 .wf-features-wrapper .feature-row {
1119 margin: 0 -27px;
1120 display: flex;
1121 flex-wrap: wrap;
1122 }
1123 .wf-features-wrapper .feature-row .feature-column {
1124 flex-basis: 33.33%;
1125 max-width: 33.33%;
1126 padding: 0 27px;
1127 }
1128 @media (max-width: 1200px) {
1129 .wf-features-wrapper .feature-row {
1130 margin: 0 -15px;
1131 }
1132 .wf-features-wrapper .feature-row .feature-column {
1133 padding: 0 15px;
1134 }
1135 }
1136 @media (max-width: 767px) {
1137 .wf-features-wrapper .feature-row .feature-column {
1138 flex-basis: 50%;
1139 max-width: 50%;
1140 }
1141 }
1142 @media (max-width: 420px) {
1143 .wf-features-wrapper .feature-row .feature-column {
1144 flex-basis: 100%;
1145 max-width: 100%;
1146 }
1147 .wf-features-wrapper .feature-row .feature-column .feature-thumb {
1148 width: 100%;
1149 }
1150 }
1151 .wf-features-wrapper .feature-thumb {
1152 display: inline-block;
1153 width: auto;
1154 box-shadow: -3px 2px 38px 0 rgba(0, 0, 0, 0.06);
1155 }
1156 .wf-features-wrapper .feature-thumb img {
1157 width: 100%;
1158 display: flex;
1159 }
1160 .wf-features-wrapper .feature-column {
1161 margin-bottom: 42px;
1162 }
1163 .wf-features-wrapper .feature-column h3 {
1164 margin: 30px 0 17px;
1165 }
1166 .wf-features-wrapper .feature-column p {
1167 margin: 0;
1168 }
1169 /**
1170 * Integration section styles
1171 */
1172 .wf-integration-wrapper {
1173 padding: 70px 45px;
1174 background: #fff;
1175 border-radius: 3px 3px 0 0;
1176 text-align: center;
1177 margin-bottom: 0 !important;
1178 }
1179 .wf-integration-wrapper .section-header {
1180 margin-bottom: 70px !important;
1181 }
1182 .wf-integration-wrapper .section-content {
1183 margin-bottom: -30px;
1184 }
1185 .wf-integration-wrapper .integration-row {
1186 margin: 0 -22px;
1187 display: flex;
1188 flex-wrap: wrap;
1189 }
1190 .wf-integration-wrapper .integration-column {
1191 padding: 0 22px;
1192 margin-bottom: 30px;
1193 flex-basis: 25%;
1194 max-width: 25%;
1195 }
1196 @media (max-width: 1200px) {
1197 .wf-integration-wrapper .integration-column {
1198 flex-basis: 33.33%;
1199 max-width: 33.33%;
1200 }
1201 }
1202 @media (max-width: 767px) {
1203 .wf-integration-wrapper .integration-column {
1204 flex-basis: 50%;
1205 max-width: 50%;
1206 }
1207 }
1208 @media (max-width: 427px) {
1209 .wf-integration-wrapper .integration-column {
1210 flex-basis: 100%;
1211 max-width: 100%;
1212 }
1213 }
1214 .wf-integration-wrapper .integration-column h3 {
1215 margin: 20px 0 17px;
1216 }
1217 .wf-integration-wrapper .integration-column p {
1218 margin-bottom: 0;
1219 }
1220 .wf-import-wrapper {
1221 border-top: 1px solid #E2E2E2;
1222 padding: 40px;
1223 background: #fff;
1224 }
1225 .wf-import-wrapper .section-content {
1226 display: flex;
1227 justify-content: space-between;
1228 align-items: center;
1229 }
1230 @media (max-width: 767px) {
1231 .wf-import-wrapper .section-content {
1232 flex-direction: column;
1233 }
1234 .wf-import-wrapper .section-content .import-left {
1235 margin-bottom: 30px;
1236 }
1237 .wf-import-wrapper .section-content .import-left,
1238 .wf-import-wrapper .section-content .import-right {
1239 width: 100%;
1240 }
1241 }
1242 .wf-import-wrapper .import-left {
1243 display: flex;
1244 flex: 1;
1245 }
1246 .wf-import-wrapper .import-left p,
1247 .wf-import-wrapper .import-left h2 {
1248 margin: 0;
1249 }
1250 .wf-import-wrapper .import-left p {
1251 color: #1ABC9C;
1252 font-size: 16px;
1253 line-height: 26px;
1254 }
1255 .wf-import-wrapper .import-left h2 {
1256 font-size: 25px;
1257 line-height: 36px;
1258 }
1259 .wf-import-wrapper .import-left .import-icon {
1260 display: flex;
1261 align-items: center;
1262 justify-content: center;
1263 flex-basis: 65px;
1264 height: 65px;
1265 background: #12CE66;
1266 box-shadow: 0 11px 25px 0 rgba(0, 0, 0, 0.16);
1267 border-radius: 8px;
1268 margin-right: 30px;
1269 }
1270 #wpuf-form-builder .tab-content {
1271 overflow-x: hidden;
1272 }
1273 .wpuf-integrations-wrap {
1274 display: flex;
1275 flex-wrap: wrap;
1276 margin: 0 -10px;
1277 }
1278 .wpuf-integrations-wrap .wpuf-integration {
1279 padding: 0 10px;
1280 flex-basis: 25%;
1281 max-width: 25%;
1282 margin-bottom: 0;
1283 background-color: transparent;
1284 box-shadow: none;
1285 border: 0;
1286 }
1287 @media (max-width: 767px) {
1288 .wpuf-integrations-wrap {
1289 margin: 0;
1290 }
1291 .wpuf-integrations-wrap .wpuf-integration {
1292 flex-basis: 50%;
1293 max-width: 50%;
1294 }
1295 }
1296 @media (max-width: 450px) {
1297 .wpuf-integrations-wrap .wpuf-integration {
1298 flex-basis: 100%;
1299 max-width: 100%;
1300 }
1301 .wpuf-integrations-wrap .wpuf-integration label {
1302 margin: 0 0 10px;
1303 }
1304 .wpuf-integrations-wrap .wpuf-integration .wpuf-int-form-row {
1305 flex-direction: column;
1306 }
1307 .wpuf-integrations-wrap .wpuf-integration .wpuf-int-field {
1308 width: 100%;
1309 position: relative;
1310 }
1311 .wpuf-integrations-wrap .wpuf-integration .wpuf-int-field input:not([type='checkbox']),
1312 .wpuf-integrations-wrap .wpuf-integration .wpuf-int-field select,
1313 .wpuf-integrations-wrap .wpuf-integration .wpuf-int-field textarea {
1314 padding: 7px 12px;
1315 border-radius: 3px;
1316 max-width: 100%;
1317 width: 100%;
1318 }
1319 .wpuf-integrations-wrap .wpuf-integration .wpuf-int-field .wpuf-merge-tag-wrap .merge-tag-link {
1320 position: absolute;
1321 top: 7px;
1322 right: 7px;
1323 }
1324 .wpuf-integrations-wrap .wpuf-integration .wpuf-int-field .wpuf-merge-tag-wrap .wpuf-merge-tags {
1325 top: 35px;
1326 }
1327 }
1328 .wpuf-integrations-wrap .wpuf-setting {
1329 display: flex;
1330 align-items: center;
1331 }
1332 .wpuf-integrations-wrap .wpuf-setting a {
1333 display: inline-flex;
1334 margin-right: 10px;
1335 }
1336 .wpuf-integrations-wrap .wpuf-setting span {
1337 font-size: 16px;
1338 font-weight: 400;
1339 }
1340 .wpuf-integrations-wrap .wf-modal .wf-modal-dialog {
1341 max-width: 600px;
1342 }
1343 .wpuf-integrations-wrap .wf-modal-header {
1344 border-bottom: 1px solid #E2E2E2;
1345 background: #FBFBFB;
1346 padding: 10px 20px;
1347 }
1348 .wpuf-integrations-wrap .wf-modal-header img {
1349 opacity: 0.5;
1350 filter: grayscale(100%);
1351 transition: all 0.3s ease-in-out;
1352 }
1353 .wpuf-integrations-wrap .wf-modal-header .wpuf-toggle-switch.checked ~ img {
1354 opacity: 1;
1355 filter: none;
1356 }
1357 .wpuf-integrations-wrap .wf-modal-header .modal-close {
1358 color: #777;
1359 width: 52px;
1360 height: 52px;
1361 border-radius: 0;
1362 background: transparent;
1363 display: flex;
1364 align-items: center;
1365 justify-content: center;
1366 top: 0;
1367 right: 0;
1368 border-left: 1px solid #ddd;
1369 font-size: 18px;
1370 font-weight: 300;
1371 border-radius: 0 3px 0 0;
1372 border-bottom: 0;
1373 }
1374 .wpuf-integrations-wrap .wf-modal-header .modal-close:hover {
1375 background: #eee;
1376 opacity: 0.8;
1377 }
1378 .wpuf-integrations-wrap .wf-modal-header .modal-header-left {
1379 display: flex;
1380 align-items: center;
1381 }
1382 .wpuf-integrations-wrap .wf-modal-header .modal-header-left img {
1383 margin-left: 15px;
1384 }
1385 .wpuf-integrations-wrap .wf-modal-footer {
1386 border-top: 1px solid #E2E2E2;
1387 background: #FBFBFB;
1388 padding: 10px 20px;
1389 }
1390 .wpuf-integrations-wrap fieldset {
1391 border: 1px solid #E2E2E2 !important;
1392 padding: 20px;
1393 margin-bottom: 10px;
1394 }
1395 .wpuf-integrations-wrap fieldset legend {
1396 font-weight: 600;
1397 font-size: 15px;
1398 padding: 0 10px;
1399 }
1400 .wpuf-integrations-wrap fieldset label {
1401 font-weight: 600;
1402 }
1403 .wpuf-int-form-row {
1404 display: flex;
1405 margin-bottom: 10px;
1406 }
1407 .wpuf-int-form-row .wpuf-integration-updater {
1408 display: inline-flex;
1409 margin-left: 5px;
1410 }
1411 .wpuf-int-form-row .wpuf-int-field-label {
1412 margin-right: 10px;
1413 min-width: 120px;
1414 display: inline-flex;
1415 }
1416 .wpuf-int-form-row .wpuf-int-field {
1417 width: calc(100% - 120px);
1418 position: relative;
1419 }
1420 .wpuf-int-form-row .wpuf-int-field input:not([type='checkbox']),
1421 .wpuf-int-form-row .wpuf-int-field select,
1422 .wpuf-int-form-row .wpuf-int-field textarea {
1423 padding: 7px 12px;
1424 border-radius: 3px;
1425 max-width: 100%;
1426 width: 100%;
1427 }
1428 .wpuf-int-form-row .wpuf-int-field .wpuf-merge-tag-wrap .merge-tag-link {
1429 position: absolute;
1430 top: 7px;
1431 right: 7px;
1432 }
1433 .wpuf-int-form-row .wpuf-int-field .wpuf-merge-tag-wrap .wpuf-merge-tags {
1434 top: 35px;
1435 }
1436 .wpuf-int-form-row .wpuf-int-field-label label {
1437 font-weight: 600;
1438 display: block;
1439 margin-top: 6px;
1440 }
1441 .wpuf-panel {
1442 border: 1px solid #E2E2E2;
1443 margin-bottom: 20px;
1444 }
1445 .wpuf-panel.panel-checked .wpuf-panel-body img {
1446 filter: none;
1447 opacity: 1;
1448 }
1449 .wpuf-panel .wpuf-panel-body {
1450 position: relative;
1451 background: #fff;
1452 height: 163px;
1453 padding: 10px 20px;
1454 display: flex;
1455 align-items: center;
1456 justify-content: center;
1457 border-radius: 4px 4px 0 0;
1458 }
1459 .wpuf-panel .wpuf-panel-body img {
1460 max-height: 100%;
1461 max-width: 160px;
1462 filter: grayscale(100%);
1463 opacity: 0.5;
1464 transition: all 0.3s ease-in-out;
1465 }
1466 .wpuf-panel .wpuf-panel-body .premium-badge {
1467 font-size: 12px;
1468 font-weight: 400;
1469 line-height: 20px;
1470 color: #fff;
1471 background: #7ED321;
1472 display: inline-block;
1473 padding: 3px 12px;
1474 position: absolute;
1475 top: 20px;
1476 right: -1px;
1477 border-radius: 20px 0 0 20px;
1478 }
1479 .wpuf-panel .wpuf-panel-footer {
1480 border-radius: 0 0 4px 4px;
1481 background: #FBFBFB;
1482 border-top: 1px solid #E2E2E2;
1483 padding: 10px 20px;
1484 display: flex;
1485 justify-content: space-between;
1486 align-items: center;
1487 }
1488