PluginProbe ʕ •ᴥ•ʔ
Everest Forms – Contact Form, Payment Form, Quiz, Survey & Custom Form Builder with AI / 3.5.3
Everest Forms – Contact Form, Payment Form, Quiz, Survey & Custom Form Builder with AI v3.5.3
3.5.3 3.5.2 3.5.1 3.5.0 3.4.8 3.4.7 3.4.6 1.1.0 1.1.1 1.1.2 1.1.3 1.1.4 1.1.5 1.1.5.1 1.1.6 1.1.7 1.1.8 1.1.9 1.2.0 1.2.1 1.2.2 1.2.3 1.2.4 1.3.0 1.3.1 1.3.2 1.3.3 1.3.4 1.4.0 1.4.1 1.4.2 1.4.3 1.4.4 1.4.5 1.4.6 1.4.7 1.4.8 1.4.9 1.5.0 1.5.1 1.5.10 1.5.2 1.5.3 1.5.4 1.5.5 1.5.6 1.5.7 1.5.8 1.5.9 1.6.0 1.6.1 1.6.2 1.6.3 1.6.4 1.6.5 1.6.6 1.6.6.1 1.6.7 1.7.0 1.7.0.1 1.7.0.2 1.7.0.3 1.7.1 1.7.2 1.7.2.1 1.7.2.2 1.7.3 1.7.4 1.7.5 1.7.5.1 1.7.5.2 1.7.6 1.7.7 1.7.7.1 1.7.7.2 1.7.8 1.7.9 1.8.0 1.8.0.1 1.8.1 1.8.2 1.8.2.1 1.8.2.2 1.8.2.3 1.8.3 1.8.4 1.8.5 1.8.6 1.8.7 1.8.8 1.8.9 1.9.0 1.9.0.1 1.9.1 1.9.2 1.9.3 1.9.4 1.9.4.1 1.9.5 1.9.6 1.9.7 1.9.8 1.9.9 2.0.0 2.0.0.1 2.0.1 2.0.2 2.0.3 2.0.3.1 2.0.4 2.0.4.1 2.0.5 2.0.6 2.0.7 2.0.8 2.0.8.1 2.0.9 3.0.0 3.0.0.1 3.0.1 3.0.2 3.0.3 3.0.3.1 3.0.4 3.0.4.1 3.0.4.2 3.0.5 3.0.5.1 3.0.5.2 3.0.6 3.0.6.1 3.0.7.1 3.0.8 3.0.8.1 3.0.9 3.0.9.1 3.0.9.2 3.0.9.3 3.0.9.4 3.0.9.5 3.1.0 3.1.1 3.1.2 3.2.0 3.2.1 3.2.2 3.2.3 3.2.4 3.2.5 3.2.6 3.3.0 3.4.0 3.4.1 3.4.2 3.4.2.1 3.4.3 3.4.4 3.4.5 trunk 1.0 1.0.1 1.0.2 1.0.3
everest-forms / assets / css / admin.scss
everest-forms / assets / css Last commit date
bourbon 1 year ago code-mirror 1 year ago components 1 month ago jquery-confirm 8 years ago jquery-ui 8 years ago mixins 5 years ago perfect-scrollbar 7 years ago utility 5 years ago variables 1 year ago _animation.scss 7 years ago _backbone.scss 7 years ago _clearings.scss 6 years ago _colors.scss 6 years ago _confirm.scss 3 months ago _containers.scss 5 years ago _fonts.scss 5 years ago _grid.scss 5 months ago _sprite.scss 2 years ago _variables.scss 1 year ago activation-rtl.css 1 year ago activation.css 6 months ago activation.css.map 5 years ago activation.scss 3 years ago admin-rtl.css 1 month ago admin.css 1 month ago admin.css.map 4 years ago admin.scss 5 days ago customize-admin-rtl.css 1 month ago customize-admin.css 1 month ago customize-admin.scss 1 month ago customize-controls-rtl.css 5 months ago customize-controls.css 5 months ago customize-controls.scss 5 months ago deactivation-feedback-rtl.css 1 year ago deactivation-feedback.css 6 months ago deactivation-feedback.scss 3 years ago everest-forms-default-frontend-rtl.css 3 months ago everest-forms-default-frontend.css 3 months ago everest-forms-default-frontend.scss 3 months ago everest-forms-rtl.css 3 months ago everest-forms.css 3 months ago everest-forms.css.map 4 years ago everest-forms.scss 3 months ago evf-form-preview-rtl.css 3 months ago evf-form-preview.css 3 months ago evf-form-preview.scss 3 months ago evf-locked-fields-rtl.css 1 month ago evf-locked-fields.css 1 month ago evf-locked-fields.scss 1 month ago flatpickr-rtl.css 4 years ago flatpickr.css 6 months ago flatpickr.css.map 5 years ago flatpickr.scss 6 years ago intlTelInput-rtl.css 1 year ago intlTelInput.css 6 months ago intlTelInput.scss 2 years ago menu-rtl.css 1 month ago menu.css 1 month ago menu.css.map 5 years ago menu.scss 1 month ago select2-rtl.css 4 years ago select2.css 6 months ago select2.css.map 5 years ago select2.scss 2 years ago
admin.scss
14803 lines
1 /**
2 * admin.scss
3 * General EverestForms admin styles.
4 */
5
6 /**
7 * Import
8 */
9 @import 'variables/variables';
10 @import 'mixins/mixins';
11 @import 'fonts';
12 @import 'animation';
13 @import 'clearings';
14 @import 'confirm';
15
16 // Components
17 @import 'components/badge', 'components/forms', 'components/buttons',
18 'components/card', 'components/table', 'components/entries-views',
19 'components/toast', 'components/accordion', 'components/evf-header-skeleton',
20 'components/evf-pro-upsell';
21
22 @import 'colors';
23 @import 'containers';
24 @import 'grid';
25
26 //Utilities
27 @import 'utility/display', 'utility/spacing', 'utility/border';
28
29 //Everest-forms icon
30 @font-face {
31 font-family: 'EverestForms';
32 src: url('../fonts/EverestForms.eot?5c6kq4');
33 src:
34 url('../fonts/EverestForms.eot?5c6kq4#iefix') format('embedded-opentype'),
35 url('../fonts/EverestForms.ttf?5c6kq4') format('truetype'),
36 url('../fonts/EverestForms.woff?5c6kq4') format('woff'),
37 url('../fonts/EverestForms.svg?5c6kq4#EverestForms') format('svg');
38 font-weight: normal;
39 font-style: normal;
40 font-display: block;
41 }
42
43 body[class*='everest-forms_page_']*='everest-forms_page_'] {
44 background: #f4f4f4 !important;
45 overflow-x: hidden;
46
47 // Subscription plan expiry picker (inline under the date input).
48 .evf-subscription-expiry-picker-anchor {
49 position: relative;
50 overflow: visible;
51 }
52
53 .flatpickr-calendar.evf-subscription-expiry-calendar {
54 z-index: 1000001 !important;
55 width: 312px !important;
56 margin-top: 4px;
57 padding-top: 8px;
58 box-sizing: border-box;
59 overflow: visible;
60
61 &::before,
62 &::after {
63 display: none !important;
64 }
65
66 .flatpickr-months {
67 display: flex;
68 align-items: center;
69 justify-content: center;
70 position: relative;
71 height: auto;
72 min-height: 52px;
73 padding: 8px 12px;
74 box-sizing: border-box;
75 overflow: visible;
76 }
77
78 .flatpickr-months .flatpickr-prev-month,
79 .flatpickr-months .flatpickr-next-month {
80 position: absolute;
81 top: 50%;
82 transform: translateY(-50%);
83 height: 32px;
84 width: 32px;
85 padding: 8px;
86 display: flex;
87 align-items: center;
88 justify-content: center;
89 box-sizing: border-box;
90 z-index: 2;
91 }
92
93 .flatpickr-months .flatpickr-prev-month {
94 left: 8px;
95 }
96
97 .flatpickr-months .flatpickr-next-month {
98 right: 8px;
99 }
100
101 .flatpickr-months .flatpickr-month {
102 flex: 1 1 auto;
103 width: 100%;
104 max-width: 100%;
105 overflow: visible !important;
106 height: auto;
107 min-height: 36px;
108 // Keep month/year clear of ‹ › arrows (they are position:absolute).
109 padding: 0 36px;
110 box-sizing: border-box;
111 display: flex;
112 align-items: center;
113 justify-content: center;
114 }
115
116 // Past / before-min (disabled, no trial tooltip).
117 .flatpickr-day.flatpickr-disabled:not(.prevMonthDay):not(.nextMonthDay):not(
118 .evf-expiry-trial-blocked
119 ) {
120 cursor: not-allowed !important;
121 opacity: 1 !important;
122 color: #a7aaad !important;
123 border-color: transparent !important;
124 font-weight: 400;
125 }
126
127 // Trial window only.
128 .flatpickr-day.evf-expiry-trial-blocked,
129 .flatpickr-day.evf-expiry-trial-blocked.flatpickr-disabled {
130 cursor: not-allowed !important;
131 opacity: 1 !important;
132 color: #8c8f94 !important;
133 border-color: transparent !important;
134 font-weight: 400;
135 }
136
137 .flatpickr-day.evf-expiry-trial-blocked:hover {
138 color: #8c8f94 !important;
139 background: #e2e4e7 !important;
140 cursor: not-allowed !important;
141 }
142
143 // Selectable dates in the current month read darker for contrast.
144 .flatpickr-day:not(.flatpickr-disabled):not(.prevMonthDay):not(
145 .nextMonthDay
146 ) {
147 color: #1d2327;
148 font-weight: 500;
149 }
150
151 .flatpickr-current-month {
152 position: static !important;
153 width: auto !important;
154 max-width: 100%;
155 left: auto !important;
156 transform: none !important;
157 font-size: 14px !important;
158 font-weight: 500;
159 line-height: 1.4 !important;
160 height: auto !important;
161 min-height: 0;
162 padding: 0 !important;
163 margin: 0 !important;
164 display: inline-flex !important;
165 align-items: center;
166 justify-content: center;
167 gap: 10px;
168 flex-wrap: nowrap;
169 text-align: center;
170
171 .flatpickr-monthDropdown-months {
172 font-size: 14px !important;
173 line-height: 1.4 !important;
174 height: 32px !important;
175 width: 112px;
176 min-width: 112px;
177 max-width: 112px;
178 margin: 0 !important;
179 padding: 4px 24px 4px 12px !important;
180 border: 1px solid #dcdcde !important;
181 border-radius: 4px;
182 background: #fff !important;
183 box-sizing: border-box;
184 appearance: menulist;
185 cursor: pointer;
186 text-align: left;
187 vertical-align: middle;
188
189 &:focus,
190 &:focus-visible,
191 &:active {
192 border-color: #6c47e8 !important;
193 outline: none;
194 box-shadow: 0 0 0 1px #6c47e8;
195 }
196 }
197
198 .numInputWrapper {
199 display: inline-flex !important;
200 align-items: stretch;
201 width: 80px !important;
202 min-width: 80px;
203 max-width: 80px;
204 height: 40px !important;
205 flex-shrink: 0;
206 border-radius: 4px;
207 overflow: visible;
208 position: relative;
209
210 input.cur-year {
211 font-size: 14px !important;
212 line-height: 1.4 !important;
213 height: 40px !important;
214 width: 100% !important;
215 min-width: 0;
216 padding: 4px 22px 4px 10px !important;
217 border: 1px solid #dcdcde !important;
218 border-radius: 4px;
219 background: #fff !important;
220 box-sizing: border-box;
221 text-align: left;
222
223 &:focus,
224 &:focus-visible {
225 border-color: #6c47e8 !important;
226 outline: none;
227 box-shadow: 0 0 0 1px #6c47e8;
228 }
229 }
230
231 span.arrowUp,
232 span.arrowDown {
233 width: 18px;
234 right: 0;
235 opacity: 1 !important;
236 border-color: #dcdcde;
237 box-sizing: border-box;
238 }
239
240 span.arrowUp {
241 border-bottom: 0;
242 border-radius: 0 4px 0 0;
243 }
244
245 span.arrowDown {
246 border-radius: 0 0 4px 0;
247 }
248 }
249 }
250 }
251
252 [class*='jconfirm-everest-forms-']*='jconfirm-everest-forms-'] {
253 font-family: -apple-system, BlinkMacSystemFont, Inter, 'Segoe UI', Roboto,
254 Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
255 }
256
257 #wpcontent {
258 padding-left: 0;
259
260 #wpbody-content {
261 #evf-react-header-root,
262 .wrap,
263 #everest-forms-builder-form,
264 #everest-forms-dashboard,
265 #evf-templates {
266 font-family: -apple-system, BlinkMacSystemFont, Inter, 'Segoe UI',
267 Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
268
269 h1,
270 h2,
271 h3,
272 h4,
273 h5,
274 h6,
275 p,
276 small,
277 label,
278 table {
279 font-family: -apple-system, BlinkMacSystemFont, Inter, 'Segoe UI',
280 Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
281 }
282 }
283
284 .wrap {
285 max-width: 100%;
286 margin: 24px;
287 padding: 24px 28px;
288 border-radius: 13px;
289 background: #ffffff;
290 border: 1px solid #e1e1e1;
291 }
292 }
293 }
294
295 #setting-error-bulk_action,
296 #message.updated.notice {
297 display: none !important;
298 }
299 }
300
301 body.everest-forms_page_evf-settings {
302 #wpcontent {
303 #wpbody-content {
304 .wrap {
305 padding: 0;
306 margin: 0;
307 border-radius: 0;
308 background: transparent;
309 border: 0;
310 }
311 }
312 }
313 }
314
315 #everest-forms-entries-list {
316 margin-top: 0;
317 }
318
319 .blockUI.blockOverlay {
320 @include loader();
321 }
322
323 // Loader
324 .evf-loading {
325 background: url(../images/icons/loader.svg);
326 background-size: 20px 20px;
327 display: inline-block;
328 visibility: hidden;
329 vertical-align: middle;
330 opacity: 0.7;
331 width: 20px;
332 height: 20px;
333 margin: 2px 0 0 5px;
334
335 &.evf-loading-active {
336 visibility: visible;
337 -webkit-animation: rotating 1s linear infinite;
338 -moz-animation: rotating 1s linear infinite;
339 -ms-animation: rotating 1s linear infinite;
340 -o-animation: rotating 1s linear infinite;
341 animation: rotating 1s linear infinite;
342 }
343 }
344
345 //tinymce full-width
346 .everest_forms_tinymce_class {
347 width: 100% !important;
348 }
349
350 /**
351 * Grid Styles
352 **/
353
354 .evf-form-row {
355 display: flex;
356 flex-wrap: wrap;
357 margin-left: -15px;
358 margin-right: -15px;
359 }
360
361 // Gutter for all col
362 .evf-form-col-4,
363 .evf-form-col-6 {
364 position: relative;
365 width: 100%;
366 padding-left: 15px;
367 padding-right: 15px;
368 }
369
370 .evf_addons_wrap {
371 p.refresh {
372 margin: 0 0 2em;
373 }
374
375 .wp-filter {
376 display: none;
377 }
378
379 .plugin-card {
380 .name,
381 .desc {
382 margin-right: 0;
383 }
384
385 .plugin-card-top {
386 padding: 20px;
387 min-height: 130px;
388
389 .plugin-desc {
390 overflow: hidden;
391 display: -webkit-box;
392 -webkit-box-orient: vertical;
393 }
394
395 .plugin-icon {
396 border: 1px solid #eee;
397 }
398 }
399
400 .plugin-card-bottom {
401 .status {
402 text-align: left;
403 float: left;
404 clear: left;
405 width: 65%;
406 padding-top: 5px;
407 width: calc(100% - 180px);
408
409 span.status-label {
410 color: #666;
411
412 &.status-active {
413 color: #2a9b39;
414 }
415
416 &.status-inactive {
417 color: #a00;
418 }
419 }
420 }
421
422 .action-buttons {
423 float: right;
424 clear: right;
425 max-width: 180px;
426
427 &.upgrade-plan {
428 margin: 0 auto;
429 }
430 }
431 }
432 }
433
434 .plugin-card-update-failed {
435 .notice-error {
436 margin: 0;
437 padding: 9px 16px 8px;
438
439 .notice-dismiss {
440 padding: 17px;
441 }
442 }
443 }
444
445 @media screen and (max-width: 782px) {
446 .plugin-card {
447 .plugin-card-bottom {
448 .status {
449 padding-top: 9px;
450 }
451
452 .action-buttons {
453 .button.updating-message {
454 &::before,
455 &::after {
456 margin-top: -1px;
457 }
458 }
459 }
460 }
461 }
462
463 .plugin-card-update-failed {
464 .notice-error {
465 padding: 13px 20px;
466
467 .notice-dismiss {
468 padding: 21px;
469 }
470 }
471 }
472 }
473 }
474
475 .clear {
476 clear: both;
477 }
478
479 .wrap.everest-forms div.updated,
480 .wrap.everest-forms div.error {
481 margin-top: 10px;
482 }
483
484 /**
485 * Help Tip Tooltip Icon
486 */
487 .everest-forms-help-tip {
488 cursor: help;
489 color: #666;
490 display: inline-block;
491 font-size: 1.2em;
492 font-style: normal;
493 height: 16px;
494 line-height: 16px;
495 position: relative;
496 vertical-align: middle;
497 width: 16px;
498
499 &::after {
500 cursor: help;
501 @include icon_dashicons('\f223');
502 }
503 }
504
505 /**
506 * Notice info
507 */
508 .everest-forms-notice {
509 display: inline-block;
510 padding: 5px 15px;
511 margin-bottom: 15px;
512 border-radius: 4px;
513 min-width: 500px;
514
515 &::before {
516 content: '\f348';
517 font-size: 22px;
518 vertical-align: middle;
519 font-family: dashicons;
520 margin-right: 10px;
521 }
522
523 &.everest-forms-notice-info {
524 padding: 10px 14px;
525 border: 0;
526 border-left: 3px solid #7545bb;
527 background: #f6f3fa;
528 border-radius: 0;
529 color: #383838;
530 display: flex;
531 align-items: center;
532 margin-top: 24px;
533
534 &::before {
535 // color: $blue;
536 color: #7545bb;
537 margin-top: 2px;
538 }
539 }
540
541 &.everest-forms-notice-success {
542 background: lighten($green, 40%);
543 border: 1px solid $green;
544
545 &::before {
546 color: $green;
547 }
548 }
549
550 &.everest-forms-notice-warning {
551 background: lighten($orange, 45%);
552 border: 1px solid $orange;
553
554 &::before {
555 color: $orange;
556 }
557 }
558
559 &.everest-forms-notice-danger {
560 background: lighten($red, 30%);
561 border: 1px solid $red;
562
563 &.everest-forms-notice-danger-text {
564 color: $red;
565 }
566
567 &::before {
568 color: $red;
569 }
570 }
571 }
572
573 .evf-handler-counter {
574 display: flex;
575
576 .evf-handler-counter__button {
577 background: $color_gray-light-skin;
578 width: 36px;
579 height: 36px;
580 display: flex;
581 align-items: center;
582 justify-content: center;
583 border: 1px solid $color_gray-lighten;
584 cursor: pointer;
585
586 &.evf-handler-counter__button-minus {
587 border-radius: 3px 0 0 3px;
588 }
589
590 &.evf-handler-counter__button-plus {
591 border-radius: 0 3px 3px 0;
592 }
593
594 &.dashicons {
595 font-size: 20px;
596 }
597 }
598
599 .evf-handler-counter__input {
600 width: 80px;
601 border-radius: 0;
602
603 &::-webkit-outer-spin-button,
604 &::-webkit-inner-spin-button {
605 -webkit-appearance: none;
606 margin: 0;
607 }
608
609 &[type='number']='number'] {
610 margin: 0;
611 }
612 }
613 }
614
615 .everest-forms-text-info {
616 color: $blue;
617 }
618
619 .everest-forms-text-success {
620 color: $green;
621 }
622
623 .everest-forms-text-warming {
624 color: $orange;
625 }
626
627 .everest-forms-text-danger {
628 color: $red;
629 }
630
631 /**
632 * Help tip
633 */
634
635 h2 .everest-forms-help-tip {
636 margin-top: -5px;
637 margin-left: 0.25em;
638 }
639
640 img.help_tip {
641 margin: 0 0 0 9px;
642 vertical-align: middle;
643 }
644
645 .postbox img.help_tip {
646 margin-top: 0;
647 }
648
649 .postbox .everest-forms-help-tip {
650 margin: 0 0 0 9px;
651 }
652
653 /**
654 * Toggle class.
655 */
656 .everest-forms-show {
657 display: block;
658 }
659
660 .everest-forms-hidden {
661 display: none;
662 }
663
664 /**
665 * Core Styling
666 */
667 .everest-forms_page_evf-builder {
668 .evf-shortcode-field {
669 display: flex;
670
671 .widefat {
672 width: 100%;
673 }
674
675 input[type='text']='text'] {
676 min-height: 38px;
677 font-size: 14px;
678 line-height: 20px;
679 width: -webkit-fill-available;
680 padding: 0 12px;
681 border: 1px solid #e1e1e1;
682 color: #383838;
683 font-weight: 400;
684 box-shadow: none;
685 margin: 0;
686 border-right: 0;
687 background: none;
688 border-radius: 4px 0 0 4px;
689 flex: 1;
690
691 &:focus {
692 outline: 2px solid transparent;
693 }
694 }
695
696 .evf-copy-shortcode {
697 width: 38px;
698 box-shadow: none;
699 margin: 0;
700 margin-left: -5px;
701 border-radius: 0 4px 4px 0;
702 background: #f4f4f4 !important;
703 border-color: #e1e1e1 !important;
704 min-height: 36px;
705 line-height: 20px;
706
707 svg {
708 fill: #fff;
709 width: 18px;
710 height: 18px;
711 margin-bottom: 3px;
712 vertical-align: middle;
713 }
714 }
715 }
716 }
717
718 body.everest-forms-builder {
719 &.everest-forms_page_evf-builder {
720 overflow-x: hidden;
721
722 #wpcontent {
723 padding-left: 0;
724 }
725
726 #wpfooter {
727 position: fixed;
728 padding: 11px 20px;
729 background: #f1f1f1;
730 border-top: 1px solid $color_gray-lighten;
731 display: none;
732 }
733 }
734
735 @media screen and (max-width: 782px) {
736 &.everest-forms_page_evf-builder {
737 .auto-fold {
738 #wpcontent {
739 padding-left: 0;
740 }
741 }
742 }
743 }
744 }
745
746 .everest-forms-builder,
747 .everest-forms-builder-setup,
748 .everest-forms_page_evf-settings,
749 .everest-forms_page_evf-tools {
750 .everest-forms {
751 margin: 0;
752 }
753
754 #wpcontent {
755 padding-left: 0;
756 }
757 }
758
759 /**
760 * Welcome page.
761 */
762 .dashboard_page_evf-welcome {
763 #message {
764 &.updated {
765 display: none;
766 }
767 }
768 }
769
770 #everest-forms-welcome {
771 max-width: 760px;
772 border-radius: 4px;
773 margin: 3rem auto;
774 background: $color-white;
775 border: 1px solid $color_gray-lighten;
776 box-shadow: 0 2px 10px transparentize($color_gray-base, 0.9);
777
778 a {
779 text-decoration: none;
780
781 &:focus {
782 box-shadow: none;
783 outline: none;
784 }
785 }
786
787 p {
788 font-size: 1.25em;
789 color: $color_gray-base;
790 }
791
792 .eveverest-forms-welcome-header {
793 display: flex;
794 align-items: center;
795 justify-content: space-between;
796 padding: 1em;
797 border-bottom: 1px solid $color_gray-lighten;
798 }
799
800 .eveverest-forms-welcome-header__logo-wrap {
801 display: flex;
802 align-items: center;
803
804 .eveverest-forms-welcome-header__logo-icon {
805 margin-right: 16px;
806 padding-right: 16px;
807 border-right: 1px solid $color_gray-lighten;
808
809 svg {
810 display: block;
811 fill: $everestforms;
812 width: 24px;
813 height: 24px;
814 }
815 }
816
817 span {
818 font-size: 14px;
819 font-weight: 600;
820 }
821 }
822
823 .everest-forms-welcome-container {
824 text-align: center;
825
826 .everest-forms-welcome-container__header {
827 padding: 0 1em;
828
829 h2 {
830 font-size: 1.75em;
831 margin-top: 1.75em;
832 }
833
834 p {
835 margin-bottom: 1.5em;
836 }
837 }
838
839 .everest-forms-welcome-video {
840 cursor: pointer;
841 display: flex;
842 position: relative;
843 align-items: center;
844 justify-content: center;
845
846 .everest-forms-welcome-video__button {
847 border: none;
848 cursor: pointer;
849 font-size: 24px;
850 height: 40px;
851 width: 54px;
852 border-radius: 12px;
853 padding: 8px 15px;
854 position: absolute;
855 color: $color-white;
856 opacity: 0;
857 visibility: hidden;
858 transition: 0.25s ease;
859 background: transparentize($color_gray-base, 0.25);
860
861 svg {
862 height: 24px;
863 width: 224px;
864 }
865
866 &:hover {
867 background: $red;
868 visibility: visible;
869 opacity: 1;
870 }
871 }
872
873 img {
874 display: block;
875 max-width: 100%;
876
877 &:hover {
878 & + .everest-forms-welcome-video__button {
879 visibility: visible;
880 opacity: 1;
881 }
882 }
883 }
884 }
885
886 .everest-forms-welcome-container__action {
887 padding: 0 32px;
888 margin: 3rem 0;
889 display: flex;
890 justify-content: space-between;
891
892 .everest-forms-welcome-container__action-card {
893 padding: 1em;
894 margin: 0 1em;
895 width: 100%;
896 border-radius: 4px;
897 width: calc(50% - 38px);
898 border: 1px solid $color_gray-lighten;
899 transition: 0.3s ease;
900
901 .everest-forms-welcome-container__action-card-img {
902 svg {
903 height: 64px;
904 width: 64px;
905 }
906 }
907
908 .everest-forms-welcome-container__action-card-content {
909 h3 {
910 font-size: 1.23em;
911 margin-bottom: 0.5em;
912 }
913
914 p {
915 margin-top: 0.5em;
916 }
917 }
918
919 &:hover {
920 box-shadow: 0 2px 20px 0 transparentize($color_gray-base, 0.85);
921 }
922 }
923 }
924 }
925 }
926
927 /**
928 * Branding
929 */
930 .everest-forms_page_evf-builder,
931 .everest-forms_page_evf-settings,
932 .everest-forms_page_evf-entries,
933 .everest-forms_page_evf-tools {
934 select {
935 max-width: inherit;
936 }
937
938 .clearfix {
939 margin: 0px;
940 }
941
942 // Toggle switch.
943 .everest-forms-toggle-form {
944 width: 31px;
945 height: 16px;
946 float: left;
947 margin-top: 3px;
948 margin-right: 4px;
949 position: relative;
950
951 input[type='checkbox']='checkbox'] {
952 position: absolute;
953 top: 0;
954 bottom: 0;
955 width: 100%;
956 opacity: 0;
957 z-index: 1;
958
959 &:checked {
960 + .slider {
961 // background: $evf_primary-color;
962 background: #4cc741;
963
964 &::before {
965 transform: translateX(100%);
966 }
967 }
968 }
969 }
970
971 .slider {
972 cursor: pointer;
973 position: absolute;
974 top: 0;
975 left: 0;
976 right: 0;
977 bottom: 0;
978 transition: 0.4s;
979 background: #cdd0d2;
980
981 &::before {
982 content: '';
983 width: 12px;
984 height: 12px;
985 position: absolute;
986 left: 4px;
987 bottom: 2px;
988 transition: 0.4s;
989 background: $color-white;
990 }
991
992 &.round {
993 border-radius: 16px;
994
995 &::before {
996 border-radius: 50%;
997 }
998 }
999 }
1000 }
1001
1002 .evf-toggle-section {
1003 display: inline-block;
1004
1005 .evf-toggle-switch {
1006 display: inline-flex;
1007 position: relative;
1008 line-height: 1;
1009 margin-bottom: 0;
1010 position: relative;
1011
1012 input {
1013 top: 0;
1014 left: 0;
1015 margin: 0;
1016 z-index: 1;
1017 opacity: 0;
1018 padding: 0;
1019 width: 100%;
1020 height: 100%;
1021 border: none;
1022 position: absolute;
1023
1024 &:checked {
1025 + .evf-toggle-switch-wrap {
1026 background: #11a0d2;
1027 border: 9px solid transparent;
1028
1029 &::before {
1030 content: '';
1031 height: 6px;
1032 width: 2px;
1033 background: #fff;
1034 position: absolute;
1035 left: 0;
1036 top: 0;
1037 transform: translateY(-50%);
1038 }
1039
1040 &::after {
1041 border: 2px solid transparent;
1042 }
1043 }
1044
1045 ~ .evf-toggle-switch-control {
1046 background: #fff;
1047 border-width: 0;
1048 transform: translateX(18px) translateY(-50%);
1049 }
1050
1051 &::before {
1052 display: none;
1053 }
1054 }
1055
1056 &:focus {
1057 + .evf-toggle-switch-wrap {
1058 box-shadow:
1059 0 0 0 2px #fff,
1060 0 0 0 3px #6c7781;
1061 }
1062 }
1063 }
1064
1065 .evf-toggle-switch-wrap {
1066 width: 36px;
1067 height: 18px;
1068 display: inline-flex;
1069 background: #fff;
1070 border: 2px solid #6c7781;
1071 border-radius: 9px;
1072 transition: 0.2s background ease;
1073 position: relative;
1074 align-items: center;
1075 justify-content: flex-end;
1076
1077 &::after {
1078 content: '';
1079 width: 4px;
1080 height: 4px;
1081 margin-right: 2px;
1082 border-radius: 50%;
1083 display: inline-block;
1084 border: 2px solid $color_gray-normal;
1085 }
1086 }
1087
1088 .evf-toggle-switch-control {
1089 display: block;
1090 position: absolute;
1091 top: 50%;
1092 left: 4px;
1093 width: 10px;
1094 height: 10px;
1095 border-radius: 50%;
1096 transition: 0.1s transform ease;
1097 background: #6c7781;
1098 border: 5px solid #6c7781;
1099 transform: translateY(-50%);
1100 }
1101 }
1102
1103 label.evf-toggle-label {
1104 display: inline-block;
1105 margin-bottom: 0;
1106 margin-left: 4px;
1107 }
1108 }
1109
1110 .everest-forms-disabled {
1111 opacity: 0.5;
1112 pointer-events: none;
1113 }
1114
1115 // Radio and checkbox list option
1116 .everest-forms-checklist {
1117 margin-bottom: 14px;
1118
1119 ul {
1120 margin-bottom: 0;
1121
1122 label {
1123 font-weight: normal;
1124 margin-bottom: 0;
1125 margin-top: 0;
1126 }
1127 }
1128
1129 &.everest-forms-checklist-inline {
1130 ul {
1131 display: flex;
1132 flex-wrap: wrap;
1133
1134 li {
1135 margin-right: 10px;
1136 margin-bottom: 0;
1137 }
1138 }
1139 }
1140 }
1141
1142 .everest-forms-label-edit {
1143 display: flex;
1144 justify-content: space-between;
1145
1146 .dashicons {
1147 color: $color_gray-light;
1148 height: 24px;
1149 width: 24px;
1150 cursor: pointer;
1151 flex: 0 0 24px;
1152 margin: 4px;
1153 border-radius: 3px;
1154 display: flex;
1155 align-items: center;
1156 justify-content: center;
1157 opacity: 0;
1158 visibility: hidden;
1159 }
1160
1161 &:hover,
1162 &:active,
1163 &:focus,
1164 &:focus-within {
1165 .dashicons {
1166 visibility: visible;
1167 opacity: 1;
1168 }
1169 }
1170
1171 input {
1172 margin-right: 6px;
1173 }
1174 }
1175
1176 .everest-forms {
1177 .loading-dot {
1178 background: url(../images/icons/three-dots.svg);
1179 opacity: 0.7;
1180 width: 25px;
1181 height: 10px;
1182 display: inline-block;
1183 vertical-align: middle;
1184 background-size: 25px 10px;
1185 }
1186
1187 .everest-forms-overlay {
1188 width: 100%;
1189 z-index: 99999;
1190 overflow: hidden;
1191 background: #f1f1f1;
1192 position: fixed;
1193 top: 0;
1194 left: 0;
1195 right: 0;
1196 bottom: 0;
1197 height: 100vh;
1198
1199 .everest-forms-overlay-content {
1200 position: absolute;
1201 top: 50%;
1202 left: 0;
1203 right: 0;
1204 width: 128px;
1205 height: 128px;
1206 margin: 0 auto;
1207 transform: translateY(-50%);
1208
1209 span.loading {
1210 display: block;
1211 font-size: 20px;
1212 text-align: center;
1213 letter-spacing: 0.05em;
1214 }
1215 }
1216 }
1217
1218 nav.evf-nav-tab-wrapper {
1219 padding: 0;
1220 border: none;
1221 display: flex;
1222 // align-items: center;
1223 margin: 0;
1224 // margin: 0 0 1.5em;
1225 position: relative;
1226 border-bottom: none;
1227 background: #fff;
1228
1229 a.nav-tab {
1230 // Builder nav
1231 position: relative;
1232 z-index: 1;
1233 color: #383838;
1234 margin-left: 0;
1235 margin-bottom: 0;
1236 margin-top: 0;
1237 gap: 6px;
1238 display: flex;
1239 cursor: pointer;
1240 vertical-align: center;
1241 align-items: center;
1242 font-size: 14px;
1243 line-height: 24px;
1244 font-weight: 500;
1245 font-family: inherit;
1246 // padding: 0 12px;
1247 align-items: center;
1248 padding: 8px 16px;
1249 border-radius: 4px;
1250 border: none transparent;
1251 // max-height: 38px !important;
1252 // transition: 0.3s background ease-in-out;
1253 background: none;
1254
1255 &:hover,
1256 &.nav-tab-active {
1257 background: #f6f3fa;
1258 color: #7545bb;
1259
1260 .evf-nav-icon {
1261 &.fields,
1262 &.settings,
1263 &.integrations,
1264 &.payments {
1265 &::before {
1266 filter: brightness(0) saturate(100%) invert(26%) sepia(77%)
1267 saturate(1950%) hue-rotate(249deg) brightness(84%)
1268 contrast(81%);
1269 }
1270 }
1271 }
1272 }
1273
1274 &:hover {
1275 background: none;
1276 }
1277
1278 span {
1279 &.evf-nav-icon {
1280 float: none;
1281 width: auto;
1282 height: auto;
1283 display: flex;
1284 font-size: 17px;
1285 text-align: center;
1286 // display: none;
1287
1288 &::before {
1289 @include iconbefore('\e001');
1290 margin-right: 0;
1291 }
1292
1293 &.general::before {
1294 content: '\e001';
1295 }
1296
1297 &.settings::before {
1298 background-repeat: no-repeat;
1299 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.983 12a3.34 3.34 0 0 1 1.422-2.735 1.34 1.34 0 0 0-1.343-2.303 3.34 3.34 0 0 1-4.728-2.738 1.343 1.343 0 0 0-1.333-1.207 1.34 1.34 0 0 0-1.334 1.213 1 1 0 0 1-.015.099 3.34 3.34 0 0 1-1.644 2.494 3.34 3.34 0 0 1-3.08.135A1.34 1.34 0 0 0 4.604 9.27a3.34 3.34 0 0 1 1.037 4.269 3.34 3.34 0 0 1-1.038 1.187v.001a1.34 1.34 0 0 0 1.334 2.31 3.34 3.34 0 0 1 4.729 2.73 1.34 1.34 0 0 0 2.669 0 3.34 3.34 0 0 1 4.727-2.73l.116.046a1.342 1.342 0 0 0 1.749-1.55 1.34 1.34 0 0 0-.53-.806A3.34 3.34 0 0 1 17.983 12m2 0a1.34 1.34 0 0 0 .445.996l.126.1.008.006a3.34 3.34 0 0 1-3.326 5.756l-.01-.004a1.34 1.34 0 0 0-1.9 1.097v.007a3.34 3.34 0 0 1-6.65 0l-.001-.007a1.34 1.34 0 0 0-1.9-1.097l-.01.004a3.34 3.34 0 0 1-3.326-5.756l.008-.005a1.34 1.34 0 0 0 0-2.195l-.009-.006a3.34 3.34 0 0 1 3.037-5.87l.288.114.01.004a1.34 1.34 0 0 0 1.9-1.096 1 1 0 0 1 .018-.122 3.338 3.338 0 0 1 6.591-.192l.044.308v.006a1.34 1.34 0 0 0 1.9 1.096l.01-.003a3.34 3.34 0 0 1 3.325 5.756l-.007.005a1.34 1.34 0 0 0-.57 1.098'/%3E%3Cpath d='M14 12a2 2 0 1 0-4 0 2 2 0 0 0 4 0m2 0a4 4 0 1 1-8 0 4 4 0 0 1 8 0'/%3E%3C/svg%3E");
1300 }
1301
1302 &.recaptcha::before {
1303 content: '\e003';
1304 }
1305
1306 &.email::before {
1307 content: '\e006';
1308 }
1309
1310 &.validation::before {
1311 content: '\e910';
1312 }
1313
1314 &.pdf-submission::before {
1315 content: '\e023';
1316 }
1317
1318 &.fields,
1319 &.settings,
1320 &.integrations,
1321 &.payments {
1322 &::before {
1323 width: 18px;
1324 height: 18px;
1325 filter: brightness(0) saturate(100%) invert(22%);
1326 }
1327 }
1328
1329 &.fields::before {
1330 background-repeat: no-repeat;
1331 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.1 5.066c0-.015-.006-.047-.05-.087a.34.34 0 0 0-.227-.079H3.177a.34.34 0 0 0-.228.08c-.043.04-.049.07-.049.086v13.868c0 .015.006.047.05.086.045.042.123.08.227.08h17.646a.34.34 0 0 0 .228-.08c.043-.04.049-.07.049-.086zm1.8 13.868c0 1.167-1.015 1.966-2.077 1.966H3.177c-1.062 0-2.077-.8-2.077-1.966V5.066C1.1 3.9 2.115 3.1 3.177 3.1h17.646c1.062 0 2.077.8 2.077 1.966z'/%3E%3Cpath d='M11 8.1a.9.9 0 0 1 0 1.8H9.9v4.2H11a.9.9 0 0 1 0 1.8H7a.9.9 0 0 1 0-1.8h1.1V9.9H7a.9.9 0 0 1 0-1.8z'/%3E%3C/svg%3E");
1332 }
1333
1334 &.payment,
1335 &.payments {
1336 &::before {
1337 // content: '\e92a';
1338 background-repeat: no-repeat;
1339 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 12a9 9 0 1 0-18 0 9 9 0 0 0 18 0m2 0c0 6.075-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1s11 4.925 11 11'/%3E%3Cpath d='M14.625 13.75a.875.875 0 0 0-.875-.875h-3.5a2.625 2.625 0 1 1 0-5.25h5.25a.875.875 0 0 1 0 1.75h-5.25a.875.875 0 1 0 0 1.75h3.5a2.625 2.625 0 1 1 0 5.25H8.5a.875.875 0 0 1 0-1.75h5.25a.875.875 0 0 0 .875-.875'/%3E%3Cpath d='M11.125 17.25V6.75a.875.875 0 0 1 1.75 0v10.5a.875.875 0 0 1-1.75 0'/%3E%3C/svg%3E");
1340 }
1341 }
1342
1343 &.integration,
1344 &.integrations {
1345 &::before {
1346 // content: '\e900';
1347 background-repeat: no-repeat;
1348 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 16a1 1 0 1 1 0 2H5a1 1 0 1 1 0-2zm5-10a1 1 0 1 1 0 2h-9a1 1 0 0 1 0-2z'/%3E%3Cpath d='M19 17a2 2 0 1 0-4 0 2 2 0 0 0 4 0m2 0a4 4 0 1 1-8 0 4 4 0 0 1 8 0M9 7a2 2 0 1 0-4 0 2 2 0 0 0 4 0m2 0a4 4 0 1 1-8 0 4 4 0 0 1 8 0'/%3E%3C/svg%3E");
1349 }
1350 }
1351
1352 &.logs::before {
1353 content: '\e02d';
1354 }
1355
1356 &.import::before {
1357 content: '\e02e';
1358 }
1359
1360 &.export::before {
1361 content: '\e02f';
1362 }
1363
1364 &.form_migrator::before {
1365 content: '\e916';
1366 }
1367
1368 &.payment_log::before {
1369 content: '\e918';
1370 }
1371
1372 &.api_logs::before {
1373 content: '\e919';
1374 }
1375
1376 &.permission::before {
1377 content: '\e030';
1378 }
1379
1380 &.evf-widget::before {
1381 content: '\e902';
1382 }
1383
1384 &.geolocation::before {
1385 content: '\e900';
1386 }
1387
1388 &.delete::before {
1389 content: '\e906';
1390 }
1391
1392 &.misc::before {
1393 content: '\e911';
1394 }
1395
1396 &.ai::before {
1397 content: '\e912';
1398 }
1399
1400 &.lookup::before {
1401 content: '\e914';
1402 }
1403
1404 &.analytics::before {
1405 content: '\e915';
1406 }
1407 }
1408 }
1409
1410 &:focus {
1411 outline: none;
1412 box-shadow: none;
1413 }
1414 }
1415 }
1416
1417 .everest-forms-tools,
1418 .everest-forms-settings {
1419 padding-left: 20px;
1420 padding-right: 20px;
1421
1422 h2 {
1423 font-size: 20px;
1424 }
1425
1426 .form-table {
1427 tr {
1428 border-bottom: 1px solid $color_gray-lighten;
1429
1430 &:first-child {
1431 border-top: 1px solid $color_gray-lighten;
1432 }
1433 }
1434
1435 th {
1436 padding-top: 32px;
1437
1438 .everest-forms-help-tip {
1439 margin: 0;
1440 transform: translateY(-50%);
1441 }
1442 }
1443
1444 td:not(.everest-forms-permissions) {
1445 padding: 25px 0;
1446 }
1447
1448 .forminp-radio-image {
1449 ul {
1450 margin: 0;
1451 display: flex;
1452
1453 li {
1454 margin-right: 30px;
1455
1456 label,
1457 img {
1458 display: block;
1459 }
1460
1461 img {
1462 margin-bottom: 15px;
1463 border: 2px solid $color_gray-lighten;
1464 }
1465 }
1466 }
1467 }
1468 }
1469 }
1470 }
1471 }
1472
1473 /**
1474 * Tabs
1475 */
1476 .everest-forms-tab {
1477 ul {
1478 display: flex;
1479 flex-wrap: wrap;
1480 margin: 0;
1481
1482 .everest-forms-tab-nav {
1483 display: inline-flex;
1484 margin: 0 8px 0 0;
1485
1486 .everest-forms-tab-nav-link {
1487 font-weight: 600;
1488 padding: 16px 8px;
1489 color: $color_gray-base;
1490 text-decoration: none;
1491 border-bottom: 2px solid transparent;
1492 }
1493
1494 &.active {
1495 .everest-forms-tab-nav-link {
1496 color: $everestforms;
1497 border-color: $everestforms;
1498 }
1499 }
1500 }
1501 }
1502 }
1503
1504 .everest-forms-setup {
1505 font-size: 14px;
1506 max-width: calc(100% - 32px);
1507 margin: 20px auto;
1508 background: $color-white;
1509
1510 @media (min-width: 960px) {
1511 max-width: 835px;
1512 }
1513
1514 @media (min-width: 1280px) {
1515 max-width: 1100px;
1516 }
1517
1518 a {
1519 &:focus {
1520 box-shadow: none;
1521 }
1522 }
1523
1524 .page-title-action {
1525 top: 0;
1526 margin-left: 16px;
1527
1528 &:active {
1529 top: 0;
1530 margin-left: 16px;
1531 }
1532 }
1533
1534 .everest-forms-setup-header {
1535 display: flex;
1536 flex-wrap: wrap;
1537 align-items: center;
1538 padding: 0 16px;
1539 background: $color-white;
1540 border-bottom: 1px solid $color_gray-lighten;
1541
1542 @media only screen and (max-width: 768px) {
1543 padding-top: 16px;
1544 }
1545
1546 .everest-forms-logo {
1547 display: flex;
1548 flex-wrap: wrap;
1549 padding-right: 1em;
1550 border-right: 1px solid $color_gray-lighten;
1551 margin-right: 1em;
1552 }
1553
1554 h4 {
1555 margin: 0;
1556 }
1557
1558 .everest-forms-tab {
1559 margin-left: auto;
1560
1561 @media only screen and (max-width: 768px) {
1562 width: calc(100% + 32px);
1563 flex: 0 0 calc(100% + 32px);
1564 margin-top: 16px;
1565 margin-right: -16px;
1566 margin-left: -16px;
1567 border-top: 1px solid $color_gray-lighten;
1568 }
1569 }
1570 }
1571 }
1572
1573 /**
1574 * Template Setup
1575 **/
1576 .everest-forms {
1577 border-radius: 4px;
1578
1579 * {
1580 box-sizing: border-box;
1581 }
1582
1583 span {
1584 display: inline-block;
1585 }
1586
1587 .everest-forms-loader-overlay {
1588 background: transparentize($color_gray-dark, 0.25);
1589 position: fixed;
1590 left: 0;
1591 right: 0;
1592 top: 0;
1593 bottom: 0;
1594 z-index: 9;
1595
1596 .evf-loading {
1597 margin: 0 auto;
1598 position: absolute;
1599 left: 0;
1600 right: 0;
1601 top: 50%;
1602 transform: translateY(-50%);
1603 }
1604 }
1605
1606 .everest-forms-setup-form-name {
1607 padding: 15px 20px;
1608 border-bottom: 1px solid $color_gray-lighten;
1609
1610 .everest-forms-setup-name {
1611 margin-left: 40px;
1612 padding: 10px;
1613 height: 35px;
1614 width: 400px;
1615
1616 &.everest-forms-required {
1617 border-color: $red;
1618 box-shadow: 0 0 2px rgba(175, 0, 0, 0.8);
1619 }
1620 }
1621 }
1622
1623 .evf-setup-title {
1624 width: auto;
1625 font-size: 24px;
1626 line-height: 34px;
1627 font-weight: 600;
1628 color: $color_gray-dark;
1629 padding: 15px 20px 10px;
1630
1631 p.desc {
1632 font-weight: normal;
1633 }
1634 }
1635
1636 .evf-setup-templates {
1637 display: flex;
1638 flex-wrap: wrap;
1639 padding: 8px;
1640
1641 .evf-loading {
1642 margin: 80px auto;
1643 }
1644
1645 .evf-template {
1646 .everest-forms-screenshot {
1647 cursor: pointer;
1648 padding: 8px;
1649 margin: 0;
1650 min-height: auto;
1651 position: relative;
1652 border-radius: 4px;
1653 background: $color_gray-more-lighten;
1654
1655 @media only screen and (min-width: 1280px) {
1656 min-height: 280px;
1657 }
1658
1659 .everest-forms-badge {
1660 position: absolute;
1661 bottom: 16px;
1662 right: 16px;
1663 z-index: 1;
1664 }
1665
1666 .form-action {
1667 display: none;
1668 position: absolute;
1669 left: 0;
1670 right: 0;
1671 top: 50%;
1672 transform: translateY(-50%);
1673 z-index: 1;
1674
1675 .everest-forms-btn {
1676 &.everest-forms-btn-secondary {
1677 background: $color-white;
1678 }
1679
1680 &:last-child {
1681 margin-left: 8px;
1682 }
1683 }
1684 }
1685 }
1686
1687 img {
1688 display: block;
1689 width: 100%;
1690 }
1691
1692 .everest-forms-form-id-container {
1693 display: flex;
1694 flex-wrap: wrap;
1695 align-items: center;
1696 justify-content: space-between;
1697 position: relative;
1698
1699 .everest-forms-template-name {
1700 font-size: 16px;
1701 font-weight: 600;
1702 margin: 16px 0;
1703 color: $color_gray-base;
1704 text-decoration: none;
1705
1706 &:hover {
1707 color: $everestforms;
1708 }
1709 }
1710 }
1711
1712 &:hover {
1713 .everest-forms-screenshot::after {
1714 content: '';
1715 display: block;
1716 background: transparentize($color_gray-base, 0.5);
1717 position: absolute;
1718 top: 0;
1719 left: 0;
1720 bottom: 0;
1721 right: 0;
1722 }
1723
1724 .form-action {
1725 display: flex;
1726 align-items: center;
1727 justify-content: center;
1728 }
1729 }
1730
1731 &:nth-child(even) {
1732 float: right;
1733 }
1734
1735 .evf-template-overlay {
1736 position: absolute;
1737 background: rgba(0, 0, 0, 0.5);
1738 top: 0;
1739 left: 0;
1740 right: 0;
1741 bottom: 0;
1742 opacity: 0;
1743 visibility: hidden;
1744 transition: 0.5s background ease-in-out;
1745 color: $color-white;
1746 text-align: center;
1747 padding: 40% 0;
1748
1749 .evf-template-select {
1750 text-decoration: none;
1751 }
1752
1753 &.loading {
1754 .evf-button,
1755 .evf-button::before,
1756 .evf-button::after {
1757 background: $color-white;
1758 -webkit-animation: load1 1s infinite ease-in-out;
1759 animation: load1 1s infinite ease-in-out;
1760 width: 1em;
1761 height: 4em;
1762 padding: 0;
1763 border-radius: 0;
1764 }
1765
1766 .evf-button {
1767 color: $color-white;
1768 text-indent: -9999em;
1769 margin: 0 auto;
1770 position: relative;
1771 font-size: 11px;
1772 -webkit-transform: translateZ(0);
1773 -ms-transform: translateZ(0);
1774 transform: translateZ(0);
1775 -webkit-animation-delay: -0.16s;
1776 animation-delay: -0.16s;
1777 }
1778
1779 .evf-button::before,
1780 .evf-button::after {
1781 position: absolute;
1782 top: 0;
1783 content: '';
1784 }
1785
1786 .evf-button::before {
1787 left: -1.5em;
1788 -webkit-animation-delay: -0.32s;
1789 animation-delay: -0.32s;
1790 }
1791
1792 .evf-button::after {
1793 left: 1.5em;
1794 }
1795
1796 @-webkit-keyframes load1 {
1797 0%,
1798 80%,
1799 100% {
1800 box-shadow: 0 0;
1801 height: 4em;
1802 }
1803
1804 40% {
1805 box-shadow: 0 -2em;
1806 height: 5em;
1807 }
1808 }
1809
1810 @keyframes load1 {
1811 0%,
1812 80%,
1813 100% {
1814 box-shadow: 0 0;
1815 height: 4em;
1816 }
1817
1818 40% {
1819 box-shadow: 0 -2em;
1820 height: 5em;
1821 }
1822 }
1823 }
1824 }
1825
1826 &:hover .evf-template-overlay,
1827 .evf-template-overlay.loading {
1828 opacity: 1;
1829 visibility: visible;
1830 }
1831
1832 .evf-button {
1833 display: inline-block;
1834 padding: 15px 22px;
1835 background: $color-white;
1836 color: #000;
1837 font-size: 12px;
1838 text-transform: uppercase;
1839 border: none;
1840 border-radius: 100px;
1841 }
1842 }
1843 }
1844 }
1845
1846 /**
1847 * Form Setup
1848 */
1849 .everest-forms-builder-setup {
1850 #screen-meta-links {
1851 display: none;
1852 }
1853
1854 .jconfirm-everest-forms {
1855 .jconfirm-box {
1856 border-radius: 4px !important;
1857
1858 div.jconfirm-title-c {
1859 padding-bottom: 10px;
1860
1861 .jconfirm-icon-c {
1862 margin-bottom: 16px !important;
1863
1864 .dashicons {
1865 color: $color-white;
1866 font-size: 28px !important;
1867 height: 54px !important;
1868 width: 54px !important;
1869 border-radius: 50%;
1870 background: $red;
1871 line-height: 54px;
1872 }
1873 }
1874
1875 .jconfirm-title {
1876 font-size: 22px !important;
1877 font-weight: 600;
1878 }
1879 }
1880
1881 div.jconfirm-content {
1882 margin-bottom: 0 !important;
1883 }
1884 }
1885 }
1886
1887 .jconfirm-everest-forms-left {
1888 &.jconfirm-modern {
1889 .jconfirm-box {
1890 width: 500px !important;
1891 padding: 20px 30px 15px;
1892 border-radius: 4px !important;
1893
1894 .jconfirm-title-c {
1895 text-align: left;
1896 font-size: 20px;
1897 font-weight: 400;
1898 padding-bottom: 0;
1899 line-height: 1.8;
1900
1901 .jconfirm-icon-c {
1902 margin: 0;
1903 }
1904 }
1905
1906 .jconfirm-content {
1907 white-space: initial !important; // to avoid spacing issue on notice while installing addons
1908 text-align: left;
1909 margin-bottom: 0;
1910
1911 input[type='text']='text'] {
1912 margin: 5px 2px 2px;
1913 padding: 5px 10px;
1914
1915 &:focus {
1916 border-color: #007cba;
1917 box-shadow: 0 0 0 1px #007cba;
1918 }
1919 }
1920 }
1921
1922 .jconfirm-buttons {
1923 text-align: right;
1924
1925 .everest-forms-btn {
1926 font-weight: 400;
1927 text-transform: none;
1928 }
1929 }
1930 }
1931 }
1932 }
1933
1934 .everest-forms-recommend-addons {
1935 margin-top: 20px;
1936 padding-top: 16px;
1937 border-top: 2px solid $color_gray-more-lighten;
1938
1939 .bulk-action-notice {
1940 margin: 0 0 20px;
1941
1942 p {
1943 padding: 0;
1944 margin: 8px 0 !important;
1945 }
1946
1947 &.notice-error {
1948 .button-link {
1949 text-decoration: none;
1950 display: flex;
1951 align-items: center;
1952 margin-top: 8px;
1953
1954 .toggle-indicator {
1955 display: inline-flex;
1956 }
1957 }
1958
1959 .bulk-action-errors {
1960 margin-top: 0;
1961 }
1962 }
1963 }
1964
1965 .plugins-list-table {
1966 border-radius: 4px;
1967
1968 .plugin-status {
1969 float: right;
1970
1971 span {
1972 width: 20px;
1973 height: 20px;
1974 overflow: hidden;
1975 border-radius: 50%;
1976 position: relative;
1977 vertical-align: top;
1978 white-space: nowrap;
1979 text-indent: -9999px;
1980 display: inline-block;
1981 border: 2px solid $color_gray-lighten;
1982
1983 &.active,
1984 &.activate-now {
1985 &::after {
1986 position: absolute;
1987 left: 50%;
1988 top: 50%;
1989 opacity: 1;
1990 width: 34%;
1991 height: 50%;
1992 content: '';
1993 transform-origin: left top;
1994 border-top: 2px solid $color_gray-lighten;
1995 border-right: 2px solid $color_gray-lighten;
1996 transform: scaleX(-1) rotate(135deg) translate(-58%, -40%);
1997 }
1998 }
1999
2000 &.activate-now {
2001 border-color: $color_gray-lighten;
2002
2003 &.updating-message {
2004 border-color: $color_gray-lighten;
2005 border-left-color: $green;
2006 }
2007 }
2008
2009 &.active {
2010 border-color: $green;
2011
2012 &::after {
2013 border-top: 2px solid $green;
2014 border-right: 2px solid $green;
2015 }
2016 }
2017
2018 &.updating-message {
2019 border-left-color: $green;
2020 animation: spin 0.75s linear infinite;
2021
2022 &::after {
2023 content: none;
2024 }
2025 }
2026 }
2027 }
2028 }
2029
2030 .everest-forms-template-install-addon {
2031 margin-top: 20px;
2032 }
2033 }
2034
2035 .everest-forms {
2036 .evf-setup-templates {
2037 .evf-template {
2038 width: 100%;
2039 background: $color-white;
2040 border-radius: 4px;
2041 position: relative;
2042 margin: 12px;
2043
2044 @media (min-width: 400px) {
2045 width: calc(50% - 24px);
2046 flex: 0 0 calc(50% - 24px);
2047 }
2048
2049 @media only screen and (min-width: 768px) {
2050 width: calc(33.333% - 24px);
2051 flex: 0 0 calc(33.333% - 24px);
2052 }
2053
2054 @media (min-width: 960px) {
2055 width: calc(25% - 24px);
2056 flex: 0 0 calc(25% - 24px);
2057 }
2058 }
2059 }
2060 }
2061 }
2062
2063 // Entries page
2064 #evf-dashboard-analytisc-body {
2065 &::after,
2066 &::before {
2067 display: none;
2068 }
2069 }
2070
2071 p.search-box {
2072 margin-top: 15px;
2073 }
2074
2075 #evf-dashboard-analytics {
2076 margin-bottom: 32px;
2077
2078 .evf-container {
2079 margin-left: 0;
2080 margin-right: 0;
2081 max-width: 100%;
2082
2083 #evf-dashboard-analytisc-header {
2084 margin: 40px 0 !important;
2085 }
2086 }
2087 }
2088
2089 #evf-form-analytics {
2090 margin-left: 2px !important;
2091 margin-right: 20px !important;
2092
2093 .evf-container {
2094 max-width: 100% !important;
2095 }
2096 }
2097
2098 .evf-entries-tab-wrapper {
2099 background: #fff;
2100 border-radius: 4px;
2101 overflow: visible;
2102 }
2103
2104 .evf-entries-tab-header {
2105 display: flex;
2106 align-items: center;
2107 background: #fff;
2108 min-height: 50px;
2109 gap: 12px;
2110
2111 .evf-entries-tab-header-title {
2112 font-size: 22px;
2113 font-weight: 600;
2114 }
2115
2116 .evf-entries-form-selector {
2117 display: flex;
2118 align-items: center;
2119 flex: 0 0 auto;
2120 padding: 8px 0;
2121
2122 label.screen-reader-text {
2123 clip: rect(1px, 1px, 1px, 1px);
2124 position: absolute;
2125 height: 1px;
2126 width: 1px;
2127 overflow: hidden;
2128 }
2129
2130 select#filter-by-form {
2131 min-width: 200px;
2132 max-width: 280px;
2133 height: 36px;
2134 border: 1px solid #e1e1e1;
2135 border-radius: 4px;
2136 padding: 0 10px;
2137 font-size: 14px;
2138 color: #383838;
2139 background: #fff;
2140 cursor: pointer;
2141 transition: border-color 0.2s ease;
2142
2143 &:focus {
2144 border-color: #7545bb;
2145 box-shadow: none;
2146 outline: none;
2147 }
2148 }
2149
2150 .select2-container {
2151 min-width: 200px !important;
2152 max-width: 280px;
2153 margin: 0 !important;
2154
2155 .select2-selection--single {
2156 height: 38px;
2157 border-color: #e1e1e1;
2158 border-radius: 4px;
2159 transition: border-color 0.2s ease;
2160
2161 .select2-selection__rendered {
2162 line-height: 34px;
2163 padding-left: 10px;
2164 color: #383838;
2165 }
2166
2167 .select2-selection__arrow {
2168 // height: 34px;
2169 }
2170 }
2171
2172 &.select2-container--focus,
2173 &.select2-container--open {
2174 .select2-selection--single {
2175 border-color: #7545bb;
2176 box-shadow: none;
2177 }
2178 }
2179 }
2180 }
2181
2182 .evf-tab-nav {
2183 list-style: none;
2184 display: flex;
2185 gap: 2px;
2186 align-items: center;
2187 background: #f3f4f6;
2188 border-radius: 5px;
2189 padding: 4px;
2190 height: max-content;
2191 margin-left: auto;
2192
2193 li {
2194 margin: 0;
2195 padding: 0;
2196
2197 &::before {
2198 display: none !important;
2199 }
2200 }
2201
2202 &__btn {
2203 display: flex;
2204 align-items: center;
2205 gap: 8px;
2206 border: 0;
2207 background: 0 0;
2208 margin: 0;
2209 box-shadow: none;
2210 border-radius: 4px;
2211 padding: 6px 16px;
2212 font-weight: 500;
2213 font-size: 13px;
2214 color: #646970;
2215 cursor: pointer;
2216 transition: all 0.2s ease;
2217 white-space: nowrap;
2218 line-height: 20px;
2219
2220 &:focus {
2221 outline: none;
2222 box-shadow: none;
2223 }
2224
2225 svg {
2226 width: 15px;
2227 height: 15px;
2228 flex-shrink: 0;
2229 opacity: 0.5;
2230 transition: opacity 0.2s ease;
2231 }
2232
2233 &:hover {
2234 color: #7545bb;
2235
2236 svg {
2237 opacity: 0.85;
2238 }
2239 }
2240
2241 &.evf-tab--active {
2242 color: #7545bb;
2243 background: #fff;
2244 box-shadow: 0 4px 24px 0 rgba(10, 10, 10, 0.06);
2245
2246 svg {
2247 opacity: 1;
2248 }
2249 }
2250 }
2251 }
2252
2253 .evf-entries-header-actions {
2254 display: flex;
2255 align-items: center;
2256 gap: 8px;
2257
2258 .button,
2259 .evf-btn-view-analytics,
2260 .evf-btn-view-survey {
2261 display: inline-flex;
2262 align-items: center;
2263 gap: 4px;
2264 height: 36px;
2265 box-sizing: border-box;
2266 padding: 0 14px;
2267 border-radius: 4px;
2268 font-size: 13px;
2269 font-weight: 500;
2270 line-height: 34px;
2271 cursor: pointer;
2272 text-decoration: none;
2273 white-space: nowrap;
2274 transition: all 0.15s ease;
2275
2276 svg {
2277 flex-shrink: 0;
2278 }
2279
2280 &:focus {
2281 outline: none;
2282 box-shadow: none;
2283 }
2284 }
2285
2286 // Primary style: light bg, primary border & text
2287 .evf-btn-view-analytics,
2288 .evf-btn-view-survey {
2289 background: #fff;
2290 border: 1px solid #7545bb;
2291 color: #7545bb;
2292 height: 38px;
2293 margin-top: 2px;
2294
2295 &:hover {
2296 background: #f5f3ff;
2297 color: #5317aa;
2298 border-color: #5317aa;
2299 }
2300 }
2301
2302 // Secondary: light gray bg, no border when survey button is also present
2303 .evf-btn-view-survey ~ .evf-btn-view-analytics {
2304 background: #f5f5f5;
2305 border-color: #e9e9e9;
2306
2307 &:hover {
2308 background: #ebebeb;
2309 border-color: #e9e9e9;
2310 }
2311 }
2312 }
2313 }
2314
2315 // .evf-tab-nav__btn {
2316 // display: inline-flex;
2317 // align-items: center;
2318 // gap: 7px;
2319 // padding: 13px 16px 12px;
2320 // font-family: inherit;
2321 // font-size: 14px;
2322 // font-weight: 500;
2323 // line-height: 1.4;
2324 // color: #6b6b6b;
2325 // background: transparent;
2326 // border: none;
2327 // border-bottom: 2px solid transparent;
2328 // border-radius: 0;
2329 // cursor: pointer;
2330 // white-space: nowrap;
2331 // // Transitions
2332 // transition:
2333 // color 0.2s ease,
2334 // border-color 0.2s ease,
2335 // background 0.2s ease;
2336 // // Reset any WP button defaults
2337 // box-shadow: none !important;
2338 // outline: none;
2339
2340 // svg {
2341 // width: 15px;
2342 // height: 15px;
2343 // flex-shrink: 0;
2344 // opacity: 0.5;
2345 // transition: opacity 0.2s ease;
2346 // }
2347
2348 // // Hover
2349 // // &:hover {
2350 // // color: #7545bb;
2351 // // background: #f6f3fa;
2352
2353 // // svg {
2354 // // opacity: 0.85;
2355 // // }
2356 // // }
2357
2358 // // &:focus {
2359 // // box-shadow: none;
2360 // // outline: none;
2361 // // }
2362
2363 // // Active / selected tab
2364 // &.evf-tab--active {
2365 // color: #7545bb;
2366 // border-bottom-color: #7545bb;
2367 // background: transparent;
2368
2369 // svg {
2370 // opacity: 1;
2371 // }
2372 // }
2373 // }
2374 .evf-tab-panel {
2375 display: none;
2376
2377 &--active {
2378 display: block;
2379 animation: evf-tab-fadein 0.18s ease forwards;
2380 }
2381 }
2382
2383 @keyframes evf-tab-fadein {
2384 from {
2385 opacity: 0;
2386 transform: translateY(4px);
2387 }
2388
2389 to {
2390 opacity: 1;
2391 transform: translateY(0);
2392 }
2393 }
2394
2395 #evf-panel-analytics {
2396 padding: 0;
2397
2398 #evf-dashboard-analytics,
2399 #evf-form-analytics {
2400 margin-left: 0 !important;
2401 margin-right: 0 !important;
2402 margin-bottom: 0 !important;
2403
2404 .evf-container {
2405 max-width: 100% !important;
2406 margin-left: 0;
2407 margin-right: 0;
2408 }
2409 }
2410 }
2411
2412 /**
2413 * Form Builder
2414 **/
2415 #everest-forms-panel-settings {
2416 .evf-content-section {
2417 display: none;
2418 }
2419
2420 .evf-content-section.active {
2421 display: block;
2422 }
2423
2424 .everest-forms-panel-content-wrap {
2425 .everest-forms-panel-content {
2426 .evf-content-section,
2427 .evf-panel-content-section {
2428 min-height: calc(100vh - 155px);
2429
2430 &.active {
2431 padding: 24px 32px 32px;
2432 background: #ffffff;
2433 border-radius: 13px;
2434 border: 1px solid #e1e1e1;
2435
2436 .evf-content-section-title {
2437 margin-top: 0;
2438 }
2439
2440 .evf-confirmation-wrap {
2441 .evf-content-section-title {
2442 font-size: 18px;
2443 padding-bottom: 16px;
2444 }
2445
2446 .everest-forms-panel-field {
2447 label {
2448 margin-top: 0;
2449 }
2450
2451 .radio-list {
2452 display: flex;
2453 align-items: center;
2454 width: 100%;
2455 gap: 16px;
2456
2457 .inline {
2458 border: 1px solid #e1e1e1;
2459 padding: 8px 12px;
2460 border-radius: 4px;
2461 margin-bottom: 0;
2462 transition: all 0.3s ease-in-out;
2463 cursor: pointer;
2464
2465 &:hover {
2466 border-color: #7545bb;
2467 }
2468
2469 input[type='radio']='radio'] {
2470 margin-top: -2px;
2471 margin-right: 8px;
2472 vertical-align: middle;
2473 border-color: #bababa;
2474 background-color: white !important;
2475
2476 &:checked {
2477 border-color: #7545bb;
2478
2479 &::before {
2480 background: #7545bb;
2481
2482 @media screen and (max-width: 782px) {
2483 width: 0.5rem;
2484 height: 0.5rem;
2485 margin: 0.1875rem;
2486 }
2487 }
2488 }
2489
2490 @media screen and (max-width: 782px) {
2491 width: 1rem;
2492 height: 1rem;
2493 }
2494 }
2495
2496 &:has(input[type='radio']:checked) {
2497 border-color: #7545bb;
2498 }
2499 }
2500 }
2501 }
2502 }
2503 }
2504
2505 &-title {
2506 font-size: 22px;
2507 line-height: 130%;
2508 color: #222222;
2509 }
2510
2511 .everest-forms-panel-field {
2512 input[type='text']='text'],
2513 input[type='email']='email'],
2514 input[type='password']='password'],
2515 textarea,
2516 select {
2517 border-color: #e1e1e1;
2518 padding: 3px 10px;
2519 color: #383838;
2520 min-height: 38px;
2521 padding: 0 12px;
2522 }
2523
2524 textarea {
2525 padding: 4px 12px;
2526 }
2527
2528 &.everest-forms-panel-field-toggle {
2529 display: flex;
2530 align-items: center;
2531 justify-content: flex-start;
2532 gap: 30px;
2533
2534 label,
2535 .evf-toggle-section {
2536 margin-bottom: 0;
2537 }
2538
2539 .evf-toggle-section {
2540 .everest-forms-toggle-form {
2541 margin: 0;
2542 }
2543 }
2544 }
2545 }
2546 }
2547 }
2548 }
2549
2550 .evf-content-confirmation-settings {
2551 .evf-builder-radio {
2552 .row {
2553 width: auto;
2554 height: 38px;
2555 padding: 8px 12px;
2556 gap: 8px;
2557 border-radius: 4px;
2558 border: 1px solid var(--EVF-violet-Primary-400, #7545bb);
2559 background: var(--Grey-0, #fff);
2560 }
2561 }
2562
2563 &:has(.evf-field-conditional-container[style*='display: none;']) {
2564 .evf_conditional_logic_container {
2565 margin-bottom: 0;
2566 }
2567 }
2568 }
2569 }
2570
2571 #everest-forms-panel-payments,
2572 #everest-forms-panel-integrations {
2573 .evf-panel-content-section {
2574 display: none;
2575 }
2576
2577 .evf-panel-content-section.active {
2578 display: block;
2579 }
2580
2581 .everest-forms-panel-content-wrap {
2582 .everest-forms-panel-content {
2583 .evf-content-section,
2584 .evf-panel-content-section {
2585 min-height: calc(100vh - 155px);
2586
2587 &.active {
2588 padding: 24px 32px 32px;
2589 background: #ffffff;
2590 border-radius: 13px;
2591 border: 1px solid #e1e1e1;
2592 }
2593
2594 &-title {
2595 font-size: 22px;
2596 line-height: 130%;
2597 color: #222222;
2598 }
2599
2600 .everest-forms-panel-field {
2601 input,
2602 textarea,
2603 select {
2604 border-color: #e1e1e1;
2605 padding: 3px 10px;
2606 color: #383838;
2607 }
2608
2609 &.everest-forms-panel-field-toggle {
2610 display: flex;
2611 align-items: center;
2612 justify-content: flex-end;
2613 flex-direction: row-reverse;
2614 gap: 8px;
2615
2616 label,
2617 .evf-toggle-section {
2618 margin-bottom: 0;
2619 }
2620
2621 .evf-toggle-section {
2622 .everest-forms-toggle-form {
2623 margin: 0;
2624 }
2625 }
2626 }
2627 }
2628 }
2629 }
2630 }
2631 }
2632
2633 .everest-forms_page_evf-builder {
2634 .everest-forms-add-fields-group,
2635 .everest-forms-field-option-group {
2636 .handlediv {
2637 float: right;
2638
2639 &::before {
2640 content: '\f343' !important;
2641 cursor: pointer;
2642 display: inline-block;
2643 font: 400 20px/1 Dashicons;
2644 line-height: 0.5 !important;
2645 padding: 4px;
2646 position: relative;
2647 right: 0;
2648 top: 0;
2649 }
2650 }
2651
2652 &.closed {
2653 .handlediv::before {
2654 content: '\f347' !important;
2655 }
2656 }
2657 }
2658
2659 #everest-forms-builder {
2660 width: 100%;
2661 position: absolute;
2662 top: 0;
2663 bottom: 0;
2664 min-height: calc(100vh - 32px);
2665
2666 * {
2667 box-sizing: border-box;
2668 }
2669
2670 .wp-picker-holder * {
2671 box-sizing: content-box;
2672 }
2673
2674 #everest-forms-builder-form {
2675 position: fixed;
2676 }
2677
2678 h2,
2679 h3,
2680 h4,
2681 h5,
2682 h6 {
2683 color: $color_gray-dark;
2684 }
2685
2686 a {
2687 text-decoration: none;
2688
2689 &:focus {
2690 outline: none;
2691 box-shadow: 0 0 0 rgba(0, 0, 0, 0);
2692 }
2693 }
2694
2695 .add,
2696 .remove,
2697 .addPayment,
2698 .removePayment {
2699 color: $color_gray-normal;
2700 background: $color-white;
2701 height: 30px;
2702 width: 30px;
2703 display: flex;
2704 align-items: center;
2705 justify-content: center;
2706 border-radius: 4px;
2707 border: 1px solid $color_gray-lighten;
2708
2709 &:hover {
2710 color: $color-white;
2711 }
2712 }
2713
2714 .add {
2715 &:hover {
2716 background: $blue;
2717 border-color: $blue;
2718 }
2719 }
2720
2721 .remove {
2722 margin-left: 8px;
2723
2724 &:hover {
2725 background: $red;
2726 border-color: $red;
2727 }
2728 }
2729
2730 .after-label-description {
2731 float: right;
2732 }
2733
2734 input,
2735 select,
2736 option,
2737 textarea {
2738 border-color: $color_gray-lighten;
2739
2740 &::placeholder {
2741 color: $color_gray-light;
2742 }
2743
2744 &:focus {
2745 border-color: #5b9dd9;
2746 }
2747 }
2748
2749 .everest-forms-inner-options {
2750 padding-left: 20px;
2751 }
2752
2753 .input-group-col-2 {
2754 display: flex;
2755 flex-wrap: nowrap;
2756
2757 input[type='text']='text'],
2758 input[type='number']='number'],
2759 select {
2760 flex: 0 0 50%;
2761 margin-right: 2%;
2762 margin-bottom: 10px;
2763 max-width: calc(50% - 1%);
2764
2765 &:nth-child(2n) {
2766 margin-right: 0;
2767 }
2768 }
2769 }
2770
2771 .everest-forms-nav-wrapper {
2772 background: #fff;
2773 display: flex;
2774 flex-wrap: wrap;
2775 align-items: center;
2776 height: 70px;
2777 padding: 0 20px 0 24px;
2778 border-bottom: 1px solid #e1e1e1;
2779
2780 // .everest-forms-logo {
2781 // display: flex;
2782 // align-items: center;
2783 // border-right: 1px solid #e2e2e2;
2784 // padding: 6px 24px 6px 0;
2785 // margin-right: 24px;
2786
2787 // img {
2788 // width: 40px;
2789 // height: 40px;
2790 // }
2791 // }
2792
2793 .everest-forms-back-button-wrapper {
2794 align-content: center;
2795 margin-right: 16px;
2796
2797 .back-button {
2798 display: flex;
2799 align-items: center;
2800 justify-content: center;
2801 position: relative;
2802
2803 &::before {
2804 content: '';
2805 background: #f4f4f4;
2806 position: absolute;
2807 width: 32px;
2808 height: 32px;
2809 top: 50%;
2810 left: 50%;
2811 border-radius: 4px;
2812 z-index: 0;
2813 -ms-transform: translate(-50%, -50%);
2814 transform: translate(-50%, -50%);
2815 opacity: 0;
2816 transition: all 0.3s ease-in-out;
2817 }
2818
2819 svg {
2820 width: 20px;
2821 height: 20px;
2822 fill: #383838;
2823 position: relative;
2824 }
2825
2826 &:hover {
2827 &::before {
2828 opacity: 1;
2829 }
2830 }
2831 }
2832 }
2833
2834 .everest-forms-btn {
2835 &:focus {
2836 color: #383838;
2837 // box-shadow: 0 0 0 3px
2838 // adjust-color($everestforms, $saturation: 39%, $lightness: +18%);
2839 }
2840 }
2841
2842 .evf-forms-nav-right {
2843 box-sizing: border-box;
2844 height: 100%;
2845 padding: 0;
2846 align-content: center;
2847 margin-left: auto;
2848
2849 .evf-shortcode-field {
2850 display: inline-block;
2851 vertical-align: middle;
2852
2853 input {
2854 margin: 0;
2855 width: 225px;
2856 height: 36px;
2857 padding: 4px 10px;
2858 line-height: 1.25;
2859 border-radius: 3px 0 0 3px;
2860 background: none;
2861 border: 1px solid #e1e1e1;
2862 font-size: 14px;
2863 }
2864
2865 button {
2866 padding: 0;
2867 width: 36px;
2868 height: 36px;
2869 margin-left: -4px;
2870 border-radius: 0 3px 3px 0;
2871 // border: 1px solid #e1e1e1;
2872 // border-left: none;
2873 background: #f6f3fa;
2874
2875 &.copy-shortcode {
2876 // font-size: 16px;
2877 // color: $color-white;
2878
2879 &::before {
2880 @include iconbefore('\e00c');
2881 line-height: 27px;
2882 margin-right: 0;
2883 padding-right: 0;
2884 border-right: none;
2885 content: none;
2886 }
2887
2888 svg {
2889 width: 18px;
2890 height: 18px;
2891 fill: #383838;
2892 margin-top: 4px;
2893 margin-left: 7px;
2894 }
2895 }
2896
2897 &:focus {
2898 box-shadow: none;
2899 }
2900 }
2901 }
2902
2903 .everest-forms-embed-button {
2904 margin-left: 6px;
2905 vertical-align: middle;
2906 background: none;
2907 font-size: 14px;
2908 color: #222;
2909 border: 1px solid #e1e1e1;
2910 border-radius: 4px;
2911 min-height: 36px;
2912
2913 &:active {
2914 color: #494d50;
2915 }
2916
2917 &:focus {
2918 box-shadow: none;
2919 }
2920
2921 &:hover {
2922 background: #f6f3fa;
2923 color: #7545bb;
2924 }
2925
2926 &.processing {
2927 font-size: 0;
2928 height: 36px;
2929 background: transparent;
2930 border: 1px solid #ffffff;
2931 }
2932 }
2933
2934 .everest-forms-save-button {
2935 min-width: 75px;
2936 cursor: pointer;
2937 min-height: 36px;
2938 color: $color-white;
2939 background: #7545bb;
2940 margin-left: 10px;
2941 position: relative;
2942 display: inline-block;
2943 vertical-align: middle;
2944 text-transform: capitalize;
2945 font-size: 15px;
2946
2947 &.processing {
2948 width: 75px;
2949 font-size: 0;
2950 min-height: 36px;
2951 transition: all 0.35s ease 0s;
2952
2953 &:focus {
2954 box-shadow: 0 0 0 2px
2955 adjust-color($everestforms, $saturation: 39%, $lightness: +18%);
2956 }
2957 }
2958
2959 .loading-dot {
2960 position: absolute;
2961 top: 50%;
2962 transform: translateY(-50%);
2963 left: 0;
2964 right: 0;
2965 margin: 0 auto;
2966 }
2967
2968 .spinner,
2969 .evf-loading {
2970 width: 14px;
2971 height: 14px;
2972 margin-top: 5px !important;
2973 margin-left: 5px !important;
2974 background-size: 14px 14px;
2975 }
2976
2977 &:hover {
2978 background: #9159e3;
2979 }
2980 }
2981
2982 .everest-forms-preview-button,
2983 .everest-forms-show-entries-btn {
2984 background: none;
2985 margin-left: 10px;
2986 display: inline-block;
2987 vertical-align: middle;
2988 font-size: 14px;
2989 color: #222222;
2990 border: 1px solid #e1e1e1;
2991
2992 &:hover {
2993 background: #eee8f7;
2994 }
2995 }
2996
2997 .everest-forms-show-entries-btn {
2998 height: 36px;
2999 margin-right: 10px;
3000 margin-left: 0 !important;
3001 width: 96px;
3002
3003 .evf-nav-btn-container {
3004 display: flex;
3005 align-items: center;
3006 justify-content: center;
3007 gap: 6px;
3008 }
3009 }
3010 }
3011
3012 .evf-nav-tab-wrapper {
3013 gap: 4px;
3014 overflow: unset !important;
3015 }
3016 }
3017 @media (max-width: 1366px) {
3018 .everest-forms-nav-wrapper {
3019 display: flex !important;
3020 flex-wrap: wrap !important;
3021 align-items: center !important;
3022 height: auto !important;
3023 min-height: 70px !important;
3024 padding: 10px 20px !important;
3025 }
3026
3027 .evf-tab-wrapper {
3028 width: 100% !important;
3029 flex: 0 0 100% !important;
3030 order: 1 !important;
3031 display: flex !important;
3032 align-items: center !important;
3033 gap: 12px !important;
3034 }
3035
3036 .evf-forms-nav-right {
3037 width: 100% !important;
3038 flex: 0 0 100% !important;
3039 order: 2 !important;
3040 display: flex !important;
3041 align-items: center !important;
3042 justify-content: flex-end !important;
3043 gap: 8px !important;
3044 margin-top: 8px !important;
3045 }
3046 }
3047
3048 .evf-tab-content {
3049 h5 {
3050 margin: 0 auto 20px auto;
3051 font-size: 24px;
3052 line-height: normal;
3053 }
3054
3055 .evf_smart_tag {
3056 input[type='text']='text'] {
3057 width: 100%;
3058 min-height: 36px;
3059 }
3060 }
3061
3062 .evf-toggle-smart-tag-display {
3063 position: absolute;
3064 border-radius: 4px;
3065 background: #eeeeee;
3066 color: #4f4f4f;
3067 right: 4px;
3068 width: 28px;
3069 height: 28px;
3070 top: 5px;
3071
3072 .dashicons-editor-code {
3073 &::before {
3074 left: 0;
3075 right: 0;
3076 margin: 0 auto;
3077 line-height: 28px;
3078 position: absolute;
3079 }
3080 }
3081 }
3082
3083 .evf-smart-tag-lists {
3084 min-height: 125px;
3085 max-height: 300px;
3086 border: 1px solid rgb(219, 219, 219);
3087 right: 0;
3088 z-index: 1;
3089 margin-top: -1px;
3090 width: 230px;
3091 overflow-y: auto;
3092 position: absolute;
3093 background: $color-white;
3094 border-radius: 4px;
3095 box-shadow: 1px 3px 20px 0 transparentize($color_gray-dark, 0.8);
3096 top: 65px;
3097
3098 &::-webkit-scrollbar {
3099 width: 6px;
3100 }
3101
3102 /* Track */
3103 &::-webkit-scrollbar-track {
3104 box-shadow: inset 0 0 5px #939393;
3105 border-radius: 10px;
3106 }
3107
3108 /* Handle */
3109 &::-webkit-scrollbar-thumb {
3110 background: #787878;
3111 border-radius: 10px;
3112 }
3113
3114 /* Handle on hover */
3115 &::-webkit-scrollbar-thumb:hover {
3116 background: #3f3f3f;
3117 }
3118
3119 li,
3120 .smart-tag-title {
3121 padding: 7px 10px;
3122 }
3123
3124 .smart-tag-title {
3125 font-size: 14px;
3126 font-weight: 600;
3127 padding: 10px 12px;
3128 background: #e4e4e4;
3129 color: #3a3a3a;
3130 }
3131
3132 ul {
3133 margin: 0;
3134 padding: 6px;
3135 }
3136
3137 li {
3138 cursor: pointer;
3139 margin-bottom: 0;
3140 padding: 8px;
3141 border-radius: 3px;
3142 font-size: 14px;
3143 transition: all 0.3s ease-in-out;
3144
3145 &:hover {
3146 background: #eaeaea;
3147 }
3148 }
3149 }
3150
3151 .evf-field-conditional-container {
3152 &.active {
3153 padding: 18px 24px;
3154 box-shadow: none;
3155 border-radius: 4px;
3156 border-color: #e9e9e9;
3157
3158 .evf-content-section-title {
3159 padding-bottom: 20px;
3160 margin-bottom: 24px;
3161 padding-top: 0;
3162
3163 .confirmation-title {
3164 display: flex;
3165 align-items: center;
3166 flex-wrap: wrap;
3167 gap: 12px;
3168 position: relative;
3169
3170 .evf-edit-confirm-icon {
3171 display: flex;
3172 justify-content: center;
3173 align-items: center;
3174 width: 34px;
3175 height: 34px;
3176 padding: 0;
3177 background: #fdfdfd;
3178 border: 1px solid #e1e1e1;
3179 border-radius: 3px;
3180 cursor: pointer;
3181
3182 svg {
3183 width: 18px;
3184 height: 18px;
3185 }
3186 }
3187
3188 .edit-title {
3189 margin-bottom: 0;
3190
3191 .evf-confirm-edit-title-input {
3192 min-height: 34px;
3193 max-height: 34px;
3194 padding-right: 55px;
3195
3196 @media screen and (max-width: 600px) {
3197 max-width: 140px;
3198 }
3199 }
3200 }
3201
3202 .evf-confirmation-edit-ok {
3203 position: absolute;
3204 right: 73px;
3205 background: #f4f4f4;
3206 border: 0;
3207 font-size: 14px;
3208 line-height: 20px;
3209 padding: 4px 10px;
3210 border-radius: 2px;
3211 text-transform: capitalize;
3212 color: #383838;
3213 cursor: pointer;
3214
3215 @media screen and (max-width: 600px) {
3216 position: unset;
3217 margin-left: -4px;
3218 min-height: 32px;
3219 }
3220 }
3221
3222 .show-title {
3223 color: #222;
3224 font-size: 18px;
3225 font-weight: 600;
3226 line-height: 28px;
3227 margin: 0;
3228 }
3229
3230 .inactive-status,
3231 .active-status {
3232 padding: 6px 8px;
3233 border-radius: 50px;
3234 font-size: 10px;
3235 font-weight: 600;
3236 line-height: 10px;
3237 font-size: 12px;
3238 text-transform: capitalize;
3239 }
3240
3241 .inactive-status {
3242 background: #e1e1e1;
3243 color: #6b6b6b;
3244 }
3245
3246 .active-status {
3247 background: #e8f6ec;
3248 color: #13a53c;
3249 }
3250 }
3251
3252 .evf-close-custom-confirm-settings {
3253 svg {
3254 transition: all 0.3s ease-in-out;
3255 transform: rotate(-180deg);
3256 }
3257 }
3258 }
3259
3260 .evf-delete-conditional-confirmation {
3261 color: #6b6b6b;
3262 background: #f4f4f4;
3263 font-size: 14px;
3264 line-height: 20px;
3265 font-weight: 500;
3266 border: 1px solid #bababa;
3267 border-radius: 4px;
3268 padding: 6px 12px;
3269 cursor: pointer;
3270 transition: all 0.3s ease-in-out;
3271
3272 &:hover {
3273 color: #f55463;
3274 background: #feeef0;
3275 border-color: #feeef0;
3276 }
3277 }
3278 }
3279
3280 .evf-field-logic {
3281 .everest-forms-conditional-field-settings-redirect_to {
3282 width: 120px;
3283 }
3284
3285 .everest-forms-conditional-field-settings-custom_page {
3286 width: 150px;
3287 }
3288
3289 .remove-logic {
3290 padding: 4px;
3291 }
3292 }
3293
3294 &:has(.evf-conditional-confirmation-body[style*='display: none;']),
3295 &:has(
3296 .evf-field-confirmation-conditional-container[style*='display: none;']
3297 ),
3298 &:has(
3299 .evf-conditional-confirmation-active-toggle[style*='display: none;']
3300 ) {
3301 min-height: unset;
3302
3303 .evf-content-section-title {
3304 padding: 0;
3305 margin: 0;
3306 border-bottom: 0;
3307
3308 .evf-close-custom-confirm-settings {
3309 svg {
3310 transform: rotate(0deg);
3311 }
3312 }
3313 }
3314 }
3315 }
3316
3317 #evf-custom-css-block,
3318 #evf-custom-js-block {
3319 position: relative;
3320 top: 0;
3321 right: 0;
3322 bottom: 0;
3323 left: 0;
3324 min-height: 200px;
3325 font-size: 12px;
3326 }
3327
3328 &.everest-forms-panel-field-textarea {
3329 .evf-smart-tag-lists {
3330 top: 40%;
3331 }
3332 }
3333
3334 .everest-forms-panel {
3335 width: 100%;
3336 display: none;
3337
3338 &.active {
3339 display: block;
3340 }
3341
3342 .everest-forms-sub-label {
3343 font-size: 12px;
3344 font-weight: 400;
3345 margin-bottom: 0;
3346 color: $color_gray-base;
3347 }
3348
3349 .everest-forms-panel-sidebar-content {
3350 display: flex;
3351
3352 .everest-forms-panel-content-wrap {
3353 width: calc(100% - 400px);
3354 }
3355 }
3356
3357 .everest-forms-one-half {
3358 float: left;
3359 width: 49%;
3360 margin-right: 2%;
3361
3362 &:nth-child(2) {
3363 margin-right: 0;
3364 }
3365 }
3366
3367 .everest-forms-field-row {
3368 margin: 0 0 10px 0;
3369 position: relative;
3370 }
3371
3372 .everest-forms-panel-sidebar {
3373 width: 400px;
3374 height: calc(100vh - 105px);
3375 position: relative;
3376 background: #ffff;
3377 border-right: 1px solid #e1e1e1;
3378
3379 @media screen and (max-width: 1226px) {
3380 height: calc(100vh - 180px);
3381 }
3382
3383 #evf-collapse {
3384 width: 22px;
3385 height: 41px;
3386 background: #ffff;
3387 position: fixed;
3388 top: 50%;
3389 transform: translateY(-50%);
3390 border: 1px solid #e1e1e1;
3391 border-left: 0;
3392 border-radius: 0 4px 4px 0;
3393 z-index: 1;
3394 cursor: pointer;
3395
3396 &.close {
3397 left: 559px;
3398
3399 @media screen and (max-width: 960px) {
3400 left: 315px;
3401 }
3402
3403 @media screen and (max-width: 782px) {
3404 left: 279px;
3405 }
3406
3407 @media screen and (max-width: 600px) {
3408 display: none;
3409 }
3410 }
3411
3412 &.open {
3413 left: 160px;
3414
3415 svg {
3416 transform: rotate(180deg) translateX(2px);
3417 }
3418
3419 &:hover {
3420 svg {
3421 transform: rotate(180deg) translateX(0px);
3422 }
3423 }
3424
3425 @media screen and (max-width: 960px) {
3426 left: 36px;
3427 }
3428
3429 @media screen and (max-width: 782px) {
3430 left: 0;
3431 }
3432 }
3433
3434 svg {
3435 width: 12px;
3436 height: 12px;
3437 display: block;
3438 transform: translateX(-2px);
3439 transition: all 0.3s ease-in-out;
3440 }
3441
3442 &:hover {
3443 svg {
3444 transform: translateX(-4px);
3445 }
3446 }
3447 }
3448
3449 .everest-forms-input-group {
3450 background: $color-white;
3451 border: 1px solid $input-border-color;
3452 border-radius: 4px;
3453
3454 .everest-forms-input-control {
3455 background: none;
3456 border-color: transparent !important;
3457 box-shadow: none;
3458 height: 38px;
3459 padding: 0 12px;
3460
3461 &::placeholder {
3462 font-size: 14px;
3463 color: #999999;
3464 }
3465
3466 &:focus {
3467 border-color: transparent;
3468 }
3469 }
3470
3471 &__text {
3472 background: none;
3473 border: none;
3474
3475 svg {
3476 fill: #999999;
3477 }
3478 }
3479
3480 &:focus-within {
3481 border: 1px solid $everestforms;
3482 box-shadow: 0 0 0 1px $everestforms;
3483 }
3484 }
3485
3486 .everest-forms-fields-not-found {
3487 text-align: center;
3488 margin-top: 2.85em;
3489
3490 .everest-forms-fields-not-found__title {
3491 font-size: 1.7em;
3492 }
3493 }
3494
3495 .everest-forms-add-fields-heading {
3496 display: block;
3497 font-size: 16px;
3498 line-height: 150%;
3499 font-weight: 500;
3500 margin-bottom: 20px;
3501 padding-bottom: 14px;
3502 color: $color_gray-dark;
3503 border-bottom: 1px solid $color_gray-lighten;
3504 display: flex;
3505 align-items: center;
3506 justify-content: space-between;
3507
3508 i {
3509 display: flex;
3510 align-items: center;
3511 justify-content: center;
3512 width: 18px;
3513 height: 18px;
3514
3515 &::before {
3516 padding: 0;
3517 }
3518 }
3519 }
3520
3521 .evf-registered-buttons {
3522 list-style: none;
3523 padding: 0;
3524 display: flex;
3525 flex-wrap: wrap;
3526 gap: 16px;
3527 }
3528
3529 .evf-registered-item {
3530 padding: 18px 4px;
3531 border: 1px solid #edeff7;
3532 width: 30.3%;
3533 z-index: 999;
3534 color: #383838;
3535 font-weight: 400;
3536 cursor: pointer;
3537 border-radius: 4px;
3538 font-size: 12px;
3539 transition: all 0.3s ease-in-out;
3540 text-align: center;
3541 background: #fbfbfd;
3542 line-height: 150%;
3543 max-height: fit-content;
3544
3545 .dashicons {
3546 display: block;
3547 margin: 0 auto;
3548 }
3549
3550 &.evf-upgrade-addon {
3551 cursor: not-allowed;
3552 }
3553
3554 &.evf-one-time-draggable-field {
3555 cursor: not-allowed;
3556 opacity: 0.55;
3557 color: #6d6d6d;
3558 background: #f3f4f6;
3559 border-color: #d2d5db;
3560 box-shadow: none;
3561
3562 .evf-icon {
3563 opacity: 0.55;
3564 }
3565
3566 &:hover {
3567 opacity: 0.58;
3568 color: #6d6d6d;
3569 border-color: #d2d5db;
3570 background: #f3f4f6;
3571 }
3572 }
3573
3574 // &.evf-upgrade-addon,
3575 &.recaptcha_empty_key_validate,
3576 &.turnstile_empty_key_validate,
3577 &.hcaptcha_empty_key_validate,
3578 &.enable-stripe-model,
3579 &.enable-authorize-net-model,
3580 &.enable-payment-subscription-plan,
3581 &.enable-mollie-model &.enable-square-model {
3582 opacity: 0.45;
3583
3584 &:hover {
3585 opacity: 1;
3586 color: $evf_primary-color;
3587 border-color: $evf_primary-color;
3588 background: #fbf9fd;
3589 }
3590 }
3591
3592 &.evf-upgrade-addon,
3593 &.upgrade-modal {
3594 position: relative;
3595 background: #fafbfc;
3596 border-color: #e3e6ea;
3597 color: #ccd1d6;
3598 }
3599
3600 &.upgrade-modal {
3601 &::before {
3602 content: '';
3603 background-image: url(../images/icons/everest-form-pro-icon.png);
3604 background-repeat: no-repeat;
3605 background-position: center;
3606 background-size: 100%;
3607 position: absolute;
3608 border-radius: 2px;
3609 width: 16px;
3610 height: 16px;
3611 top: 7px;
3612 right: 7px;
3613 }
3614 }
3615
3616 &:hover {
3617 color: $evf_primary-color;
3618 border-color: $evf_primary-color;
3619 background: #ffffff;
3620
3621 .evf-icon {
3622 color: inherit;
3623 }
3624
3625 svg {
3626 .cls-1,
3627 .cls-2,
3628 .cls-3 {
3629 fill: $blue;
3630 }
3631 }
3632 }
3633
3634 &:focus {
3635 outline: none;
3636 }
3637
3638 svg {
3639 width: 40px;
3640 height: 40px;
3641 display: block;
3642 margin: 0 auto 10px;
3643
3644 .cls-1,
3645 .cls-2,
3646 .cls-3 {
3647 fill: #414042;
3648 transition: 0.5s fill ease-in-out;
3649 font-size: 7px;
3650 font-weight: 300;
3651 }
3652 }
3653
3654 &.ui-draggable-dragging {
3655 margin: 0;
3656 width: 105px !important;
3657 background: $color-white;
3658 position: relative;
3659 z-index: 99999;
3660
3661 svg {
3662 .cls-1,
3663 .cls-2,
3664 .cls-3 {
3665 fill: $blue;
3666 }
3667 }
3668 }
3669 }
3670
3671 .evf-setting--checkbox,
3672 .evf-field-option--checkbox {
3673 input,
3674 label {
3675 width: auto;
3676 padding: 0;
3677 display: inline-block;
3678 vertical-align: top;
3679 height: auto;
3680 }
3681
3682 input {
3683 margin: 3px 5px 0 0;
3684 }
3685 }
3686
3687 .everest-forms-field-options {
3688 background: #ffffff;
3689 display: none;
3690
3691 .everest-forms-border-container {
3692 .everest-forms-field-option-row {
3693 &.everest-forms-field-option-row-date_format {
3694 > .inline {
3695 margin-left: 0;
3696 margin-right: 10px;
3697
3698 &:last-child {
3699 margin-right: 0;
3700 }
3701 }
3702 }
3703
3704 &:last-child {
3705 margin-bottom: 15px;
3706 }
3707 }
3708 }
3709
3710 .everest-forms-field-option-row {
3711 position: relative;
3712 margin-bottom: 15px;
3713
3714 &:last-child {
3715 margin-bottom: 0;
3716 }
3717
3718 .inline {
3719 margin-bottom: 0;
3720 // display: inline-block;
3721 vertical-align: top;
3722 margin-left: 5px;
3723 }
3724
3725 .everest-forms-current-date-format,
3726 .everest-forms-past-date-disable-format,
3727 .everest-forms-min-max-date-format,
3728 .everest-forms-slot-booking {
3729 margin-bottom: 14px;
3730 }
3731
3732 &.everest-forms-field-option-row-limit_controls,
3733 &.everest-forms-field-option-row-min_length_controls {
3734 display: flex;
3735 align-items: center;
3736
3737 input[type='number']='number'] {
3738 width: 30%;
3739 margin-right: 8px;
3740 }
3741
3742 select {
3743 min-height: 30px;
3744 }
3745
3746 &.everest-forms-hidden {
3747 display: none !important;
3748 }
3749 }
3750
3751 input {
3752 border-radius: 6px;
3753 }
3754
3755 input,
3756 select {
3757 height: 36px;
3758 border-color: #e1e1e1;
3759
3760 &[type='checkbox']='checkbox'],
3761 &[type='radio']='radio'] {
3762 height: 16px;
3763 }
3764 }
3765
3766 input[type='radio']='radio'] {
3767 margin-top: -2px;
3768 margin-right: 8px;
3769 vertical-align: middle;
3770 border-color: #bababa;
3771 background-color: white !important;
3772
3773 &:checked {
3774 border-color: #7545bb;
3775
3776 &::before {
3777 background: #7545bb;
3778
3779 @media screen and (max-width: 782px) {
3780 width: 0.5rem;
3781 height: 0.5rem;
3782 margin: 0.1875rem;
3783 }
3784 }
3785 }
3786
3787 @media screen and (max-width: 782px) {
3788 width: 1rem;
3789 height: 1rem;
3790 }
3791 }
3792
3793 input,
3794 select,
3795 textarea {
3796 &:focus {
3797 box-shadow: none;
3798 border-color: $evf_primary-color;
3799 }
3800 }
3801
3802 .evf-meta-key-input-wrapper {
3803 .evf-meta-key-copy-btn {
3804 display: flex;
3805 align-items: center;
3806 justify-content: center;
3807 }
3808 }
3809 }
3810
3811 .everest-forms-field-option {
3812 display: none;
3813
3814 // Email/Password Confirmation.
3815 &.everest-forms-confirm-disabled,
3816 &.everest-forms-field-option-email:not(
3817 .everest-forms-confirm-enabled
3818 ),
3819 &.everest-forms-field-option-password:not(
3820 .everest-forms-confirm-enabled
3821 ) {
3822 .everest-forms-field-option-row-sublabel_hide,
3823 .everest-forms-field-option-row-confirmation_placeholder {
3824 display: none;
3825 }
3826 }
3827
3828 &-group {
3829 &-basic,
3830 &-advanced,
3831 &-conditionals,
3832 &-calculations,
3833 &-quiz {
3834 // background: #fbfbfd;
3835 background: $color-white;
3836 border: 1px solid #e1e1e1;
3837 border-radius: 2px;
3838 margin-bottom: 16px;
3839
3840 .everest-forms-field-option-group-toggle {
3841 padding: 16px 14px;
3842 border-bottom: 0;
3843 }
3844
3845 &.open {
3846 .everest-forms-field-option-group-toggle {
3847 // background: #f6f7f9;
3848 border-bottom: 1px solid #e1e1e1;
3849 }
3850 }
3851 }
3852
3853 &.closed {
3854 background: #ffffff;
3855 }
3856 }
3857 }
3858
3859 .everest-forms-field-option-phone {
3860 .format-selected-smart {
3861 display: none;
3862 }
3863
3864 .format-selected-default {
3865 .everest-forms-field-option-row {
3866 margin-bottom: 15px;
3867 }
3868 }
3869 }
3870
3871 .everest-forms-field-option-group {
3872 &-basic,
3873 &-advanced,
3874 &-conditionals,
3875 &-calculations,
3876 &-quiz {
3877 // background: #fbfbfd;
3878 background: $color-white;
3879 border: 1px solid #e1e1e1;
3880 border-radius: 2px;
3881 margin-bottom: 16px;
3882
3883 .everest-forms-field-option-group-toggle {
3884 padding: 16px 14px;
3885 border-bottom: 0;
3886 }
3887 }
3888
3889 &:last-child {
3890 .everest-forms-field-option-group-inner {
3891 border-bottom: none;
3892 }
3893 }
3894 }
3895
3896 .everest-forms-field-option-group-toggle {
3897 background: $color_gray-light-skin;
3898 border-bottom: 1px solid $color_gray-lighten;
3899 padding: 15px 0;
3900 font-size: 14px;
3901 font-weight: 600;
3902 display: block;
3903 color: $color_gray-dark;
3904 }
3905
3906 .everest-forms-field-option-group-inner {
3907 padding: 16px;
3908 background: #f6f7f9;
3909 }
3910 }
3911
3912 .evf-panel-tab {
3913 display: flex;
3914 align-items: center;
3915 justify-content: space-between;
3916 padding: 15px 20px;
3917 font-size: 14px;
3918 font-weight: 600;
3919 color: $color_gray-dark;
3920 // background: adjust-color(
3921 // $color_gray-more-lighten,
3922 // $saturation: -1,
3923 // $lightness: +2
3924 // );
3925 background: none;
3926 border-bottom: 1px solid #e1e1e1;
3927 position: relative;
3928 transition: all 0.3s ease-in-out;
3929
3930 &.upgrade-addons-settings {
3931 opacity: 0.4;
3932 }
3933
3934 &::before {
3935 content: '';
3936 background: #7545bb;
3937 width: 4px;
3938 height: 100%;
3939 position: absolute;
3940 top: 0;
3941 left: 0;
3942 opacity: 0;
3943 transition: all 0.3s ease-in-out;
3944 }
3945
3946 .everest-forms-toggle-arrow {
3947 font-size: 14px;
3948 margin-left: auto;
3949 line-height: 1.4;
3950 }
3951
3952 &:hover,
3953 &.active {
3954 position: relative;
3955 color: $everestforms;
3956 background: $color-white;
3957
3958 &::before {
3959 opacity: 1;
3960 }
3961 }
3962 }
3963
3964 .everest-forms-active-connections,
3965 .everest-forms-active-email,
3966 .everest-forms-active-sms-notifications {
3967 display: none;
3968 padding: 0 20px;
3969 margin-top: -2px;
3970 background: $color-white;
3971 position: relative;
3972 border-bottom: 1px solid $color_gray-lighten;
3973
3974 &.active {
3975 display: flex;
3976 align-items: flex-end;
3977 flex-direction: column-reverse;
3978
3979 &.everest-forms-hidden {
3980 display: none;
3981 }
3982 }
3983
3984 .everest-forms-connections-add,
3985 .everest-forms-email-add {
3986 margin-bottom: 20px;
3987 }
3988
3989 .everest-forms-active-connections-list,
3990 .everest-forms-active-email-connections-list,
3991 .everest-forms-active-sms-notifications-connections-list {
3992 width: 100%;
3993 padding: 14px 16px 16px;
3994 display: flex;
3995 flex-wrap: wrap;
3996 margin: 0 0 20px;
3997 border-radius: 3px;
3998 border: 1px solid #e9e9e9;
3999 background: $color-white;
4000 gap: 24px;
4001
4002 &.empty-list {
4003 display: none;
4004 }
4005
4006 h4 {
4007 margin-top: 0;
4008 color: #222;
4009 font-size: 14px;
4010 font-weight: 500;
4011 line-height: 150%;
4012 margin-top: 4px;
4013 margin-bottom: 24px;
4014 }
4015
4016 li {
4017 width: 100%;
4018 display: flex;
4019 padding: 10px;
4020 cursor: pointer;
4021 margin-bottom: 2px;
4022 align-items: center;
4023 justify-content: space-between;
4024 transition: all 0.25s ease 0s;
4025 // border: 1px solid $color_gray-lighten;
4026
4027 &.active-user {
4028 background: #f6f3fa;
4029 border: 0;
4030 padding: 10px;
4031 border-radius: 3px;
4032
4033 .user-nickname {
4034 color: $everestforms;
4035 transition: all 0.25s ease 0s;
4036 color: $evf_primary-color;
4037 }
4038 }
4039
4040 &:hover {
4041 .user-nickname {
4042 color: $everestforms;
4043 }
4044 }
4045
4046 .user-nickname {
4047 color: $color_gray-base;
4048 font-weight: 500;
4049 line-height: 150%;
4050 }
4051
4052 .evf-email-side-section {
4053 display: flex;
4054 align-items: center;
4055 gap: 12px;
4056
4057 .evf-toggle-section {
4058 .everest-forms-toggle-form {
4059 margin: 0;
4060 }
4061 }
4062
4063 .evf-vertical-divider {
4064 background: #bababa;
4065 width: 1px;
4066 height: 16px;
4067 }
4068
4069 a {
4070 // display: flex;
4071
4072 span {
4073 display: flex;
4074 align-items: center;
4075 justify-content: center;
4076 }
4077
4078 svg {
4079 width: 18px;
4080 height: 18px;
4081 fill: #999999;
4082 transition: all 0.3s ease-in-out;
4083 }
4084
4085 &:hover {
4086 svg {
4087 fill: #7545bb;
4088 }
4089
4090 .everest-forms-email-default-remove {
4091 svg {
4092 fill: #ff2f39;
4093 }
4094 }
4095 }
4096 }
4097 }
4098
4099 .toggle-remove {
4100 color: $color_gray-base;
4101 cursor: pointer;
4102 position: relative;
4103 padding-left: 13px;
4104 transition: all 0.25s ease 0s;
4105
4106 &:hover {
4107 color: $red;
4108
4109 &::before,
4110 &::after {
4111 background: $red;
4112 }
4113 }
4114
4115 &::before,
4116 &::after {
4117 top: 50%;
4118 left: 3px;
4119 width: 2px;
4120 content: '';
4121 height: 10px;
4122 position: absolute;
4123 background: $color_gray-base;
4124 display: inline-block;
4125 transition: all 0.25s ease 0s;
4126 }
4127
4128 &::before {
4129 transform: translateY(-50%) rotate(45deg);
4130 }
4131
4132 &::after {
4133 transform: translateY(-50%) rotate(-45deg);
4134 }
4135 }
4136 }
4137 }
4138
4139 .everest-forms-active-email-connections-list {
4140 gap: 0;
4141 }
4142 }
4143
4144 .everest-forms-active-email {
4145 position: relative;
4146 transition: all 0.3s ease-in-out;
4147
4148 &::before {
4149 content: '';
4150 background: #7545bb;
4151 width: 4px;
4152 height: 100%;
4153 position: absolute;
4154 top: 0;
4155 left: 0;
4156 opacity: 0;
4157 transition: all 0.3s ease-in-out;
4158 }
4159
4160 &.active {
4161 &::before {
4162 opacity: 1;
4163 }
4164 }
4165
4166 .everest-forms-email-add {
4167 position: absolute;
4168 top: 14px;
4169 right: 38px;
4170 border-radius: 3px;
4171 background: #f6f3fa;
4172 color: #8c64c6;
4173 font-size: 13px;
4174 font-weight: 400;
4175 line-height: 150%;
4176 padding: 6px 12px 6px 10px;
4177 display: flex;
4178 align-items: center;
4179 gap: 6px;
4180 margin: 0;
4181 transition: all 0.3s ease-in-out;
4182
4183 svg {
4184 width: 13px;
4185 height: 13px;
4186 fill: #8c64c6;
4187 transition: all 0.3s ease-in-out;
4188 }
4189
4190 &:hover {
4191 background: #8c64c6;
4192 color: $color-white;
4193
4194 svg {
4195 fill: $color-white;
4196 }
4197 }
4198 }
4199 }
4200
4201 .everest-forms-tab-content {
4202 .evf-toggle-section {
4203 display: flex;
4204 align-items: center;
4205
4206 > {
4207 span {
4208 margin-top: 0;
4209 }
4210
4211 label {
4212 margin-bottom: 0;
4213 }
4214 }
4215 }
4216 }
4217 }
4218
4219 .everest-forms-field-option-date-time {
4220 .format-selected-date .everest-forms-time,
4221 .format-selected-time .everest-forms-date {
4222 display: none;
4223 }
4224 }
4225
4226 .everest-forms-field-captcha {
4227 .format-selected-math {
4228 font-size: 16px;
4229
4230 input {
4231 width: 70px;
4232 display: inline-block;
4233 }
4234 }
4235
4236 .format-selected-math .everest-forms-question,
4237 .format-selected-question .everest-forms-equation {
4238 display: none;
4239 }
4240 }
4241
4242 .everest-forms-field-option-address {
4243 .default,
4244 .placeholder {
4245 width: 44%;
4246 float: left;
4247 margin-right: 2%;
4248 display: flex;
4249 flex-direction: column;
4250
4251 input {
4252 width: 99%;
4253 }
4254
4255 label {
4256 font-weight: 400;
4257 }
4258 }
4259
4260 .hide {
4261 input {
4262 margin: 7px 0 0 0;
4263 }
4264 }
4265 }
4266
4267 &-sidebar-content {
4268 &.collapsed {
4269 .everest-forms-panel-sidebar {
4270 width: 0px;
4271 }
4272
4273 .everest-forms-panel-content-wrap {
4274 width: 100% !important;
4275
4276 // @media screen and (max-width: 960px) {
4277 // width: 100% !important;
4278 // }
4279 }
4280 }
4281 }
4282 }
4283
4284 .everest-forms-panel-content-wrap {
4285 .evf-admin-row {
4286 display: flex;
4287 position: relative;
4288 margin-bottom: 15px;
4289 padding: 20px !important;
4290 background: transparent;
4291 border: 1px solid transparent;
4292 transition:
4293 0.5s border,
4294 0.5s background;
4295
4296 &:last-child {
4297 margin-bottom: 0;
4298 }
4299
4300 .evf-toggle-row {
4301 top: 0;
4302 right: 0;
4303 opacity: 0;
4304 display: flex;
4305 cursor: pointer;
4306 position: absolute;
4307 visibility: hidden;
4308 color: $color-white;
4309 transition: 0.7s all;
4310 z-index: 9999;
4311
4312 .evf-show-grid {
4313 &:hover {
4314 span {
4315 &.dashicons {
4316 background: $green;
4317 }
4318 }
4319 }
4320 }
4321
4322 .evf-delete-row {
4323 span {
4324 &.dashicons {
4325 // border-right: 1px solid transparentize($color-white, 0.8);
4326 border-right: 1px solid #fff;
4327 }
4328 }
4329
4330 &:hover {
4331 span {
4332 &.dashicons {
4333 background: $red;
4334 }
4335 }
4336 }
4337 }
4338
4339 .evf-duplicate-row {
4340 span {
4341 &.dashicons {
4342 border-radius: 0 0 0 3px;
4343 border-right: 1px solid transparentize($color-white, 0.8);
4344 }
4345 }
4346
4347 &:hover {
4348 span {
4349 &.dashicons {
4350 background: $blue;
4351 }
4352 }
4353 }
4354 }
4355
4356 span {
4357 &.dashicons {
4358 // background: $color_gray-base;
4359 font-size: 14px;
4360 height: auto;
4361 width: auto;
4362 // color: $color-white;
4363 padding: 5px;
4364 background: #e9e9e9;
4365 color: #666666;
4366
4367 &:hover {
4368 color: #fff;
4369 }
4370 }
4371 }
4372
4373 .evf-toggle-row-content {
4374 display: none;
4375 position: absolute;
4376 width: 160px;
4377 padding: 20px;
4378 text-align: center;
4379 right: -10px;
4380 border-radius: 5px;
4381 background: $color-white;
4382 font-weight: 600;
4383 font-size: 12px;
4384 top: 35px;
4385 transition: 0.9s background;
4386 border: 1px solid $color-gray-lighten;
4387 box-shadow: 1px 2px 10px 0 transparentize($color_gray-dark, 0.85);
4388
4389 &::before,
4390 &::after {
4391 content: '';
4392 position: absolute;
4393 }
4394
4395 &::before {
4396 top: -7px;
4397 right: 14px;
4398 border-right: 7px solid transparent;
4399 border-bottom: 7px solid $color-white;
4400 border-left: 7px solid transparent;
4401 }
4402
4403 &::after {
4404 top: -8px;
4405 right: 12px;
4406 border-right: 9px solid transparent;
4407 border-bottom: 9px solid $color-gray-lighten;
4408 border-left: 9px solid transparent;
4409 z-index: -1;
4410 }
4411
4412 > span {
4413 color: $color_gray-base;
4414 display: block;
4415 }
4416
4417 small {
4418 color: $color_gray-light;
4419 margin-bottom: 10px;
4420 display: block;
4421 }
4422
4423 .evf-grid-selector {
4424 margin: 3px;
4425 width: 40px;
4426 height: 30px;
4427 display: inline-block;
4428 border: 1px solid $color_gray-lighten;
4429
4430 span {
4431 height: 100%;
4432 display: inline-block;
4433 background: $color-white;
4434
4435 &:nth-child(n + 1) {
4436 border-left: 1px solid $color_gray-lighten;
4437 }
4438
4439 &:nth-child(1) {
4440 border-left: 0 none;
4441 }
4442 }
4443
4444 &.active {
4445 border-color: $blue;
4446
4447 span {
4448 border-color: $blue;
4449 }
4450 }
4451 }
4452 }
4453 }
4454
4455 &.evf-hover {
4456 // background: lighten($blue, 48%);
4457 // border: 1px dashed $blue;
4458 background: #fcfcfc;
4459 border: 1px solid #e7e7e7;
4460 border-radius: 5px;
4461
4462 .evf-admin-grid {
4463 // border: 1px dashed $color-gray-light;
4464 background: transparent;
4465 }
4466
4467 .evf-toggle-row {
4468 opacity: 1;
4469 visibility: visible;
4470 }
4471 }
4472
4473 .evf-admin-grid {
4474 padding: 20px;
4475 cursor: pointer;
4476 background: $color-white;
4477 position: relative;
4478 border: 1px solid transparent;
4479 transition:
4480 0.5s border,
4481 0.5s background;
4482 text-align: left;
4483
4484 &.evf-hover {
4485 &.evf-item-hover {
4486 position: relative;
4487
4488 .everest-forms-field,
4489 .evf-registered-item {
4490 &:nth-last-child(2) {
4491 margin-bottom: 0;
4492
4493 &.active {
4494 margin-bottom: 10px;
4495 }
4496 }
4497 }
4498
4499 &::before {
4500 display: none;
4501 }
4502 }
4503 }
4504
4505 &.evf-grid-1 {
4506 width: 100%;
4507 }
4508
4509 &.evf-grid-2 {
4510 width: 50%;
4511 }
4512
4513 &.evf-grid-3 {
4514 width: 33.3333%;
4515 }
4516
4517 &.evf-grid-4 {
4518 width: 25%;
4519 }
4520
4521 .evf-registered-item {
4522 padding: 20px;
4523 font-size: 18px;
4524 min-height: 94px;
4525 margin-bottom: 10px;
4526
4527 &:last-child {
4528 margin-bottom: 0;
4529 }
4530
4531 &.ui-draggable {
4532 width: 100%;
4533
4534 .evf-icon {
4535 display: inline-block;
4536 }
4537 }
4538
4539 .evf-icon {
4540 font-size: 24px;
4541 vertical-align: middle;
4542 }
4543
4544 .spinner {
4545 float: none;
4546 width: 25px;
4547 height: 25px;
4548 margin: 10px 0 5px 10px;
4549 }
4550
4551 .dashicons {
4552 font-size: 22px;
4553 margin-top: 3px;
4554 }
4555 }
4556
4557 .ui-sortable-placeholder {
4558 width: 100%;
4559 visibility: visible !important;
4560 background: lighten($green, 42%);
4561 border: 1px dashed lighten($green, 15%);
4562 }
4563
4564 &.evf-empty-grid {
4565 display: flex;
4566 align-items: center;
4567 justify-content: center;
4568 position: relative;
4569 border: 1px dashed $color-gray-light;
4570 border-radius: 4px;
4571
4572 &::before {
4573 content: '\f132';
4574 font-size: 17px !important;
4575 width: 30px !important;
4576 height: 30px !important;
4577 color: #6b6b6b !important;
4578 font-family: dashicons;
4579 line-height: 1.2;
4580 cursor: all-scroll;
4581 color: $color_gray-lighten;
4582 }
4583 }
4584
4585 input {
4586 &[type='text']='text'],
4587 &[type='password']='password'],
4588 &[type='date']='date'],
4589 &[type='datetime']='datetime'],
4590 &[type='datetime-local']='datetime-local'],
4591 &[type='email']='email'],
4592 &[type='month']='month'],
4593 &[type='number']='number'],
4594 &[type='search']='search'],
4595 &[type='tel']='tel'],
4596 &[type='time']='time'],
4597 &[type='url']='url'],
4598 &[type='week']='week'] {
4599 padding: 0 8px;
4600 line-height: 2;
4601 min-height: 30px;
4602 border-radius: 4px;
4603 }
4604 }
4605
4606 input,
4607 select,
4608 textarea {
4609 &:disabled,
4610 &.disabled {
4611 background-color: #ffff !important;
4612 }
4613 }
4614 }
4615 }
4616
4617 .everest-forms-field-payment-single {
4618 .widefat,
4619 .item-price-hidden {
4620 display: none;
4621 }
4622
4623 .item-price-hidden {
4624 margin: 0;
4625 color: #999;
4626 font-size: 12px;
4627 }
4628
4629 .format-selected-user {
4630 .widefat {
4631 display: block;
4632 }
4633
4634 .item-price {
4635 display: none;
4636 }
4637 }
4638
4639 .format-selected-hidden {
4640 .item-price-hidden {
4641 display: block;
4642 }
4643 }
4644 }
4645
4646 .everest-forms-field {
4647 cursor: move;
4648 padding: 15px;
4649 position: relative;
4650 margin-bottom: 10px;
4651 border: 1px solid transparent;
4652 border-radius: 3px;
4653 transition: 0.5s box-shadow;
4654
4655 .everest-forms-image-choices {
4656 .everest-forms-image-choices-item {
4657 margin-bottom: 20px !important;
4658
4659 &:has(input:checked) {
4660 .everest-forms-field-label-inline {
4661 border-color: var(--wp--preset--color--vivid-cyan-blue);
4662 box-shadow: 0px 6px 24px 0px rgba(10, 10, 10, 0.06);
4663 }
4664 }
4665
4666 label {
4667 font-weight: normal;
4668 margin-bottom: 0;
4669 }
4670
4671 .everest-forms-image-choices-image {
4672 display: block;
4673 margin-bottom: 10px;
4674
4675 img {
4676 max-width: 100%;
4677 display: block;
4678 }
4679 }
4680 }
4681 }
4682
4683 // column layout for choice fields
4684 &.everest-forms-list-2-columns,
4685 &.everest-forms-list-3-columns {
4686 ul {
4687 display: flex;
4688 flex-wrap: wrap;
4689 margin-left: -15px;
4690 margin-right: -15px;
4691
4692 li {
4693 padding-left: 15px;
4694 padding-right: 15px;
4695 }
4696 }
4697 }
4698
4699 &.everest-forms-list-2-columns {
4700 li {
4701 flex: 0 0 50%;
4702 max-width: 50%;
4703
4704 &:nth-child(1n + 3) {
4705 margin-top: 10px;
4706 }
4707 }
4708 }
4709
4710 &.everest-forms-list-3-columns {
4711 li {
4712 flex: 0 0 33.333%;
4713 max-width: 33.333%;
4714
4715 &:nth-child(1n + 4) {
4716 margin-top: 10px;
4717 }
4718 }
4719 }
4720
4721 &.everest-forms-list-inline {
4722 ul {
4723 li {
4724 display: inline-block;
4725 margin-right: 15px;
4726 }
4727 }
4728 }
4729
4730 &:last-child {
4731 margin-bottom: 0;
4732 }
4733
4734 &.everest-forms-field--first,
4735 &.everest-forms-field--last {
4736 width: 48.5%;
4737 margin-right: 3%;
4738 float: left;
4739 }
4740
4741 &.everest-forms-field--last {
4742 margin-right: 0;
4743 float: right;
4744 }
4745
4746 &.active {
4747 margin: 0 0 10px;
4748 // border: 1px solid $color_gray-lighten;
4749 border: 1px solid #d7d9e0;
4750 // background: $color_gray-light-skin;
4751 background: #f9f9f9;
4752
4753 .evf-field-action {
4754 opacity: 1;
4755 visibility: visible;
4756 }
4757
4758 &:last-child {
4759 margin-bottom: 0;
4760 }
4761 }
4762
4763 &.required label {
4764 .required {
4765 font-weight: 300;
4766 margin: 0 0 0 5px;
4767 display: inline-block;
4768 vertical-align: middle;
4769 }
4770 }
4771
4772 &.ui-sortable-placeholder {
4773 border: 1px dashed transparentize($blue, 0.75);
4774 }
4775
4776 &.label_hide {
4777 input[type='text']='text'] {
4778 margin-bottom: 0;
4779 }
4780
4781 .description {
4782 margin-top: 5px;
4783
4784 &:empty {
4785 margin-top: 0;
4786 }
4787 }
4788 }
4789
4790 input {
4791 &[type='text']='text'],
4792 &[type='email']='email'] {
4793 margin-bottom: 5px;
4794 }
4795
4796 &[type='checkbox']='checkbox'],
4797 &[type='radio']='radio'] {
4798 margin-right: 10px;
4799 }
4800 }
4801
4802 select,
4803 textarea {
4804 margin-bottom: 5px;
4805 }
4806
4807 select {
4808 option {
4809 color: inherit;
4810
4811 &.placeholder {
4812 opacity: 0.5;
4813 }
4814 }
4815
4816 &[multiple]] {
4817 padding: 6px 8px;
4818 box-shadow: none;
4819 }
4820 }
4821
4822 canvas {
4823 border: 1px solid rgba(222, 222, 222, 0.75);
4824 }
4825
4826 &.everest-forms-field-select {
4827 select:not([multiple]) {
4828 height: 35px;
4829 }
4830 }
4831
4832 .select2-container {
4833 margin-bottom: 5px;
4834 width: 100% !important;
4835
4836 span.selection {
4837 width: 100% !important;
4838 }
4839
4840 .select2-selection--multiple {
4841 border-color: $color_gray-lighten;
4842 }
4843
4844 .select2-selection__choice {
4845 margin: 4px 4px 0 0;
4846 }
4847
4848 .select2-search__field {
4849 min-height: 24px;
4850 line-height: 1.4;
4851 }
4852 }
4853
4854 .evf-field-action {
4855 position: absolute;
4856 // top: 15px;
4857 // right: 15px;
4858 top: 6px;
4859 right: 1px;
4860 visibility: hidden;
4861 opacity: 0;
4862 transition: 0.5s all;
4863
4864 a {
4865 padding: 5px;
4866 // color: $color-white;
4867 // background: $color_gray-base;
4868 // border-right: 1px solid transparentize($color-white, 0.8);
4869 background: #e9e9e9;
4870 border-right: 1px solid #fff;
4871 color: #666666;
4872
4873 &:first-child {
4874 // border-radius: 3px 0 0 3px;
4875 border-radius: 0 0 0 3px;
4876 }
4877
4878 &:last-child {
4879 // border-radius: 0 3px 3px 0;
4880 border-radius: 0 3px 0 0;
4881 border-right: none;
4882 }
4883
4884 &.everest-forms-field-delete:hover {
4885 background: $red;
4886 }
4887
4888 &:hover {
4889 color: #fff;
4890 background: $blue;
4891 }
4892 }
4893
4894 .dashicons {
4895 font-size: 15px;
4896 height: auto;
4897 width: auto;
4898 }
4899 }
4900
4901 &.label_hide {
4902 .label-title {
4903 display: none;
4904 }
4905 }
4906
4907 &.sublabel_hide {
4908 .everest-forms-sub-label {
4909 display: none;
4910 }
4911 }
4912
4913 .everest-forms-confirm-enabled {
4914 display: flex;
4915
4916 .everest-forms-confirm-primary,
4917 .everest-forms-confirm-confirmation {
4918 width: 50%;
4919 flex-wrap: wrap;
4920 }
4921
4922 .everest-forms-confirm-primary {
4923 padding-right: 15px;
4924 }
4925
4926 .everest-forms-confirm-confirmation {
4927 padding-left: 15px;
4928 }
4929 }
4930
4931 .everest-forms-confirm-disabled {
4932 .everest-forms-confirm-primary {
4933 .everest-forms-sub-label {
4934 display: none;
4935 }
4936 }
4937
4938 .everest-forms-confirm-confirmation {
4939 display: none;
4940 }
4941 }
4942
4943 &:hover {
4944 border-radius: 3px;
4945 border: 1px dashed #8c64c6;
4946 background: #f8f8fa;
4947
4948 .evf-field-action {
4949 visibility: visible;
4950 opacity: 1;
4951 }
4952 }
4953
4954 &.ui-sortable-helper {
4955 padding: 20px 30px;
4956 height: auto !important;
4957 left: -20px;
4958 right: -20px;
4959 background: $color-white;
4960
4961 &:hover {
4962 .evf-field-action {
4963 display: none;
4964 }
4965 }
4966 }
4967
4968 label {
4969 cursor: all-scroll;
4970 }
4971
4972 img {
4973 width: 280px;
4974 height: auto;
4975 }
4976 }
4977
4978 .file-uploader {
4979 width: 100%;
4980 border: 2px dashed $color_gray-lighten;
4981 background: $color_gray-light-skin;
4982 border-radius: 3px;
4983 cursor: pointer;
4984 text-align: center;
4985 padding-top: 30px;
4986 padding-bottom: 30px;
4987 position: relative;
4988
4989 svg {
4990 width: 30px;
4991 height: 30px;
4992 fill: #bbbcbd;
4993 margin-bottom: 20px;
4994 }
4995
4996 input {
4997 &.file-input {
4998 touch-action: manipulation;
4999 max-width: 100%;
5000 min-width: 14px;
5001 margin: 0;
5002 opacity: 0;
5003 height: 18px;
5004 }
5005 }
5006
5007 .drop {
5008 display: block;
5009 font-size: 14px;
5010 font-weight: 600;
5011 color: $color_gray-light;
5012 margin-bottom: 10px;
5013 }
5014
5015 .or {
5016 font-size: 12px;
5017 color: $color-gray-light;
5018 font-weight: 600;
5019 display: block;
5020 margin-bottom: 10px;
5021 }
5022
5023 .file-control {
5024 position: absolute;
5025 bottom: 30px;
5026 color: $blue;
5027 padding-bottom: 2px;
5028 display: block;
5029 left: 0;
5030 right: 0;
5031
5032 &::before {
5033 content: '';
5034 width: 45px;
5035 background: $blue;
5036 height: 1px;
5037 display: block;
5038 left: 50%;
5039 bottom: -2px;
5040 position: absolute;
5041 transform: translateX(-50%);
5042 }
5043 }
5044 }
5045
5046 .publishing-action {
5047 width: 100%;
5048 text-align: right;
5049 }
5050
5051 .submit-button {
5052 display: inline-block;
5053 font-size: 12px;
5054 font-weight: 600;
5055 color: $color-white;
5056 padding: 15px 20px;
5057 border: 0 none;
5058 background: $green;
5059 border-radius: 3px;
5060 }
5061 }
5062
5063 label {
5064 font-size: 14px;
5065 line-height: 24px;
5066 margin-bottom: 8px;
5067 color: #222;
5068 font-weight: 500;
5069 max-width: 300px;
5070 width: 100%;
5071 display: flex;
5072 align-items: center;
5073 gap: 4px;
5074
5075 i {
5076 color: $color_gray-light;
5077 font-size: 16px;
5078 line-height: 1.2;
5079 margin-top: 3px;
5080 margin-top: 0;
5081 width: 14px;
5082 height: 18px;
5083 }
5084
5085 .required {
5086 color: $red;
5087 display: none;
5088 }
5089
5090 input {
5091 &[type='checkbox']='checkbox'],
5092 &[type='radio']='radio'] {
5093 margin-right: 10px;
5094 }
5095 }
5096
5097 &.evf-toggle-switch {
5098 margin-bottom: 0;
5099 }
5100
5101 &.evf-toggle-label {
5102 display: inline-block;
5103 margin-bottom: 0;
5104 }
5105
5106 &.everest-forms-hidden {
5107 display: none;
5108 }
5109
5110 &.evf-privacy-policy-consent-message {
5111 display: initial;
5112 margin-bottom: 0;
5113 }
5114 }
5115
5116 .everest-forms-label-edit {
5117 margin-bottom: 4px;
5118
5119 label {
5120 margin-bottom: 4px;
5121 padding: 4px 0;
5122 flex: 1;
5123 }
5124
5125 input {
5126 font-size: 13px;
5127 font-weight: 600;
5128 }
5129
5130 .dashicons {
5131 margin-right: 7px;
5132 }
5133 }
5134
5135 input:not(.ed_button),
5136 textarea:not(.wp-editor-area) {
5137 color: #222222;
5138
5139 &::placeholder {
5140 color: $color_gray-light;
5141 }
5142 }
5143
5144 textarea,
5145 textarea:not(.wp-editor-area) {
5146 height: 120px;
5147
5148 &.short {
5149 padding: 8px 12px;
5150 height: 100px;
5151 }
5152 }
5153
5154 .description {
5155 color: $color_gray-normal;
5156 }
5157
5158 .everest-forms-checklist {
5159 ul {
5160 label {
5161 margin-top: 0;
5162 margin-bottom: 0;
5163 font-weight: normal;
5164 }
5165 }
5166 }
5167
5168 .everest-forms-question {
5169 margin-top: 0;
5170 line-height: 1.2;
5171 }
5172
5173 .evf-grid-lists {
5174 width: 100%;
5175 display: flex;
5176 text-align: center;
5177 box-sizing: border-box;
5178 justify-content: center;
5179 border: 1px solid transparent;
5180 border-radius: 4px;
5181 transition: all 0.3s ease-in;
5182 border-left: 0;
5183 gap: 24px;
5184 // margin-left: -1.5%;
5185 // margin-right: 1.5%;
5186 background: transparent;
5187 display: flex;
5188
5189 .evf-grid-lists-item {
5190 padding-left: 1.5%;
5191 padding-right: 1.5%;
5192 background: $color-white;
5193 }
5194 }
5195
5196 .evf-content-section-title {
5197 position: relative;
5198 font-size: 22px;
5199 font-weight: 600;
5200 line-height: 130%;
5201 margin-bottom: 20px;
5202 padding-bottom: 20px;
5203 display: flex;
5204 align-items: center;
5205 justify-content: space-between;
5206 color: #222222;
5207 border-bottom: 1px solid #e9e9e9;
5208
5209 .evf-title {
5210 // margin-right: 20px;
5211 }
5212
5213 .evf-enable-email-toggle,
5214 .evf-enable-webhook-toggle {
5215 position: absolute;
5216 top: 15px;
5217 right: -20px;
5218
5219 img {
5220 width: 100%;
5221 height: auto;
5222 }
5223 }
5224
5225 .evf-toggle-section {
5226 margin-top: 2px;
5227 }
5228 }
5229
5230 .everest-forms-panel-field {
5231 position: relative;
5232 margin-bottom: 20px;
5233 max-width: 100%;
5234 display: flex;
5235 gap: 12px;
5236
5237 &.evf-field-conditional-container {
5238 display: none;
5239 }
5240
5241 &.evf-field-webhook-headers-container,
5242 &.evf-field-confirmation-conditional-container {
5243 display: block;
5244 }
5245
5246 &.evf-toggle-section-wrapper {
5247 display: block;
5248
5249 .evf-toggle-section {
5250 display: flex;
5251 gap: 30px;
5252 flex-direction: row-reverse;
5253 justify-content: flex-end;
5254
5255 .tooltipstered {
5256 margin-top: 5px;
5257 margin-left: 10px;
5258 }
5259 }
5260 }
5261
5262 &:last-child {
5263 margin-bottom: 0;
5264 }
5265
5266 &.everest-forms-panel-field-toggle {
5267 display: flex;
5268 align-items: center;
5269 justify-content: space-between;
5270
5271 .evf-toggle-section {
5272 margin-bottom: 0;
5273 }
5274 }
5275
5276 .wp-editor-container {
5277 margin-bottom: 10px;
5278 border-radius: 4px;
5279
5280 .quicktags-toolbar {
5281 border-radius: 4px 4px 0 0;
5282 }
5283
5284 textarea {
5285 border-radius: 0 0 4px 4px;
5286 }
5287 }
5288
5289 .submission-date-wrapper {
5290 .evf-form-row {
5291 margin-left: 0;
5292 margin-right: 0;
5293
5294 .evf-form-col-12 {
5295 gap: 12px;
5296
5297 .everest-forms-panel-field-checkbox {
5298 margin-bottom: 12px;
5299
5300 input[type='checkbox']='checkbox'] {
5301 margin-right: 8px;
5302 }
5303 }
5304 }
5305 }
5306 }
5307
5308 input,
5309 select,
5310 textarea {
5311 &:focus {
5312 box-shadow: none;
5313 border-color: $evf_primary-color;
5314 }
5315 }
5316
5317 .desc {
5318 margin: 10px 0;
5319 font-style: italic;
5320 line-height: 1.2;
5321 }
5322
5323 .evf-hidden-content {
5324 margin-top: 10px;
5325 }
5326
5327 .max-entry-section {
5328 .max-entry-section-content {
5329 display: flex;
5330
5331 .everest-forms-panel-field {
5332 margin-bottom: 0;
5333 }
5334
5335 .entry-period {
5336 flex: 1;
5337 margin-left: 10px;
5338 }
5339 }
5340 }
5341
5342 &.everest-forms-panel-field-tinymce {
5343 .evf-toggle-smart-tag-display {
5344 top: 38px;
5345 right: 8px;
5346 border: 1px solid #e1e1e1;
5347 }
5348
5349 .evf-smart-tag-lists {
5350 top: 70px;
5351 }
5352 }
5353
5354 &#everest-forms-panel-field-settings-query_string-wrap {
5355 flex-wrap: wrap;
5356
5357 > label {
5358 flex: 0 0 300px;
5359 }
5360
5361 > input[type='text']='text'] {
5362 flex: 1 1 0;
5363 width: auto;
5364 min-width: 0;
5365 }
5366
5367 .evf-toggle-smart-tag-display {
5368 // Align the smart-tag icon inside the single-line input
5369 // (the 2-column layout puts the input at the row top).
5370 top: 5px;
5371 }
5372
5373 // EVF-2643: keep the example/help text on its own line,
5374 // aligned beneath the input instead of beside it.
5375 .desc {
5376 flex: 0 0 100%;
5377 box-sizing: border-box;
5378 padding-left: 312px; // 300px label column + 12px flex gap
5379 margin: 6px 0 0;
5380 }
5381 }
5382
5383 &.evf_conditional_logic_container {
5384 label {
5385 margin-bottom: 0;
5386 }
5387 }
5388 }
5389
5390 .evf-choices-list {
5391 background: $color_gray-more-lighten;
5392 border-radius: 4px;
5393 padding: 1px 8px;
5394
5395 .sort {
5396 cursor: grab;
5397 display: flex;
5398 // margin-top: 6px;
5399 // padding-right: 6px;
5400 color: $color_gray-light;
5401
5402 svg {
5403 fill: currentColor;
5404 transform: rotate(90deg);
5405 }
5406
5407 &:active {
5408 cursor: grabbing;
5409 }
5410 }
5411
5412 li {
5413 background: $color-white;
5414 border: 1px solid $color_gray-lighten;
5415 display: flex;
5416 flex-wrap: wrap;
5417 align-items: center;
5418 padding: 8px;
5419 margin: 8px 0;
5420 z-index: 99999 !important;
5421
5422 .evf-choice-list-input {
5423 flex: 1;
5424 margin-right: 4px;
5425 }
5426
5427 input {
5428 &[type='text']='text'] {
5429 width: 100%;
5430 }
5431
5432 &[type='radio']='radio'],
5433 &[type='checkbox']='checkbox'] {
5434 margin: 0px 6px 0 0;
5435 }
5436
5437 &.value {
5438 display: none;
5439 margin-top: 8px;
5440
5441 &.evf-money-input {
5442 width: 22%;
5443 display: inline-block;
5444 margin: 0 0 0 auto;
5445 flex: 0 0 22%;
5446 border-radius: 6px;
5447 }
5448 }
5449 }
5450
5451 .everest-forms-attachment-media-view {
5452 flex: 100%;
5453 display: none;
5454 margin-top: 8px;
5455
5456 .button-add-media {
5457 width: 100%;
5458 padding: 8px;
5459 outline: none;
5460 cursor: pointer;
5461 border-radius: 3px;
5462 color: $color_gray-base;
5463 border: 1px dashed $color-gray-lighten;
5464 }
5465
5466 .thumbnail-image {
5467 display: block;
5468 max-height: 200px;
5469 margin-bottom: 3px;
5470 border-radius: 4px;
5471 position: relative;
5472 overflow: hidden;
5473
5474 img {
5475 display: block;
5476 max-width: 100%;
5477 user-select: none;
5478 border-radius: 4px;
5479 }
5480 }
5481
5482 .actions {
5483 margin-top: 8px;
5484 }
5485 }
5486
5487 &.ui-sortable-placeholder {
5488 visibility: visible !important; // Overwrite CSS over JS.
5489 background: $color_gray-more-lighten;
5490 border: 1px dashed $color_gray-lighten;
5491 }
5492
5493 &.ui-sortable-helper {
5494 z-index: 99999 !important; // Overwrite CSS over JS.
5495 }
5496 }
5497
5498 .add,
5499 .remove {
5500 display: inline-flex;
5501 align-items: center;
5502 justify-content: center;
5503 width: 20px;
5504 height: 20px;
5505 // margin-top: 5px;
5506 border: none;
5507
5508 .dashicons {
5509 width: 16px;
5510 height: 16px;
5511 font-size: 16px;
5512 }
5513 }
5514
5515 .add {
5516 &:hover {
5517 color: $blue;
5518 background: none;
5519 }
5520 }
5521
5522 .remove {
5523 margin-left: 0;
5524
5525 &:hover {
5526 color: $red;
5527 background: none;
5528 }
5529 }
5530
5531 &.show-images {
5532 li {
5533 .everest-forms-attachment-media-view {
5534 display: block;
5535 }
5536 }
5537 }
5538
5539 &.show-values {
5540 li {
5541 input[type='text']='text'].value {
5542 display: block;
5543 }
5544 }
5545 }
5546 }
5547
5548 .everest-forms-field-option-row-choices_images {
5549 .notice {
5550 display: inline-block;
5551 margin: 0 0 15px 0 !important;
5552
5553 &.hidden {
5554 display: none;
5555 }
5556 }
5557 }
5558
5559 .everest-forms-field-option-row-rows,
5560 .everest-forms-field-option-row-columns,
5561 .everest-forms-field-option-row-drop_down_choices,
5562 .everest-forms-field-option-row-choices,
5563 .everest-forms-field-option-row-questions {
5564 ul {
5565 li {
5566 clear: both;
5567 padding: 5px 10px;
5568 border-radius: 4px;
5569 border: 1px solid transparent;
5570 }
5571 }
5572
5573 .evf-questions-list {
5574 li {
5575 padding: 10px;
5576 background: $color-white;
5577 margin-bottom: 10px;
5578 border: 1px solid $color_gray-lighten;
5579
5580 input[type='text']='text'] {
5581 width: calc(100% - 39px);
5582 }
5583
5584 .answer-wrap {
5585 margin-top: 6px;
5586 }
5587 }
5588 }
5589
5590 .question-wrap,
5591 .answer-wrap {
5592 input {
5593 margin-right: 8px;
5594 vertical-align: middle;
5595 }
5596
5597 .add,
5598 .remove {
5599 width: 30px;
5600 height: 30px;
5601 display: inline-flex;
5602 vertical-align: middle;
5603 border-radius: 3px;
5604 border: 1px solid $color_gray-lighten;
5605 }
5606
5607 .add {
5608 &:hover {
5609 background: $blue;
5610 border-color: $blue;
5611 }
5612 }
5613
5614 .remove {
5615 &:hover {
5616 background: $red;
5617 border-color: $red;
5618 }
5619 }
5620 }
5621 }
5622
5623 .everest-forms-field-option-payment-multiple,
5624 .everest-forms-field-option-payment-subscription-plan,
5625 .everest-forms-field-option-payment-checkbox {
5626 .everest-forms-field-option-row {
5627 li {
5628 input[type='text']='text'] {
5629 width: 65%;
5630 margin-right: 8px;
5631
5632 &.evf-money-input {
5633 width: 30%;
5634 display: inline-block;
5635 margin: 0 0 0 auto;
5636 // flex: 0 0 23%;
5637 }
5638 }
5639 }
5640 }
5641 }
5642
5643 .everest-forms-field-option-payment-subscription-plan {
5644 .everest-forms-field-option-row {
5645 li {
5646 .evf-subscription-plan-tabs {
5647 margin-top: 8px;
5648 width: 100%;
5649
5650 .evf-spt-strip {
5651 display: flex;
5652 background: #e4e4e66e;
5653 border-radius: 4px;
5654 padding: 2px;
5655 gap: 1px;
5656 margin-bottom: 0;
5657 }
5658
5659 .evf-spt-tab {
5660 flex: 1;
5661 padding: 8px;
5662 text-align: center;
5663 font-size: 13px;
5664 font-weight: 600;
5665 color: #8c8f94;
5666 cursor: pointer;
5667 border-radius: 4px;
5668 display: flex;
5669 align-items: center;
5670 justify-content: center;
5671 gap: 3px;
5672 line-height: 1.2;
5673 transition:
5674 background 0.15s,
5675 color 0.15s,
5676 box-shadow 0.15s;
5677
5678 &.evf-spt-tab--active {
5679 background: #fff;
5680 color: #6c47e8;
5681 box-shadow:
5682 0 1px 3px rgba(0, 0, 0, 0.13),
5683 0 0 0 0.5px rgba(0, 0, 0, 0.06);
5684 }
5685
5686 .evf-spt-dot {
5687 width: 5px;
5688 height: 5px;
5689 border-radius: 50%;
5690 background: #2fb344;
5691 flex-shrink: 0;
5692 display: inline-block;
5693 }
5694 }
5695
5696 .evf-spt-panel {
5697 padding: 10px 0 4px;
5698 }
5699
5700 .evf-spt-always-badge {
5701 display: inline-flex;
5702 align-items: center;
5703 gap: 4px;
5704 font-size: 10px;
5705 font-weight: 600;
5706 background: #ede9fe;
5707 color: #6c47e8;
5708 border-radius: 3px;
5709 padding: 2px 6px;
5710 margin-bottom: 7px;
5711 letter-spacing: 0.2px;
5712 }
5713
5714 .evf-spt-input-row {
5715 display: flex;
5716 gap: 7px;
5717 align-items: center;
5718
5719 input[type='number']='number'] {
5720 width: 62px;
5721 border: 1px solid #dcdcde;
5722 border-radius: 4px;
5723 padding: 5px 7px;
5724 font-size: 13px;
5725 color: #2c3338;
5726 background: #fff;
5727 }
5728
5729 select {
5730 flex: 1;
5731 border: 1px solid #dcdcde;
5732 border-radius: 4px;
5733 padding: 5px 7px;
5734 font-size: 13px;
5735 color: #2c3338;
5736 background: #fff;
5737 line-height: 1.6;
5738 }
5739 }
5740
5741 .evf-spt-toggle-row {
5742 display: flex;
5743 align-items: center;
5744 justify-content: space-between;
5745 margin-bottom: 8px;
5746
5747 .evf-spt-toggle-label {
5748 font-size: 14px;
5749 font-weight: 500;
5750 color: #3c434a;
5751 }
5752 }
5753
5754 .evf-spt-panel-detail {
5755 &.evf-spt-dimmed {
5756 opacity: 0.38;
5757 pointer-events: none;
5758 }
5759 }
5760
5761 .evf-radio-subscription-expiry-input {
5762 width: 100%;
5763 border: 1px solid #dcdcde;
5764 border-radius: 4px;
5765 padding: 5px 8px;
5766 font-size: 13px;
5767 color: #555d66;
5768 background: #fff;
5769 box-sizing: border-box;
5770
5771 &.active {
5772 border-color: #7c5cfd;
5773 box-shadow: 0 0 0 1px #7c5cfd;
5774 }
5775 }
5776
5777 .evf-subscription-expiry-picker-anchor {
5778 .flatpickr-wrapper {
5779 display: block;
5780 width: 100%;
5781 }
5782
5783 .flatpickr-calendar.evf-subscription-expiry-calendar {
5784 position: relative !important;
5785 top: auto !important;
5786 left: auto !important;
5787 right: auto !important;
5788 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
5789 }
5790 }
5791
5792 .evf-expiry-trial-hint {
5793 margin: 6px 0 0;
5794 font-size: 12px;
5795 line-height: 1.4;
5796 color: #646970;
5797 }
5798
5799 .evf-spt-panel--expiry,
5800 .evf-spt-panel-detail {
5801 overflow: visible;
5802 }
5803 }
5804 }
5805 }
5806 }
5807
5808 .evf-content-email-settings-inner {
5809 display: none;
5810 -webkit-animation: fadeIn 0.5s;
5811 animation: fadeIn 0.5s;
5812 margin: 20px 0;
5813 border-radius: 7px;
5814
5815 &.active-connection {
5816 display: block;
5817
5818 &.everest-forms-hidden {
5819 display: none;
5820 }
5821 }
5822 }
5823
5824 .evf-content-sms-notifications-settings-inner {
5825 display: none;
5826 -webkit-animation: fadeIn 0.5s;
5827 animation: fadeIn 0.5s;
5828 margin: 20px 0;
5829 border-radius: 4px;
5830
5831 &.active-connection {
5832 display: block;
5833
5834 &.everest-forms-hidden {
5835 display: none;
5836 }
5837 }
5838 }
5839 }
5840
5841 .evf-registered-item {
5842 z-index: 999;
5843 cursor: pointer;
5844 border-radius: 2px;
5845 font-size: 12px;
5846 text-align: center;
5847 margin: 0;
5848 background: $color-white;
5849 border: 1px solid $color_gray-lighten;
5850 color: $color_gray-normal;
5851
5852 .evf-icon {
5853 color: #6b6b6b;
5854 display: block;
5855 font-size: 24px;
5856 text-align: center;
5857 margin-bottom: 6px;
5858 padding: 0;
5859 }
5860
5861 &.ui-draggable-dragging {
5862 width: calc(100% - 20px) !important;
5863 text-align: center !important;
5864 font-size: 12px !important;
5865 }
5866
5867 &.ui-sortable-placeholder {
5868 width: 100% !important;
5869 }
5870 }
5871
5872 .everest-forms-field.ui-draggable-dragging {
5873 margin: 0;
5874 width: 105px !important;
5875 background: $color-white;
5876 text-align: center;
5877 font-size: 12px !important;
5878
5879 .evf-icon {
5880 color: inherit;
5881 display: block !important;
5882 font-size: 32px !important;
5883 }
5884 }
5885
5886 .evf-confirmation-wrap,
5887 .everest-forms-border-container {
5888 border: 1px solid #e1e1e1;
5889 border-radius: 7px;
5890 padding: 18px 22px 20px;
5891 margin-bottom: 20px;
5892 max-width: 100%;
5893
5894 &:last-child {
5895 margin-bottom: 0;
5896 }
5897
5898 .everest-forms-border-container-title {
5899 // display: inline-block;
5900 color: #222222;
5901 font-size: 18px;
5902 font-weight: 600;
5903 line-height: 140%;
5904 background: transparent;
5905 margin: 0 0 16px;
5906 padding-bottom: 14px;
5907 border-bottom: 1px solid #e9e9e9;
5908 }
5909
5910 label {
5911 margin-bottom: 10px;
5912 margin-top: 2px;
5913
5914 .everest-forms-help-tooltip {
5915 height: 16px;
5916 width: 16px;
5917 line-height: 1;
5918 vertical-align: middle;
5919 }
5920 }
5921
5922 select {
5923 // margin-bottom: 14px;
5924 }
5925
5926 .inline {
5927 margin-top: 0;
5928 padding-left: 0;
5929 }
5930
5931 .input-group-col-2 {
5932 margin-bottom: 15px;
5933
5934 input[type='text']='text'],
5935 input[type='number']='number'],
5936 select {
5937 margin-bottom: 0;
5938 margin-left: 0;
5939 }
5940 }
5941 }
5942
5943 .everest-forms-tab-content {
5944 position: relative;
5945 // height: calc(100vh - 200px);
5946
5947 .everest-forms-add-fields-group {
5948 margin-bottom: 36px;
5949
5950 &.closed {
5951 margin-bottom: 0;
5952 }
5953 }
5954
5955 .everest-forms-notice {
5956 display: inline-block;
5957 }
5958 }
5959
5960 .everest-forms-panel {
5961 .panel-wrap {
5962 overflow: hidden;
5963 }
5964
5965 .wp-picker-input-wrap {
5966 label {
5967 font-weight: 400;
5968 display: inline-block;
5969 }
5970 }
5971 }
5972
5973 .everest-forms-panel-content-wrap {
5974 .everest-forms-panel-content {
5975 position: relative;
5976 padding: 30px;
5977 background: #f6f7f9;
5978 height: calc(100vh - 105px);
5979 overflow-x: hidden !important;
5980
5981 @media screen and (max-width: 1226px) {
5982 height: calc(100vh - 180px);
5983 }
5984
5985 /* width */
5986 &::-webkit-scrollbar {
5987 width: 6px;
5988 }
5989
5990 /* Track */
5991 &::-webkit-scrollbar-track {
5992 box-shadow: inset 0 0 5px rgb(158, 158, 158);
5993 border-radius: 10px;
5994 }
5995
5996 /* Handle */
5997 &::-webkit-scrollbar-thumb {
5998 background: rgb(93, 93, 93);
5999 border-radius: 10px;
6000 }
6001
6002 /* Handle on hover */
6003 &::-webkit-scrollbar-thumb:hover {
6004 background: #454545;
6005 }
6006
6007 .everest-forms-preview-wrap {
6008 background: #ffffff;
6009 padding: 28px 32px;
6010 border-radius: 13px;
6011 border: 1px solid #e1e1e1;
6012 }
6013
6014 .evf-content-sms-notifications-settings {
6015 .evf-content-sms-notifications-settings-inner {
6016 padding: 20px 20px 0;
6017 border: 1px solid $color_gray-lighten;
6018
6019 .everest-forms-sms-notfications-name {
6020 background: $color_gray-light-skin;
6021 margin-left: -20px;
6022 margin-top: -20px;
6023 margin-right: -20px;
6024 padding: 20px;
6025 border-radius: 4px 4px 0 0;
6026 border-bottom: 1px solid $color_gray-lighten;
6027
6028 input[type='text']='text'] {
6029 font-weight: 600;
6030 }
6031
6032 .everest-forms-text-danger {
6033 margin: 10px 0 0;
6034 }
6035 }
6036 }
6037 }
6038
6039 .evf-content-email-settings {
6040 .evf-content-email-settings-inner {
6041 // padding: 20px 20px 0;
6042 padding: 18px 22px 24px;
6043 // border: 1px solid $color_gray-lighten;
6044 border: 1px solid #e2e2e2;
6045 max-width: 100%;
6046
6047 .everest-forms-email-name {
6048 background: transparent;
6049 // margin-left: -20px;
6050 // margin-top: -20px;
6051 // margin-right: -20px;
6052 // padding: 20px;
6053 padding: 0;
6054 border-radius: 4px 4px 0 0;
6055 // border-bottom: 1px solid $color_gray-lighten;
6056 border-bottom: 1px solid #e2e2e2;
6057 margin-bottom: 20px;
6058
6059 input[type='text']='text'] {
6060 font-weight: 600;
6061 border: 0;
6062 padding: 0;
6063 font-size: 18px;
6064 line-height: 140%;
6065 color: #222;
6066 padding-bottom: 14px;
6067 }
6068
6069 .everest-forms-text-danger {
6070 margin: 10px 0 0;
6071 }
6072 }
6073 }
6074 }
6075
6076 .evf-content-post-submissions-settings,
6077 .everest-forms-settings {
6078 .everest-forms-panel-field {
6079 max-width: 500px;
6080 }
6081 }
6082
6083 .everest-forms-title-desc {
6084 display: inline-flex;
6085 align-items: center;
6086 flex-direction: row;
6087 position: relative;
6088 width: 100%;
6089 max-width: 100%;
6090 margin-bottom: 32px;
6091 width: 100%;
6092
6093 .evf-icon {
6094 display: flex;
6095 align-items: center;
6096 justify-content: center;
6097 width: 38px;
6098 height: 38px;
6099 cursor: pointer;
6100 border-radius: 3px;
6101 color: #7545bb;
6102 background: #f6f3fa;
6103 order: -1;
6104
6105 &::after {
6106 content: '';
6107 border-radius: 3px;
6108 position: absolute;
6109 left: 32px;
6110 right: 0;
6111 height: 30px;
6112 border-radius: 0 3px 3px 0;
6113 transition: all 0.3s ease 0s;
6114 }
6115 }
6116
6117 .everest-forms-name-input {
6118 font-size: 20px;
6119 font-weight: 400;
6120 height: 38px;
6121 border: none;
6122 margin: 0;
6123 box-shadow: none;
6124 pointer-events: none;
6125 background: none;
6126 z-index: 1;
6127 padding: 0 12px;
6128 min-width: 0;
6129 max-width: calc(100% - 38px);
6130
6131 &.everst-forms-name-editing {
6132 flex: 1 1 auto;
6133 width: calc(100% - 38px);
6134 pointer-events: all;
6135
6136 & + .evf-icon {
6137 background: $everestforms;
6138 color: $color-white;
6139 border-radius: 4px 0 0 4px;
6140
6141 &::after {
6142 top: 0;
6143 right: 0;
6144 border: 1px solid $everestforms;
6145 height: 36px;
6146 }
6147 }
6148 }
6149
6150 &:focus {
6151 box-shadow: none;
6152 }
6153 }
6154 }
6155
6156 .evf-admin-field-wrapper {
6157 cursor: move;
6158 position: relative;
6159 gap: 20px;
6160
6161 .evf-sortable-placeholder {
6162 background: transparentize($green, 0.95);
6163 border: 1px dashed transparentize($green, 0.75);
6164 }
6165 }
6166
6167 .evf-add-row {
6168 margin: 20px auto 0;
6169 text-align: center;
6170
6171 span {
6172 // width: auto;
6173 height: auto;
6174 // font-size: 13px;
6175 // background: #51cf66;
6176 font-family: inherit;
6177 padding: 8px 16px 8px 14px;
6178 display: flex;
6179 align-items: center;
6180 justify-content: center;
6181 width: max-content;
6182 margin: 0 auto;
6183 gap: 6px;
6184 font-size: 14px;
6185 background: #7545bb;
6186 transition: all 0.3s ease-in-out;
6187
6188 &.dashicons {
6189 &::before {
6190 // width: 20px;
6191 // height: 20px;
6192 // line-height: 1;
6193 font-size: 16px;
6194 // margin-right: 10px;
6195 font-family: dashicons;
6196 vertical-align: middle;
6197 // padding: 2px 12px 2px 0;
6198 // border-right: 1px solid
6199 // transparentize($color-white, 0.7);
6200 width: auto;
6201 height: auto;
6202 margin: 0;
6203 padding: 0;
6204 border-right: 0;
6205 }
6206 }
6207
6208 &:hover {
6209 // background: #33ba4a;
6210 background: #8d2fff;
6211 }
6212 }
6213 }
6214
6215 .evf-add-row-repeater {
6216 margin: 20px auto;
6217 text-align: left;
6218 pointer-events: none;
6219
6220 span {
6221 width: auto;
6222 height: auto;
6223 padding: 10px;
6224 font-size: 13px;
6225 background: #51cf66;
6226 color: $color-white;
6227 font-family: inherit;
6228
6229 &.dashicons {
6230 &::before {
6231 width: 20px;
6232 height: 20px;
6233 line-height: 1;
6234 font-size: 16px;
6235 margin: 0 10px 0 10px;
6236 font-family: dashicons;
6237 text-align: center;
6238 vertical-align: middle;
6239 padding: 10px;
6240 cursor: text;
6241 border-right: none;
6242 }
6243 }
6244
6245 &:hover {
6246 background: #33ba4a;
6247 }
6248 }
6249 }
6250 }
6251 }
6252
6253 .everest-forms-fields-tab {
6254 display: flex;
6255 flex-wrap: wrap;
6256
6257 a {
6258 width: 50%;
6259 display: block;
6260 padding: 12px 0 16px;
6261 font-size: 14px;
6262 line-height: 150%;
6263 font-weight: 500;
6264 text-align: center;
6265 color: $color_gray-dark;
6266 background: #f6f7f9;
6267 border-top: 3px solid transparent;
6268 transition: all 0.3s ease-in-out;
6269 // border-bottom: 1px solid $color_gray-lighten;
6270
6271 &.active {
6272 background: $color-white;
6273 color: #7545bb;
6274 border-top-color: #7545bb;
6275 }
6276
6277 &:hover {
6278 color: #7545bb;
6279 }
6280 }
6281 }
6282
6283 .everest-forms-panel-sidebar {
6284 .everest-forms-add-fields,
6285 .everest-forms-field-options {
6286 background: #ffff;
6287 padding: 16px 14px;
6288 }
6289
6290 .everest-forms-add-fields {
6291 .everest-forms-input-group {
6292 margin-bottom: 26px !important;
6293 }
6294 }
6295 }
6296
6297 .evf-range-slider-reset-icon {
6298 width: 16px;
6299 height: 16px;
6300 font-size: 16px;
6301 cursor: pointer;
6302 margin-left: 10px;
6303 color: $color_gray-light;
6304 transition: all 0.2s ease 0s;
6305 }
6306
6307 .everest-forms-field {
6308 &.everest-forms-field-image-upload {
6309 .everest-forms-uploader {
6310 display: flex;
6311 flex-direction: column;
6312 align-items: center;
6313 padding: 20px;
6314 border-radius: 4px;
6315 border: 1px dashed $color_gray-lighten;
6316
6317 svg {
6318 margin-bottom: 10px;
6319 background: $color_gray-light-skin;
6320 height: 48px;
6321 width: 48px;
6322 padding: 8px;
6323 border-radius: 4px;
6324 }
6325
6326 span {
6327 display: block;
6328 font-size: 14px;
6329
6330 &.everest-forms-upload-title {
6331 margin-bottom: 5px;
6332 }
6333
6334 &.everest-forms-upload-hint {
6335 color: $color_gray-light;
6336 }
6337 }
6338 }
6339
6340 input {
6341 display: none;
6342 }
6343
6344 &.active {
6345 svg {
6346 background: darken($color_gray-light-skin, 5%);
6347 }
6348 }
6349 }
6350 }
6351 }
6352 }
6353
6354 /**
6355 * Settings styling.
6356 **/
6357 .everest-forms {
6358 h2.evf-nav-tab-wrapper {
6359 margin-bottom: 1em;
6360 }
6361
6362 nav.evf-nav-tab-wrapper {
6363 margin: 1.5em 0 1em;
6364 }
6365
6366 .subsubsub {
6367 margin: -8px 0 0;
6368 }
6369
6370 .evf-admin-breadcrumb {
6371 margin-left: 0.5em;
6372
6373 a {
6374 color: #a46497;
6375 }
6376 }
6377
6378 #template div {
6379 margin: 0;
6380
6381 p .button {
6382 float: right;
6383 margin-left: 10px;
6384 margin-top: -4px;
6385 }
6386
6387 .editor textarea {
6388 margin-bottom: 8px;
6389 }
6390 }
6391
6392 textarea[disabled='disabled']='disabled'] {
6393 background: #dfdfdf !important;
6394 }
6395
6396 table.form-table {
6397 margin: 0;
6398 position: relative;
6399 table-layout: fixed;
6400
6401 .forminp-radio {
6402 ul {
6403 margin: 0;
6404
6405 li {
6406 line-height: 1.4em;
6407 }
6408
6409 &.everest-forms-recaptcha-type {
6410 display: flex;
6411
6412 li {
6413 margin-right: 15px;
6414 margin-bottom: 0;
6415
6416 label {
6417 margin-bottom: 0 !important;
6418 margin-top: 5px !important;
6419 }
6420 }
6421 }
6422 }
6423 }
6424
6425 input[type='text']='text'],
6426 input[type='number']='number'],
6427 input[type='email']='email'] {
6428 height: auto;
6429 }
6430
6431 textarea.input-text {
6432 height: 100%;
6433 min-width: 150px;
6434 display: block;
6435 }
6436
6437 // Give regular settings inputs a standard width and padding.
6438 textarea,
6439 input[type='text']='text'],
6440 input[type='email']='email'],
6441 input[type='number']='number'],
6442 input[type='password']='password'],
6443 input[type='datetime']='datetime'],
6444 input[type='datetime-local']='datetime-local'],
6445 input[type='date']='date'],
6446 input[type='time']='time'],
6447 input[type='week']='week'],
6448 input[type='url']='url'],
6449 input[type='tel']='tel'],
6450 input.regular-input {
6451 margin: 0;
6452 padding: 0 8px;
6453 width: 350px;
6454 box-sizing: border-box;
6455 vertical-align: top;
6456
6457 @media only screen and (max-width: 782px) {
6458 width: 100%;
6459 }
6460 }
6461
6462 input[type='datetime-local']='datetime-local'],
6463 input[type='date']='date'],
6464 input[type='time']='time'],
6465 input[type='week']='week'],
6466 input[type='tel']='tel'] {
6467 width: 200px;
6468 }
6469
6470 select {
6471 width: 350px;
6472 margin: 0;
6473 box-sizing: border-box;
6474 height: 32px;
6475 vertical-align: top;
6476
6477 @media only screen and (max-width: 782px) {
6478 width: 100%;
6479 }
6480 }
6481
6482 input[size]] {
6483 width: auto !important;
6484 }
6485
6486 // Ignore nested inputs.
6487 table {
6488 select,
6489 textarea,
6490 input[type='text']='text'],
6491 input[type='email']='email'],
6492 input[type='number']='number'],
6493 input.regular-input {
6494 width: auto;
6495 }
6496 }
6497
6498 textarea.wide-input {
6499 width: 100%;
6500 }
6501
6502 img.help_tip,
6503 .everest-forms-help-tip {
6504 padding: 0;
6505 margin: -4px 0 0 5px;
6506 vertical-align: middle;
6507 cursor: help;
6508 line-height: 1;
6509 }
6510
6511 span.help_tip {
6512 cursor: help;
6513 color: $blue;
6514 }
6515
6516 th {
6517 width: 270px;
6518 position: relative;
6519 padding-right: 24px;
6520 }
6521
6522 th label {
6523 position: relative;
6524 display: block;
6525
6526 img.help_tip,
6527 .everest-forms-help-tip {
6528 margin: -7px -24px 0 0;
6529 position: absolute;
6530 right: 0;
6531 top: 50%;
6532
6533 @media only screen and (max-width: 782px) {
6534 right: auto;
6535 margin-left: 5px;
6536 }
6537 }
6538 }
6539
6540 th label,
6541 th.titledesc {
6542 color: $color_gray-base;
6543 }
6544
6545 th label + .everest-forms-help-tip {
6546 position: absolute;
6547 margin: 0;
6548 right: 0;
6549 top: 20px;
6550 }
6551
6552 td.everest-forms-permissions {
6553 display: flex;
6554 flex-wrap: wrap;
6555 align-items: flex-end;
6556
6557 fieldset {
6558 padding: 0 20px;
6559
6560 label {
6561 position: relative;
6562 display: block;
6563 font-weight: 600;
6564 }
6565 }
6566 }
6567
6568 .select2-container {
6569 vertical-align: top;
6570 margin-bottom: 3px;
6571 }
6572
6573 table.widefat th {
6574 padding-right: inherit;
6575 }
6576
6577 .wp-list-table .everest-forms-help-tip {
6578 float: none;
6579 }
6580
6581 fieldset {
6582 margin-top: 4px;
6583
6584 img.help_tip,
6585 .everest-forms-help-tip {
6586 margin: -3px 0 0 5px;
6587 }
6588
6589 p.description {
6590 margin-bottom: 8px;
6591 }
6592
6593 &:first-child {
6594 margin-top: 0;
6595 }
6596 }
6597
6598 .iris-picker {
6599 z-index: 100;
6600 display: none;
6601 position: absolute;
6602 border: 1px solid #ccc;
6603 border-radius: 3px;
6604 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
6605
6606 .ui-slider {
6607 border: 0 !important;
6608 margin: 0 !important;
6609 width: auto !important;
6610 height: auto !important;
6611 background: none transparent !important;
6612
6613 .ui-slider-handle {
6614 margin-bottom: 0 !important;
6615 }
6616 }
6617 }
6618
6619 .forminp-color {
6620 font-size: 0;
6621 }
6622
6623 .iris-error {
6624 background: #ffafaf;
6625 }
6626
6627 .colorpickpreview {
6628 padding: 0;
6629 width: 30px;
6630 height: 30px;
6631 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
6632 font-size: 16px;
6633 border-radius: 4px;
6634 margin-right: 3px;
6635
6636 @media only screen and (max-width: 782px) {
6637 float: left;
6638 width: 40px;
6639 height: 40px;
6640 }
6641 }
6642 }
6643
6644 .everest-forms-save-button {
6645 box-shadow: none;
6646 text-shadow: none;
6647 transition: 0.25s all ease-in-out;
6648 }
6649
6650 .everest-forms-integrations-connection {
6651 a {
6652 text-decoration: none;
6653 }
6654
6655 .everest-forms-integrations {
6656 border-radius: 3px;
6657 border: 1px solid #e1e1e1;
6658 padding: 16px 20px;
6659 display: flex;
6660 flex-wrap: wrap;
6661 align-items: center;
6662 justify-content: space-between;
6663 margin-bottom: 10px;
6664
6665 &[data-action='upgrade']='upgrade'] {
6666 opacity: 0.4;
6667 }
6668
6669 .integration-header-info {
6670 display: flex;
6671 flex: 1;
6672 align-items: center;
6673 gap: 16px;
6674
6675 .integration-status {
6676 position: relative;
6677
6678 .toggle-switch-outer {
6679 width: 20px;
6680 height: 20px;
6681 display: block;
6682 position: relative;
6683 border-radius: 3px;
6684 border: 1px solid #ced4da;
6685
6686 &.connected {
6687 border-color: $green;
6688
6689 &::before {
6690 background: $green;
6691 }
6692 }
6693
6694 &::before {
6695 left: 0;
6696 top: 50%;
6697 right: 0;
6698 content: '';
6699 width: 10px;
6700 height: 10px;
6701 display: block;
6702 margin: 0 auto;
6703 border-radius: 2px;
6704 position: absolute;
6705 background: #ced4da;
6706 transform: translateY(-50%);
6707 }
6708 }
6709 }
6710
6711 .integration-detail {
6712 display: flex;
6713 align-items: center;
6714 gap: 16px;
6715
6716 .logo {
6717 width: 50px;
6718 height: 50px;
6719 flex: 0 0 50px;
6720 display: flex;
6721 overflow: hidden;
6722 align-items: center;
6723 padding: 2px;
6724 border-radius: 2px;
6725 border: 1px solid #edeff7;
6726 background: #ffffff;
6727 margin: 0;
6728
6729 img {
6730 width: 100%;
6731 display: block;
6732 }
6733 }
6734
6735 .integration-info {
6736 a {
6737 display: inline-block;
6738
6739 &:hover h3 {
6740 color: $everestforms;
6741 }
6742
6743 &:focus {
6744 box-shadow: none;
6745 }
6746 }
6747
6748 h3,
6749 p {
6750 margin-top: 0;
6751 margin-bottom: 0;
6752 }
6753 }
6754 }
6755 }
6756
6757 .integartion-action {
6758 flex-wrap: wrap;
6759 display: flex;
6760 align-items: center;
6761
6762 .toggle-button {
6763 margin-right: 20px;
6764
6765 .slide {
6766 display: block;
6767 height: 22px;
6768 cursor: pointer;
6769 width: 44px;
6770 position: relative;
6771
6772 &.inactive,
6773 &.active {
6774 border-radius: 34px;
6775
6776 &::before {
6777 border-radius: 50%;
6778 position: absolute;
6779 content: '';
6780 height: 18px;
6781 width: 18px;
6782 bottom: 2px;
6783 background: $color-white;
6784 -webkit-transition: 0.4s;
6785 transition: 0.4s;
6786 }
6787 }
6788
6789 &.inactive {
6790 background: #ced4da;
6791
6792 &::before {
6793 left: 2px;
6794 }
6795 }
6796
6797 &.active {
6798 background: $everestforms;
6799
6800 &::before {
6801 right: 2px;
6802 }
6803 }
6804 }
6805 }
6806
6807 .integration-setup {
6808 width: 35px;
6809 height: 35px;
6810 display: block;
6811 font-size: 16px;
6812 color: #78818a;
6813 position: relative;
6814 border-radius: 3px;
6815 border: 1px solid #ced4da;
6816 transition: all 0.25s;
6817
6818 .evf-icon-setting-cog {
6819 position: absolute;
6820 top: 50%;
6821 transform: translateY(-50%);
6822 width: 100%;
6823 text-align: center;
6824
6825 &::before {
6826 content: '\e92e';
6827 }
6828 }
6829
6830 &:hover {
6831 color: $everestforms;
6832 border-color: $everestforms;
6833 }
6834 }
6835 }
6836 }
6837 }
6838
6839 .evf-connection-form {
6840 input {
6841 width: 100%;
6842 margin-right: 15px;
6843 margin-bottom: 15px;
6844
6845 @media screen and (min-width: 1200px) {
6846 width: calc(33% - 20px);
6847 }
6848 }
6849 }
6850
6851 .everest-forms-integration-content {
6852 display: flex;
6853 background: $color-white;
6854 border: 1px solid #ced4da;
6855
6856 .integration-addon-detail {
6857 width: 400px;
6858 padding: 20px;
6859 border-right: 1px solid #ced4da;
6860
6861 .evf-integration-info-header {
6862 display: flex;
6863 align-items: center;
6864 }
6865
6866 .evf-integration-logo {
6867 width: 60px;
6868 height: 60px;
6869 padding: 10px;
6870 display: flex;
6871 align-items: center;
6872 flex: 0 0 60px;
6873 margin: 0 20px 0 0;
6874 border-radius: 3px;
6875 border: 1px solid #ced4da;
6876
6877 img {
6878 width: 100%;
6879 }
6880 }
6881
6882 .integration-info {
6883 h3 {
6884 margin-top: 0;
6885 margin-bottom: 5px;
6886 }
6887
6888 .toggle-switch {
6889 &.connected {
6890 display: block;
6891 padding-left: 15px;
6892 position: relative;
6893
6894 &::before {
6895 left: 0;
6896 top: 50%;
6897 content: '';
6898 width: 10px;
6899 height: 10px;
6900 display: block;
6901 position: absolute;
6902 background: $green;
6903 border-radius: 50%;
6904 transform: translateY(-50%);
6905 }
6906 }
6907 }
6908 }
6909 }
6910
6911 .integration-connection-detail {
6912 padding: 20px;
6913 width: calc(100% - 400px);
6914
6915 .evf-account-connect {
6916 margin-bottom: 20px;
6917
6918 h3 {
6919 margin-top: 0;
6920 }
6921
6922 .everest-forms-btn {
6923 .evf-loading {
6924 width: 14px;
6925 height: 14px;
6926 background-size: 14px 14px;
6927 margin: 2px 0 0 5px;
6928 }
6929 }
6930 }
6931
6932 .evf-connection-list {
6933 table.evf-connection-list-table {
6934 width: 100%;
6935 border-spacing: 0;
6936 border-collapse: collapse;
6937 border: 1px solid #ced4da;
6938
6939 tr {
6940 td {
6941 padding: 10px 20px;
6942 border-bottom: 1px solid #ced4da;
6943
6944 &:last-child {
6945 text-align: right;
6946 }
6947
6948 .disconnect {
6949 color: $red;
6950 position: relative;
6951 display: inline-block;
6952 padding-left: 15px;
6953
6954 &::before {
6955 display: block;
6956 content: '';
6957 position: absolute;
6958 height: 10px;
6959 width: 10px;
6960 background: $red;
6961 top: 50%;
6962 transform: translateY(-50%);
6963 left: 0;
6964 border-radius: 50%;
6965 }
6966 }
6967 }
6968
6969 &:last-child {
6970 td {
6971 border-bottom: none;
6972 }
6973 }
6974 }
6975 }
6976 }
6977 }
6978 }
6979 }
6980
6981 /**
6982 * Import and Export
6983 */
6984 .evf-tools-export-entries,
6985 .everest-forms-import-form,
6986 .everest-forms-import-entries-wrapper,
6987 .everest-forms-export-form,
6988 .everest-forms-form-migrator {
6989 background: $color-white;
6990 max-width: 100%;
6991 padding: 20px;
6992 margin-top: 20px;
6993 box-shadow: 1px 3px 10px transparentize($color_gray-base, 0.95);
6994 border-radius: 4px;
6995
6996 h3 {
6997 margin: 0;
6998 font-size: 20px;
6999 padding-bottom: 16px;
7000 border-bottom: 2px solid $color_gray-more-lighten;
7001 }
7002
7003 p {
7004 font-size: 14px;
7005 }
7006
7007 select {
7008 margin: 1em 0;
7009 }
7010
7011 .evf-fm-select-popular-form {
7012 display: flex;
7013 align-items: center;
7014
7015 select {
7016 margin: 0;
7017 }
7018
7019 .evf-loading {
7020 margin: 0 0 0 10px;
7021 }
7022
7023 .select2-container .dropdown-wrapper[aria-hidden='true']='true'] {
7024 display: none;
7025 }
7026 }
7027
7028 .description {
7029 margin-bottom: 16px;
7030
7031 .dashicons {
7032 width: 16px;
7033 height: 16px;
7034 font-size: 16px;
7035 vertical-align: middle;
7036 margin-right: 2px;
7037 margin-bottom: 3px;
7038 }
7039 }
7040
7041 .everest-forms-file-upload {
7042 margin: 1em 0;
7043 position: relative;
7044 z-index: 1;
7045
7046 input {
7047 opacity: 0;
7048 z-index: 2;
7049 width: 400px;
7050 height: 46px;
7051 }
7052
7053 label {
7054 display: inline-block;
7055 padding: 4px;
7056 min-width: 400px;
7057 position: absolute;
7058 left: 0;
7059 border-radius: 4px;
7060 border: 1px solid $color_gray-lighten;
7061 z-index: -1;
7062 }
7063
7064 .everest-forms-btn {
7065 width: auto;
7066 height: auto;
7067 font-size: 13px;
7068 margin-right: 10px;
7069 vertical-align: middle;
7070 }
7071 }
7072
7073 .publishing-action {
7074 padding-top: 20px;
7075 text-align: right;
7076 border-top: 2px solid $color_gray-more-lighten;
7077 }
7078
7079 .evf-fm-wrapper {
7080 .evf-fm-form-list-container {
7081 .evf-fm-forms-table-wrapper {
7082 h4 {
7083 margin: 0;
7084 font-size: 16px;
7085 padding-top: 16px;
7086 padding-bottom: 16px;
7087 }
7088
7089 table,
7090 th,
7091 td {
7092 border-collapse: collapse;
7093 }
7094
7095 table {
7096 tr {
7097 border-bottom: 2px solid #e9ebf1;
7098
7099 &.evf-fm-hide-row {
7100 display: none;
7101 }
7102
7103 &.evf-fm-show-row {
7104 display: none;
7105 }
7106
7107 th {
7108 width: 150px;
7109 padding: 12px;
7110 }
7111
7112 td {
7113 .evf-fm-import-actions {
7114 display: flex;
7115 align-items: center;
7116 }
7117
7118 width: 600px;
7119 padding: 12px;
7120 text-align: center;
7121
7122 .evf-fm-import-single {
7123 padding: 8px;
7124 background: #e9ebf1;
7125 border-radius: 4px;
7126 border: none;
7127
7128 &:hover {
7129 background: #7e3bd0;
7130 color: #fff;
7131 border: none;
7132 cursor: pointer;
7133 }
7134 }
7135
7136 .evf-fm-import-entry {
7137 padding: 8px;
7138 background: #b5facd;
7139 border-radius: 4px;
7140 border: none;
7141 display: inline;
7142 margin-left: 8px;
7143
7144 &:not(:disabled):hover {
7145 background: #7e3bd0;
7146 color: #fff;
7147 border: none;
7148 cursor: pointer;
7149 }
7150 }
7151 }
7152 }
7153 }
7154
7155 .evf-fm-pagination {
7156 padding-top: 16px;
7157 display: flex;
7158 flex-direction: row;
7159 align-items: center;
7160 gap: 4px;
7161
7162 button {
7163 margin: 2px;
7164 cursor: pointer;
7165 border: 1px solid #ddd;
7166 background: #fff;
7167 color: #555;
7168 padding: 4px 10px;
7169 border-radius: 3px;
7170 min-width: 30px;
7171
7172 &:hover {
7173 background: #7e3bd0;
7174 color: #fff;
7175 border-color: #7e3bd0;
7176 }
7177
7178 &.evf-fm-btn-active {
7179 background: #7e3bd0;
7180 color: #fff;
7181 border-color: #7e3bd0;
7182 }
7183 }
7184 }
7185
7186 .evf-fm-import-selected-wrapper {
7187 display: flex;
7188 flex-direction: row;
7189 align-items: center;
7190 margin-left: 15px;
7191 margin-right: 100px;
7192
7193 .evf-fm-pagination {
7194 margin-left: auto;
7195 }
7196 }
7197
7198 .evf-fm-import-selected-btn {
7199 margin-top: 16px;
7200 padding: 8px;
7201 background: #e9ebf1;
7202 border-radius: 4px;
7203 border: none;
7204
7205 &:hover {
7206 background: #7e3bd0;
7207 color: #fff;
7208 border: none;
7209 cursor: pointer;
7210 }
7211 }
7212 }
7213 }
7214 }
7215 }
7216
7217 /**
7218 * List Table.
7219 */
7220 table.wp-list-table {
7221 span.na {
7222 color: #999;
7223 }
7224
7225 .row-actions {
7226 color: #999;
7227 }
7228
7229 .column-title {
7230 width: 25% !important;
7231
7232 .locate-form {
7233 margin: 2px 0 0;
7234 font-size: 11px;
7235 color: #666;
7236 }
7237 }
7238
7239 .column-tags {
7240 width: 12%;
7241 }
7242
7243 .column-shortcode {
7244 width: 25%;
7245 }
7246
7247 .column-enabled {
7248 width: 10%;
7249 padding-left: 32px !important;
7250 }
7251
7252 .column-date {
7253 width: 10%;
7254 }
7255
7256 .column-author {
7257 width: 10%;
7258 }
7259
7260 .column-entries {
7261 width: 8%;
7262 }
7263
7264 .column-actions {
7265 width: 25%;
7266 }
7267
7268 .column-status img {
7269 height: 12px;
7270 margin-left: 5px;
7271 margin-bottom: -2px;
7272 }
7273
7274 img.attachment-thumbnail {
7275 height: 40px;
7276 }
7277
7278 .submitdelete {
7279 border: none;
7280
7281 &:hover {
7282 color: #a00;
7283 border: none;
7284 }
7285
7286 &:focus {
7287 color: #b91c1c;
7288 outline: none;
7289 box-shadow: none;
7290 border: none;
7291 }
7292 }
7293
7294 .new-entries-notification td {
7295 padding: 0;
7296 text-align: center;
7297
7298 a {
7299 padding: 10px;
7300 box-shadow: none;
7301 background: lighten(#0095ff, 45%);
7302 }
7303 }
7304
7305 .column-tags {
7306 .evf-form-tags {
7307 border: none;
7308 background: none;
7309 padding: 0 8px;
7310 color: #7545bb;
7311 // border: 1px solid #7545bb;
7312 line-height: 16px;
7313 min-height: unset;
7314 vertical-align: middle;
7315 margin-bottom: 6px;
7316 font-size: 13px;
7317 text-decoration: none;
7318 text-align: center;
7319
7320 &::before {
7321 margin-right: 3px;
7322 content: '#';
7323 }
7324
7325 &:hover {
7326 text-decoration: underline;
7327 }
7328 }
7329 }
7330 }
7331
7332 /**
7333 * Entry viewer.
7334 **/
7335 .everest-forms-entry {
7336 .postbox {
7337 .inside {
7338 padding: 6px 0 0;
7339
7340 p {
7341 margin: 0;
7342 padding: 6px 10px 8px;
7343 }
7344 }
7345
7346 .submitdelete {
7347 color: #a00;
7348 padding: 1px 2px;
7349 text-decoration: none;
7350
7351 &:focus {
7352 color: #b91c1c;
7353 outline: none;
7354 box-shadow: none;
7355 border: none;
7356 }
7357 }
7358 }
7359
7360 #poststuff {
7361 #everest-forms-entry-fields,
7362 #everest-forms-entry-details,
7363 #everest-forms-entry-actions,
7364 #everest-forms-entry-payment {
7365 h2.hndle {
7366 cursor: inherit;
7367
7368 .dashicons {
7369 width: 16px;
7370 height: 16px;
7371 font-size: 16px;
7372 margin: 1px 2px 0 4px;
7373 }
7374 }
7375
7376 .inside {
7377 margin: 0;
7378 padding: 0;
7379
7380 .everest-forms-edit-entry-field {
7381 .evf-field {
7382 input[type='text']='text'],
7383 input[type='date']='date'],
7384 input[type='date']='date'],
7385 input[type='datetime-local']='datetime-local'],
7386 input[type='email']='email'],
7387 input[type='file']='file'],
7388 input[type='image']='image'],
7389 input[type='month']='month'],
7390 input[type='number']='number'],
7391 input[type='password']='password'],
7392 input[type='range']='range'],
7393 input[type='search']='search'],
7394 input[type='tel']='tel'],
7395 input[type='time']='time'],
7396 input[type='url']='url'],
7397 input[type='week']='week'],
7398 select,
7399 .StripeElement,
7400 canvas.evf-signature-canvas {
7401 padding: 0 8px;
7402 margin-bottom: 0;
7403 }
7404
7405 textarea {
7406 width: 100%;
7407 max-width: 100%;
7408 min-width: 100%;
7409 height: 120px;
7410 }
7411
7412 ul {
7413 li {
7414 margin: 0;
7415 display: block;
7416
7417 label,
7418 input {
7419 margin: 0;
7420 }
7421
7422 input[type='radio']='radio'],
7423 input[type='checkbox']='checkbox'] {
7424 margin-top: 4px;
7425 margin-right: 8px;
7426 }
7427 }
7428 }
7429 }
7430
7431 .evf-field-radio ul,
7432 .evf-field-checkbox ul,
7433 .evf-field-payment-radio ul,
7434 .evf-field-payment-checkbox ul {
7435 margin: 0;
7436
7437 li {
7438 display: flex;
7439 margin-bottom: 5px;
7440 }
7441 }
7442
7443 label.evf-error {
7444 cursor: default;
7445 color: #900;
7446 margin: 5px 0 0 0;
7447 }
7448
7449 abbr.required {
7450 color: #fa5252;
7451 font-weight: 700;
7452 border: 0 !important;
7453 text-decoration: none;
7454 vertical-align: middle;
7455 }
7456 }
7457
7458 .everest-forms-entry-details-meta,
7459 .everest-forms-entry-actions-meta,
7460 .everest-forms-entry-payment-meta {
7461 padding: 6px 0 0;
7462
7463 p {
7464 margin: 0;
7465 padding: 6px 10px 8px;
7466 }
7467
7468 .dashicons {
7469 top: 0;
7470 left: -2px;
7471 position: relative;
7472 padding: 0 2px 0 0;
7473 color: $color_gray-light;
7474 text-decoration: none;
7475 }
7476 }
7477
7478 .everest-forms-entry-actions-meta a {
7479 box-shadow: none;
7480 text-decoration: none;
7481 }
7482
7483 #major-publishing-actions {
7484 outline: inherit;
7485
7486 a.button-secondary {
7487 margin-left: 5px;
7488 }
7489 }
7490 }
7491 }
7492
7493 #evf-entry-nav-buttons {
7494 padding: 5px 10px;
7495
7496 #evf-next-entry-button {
7497 float: right;
7498 }
7499 }
7500
7501 #everest-forms-entry-fields {
7502 .inside {
7503 table {
7504 border: none;
7505
7506 td a:focus {
7507 box-shadow: none;
7508 }
7509 }
7510
7511 span.list {
7512 display: block;
7513 }
7514
7515 img.attachment-thumbnail {
7516 height: 150px;
7517 }
7518 }
7519
7520 .everest-forms-empty-field-toggle {
7521 float: right;
7522 padding: 3px 0 0;
7523 text-decoration: none;
7524 }
7525 }
7526 }
7527 }
7528
7529 /**
7530 * DB log viewer.
7531 **/
7532 .wp-list-table.logs {
7533 .log-level {
7534 display: inline;
7535 padding: 0.2em 0.6em 0.3em;
7536 font-size: 80%;
7537 font-weight: bold;
7538 line-height: 1;
7539 color: $color-white;
7540 text-align: center;
7541 white-space: nowrap;
7542 vertical-align: baseline;
7543 border-radius: 0.2em;
7544
7545 &:empty {
7546 display: none;
7547 }
7548 }
7549
7550 /**
7551 * Add color to levels
7552 *
7553 * Descending severity:
7554 * emergency, alert -> red
7555 * critical, error -> orange
7556 * warning, notice -> yellow
7557 * info -> blue
7558 * debug -> green
7559 */
7560 .log-level--emergency,
7561 .log-level--alert {
7562 background: #ff4136;
7563 }
7564
7565 .log-level--critical,
7566 .log-level--error {
7567 background: #ff851b;
7568 }
7569
7570 .log-level--warning,
7571 .log-level--notice {
7572 color: #222;
7573 background: #ffdc00;
7574 }
7575
7576 .log-level--info {
7577 background: #0074d9;
7578 }
7579
7580 .log-level--debug {
7581 background: #3d9970;
7582 }
7583
7584 // Adjust log table columns only when table is not collapsed.
7585 @media screen and (min-width: 783px) {
7586 .column-timestamp {
7587 width: 18%;
7588 }
7589
7590 .column-level {
7591 width: 14%;
7592 }
7593
7594 .column-source {
7595 width: 15%;
7596 }
7597 }
7598 }
7599
7600 #log-viewer-select {
7601 padding: 10px 0 8px;
7602 line-height: 28px;
7603
7604 h2 a {
7605 vertical-align: middle;
7606 }
7607 }
7608
7609 #log-viewer {
7610 background: $color-white;
7611 border: 1px solid #e5e5e5;
7612 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
7613 padding: 5px 20px;
7614
7615 pre {
7616 font-family: monospace;
7617 white-space: pre-wrap;
7618 word-wrap: break-word;
7619 }
7620 }
7621
7622 /**
7623 * Tooltips.
7624 **/
7625 .tips {
7626 cursor: help;
7627 text-decoration: none;
7628 }
7629
7630 img.tips {
7631 padding: 5px 0 0;
7632 }
7633
7634 .tooltipster-base {
7635 display: flex;
7636 position: absolute;
7637 pointer-events: none;
7638
7639 &.tooltipster-ruler {
7640 position: fixed;
7641 top: 0;
7642 right: 0;
7643 bottom: 0;
7644 left: 0;
7645 overflow: hidden;
7646 visibility: hidden;
7647 }
7648
7649 .tooltipster-box {
7650 border: none;
7651 flex: 1 1 auto;
7652 border-radius: 3px;
7653 border: 1px solid #e1e1e1;
7654 background: #fff;
7655 margin: 0 !important;
7656
7657 .tooltipster-content {
7658 color: #222;
7659 overflow: auto;
7660 font-size: 13px;
7661 max-width: 200px;
7662 max-height: 100%;
7663 text-align: center;
7664 padding: 16px 20px;
7665 box-sizing: border-box;
7666 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
7667
7668 a {
7669 // color: #ff7d20;
7670 color: #967cff;
7671 }
7672
7673 code {
7674 padding: 1px;
7675 background: #888;
7676 }
7677 }
7678 }
7679
7680 .tooltipster-arrow {
7681 overflow: hidden;
7682 position: absolute;
7683
7684 .tooltipster-arrow-uncropped {
7685 position: relative;
7686
7687 .tooltipster-arrow-border {
7688 top: 0;
7689 left: 0;
7690 width: 0;
7691 height: 0;
7692 position: absolute;
7693 border: 5px solid transparent;
7694 }
7695
7696 .tooltipster-arrow-background {
7697 display: none;
7698 }
7699 }
7700 }
7701
7702 &.tooltipster-top,
7703 &.tooltipster-bottom {
7704 .tooltipster-arrow {
7705 width: 10px;
7706 height: 5px;
7707 margin-left: -5px;
7708 }
7709 }
7710
7711 &.tooltipster-left,
7712 &.tooltipster-right {
7713 .tooltipster-arrow {
7714 top: 0;
7715 width: 5px;
7716 height: 10px;
7717 margin-left: 0;
7718 margin-top: -5px;
7719 }
7720 }
7721
7722 &.tooltipster-bottom {
7723 .tooltipster-arrow {
7724 top: -5px;
7725
7726 .tooltipster-arrow-uncropped {
7727 top: -5px;
7728
7729 .tooltipster-arrow-border {
7730 border-bottom-color: #333;
7731 }
7732 }
7733 }
7734 }
7735
7736 &.tooltipster-left {
7737 .tooltipster-arrow {
7738 right: -5px;
7739
7740 .tooltipster-arrow-border {
7741 border-left-color: #333;
7742 }
7743 }
7744 }
7745
7746 &.tooltipster-right {
7747 .tooltipster-arrow {
7748 left: -5px;
7749
7750 .tooltipster-arrow-uncropped {
7751 left: -5px;
7752
7753 .tooltipster-arrow-border {
7754 border-right-color: #333;
7755 }
7756 }
7757 }
7758 }
7759
7760 &.tooltipster-top {
7761 .tooltipster-arrow {
7762 bottom: -5px;
7763
7764 .tooltipster-arrow-border {
7765 border-top-color: #333;
7766 }
7767 }
7768 }
7769
7770 &.tooltipster-fade {
7771 opacity: 0;
7772 transition-property: opacity;
7773
7774 &.tooltipster-show {
7775 opacity: 1;
7776 }
7777 }
7778
7779 &.tooltipster-update-rotate {
7780 animation: rotating 600ms;
7781 }
7782 }
7783
7784 .evf_error_tip {
7785 color: $color-white;
7786 max-width: 20em;
7787 font-size: 0.8em;
7788 line-height: 1.8em;
7789 text-align: center;
7790 border-radius: 3px;
7791 position: absolute;
7792 white-space: normal;
7793 background: #d82223;
7794 margin: 1.5em 1px 0 -1em;
7795 padding: 0.618em 1em;
7796 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
7797 z-index: 9999999;
7798
7799 code {
7800 padding: 1px;
7801 background: #888;
7802 }
7803
7804 &::after {
7805 content: '';
7806 display: block;
7807 border: 8px solid #d82223;
7808 border-right-color: transparent;
7809 border-left-color: transparent;
7810 border-top-color: transparent;
7811 position: absolute;
7812 top: -3px;
7813 left: 50%;
7814 margin: -1em 0 0 -3px;
7815 }
7816 }
7817
7818 /**
7819 *Date picker.
7820 **/
7821 img.ui-datepicker-trigger {
7822 vertical-align: middle;
7823 margin-top: -1px;
7824 cursor: pointer;
7825 }
7826
7827 #ui-datepicker-div {
7828 display: none;
7829 }
7830
7831 /**
7832 * Blank State.
7833 **/
7834 .everest-forms-BlankState {
7835 text-align: center;
7836 padding: 5em 0 0;
7837
7838 .everest-forms-BlankState-icon {
7839 display: unset;
7840 fill: #ddd;
7841 width: 128px;
7842 height: 128px;
7843 margin: 0 0 0.875em;
7844 }
7845
7846 .everest-forms-BlankState-message {
7847 color: #aaa;
7848 margin: 0 auto 1.5em;
7849 line-height: 1.5em;
7850 font-size: 1.2em;
7851 max-width: 500px;
7852 }
7853
7854 .everest-forms-BlankState-cta {
7855 font-size: 1.2em;
7856 padding: 0.75em 1.5em;
7857 margin: 0 0.25em;
7858 height: auto;
7859 display: inline-block !important;
7860 }
7861 }
7862
7863 .evf-pointer {
7864 .evf-pointer-buttons {
7865 .close {
7866 float: left;
7867 margin: 6px 0 0 15px;
7868 }
7869 }
7870 }
7871
7872 /**
7873 * Select2 elements.
7874 */
7875 .select2-container {
7876 .select2-selection--multiple {
7877 .select2-selection__rendered {
7878 display: block;
7879 }
7880
7881 input {
7882 &.select2-search__field {
7883 min-width: 10px;
7884 margin-top: 0 !important;
7885 margin-bottom: 4px;
7886 }
7887 }
7888 }
7889
7890 &.select2-container--focus {
7891 .select2-selection--multiple {
7892 border-color: #7545bb;
7893 // box-shadow: 0 0 2px rgba(30, 140, 190, 0.8);
7894 outline: 1px solid #7545bb;
7895 }
7896 }
7897 }
7898
7899 .select2-drop,
7900 .select2-dropdown {
7901 z-index: 999999 !important;
7902
7903 .everest-forms-btn {
7904 margin: 8px 4px;
7905 }
7906 }
7907
7908 .select2-results {
7909 line-height: 1.5em;
7910
7911 .select2-results__option,
7912 .select2-results__group {
7913 margin: 0;
7914 padding: 8px;
7915
7916 &:focus {
7917 outline: none;
7918 }
7919 }
7920
7921 .description {
7922 display: block;
7923 color: #999;
7924 padding-top: 4px;
7925 }
7926 }
7927
7928 .select2-dropdown {
7929 border-color: #007cba;
7930
7931 &::after {
7932 position: absolute;
7933 left: 0;
7934 right: 0;
7935 height: 1px;
7936 background: #fff;
7937 content: '';
7938 }
7939 }
7940
7941 .select2-dropdown--below {
7942 box-shadow:
7943 0 0 0 1px #007cba,
7944 0 2px 1px rgba(0, 0, 0, 0.1);
7945
7946 &::after {
7947 top: -1px;
7948 }
7949 }
7950
7951 .select2-dropdown--above {
7952 box-shadow:
7953 0 0 0 1px #007cba,
7954 0 -2px 1px rgba(0, 0, 0, 0.1);
7955
7956 &::after {
7957 bottom: -1px;
7958 }
7959 }
7960
7961 .select2-container--open {
7962 .select2-dropdown--below {
7963 margin-top: -15px;
7964 }
7965 }
7966
7967 .select2-container {
7968 @media only screen and (max-width: 782px) {
7969 font-size: 16px;
7970 }
7971
7972 &:focus {
7973 outline: none;
7974 }
7975
7976 span.selection {
7977 display: block;
7978 }
7979
7980 .select2-selection__rendered.ui-sortable li {
7981 cursor: move;
7982 }
7983
7984 .select2-selection {
7985 border-color: #7e8993;
7986 }
7987
7988 .select2-search__field {
7989 min-width: 150px;
7990 }
7991
7992 .select2-selection--single {
7993 height: 30px;
7994 border-color: #7e8993;
7995
7996 @media only screen and (max-width: 782px) {
7997 height: 40px;
7998 }
7999
8000 &:focus {
8001 outline: none;
8002 }
8003
8004 .select2-selection__rendered {
8005 line-height: 28px;
8006 padding-right: 24px;
8007
8008 @media only screen and (max-width: 782px) {
8009 line-height: 38px;
8010 }
8011
8012 &:hover {
8013 color: #7545bb;
8014 }
8015 }
8016
8017 .select2-selection__arrow {
8018 right: 1px;
8019 height: 28px;
8020 width: 23px;
8021 background: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E)
8022 no-repeat right 5px top 55%;
8023 background-size: 16px 16px;
8024
8025 @media only screen and (max-width: 782px) {
8026 height: 38px;
8027 }
8028
8029 b {
8030 display: none;
8031 }
8032 }
8033 }
8034
8035 &.select2-container--focus .select2-selection--single,
8036 &.select2-container--open .select2-selection--single,
8037 &.select2-container--open .select2-selection--multiple {
8038 border-color: #7545bb;
8039 // box-shadow: 0 0 0 1px #007cba;
8040 }
8041
8042 .selection {
8043 .select2-selection--multiple {
8044 //Tags
8045 max-height: max-content;
8046 min-height: 38px;
8047 line-height: 1.5;
8048 border-radius: 4px;
8049 border-color: #e1e1e1;
8050 width: 100%;
8051
8052 .select2-selection__rendered {
8053 .select2-selection__choice {
8054 background: #f4f4f4;
8055 border-radius: 3px;
8056 gap: 4px;
8057 padding: 6px 10px 6px 8px;
8058 border: 0;
8059 }
8060 }
8061
8062 li {
8063 margin: 0;
8064 }
8065
8066 .select2-selection__choice {
8067 padding: 2px 6px;
8068
8069 .description {
8070 display: none;
8071 }
8072 }
8073 }
8074 }
8075
8076 .select2-selection__clear {
8077 color: #999;
8078 margin-top: -1px;
8079 z-index: 1;
8080 }
8081
8082 .select2-search--inline .select2-search__field {
8083 min-height: 28px;
8084 font-family: inherit;
8085 font-size: inherit;
8086 font-weight: inherit;
8087 padding: 0 0 0 3px;
8088 }
8089
8090 .everest-forms table.form-table .select2-container {
8091 @media only screen and (max-width: 782px) {
8092 min-width: 100% !important;
8093 }
8094 }
8095 }
8096
8097 /**
8098 * Select2 colors for built-in admin color themes.
8099 */
8100 .admin-color {
8101 $wp_admin_colors: (
8102 blue: #096484,
8103 coffee: #c7a589,
8104 ectoplasm: #a3b745,
8105 midnight: #e14d43,
8106 ocean: #9ebaa0,
8107 sunrise: #dd823b,
8108 light: #04a4cc,
8109 );
8110
8111 @each $name, $color in $wp_admin_colors {
8112 &-#{$name} {
8113 .select2-dropdown {
8114 border-color: $color;
8115 }
8116
8117 .select2-dropdown--below {
8118 box-shadow:
8119 0 0 0 1px $color,
8120 0 2px 1px rgba(0, 0, 0, 0.1);
8121 }
8122
8123 .select2-dropdown--above {
8124 box-shadow:
8125 0 0 0 1px $color,
8126 0 -2px 1px rgba(0, 0, 0, 0.1);
8127 }
8128
8129 .select2-selection--single .select2-selection__rendered:hover {
8130 color: #7545bb !important;
8131 }
8132
8133 .select2-container.select2-container--focus .select2-selection--single,
8134 .select2-container.select2-container--open .select2-selection--single,
8135 .select2-container.select2-container--open .select2-selection--multiple {
8136 border-color: #7545bb;
8137 box-shadow: 0 0 0 1px #7545bb;
8138 }
8139
8140 .select2-container--default
8141 .select2-results__option--highlighted[aria-selected]],
8142 .select2-container--default
8143 .select2-results__option--highlighted[data-selected]] {
8144 background: $color;
8145 }
8146 }
8147 }
8148 }
8149
8150 .everest-forms {
8151 table {
8152 &.form-table {
8153 .select2-container--default {
8154 &.select2-container--focus {
8155 .select2-selection--multiple {
8156 border-color: #7545bb;
8157 // box-shadow: 0 0 2px rgba(30, 140, 190, 0.8);
8158 // outline: 2px solid transparent;
8159 }
8160 }
8161 }
8162
8163 .select2-container {
8164 // min-width: 350px !important;
8165 }
8166 }
8167 }
8168 }
8169
8170 @media screen and (max-width: 1226px) {
8171 .everest-forms_page_evf-builder {
8172 #everest-forms-builder {
8173 .everest-forms-nav-wrapper {
8174 .evf-forms-nav-right {
8175 width: 269px;
8176
8177 .evf-shortcode-field {
8178 input {
8179 display: none;
8180 }
8181
8182 button {
8183 border-radius: 3px;
8184 }
8185 }
8186 }
8187 }
8188 }
8189 }
8190 }
8191
8192 /**
8193 * Small screen optimisation.
8194 **/
8195
8196 /**
8197 * Optimisation for screens 960px and smaller.
8198 **/
8199 @media only screen and (max-width: 960px) {
8200 .everest-forms_page_evf-builder {
8201 #everest-forms-builder {
8202 .evf-tab-content {
8203 .everest-forms-panel {
8204 .everest-forms-panel-sidebar {
8205 width: 280px;
8206 height: calc(100vh - 122px);
8207
8208 .evf-registered-buttons {
8209 .evf-registered-item {
8210 width: 46%;
8211 }
8212 }
8213 }
8214
8215 .everest-forms-panel-sidebar-content {
8216 .everest-forms-panel-content-wrap {
8217 width: calc(100% - 280px);
8218 }
8219 }
8220 }
8221 }
8222 }
8223 }
8224
8225 .everest-forms {
8226 .everest-forms-integration-content {
8227 .integration-addon-detail {
8228 width: 280px;
8229 }
8230 }
8231 }
8232 }
8233
8234 @media screen and (max-width: 998px) {
8235 .everest-forms_page_evf-builder {
8236 #everest-forms-builder {
8237 .everest-forms-nav-wrapper {
8238 nav.evf-nav-tab-wrapper {
8239 width: calc(100% - 269px);
8240 }
8241
8242 .evf-forms-nav-right {
8243 width: 269px;
8244
8245 .evf-shortcode-field {
8246 input {
8247 display: none;
8248 }
8249
8250 button {
8251 border-radius: 3px;
8252 }
8253 }
8254 }
8255 }
8256 }
8257 }
8258 }
8259
8260 /**
8261 * Optimisation for screens 782px and smaller.
8262 **/
8263 @media screen and (max-width: 782px) {
8264 .everest-forms_page_evf-builder {
8265 .auto-fold {
8266 #wpcontent {
8267 padding-left: 0;
8268 }
8269 }
8270
8271 .everest-forms {
8272 .everest-forms-overlay {
8273 z-index: 99999;
8274 }
8275 }
8276
8277 #everest-forms-builder {
8278 width: 100%;
8279
8280 #everest-forms-builder-form {
8281 width: 100% !important; // Adjust Form builder width
8282
8283 .evf-tab-content {
8284 .everest-forms-panel-content-wrap {
8285 .everest-forms-panel-content {
8286 height: calc(100vh - 122px);
8287
8288 &.ps {
8289 height: calc(100vh - 176px);
8290 }
8291 }
8292
8293 .evf-admin-row {
8294 .evf-admin-grid {
8295 padding: 0;
8296 margin: 0;
8297 }
8298 }
8299 }
8300
8301 .everest-forms-field-option-row-choices {
8302 ul {
8303 li {
8304 input[type='text']='text'] {
8305 width: calc(100% - 118px);
8306 }
8307
8308 a {
8309 &.add,
8310 &.remove {
8311 width: 40px;
8312 height: 40px;
8313 }
8314 }
8315 }
8316 }
8317 }
8318 }
8319 }
8320
8321 .everest-forms-tab-content {
8322 height: calc(100vh - 172px);
8323 }
8324 }
8325 }
8326
8327 .evf-nav-tab-wrapper {
8328 overflow-x: auto;
8329 }
8330
8331 .everest-forms_page_evf-settings {
8332 .everest-forms {
8333 .everest-forms-settings {
8334 table {
8335 &.form-table {
8336 th {
8337 padding: 15px 0 15px;
8338 }
8339 }
8340 }
8341 }
8342 }
8343 }
8344
8345 .everest-forms-builder-setup {
8346 .everest-forms {
8347 #everest-forms-setup-name {
8348 width: auto;
8349 }
8350
8351 .evf-setup-desc {
8352 a {
8353 width: 200px;
8354 }
8355 }
8356 }
8357 }
8358 }
8359
8360 /**
8361 * Optimisation for screens 768px.
8362 */
8363 @media screen and (min-width: 768px) {
8364 .evf-form-col-6 {
8365 flex: 0 0 50%;
8366 max-width: 50%;
8367 }
8368
8369 .evf-form-col-4 {
8370 flex: 0 0 33.333%;
8371 max-width: 33.333%;
8372 }
8373 }
8374
8375 /**
8376 * Optimisation for screens 600px and smaller.
8377 */
8378 @media screen and (max-width: 600px) {
8379 .everest-forms_page_evf-builder,
8380 .everest-forms_page_evf-settings {
8381 .everest-forms {
8382 .evf-nav-tab-wrapper {
8383 a {
8384 &.nav-tab {
8385 margin: 0;
8386 }
8387 }
8388 }
8389 }
8390 }
8391
8392 .everest-forms-builder-setup {
8393 .everest-forms {
8394 width: 100%;
8395 margin: 20px 0;
8396
8397 .evf-setup-desc a {
8398 display: block;
8399 margin-bottom: 30px;
8400 text-align: center;
8401 width: 100%;
8402 margin-left: 0;
8403 }
8404 }
8405 }
8406
8407 .everest-forms_page_evf-builder {
8408 #wpbody-content {
8409 padding-bottom: 0;
8410 }
8411
8412 #everest-forms-builder {
8413 position: initial;
8414
8415 #everest-forms-builder-form {
8416 position: relative;
8417 }
8418
8419 .evf-tab-content {
8420 .everest-forms-panel-content-wrap {
8421 padding: 20px 20px 0;
8422
8423 .evf-admin-row {
8424 flex-direction: column;
8425 margin: 0 0 20px;
8426 position: relative;
8427
8428 .evf-admin-grid {
8429 &.evf-grid-1,
8430 &.evf-grid-2,
8431 &.evf-grid-3,
8432 &.evf-grid-4 {
8433 width: auto;
8434 }
8435 }
8436 }
8437 }
8438 }
8439
8440 .everest-forms-nav-wrapper {
8441 nav.evf-nav-tab-wrapper {
8442 width: calc(100% - 207px);
8443 }
8444
8445 .evf-forms-nav-right {
8446 width: 207px;
8447 margin-top: 10px;
8448 padding: 9px 17px;
8449
8450 .evf-shortcode-field {
8451 display: none;
8452 }
8453 }
8454 }
8455
8456 .evf-tab-content {
8457 .everest-forms-panel {
8458 .everest-forms-panel-sidebar-content {
8459 flex-direction: column;
8460
8461 .everest-forms-panel-sidebar,
8462 .everest-forms-panel-content-wrap {
8463 width: 100%;
8464 }
8465
8466 .everest-forms-panel-sidebar {
8467 height: auto;
8468 }
8469
8470 .everest-forms-panel-content-wrap {
8471 padding: 0;
8472 }
8473 }
8474 }
8475
8476 .evf-choices-list {
8477 li {
8478 input[type='text']='text'] {
8479 width: 84%;
8480 }
8481 }
8482 }
8483 }
8484 }
8485 }
8486
8487 .everest-forms {
8488 .everest-forms-integration-content {
8489 flex-wrap: wrap;
8490
8491 .integration-addon-detail {
8492 width: 100%;
8493 margin: 0 20px;
8494 border-bottom: 1px solid #ced4da;
8495 border-right: none;
8496 padding-left: inherit;
8497 }
8498
8499 .integration-connection-detail {
8500 width: 100%;
8501 }
8502 }
8503
8504 .everest-forms-integrations-connection {
8505 .everest-forms-integrations {
8506 .integration-header-info {
8507 .integration-detail {
8508 flex-direction: column;
8509 align-items: flex-start;
8510 }
8511 }
8512
8513 .integration-header-info {
8514 align-items: flex-start;
8515
8516 .integration-status {
8517 margin-top: 15px;
8518 }
8519
8520 .integration-detail {
8521 .logo {
8522 margin-bottom: 15px;
8523 }
8524 }
8525 }
8526 }
8527 }
8528 }
8529 }
8530
8531 @media screen and (max-width: 428px) {
8532 .everest-forms_page_evf-builder {
8533 #everest-forms-builder {
8534 .evf-tab-content {
8535 .everest-forms-panel {
8536 .everest-forms-panel-sidebar {
8537 .evf-registered-buttons {
8538 .evf-registered-item {
8539 width: 46%;
8540 }
8541 }
8542 }
8543 }
8544 }
8545 }
8546 }
8547 }
8548
8549 @media screen and (max-width: 428px) {
8550 .everest-forms_page_evf-builder {
8551 #everest-forms-builder {
8552 .evf-tab-content {
8553 .everest-forms-panel {
8554 .everest-forms-panel-sidebar {
8555 .evf-registered-buttons {
8556 .evf-registered-item {
8557 width: 46%;
8558 }
8559 }
8560 }
8561 }
8562 }
8563 }
8564 }
8565 }
8566
8567 /**
8568 * Optimisation for screens 400px and smaller.
8569 */
8570 @media screen and (max-width: 400px) {
8571 #everest-forms-builder {
8572 .evf-tab-lists li {
8573 a {
8574 padding: 15px;
8575 }
8576
8577 .dashicons {
8578 font-size: 24px;
8579 }
8580 }
8581
8582 .evf-tab-content {
8583 .everest-forms-panel {
8584 .everest-forms-panel-sidebar {
8585 .evf-registered-buttons {
8586 .evf-registered-item {
8587 width: 47%;
8588 }
8589 }
8590 }
8591 }
8592 }
8593 }
8594
8595 .jconfirm.jconfirm-white .jconfirm-box,
8596 .jconfirm.jconfirm-light .jconfirm-box {
8597 width: 90% !important;
8598 }
8599 }
8600
8601 .evf-repeater-fields {
8602 padding: 0 20px 20px;
8603
8604 .everest-forms-field-repeater-fields {
8605 width: calc(100% + 60px) !important;
8606 margin-left: -30px !important;
8607 margin-top: -1px !important;
8608 min-height: 48px;
8609 }
8610
8611 div.evf-admin-grid.evf-repeatable-grid {
8612 padding: 0 10px 10px !important;
8613 }
8614 }
8615
8616 #elementor-editor-wrapper .everest-icon:before,
8617 .elementor-edit-area .everest-icon:before {
8618 content: '\e902';
8619 font-family: 'EverestForms';
8620 font-weight: normal;
8621 font-style: normal;
8622 font-display: block;
8623 }
8624
8625 .everest-forms-field.ui-sortable-helper .evf-field-action {
8626 display: none;
8627 }
8628
8629 .everest-forms-builder .everest-forms-field.ui-sortable-helper {
8630 padding: 15px 15px 0 15px;
8631 border: 1px solid #cdd0d8;
8632 border-radius: 3px;
8633
8634 label {
8635 display: block;
8636 font-size: 13px;
8637 font-weight: 600;
8638 margin-bottom: 10px;
8639
8640 .required {
8641 vertical-align: middle;
8642 padding-left: 6px;
8643 }
8644 }
8645 }
8646
8647 .everest-forms-builder {
8648 .evf-registered-item.ui-draggable.ui-draggable-handle.ui-draggable-dragging {
8649 font-size: 12px !important;
8650 background: #fff;
8651 border: 1px solid #cdd0d8;
8652 color: #6c7680;
8653
8654 .evf-icon {
8655 padding: 0 8px;
8656 border-radius: 4px;
8657 font-size: 24px;
8658 vertical-align: middle;
8659 }
8660 }
8661 }
8662
8663 .jconfirm-content-pane {
8664 height: auto !important;
8665
8666 .evf-shortcut-keyword {
8667 margin-bottom: 18px;
8668
8669 .evf-shortcut-title {
8670 flex: 3;
8671 }
8672
8673 li {
8674 display: flex;
8675 align-items: center;
8676
8677 .evf-key {
8678 display: flex;
8679 flex: 2;
8680 column-gap: 8px;
8681 color: #3498db;
8682
8683 span {
8684 border: 1px solid #3498db;
8685 background: #3498db13;
8686 padding: 4px 0;
8687 width: 40px;
8688 border-radius: 2px;
8689 }
8690 }
8691 }
8692 }
8693 }
8694
8695 .evf-btn-container {
8696 a {
8697 display: inline-block;
8698 padding: 4px 8px;
8699 border: 1px solid #3498db;
8700 margin-bottom: 8px;
8701 border-radius: 2px;
8702 background: #f5fbff;
8703 line-height: 1.8em;
8704
8705 &:hover {
8706 background: #3498db;
8707 color: #fff;
8708 cursor: pointer;
8709 }
8710 }
8711
8712 .evf-btn-unselect-all {
8713 margin-left: 8px;
8714 }
8715 }
8716
8717 // Customize Select2 style
8718 .select2-results__option .wrap:before {
8719 content: '\2610';
8720 width: 25px;
8721 height: 25px;
8722 padding-right: 10px;
8723 }
8724
8725 .select2-results__option[data-selected='true']='true'] .wrap:before {
8726 content: '\2714';
8727 }
8728
8729 .select2-drop,
8730 .select2-dropdown {
8731 z-index: 999999 !important;
8732 }
8733
8734 .select2-results {
8735 line-height: 1.5em;
8736
8737 .select2-results__option,
8738 .select2-results__group {
8739 margin: 0;
8740 padding: 8px;
8741 }
8742 }
8743
8744 .select2-dropdown {
8745 border-color: gray;
8746 }
8747
8748 .select2-dropdown--below {
8749 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
8750 }
8751
8752 .select2-dropdown--above {
8753 box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.1);
8754 }
8755
8756 .select2-container {
8757 .select2-selection__rendered.ui-sortable li {
8758 cursor: move;
8759 }
8760
8761 .select2-selection {
8762 border-color: gray;
8763 }
8764
8765 .select2-search__field {
8766 min-width: 20px;
8767 }
8768
8769 .select2-selection--single {
8770 height: 32px;
8771
8772 .select2-selection__rendered {
8773 display: block;
8774 line-height: 32px;
8775 padding-right: 24px;
8776 }
8777
8778 .select2-selection__arrow {
8779 right: 3px;
8780 height: 30px;
8781 }
8782 }
8783
8784 .select2-selection--multiple {
8785 min-height: 28px;
8786 border-radius: 4px;
8787 line-height: 1.5;
8788 border: 1px solid #ddd !important;
8789 padding-left: 4px;
8790
8791 li {
8792 margin: 0;
8793 }
8794
8795 .select2-selection__choice {
8796 padding: 2px 6px;
8797 }
8798
8799 .select2-selection__rendered {
8800 // display: block;
8801 display: flex;
8802 margin: 0px;
8803
8804 .select2-selection__choice {
8805 margin: 4px;
8806 line-height: 1.4;
8807 display: flex;
8808 align-items: center;
8809 justify-content: center;
8810
8811 .select2-selection__choice__remove {
8812 bottom: 0px;
8813 }
8814 }
8815 }
8816 }
8817
8818 .select2-selection__clear {
8819 color: #999;
8820 margin-top: -1px;
8821 }
8822
8823 .select2-search--inline {
8824 .select2-search__field {
8825 font-family: inherit;
8826 font-size: inherit;
8827 font-weight: inherit;
8828 padding: 3px 0;
8829 margin: 0;
8830 line-height: 1;
8831 min-height: 26px;
8832 height: 32px;
8833 }
8834 }
8835 }
8836
8837 .everest-forms-form-template-wrapper {
8838 .everest-forms-form-template {
8839 &[data-filter-template='free']='free'] {
8840 .everest-forms-template-wrap[data-plan='premium']='premium'] {
8841 display: none;
8842 }
8843 }
8844
8845 &[data-filter-template='premium']='premium'] {
8846 .everest-forms-template-wrap[data-plan='free']='free'] {
8847 display: none;
8848 }
8849 }
8850 }
8851 }
8852
8853 .everest-forms-panel-field {
8854 &.everest-forms-panel-field-checkbox {
8855 .inline {
8856 padding-left: 0;
8857 }
8858 }
8859 }
8860
8861 .jconfirm-scrollpane {
8862 .jconfirm-row {
8863 .jconfirm-box {
8864 border-top: 0 !important;
8865 padding: 20px !important;
8866
8867 div {
8868 &.jconfirm-title-c {
8869 padding-bottom: 6px;
8870
8871 .jconfirm-title {
8872 line-height: 32px;
8873
8874 h4 {
8875 margin: 0;
8876 }
8877 }
8878 }
8879 }
8880
8881 .jconfirm-buttons {
8882 padding: 0 !important;
8883
8884 button {
8885 &.btn-confirm {
8886 margin: 0;
8887 // background: $evf_primary-color;
8888 // background: $everestforms;
8889 }
8890 }
8891 }
8892
8893 .jconfirm-content {
8894 &-pane {
8895 margin-bottom: 6px !important;
8896 }
8897
8898 .everest_forms_hide_container {
8899 > p {
8900 padding-left: 20px;
8901 padding-right: 20px;
8902 }
8903
8904 .everest-forms-btn {
8905 background: #8c5aca;
8906 color: $color-white;
8907 font-weight: 500;
8908 transition: all 0.3s ease-in-out;
8909
8910 &:hover {
8911 background: #a869f6;
8912 }
8913
8914 &:focus {
8915 box-shadow: none;
8916 }
8917
8918 &.everest-forms-select-existing-page {
8919 margin: 16px 0;
8920 background: none;
8921 color: #6b6b6b;
8922 font-size: 15px;
8923 font-weight: 400;
8924 letter-spacing: 0.3px;
8925 width: 100%;
8926 text-align: left;
8927 padding: 14px 16px;
8928 border: 1px solid #e1e1e1;
8929 border-radius: 4px;
8930 line-height: 20px;
8931 background-image: url("data:image/svg+xml,%3Csvg width='10' height='14' viewBox='0 0 10 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 2L8 7L3 12' stroke='%236b6b6b' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
8932 background-repeat: no-repeat;
8933 background-position: right 12px center;
8934 background-size: 14px 12px;
8935
8936 &:hover {
8937 border: 1px solid #7545bb;
8938 }
8939 }
8940
8941 &.everest-forms-create-new-page {
8942 padding: 10px 16px;
8943 border-radius: 4px;
8944 background: transparent;
8945 font-size: 15px;
8946 width: 100%;
8947 text-align: left;
8948 padding: 14px 16px;
8949 border: 1px solid #e1e1e1;
8950 font-weight: 400;
8951 border-radius: 4px;
8952 letter-spacing: 0.3px;
8953 color: #6b6b6b;
8954 line-height: 20px;
8955 background-image: url("data:image/svg+xml,%3Csvg width='10' height='14' viewBox='0 0 10 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 2L8 7L3 12' stroke='%236b6b6b' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
8956 background-repeat: no-repeat;
8957 background-position: right 12px center;
8958 background-size: 14px 12px;
8959
8960 &:hover {
8961 border: 1px solid #7545bb;
8962 }
8963 }
8964 }
8965 }
8966
8967 .everest-forms-show-exist-page {
8968 select {
8969 // width: 70%;
8970 // height: 35px;
8971 // padding-left: 10px;
8972 // border-color: #d5d5d5;
8973 // color: #383838;
8974 border-radius: 4px;
8975 background: transparent;
8976 font-size: 15px;
8977 width: 100%;
8978 text-align: left;
8979 padding: 14px 16px;
8980 border: 1px solid #e1e1e1;
8981 font-weight: 400;
8982 border-radius: 4px;
8983 letter-spacing: 0.3px;
8984 color: #6b6b6b;
8985 line-height: 20px;
8986 margin: 16px 0;
8987
8988 appearance: none;
8989 -webkit-appearance: none;
8990 -moz-appearance: none;
8991
8992 background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236b7280' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
8993 background-repeat: no-repeat;
8994 background-position: right 12px center;
8995 background-size: 12px 8px;
8996
8997 &:focus {
8998 box-shadow: none;
8999 border-color: #7545bb;
9000 background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%237545bb' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
9001 }
9002 }
9003
9004 .everest-forms-lets-go-btn {
9005 background: #7545bb;
9006 color: #fff;
9007 font-weight: 500;
9008 border: 1px solid #7545bb;
9009 padding: 6px 16px;
9010 border-radius: 4px;
9011 vertical-align: middle;
9012 margin-left: 10px;
9013 transition: all 0.3s ease-in-out;
9014
9015 &:hover {
9016 background: #a869f6;
9017 border-color: #a869f6;
9018 }
9019 }
9020
9021 .everest-forms-show-container {
9022 display: flex;
9023 align-items: center;
9024 justify-content: center;
9025 gap: 2px;
9026 margin-top: 12px;
9027 font-size: 14px;
9028 text-decoration: underline;
9029 color: #494949;
9030 transition: all 0.3s ease-in-out;
9031
9032 &:hover {
9033 color: #383838;
9034 }
9035
9036 &::before {
9037 content: '';
9038 background-image: url('../images/icons/embed-back-icon.svg');
9039 background-repeat: no-repeat;
9040 background-position: center;
9041 background-size: 100%;
9042 display: block;
9043 width: 18px;
9044 height: 18px;
9045 margin-top: 2px;
9046 }
9047 }
9048 }
9049
9050 .everest-forms-select-existing-post-container {
9051 input[type='text']='text'] {
9052 width: 100%;
9053 padding: 14px 16px;
9054 margin: 16px 0;
9055 font-size: 15px;
9056 line-height: 20px;
9057
9058 &:focus {
9059 border-color: #7545bb;
9060 }
9061 }
9062 }
9063 }
9064 }
9065 }
9066 }
9067
9068 .select2-container {
9069 box-sizing: border-box;
9070 display: inline-block;
9071 margin: 0;
9072 position: relative;
9073 vertical-align: middle;
9074 width: 350px;
9075
9076 .select2-selection--single {
9077 box-sizing: border-box;
9078 cursor: pointer;
9079 display: block;
9080 height: 28px;
9081 margin: 0 0 -4px;
9082 -ms-user-select: none;
9083 user-select: none;
9084 -webkit-user-select: none;
9085 height: 30px;
9086 border-color: #7e8993;
9087 height: 32px;
9088
9089 .select2-selection__rendered {
9090 display: block;
9091 padding-left: 8px;
9092 padding-right: 20px;
9093 overflow: hidden;
9094 text-overflow: ellipsis;
9095 white-space: nowrap;
9096 line-height: 28px;
9097 padding-right: 24px;
9098 display: block;
9099 line-height: 32px;
9100 padding-right: 24px;
9101
9102 &:hover &:active {
9103 color: #7545bb;
9104 }
9105 }
9106
9107 .select2-selection__clear {
9108 position: relative;
9109 }
9110
9111 &:focus {
9112 outline: 0;
9113 }
9114
9115 .select2-selection__arrow {
9116 right: 1px;
9117 height: 28px;
9118 width: 23px;
9119 background: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E)
9120 no-repeat right 5px top 55%;
9121 background-size: 16px 16px;
9122 right: 3px;
9123 height: 30px;
9124
9125 b {
9126 display: none;
9127 }
9128 }
9129 }
9130
9131 .select2-selection--multiple {
9132 box-sizing: border-box;
9133 cursor: pointer;
9134 display: block;
9135 min-height: 32px;
9136 -ms-user-select: none;
9137 user-select: none;
9138 -webkit-user-select: none;
9139 min-height: 30px;
9140 line-height: 1.5;
9141 border-radius: 4px;
9142 border-color: #7e8993;
9143 min-height: 28px;
9144 border-radius: 4px;
9145 line-height: 1.5;
9146 border: 1px solid #ddd !important;
9147 padding-left: 4px;
9148
9149 .select2-selection__rendered {
9150 display: inline-block;
9151 overflow: hidden;
9152 padding-left: 8px;
9153 text-overflow: ellipsis;
9154 white-space: nowrap;
9155 display: block;
9156 display: flex;
9157 margin: 0;
9158
9159 .select2-selection__choice {
9160 margin: 4px;
9161 line-height: 1.4;
9162 display: flex;
9163 align-items: center;
9164 justify-content: center;
9165
9166 .select2-selection__choice__remove {
9167 bottom: 0;
9168 }
9169 }
9170 }
9171
9172 input.select2-search__field {
9173 min-width: 10px;
9174 margin-top: 0 !important;
9175 margin-bottom: 4px;
9176 }
9177
9178 li {
9179 margin: 0;
9180 margin: 0;
9181 }
9182
9183 .select2-selection__choice {
9184 padding: 2px 6px;
9185 padding: 2px 6px;
9186
9187 .description {
9188 display: none;
9189 }
9190 }
9191 }
9192
9193 .select2-search--inline {
9194 float: left;
9195 padding: 0;
9196
9197 .select2-search__field {
9198 box-sizing: border-box;
9199 border: none;
9200 font-size: 100%;
9201 margin: 0;
9202 padding: 0;
9203 min-height: 28px;
9204 font-size: inherit;
9205 font-weight: inherit;
9206 padding: 0 0 0 3px;
9207 font-size: inherit;
9208 font-weight: inherit;
9209 padding: 3px 0;
9210 margin: 0;
9211 line-height: 1;
9212 min-height: 26px;
9213 height: 32px;
9214
9215 &::-webkit-search-cancel-button {
9216 -webkit-appearance: none;
9217 }
9218 }
9219 }
9220
9221 &:focus {
9222 outline: 0;
9223 }
9224
9225 span.selection {
9226 display: block;
9227 }
9228
9229 .select2-selection__rendered.ui-sortable {
9230 li {
9231 cursor: move;
9232 cursor: move;
9233 }
9234 }
9235
9236 .select2-selection {
9237 border-color: #7e8993;
9238 border-color: #04a4cc;
9239 }
9240
9241 .select2-search__field {
9242 min-width: 150px;
9243 min-width: 20px;
9244 }
9245
9246 .select2-selection__clear {
9247 color: #999;
9248 margin-top: -1px;
9249 z-index: 1;
9250 color: #999;
9251 margin-top: -1px;
9252 }
9253 }
9254
9255 .select2-container[dir='rtl']='rtl'] {
9256 .select2-selection--single {
9257 .select2-selection__rendered {
9258 padding-right: 8px;
9259 padding-left: 20px;
9260 }
9261 }
9262 }
9263
9264 .select2-dropdown {
9265 background: #fff;
9266 border: 1px solid #aaa;
9267 border-radius: 4px;
9268 box-sizing: border-box;
9269 display: block;
9270 position: absolute;
9271 left: -100000px;
9272 width: 100%;
9273 z-index: 1051;
9274 z-index: 999999 !important;
9275 border-color: #007cba;
9276 z-index: 999999 !important;
9277 border-color: gray;
9278
9279 .everest-forms-btn {
9280 margin: 8px 4px;
9281 }
9282
9283 &::after {
9284 position: absolute;
9285 left: 0;
9286 right: 0;
9287 height: 1px;
9288 background: #fff;
9289 content: '';
9290 }
9291 }
9292
9293 .select2-results {
9294 display: block;
9295 line-height: 1.5em;
9296 line-height: 1.5em;
9297
9298 .select2-results__group {
9299 margin: 0;
9300 padding: 8px;
9301 margin: 0;
9302 padding: 8px;
9303
9304 &:focus {
9305 outline: 0;
9306 }
9307 }
9308
9309 .select2-results__option {
9310 margin: 0;
9311 padding: 8px;
9312 margin: 0;
9313 padding: 8px;
9314
9315 &:focus {
9316 outline: 0;
9317 }
9318 }
9319
9320 .description {
9321 display: block;
9322 color: #999;
9323 padding-top: 4px;
9324 }
9325 }
9326
9327 .select2-results__options {
9328 list-style: none;
9329 margin: 0;
9330 padding: 0;
9331 }
9332
9333 .select2-results__option {
9334 padding: 6px;
9335 outline: 0;
9336 -ms-user-select: none;
9337 user-select: none;
9338 -webkit-user-select: none;
9339
9340 .wrap {
9341 &:before {
9342 content: '\2610';
9343 width: 25px;
9344 height: 25px;
9345 padding-right: 10px;
9346 }
9347 }
9348 }
9349
9350 .select2-results__option[aria-selected]] {
9351 cursor: pointer;
9352 }
9353
9354 .select2-results__option[data-selected]] {
9355 cursor: pointer;
9356 }
9357
9358 .select2-container--open {
9359 .select2-dropdown {
9360 left: 0;
9361 }
9362
9363 .select2-dropdown--above {
9364 border-bottom: none;
9365 border-bottom-left-radius: 0;
9366 border-bottom-right-radius: 0;
9367 }
9368
9369 .select2-dropdown--below {
9370 border-top: none;
9371 border-top-left-radius: 0;
9372 border-top-right-radius: 0;
9373 margin-top: 0;
9374 }
9375 }
9376
9377 .select2-search--dropdown {
9378 display: block;
9379 padding: 4px;
9380
9381 .select2-search__field {
9382 width: 100%;
9383 box-sizing: border-box;
9384
9385 &::-webkit-search-cancel-button {
9386 -webkit-appearance: none;
9387 }
9388 }
9389 }
9390
9391 .select2-search--dropdown.select2-search--hide {
9392 display: none;
9393 }
9394
9395 .select2-close-mask {
9396 border: 0;
9397 margin: 0;
9398 padding: 0;
9399 display: block;
9400 position: fixed;
9401 left: 0;
9402 top: 0;
9403 min-height: 100%;
9404 min-width: 100%;
9405 height: auto;
9406 width: auto;
9407 opacity: 0;
9408 z-index: 99;
9409 background: #fff;
9410 }
9411
9412 .select2-hidden-accessible {
9413 border: 0 !important;
9414 clip: rect(0 0 0 0) !important;
9415 height: 1px !important;
9416 margin: -1px !important;
9417 overflow: hidden !important;
9418 padding: 0 !important;
9419 position: absolute !important;
9420 width: 1px !important;
9421 }
9422
9423 .select2-container--default {
9424 .select2-selection--single {
9425 background: #fff;
9426 border: 1px solid #e1e1e1;
9427 border-radius: 4px;
9428 min-height: 36px;
9429
9430 .select2-selection__rendered {
9431 color: #444;
9432 line-height: 28px;
9433 }
9434
9435 .select2-selection__clear {
9436 cursor: pointer;
9437 float: right;
9438 font-weight: 700;
9439 }
9440
9441 .select2-selection__placeholder {
9442 color: #999;
9443 }
9444
9445 .select2-selection__arrow {
9446 height: 26px;
9447 position: absolute;
9448 top: 6px;
9449 right: 1px;
9450 width: 20px;
9451
9452 b {
9453 border-color: #888 transparent transparent transparent;
9454 border-style: solid;
9455 border-width: 5px 4px 0 4px;
9456 height: 0;
9457 left: 50%;
9458 margin-left: -4px;
9459 margin-top: -2px;
9460 position: absolute;
9461 top: 50%;
9462 width: 0;
9463 }
9464 }
9465 }
9466
9467 .select2-selection--multiple {
9468 background: #fff;
9469 border: 1px solid #aaa;
9470 border-radius: 4px;
9471 cursor: text;
9472
9473 .select2-selection__rendered {
9474 box-sizing: border-box;
9475 list-style: none;
9476 margin: 0;
9477 padding: 0;
9478 width: 100%;
9479
9480 li {
9481 list-style: none;
9482 // margin: 5px 5px 0 0;
9483
9484 &::before {
9485 content: '';
9486 display: none;
9487 }
9488 }
9489 }
9490
9491 .select2-selection__placeholder {
9492 color: #999;
9493 margin-top: 5px;
9494 float: left;
9495 }
9496
9497 .select2-selection__clear {
9498 cursor: pointer;
9499 float: right;
9500 font-weight: 700;
9501 margin-top: 5px;
9502 margin-right: 10px;
9503 }
9504
9505 .select2-selection__choice {
9506 background: #e4e4e4;
9507 border: 1px solid #aaa;
9508 border-radius: 4px;
9509 cursor: default;
9510 float: left;
9511 margin-right: 5px;
9512 margin-top: 5px;
9513 padding: 0 5px;
9514 }
9515
9516 .select2-selection__choice__remove {
9517 color: #999;
9518 cursor: pointer;
9519 display: inline-block;
9520 font-weight: 700;
9521 margin-right: 2px;
9522
9523 &:hover {
9524 color: #333;
9525 }
9526 }
9527 }
9528
9529 .select2-search--dropdown {
9530 .select2-search__field {
9531 border: 1px solid #aaa;
9532 }
9533 }
9534
9535 .select2-search--inline {
9536 .select2-search__field {
9537 background: 0 0;
9538 border: none;
9539 outline: 0;
9540 box-shadow: none;
9541 -webkit-appearance: textfield;
9542 }
9543 }
9544
9545 .select2-results {
9546 > .select2-results__options {
9547 max-height: 200px;
9548 overflow-y: auto;
9549 }
9550 }
9551
9552 .select2-results__option[role='group']='group'] {
9553 padding: 0;
9554 }
9555
9556 .select2-results__option[aria-disabled='true']='true'] {
9557 color: #999;
9558 }
9559
9560 .select2-results__option[aria-selected='true']='true'] {
9561 background: #ddd;
9562 }
9563
9564 .select2-results__option[data-selected='true']='true'] {
9565 background: #ddd;
9566 }
9567
9568 .select2-results__option {
9569 .select2-results__option {
9570 padding-left: 1em;
9571
9572 .select2-results__group {
9573 padding-left: 0;
9574 }
9575
9576 .select2-results__option {
9577 margin-left: -1em;
9578 padding-left: 2em;
9579
9580 .select2-results__option {
9581 margin-left: -2em;
9582 padding-left: 3em;
9583
9584 .select2-results__option {
9585 margin-left: -3em;
9586 padding-left: 4em;
9587
9588 .select2-results__option {
9589 margin-left: -4em;
9590 padding-left: 5em;
9591
9592 .select2-results__option {
9593 margin-left: -5em;
9594 padding-left: 6em;
9595 }
9596 }
9597 }
9598 }
9599 }
9600 }
9601 }
9602
9603 .select2-results__option--highlighted[aria-selected]] {
9604 color: #fff;
9605 background: #0073aa;
9606 }
9607
9608 .select2-results__option--highlighted[data-selected]] {
9609 /* dropdown on hover */
9610 color: #7545bb;
9611 background: #eee8f7;
9612 }
9613
9614 .select2-results__group {
9615 cursor: default;
9616 display: block;
9617 padding: 6px;
9618 }
9619 }
9620
9621 .select2-container--default[dir='rtl']='rtl'] {
9622 .select2-selection--single {
9623 .select2-selection__clear {
9624 float: left;
9625 }
9626
9627 .select2-selection__arrow {
9628 left: 1px;
9629 right: auto;
9630 }
9631 }
9632
9633 .select2-selection--multiple {
9634 .select2-search--inline {
9635 float: right;
9636 }
9637
9638 .select2-selection__choice {
9639 float: right;
9640 margin-left: 5px;
9641 margin-right: auto;
9642 }
9643
9644 .select2-selection__placeholder {
9645 float: right;
9646 }
9647
9648 .select2-selection__choice__remove {
9649 margin-left: 2px;
9650 margin-right: auto;
9651 }
9652 }
9653 }
9654
9655 .select2-container--default.select2-container--disabled {
9656 .select2-selection--single {
9657 background: #eee;
9658 cursor: default;
9659
9660 .select2-selection__clear {
9661 display: none;
9662 }
9663 }
9664
9665 .select2-selection--multiple {
9666 background: #eee;
9667 cursor: default;
9668 }
9669
9670 .select2-selection__choice__remove {
9671 display: none;
9672 }
9673 }
9674
9675 .select2-container--default.select2-container--open {
9676 .select2-selection--single {
9677 .select2-selection__arrow {
9678 b {
9679 border-color: transparent transparent #888 transparent;
9680 border-width: 0 4px 5px 4px;
9681 }
9682 }
9683 }
9684 }
9685
9686 .select2-container--default.select2-container--focus {
9687 .select2-selection--multiple {
9688 border: solid #000 1px;
9689 outline: 0;
9690 }
9691 }
9692
9693 .select2-container--default.select2-container--open.select2-container--above {
9694 .select2-selection--multiple {
9695 border-top-left-radius: 0;
9696 border-top-right-radius: 0;
9697 }
9698
9699 .select2-selection--single {
9700 border-top-left-radius: 0;
9701 border-top-right-radius: 0;
9702 }
9703 }
9704
9705 .select2-container--default.select2-container--open.select2-container--below {
9706 .select2-selection--multiple {
9707 border-bottom-left-radius: 0;
9708 border-bottom-right-radius: 0;
9709 }
9710
9711 .select2-selection--single {
9712 border-bottom-left-radius: 0;
9713 border-bottom-right-radius: 0;
9714 }
9715 }
9716
9717 .select2-container--classic {
9718 .select2-selection--single {
9719 background: #f7f7f7;
9720 border: 1px solid #aaa;
9721 border-radius: 4px;
9722 outline: 0;
9723 background-image: linear-gradient(to bottom, #fff 50%, #eee 100%);
9724 background-repeat: repeat-x;
9725
9726 &:focus {
9727 border: 1px solid $primary-color;
9728 }
9729
9730 .select2-selection__rendered {
9731 color: #444;
9732 line-height: 28px;
9733 }
9734
9735 .select2-selection__clear {
9736 cursor: pointer;
9737 float: right;
9738 font-weight: 700;
9739 margin-right: 10px;
9740 }
9741
9742 .select2-selection__placeholder {
9743 color: #999;
9744 }
9745
9746 .select2-selection__arrow {
9747 background: #ddd;
9748 border: none;
9749 border-left: 1px solid #aaa;
9750 border-top-right-radius: 4px;
9751 border-bottom-right-radius: 4px;
9752 height: 26px;
9753 position: absolute;
9754 top: 1px;
9755 right: 1px;
9756 width: 20px;
9757 background-image: linear-gradient(to bottom, #eee 50%, #ccc 100%);
9758 background-repeat: repeat-x;
9759
9760 b {
9761 border-color: #888 transparent transparent transparent;
9762 border-style: solid;
9763 border-width: 5px 4px 0 4px;
9764 height: 0;
9765 left: 50%;
9766 margin-left: -4px;
9767 margin-top: -2px;
9768 position: absolute;
9769 top: 50%;
9770 width: 0;
9771 }
9772 }
9773 }
9774
9775 .select2-selection--multiple {
9776 background: #fff;
9777 border: 1px solid #aaa;
9778 border-radius: 4px;
9779 cursor: text;
9780 outline: 0;
9781
9782 &:focus {
9783 border: 1px solid #0073aa;
9784 }
9785
9786 .select2-selection__rendered {
9787 list-style: none;
9788 margin: 0;
9789 padding: 0 5px;
9790 }
9791
9792 .select2-selection__clear {
9793 display: none;
9794 }
9795
9796 .select2-selection__choice {
9797 background: #e4e4e4;
9798 border: 1px solid #aaa;
9799 border-radius: 4px;
9800 cursor: default;
9801 float: left;
9802 margin-right: 5px;
9803 margin-top: 5px;
9804 padding: 0 5px;
9805 }
9806
9807 .select2-selection__choice__remove {
9808 color: #888;
9809 cursor: pointer;
9810 display: inline-block;
9811 font-weight: 700;
9812 margin-right: 2px;
9813
9814 &:hover {
9815 color: #555;
9816 }
9817 }
9818 }
9819
9820 .select2-search--dropdown {
9821 .select2-search__field {
9822 border: 1px solid #aaa;
9823 outline: 0;
9824 }
9825 }
9826
9827 .select2-search--inline {
9828 .select2-search__field {
9829 outline: 0;
9830 box-shadow: none;
9831 }
9832 }
9833
9834 .select2-dropdown {
9835 background: #fff;
9836 border: 1px solid transparent;
9837 }
9838
9839 .select2-dropdown--above {
9840 border-bottom: none;
9841 }
9842
9843 .select2-dropdown--below {
9844 border-top: none;
9845 }
9846
9847 .select2-results {
9848 > .select2-results__options {
9849 max-height: 200px;
9850 overflow-y: auto;
9851 }
9852 }
9853
9854 .select2-results__option[role='group']='group'] {
9855 padding: 0;
9856 }
9857
9858 .select2-results__option[aria-disabled='true']='true'] {
9859 color: grey;
9860 }
9861
9862 .select2-results__option--highlighted[aria-selected]] {
9863 background: #3875d7;
9864 color: #fff;
9865 }
9866
9867 .select2-results__option--highlighted[data-selected]] {
9868 background: #3875d7;
9869 color: #fff;
9870 }
9871
9872 .select2-results__group {
9873 cursor: default;
9874 display: block;
9875 padding: 6px;
9876 }
9877 }
9878
9879 .select2-container--classic[dir='rtl']='rtl'] {
9880 .select2-selection--single {
9881 .select2-selection__clear {
9882 float: left;
9883 }
9884
9885 .select2-selection__arrow {
9886 border: none;
9887 border-right: 1px solid #aaa;
9888 border-radius: 0;
9889 border-top-left-radius: 4px;
9890 border-bottom-left-radius: 4px;
9891 left: 1px;
9892 right: auto;
9893 }
9894 }
9895
9896 .select2-selection--multiple {
9897 .select2-selection__choice {
9898 float: right;
9899 margin-left: 5px;
9900 margin-right: auto;
9901 }
9902
9903 .select2-selection__choice__remove {
9904 margin-left: 2px;
9905 margin-right: auto;
9906 }
9907 }
9908 }
9909
9910 .select2-container--classic.select2-container--open {
9911 .select2-selection--single {
9912 border: 1px solid #0073aa;
9913
9914 .select2-selection__arrow {
9915 background: 0 0;
9916 border: none;
9917
9918 b {
9919 border-color: transparent transparent #888 transparent;
9920 border-width: 0 4px 5px 4px;
9921 }
9922 }
9923 }
9924
9925 .select2-selection--multiple {
9926 border: 1px solid #0073aa;
9927 }
9928
9929 .select2-dropdown {
9930 border-color: #0073aa;
9931 }
9932 }
9933
9934 .select2-container--classic.select2-container--open.select2-container--above {
9935 .select2-selection--single {
9936 border-top: none;
9937 border-top-left-radius: 0;
9938 border-top-right-radius: 0;
9939 background-image: linear-gradient(to bottom, #fff 0, #eee 50%);
9940 background-repeat: repeat-x;
9941 }
9942
9943 .select2-selection--multiple {
9944 border-top: none;
9945 border-top-left-radius: 0;
9946 border-top-right-radius: 0;
9947 }
9948 }
9949
9950 .select2-container--classic.select2-container--open.select2-container--below {
9951 .select2-selection--single {
9952 border-bottom: none;
9953 border-bottom-left-radius: 0;
9954 border-bottom-right-radius: 0;
9955 background-image: linear-gradient(to bottom, #eee 50%, #fff 100%);
9956 background-repeat: repeat-x;
9957 }
9958
9959 .select2-selection--multiple {
9960 border-bottom: none;
9961 border-bottom-left-radius: 0;
9962 border-bottom-right-radius: 0;
9963 }
9964 }
9965
9966 .evf-akismet {
9967 .evf-akismet-warning {
9968 .evf-akismet-warning-label {
9969 color: #ffcc00;
9970 }
9971 }
9972 }
9973
9974 // Everest Forms system info settings.
9975 .everest-forms {
9976 position: relative;
9977 }
9978
9979 .everest-forms-system-info-setting {
9980 margin-top: 40px;
9981
9982 &-copy {
9983 background: #7545bb;
9984 position: absolute;
9985 top: 0;
9986 right: 0;
9987 padding: 8px 14px;
9988 border-radius: 4px;
9989 border: 0;
9990 font-size: 14px;
9991 line-height: 22px;
9992 font-weight: 500;
9993 cursor: pointer;
9994 color: #ffffff;
9995 }
9996
9997 table {
9998 width: 100%;
9999 border-collapse: collapse;
10000
10001 th,
10002 td {
10003 padding: 10px;
10004 border: 1px solid #dcdcdc;
10005 text-align: left;
10006 font-size: 14px;
10007 white-space: nowrap;
10008 overflow: hidden;
10009 text-overflow: ellipsis;
10010 }
10011
10012 th {
10013 font-weight: 500;
10014 vertical-align: top;
10015 }
10016
10017 tr {
10018 &:nth-child(even) {
10019 background: #ffffff;
10020
10021 th {
10022 background: #ffffff;
10023 }
10024 }
10025
10026 &:hover {
10027 background: #f4f4f4;
10028
10029 th {
10030 background: #f4f4f4;
10031 }
10032 }
10033
10034 th {
10035 &[colspan='2']='2'] {
10036 background: #f4f4f4;
10037 color: #222222;
10038 font-size: 15px;
10039 line-height: 23px;
10040 font-weight: 500;
10041 letter-spacing: 0.2px;
10042 }
10043 }
10044 }
10045 }
10046 }
10047
10048 // Image upload button delete icon
10049 .everest-forms-panel-field-image {
10050 .everest-forms-custom-image-container {
10051 .everest-forms-custom-image-delete {
10052 display: inline-flex;
10053 position: relative;
10054
10055 i {
10056 display: none;
10057 }
10058
10059 &:hover {
10060 &::before {
10061 content: '';
10062 background: #000;
10063 position: absolute;
10064 width: 100%;
10065 height: 100%;
10066 opacity: 0.6;
10067 }
10068
10069 i {
10070 position: absolute;
10071 display: contents;
10072
10073 &:hover {
10074 &::before,
10075 &::after {
10076 transform: translate(-50%, -50%) scale(1.1);
10077 }
10078 }
10079
10080 &::before {
10081 content: '';
10082 background: #d52626;
10083 width: 42px;
10084 height: 42px;
10085 position: absolute;
10086 border-radius: 50%;
10087 top: 50%;
10088 left: 50%;
10089 transform: translate(-50%, -50%);
10090 }
10091
10092 &::after {
10093 content: '\e906';
10094 position: absolute;
10095 font-size: 22px;
10096 color: #fff;
10097 top: 50%;
10098 left: 50%;
10099 transform: translate(-50%, -50%);
10100 }
10101 }
10102 }
10103 }
10104 }
10105 }
10106
10107 #everest-forms-builder {
10108 .everest-forms-options {
10109 padding-left: 20px;
10110 }
10111
10112 .evf-tab-content {
10113 .evf-quiz-section {
10114 .enable-quiz-head {
10115 background: #f8f9fa;
10116 margin-left: -20px;
10117 margin-top: -20px;
10118 margin-right: -20px;
10119 padding: 20px 20px 0;
10120 border-bottom: 1px solid #e0e3e6;
10121
10122 label {
10123 font-size: 14px;
10124 }
10125 }
10126
10127 .evf-quiz-reporting {
10128 .everest-forms-panel-field-radio {
10129 .row {
10130 display: flex;
10131 align-items: center;
10132 margin-bottom: 10px;
10133
10134 input {
10135 margin: 0 4px 0 0;
10136 }
10137
10138 input[type='radio']='radio'] {
10139 position: relative !important;
10140
10141 &:checked {
10142 background: #f6f5f8;
10143 border-color: #7545bb;
10144
10145 &::before {
10146 content: '' !important;
10147 position: absolute !important;
10148 inset: 0 !important;
10149 margin: auto !important;
10150 float: none !important;
10151 display: block !important;
10152 border-radius: 50% !important;
10153 width: 0.5rem !important;
10154 height: 0.5rem !important;
10155 background: #fff !important;
10156 background-color: #7545bb !important;
10157 outline: 4px solid transparent !important;
10158 }
10159 }
10160 }
10161
10162 label {
10163 margin-bottom: 0;
10164 }
10165 }
10166 }
10167 }
10168
10169 .evf-quiz-settings {
10170 padding-left: 20px;
10171
10172 .everest-forms-overall-feedback {
10173 max-width: 800px;
10174 border: 1px solid transparent;
10175
10176 > div > label {
10177 padding: 0 10px;
10178 margin: 0 0 10px -10px;
10179 background: $color-white;
10180 display: inline-block;
10181 transform: translateY(-50%);
10182 }
10183
10184 .everest-forms-panel-field {
10185 margin-bottom: 0;
10186 }
10187
10188 .everest-forms-options {
10189 padding-left: 0;
10190 }
10191
10192 .overall-feedback-option {
10193 .evf-form-group {
10194 padding: 20px;
10195 position: relative;
10196 margin-bottom: 20px;
10197 border-radius: 4px;
10198 border: 1px solid $color_gray-lighten;
10199 background: #fcfcfd;
10200
10201 input {
10202 &.score_from {
10203 pointer-events: none;
10204 background: $color_gray-light-skin;
10205 }
10206 }
10207
10208 .evf-disabled {
10209 cursor: not-allowed;
10210
10211 input {
10212 pointer-events: none;
10213 background: $color_gray-light-skin;
10214 }
10215 }
10216
10217 .feedback-label-group {
10218 flex: 1;
10219 display: flex;
10220 margin-bottom: 15px;
10221
10222 .feedback-input-group {
10223 flex: 1;
10224 margin-right: 15px;
10225
10226 label {
10227 margin-bottom: 6px;
10228 }
10229
10230 .feedback-input-value {
10231 display: flex;
10232 align-items: center;
10233 position: relative;
10234
10235 input {
10236 padding-right: 40px;
10237 }
10238
10239 span {
10240 width: 40px;
10241 height: 40px;
10242 display: flex;
10243 align-items: center;
10244 justify-content: center;
10245 position: absolute;
10246 right: 0;
10247 background: $color_gray-more-lighten;
10248 border: 1px solid $color-gray-lighten;
10249 border-radius: 0 4px 4px 0;
10250 }
10251 }
10252
10253 &:last-child {
10254 margin-right: 0;
10255 }
10256 }
10257 }
10258
10259 .remove_feedback {
10260 cursor: pointer;
10261 position: absolute;
10262 top: 3px;
10263 right: 3px;
10264 color: $color_gray-base;
10265
10266 &:hover {
10267 color: $red;
10268 }
10269 }
10270 }
10271
10272 .add_feedback {
10273 display: block;
10274 text-align: right;
10275 margin-left: auto;
10276 background: #7e3bd0;
10277 padding: 6px 16px;
10278 border: none;
10279 border-radius: 3px;
10280 font-size: 12px;
10281 font-weight: 400;
10282 color: #ffffff;
10283 margin-top: 20px;
10284 }
10285 }
10286 }
10287 }
10288 }
10289
10290 // Likert-table and Scale rating table
10291 table {
10292 &.everest-forms-likert-table,
10293 &.everest-froms-likert-field-preview,
10294 &.everest-forms-scale-rating-table {
10295 input {
10296 display: none;
10297 }
10298
10299 label {
10300 margin-bottom: 0;
10301 }
10302 }
10303
10304 // Likert-table
10305 &.everest-forms-likert-table,
10306 &.everest-froms-likert-field-preview {
10307 background: $color-white;
10308 width: 100%;
10309 overflow: hidden;
10310 margin-bottom: 5px;
10311 border: 1px solid $color_gray-lighten;
10312
10313 input,
10314 select {
10315 border-color: $color_gray-lighten;
10316 }
10317
10318 label {
10319 &::before {
10320 height: 16px;
10321 width: 16px;
10322 content: '';
10323 border: 1px solid $color_gray-lighten;
10324 display: block;
10325 margin: 0 auto;
10326 }
10327 }
10328
10329 input[type='radio']='radio'] {
10330 + label {
10331 &::before {
10332 border-radius: 50%;
10333 }
10334 }
10335 }
10336
10337 select {
10338 height: 20px;
10339 width: 70px;
10340 opacity: 0.6;
10341 font-size: 12px;
10342 }
10343
10344 th,
10345 td {
10346 padding: 10px;
10347 height: 42px;
10348 word-break: break-word;
10349 }
10350
10351 th {
10352 font-size: 12px;
10353 font-weight: 400;
10354 text-align: center;
10355 }
10356
10357 thead {
10358 th {
10359 background: $color_gray-light-skin;
10360 border-bottom: 1px solid $color_gray-lighten;
10361 }
10362 }
10363
10364 tbody {
10365 tr {
10366 text-align: left;
10367
10368 th {
10369 text-align: left;
10370 }
10371
10372 td {
10373 text-align: center;
10374
10375 &:last-child {
10376 border-right: none;
10377 }
10378 }
10379
10380 &:nth-child(even) {
10381 th,
10382 td {
10383 background: $color_gray-light-skin;
10384 }
10385 }
10386 }
10387 }
10388 }
10389
10390 // Scale rating table
10391 &.everest-forms-scale-rating-table {
10392 width: 100%;
10393 table-layout: fixed;
10394
10395 thead {
10396 tr {
10397 th {
10398 font-size: 12px;
10399 font-weight: 400;
10400 padding-bottom: 10px;
10401
10402 .lowest-rating {
10403 float: left;
10404 }
10405
10406 .highest-rating {
10407 float: right;
10408 }
10409 }
10410 }
10411 }
10412
10413 tbody {
10414 tr {
10415 td {
10416 border: 1px solid $color_gray-lighten;
10417 height: 40px;
10418 border-right: none;
10419 background: $color_gray-light-skin;
10420 text-align: center;
10421
10422 &:last-child {
10423 border-right: 1px solid $color_gray-lighten;
10424 }
10425 }
10426 }
10427 }
10428 }
10429 }
10430 }
10431 }
10432
10433 #everest-forms-builder {
10434 .everest-forms-panel-field-radio {
10435 .row {
10436 input[type='radio']='radio'] {
10437 position: relative;
10438
10439 &:checked {
10440 border-color: #7545bb;
10441
10442 &::before {
10443 content: '';
10444 position: absolute;
10445 inset: 0;
10446 margin: auto;
10447 display: block;
10448 border-radius: 50%;
10449 width: 0.5rem;
10450 height: 0.5rem;
10451 background-color: #7545bb;
10452 border: none;
10453 }
10454 }
10455 }
10456 }
10457 }
10458 }
10459
10460 .evf-survey-choices {
10461 &[data-choice-type='drop_down_choices']='drop_down_choices'] {
10462 input[type='text']='text'] {
10463 width: 74%;
10464 }
10465 }
10466 }
10467
10468 // Quiz
10469 .evf-correct-answers {
10470 li {
10471 margin-bottom: 10px;
10472 }
10473 }
10474
10475 /**
10476 * Analytic Table Dashboard
10477 */
10478 .evf-survey-loader {
10479 display: block;
10480 padding: 70px;
10481 background: $color-white;
10482 box-shadow: 0 1px 5px rgba(51, 56, 64, 0.1);
10483
10484 .evf-loading.evf-loading-active {
10485 margin: 0 auto;
10486 float: none;
10487 display: block;
10488 }
10489 }
10490
10491 .everest-forms-single-survey-container {
10492 border-top: 1px solid $color_gray-lighten;
10493 margin: 20px 0;
10494
10495 .everest-forms-survey-block {
10496 margin-right: 0;
10497 margin-top: 25px;
10498 }
10499
10500 .survey-block-chart-content {
10501 .survey-block-chart-overview {
10502 max-height: 329px;
10503 }
10504 }
10505
10506 .everest-forms-survey-summary {
10507 max-height: 455px;
10508 overflow-x: hidden;
10509 overflow-y: auto;
10510 }
10511 }
10512
10513 .full-survey-entries-header {
10514 padding: 20px 0;
10515 margin-bottom: 35px;
10516 border-bottom: 1px solid $color_gray-lighten;
10517
10518 select {
10519 height: 36px;
10520 padding: 0 10px;
10521 font-size: 16px;
10522 font-weight: 600;
10523 border-radius: 3px;
10524 }
10525
10526 .everest-forms-btn {
10527 vertical-align: middle;
10528 }
10529 }
10530
10531 .everest-forms-survey-block {
10532 padding: 20px;
10533 background: $color-white;
10534 margin-right: 20px;
10535 margin-bottom: 30px;
10536 border-radius: 8px;
10537 box-shadow: 0 1px 5px rgba(51, 56, 64, 0.1);
10538 position: relative;
10539
10540 .everest-forms-survey-header {
10541 margin-top: 0;
10542
10543 .everest-forms-survey-selection {
10544 label {
10545 top: -35px;
10546 position: absolute;
10547 padding: 5px 10px;
10548 border-radius: 3px;
10549 background: $color-white;
10550 box-shadow: 0 2px 2px rgba(159, 175, 199, 0.6);
10551 }
10552 }
10553 }
10554
10555 &.evf-empty-data {
10556 display: flex;
10557 align-items: center;
10558
10559 .evf-icon-circle {
10560 padding: 20px;
10561 background: transparentize($color_gray-lighten, 0.75);
10562 display: inline-flex;
10563 border-radius: 50%;
10564 margin-right: 20px;
10565
10566 svg {
10567 height: 64px;
10568 width: 64px;
10569 fill: $color_gray-base;
10570 }
10571 }
10572 }
10573 }
10574
10575 .everest-forms-survey-header {
10576 display: flex;
10577 align-items: center;
10578 justify-content: space-between;
10579 margin: 35px 0 20px;
10580
10581 .everest-forms-survey-selection {
10582 display: flex;
10583 align-items: center;
10584 position: relative;
10585
10586 .form-header-name {
10587 margin-right: 15px;
10588 }
10589
10590 .survey-type-select {
10591 position: relative;
10592 margin-right: 15px;
10593
10594 label {
10595 left: 0;
10596 right: 0;
10597 top: -22px;
10598 position: absolute;
10599 text-align: center;
10600 font-style: italic;
10601 }
10602
10603 select {
10604 &.survey-type {
10605 margin: 0;
10606 height: 36px;
10607 padding: 0 5px;
10608 font-size: 14px;
10609 min-width: 170px;
10610 border-radius: 3px;
10611 font-weight: normal;
10612 }
10613 }
10614 }
10615
10616 .evf-analytic-button {
10617 margin-left: 15px;
10618 }
10619
10620 .survey-type {
10621 margin: 10px 0 0;
10622 font-size: 16px;
10623 box-shadow: none;
10624 font-weight: 600;
10625 }
10626 }
10627
10628 .evf-analytic-action-nav {
10629 ul {
10630 margin: 0;
10631 display: flex;
10632
10633 li {
10634 margin-bottom: 0;
10635 margin-right: 15px;
10636
10637 &:last-child {
10638 margin-right: 0;
10639 }
10640 }
10641 }
10642 }
10643 }
10644
10645 .box-wrap {
10646 background: $color-white;
10647 display: flex;
10648 justify-content: space-between;
10649 border: 1px solid $color_gray-lighten;
10650 border-radius: 8px;
10651 }
10652
10653 .survey-block-average-overview {
10654 display: flex;
10655 flex-wrap: wrap;
10656
10657 .box-wrap {
10658 flex: 1;
10659 align-items: center;
10660 margin: 0 10px 20px;
10661
10662 &:first-child {
10663 margin-left: 0;
10664 }
10665
10666 &:last-child {
10667 margin-right: 0;
10668 }
10669 }
10670
10671 .response-detail {
10672 color: $color_gray-light;
10673 display: flex;
10674 flex-direction: column;
10675 font-size: 16px;
10676 padding: 20px;
10677
10678 strong {
10679 font-size: 36px;
10680 line-height: 1;
10681 margin-bottom: 5px;
10682 color: $color_gray-dark;
10683 }
10684 }
10685
10686 .icon-thumbnail {
10687 padding: 20px;
10688 display: flex;
10689 border-left: 1px solid $color_gray-lighten;
10690
10691 svg {
10692 height: 48px;
10693 width: 48px;
10694 fill: $everestforms;
10695 border-radius: 4px;
10696 background: transparentize($everestforms, 0.85);
10697 padding: 10px;
10698 }
10699 }
10700 }
10701
10702 .survey-block-chart-content {
10703 width: 60%;
10704 padding: 0 20px;
10705 border-right: 1px solid $color_gray-lighten;
10706
10707 .chart-tab-action {
10708 padding: 15px 0;
10709 text-align: right;
10710 border-bottom: 1px solid $color_gray-lighten;
10711
10712 button {
10713 width: 35px;
10714 height: 35px;
10715 border: none;
10716 line-height: 1;
10717 cursor: pointer;
10718 margin-left: 10px;
10719 border-radius: 4px;
10720 background: $color_gray-more-lighten;
10721 transition: all 0.25s ease 0s;
10722
10723 &.current-tab-active,
10724 &:hover {
10725 color: $color-white;
10726 background: $everestforms;
10727
10728 svg {
10729 fill: $color-white;
10730 }
10731 }
10732
10733 svg {
10734 width: 20px;
10735 height: 20px;
10736 fill: $color_gray-normal;
10737 transition: all 0.25s ease 0s;
10738 }
10739 }
10740 }
10741
10742 .survey-block-chart-overview {
10743 height: 370px;
10744 padding: 50px 0;
10745 background: $color-white;
10746 }
10747 }
10748
10749 .everest-forms-survey-summary {
10750 flex: 1;
10751 padding: 20px;
10752 overflow: auto;
10753
10754 table {
10755 width: 100%;
10756 border-spacing: 0;
10757 border-radius: 4px;
10758 border: 1px solid $color_gray-lighten;
10759
10760 th,
10761 td {
10762 padding: 10px;
10763 }
10764
10765 thead {
10766 th {
10767 background: $color_gray-light-skin;
10768 border-bottom: 1px solid $color_gray-lighten;
10769
10770 &:first-child {
10771 text-align: left;
10772 border-radius: 4px 0 0 0;
10773 }
10774
10775 &:last-child {
10776 text-align: right;
10777 border-radius: 0 4px 0 0;
10778 }
10779 }
10780 }
10781
10782 tbody {
10783 tr {
10784 &:nth-child(even) {
10785 th,
10786 td {
10787 background: $color_gray-light-skin;
10788 }
10789 }
10790
10791 td {
10792 &:last-child {
10793 text-align: right;
10794 }
10795 }
10796 }
10797 }
10798
10799 &.evf-likert-chart-table {
10800 th,
10801 td {
10802 text-align: center;
10803 }
10804
10805 thead {
10806 th {
10807 &:last-child {
10808 text-align: center;
10809 }
10810 }
10811 }
10812
10813 tbody {
10814 tr {
10815 td {
10816 &:last-child {
10817 text-align: center;
10818 }
10819 }
10820 }
10821 }
10822 }
10823 }
10824
10825 .summary-chart-wrapper {
10826 width: 100%;
10827 border-spacing: 0;
10828 border-radius: 4px;
10829 border: 1px solid $color_gray-lighten;
10830
10831 .summary-chart-header {
10832 background: $color_gray-light-skin;
10833 border-bottom: 1px solid $color_gray-lighten;
10834 border-radius: 4px 4px 0 0;
10835 margin: 0;
10836 padding: 15px 10px;
10837 font-size: 14px;
10838 }
10839
10840 .summary-chart-body {
10841 display: flex;
10842 flex-wrap: wrap;
10843
10844 .survey-chart-row {
10845 flex: 1;
10846 padding: 15px 5px;
10847 position: relative;
10848 text-align: center;
10849
10850 &:first-child {
10851 flex: 100%;
10852 border-bottom: 1px solid $color_gray-lighten;
10853 padding: 30px;
10854
10855 .survey-chart-column {
10856 &:last-child {
10857 font-size: 22px;
10858 color: $everestforms;
10859 margin-top: 10px;
10860 }
10861 }
10862 }
10863
10864 svg {
10865 width: 200px !important;
10866 margin: 0 auto;
10867 }
10868
10869 .progressbar-text {
10870 font-size: 28px;
10871 font-weight: 600;
10872 position: absolute;
10873 }
10874
10875 .survey-chart-column {
10876 margin: 5px 0;
10877 font-size: 14px;
10878 font-weight: 600;
10879 }
10880 }
10881 }
10882 }
10883
10884 /**
10885 * Star Rating Table
10886 **/
10887 .approx-rating-result {
10888 padding: 20px;
10889 margin: 10px 0;
10890
10891 .approx-rating-label {
10892 font-size: 48px;
10893 line-height: 1;
10894 margin-bottom: 10px;
10895 }
10896
10897 .total-reviews {
10898 font-size: 16px;
10899 font-weight: 600;
10900 color: $color_gray-base;
10901 }
10902 }
10903
10904 .summary-chart-rating {
10905 margin: 0 20px;
10906 padding: 20px 0;
10907 border-top: 1px solid $color_gray-lighten;
10908
10909 .survey-chart-row {
10910 margin-bottom: 15px;
10911
10912 .survey-chart-column {
10913 display: flex;
10914 justify-content: space-between;
10915
10916 &:first-child {
10917 margin-bottom: 5px;
10918 }
10919
10920 .rating-progress {
10921 flex: 1;
10922 height: 5px;
10923 display: flex;
10924 overflow: hidden;
10925 background: $color_gray-lighten;
10926 border-radius: 3px;
10927
10928 .progress-bar {
10929 display: flex;
10930 flex-direction: column;
10931 justify-content: center;
10932 color: $color-white;
10933 text-align: center;
10934 white-space: nowrap;
10935 background: $everestforms;
10936 transition: width 0.6s ease;
10937 }
10938 }
10939 }
10940 }
10941 }
10942
10943 &::-webkit-scrollbar {
10944 width: 8px;
10945 }
10946
10947 &::-webkit-scrollbar-track {
10948 background: $color_gray-more-lighten;
10949 }
10950
10951 &::-webkit-scrollbar-thumb {
10952 background: transparentize($color_gray-normal, 0.5);
10953 border-radius: 4px;
10954 }
10955
10956 &::-webkit-scrollbar-thumb:hover {
10957 background: transparentize($color_gray-normal, 0.25);
10958 }
10959 }
10960
10961 /**
10962 * quiz entry
10963 */
10964 #everest-forms-entry-fields:not(.postbox) {
10965 .correct_answer {
10966 background: rgba(0, 255, 43, 0.1);
10967 padding: 7px;
10968 }
10969
10970 .wrong_answer {
10971 background: rgba(255, 0, 0, 0.1);
10972 padding: 7px;
10973 }
10974
10975 table {
10976 tbody {
10977 th {
10978 display: flex;
10979 justify-content: space-between;
10980 }
10981
10982 tr {
10983 td {
10984 span {
10985 margin-bottom: 7px;
10986
10987 &:last-child {
10988 margin-bottom: 0;
10989 }
10990 }
10991 }
10992 }
10993 }
10994 }
10995 }
10996
10997 /**
10998 * Yes/No field.
10999 */
11000 .everest-forms-field {
11001 .yes-no-preview {
11002 display: flex;
11003 column-gap: 24px;
11004
11005 &.text-only {
11006 input {
11007 text-align: center;
11008 width: 80px;
11009 padding: 8px 0;
11010 border: none;
11011 outline: 1px solid;
11012
11013 &:nth-child(1) {
11014 outline-color: #008000;
11015 background: #eeffee;
11016 }
11017
11018 &:nth-child(2) {
11019 outline-color: #fa5252;
11020 background: #fff1f1;
11021 }
11022 }
11023 }
11024
11025 &.icon-text {
11026 .yes-no-icon {
11027 display: inline-flex;
11028 column-gap: 16px;
11029 align-items: center;
11030 }
11031 }
11032 }
11033 }
11034
11035 //General settings
11036 .everest-forms-settings {
11037 display: flex;
11038 background: #f4f4f4 !important;
11039 min-height: 100vh;
11040
11041 .everest-forms-settings-container {
11042 flex: 1;
11043 padding: 20px;
11044 // background: inherit;
11045 // background: #f4f4f4 !important;
11046 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
11047
11048 .everest-forms-options-header {
11049 &--top {
11050 h3 {
11051 font-size: 24px;
11052 margin-bottom: 10px;
11053 }
11054 }
11055 }
11056
11057 .everest-forms-card {
11058 background: #f1f1f1;
11059 border-radius: 5px;
11060 padding: 20px;
11061 margin-bottom: 20px;
11062
11063 .everest-forms-global-settings {
11064 display: flex;
11065 align-items: flex-start;
11066 margin-bottom: 10px;
11067
11068 @media screen and (max-width: 1260px) {
11069 flex-direction: column;
11070 gap: 8px;
11071 align-items: flex-start;
11072 }
11073
11074 label {
11075 flex: 1;
11076 font-weight: bold;
11077 }
11078
11079 &--field {
11080 flex: 2;
11081 width: 100%;
11082 }
11083
11084 &.evf-restapi-key-wrapper {
11085 .forminp-restapi_key {
11086 align-items: center;
11087 gap: 8px !important;
11088
11089 .evf-restapi-key {
11090 max-width: 530px;
11091 width: 100%;
11092 min-height: 38px;
11093 padding: 0 12px;
11094 color: #383838;
11095 border-color: #e1e1e1;
11096 }
11097
11098 .everest-forms-generate-api-key {
11099 min-height: 36px;
11100 padding: 0 16px;
11101 font-size: 14px;
11102 line-height: 24px;
11103 }
11104 }
11105 }
11106
11107 &--field {
11108 &.forminp-input_test_button {
11109 display: flex;
11110 align-items: center;
11111
11112 input[type='email']='email'] {
11113 max-width: 260px;
11114 width: 100%;
11115 min-height: 38px;
11116 border-color: #e1e1e1;
11117 padding: 0 12px;
11118 color: #383838;
11119 font-size: 14px;
11120 line-height: 24px;
11121 }
11122
11123 .everest_forms_send_routine_report_test_email {
11124 min-height: 36px;
11125 padding: 0 16px;
11126 font-size: 14px;
11127 line-height: 24px;
11128 align-content: center;
11129 background: #faf8fc;
11130 border: 1px solid #7545bb;
11131 color: #7545bb;
11132
11133 &:focus {
11134 box-shadow: none;
11135 outline: none;
11136 outline-offset: 0;
11137 }
11138 }
11139 }
11140
11141 &.forminp-link {
11142 .button.everest_forms_license_key_deactivation {
11143 min-height: 32px;
11144 padding: 0 16px;
11145 font-size: 14px;
11146 line-height: 24px;
11147 color: #ffffff;
11148 background: #f25656 !important;
11149 align-content: center;
11150 }
11151 }
11152 }
11153
11154 &:has(.forminp-toggle),
11155 &:has(.forminp-display_div),
11156 &:has(.forminp-display_div) {
11157 label {
11158 padding-top: 0 !important;
11159 }
11160 }
11161 }
11162 }
11163
11164 .submit {
11165 text-align: right;
11166
11167 .everest-forms-btn {
11168 padding: 10px 20px;
11169 font-size: 16px;
11170 border-radius: 5px;
11171 cursor: pointer;
11172 background: #6c63ff;
11173 color: #fff;
11174 border: none;
11175
11176 &:hover {
11177 background: #5b52e6;
11178 }
11179 }
11180 }
11181 }
11182 }
11183
11184 // Everest Forms Global Settings Design ReVamp CSS
11185 #wpcontent {
11186 #wpbody-content {
11187 padding-bottom: 42px;
11188 }
11189 }
11190
11191 .everest-forms_page_evf-settings,
11192 .everest-forms_page_evf-tools {
11193 .everest-forms {
11194 // padding: 20px;
11195 overflow: hidden;
11196 }
11197 }
11198
11199 .everest-forms {
11200 .everest-forms-settings {
11201 padding: 24px !important;
11202 gap: 24px;
11203 background: transparent;
11204
11205 @media screen and (max-width: 1180px) {
11206 flex-direction: column;
11207 }
11208
11209 &-wrapper {
11210 // box-shadow: 0px 6px 26px 0px rgba(10, 10, 10, 0.08);
11211 background: #ffffff;
11212 flex: 1;
11213 display: flex;
11214 max-width: 100%;
11215 border-radius: 8px;
11216 }
11217
11218 &-main {
11219 &:has(#message) {
11220 .everest-forms-toggle-wrapper {
11221 top: 76px;
11222 }
11223 }
11224 }
11225
11226 .everest-forms-settings-container {
11227 #message {
11228 border: 1px solid #e6e6e6;
11229 border-left-width: 4px;
11230 border-left-color: #00a32a;
11231 box-shadow: unset;
11232 margin-top: 0;
11233 margin-bottom: 20px;
11234
11235 &.error {
11236 border-left-color: #d63638 !important;
11237 }
11238 }
11239 }
11240
11241 .everest-forms-header {
11242 display: flex;
11243 flex-direction: column;
11244 background: #fafafc;
11245 border: 1px solid #e1e1e1;
11246 padding: 0px 0 20px;
11247 width: 300px;
11248 overflow-x: hidden;
11249 max-width: 100%;
11250 transition: all 0.3s;
11251 border-radius: 8px 0 0 8px;
11252
11253 @media screen and (max-width: 1300px) {
11254 width: 220px;
11255 }
11256
11257 &--top {
11258 text-align: center;
11259 padding-bottom: 30px;
11260 border-bottom: 1px solid #ededed;
11261
11262 &-logo {
11263 display: flex;
11264 align-items: center;
11265 justify-content: center;
11266
11267 img {
11268 max-height: 70px;
11269 }
11270 }
11271 }
11272
11273 &--nav {
11274 height: 100%;
11275
11276 // Tab item container
11277 .evf-nav__tab-item {
11278 display: flex;
11279 flex-direction: column;
11280
11281 // Rotate arrow when active and has sub-sections
11282 &:has(.evf-scroll-ui) {
11283 .nav-tab-active {
11284 .evf-nav__link-label svg {
11285 // transform: rotate(90deg);
11286 }
11287 }
11288 }
11289
11290 .evf-scroll-ui {
11291 border-left: 4px solid transparent;
11292 background: #ffffff;
11293 }
11294 }
11295
11296 .evf-nav-tab-wrapper {
11297 display: flex;
11298 flex-direction: column;
11299 gap: 1px;
11300 background: transparent;
11301 position: relative;
11302 overflow: unset !important;
11303
11304 .evf-nav__link {
11305 width: 100%;
11306 display: flex;
11307 padding: 16px 20px;
11308 align-items: center;
11309 gap: 16px;
11310 min-height: 54px;
11311 border-bottom: 1px solid #e1e1e1;
11312 position: relative;
11313 border-radius: 0;
11314 transition: all 0.3s ease-in-out;
11315
11316 &::before {
11317 content: '';
11318 background: #7545bb;
11319 width: 4px;
11320 height: 100%;
11321 position: absolute;
11322 top: 0;
11323 left: 0;
11324 opacity: 0;
11325 transition: all 0.3s ease-in-out;
11326 }
11327
11328 &::after {
11329 content: '';
11330 background: #fff;
11331 width: 8px;
11332 height: 100%;
11333 position: absolute;
11334 top: 0;
11335 right: -4px;
11336 opacity: 0;
11337 transition: all 0.3s ease-in-out;
11338 }
11339
11340 &-icon {
11341 display: flex;
11342 align-items: center;
11343 justify-content: center;
11344
11345 svg {
11346 width: 20px;
11347 height: 20px;
11348
11349 path {
11350 fill: #4e4e4e;
11351 transition: all 0.3s ease-in-out;
11352 }
11353 }
11354 }
11355
11356 &-label {
11357 display: flex;
11358 align-items: center;
11359 width: 100%;
11360 opacity: 1;
11361 transition: all 0.4s ease-in-out;
11362
11363 > p {
11364 width: 100%;
11365 margin: 0;
11366 font-size: 15px;
11367 font-weight: 500;
11368 line-height: 21px;
11369 color: #4e4e4e;
11370 transition: all 0.3s ease-in-out;
11371 }
11372
11373 svg {
11374 width: 20px;
11375 height: 20px;
11376 transition: transform 0.3s ease-in-out;
11377
11378 path {
11379 transition: stroke 0.3s ease-in-out;
11380 }
11381 }
11382 }
11383
11384 &:hover,
11385 &.nav-tab-active {
11386 background: #ffffff;
11387 margin-bottom: 0;
11388 // gap: 24px;
11389
11390 &::before {
11391 opacity: 1;
11392 }
11393
11394 .evf-nav__link {
11395 &-icon {
11396 svg {
11397 path {
11398 fill: #7545bb;
11399 }
11400 }
11401 }
11402
11403 &-label {
11404 > p {
11405 color: #7545bb;
11406 }
11407
11408 svg {
11409 path {
11410 stroke: #7545bb;
11411 }
11412 }
11413 }
11414 }
11415 }
11416
11417 &.nav-tab-active {
11418 background: #ffffff;
11419
11420 &::before,
11421 &::after {
11422 opacity: 1;
11423 }
11424 }
11425 }
11426
11427 #evf-settings-collapse {
11428 margin: 0;
11429 padding: 16px 20px;
11430 min-height: 54px;
11431 background: transparent;
11432 border: 1px solid transparent;
11433 cursor: pointer;
11434 transition: all 0.3s ease-in-out;
11435
11436 &::before,
11437 &::after {
11438 content: none;
11439 }
11440
11441 .evf-nav__link-label {
11442 line-height: 21px;
11443 }
11444
11445 .evf-nav-icon {
11446 display: flex;
11447 align-items: center;
11448 justify-content: center;
11449 min-width: 20px;
11450 flex-shrink: 0;
11451
11452 img {
11453 width: 20px;
11454 height: 20px;
11455 transition: all 0.3s ease-in-out;
11456 }
11457 }
11458
11459 &:hover {
11460 background: #7545bb;
11461 color: #ffffff;
11462
11463 .evf-nav-icon {
11464 img {
11465 filter: brightness(0) saturate(100%) invert(100%) sepia(0%)
11466 saturate(7487%) hue-rotate(137deg) brightness(89%)
11467 contrast(114%);
11468 }
11469 }
11470 }
11471 }
11472
11473 .ps__rail {
11474 &-x {
11475 display: none;
11476 }
11477 }
11478 }
11479
11480 .evf-scroll-ui {
11481 // max-height: 300px;
11482 // overflow-y: auto;
11483 padding: 0;
11484 margin-top: 0;
11485 animation: slideDown 0.3s ease;
11486
11487 &::-webkit-scrollbar {
11488 width: 4px;
11489 }
11490
11491 &::-webkit-scrollbar-track {
11492 background: transparent;
11493 }
11494
11495 &::-webkit-scrollbar-thumb {
11496 background: #d1d5db;
11497 border-radius: 2px;
11498 }
11499
11500 &::-webkit-scrollbar-thumb:hover {
11501 background: #9ca3af;
11502 }
11503 }
11504
11505 .evf-subsections {
11506 list-style: none;
11507 margin: 0;
11508 padding: 8px 0;
11509 background: transparent;
11510 position: relative;
11511
11512 &::before {
11513 content: '';
11514 position: absolute;
11515 left: 27px;
11516 top: 27px;
11517 width: 1px;
11518 height: calc(100% - 16px - 36px);
11519 background: #e1e1e1;
11520 z-index: 1;
11521 }
11522
11523 li {
11524 margin: 0;
11525 padding: 0;
11526 position: relative;
11527
11528 a {
11529 display: flex;
11530 align-items: center;
11531 padding: 12px 20px 12px 52px;
11532 text-decoration: none;
11533 color: #6b7280;
11534 font-size: 14px;
11535 font-weight: 500;
11536 line-height: 21px;
11537 position: relative;
11538 background: transparent;
11539 transition: color 0.2s ease;
11540
11541 &::before {
11542 content: '';
11543 position: absolute;
11544 left: 23px;
11545 top: 50%;
11546 transform: translateY(-50%);
11547 width: 10px;
11548 height: 10px;
11549 background: #e1e1e1;
11550 border-radius: 50%;
11551 z-index: 2;
11552 transition: all 0.2s ease;
11553 }
11554
11555 &.current {
11556 color: #7545bb;
11557
11558 &::before {
11559 background: #7545bb;
11560 }
11561 }
11562
11563 &:hover {
11564 color: #7545bb;
11565 }
11566
11567 &:focus {
11568 outline: none;
11569 box-shadow: none;
11570 }
11571 }
11572 }
11573 }
11574 }
11575
11576 &.collapsed {
11577 width: 60px;
11578
11579 .everest-forms-header--top {
11580 &-logo {
11581 justify-content: flex-start;
11582
11583 img {
11584 max-height: 50px;
11585 all: unset;
11586 margin-left: 15px;
11587 }
11588 }
11589 }
11590
11591 .everest-forms-header--nav {
11592 height: 100%;
11593
11594 .evf-nav__tab-item {
11595 display: flex;
11596 flex-direction: column;
11597 position: relative;
11598
11599 // Add vertical line for parent items that have children
11600 &:has(.evf-subsections) {
11601 position: relative;
11602
11603 // Main vertical connecting line
11604 > .evf-scroll-ui::before {
11605 content: '';
11606 position: absolute;
11607 left: 28px;
11608 top: 0;
11609 bottom: 12px;
11610 width: 1px;
11611 background: #e1e1e1;
11612 z-index: 1;
11613 }
11614 }
11615
11616 &:has(.evf-scroll-ui) {
11617 .nav-tab-active {
11618 .evf-nav__link-label svg {
11619 transform: rotate(90deg);
11620 }
11621 }
11622 }
11623
11624 .evf-scroll-ui {
11625 border-left: 4px solid transparent;
11626 background: #ffffff;
11627 position: relative;
11628 }
11629 }
11630
11631 .evf-subsections {
11632 list-style: none;
11633 margin: 0;
11634 padding: 0;
11635 background: transparent;
11636 position: relative;
11637
11638 li {
11639 margin: 0;
11640 padding: 0;
11641 position: relative;
11642
11643 // Vertical connecting line
11644 &::before {
11645 content: '';
11646 position: absolute;
11647 left: 28px;
11648 top: 0;
11649 bottom: 0;
11650 width: 1px;
11651 background: #dcdcdc;
11652 z-index: 1;
11653 }
11654
11655 // Hide vertical line after last item
11656 &:last-child::before {
11657 bottom: 50%;
11658 }
11659
11660 // Horizontal line connecting to text
11661 &::after {
11662 content: '';
11663 position: absolute;
11664 left: 28px;
11665 top: 50%;
11666 transform: translateY(-50%);
11667 width: 16px;
11668 height: 1px;
11669 background: #dcdcdc;
11670 z-index: 1;
11671 }
11672
11673 a {
11674 display: flex;
11675 align-items: center;
11676 padding: 12px 20px 12px 52px;
11677 text-decoration: none;
11678 color: #6b7280;
11679 font-size: 14px;
11680 font-weight: 500;
11681 line-height: 21px;
11682 border-left: 3px solid transparent;
11683 position: relative;
11684 background: transparent;
11685
11686 &.current {
11687 color: #7545bb;
11688 border-left-color: #7545bb;
11689 font-weight: 600;
11690 }
11691
11692 &:focus {
11693 outline: none;
11694 box-shadow: none;
11695 }
11696 }
11697 }
11698 }
11699
11700 @media screen and (max-width: 1300px) {
11701 .evf-subsections li {
11702 &::before {
11703 left: 24px;
11704 }
11705
11706 &::after {
11707 left: 24px;
11708 width: 14px;
11709 }
11710
11711 a {
11712 padding: 10px 16px 10px 44px;
11713 font-size: 13px;
11714 }
11715 }
11716 }
11717
11718 @media screen and (max-width: 782px) {
11719 .evf-subsections li {
11720 &::before {
11721 left: 20px;
11722 }
11723
11724 &::after {
11725 left: 20px;
11726 width: 12px;
11727 }
11728
11729 a {
11730 padding: 10px 16px 10px 40px;
11731 font-size: 13px;
11732 }
11733 }
11734 }
11735 }
11736
11737 // Animation for sliding down sub-sections
11738 @keyframes slideDown {
11739 from {
11740 opacity: 0;
11741 transform: translateY(-10px);
11742 }
11743
11744 to {
11745 opacity: 1;
11746 transform: translateY(0);
11747 }
11748 }
11749
11750 // Mobile responsive
11751 @media screen and (max-width: 782px) {
11752 .everest-forms-header--nav {
11753 .evf-subsections li a {
11754 padding: 10px 16px 10px 40px;
11755 font-size: 13px;
11756
11757 &.current::before {
11758 left: 20px;
11759 }
11760 }
11761
11762 .evf-scroll-ui {
11763 max-height: 250px;
11764 }
11765 }
11766 }
11767 }
11768 }
11769
11770 @keyframes slideDown {
11771 from {
11772 opacity: 0;
11773 transform: translateY(-10px);
11774 }
11775
11776 to {
11777 opacity: 1;
11778 transform: translateY(0);
11779 }
11780 }
11781
11782 @media screen and (max-width: 782px) {
11783 .everest-forms-header--nav {
11784 .evf-subsections li a {
11785 padding: 10px 16px 10px 40px;
11786 font-size: 13px;
11787
11788 &.current::before {
11789 left: 20px;
11790 }
11791 }
11792
11793 .evf-scroll-ui {
11794 max-height: 250px;
11795 }
11796 }
11797 }
11798
11799 .everest-forms-settings-container {
11800 padding: 32px 20px 52px 32px;
11801 box-shadow: none;
11802 border: 1px solid #e1e1e1;
11803 border-left: none;
11804 border-radius: 0 8px 8px 0;
11805
11806 .everest-forms-settings-main {
11807 position: relative;
11808
11809 .everest-forms-toggle-wrapper {
11810 position: absolute;
11811 right: 0;
11812 top: 6px;
11813 display: flex;
11814 align-items: center;
11815 gap: 6px;
11816
11817 .evf-toggle-section {
11818 .everest-forms-toggle-form {
11819 margin: 0;
11820 }
11821 }
11822
11823 .everest-forms-toggle-text {
11824 font-size: 14px;
11825 line-height: 24px;
11826 color: #383838;
11827 font-weight: 500;
11828 }
11829 }
11830
11831 p {
11832 a {
11833 color: #5b6edb;
11834 text-decoration: underline;
11835 }
11836 }
11837 }
11838
11839 .everest-forms-options-header {
11840 margin-bottom: 32px;
11841
11842 &--top {
11843 display: flex;
11844 align-items: center;
11845 padding-bottom: 24px;
11846 border-bottom: 1px solid #e1e1e1;
11847
11848 .evf-forms-options-header-header--top-icon {
11849 display: flex;
11850 align-items: center;
11851 justify-content: center;
11852 width: 40px;
11853 height: 40px;
11854 border-radius: 4px;
11855 background: #eee8f7;
11856 margin-right: 16px;
11857
11858 svg {
11859 width: 20px;
11860 height: 20px;
11861
11862 path {
11863 fill: #7545bb;
11864 }
11865 }
11866 }
11867
11868 h3 {
11869 margin: 0;
11870 color: #383838;
11871 font-size: 24px;
11872 font-weight: 600;
11873 line-height: 34px;
11874 }
11875 }
11876 }
11877
11878 .everest-forms-card {
11879 padding: 0;
11880 background: transparent;
11881 border: 0;
11882 display: flex;
11883 flex-direction: column;
11884 gap: 24px;
11885
11886 .everest-forms-global-settings {
11887 gap: 20px;
11888 margin-bottom: 0;
11889
11890 &:has(label[for='everest_forms_email_template']),
11891 &:has(label[for='everest_forms_pdf_template']) {
11892 align-items: flex-start;
11893 }
11894
11895 > label {
11896 color: #383838;
11897 font-size: 14px;
11898 font-weight: 500;
11899 line-height: 24px;
11900 max-width: 300px;
11901 width: 100%;
11902 flex: unset;
11903 display: flex;
11904 align-items: center;
11905 gap: 8px;
11906 padding-top: 6px;
11907
11908 .everest-forms-help-tip {
11909 width: 14px;
11910 height: 14px;
11911 transition: filter 0.3s ease;
11912
11913 &::after {
11914 // settings help icon
11915 color: transparent;
11916 background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12ZM23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12Z' fill='%23383838'/%3E%3Cpath d='M11 16V12C11 11.4477 11.4477 11 12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16Z' fill='%23383838'/%3E%3Cpath d='M12.0098 7C12.5621 7 13.0098 7.44772 13.0098 8C13.0098 8.55228 12.5621 9 12.0098 9H12C11.4477 9 11 8.55228 11 8C11 7.44772 11 7 12 7H12.0098Z' fill='%23383838'/%3E%3C/svg%3E");
11917 background-repeat: no-repeat;
11918 }
11919
11920 &:hover::after {
11921 filter: brightness(0) saturate(100%) invert(26%) sepia(77%)
11922 saturate(1950%) hue-rotate(249deg) brightness(84%)
11923 contrast(81%);
11924 }
11925 }
11926 }
11927
11928 &--field {
11929 flex: 1;
11930
11931 &.forminp-input_test_button {
11932 .everest_forms_send_email_test {
11933 min-height: 36px;
11934 padding: 0 16px;
11935 font-size: 14px;
11936 line-height: 24px;
11937 align-content: center;
11938 background: #f6f3fa;
11939 border: 1px solid #7545bb;
11940 color: #7545bb;
11941 }
11942
11943 @media screen and (max-width: 782px) {
11944 display: flex;
11945 flex-direction: column;
11946 gap: 12px;
11947
11948 input[type='email']='email'] {
11949 width: 100%;
11950 margin-right: 0 !important;
11951 }
11952
11953 .button.everest_forms_send_email_test {
11954 margin-bottom: 0;
11955 width: max-content;
11956 }
11957 }
11958 }
11959
11960 fieldset {
11961 > label {
11962 font-size: 14px;
11963 line-height: 22px;
11964 font-weight: 400;
11965
11966 strong {
11967 font-weight: 600;
11968 }
11969
11970 a {
11971 color: #7545bb;
11972 text-decoration: underline;
11973
11974 &:focus {
11975 box-shadow: none;
11976 outline: none;
11977 }
11978 }
11979 }
11980 }
11981
11982 &.forminp-radio {
11983 .everest-forms-recaptcha-type {
11984 margin: 0;
11985 display: flex;
11986 flex-wrap: wrap;
11987 align-items: center;
11988 // gap: 24px;
11989
11990 // @media screen and (max-width: 1260px) {
11991 // gap: 16px;
11992 // }
11993
11994 li {
11995 margin-bottom: 0;
11996
11997 > label {
11998 display: flex;
11999 align-items: center;
12000 gap: 6px;
12001 font-size: 14px;
12002 line-height: 24px;
12003 font-weight: 400;
12004 color: #383838;
12005 }
12006 }
12007 }
12008
12009 fieldset {
12010 > ul {
12011 display: flex;
12012 align-items: center;
12013 gap: 30px;
12014
12015 li {
12016 > label {
12017 font-size: 14px;
12018 line-height: 24px;
12019 color: #383838;
12020 font-weight: 500;
12021 }
12022 }
12023 }
12024 }
12025
12026 &-image {
12027 &.everest-forms-recaptcha-settings {
12028 ul {
12029 flex-wrap: wrap;
12030 margin-bottom: 0;
12031
12032 li {
12033 > label {
12034 display: flex;
12035 flex-direction: row;
12036 align-items: center;
12037 gap: 8px;
12038 border: 1px solid #e5e5e5;
12039 padding: 6px 12px 6px 6px;
12040 border-radius: 4px;
12041 min-width: 190px;
12042 cursor: pointer;
12043 color: #383838;
12044 font-size: 14px;
12045 font-weight: 500;
12046 line-height: 20px;
12047 transition: all 0.3s;
12048
12049 &:hover {
12050 background: #f6f5f8;
12051 border-color: #7545bb;
12052 }
12053
12054 img {
12055 width: 40px;
12056 height: auto;
12057 border-radius: 2px;
12058 border: 0.6px solid #e5e5e5;
12059 }
12060 }
12061
12062 input[type='radio']='radio'] {
12063 display: none !important;
12064
12065 &:checked ~ label {
12066 background: #f6f5f8;
12067 border-color: #7545bb;
12068 }
12069 }
12070 }
12071 }
12072 }
12073 }
12074 }
12075
12076 &.forminp-text,
12077 &.forminp-number,
12078 &.forminp-email,
12079 &.forminp-color {
12080 input {
12081 height: 38px;
12082 border-radius: 4px;
12083 width: 100%;
12084 background: #ffffff;
12085 border-color: #e1e1e1;
12086 padding: 0 12px;
12087 color: #383838;
12088 font-size: 14px;
12089 line-height: 24px;
12090
12091 &:focus {
12092 border-color: #7545bb;
12093 outline: none;
12094 box-shadow: none;
12095 }
12096 }
12097 }
12098
12099 &.forminp-select {
12100 .select2-container {
12101 width: 100% !important;
12102 }
12103
12104 .select2-selection {
12105 height: 36px;
12106 margin-bottom: 0;
12107 border-color: #e1e1e1;
12108
12109 &__rendered {
12110 padding-left: 12px;
12111 padding-right: 12px;
12112 line-height: 34px;
12113 }
12114
12115 &__arrow {
12116 // height: 34px;
12117 }
12118 }
12119
12120 .select2-container--focus,
12121 .select2-container--open {
12122 .select2-selection {
12123 border-color: #7545bb;
12124 box-shadow: none;
12125 }
12126 }
12127 }
12128
12129 &.forminp-radio-image {
12130 fieldset {
12131 ul {
12132 display: flex;
12133 align-items: center;
12134 gap: 20px;
12135 margin-top: 0;
12136 margin-bottom: 16px;
12137
12138 li {
12139 margin-bottom: 0;
12140
12141 input {
12142 display: none;
12143
12144 &:checked ~ label {
12145 border: 1px solid #7545bb;
12146 }
12147 }
12148
12149 label {
12150 display: flex;
12151 flex-direction: column;
12152 border: 1px solid #e1e1e1;
12153 padding: 8px;
12154 border-radius: 6px;
12155 gap: 12px;
12156 font-weight: 500;
12157 cursor: pointer;
12158
12159 img {
12160 border: 1px solid #eee8f7;
12161 border-radius: 4px;
12162 }
12163 }
12164 }
12165 }
12166
12167 .description {
12168 margin: 0;
12169 font-size: 14px;
12170 line-height: 20px;
12171 }
12172 }
12173 }
12174
12175 &.forminp-link {
12176 .everest_forms_send_email_test {
12177 border-radius: 4px;
12178 border: 1px solid #e1e1e1;
12179 background: #f6f7f7;
12180 padding: 4px 12px;
12181 color: #383838;
12182 font-weight: 500;
12183 display: flex;
12184 align-items: center;
12185 justify-content: center;
12186 gap: 6px;
12187 width: max-content;
12188
12189 &::after {
12190 content: '';
12191 background-image: url('../images/icons/send-icon.svg');
12192 background-repeat: no-repeat;
12193 background-size: 100%;
12194 background-position: center;
12195 width: 14px;
12196 height: 14px;
12197 }
12198 }
12199 }
12200
12201 &.forminp-multiselect {
12202 .select2-container {
12203 width: 100% !important;
12204
12205 .select2-selection {
12206 &.select2-selection--multiple {
12207 height: 38px;
12208 padding: 5px;
12209 }
12210
12211 &__rendered {
12212 display: block;
12213 }
12214
12215 &__choice {
12216 flex-direction: row-reverse;
12217 padding: 4px 8px 4px 10px;
12218 margin: 0;
12219 margin-right: 4px;
12220 }
12221 }
12222 }
12223 }
12224
12225 &.forminp-textarea {
12226 textarea {
12227 width: 100%;
12228 border-color: #e1e1e1;
12229 padding: 8px 12px;
12230 }
12231 }
12232
12233 &.forminp-select {
12234 select {
12235 width: 100%;
12236 height: 36px;
12237 border-color: #e1e1e1;
12238 padding-left: 12px;
12239 padding-right: 12px;
12240
12241 &:focus {
12242 border-color: #7545bb;
12243 outline: none;
12244 box-shadow: none;
12245 }
12246 }
12247 }
12248
12249 &.forminp-color {
12250 position: relative;
12251
12252 .colorpickpreview {
12253 width: 26px;
12254 height: 26px;
12255 border-radius: 3px;
12256 position: absolute;
12257 top: 5px;
12258 left: 6px;
12259 border: 1px solid #e9e9e9;
12260 }
12261
12262 input {
12263 padding-left: 36px;
12264 }
12265 }
12266
12267 &.forminp-image {
12268 .evf-button {
12269 border-radius: 4px;
12270 border: 1px solid #e1e1e1;
12271 background: #f6f7f7;
12272 display: flex;
12273 padding: 10px 12px 10px 10px;
12274 justify-content: center;
12275 align-items: center;
12276 gap: 8px;
12277 color: #383838;
12278 font-size: 14px;
12279 font-weight: 400;
12280 line-height: 14px;
12281 gap: 6px;
12282
12283 &::before {
12284 content: '';
12285 background-image: url('../images/icons/upload-icon.svg');
12286 background-repeat: no-repeat;
12287 background-size: 100%;
12288 background-position: center;
12289 width: 14px;
12290 height: 14px;
12291 }
12292 }
12293
12294 .everest-forms-custom-image-delete,
12295 .evf-image-container {
12296 object-fit: cover;
12297 display: inline-flex;
12298 position: relative;
12299 border-radius: 8px;
12300 height: 100px;
12301 width: auto;
12302 overflow: hidden;
12303 object-fit: cover;
12304 object-position: center;
12305 margin: auto;
12306 display: inline-flex;
12307 position: relative;
12308 justify-content: center;
12309 cursor: pointer;
12310 user-select: none;
12311
12312 i {
12313 display: none;
12314 }
12315
12316 &:hover {
12317 &::before {
12318 content: '';
12319 background: #000;
12320 position: absolute;
12321 width: 100%;
12322 height: 100%;
12323 opacity: 0.6;
12324 }
12325
12326 i {
12327 position: absolute;
12328 display: contents;
12329
12330 &:hover {
12331 &::before,
12332 &::after {
12333 transform: translate(-50%, -50%) scale(1.1);
12334 }
12335 }
12336
12337 &::before {
12338 content: '';
12339 background: #d52626;
12340 width: 42px;
12341 height: 42px;
12342 position: absolute;
12343 border-radius: 50%;
12344 top: 50%;
12345 left: 50%;
12346 transform: translate(-50%, -50%);
12347 }
12348
12349 &::after {
12350 content: '\e907';
12351 position: absolute;
12352 font-size: 22px;
12353 color: #fff;
12354 top: 50%;
12355 left: 50%;
12356 transform: translate(-50%, -50%);
12357 }
12358 }
12359 }
12360 }
12361 }
12362 }
12363 }
12364 }
12365
12366 > p {
12367 margin: 0;
12368 font-size: 14px;
12369 line-height: 24px;
12370 margin-bottom: 20px;
12371 }
12372 }
12373
12374 &-premium {
12375 &-sidebar {
12376 // width: 300px;
12377 // max-width: 100%;
12378 // padding: 18px 10px 26px 10px;
12379 // transition: all 0.3s;
12380
12381 h2 {
12382 color: #222222;
12383 }
12384
12385 &.everest-forms-hidden {
12386 // margin-right: -325px;
12387 // display: unset;
12388 }
12389 }
12390 }
12391
12392 .submit {
12393 margin: 0;
12394 padding: 0;
12395 text-align: left;
12396
12397 .everest-forms-btn {
12398 border-radius: 4px;
12399 background: #7545bb;
12400 padding: 8px 16px;
12401 color: #ffffff;
12402 font-size: 14px;
12403 font-weight: 500;
12404 line-height: 22px;
12405 transition: all 0.3s ease-in-out;
12406
12407 &:hover {
12408 background: #9159e3;
12409 }
12410 }
12411 }
12412 }
12413 }
12414
12415 everest-forms-field-option-row-rating-icon {
12416 .everest-forms-rating-icon-container {
12417 display: flex;
12418 flex-wrap: wrap;
12419
12420 label {
12421 flex: 1;
12422 padding: 4px;
12423 display: flex;
12424 justify-content: center;
12425 background: $color_gray-more-lighten;
12426 border: 1px solid $color_gray-lighten;
12427 }
12428
12429 input[type='radio']='radio'] {
12430 display: none;
12431 }
12432
12433 svg {
12434 width: 32px;
12435 height: 32px;
12436 font-size: 18px;
12437 fill: adjust-color($color_gray-normal, $saturation: +4%, $lightness: -2%);
12438 }
12439
12440 input:checked {
12441 + label {
12442 color: $color-white;
12443 background: $everestforms;
12444 border-color: $everestforms;
12445
12446 svg {
12447 fill: $color-white;
12448 }
12449 }
12450 }
12451 }
12452 }
12453
12454 // WordPress main sidebar is closed, builder Sidebar Collapse Button Design Fix
12455 .folded {
12456 #evf-collapse {
12457 &.open {
12458 left: 36px !important;
12459 }
12460
12461 &.close {
12462 left: 435px !important;
12463 }
12464 }
12465 }
12466
12467 body {
12468 &.evf-premium-sidebar-hidden {
12469 .everest-forms-settings-premium-sidebar {
12470 margin-right: -885px;
12471 display: unset;
12472
12473 @media screen and (max-width: 1180px) {
12474 display: none;
12475 }
12476 }
12477 }
12478
12479 &.evf-premium-sidebar-show {
12480 .everest-forms-settings-premium-sidebar {
12481 display: block;
12482 width: 300px;
12483 max-width: 100%;
12484 padding: 18px 10px 26px 10px;
12485 transition: all 0.3s;
12486
12487 @media screen and (max-width: 1180px) {
12488 width: 100%;
12489 }
12490 }
12491 }
12492 }
12493
12494 #everest-forms-dashboard {
12495 background: #fafafc;
12496 }
12497
12498 .evf-oxy-element {
12499 .everest-forms {
12500 display: flex;
12501 justify-content: center;
12502 align-items: center;
12503 padding: 30px 0;
12504
12505 .everest-forms-notice {
12506 margin-bottom: 0;
12507
12508 &::before {
12509 top: 50%;
12510 left: 16px;
12511 transform: translateY(-50%);
12512 line-height: 20px;
12513 margin-right: 0;
12514 }
12515 }
12516 }
12517 }
12518
12519 .everest-forms-tabs {
12520 display: flex;
12521 list-style: none;
12522 padding: 0;
12523 border-bottom: 1px solid #ccc;
12524 margin-bottom: 15px;
12525
12526 li {
12527 padding: 10px 15px;
12528 cursor: pointer;
12529 background: #f7f7f7;
12530 font-weight: 500;
12531
12532 &.active {
12533 background: #fff;
12534 }
12535 }
12536 }
12537
12538 .everest-forms_page_evf-tools {
12539 .everest-forms-tab-content {
12540 display: none;
12541
12542 &.active {
12543 display: block;
12544 }
12545 }
12546 }
12547
12548 body {
12549 background: #f0f0f1;
12550
12551 &.everest-forms_page_evf-tools {
12552 .everest-forms {
12553 &-settings {
12554 &-container {
12555 .everest-forms-tabs-wrapper {
12556 .everest-forms-tabs {
12557 margin: 0;
12558 gap: 32px;
12559 border-bottom: 1px solid #e1e1e1;
12560 margin-bottom: 36px;
12561
12562 li {
12563 color: #383838;
12564 font-size: 15px;
12565 font-weight: 500;
12566 line-height: 21px;
12567 padding: 0 0 14px;
12568 margin-bottom: 0;
12569 background: transparent;
12570 position: relative;
12571
12572 &::before {
12573 content: '';
12574 background: transparent;
12575 width: 100%;
12576 height: 3px;
12577 position: absolute;
12578 bottom: -2px;
12579 border-radius: 50px;
12580 }
12581
12582 &:hover {
12583 color: #7545bb;
12584 }
12585
12586 &.active {
12587 color: #7545bb;
12588
12589 &::before {
12590 background: #7545bb;
12591 }
12592 }
12593 }
12594 }
12595
12596 .everest-forms-tab-content {
12597 .everest-forms-import-form,
12598 .everest-forms-import-entries-wrapper,
12599 .everest-forms-export-form,
12600 .evf-tools-export-entries {
12601 margin-top: 0;
12602 padding: 24px 0 0 !important;
12603 box-shadow: none;
12604 border-radius: 8px;
12605 border: 1px solid #e9e9e9;
12606 background: #ffffff;
12607
12608 p,
12609 .everest-forms-file-upload,
12610 .evf-enhanced-select,
12611 .select2-container {
12612 padding: 0 24px !important;
12613 }
12614
12615 .select2 {
12616 &-container {
12617 min-height: 38px;
12618 margin-top: 8px;
12619 margin-bottom: 24px;
12620 padding-right: 0 !important;
12621 padding-left: 0 !important;
12622 margin-left: 24px;
12623 }
12624
12625 &-selection {
12626 min-height: 38px;
12627 border-color: #e9e9e9;
12628
12629 &__rendered {
12630 height: 100%;
12631 vertical-align: middle;
12632 padding: 5px 12px;
12633 flex-wrap: wrap;
12634 box-sizing: border-box;
12635
12636 .select2-search {
12637 margin: 0;
12638
12639 &__field {
12640 margin-bottom: 0 !important;
12641 padding: 0;
12642 }
12643 }
12644 }
12645
12646 &__arrow {
12647 top: 5px;
12648 right: 5px;
12649 }
12650 }
12651 }
12652
12653 h3 {
12654 display: none;
12655 }
12656
12657 p {
12658 color: #383838;
12659 font-size: 14px;
12660 font-weight: 400;
12661 line-height: 24px;
12662 margin: 0;
12663 }
12664
12665 .evf-form-and-csv-upload {
12666 .everest-forms-upload-csv-container {
12667 p {
12668 color: #383838;
12669 font-size: 14px;
12670 font-weight: 400;
12671 line-height: 24px;
12672 }
12673 }
12674 }
12675
12676 .everest-forms-file-upload {
12677 margin: 8px 0 24px;
12678 height: max-content;
12679
12680 input[type='file']='file'] {
12681 min-height: max-content;
12682 }
12683
12684 label {
12685 display: inline-flex;
12686 align-items: center;
12687 gap: 16px;
12688 padding: 6px;
12689 border-radius: 4px;
12690 border: 1px solid #e1e1e1;
12691 left: 24px;
12692
12693 .everest-forms-btn {
12694 padding: 8px 12px;
12695 color: #4e4e4e;
12696 font-size: 14px;
12697 font-weight: 400;
12698 line-height: 20px;
12699 margin-right: 0;
12700 background: #f0f0f0;
12701 }
12702
12703 #import-file-name,
12704 #import-file-name-entry {
12705 color: #4e4e4e;
12706 font-size: 14px;
12707 font-weight: 400;
12708 line-height: 20px;
12709 }
12710 }
12711 }
12712
12713 p.description {
12714 color: #383838;
12715 margin-bottom: 20px;
12716
12717 i {
12718 color: #646970;
12719 }
12720 }
12721
12722 .publishing-action {
12723 border-top: 1px solid #e9e9e9;
12724 padding-left: 24px;
12725 padding-right: 24px;
12726 padding-bottom: 24px;
12727 text-align: left;
12728
12729 .everest-forms-btn {
12730 padding: 8px 14px;
12731 color: #fff;
12732 font-size: 14px;
12733 font-weight: 500;
12734 line-height: 20px;
12735 background: #7545bb;
12736 }
12737 }
12738 }
12739
12740 .evf-tools-export-entries {
12741 .evf-tools-entries-export-options {
12742 &-fields,
12743 &-additional-info,
12744 &-format,
12745 &-date,
12746 &-search {
12747 padding: 0 24px;
12748
12749 h4 {
12750 margin: 0;
12751 }
12752
12753 .select2-container {
12754 padding-left: 0 !important;
12755 margin-bottom: 12px;
12756 margin-left: 0;
12757
12758 .selection {
12759 width: 350px;
12760 }
12761 }
12762
12763 input {
12764 margin-top: 8px;
12765 min-height: 38px;
12766 border-color: #e9e9e9;
12767 padding: 5px 12px;
12768
12769 &[name='date_range']='date_range'] {
12770 background: #fafafa;
12771 }
12772 }
12773
12774 .evf-tools-entries-export-options-export-format-select {
12775 margin: 8px 0 24px !important;
12776 min-height: 38px;
12777 border-color: #e9e9e9;
12778 padding: 5px 12px;
12779 }
12780
12781 &-options {
12782 display: grid;
12783 grid-template-columns: repeat(
12784 auto-fit,
12785 minmax(200px, 1fr)
12786 );
12787 gap: 12px;
12788
12789 select,
12790 input[type='text']='text'] {
12791 min-height: 38px;
12792 border-color: #e9e9e9;
12793 color: #383838;
12794 margin: 8px 0 0 !important;
12795
12796 &::placeholder {
12797 color: #6b6b6b;
12798 }
12799 }
12800 }
12801 }
12802 }
12803 }
12804 }
12805 }
12806
12807 .everest-forms-form-migrator {
12808 margin-top: 0;
12809 padding: 24px 0 0 !important;
12810 box-shadow: none;
12811 border-radius: 8px;
12812 border: 1px solid #e9e9e9;
12813 background: #ffffff;
12814
12815 p,
12816 .everest-forms-file-upload,
12817 .evf-enhanced-select,
12818 .select2-container {
12819 padding: 0 24px !important;
12820 }
12821
12822 .evf-fm-select-popular-form {
12823 display: flex;
12824 align-items: center;
12825 margin-top: 8px;
12826 margin-bottom: 24px;
12827
12828 .evf-loading {
12829 margin: 0 0 0 10px;
12830 }
12831 }
12832
12833 .select2 {
12834 &-container {
12835 display: flex;
12836 align-items: center;
12837 min-height: 38px;
12838 padding-right: 0 !important;
12839 padding-left: 0 !important;
12840 margin-left: 24px;
12841
12842 > .selection {
12843 flex: 1;
12844 min-width: 0;
12845 }
12846 }
12847
12848 &-selection {
12849 min-height: 38px;
12850 border-color: #e9e9e9;
12851
12852 &__rendered {
12853 height: 100%;
12854 vertical-align: middle;
12855 padding: 5px 12px;
12856 flex-wrap: wrap;
12857 box-sizing: border-box;
12858
12859 .select2-search {
12860 margin: 0;
12861
12862 &__field {
12863 margin-bottom: 0 !important;
12864 padding: 0;
12865 }
12866 }
12867 }
12868
12869 &__arrow {
12870 top: 5px;
12871 right: 5px;
12872 }
12873 }
12874 }
12875
12876 h3 {
12877 display: none;
12878 }
12879
12880 p {
12881 color: #383838;
12882 font-size: 14px;
12883 font-weight: 400;
12884 line-height: 24px;
12885 margin: 0;
12886 }
12887
12888 .evf-form-and-csv-upload {
12889 .everest-forms-upload-csv-container {
12890 p {
12891 color: #383838;
12892 font-size: 14px;
12893 font-weight: 400;
12894 line-height: 24px;
12895 }
12896 }
12897 }
12898
12899 .everest-forms-file-upload {
12900 margin: 8px 0 24px;
12901 height: max-content;
12902
12903 input[type='file']='file'] {
12904 min-height: max-content;
12905 }
12906
12907 label {
12908 display: inline-flex;
12909 align-items: center;
12910 gap: 16px;
12911 padding: 6px;
12912 border-radius: 4px;
12913 border: 1px solid #e1e1e1;
12914 left: 24px;
12915
12916 .everest-forms-btn {
12917 padding: 8px 12px;
12918 color: #4e4e4e;
12919 font-size: 14px;
12920 font-weight: 400;
12921 line-height: 20px;
12922 margin-right: 0;
12923 background: #f0f0f0;
12924 }
12925
12926 #import-file-name,
12927 #import-file-name-entry {
12928 color: #4e4e4e;
12929 font-size: 14px;
12930 font-weight: 400;
12931 line-height: 20px;
12932 }
12933 }
12934 }
12935
12936 p.description {
12937 color: #383838;
12938 margin-bottom: 20px;
12939
12940 i {
12941 display: none;
12942 }
12943 }
12944
12945 .publishing-action {
12946 border-top: 1px solid #e9e9e9;
12947 padding-left: 24px;
12948 padding-right: 24px;
12949 padding-bottom: 24px;
12950 text-align: left;
12951
12952 .everest-forms-btn {
12953 padding: 8px 14px;
12954 color: #fff;
12955 font-size: 14px;
12956 font-weight: 500;
12957 line-height: 20px;
12958 background: #7545bb;
12959 }
12960 }
12961
12962 .evf-fm-form-list-container {
12963 .evf-fm-forms-table-wrapper {
12964 padding: 0 24px 24px;
12965
12966 h4 {
12967 padding: 0;
12968 margin-bottom: 16px;
12969 }
12970
12971 table.evf-fm-forms-table {
12972 tbody {
12973 tr {
12974 border-bottom: 1px solid #dcdcdc;
12975
12976 th {
12977 width: 30px !important;
12978 }
12979
12980 td {
12981 font-size: 13px;
12982
12983 .evf-fm-import-actions {
12984 justify-content: flex-end;
12985 gap: 10px;
12986
12987 button {
12988 margin: 0;
12989 padding: 8px 10px;
12990 font-weight: 500;
12991
12992 &:disabled {
12993 background: #dfdfdf;
12994 cursor: not-allowed;
12995 pointer-events: none;
12996 }
12997
12998 &.evf-fm-import {
12999 &-single {
13000 border: 1px solid #7545bb;
13001 color: #7545bb;
13002 background: #f2f2f2;
13003
13004 &:hover {
13005 background: #7545bb;
13006 color: #ffffff;
13007 }
13008 }
13009 }
13010 }
13011 }
13012 }
13013 }
13014 }
13015 }
13016
13017 .evf-fm-import-selected-wrapper {
13018 margin: 24px 0 0;
13019 align-items: center;
13020
13021 .evf-fm-import-selected-btn {
13022 margin-top: 0;
13023 padding: 8px 14px;
13024 font-size: 14px;
13025 line-height: 20px;
13026 background: #7545bb;
13027 color: #ffffff;
13028 }
13029
13030 .evf-fm-pagination {
13031 padding-top: 0;
13032
13033 button {
13034 margin: 0;
13035 font-size: 14px;
13036 line-height: 20px;
13037 width: 32px;
13038 height: 32px;
13039 padding: 0;
13040 display: flex;
13041 align-items: center;
13042 justify-content: center;
13043 border-radius: 3px;
13044 }
13045 }
13046 }
13047 }
13048 }
13049 }
13050 }
13051 }
13052 }
13053 }
13054
13055 // .select2 {
13056 // &-container {
13057 // &--open {
13058 // .select2-dropdown {
13059 // width: 326px !important;
13060
13061 // &--above,
13062 // &--below {
13063 // left: 24px;
13064 // }
13065 // }
13066 // }
13067 // }
13068 // }
13069 }
13070
13071 .everest-forms-smart-smtp-page-features {
13072 &__wrapper {
13073 width: 730px;
13074 padding: 40px;
13075 gap: 32px;
13076 display: flex;
13077 flex-direction: column;
13078 margin: auto;
13079 background: #ffffff;
13080 border-radius: 8px;
13081 margin-top: 40px;
13082 border: 1px solid #e9e9e9;
13083
13084 @media only screen and (max-width: 768px) {
13085 width: 670px;
13086 }
13087
13088 @media only screen and (max-width: 400px) {
13089 width: 326px;
13090 margin: 16px;
13091 }
13092 }
13093
13094 &__images {
13095 img {
13096 @media only screen and (max-width: 400px) {
13097 height: 50px;
13098 }
13099 }
13100
13101 span {
13102 @media only screen and (max-width: 400px) {
13103 font-size: 2.5rem;
13104 }
13105 }
13106 }
13107 }
13108
13109 .everest-forms-smart-smtp-page-features {
13110 &__images {
13111 display: flex;
13112 justify-content: center;
13113 gap: 32px;
13114 align-items: center;
13115
13116 #everest-forms-smart-smtp-page-features__everest-forms-logo {
13117 background: #7545bb;
13118 padding: 6px;
13119 border-radius: 10px;
13120 }
13121
13122 span {
13123 font-size: 4.375rem;
13124 font-weight: 100;
13125 color: #dfdfdf;
13126 }
13127 }
13128
13129 &__heading {
13130 text-align: center;
13131 font-size: 1.5rem;
13132 font-weight: 600;
13133 margin-bottom: 0;
13134 color: #383838;
13135
13136 @media only screen and (max-width: 400px) {
13137 line-height: 1.8rem;
13138 }
13139 }
13140
13141 &__description {
13142 display: flex;
13143 justify-content: center;
13144 font-size: 14px;
13145 font-weight: 400;
13146 color: #383838;
13147 flex-direction: column;
13148 line-height: 1.31rem;
13149 align-items: center;
13150 padding: 0 65px;
13151
13152 @media only screen and (max-width: 400px) {
13153 padding: 0;
13154 text-align: center;
13155 margin-top: 0;
13156 margin-bottom: 0;
13157 line-height: 1.8rem;
13158 }
13159 }
13160
13161 &__listing {
13162 padding: 0 64px;
13163 display: grid;
13164 grid-template-columns: auto auto auto;
13165 font-size: 14px;
13166
13167 @media only screen and (max-width: 400px) {
13168 padding: 0;
13169 margin-top: 0;
13170 margin-bottom: 0;
13171 grid-template-columns: auto;
13172 }
13173
13174 li {
13175 display: flex;
13176 align-items: center;
13177 gap: 10px;
13178
13179 svg {
13180 width: 28px;
13181 height: 28px;
13182 }
13183 }
13184 }
13185 }
13186
13187 .everest-forms-smart-smtp-page-setup {
13188 &__wrapper {
13189 width: 730px;
13190 display: flex;
13191 flex-direction: column;
13192 margin: auto;
13193 background: #ffffff;
13194 border-radius: 8px;
13195 margin-top: 40px;
13196 border: 1px solid #e9e9e9;
13197 margin-bottom: 40px;
13198
13199 @media only screen and (max-width: 768px) {
13200 width: 670px;
13201 }
13202
13203 @media only screen and (max-width: 400px) {
13204 width: 326px;
13205 }
13206
13207 .everest_forms_install_and_activate_smart_smtp,
13208 .everest_forms_setup_smart_smtp {
13209 font-size: 0.875rem;
13210 font-weight: 600;
13211 }
13212 }
13213
13214 &__inner-wrapper {
13215 display: flex;
13216 margin: 0;
13217
13218 @media only screen and (max-width: 400px) {
13219 flex-direction: column;
13220 }
13221 }
13222 }
13223
13224 .everest-forms-smart-smtp-page {
13225 &__install-and-activate {
13226 display: flex;
13227 padding: 34px 30px;
13228 flex-direction: column;
13229 align-items: flex-start;
13230 gap: 24px;
13231 flex: 1 0 0;
13232 border-right: 1px solid #e9e9e9;
13233
13234 @media only screen and (max-width: 400px) {
13235 border-right: none;
13236 border-bottom: 6px solid #e9e9e9;
13237 }
13238 }
13239
13240 &__setup-smart-smtp {
13241 display: flex;
13242 height: 353px;
13243 padding: 34px 30px;
13244 flex-direction: column;
13245 align-items: flex-start;
13246 gap: 24px;
13247 flex: 1 0 0;
13248 }
13249
13250 &__installation-step-one {
13251 margin-bottom: 0;
13252 color: #7545bb;
13253 background: #f6f0ff;
13254 padding: 12px 24px;
13255 border-radius: 50%;
13256 font-size: 2rem;
13257 font-weight: 600;
13258 opacity: 0.7;
13259 margin-top: 0;
13260
13261 &__title {
13262 font-size: 1.5rem;
13263 line-height: 1.875rem;
13264 margin-bottom: 0;
13265 margin-top: 0;
13266 }
13267
13268 &__description {
13269 margin-top: 0;
13270 margin-bottom: 0;
13271 font-size: 0.875rem;
13272 }
13273 }
13274
13275 &__setup-step-two {
13276 margin-bottom: 0;
13277 color: #7545bb;
13278 background: #f6f0ff;
13279 padding: 12px 24px;
13280 border-radius: 50%;
13281 font-size: 2rem;
13282 font-weight: 600;
13283 opacity: 0.7;
13284 margin-top: 0;
13285
13286 &__title {
13287 font-size: 1.5rem;
13288 line-height: 1.875rem;
13289 margin-bottom: 0;
13290 margin-top: 0;
13291 }
13292
13293 &__description {
13294 margin-top: 0;
13295 margin-bottom: 0;
13296 font-size: 0.875rem;
13297 }
13298 }
13299
13300 &__setup-disabled {
13301 opacity: 0.7;
13302 }
13303
13304 &__support-links {
13305 font-size: 14px;
13306 text-align: center;
13307 margin-bottom: 40px;
13308 }
13309 }
13310
13311 .everest_forms_install_and_activated_smart_smtp {
13312 background: #bbb;
13313 opacity: 0.3;
13314 padding: 12px 20px;
13315 color: #363636;
13316 font-size: 14px;
13317 }
13318
13319 .everest-forms-form-listing__header {
13320 display: flex;
13321 padding: 0 24px;
13322 align-items: center;
13323 justify-content: space-between;
13324 border-bottom: 1px solid #e2e8f0;
13325 background: var(--white, #fff);
13326 margin-bottom: 40px;
13327 margin-top: -10px;
13328
13329 .everest-forms-form-listing__header-left {
13330 display: flex;
13331 align-items: center;
13332 justify-content: center;
13333 }
13334
13335 div#everest-forms-header__logo {
13336 display: flex;
13337 align-items: center;
13338 gap: 2px;
13339 height: 74px;
13340 }
13341
13342 button#evf-form-listing__screen-options {
13343 color: #222222;
13344 font-size: 14px;
13345 line-height: 21px;
13346 border-color: #eaeaea;
13347 border-radius: 4px;
13348 padding: 8px 16px;
13349 background: #eaeaea;
13350 }
13351
13352 button#show-settings-link {
13353 display: none;
13354 }
13355
13356 span#everest-forms-logo__separator {
13357 padding: 0 20px;
13358 color: #e2e8f0;
13359 font-size: 40px;
13360 font-weight: 100;
13361 }
13362
13363 a#everest-forms-form-listing__heading {
13364 font-size: 16px;
13365 text-decoration: none;
13366 font-weight: 600;
13367 color: #222222;
13368 }
13369 }
13370
13371 #everest-forms-list-table__container {
13372 background: #ffffff;
13373 // padding: 24px;
13374 // margin: 25px auto;
13375 border-radius: 7px;
13376
13377 table.wp-list-table {
13378 border-color: #dcdcdc;
13379 border-radius: 5px;
13380 margin-bottom: 16px;
13381 overflow: hidden;
13382
13383 a {
13384 color: #383838;
13385 transition: all 0.3s ease-in-out;
13386
13387 &:hover {
13388 color: #475bb2;
13389 }
13390 }
13391
13392 thead {
13393 tr {
13394 td,
13395 th {
13396 border-bottom-color: #dcdcdc;
13397 }
13398
13399 th {
13400 font-size: 14px;
13401 font-weight: 600;
13402 line-height: 24px;
13403 color: #383838;
13404
13405 &.sortable,
13406 &.sorted {
13407 padding: 0;
13408
13409 a {
13410 font-size: 14px;
13411 font-weight: 600;
13412 line-height: 24px;
13413 padding: 12px 8px;
13414 display: flex;
13415 align-items: center;
13416 gap: 8px;
13417
13418 &:focus {
13419 box-shadow: none;
13420 }
13421
13422 .sorting-indicators {
13423 gap: 4px;
13424
13425 .sorting-indicator {
13426 margin: 0;
13427 }
13428 }
13429 }
13430 }
13431 }
13432 }
13433 }
13434
13435 tbody {
13436 tr {
13437 td {
13438 &.username {
13439 img {
13440 border-radius: 5px0;
13441 margin-top: 2px;
13442 }
13443 }
13444
13445 &.actions {
13446 a {
13447 color: #475bb2;
13448 transition: all 0.3s ease-in-out;
13449 padding-bottom: 2px;
13450 position: relative;
13451
13452 &::before {
13453 content: '';
13454 background: #475bb2;
13455 width: 100%;
13456 height: 1px;
13457 position: absolute;
13458 bottom: 0;
13459 opacity: 0;
13460 transition: all 0.3s ease-in-out;
13461 }
13462
13463 &:hover {
13464 &::before {
13465 opacity: 1;
13466 }
13467 }
13468
13469 &:focus {
13470 box-shadow: none;
13471 outline: none;
13472 }
13473 }
13474 }
13475 }
13476 }
13477 }
13478 }
13479
13480 .tablenav {
13481 padding: 0;
13482 margin: 0 0 16px;
13483 height: auto;
13484
13485 &.bottom {
13486 margin-bottom: 0;
13487 }
13488
13489 .actions {
13490 display: flex;
13491 align-items: center;
13492 gap: 12px;
13493 padding-right: 16px;
13494
13495 select {
13496 min-height: 38px;
13497 margin: 0;
13498 border-color: #bababa;
13499
13500 &:hover {
13501 color: #475bb2;
13502 }
13503
13504 &:focus {
13505 box-shadow: none;
13506 border: 1px solid #475bb2;
13507 }
13508 }
13509
13510 input {
13511 &[type='submit']='submit'] {
13512 padding: 6px 14px;
13513 min-height: 38px;
13514 border-radius: 3px;
13515 border: 1px solid #7545bb;
13516 background: #f6f7f7;
13517 color: #7545bb;
13518 font-size: 14px;
13519 font-weight: 500;
13520 line-height: 150%;
13521 transition: all 0.3s ease-in-out;
13522 margin-right: 0;
13523
13524 &:hover {
13525 background: #f2f2f2;
13526 }
13527 }
13528 }
13529
13530 .evf-manage-tags {
13531 padding: 6px 14px;
13532 border-radius: 3px;
13533 border: 1px solid #7545bb;
13534 background: #f6f7f7;
13535 color: #7545bb;
13536 font-size: 14px;
13537 font-weight: 500;
13538 line-height: 150%;
13539 min-height: 38px;
13540 transition: all 0.3s ease-in-out;
13541
13542 &:disabled {
13543 pointer-events: none;
13544 }
13545
13546 &:hover {
13547 background: #f2f2f2;
13548 }
13549 }
13550
13551 &.bulkactions {
13552 .select2 {
13553 &-selection {
13554 min-height: 38px;
13555 max-height: 38px;
13556 padding-left: 8px;
13557 padding-right: 12px;
13558
13559 &:has(.select2-selection__choice) {
13560 padding-left: 0;
13561 }
13562
13563 &__rendered {
13564 min-height: 38px;
13565 }
13566 }
13567
13568 &-search {
13569 margin: 0;
13570 display: flex;
13571 align-items: center;
13572
13573 &__field {
13574 margin-bottom: 0;
13575 }
13576 }
13577
13578 &-container--focus,
13579 &-container--open {
13580 .select2-selection {
13581 box-shadow: none;
13582 outline: none;
13583 border-color: #7545bb !important;
13584 }
13585 }
13586 }
13587 }
13588 }
13589
13590 &-pages {
13591 margin-bottom: 0;
13592 }
13593 }
13594
13595 .evf-bulk-edit-forms-tags-container {
13596 display: flex;
13597 align-items: flex-end;
13598 margin-bottom: 20px;
13599 gap: 12px;
13600
13601 label {
13602 font-size: 14px;
13603 font-weight: 500;
13604 }
13605
13606 .tags-selects {
13607 display: flex;
13608 flex-direction: column;
13609 gap: 4px;
13610
13611 .select2 {
13612 &-selection {
13613 min-height: 38px;
13614 max-height: 38px;
13615 padding-left: 8px;
13616 padding-right: 12px;
13617
13618 &:has(.select2-selection__choice) {
13619 padding-left: 0;
13620 }
13621
13622 &__rendered {
13623 min-height: 38px;
13624 }
13625 }
13626
13627 &-search {
13628 margin: 0;
13629 display: flex;
13630 align-items: center;
13631
13632 &__field {
13633 margin-bottom: 0;
13634 }
13635 }
13636
13637 &-container--focus,
13638 &-container--open {
13639 .select2-selection {
13640 box-shadow: none;
13641 outline: none;
13642 border-color: #7545bb !important;
13643 }
13644 }
13645 }
13646 }
13647
13648 .evf-update-bulk-tags {
13649 padding: 6px 14px;
13650 border-radius: 3px;
13651 border: 1px solid #7545bb;
13652 background: #f6f7f7;
13653 color: #7545bb;
13654 font-size: 14px;
13655 font-weight: 500;
13656 line-height: 26px;
13657 height: 38px;
13658 margin-top: 0;
13659 transition: all 0.3s ease-in-out;
13660
13661 &:hover {
13662 background: #f2f2f2;
13663 }
13664 }
13665 }
13666
13667 div.everest-forms-list-table-container__header {
13668 display: flex;
13669 align-items: center;
13670 gap: 15px;
13671 margin-bottom: 15px;
13672
13673 a {
13674 color: #7545bb;
13675 border-color: #7545bb;
13676 top: 0;
13677 font-size: 14px;
13678 font-weight: 500;
13679 }
13680 }
13681 }
13682
13683 button#show-settings-link {
13684 display: none;
13685 }
13686
13687 .everest-forms-list-filters-row {
13688 display: flex;
13689 flex-wrap: wrap;
13690 justify-content: space-between;
13691 align-items: center;
13692 gap: 20px;
13693 // border-bottom: 1px solid #dcdcdc;
13694 padding-bottom: 24px;
13695 margin-bottom: 24px;
13696
13697 ul.subsubsub {
13698 font-size: 15px;
13699 margin: 0px;
13700
13701 li {
13702 font-weight: 600;
13703
13704 a .count {
13705 font-weight: 600;
13706 }
13707 }
13708 }
13709
13710 #everest-forms-list-search-form {
13711 width: 275px;
13712 position: relative;
13713
13714 #everest-forms-list-table-search-input {
13715 border-radius: 4px;
13716 border: 1px solid #bababa;
13717 background: #ffffff;
13718 padding: 3px 42px 3px 12px;
13719 width: 100%;
13720
13721 &::placeholder {
13722 color: #999999;
13723 }
13724
13725 &:focus {
13726 box-shadow: none;
13727 border: 1px solid #475bb2;
13728 }
13729 }
13730
13731 button {
13732 &#search-submit {
13733 position: absolute;
13734 border: 0;
13735 background: transparent;
13736 padding: 0;
13737 width: 18px;
13738 height: 18px;
13739 display: flex;
13740 align-items: center;
13741 justify-content: center;
13742 right: 12px;
13743 top: 8px;
13744
13745 svg {
13746 path {
13747 fill: #999999;
13748 }
13749 }
13750 }
13751 }
13752 }
13753 }
13754
13755 #everest-forms-panel-field-settings-form_tags-wrap {
13756 .select2-container {
13757 margin-bottom: 5px;
13758 width: 100% !important;
13759
13760 span.selection {
13761 width: 100% !important;
13762 }
13763
13764 .select2-selection--multiple {
13765 border-color: $color_gray-lighten;
13766 }
13767
13768 .select2-selection__choice {
13769 margin: 4px 4px 4px 0;
13770 }
13771
13772 .select2-search__field {
13773 min-height: 24px;
13774 line-height: 1.4;
13775 }
13776 }
13777 }
13778
13779 .evf-manage-tags-body {
13780 .tags-list {
13781 display: flex;
13782 flex-direction: row;
13783 flex-wrap: wrap;
13784
13785 .tag {
13786 margin-left: 6px;
13787 }
13788 }
13789 }
13790
13791 .evf-meta-key-input-wrapper {
13792 position: relative;
13793 display: inline-block;
13794 width: 100%;
13795
13796 .evf-meta-key-copy-btn {
13797 position: absolute;
13798 right: 4px;
13799 top: 0;
13800 transform: translateY(10%);
13801 color: #383838;
13802 font-size: 12px;
13803 font-weight: 400;
13804 cursor: pointer;
13805 text-decoration: underline;
13806 padding: 5px;
13807 background: #ffffff;
13808 width: 30px;
13809 height: 30px;
13810 }
13811
13812 .evf-edit-meta-key-icon {
13813 position: absolute;
13814 right: 8px;
13815 top: 50%;
13816 transform: translateY(-250%);
13817 cursor: pointer;
13818 display: flex;
13819 align-items: center;
13820 text-decoration: underline;
13821 }
13822
13823 .evf-meta-key-actions {
13824 position: absolute;
13825 right: 7px;
13826 top: 56%;
13827 transform: translateY(-180%);
13828 display: flex;
13829 gap: 6px;
13830 }
13831 }
13832
13833 .evf-meta-key-warning {
13834 margin-top: 8px;
13835 padding: 10px;
13836 background: #fff7f1;
13837 border-left: 3px solid orange;
13838 color: #6b4d00;
13839 font-size: 14px;
13840 display: flex;
13841 align-items: flex-start;
13842 gap: 8px;
13843
13844 .everest-forms-meta-key-warning-icon {
13845 flex-shrink: 0;
13846 margin-top: 2px;
13847 }
13848 }
13849
13850 .evf-disable-row {
13851 pointer-events: none;
13852 opacity: 0.5;
13853 }
13854
13855 .everest-forms-clean-talk-message-outer-wrapper {
13856 margin-top: 16px;
13857 margin-bottom: 6px;
13858 padding: 10px 11px;
13859 display: flex;
13860 align-items: center;
13861 gap: 8px;
13862 font-size: 13px;
13863
13864 &.everest-forms-clean-talk-empty-state {
13865 background: #fffaf5;
13866 border-left: 3px solid #ee9936;
13867 }
13868
13869 &.everest-forms-clean-talk-invalid-state {
13870 background: #fff4f4;
13871 border-left: 3px solid #f25656;
13872 }
13873
13874 &.everest-forms-clean-talk-success-state {
13875 background: #f5fff4;
13876 border-left: 3px solid #4cc741;
13877 }
13878
13879 .everest-forms-clean-talk-icon-box {
13880 margin-top: 5px;
13881 }
13882 }
13883
13884 .everest-forms-outer-wrapper-setting-body {
13885 padding: 20px;
13886 border: 1px solid #e9e9e9;
13887 border-radius: 8px;
13888 width: 100%;
13889
13890 .everest-forms-inner-wrapper-setting-body {
13891 margin-bottom: 20px;
13892 max-width: 100%;
13893 border-radius: 8px;
13894 padding: 22px 22px 0 22px;
13895 background: #fcfcfd;
13896 border: 1px solid #f4f4f4;
13897 }
13898 }
13899
13900 #evf-react-header-root > div {
13901 top: 0px !important;
13902 }
13903
13904 .wrap.everest-forms {
13905 padding: 0;
13906 margin: 0;
13907 }
13908
13909 .jconfirm-buttons .evf_entries_save_action {
13910 font-size: 15px;
13911 font-weight: 600;
13912 background: #7545bb;
13913 color: #fff;
13914 border-radius: 4px;
13915 padding: 10px 20px;
13916 text-transform: capitalize;
13917 }
13918
13919 .jconfirm {
13920 &-everest-forms-coupon__left {
13921 .jconfirm-box {
13922 max-width: 700px;
13923 width: 100%;
13924
13925 .jconfirm-title-c {
13926 text-align: left !important;
13927 }
13928
13929 .jconfirm-content-pane {
13930 margin-bottom: 0 !important;
13931
13932 .everest-forms-coupons__form {
13933 margin-bottom: 24px;
13934
13935 .everest-forms-coupons__create-coupon {
13936 width: auto;
13937 flex: 1;
13938 cursor: pointer;
13939
13940 > label {
13941 cursor: pointer;
13942 }
13943
13944 .everest-forms-coupon__description {
13945 font-size: 14px;
13946 line-height: 24px;
13947 margin: 0;
13948 }
13949 }
13950 }
13951 }
13952 }
13953 }
13954 }
13955
13956 .everest-forms-import-entries-wrapper {
13957 .evf-form-and-csv-upload {
13958 .select2-container {
13959 margin-bottom: 0 !important;
13960 .select2-dropdown {
13961 border: 1px solid #e1e1e1 !important;
13962 }
13963
13964 .select2-selection {
13965 min-width: 400px !important;
13966 color: #383838 !important;
13967
13968 .select2-selection__rendered:hover {
13969 color: #7545bb !important;
13970 }
13971 }
13972 }
13973 }
13974 }
13975
13976 .everest-forms-help-tooltip {
13977 color: transparent !important;
13978 background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12ZM23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12Z' fill='%23383838'/%3E%3Cpath d='M11 16V12C11 11.4477 11.4477 11 12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16Z' fill='%23383838'/%3E%3Cpath d='M12.0098 7C12.5621 7 13.0098 7.44772 13.0098 8C13.0098 8.55228 12.5621 9 12.0098 9H12C11.4477 9 11 8.55228 11 8C11 7.44772 11 7 12 7H12.0098Z' fill='%23383838'/%3E%3C/svg%3E");
13979 background-repeat: no-repeat !important;
13980 height: 14px !important;
13981 width: 14px !important;
13982 margin-left: 2px;
13983 display: inline-block;
13984
13985 &:hover {
13986 filter: brightness(0) saturate(100%) invert(26%) sepia(77%) saturate(1950%)
13987 hue-rotate(249deg) brightness(84%) contrast(81%);
13988 }
13989 }
13990
13991 .evf-tools-export-entries {
13992 .select2-container {
13993 min-width: 400px !important;
13994 .select2-selection {
13995 min-width: 400px !important;
13996 color: #383838 !important;
13997
13998 .select2-selection__rendered {
13999 min-width: 400px;
14000 }
14001 }
14002 }
14003 }
14004
14005 // Layout container buttons in the form builder sidebar.
14006 .evf-layout-container-btn {
14007 padding: 20px 8px;
14008 border: 1px solid #edeff7;
14009 width: 30.3%;
14010 color: #383838;
14011 font-weight: 400;
14012 cursor: grab;
14013
14014 &:active {
14015 cursor: grabbing;
14016 }
14017 border-radius: 4px;
14018 font-size: 12px;
14019 transition: all 0.3s ease-in-out;
14020 text-align: center;
14021 background: #fbfbfd;
14022 line-height: 150%;
14023 display: inline-flex;
14024 flex-direction: column;
14025 align-items: center;
14026 gap: 8px;
14027 background: #ffffff;
14028 display: flex;
14029 flex-direction: column;
14030 align-items: center;
14031 justify-content: center;
14032 gap: 10px;
14033 border: 1px solid #edeff7;
14034 border-radius: 4px;
14035 padding: 20px 8px;
14036 width: 30.3%;
14037
14038 svg {
14039 width: 36px;
14040 height: 24px;
14041 display: block;
14042 transition: opacity 0.3s ease-in-out;
14043 color: $evf_primary-color;
14044 fill: #6b6b6b;
14045 }
14046
14047 &:hover {
14048 color: $evf_primary-color;
14049 border-color: $evf_primary-color !important;
14050 background: #ffffff;
14051 cursor: grab;
14052
14053 svg {
14054 opacity: 1;
14055 fill: $evf_primary-color !important;
14056 }
14057 }
14058
14059 &:focus {
14060 outline: none;
14061 }
14062 }
14063
14064 // Row / add-strip targets while dragging a layout preset from the sidebar.
14065 .evf-layout-drop-target-hover {
14066 outline: none;
14067 background-color: transparent;
14068 }
14069
14070 // Hide empty-grid plus icon while the grid is active drop target.
14071 #everest-forms-builder .evf-admin-grid.evf-empty-grid.evf-item-hover::before {
14072 display: none !important;
14073 }
14074
14075 // Precise insertion line for layout drop (top/bottom).
14076 .evf-admin-row.evf-layout-insert-before,
14077 .evf-admin-row.evf-layout-insert-after {
14078 position: relative;
14079 }
14080
14081 .evf-admin-row.evf-layout-insert-before::before,
14082 .evf-admin-row.evf-layout-insert-after::after {
14083 content: '';
14084 position: absolute;
14085 left: 8px;
14086 right: 8px;
14087 height: 2px;
14088 background: $evf_primary-color;
14089 border-radius: 3px;
14090 z-index: 10000;
14091 }
14092
14093 .evf-admin-row.evf-layout-insert-before::before {
14094 top: -8px;
14095 }
14096
14097 .evf-admin-row.evf-layout-insert-after::after {
14098 bottom: -8px;
14099 }
14100
14101 .evf-admin-field-wrapper.evf-layout-insert-empty,
14102 [id^='part_']^='part_'].evf-layout-insert-empty {
14103 position: relative;
14104 }
14105
14106 .evf-admin-field-wrapper.evf-layout-insert-empty::before,
14107 [id^='part_']^='part_'].evf-layout-insert-empty::before {
14108 content: '';
14109 position: absolute;
14110 left: 8px;
14111 right: 8px;
14112 top: 0;
14113 height: 3px;
14114 background: $evf_primary-color;
14115 border-radius: 3px;
14116 box-shadow: 0 0 0 2px rgba(93, 150, 238, 0.12);
14117 z-index: 10000;
14118 }
14119
14120 // Add-row strip shows bottom insertion line.
14121 .evf-add-row.evf-layout-insert-after-all {
14122 position: relative;
14123 }
14124
14125 .evf-add-row.evf-layout-insert-after-all::after {
14126 content: '';
14127 position: absolute;
14128 left: 8px;
14129 right: 8px;
14130 bottom: -2px;
14131 height: 3px;
14132 background: $evf_primary-color;
14133 border-radius: 3px;
14134 box-shadow: 0 0 0 2px rgba(93, 150, 238, 0.12);
14135 z-index: 10000;
14136 }
14137
14138 // While dragging a layout preset, show each existing row boundary in the canvas.
14139 #everest-forms-builder.evf-is-dragging-layout-container {
14140 .evf-admin-field-container {
14141 .evf-admin-row {
14142 border-color: #c5cee0 !important;
14143 border-style: solid !important;
14144 border-radius: 4px;
14145 background-color: rgba(251, 251, 253, 0.85);
14146 box-shadow: inset 0 0 0 1px rgba(93, 150, 238, 0.12);
14147 }
14148 }
14149 }
14150
14151 .evf-builder-get-started {
14152 padding: 28px 24px;
14153
14154 h3 {
14155 margin: 0 0 8px;
14156 font-size: 26px;
14157 line-height: 1.2;
14158 font-weight: 600;
14159 color: #1f1f1f;
14160 }
14161
14162 > p {
14163 margin: 0;
14164 font-size: 15px;
14165 line-height: 26px;
14166 color: #6b6b6b;
14167 }
14168
14169 .evf-builder-get-started-steps {
14170 display: flex;
14171 align-items: center;
14172 gap: 12px;
14173 margin: 24px 0;
14174
14175 .step {
14176 display: inline-flex;
14177 align-items: center;
14178 gap: 10px;
14179 font-size: 14px;
14180 line-height: 1.2;
14181 color: #2d2d2d;
14182
14183 span {
14184 display: inline-flex;
14185 align-items: center;
14186 justify-content: center;
14187 width: 28px !important;
14188 height: 28px !important;
14189 border-radius: 6px;
14190 background: #f4f4f4 !important;
14191 color: #383838;
14192 font-size: 11px;
14193 font-style: normal;
14194 font-weight: 600;
14195 border: 1px solid #e1e1e1 !important;
14196 }
14197
14198 &:not(:last-child)::after {
14199 content: '';
14200 width: 74px;
14201 height: 1px;
14202 background: #d9d9d9;
14203 margin-left: 10px;
14204 }
14205 }
14206 }
14207
14208 .everest-forms-btn.everest-forms-btn-primary {
14209 padding: 12px 20px;
14210 font-size: 13px;
14211 line-height: 1.2;
14212 font-weight: 600;
14213 }
14214 }
14215
14216 #everest-forms-panel-integrations,
14217 #everest-forms-panel-payments {
14218 .integration-name {
14219 display: flex;
14220 align-items: center;
14221 gap: 16px;
14222 justify-content: space-between;
14223
14224 svg {
14225 width: 19px;
14226 height: 19px;
14227 }
14228 }
14229
14230 .evf-panel-tab {
14231 min-height: 86px;
14232 background: #f4f4f4;
14233 border-bottom: 1px solid #e1e1e1;
14234
14235 .logo {
14236 width: 38px;
14237 height: 38px;
14238 flex: 0 0 38px;
14239 margin: 0;
14240 border: 1px solid #e1e1e1;
14241 display: flex;
14242 align-items: center;
14243 justify-content: center;
14244 border-radius: 5px;
14245
14246 img {
14247 width: 28px;
14248 height: 28px;
14249 }
14250 }
14251
14252 &.upgrade-addons-settings {
14253 opacity: 0.7 !important;
14254 color: #4a4a4a;
14255
14256 &:hover {
14257 background: #f0f0f0;
14258 color: #2f2f2f;
14259 }
14260
14261 i.dashicons {
14262 width: 18px;
14263 height: 18px;
14264 min-width: 18px;
14265 background-color: #f4b25e;
14266 border-radius: 3px;
14267 background-position: center;
14268 background-repeat: no-repeat;
14269 background-size: 11px;
14270 }
14271 }
14272
14273 &.evf-addon-install-trigger {
14274 opacity: 0.65;
14275
14276 .logo {
14277 filter: grayscale(50%);
14278 }
14279
14280 .evf-integration-inactive-badge {
14281 font-size: 10px;
14282 font-weight: 600;
14283 color: #888;
14284 background: #e1e1e1;
14285 border-radius: 3px;
14286 padding: 2px 6px;
14287 text-transform: uppercase;
14288 letter-spacing: 0.3px;
14289 white-space: nowrap;
14290 }
14291
14292 &:hover {
14293 opacity: 0.85;
14294 }
14295 }
14296 }
14297 }
14298
14299 // Payments upsell — builder tab (no sidebar, full-width content area).
14300 #everest-forms-panel-payments {
14301 .panel-wrap.everest-forms-panel-content-wrap {
14302 background: #fff;
14303 }
14304
14305 .everest-forms-panel-content {
14306 width: 100%;
14307 padding: 0;
14308 background: #fff;
14309 }
14310 }
14311
14312 // Payments upsell — shared between builder tab and admin page.
14313 .evf-payment-upsell-page {
14314 width: 100%;
14315 padding: 48px 0;
14316 text-align: center;
14317
14318 .evf-payment-upsell-header {
14319 display: flex;
14320 align-items: center;
14321 justify-content: center;
14322 gap: 10px;
14323 margin-bottom: 14px;
14324
14325 .evf-payment-wave {
14326 font-size: 32px;
14327 line-height: 1;
14328 }
14329
14330 h2 {
14331 margin: 0;
14332 font-size: 28px;
14333 font-weight: 700;
14334 color: #1f1f1f;
14335 line-height: 1.2;
14336 }
14337 }
14338
14339 > h3 {
14340 margin: 0 0 16px;
14341 font-size: 18px;
14342 font-weight: 600;
14343 color: #1f1f1f;
14344 line-height: 1.4;
14345 }
14346
14347 > p {
14348 margin: 0 auto 16px;
14349 font-size: 14px;
14350 line-height: 1.7;
14351 color: #6b6b6b;
14352 max-width: 540px;
14353
14354 a {
14355 color: #7545bb;
14356 text-decoration: underline;
14357
14358 &:hover {
14359 color: #5317aa;
14360 }
14361 }
14362 }
14363
14364 .evf-payment-upsell-illustration {
14365 margin: 0 auto 16px;
14366 max-width: 260px;
14367 line-height: 0;
14368
14369 svg {
14370 width: 100%;
14371 height: auto;
14372 }
14373 }
14374
14375 .evf-payment-upsell-btn {
14376 display: inline-block;
14377 padding: 14px 36px;
14378 background: #7545bb;
14379 color: #fff;
14380 font-size: 15px;
14381 font-weight: 600;
14382 line-height: 1.2;
14383 border-radius: 5px;
14384 text-decoration: none;
14385 border: none;
14386 cursor: pointer;
14387 transition: background 0.2s ease;
14388
14389 &:hover {
14390 background: #5317aa;
14391 color: #fff;
14392 }
14393 }
14394
14395 .evf-payment-upsell-help {
14396 margin: 20px 0 0;
14397 font-size: 13px;
14398 color: #6b6b6b;
14399
14400 a {
14401 color: #7545bb;
14402 text-decoration: underline;
14403
14404 &:hover {
14405 color: #5317aa;
14406 }
14407 }
14408 }
14409 }
14410
14411 // Payments upsell — standalone admin page wrapper.
14412 .evf-payments-page-wrap {
14413 min-height: calc(100vh - 80px);
14414 padding: 24px;
14415
14416 .evf-payments-upsell-card {
14417 background: #fff;
14418 width: 100%;
14419 padding: 60px 48px;
14420 box-sizing: border-box;
14421 text-align: center;
14422 border-radius: 12px;
14423 border: 1px solid #e1e1e1;
14424
14425 .evf-payments-icon-wrap {
14426 display: flex;
14427 justify-content: center;
14428 margin-bottom: 20px;
14429
14430 img {
14431 display: block;
14432 width: 75px;
14433 height: 75px;
14434 object-fit: contain;
14435 border-radius: 6px;
14436 }
14437 }
14438
14439 h3 {
14440 margin: 0 0 8px;
14441 font-size: 22px;
14442 font-weight: 700;
14443 color: #1a1a1a;
14444 line-height: 1.3;
14445 }
14446
14447 .evf-payments-desc {
14448 margin: 0 auto 18px;
14449 font-size: 14px;
14450 line-height: 1.7;
14451 color: #6b6b6b;
14452 max-width: 460px;
14453 }
14454
14455 .evf-payments-gateways {
14456 display: flex;
14457 align-items: center;
14458 justify-content: center;
14459 flex-wrap: wrap;
14460 gap: 8px;
14461 margin-bottom: 40px;
14462 }
14463
14464 .evf-payments-gateway-badge {
14465 display: inline-flex;
14466 align-items: center;
14467 gap: 6px;
14468 padding: 4px 14px;
14469 border: 1px solid #e5e7eb;
14470 border-radius: 100px;
14471 font-size: 12px;
14472 font-weight: 500;
14473 color: #374151;
14474 background: #f5f5f5;
14475
14476 .evf-payments-gateway-icon {
14477 display: block;
14478 width: 18px;
14479 height: 18px;
14480 flex-shrink: 0;
14481 object-fit: contain;
14482 }
14483
14484 &.evf-payments-gateway-badge--more {
14485 color: #6b7280;
14486 border-color: #e5e7eb;
14487 line-height: 1.5;
14488 }
14489 }
14490
14491 .evf-payments-upsell-btn {
14492 display: inline-flex;
14493 align-items: center;
14494 gap: 8px;
14495 padding: 12px 24px;
14496 background: #7545bb;
14497 color: #fff;
14498 font-size: 14px;
14499 font-weight: 600;
14500 line-height: 1.2;
14501 border-radius: 4px;
14502 text-decoration: none;
14503 transition: background 0.2s ease;
14504
14505 &:hover {
14506 background: #9159e3;
14507 color: #fff;
14508 }
14509 &:focus {
14510 box-shadow: none !important;
14511 outline: none !important;
14512 }
14513 }
14514 }
14515 }
14516
14517 .everest-forms-panel-field-tinymce {
14518 .wp-editor-wrap {
14519 width: 100%;
14520 }
14521
14522 .evf-toggle-smart-tag-display {
14523 top: 4px !important;
14524 }
14525 }
14526
14527 .everest-forms-panel-field-textarea {
14528 .CodeMirror {
14529 width: 100%;
14530 border: 1px solid #e1e1e1;
14531 border-radius: 4px;
14532 }
14533 }
14534
14535 .evf-content-section-body
14536 .everest-forms-panel-field-radio-image
14537 .everest-forms-layout {
14538 display: flex;
14539 }
14540
14541 .evf-content-form-landing-pages-settings-body {
14542 width: 100%;
14543 }
14544
14545 @media (max-width: 1366px) {
14546 .everest-forms-nav-wrapper {
14547 display: flex !important;
14548 flex-wrap: wrap !important;
14549 align-items: center !important;
14550 height: auto !important;
14551 min-height: 70px !important;
14552 padding: 10px 20px !important;
14553 }
14554
14555 .evf-tab-wrapper {
14556 width: 100% !important;
14557 flex: 0 0 100% !important;
14558 order: 1 !important;
14559 display: flex !important;
14560 align-items: center !important;
14561 gap: 12px !important;
14562 }
14563
14564 .evf-forms-nav-right {
14565 width: 100% !important;
14566 flex: 0 0 100% !important;
14567 order: 2 !important;
14568 display: flex !important;
14569 align-items: center !important;
14570 justify-content: flex-end !important;
14571 gap: 8px !important;
14572 margin-top: 8px !important;
14573 }
14574 }
14575
14576 @media (max-width: 1366px) {
14577 .evf-forms-nav-right .everest-forms-shortcode input {
14578 max-width: 120px;
14579 overflow: hidden;
14580 text-overflow: ellipsis;
14581 white-space: nowrap;
14582 }
14583
14584 .evf-forms-nav-right .everest-forms-shortcode {
14585 display: flex;
14586 align-items: center;
14587 gap: 6px;
14588 }
14589 }
14590 .evf-popover-fields {
14591 gap: 12px !important;
14592 }
14593 .evf-popover-field-item {
14594 padding: 16px 8px !important;
14595 }
14596 .evf-popover-tab.active {
14597 background: #f6f3fa !important;
14598 color: #7545bb !important;
14599 border-radius: 4px !important;
14600 }
14601 .evf-popover-tab.hover {
14602 background: #f4f4f4 !important;
14603 color: #6b6b6b !important;
14604 border-radius: 4px !important;
14605 }
14606 .evf-popover-tabs {
14607 padding: 12px 12px !important;
14608 }
14609 .evf-popover-search-wrap .dashicons-search::before {
14610 content: none !important;
14611 display: none !important;
14612 }
14613 .evf-popover-search-wrap .dashicons-search {
14614 font-size: 0 !important;
14615 width: 0 !important;
14616 margin: 0 !important;
14617 }
14618 #evf-popover-search:focus {
14619 border-color: #7545bb !important;
14620 box-shadow: none !important;
14621 }
14622 .evf-popover-fields-wrap {
14623 padding: 12px 12px !important;
14624 }
14625 .evf-popover-search-wrap {
14626 gap: 0 !important;
14627 }
14628 .evf-popover-field-icon .evf-icon {
14629 padding: 0 !important;
14630 width: 18px !important;
14631 height: 18px !important;
14632 display: inline-flex;
14633 align-items: center;
14634 justify-content: center;
14635 }
14636
14637 .evf-payments-upsell-btn svg {
14638 margin-top: -3px;
14639 }
14640
14641 .everest-forms-field-payment-subscription-plan {
14642 ul.primary-input {
14643 list-style: none;
14644 display: flex;
14645 flex-direction: column;
14646 gap: 8px;
14647 margin: 0;
14648 padding: 0;
14649
14650 li {
14651 border: 1.5px solid #dcdcde;
14652 border-radius: 6px;
14653 padding: 10px 14px;
14654 display: flex;
14655 align-items: flex-start;
14656 gap: 10px;
14657 cursor: pointer;
14658 transition:
14659 border-color 0.15s,
14660 background 0.15s;
14661 margin: 0;
14662
14663 &:has(input:checked) {
14664 border-color: #6c47e8;
14665 }
14666 }
14667
14668 input[type='radio']='radio'] {
14669 margin-top: 3px;
14670 flex-shrink: 0;
14671 }
14672
14673 .everest-forms-field-label-inline {
14674 flex: 1;
14675 cursor: pointer;
14676 }
14677 }
14678
14679 .evf-plan-wrap {
14680 flex: 1;
14681 display: flex;
14682 flex-direction: column;
14683 }
14684
14685 .evf-plan-main {
14686 display: flex;
14687 justify-content: space-between;
14688 align-items: baseline;
14689 gap: 8px;
14690 }
14691
14692 .evf-plan-name {
14693 font-size: 13px;
14694 font-weight: 500;
14695 }
14696
14697 .evf-plan-price {
14698 font-size: 13px;
14699 font-weight: 700;
14700 white-space: nowrap;
14701 }
14702
14703 .evf-plan-meta {
14704 display: block;
14705 font-size: 0.8em;
14706 color: #757575;
14707 margin-top: 3px;
14708 font-weight: 400;
14709 }
14710 }
14711 // Conditional Logic upsell panel (free version only).
14712 .evf-cl-upsell-group {
14713 > .everest-forms-field-option-group-toggle {
14714 color: #999 !important;
14715 }
14716 }
14717
14718 .evf-cl-pro-badge {
14719 display: inline-flex;
14720 align-items: center;
14721 margin-left: 5px;
14722 vertical-align: middle;
14723 position: relative;
14724 top: -1px;
14725
14726 svg {
14727 width: 18px;
14728 height: 18px;
14729 margin-top: 2px;
14730 }
14731 }
14732
14733 .evf-cl-upgrade-notice {
14734 background: transparent;
14735 margin-bottom: 14px;
14736
14737 p {
14738 margin: 0;
14739 color: #3c3c3c;
14740 font-size: 13px;
14741 line-height: 24px;
14742 font-weight: 500;
14743 }
14744 }
14745
14746 .evf-cl-upgrade-btn {
14747 display: inline-flex;
14748 align-items: center;
14749 gap: 6px;
14750 background: #7545bb;
14751 color: #fff !important;
14752 font-size: 13px;
14753 font-weight: 600;
14754 padding: 10px 16px;
14755 border-radius: 4px;
14756 text-decoration: none !important;
14757 transition: background 0.2s ease;
14758
14759 svg {
14760 width: 14px;
14761 height: 14px;
14762 flex-shrink: 0;
14763 }
14764
14765 &:hover {
14766 background: #9159e3;
14767 color: #fff !important;
14768 }
14769 }
14770
14771 .evf-cl-features {
14772 list-style: none;
14773 margin: 0 0 14px;
14774 padding: 0;
14775 display: flex;
14776 flex-direction: column;
14777 gap: 4px;
14778
14779 li {
14780 display: flex;
14781 align-items: flex-start;
14782 gap: 7px;
14783 font-size: 13px;
14784 line-height: 1.5;
14785 color: #3c3c3c;
14786
14787 svg {
14788 flex-shrink: 0;
14789 width: 14px;
14790 height: 14px;
14791 margin-top: 2px;
14792 color: #7545bb;
14793 }
14794 }
14795 }
14796
14797 .evf-payment-gateway-selector-preview-note, .everest-forms-field-option-row-payment_gateway_choice{
14798 a{
14799 color: #2271b1 !important;
14800 text-decoration: underline !important;
14801 }
14802 }
14803