PluginProbe
Formidable Forms – WordPress Form Builder for Contact Forms, Calculators, Quizzes & More / 6.11
Formidable Forms – WordPress Form Builder for Contact Forms, Calculators, Quizzes & More v6.11
6.35 6.34 6.33.1 6.33 6.32.1 6.32 6.31 6.25 6.25.1 6.26 6.26.1 6.27 6.28 6.29 6.3 6.3.1 6.3.2 6.30 6.4 6.4.1 6.4.2 6.5 6.5.1 6.5.2 6.5.3 All 141 releases
formidable / css / frm_admin.css

frm_admin.css in Formidable Forms – WordPress Form Builder for Contact Forms, Calculators, Quizzes & More 6.11, at css/frm_admin.css

9,756 lines 184.4 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 @import url(font_icons.css);
2
3 :root,
4 .frm-white-body,
5 .frm_wrap {
6 --grey-900: #101828;
7 --grey-800: #1D2939;
8 --grey-700: #344054;
9 --grey-600: #475467;
10 --grey-500: #667085; /* Roughly 65% opacity */
11 --grey-400: #98A2B3;
12 --grey-300: #D0D5DD;
13 --grey-200: #EAECF0;
14 --grey-100: #F2F4F7;
15 --grey-50: #F9FAFB;
16 --grey-25: #FCFCFD;
17 --darkest-grey: var(--grey-900); /* Deprecated */
18 --dark-grey: var(--grey-700); /* Deprecated */
19 --medium-grey: rgba(40, 47, 54, .65);
20 --grey: var(--grey-500); /* Deprecated */
21 --grey-border: var(--grey-300); /* Deprecated */
22 --lightest-grey: rgb(250, 250, 250);
23 --sidebar-color: var(--grey-50);
24 --sidebar-hover: var(--grey-200);
25 --primary-700: #2B66A9;
26 --primary-500: #4199FD;
27 --primary-200: #C0DDFE;
28 --primary-25: #F5FAFF;
29 --primary-color: var(--primary-500); /* Deprecated */
30 --primary-hover: var(--primary-700); /* Deprecated */
31 --light-blue: var(--primary-25); /* Deprecated */
32 --blue-border: rgb(188, 224, 253);
33 --error-700: #B42318;
34 --error-500: #F04438;
35 --error-300: #FECDCA;
36 --error-100: #FEE4E2;
37 --green: rgb(63, 172, 37);
38 --orange: #F15A24;
39 --pink: rgb(226, 42, 110);
40 --purple: rgb(141, 53, 245);
41 --success-900: #054F31;
42 --success-800: #065F46;
43 --success-500: #12b76a;
44 --success-100: #D1FAE5;
45 --success-50: #ECFDF3;
46 --success-25: #f6fef9;
47 --border-radius: 35px;
48 --small-radius: 8px;
49 --medium-radius: 16px;
50 --small-sidebar: 275px;
51 --medium-sidebar: 350px;
52 --big-sidebar: 390px;
53 --biggest-sidebar: 450px;
54 --text-xs: 12px;
55 --text-sm: 14px;
56 --text-md: 16px;
57 --text-lg: 18px;
58 --text-xl: 20px;
59 --h-xs: 24px;
60 --h-sm: 30px;
61 --h-md: 36px;
62 --leading: 1.5;
63 --gap-2xs: 4px;
64 --gap-xs: 8px;
65 --gap-sm: 16px;
66 --gap-md: 24px;
67 --gap-lg: 32px;
68 --gap-xl: 40px;
69 --gap-2xl: 48px;
70 --box-shadow-xs: 0px 0.47074466943740845px 0.9414893388748169px 0px rgba(16, 24, 40, 0.05);
71 --box-shadow-sm: 0px 0.470745px 1.41223px rgba(16, 24, 40, 0.1), 0px 0.470745px 0.941489px rgba(16, 24, 40, 0.06);
72 --box-shadow-md: 0px 1.88298px 3.76596px -0.941489px rgba(16, 24, 40, 0.1), 0px 0.941489px 1.88298px -0.941489px rgba(16, 24, 40, 0.06);
73 --box-shadow-lg: 0px 6px 8px -2px rgba(16, 24, 40, 0.08), 0px 1.88298px 4px -1px rgba(16, 24, 40, 0.03), 0px 0.470745px 1.41223px rgba(16, 24, 40, 0.1), 0px 0.470745px 0.941489px rgba(16, 24, 40, 0.06);
74 --box-shadow-xl: 0px 9.41489px 11.2979px -1.88298px rgba(16, 24, 40, 0.08), 0px 3.76596px 3.76596px -1.88298px rgba(16, 24, 40, 0.03);
75 --box-shadow-xxl: 0 11px 22px -5px rgba(16, 24, 40, 0.18);
76
77 /* Override front-end CSS */
78 --check-label-color: var(--grey-700);
79 }
80
81 @font-face {
82 font-family: 'Inter';
83 src: url('../fonts/Inter-VariableFont_slnt,wght.ttf?v=1') format('truetype');
84 }
85
86 .with_frm_style,
87 .frm-white-body .wpbody-content,
88 .frm_wrap {
89 font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
90 }
91
92 /* Safari 11+ */
93 @media not all and (min-resolution:.001dpcm) {
94 @supports (-webkit-appearance:none) and (stroke-color:transparent) {
95 .with_frm_style,
96 .frm-white-body .wpbody-content,
97 .frm_wrap {
98 -webkit-font-smoothing: antialiased;
99 }
100 }
101 }
102
103 .frm-white-body,
104 .frm-white-body p,
105 .frm_wrap,
106 .frm_wrap p,
107 .frm-modal,
108 .frm-white-body .postbox .inside {
109 font-size: var(--text-sm);
110 color: var(--grey-500);
111 line-height: var(--leading);
112 }
113
114 .frm-white-body p,
115 .frm_wrap p {
116 margin: var(--gap-sm) 0;
117 }
118
119
120 body:not(.frm-admin-page-styles):not(.frm-admin-page-style) .with_frm_style .frm_form_fields > fieldset {
121 --fieldset-padding: 15px 0;
122 }
123
124 a, .widget .widget-top, .stuffbox h3, .frm-collapsed {
125 cursor: pointer;
126 text-decoration: none;
127 }
128
129 .post-type-frm_display .wrap > #posts-filter,
130 .wrap.frm-with-margin,
131 .frm_wrap > .wrap {
132 margin: var(--gap-sm) var(--gap-md) var(--gap-md);
133 }
134
135 #frm_top_bar + .wrap {
136 margin: var(--gap-xl);
137 }
138
139 .frm-full-screen #wpbody-content > .wrap {
140 margin: 0;
141 }
142
143 .post-type-frm_display .wrap {
144 margin: 0;
145 }
146
147 .toplevel_page_formidable #post-body-content {
148 overflow-x: visible;
149 }
150
151 .frm-full-screen {
152 height: 100%;
153 overflow: hidden;
154 }
155
156 .frm-full-screen.frm-admin-page-reports,
157 .frm-full-screen.frm-admin-page-entries,
158 .frm-full-screen.post-type-frm_display {
159 overflow: auto;
160 }
161
162 .frm-full-screen #wpadminbar,
163 .frm-full-screen #adminmenumain,
164 .frm-full-screen .wp-header-end {
165 display: none;
166 }
167
168 body.frm-white-body:not(.frm-full-screen) .mce-fullscreen {
169 top: 32px;
170 left: 160px;
171 }
172
173 .frm-full-screen #wpbody-content,
174 .frm-full-screen #wpbody,
175 .frm-full-screen #wpcontent {
176 padding: 0;
177 overflow: hidden;
178 margin: 0 !important;
179 }
180
181 .frm-white-body #wpbody-content {
182 position: relative; /* For screen meta links */
183 padding-bottom: 0;
184 }
185
186 .post-new-php.post-type-frm_display #screen-meta-links,
187 .post-php.post-type-frm_display #screen-meta-links {
188 display: none;
189 }
190
191 .frm-white-body #screen-meta-links {
192 position: fixed;
193 bottom: 0;
194 right: 20px;
195 }
196
197 .frm-full-screen #screen-meta-links .screen-meta-toggle {
198 right: 55px;
199 }
200
201 .frm-white-body #screen-meta-links .show-settings {
202 border-radius: var(--small-radius) var(--small-radius) 0 0;
203 border: 1px solid var(--grey-300);
204 border-bottom: none;
205 }
206
207 .frm-white-body.frm-lite #screen-meta-links .screen-meta-toggle {
208 right: 125px; /* Don't cover the lite upgrade button */
209 }
210
211 .frm-white-body #screen-meta {
212 margin: 0;
213 }
214
215 .frm-white-body #screen-meta-links .show-settings:after {
216 color: var(--grey);
217 }
218
219 .frm-white-body .columns-2 {
220 border-bottom: 1px solid var(--grey-300);
221 }
222
223 .frm-full-screen .columns-2 {
224 border: none;
225 }
226
227 body.formidable_page_formidable-pro-upgrade,
228 body.post-type-frm_display.edit-php,
229 body.frm-white-body {
230 background: #fff;
231 }
232
233 body.frm-white-body ul#adminmenu a.wp-has-current-submenu:after,
234 body.frm-white-body ul#adminmenu > li.current > a.current:after {
235 border-right-color: #fff;
236 }
237
238 .frm-white-body #wpcontent {
239 padding-left: 0;
240 padding-right: 0;
241 }
242
243 .frm-white-body .wrap #post-body {
244 padding: 0 20px;
245 }
246
247 .frm-grey-body #wpbody {
248 background: var(--grey-100);
249 }
250
251 .frm-grey-body #frm_top_bar {
252 background: #fff;
253 }
254
255 .post-type-frm_display .tablenav,
256 .frm_wrap .tablenav {
257 margin-bottom: 10px;
258 }
259
260 .frm-white-body .tablenav .actions select,
261 .wp-admin .frm_wrap .tablenav select {
262 margin-right: var(--gap-xs);
263 }
264
265 .tablenav .actions .button {
266 margin-top: 1px;
267 }
268
269 .frm-white-body table.widefat {
270 background: var(--lightest-grey);
271 border-width: 0;
272 box-shadow: none;
273 margin: 20px 0;
274 }
275
276 .frm-white-body table.widefat tfoot,
277 .frm-white-body table.widefat thead {
278 background: #fff;
279 }
280
281 .frm-white-body table.widefat th {
282 font-size: var(--text-md);
283 }
284
285 .frm-white-body table.widefat th a {
286 color: var(--grey-700);
287 }
288
289 .frm-white-body table.widefat strong a {
290 color: var(--primary-700);
291 }
292
293 .frm-scroll-box {
294 clear: both;
295 overflow: auto;
296 max-height: 405px;
297 border: 1px solid var(--grey-300);
298 border-radius: var(--small-radius);
299 }
300
301 .frm_form_field.frm_scroll_box .frm_opt_container {
302 height: 100px;
303 overflow: auto;
304 border: 1px solid var(--grey-300);
305 }
306
307 .frm_form_field.frm6_followed + p,
308 .frm_form_field.frm6_followed + div {
309 grid-column: span 6 / span 6;
310 }
311
312 .frm_form_field.frm-phone-type + p > label,
313 .frm_form_field.frm-phone-type + div > label {
314 opacity: 0; /* Hide the label for the format input in the phone field. */
315 }
316
317 .frm-short-list {
318 overflow: auto;
319 max-height: 190px;
320 }
321
322 .frm-white-body table.frm-border td {
323 font-size: var(--text-sm);
324 }
325
326 .frm-white-body .striped > tbody > :nth-child(odd) {
327 background-color: #fff;
328 }
329
330 .frm_wrap td.column-title strong {
331 display: inline;
332 }
333
334 td.column-title .frm_actions_dropdown {
335 float: right;
336 }
337
338 #frm_top_bar {
339 display: flex;
340 gap: var(--gap-sm);
341 width: 100%;
342 height: 72px;
343 margin: 0;
344 box-sizing: border-box;
345 text-align: center;
346 padding: 0 var(--gap-md);
347 }
348
349 #frm_top_bar > .frm-full-close:last-child,
350 #frm_top_bar > #frm-publishing:last-child {
351 margin-left: auto;
352 }
353
354 #frm_top_bar {
355 border-bottom: 1px solid var(--grey-300);
356 padding: 0 var(--gap-md);
357 overflow: visible;
358 }
359
360 .frm-white-body h1,
361 .frm-white-body h2,
362 .frm-white-body h3,
363 .frm-white-body h4 {
364 color: var(--grey-900);
365 font-weight: 400;
366 line-height: var(--leading) !important;
367 }
368
369 .frm-white-body .wrap h1,
370 .frm-white-body h1 {
371 font-size: var(--text-xl);
372 }
373
374 .frm-white-body .wrap h2,
375 .frm-white-body h2 {
376 font-size: var(--text-lg);
377 font-weight: 500;
378 }
379
380 .frm-white-body .wrap h3,
381 .frm-white-body h3 {
382 font-size: var(--text-md);
383 }
384
385 .frm-white-body .wrap h4,
386 .frm-white-body h4 {
387 font-size: var(--text-sm);
388 font-weight: 500;
389 }
390
391 /* Error modal */
392 #frm_error_modal .frm_lock_simple {
393 padding: 20px;
394 border-radius: 50%;
395 background-color: var(--primary-25);
396 display: inline-block;
397 }
398
399 #frm_error_modal #frm_lock_simple {
400 color: var(--primary-500);
401 }
402
403 #frm_error_modal .frm-modal-title {
404 display: block;
405 }
406
407 #frm_error_modal .frm-modal-title h2 {
408 font-weight: 600;
409 font-size: var(--text-xl);
410 margin: 0;
411 }
412
413 #frm_error_modal .frm_modal_content {
414 padding: var(--gap-md);
415 color: var(--grey-900);
416 }
417
418 /* Override CSS in Views plugin. */
419 .frm-views-editor-body .frm_page_container #frm_top_bar h1 {
420 padding: 0 !important;
421 color: var(--grey-900);
422 font-size: var(--text-xl) !important;
423 }
424
425 .post-type-frm_display .frm_top_left {
426 padding-bottom: 0 !important;
427 }
428
429 .frm-new-table-view-option.frm-selected-table-view-option {
430 border-radius: var(--small-radius);
431 background: var(--primary-25);
432 }
433
434 .frm-views-editor-body #frm_adv_info .tabs-panel { /* Views sidebar */
435 padding-left: 4px;
436 padding-right: 4px;
437 }
438
439 #frm_edit_box_content_modal .frm_modal_footer {
440 padding-top: var(--gap-sm);
441 border-top: 1px solid var(--grey-300);
442 }
443
444 #frm_edit_box_content_modal .frm_modal_footer > div {
445 display: flex;
446 justify-content: space-between;
447 }
448
449 #frm_edit_box_content_modal #frm_modal_box_select_area,
450 #frm_edit_box_content_modal #frm_box_content_wysiwyg_wrapper,
451 #frm_edit_box_content_modal .frm_modal_content {
452 max-height: calc(100vh - 176px) !important;
453 }
454
455 #frm_edit_box_content_modal #frm_modal_box_select_area {
456 height: calc(100vh - 176px) !important;
457 }
458
459 #frm_edit_box_content_modal #wp-content-editor-tools {
460 padding-top: 0;
461 }
462
463 #frm_edit_box_content_modal.frm-modal .postbox .frm-modal-title + div:last-child {
464 right: var(--gap-md);
465 }
466
467 .frm_code_list.frm-full-hover .frm-dropdown-view a {
468 flex-direction: row-reverse; /* Switch in the HTML */
469 }
470
471 #frm_view_editor_left.frm-right-panel .accordion-section-title:before {
472 content: '' !important;
473 margin: 0;
474 }
475 /** End Temporary View CSS */
476
477 .frm-upgrade-bar {
478 background: rgba(188, 224, 253, 0.23);
479 border-bottom: 1px solid var(--sidebar-hover);
480 padding: 3px 0 3px 40px;
481 font-size: 95%;
482 }
483
484 .frm-upgrade-bar span {
485 opacity: .9;
486 }
487
488 a h1 .frmsvg {
489 color: var(--grey-400);
490 vertical-align: middle;
491 min-width: var(--text-sm);
492 }
493
494 a .frmsvg {
495 color: currentColor;
496 }
497
498 .frm_wrap .view-switch a.current:before,
499 .frm-white-body a,
500 .frm_wrap a,
501 .frm_wrap a i {
502 color: var(--primary-color);
503 }
504
505 .frm_wrap a:active,
506 .frm_wrap a:hover {
507 color: var(--primary-700);
508 box-shadow: none;
509 }
510
511 .post-type-frm_display a:focus,
512 .frm_wrap a:focus {
513 box-shadow: none;
514 }
515
516 .frm_top_left {
517 text-align: left;
518 float: left;
519 white-space: nowrap;
520 max-width: 250px;
521 overflow: hidden;
522 text-overflow: ellipsis;
523 align-self: center;
524 }
525
526 .post-type-frm_display .frm_top_left,
527 .frm_top_left.frm_top_wide {
528 max-width: 100%;
529 }
530
531 .post-type-frm_display .frm_nav_bar .frm-header-logo,
532 .frm_nav_bar .frm-header-logo {
533 margin: 18px 0 10px;
534 }
535
536 #frm_top_bar .frm_form_nav {
537 flex: 1;
538 }
539
540 ul.frm_form_nav {
541 margin: 0 auto;
542 padding-top: 18px;
543 display: block;
544 min-width: 240px;
545 }
546
547 .nav-tab-wrapper.frm_form_nav {
548 padding: 0 25px;
549 }
550
551 ul.frm_form_nav > li {
552 margin: 0 min(3.5%, 32px) 0 0;
553 display: inline-block;
554 }
555
556 .post-type-frm_display #advanced-sortables h2.hndle,
557 .post-type-frm_display #side-sortables h2.hndle,
558 .post-type-frm_display #normal-sortables h2.hndle,
559 .post-type-frm_display .frm_form_nav .nav-tab-active,
560 .frm_form_nav > li > a {
561 font-size: 1.3em;
562 text-decoration: none;
563 display: block;
564 padding: 6px 2px 4px;
565 font-weight: 500;
566 color: var(--grey-700);
567 border-bottom: 2px solid transparent;
568 }
569
570 .post-type-frm_display.js .postbox .handlediv .toggle-indicator:before {
571 margin-top: 10px;
572 }
573
574 .frm-nav-tabs a:focus,
575 .frm-nav-tabs a:active,
576 .frm_form_nav a:active,
577 .frm_form_nav a:focus {
578 outline: none;
579 box-shadow: none;
580 }
581
582 .frm_form_nav > li > a {
583 font-size: var(--text-md);
584 font-weight: 400;
585 color: var(--grey-500);
586 }
587
588 .frm_form_nav > li > a:hover {
589 border-color: var(--primary-700);
590 }
591
592 .frm_form_nav .frm-dropdown-menu a:hover {
593 background-color: #eaf2fa;
594 }
595
596 .post-type-frm_display .frm_form_nav .nav-tab-active,
597 .post-type-frm_display .frm_form_nav .nav-tab-active:hover,
598 .frm_form_nav > li a.current_page {
599 color: var(--primary-500);
600 border-color: var(--primary-500);
601 background: transparent;
602 opacity: 1;
603 font-weight: 600;
604 }
605
606 .frm-full-close {
607 display: none;
608 padding-left: var(--gap-md);
609 border: 0 solid var(--grey-300);
610 border-left-width: 1px; /* Make RTL a bit less maintenance */
611 height: 100%;
612 box-sizing: border-box;
613 }
614
615 .frm-full-screen .frm-full-close {
616 display: flex;
617 align-items: center;
618 }
619
620 .frm-full-close a {
621 display: block;
622 }
623
624 .frm-full-close .frmsvg {
625 font-size: 20px;
626 width: 20px;
627 height: 20px;
628 color: var(--grey-500);
629 }
630
631 #frm_top_bar h1 {
632 font-weight: 400;
633 padding: 0;
634 margin: 0;
635 color: var(--grey-900);
636 display: inline-flex;
637 gap: var(--gap-sm);
638 align-items: center;
639 text-align: left;
640 width: 200px;
641 }
642
643 #frm_top_bar h1 span {
644 max-width: 175px;
645 text-overflow: ellipsis;
646 overflow: hidden;
647 white-space: nowrap;
648 display: inline-block;
649 vertical-align: bottom;
650 }
651
652 #frm_top_bar ul.frm_form_nav,
653 #frm_top_bar .frm-header-logo,
654 #frm_top_bar #frm_bs_dropdown {
655 align-self: center;
656 margin-top: 0;
657 margin-bottom: 0;
658 padding-top: 0;
659 }
660
661 #frm_top_bar .frm-header-logo {
662 display: flex; /* Get rid of extra padding below logo */
663 }
664
665 #frm_top_bar h2 {
666 float: left;
667 margin: 0 0 0 var(--gap-sm);
668 padding: 2px 0 2px var(--gap-sm);
669 font-weight: normal;
670 border-left: 2px solid var(--grey);
671 }
672
673 .frm_wrap > #frm_top_bar #frm-publishing {
674 margin-top: 0;
675 }
676
677 #frm-publishing {
678 min-width: 225px;
679 align-self: center;
680 align-items: center;
681 display: flex;
682 flex-direction: row-reverse;
683 gap: 0 var(--gap-sm);
684 flex-wrap: wrap;
685 }
686
687 .frm_wrap .postbox {
688 border-color: var(--grey-300);
689 border-radius: 6px;
690 box-shadow: none;
691 }
692
693 .frm_wrap .postbox h3.hndle {
694 cursor: default;
695 padding: 10px 20px;
696 margin: 0;
697 line-height: 1.4em;
698 border-color: var(--grey-300);
699 }
700
701 .frm-pre-hndle {
702 font-size: 15px;
703 padding: 5px;
704 margin: 9px 15px;
705 }
706
707 .frm-empty-row {
708 display: none;
709 }
710
711 .frm-child-row {
712 box-shadow: 5px 0px 0px 0px inset var(--sidebar-hover);
713 }
714
715 .frm_animate_bg {
716 transition: background 200ms linear, color 200ms linear;
717 }
718
719 .wrap > .subsubsub {
720 clear: both;
721 margin: 0;
722 }
723
724 .frm_wrap .subsubsub a {
725 line-height: var(--leading);
726 font-size: var(--text-sm);
727 }
728
729 .frm-admin-page-styles .frm_page_container,
730 .frm_wrap .frm_page_container { /* Use .frm_wrap to avoid messing up Views editor layout */
731 height: calc( 100vh - 32px );
732 display: flex;
733 flex-direction: column;
734 overflow: hidden;
735 padding-top: 0;
736 position: fixed;
737 top: 32px;
738 bottom: 0;
739 left: 0;
740 right: 0;
741 }
742
743 .frm-admin-page-translate .frm_wrap .frm_page_container, .frm-admin-page-update_translations .frm_wrap .frm_page_container {
744 position: static;
745 }
746
747 .auto-fold.frm-admin-page-styles .frm_page_container,
748 .auto-fold .frm_wrap .frm_page_container,
749 .frm-unfold.frm-admin-page-styles .frm_page_container,
750 .frm-unfold .frm_wrap .frm_page_container {
751 left: 160px;
752 }
753
754 .folded.frm-admin-page-styles .frm_page_container,
755 .folded .frm_wrap .frm_page_container {
756 left: 38px;
757 }
758
759 .frm-full-screen.frm-admin-page-styles .frm_page_container,
760 .frm-full-screen .frm_wrap .frm_page_container {
761 height: 100vh;
762 top: 0;
763 left: 0;
764 }
765
766 .frm-full-screen.frm-admin-page-entries .frm_page_container,
767 .frm-new-entry .frm_page_container,
768 .frm-admin-page-reports .frm_page_container,
769 .frm_list_entry_page .frm_page_container {
770 height: auto;
771 display: block;
772 }
773
774 .frm-new-entry .columns-2 {
775 border: none;
776 }
777
778 .frm-white-body #frm_top_bar,
779 .frm-white-body .columns-2 {
780 flex: 0 0 auto;
781 }
782
783 .columns-2 .frm-right-panel + div {
784 padding-bottom: var(--gap-md);
785 border-left: 1px solid var(--grey-300);
786 }
787
788 .columns-2 .frm-right-panel + div,
789 .frm_wrap #post-body-content {
790 padding-bottom: 0;
791 padding-top: var(--gap-sm);
792 margin-bottom: 0;
793 background: #fff;
794 width: auto;
795 float: none;
796 flex: 2;
797 }
798
799 .frm-white-body .columns-2 {
800 flex: 1;
801 display: flex;
802 overflow: hidden;
803 }
804
805 .frm-white-body .columns-2 > div {
806 overflow-y: auto;
807 box-sizing: border-box;
808 }
809
810 .frm_wrap .columns-2 .frm-right-panel,
811 .frm-right-panel {
812 flex: 0 0 var(--biggest-sidebar);
813 float: none;
814 width: var(--biggest-sidebar);
815 min-width: var(--biggest-sidebar);
816 background-color: var(--sidebar-color);
817 margin: 0;
818 box-shadow: none;
819 border: none;
820 padding-bottom: 25px;
821 }
822
823 .frm-right-panel .frm_field_list,
824 .frm_wrap .frm-right-panel #frm_adv_info,
825 .frm_wrap #postbox-container-1 #frm_adv_info {
826 box-shadow: none;
827 border: none;
828 margin-bottom: 26px;
829 }
830
831 .frm-default-switcher {
832 float: right;
833 position: absolute;
834 top: 15px;
835 right: 7px;
836 z-index: 1;
837 }
838
839 .frm-default-switcher a {
840 padding: 0 2px;
841 }
842
843 .frm-default-switcher a .frmsvg {
844 vertical-align: initial;
845 }
846
847 .frm-default-switcher a,
848 .frm-default-switcher a .frmsvg,
849 .frm-default-switcher a i {
850 color: var(--grey);
851 }
852
853 .frm-default-switcher a.current,
854 .frm-default-switcher a.current .frmsvg,
855 .frm-default-switcher a.current i {
856 color: var( --primary-500);
857 }
858
859 #new_fields,
860 .frm-has-modal,
861 p.frm_has_shortcodes {
862 position: relative;
863 }
864
865 .frm-inline-modal.postbox {
866 background: #fff;
867 }
868
869 .frm_has_shortcodes .frmsvg,
870 .frm_has_shortcodes i:not([class*=mce-]) {
871 position: absolute;
872 color: var(--primary-500);
873 border-radius: 50%;
874 border: 1px solid transparent;
875 z-index: 100;
876 text-align: center;
877 }
878
879 .frm_has_shortcodes input,
880 .frm_has_shortcodes textarea {
881 padding-left: 18px;
882 box-sizing: border-box;
883 }
884
885 #form_settings_page #frm_adv_info, #frm_builder_page #frm_adv_info {
886 display: none;
887 top: 0;
888 width: 310px;
889 max-height: 315px;
890 min-height: 200px;
891 overflow-y: scroll;
892 z-index: 100;
893 }
894
895 #form_global_settings .columns-2 .frm-right-panel,
896 #form_settings_page .columns-2 .frm-right-panel,
897 #frm-form-templates-page .frm-right-panel {
898 flex: 0 0 var(--small-sidebar);
899 width: var(--small-sidebar);
900 min-width: var(--small-sidebar);
901 }
902
903 #form_global_settings .frm_grid_container {
904 gap: 0 var(--gap-md);
905 }
906
907 .frm-inner-content {
908 padding: var(--gap-md);
909 }
910
911 .post-type-frm_display #poststuff {
912 padding: 0 0 10px 40px;
913 }
914
915 #postbox-container-2 .postbox .inside {
916 padding: 15px 25px;
917 }
918
919 #postbox-container-2 #frm_advanced .inside h3 {
920 margin: 15px -25px;
921 font-weight: 600;
922 }
923
924 #form_settings_page .frm-inner-content {
925 padding-top: 0;
926 padding-bottom: 150px;
927 position: relative;
928 }
929
930 .frm_wrap #submitdiv {
931 margin-bottom: 0;
932 border-width: 0 0 1px;
933 width: 100%;
934 min-width: unset;
935 }
936
937 .frm_wrap #frm_adv_info .handlediv,
938 .frm_wrap #frm_adv_info .hndle {
939 display: none;
940 }
941
942 .frm_wrap .menu-settings {
943 /* for add-on reverse compatibility */
944 border: none;
945 margin-top: 0;
946 }
947
948 .nodrag a {
949 cursor: pointer;
950 }
951
952 .frm_wrap #frm_adv_info .inside {
953 margin: 0;
954 }
955
956 #frm_adv_info > .inside {
957 padding: 0;
958 }
959
960 .frm-right-panel .frm-inline-modal.postbox .inside {
961 margin: 0;
962 padding-top: 0;
963 }
964
965 .frm-right-panel .frm-inline-modal .inside p:not(.howto),
966 .frm-right-panel .frm-inline-modal .inside a {
967 font-size: 15px;
968 }
969
970 .frm-inline-modal .inside a.frm_icon_font {
971 font-size: 18px;
972 }
973
974 .frm-right-panel .frm_field_list #frm-insert-fields {
975 max-height: none;
976 font-size: var(--text-sm);
977 padding: 0;
978 }
979
980 .frm-nav-tabs {
981 margin: 10px 0 20px;
982 padding: 0 var(--gap-sm);
983 display: block;
984 border-bottom: 1px solid var(--grey-300);
985 }
986
987 #frm-nav-tabs {
988 position: -webkit-sticky;
989 position: sticky;
990 top: 0;
991 background-color: var(--sidebar-color);
992 z-index: 98; /* must be < 99 */
993 margin-top: 0;
994 padding-top: 5px;
995 }
996
997 .frm_form_settings #frm_adv_info #frm-nav-tabs {
998 background-color: #fff;
999 margin: 0 -4px;
1000 }
1001
1002 .frm_form_settings span.frm-with-right-icon,
1003 #frm_builder_page .frm_has_shortcodes span.frm-with-right-icon:not(.frm_hidden) {
1004 display: block;
1005 }
1006
1007 .frm-inline-modal .frm-nav-tabs,
1008 #frm_adv_info .frm-nav-tabs {
1009 margin: 5px 0 0;
1010 }
1011
1012 #frm_adv_info .frm-nav-tabs.frm-compact-nav {
1013 padding-right: 0;
1014 padding-left: 20px;
1015 }
1016
1017 .frm-nav-tabs li {
1018 display: inline-block;
1019 margin: 0;
1020 }
1021
1022 .frm-nav-tabs a {
1023 color: var(--grey-700);
1024 padding: 10px 1px;
1025 margin: 0 9px;
1026 border-bottom: 2px solid transparent;
1027 }
1028
1029 .frm_form_settings #frm_adv_info .frm-nav-tabs a {
1030 padding: 5px 1px;
1031 color: var(--grey-500);
1032 }
1033
1034 .frm-nav-tabs.frm-compact-nav a {
1035 margin: 0 5px;
1036 }
1037
1038 .frm-nav-tabs a {
1039 display: block;
1040 opacity: .9;
1041 }
1042
1043 #frm_adv_info .frm-nav-tabs a {
1044 color: var(--grey-700);
1045 }
1046
1047 .frm-nav-tabs a:hover,
1048 .frm-nav-tabs .frm-tabs a {
1049 color: var(--primary-500) !important;
1050 border-color: var(--primary-500);
1051 }
1052
1053 .frm_form_settings #frm_adv_info .frm-nav-tabs .frm-tabs a {
1054 font-weight: 500;
1055 }
1056
1057 #frm-bulk-modal .howto,
1058 #frm-bulk-modal h3 {
1059 font-size: var(--text-sm);
1060 font-weight: 400;
1061 margin: 5px 0 10px;
1062 color: var(--grey);
1063 }
1064
1065 #frm-bulk-modal h3 {
1066 margin-left: 20px;
1067 }
1068
1069 .frm-right-panel a.frm_add_logic_link,
1070 .frm-right-panel h3 {
1071 color: var(--grey-700);
1072 font-size: var(--text-lg);
1073 font-weight: 400;
1074 border-top: 2px solid var(--sidebar-hover);
1075 margin: 0;
1076 }
1077
1078 .frm-single-settings > h3:first-of-type {
1079 border-bottom: 2px solid var(--sidebar-hover);
1080 border-top: none;
1081 padding-top: 0 !important;
1082 }
1083
1084 .frm-flex-justify,
1085 .frm-right-panel .frm-single-settings h3 {
1086 display: flex;
1087 justify-content: space-between;
1088 align-items: center;
1089 }
1090
1091 .frm-right-panel h3 i {
1092 color: var(--grey-700);
1093 float: right;
1094 width: 16px;
1095 cursor: pointer;
1096 }
1097
1098 /* right sidebar */
1099 #post-body-content + .frm-right-panel {
1100 flex: 0 0 var(--medium-sidebar);
1101 width: var(--medium-sidebar);
1102 min-width: var(--medium-sidebar);
1103 border-left: 1px solid var(--sidebar-hover);
1104 }
1105
1106 .frm-new-entry #post-body-content + .frm-right-panel,
1107 .frm-new-entry .frm-right-panel {
1108 background: none;
1109 border: none;
1110 }
1111
1112 #post-body-content + .frm-right-panel h3 {
1113 padding: 20px 20px 0;
1114 font-size: 17px;
1115 }
1116
1117 #post-body-content + .frm-right-panel .frm_with_icons:first-of-type h3 {
1118 border: none;
1119 }
1120
1121 #frm-insert-fields h3 {
1122 color: var(--grey);
1123 font-size: 15px;
1124 font-weight: normal;
1125 border-top: none;
1126 border-bottom: 1px solid var(--sidebar-hover);
1127 margin: 0;
1128 padding: 10px 10px 10px 25px;
1129 }
1130
1131 .frm_wrap #frm_adv_info ul.category-tabs {
1132 margin: 0;
1133 padding: 10px 0 9px;
1134 font-size: 15px;
1135 background: transparent;
1136 }
1137
1138 .frm_wrap #frm_adv_info ul.category-tabs li {
1139 padding: 10px;
1140 background-color: transparent !important;
1141 }
1142
1143 .frm_wrap #frm_adv_info ul.category-tabs li:first-child {
1144 border: none;
1145 }
1146
1147 .frm_wrap #frm_adv_info .categorydiv div.tabs-panel {
1148 border: none;
1149 background: transparent;
1150 }
1151
1152 .frm_wrap #frm-categorydiv {
1153 border-right: none;
1154 }
1155
1156 #frm_adv_info #frm-conditionals {
1157 padding-top: var(--gap-sm);
1158 }
1159
1160 #postbox-container-1 #taxonomy-linkcategory #frm-html-tags {
1161 display: none;
1162 max-height: none;
1163 }
1164
1165 #postbox-container-1 .frm_field_list #frm-insert-fields .frmbutton.dropdown {
1166 position: relative;
1167 }
1168
1169 /* Admin footer */
1170 .frm-white-body #footer-upgrade {
1171 display: none;
1172 }
1173
1174 .frm-admin-footer-links,
1175 .frm-admin-footer-links-nav,
1176 .frm-admin-footer-links-socials {
1177 display: flex;
1178 justify-content: center;
1179 }
1180
1181 .frm-admin-footer-links {
1182 gap: var(--gap-2xs);
1183 flex-direction: column;
1184 text-align: center;
1185 padding: var(--gap-xl) 0 var(--gap-lg);
1186 font-size: var(--text-xs);
1187 color: var(--grey-400);
1188 }
1189
1190 body.frm-hidden-overflow {
1191 height: 100%;
1192 overflow: hidden;
1193 }
1194
1195 .frm-admin-footer-links-nav {
1196 gap: var(--gap-2xs);
1197 margin-bottom: var(--gap-xs);
1198 }
1199
1200 .frm-admin-footer-links-socials {
1201 gap: var(--gap-xs);
1202 }
1203
1204 .frm-admin-footer-links-socials a {
1205 color: var(--grey-400);
1206 }
1207 /* End Admin footer */
1208
1209 .frm_list_entry_page h2 {
1210 float: left;
1211 }
1212
1213 .frm_list_entry_page h2 + .error {
1214 clear: both;
1215 }
1216
1217 .frm_sidebar select {
1218 width: 100%;
1219 margin-left: 0;
1220 margin-right: 0;
1221 }
1222
1223 .frm_sidebar #search-submit {
1224 float: right;
1225 }
1226
1227 .frm_single_entry_page #submitdiv {
1228 margin: 0;
1229 }
1230
1231 .frm_single_entry_page .hndle a {
1232 font-size: 13px;
1233 }
1234
1235 /* Build New Form page */
1236
1237 .frm-right-panel #publishing-action {
1238 float: none;
1239 }
1240
1241 .frm-right-panel #major-publishing-actions {
1242 border-top: none;
1243 height: 32px;
1244 background: transparent;
1245 }
1246
1247 #major-publishing-actions .frm_submit_form {
1248 float: right;
1249 margin-left: 5px;
1250 }
1251
1252 /* Buttons */
1253
1254 .frm_orange_button,
1255 .frm_reverse_button {
1256 font-size: 12px;
1257 border: 1px solid var(--orange);
1258 color: var(--orange);
1259 font-weight: 600;
1260 padding: 1px 4px;
1261 border-radius: 4px;
1262 background: transparent;
1263 }
1264
1265 .frm_reverse_button:hover,
1266 .frm_reverse_button:active,
1267 .frm_reverse_button:focus {
1268 color: #fff;
1269 background: var(--orange);
1270 border: 1px solid var(--orange);
1271 }
1272
1273 .frm_reverse_button {
1274 font-size: 1em;
1275 transition: all .2s ease;
1276 }
1277
1278 .frm-button-primary,
1279 .wp-core-ui .button-primary.frm-button-primary,
1280 .wp-core-ui .button.frm-button-primary,
1281 .frm-button-secondary,
1282 .wp-core-ui .button-secondary.frm-button-secondary,
1283 .wp-core-ui .button.frm-button-secondary,
1284 .frm-white-body .frm-search .button,
1285 .frm-white-body .search-box .button, /* Views */
1286 .frm-white-body .tablenav .button,
1287 .frm_orange_button,
1288 .toplevel_page_formidable #frm_upgrade_modal .button-primary,
1289 .wp-core-ui.frm-white-body .button-primary,
1290 .wp-core-ui.frm-white-body .button-secondary,
1291 .frm-white-body .button-primary,
1292 .frm-white-body .button-secondary,
1293 #frm-form-button button,
1294 .frm-form-button button,
1295 .frm-preview-buttons button,
1296 .frm-button-red,
1297 .frm-button-tertiary {
1298 text-shadow: none;
1299 box-shadow: none;
1300 border-radius: 30px;
1301 border: 1px solid var(--primary-500);
1302 font-size: var(--text-sm);
1303 transition: all .2s ease;
1304 padding: 7px 16px;
1305 height: auto;
1306 min-height: 28px;
1307 outline: none;
1308 line-height: var(--leading);
1309 box-sizing: border-box;
1310 font-weight: 500;
1311 margin-bottom: 0;
1312 display: inline-block;
1313 }
1314
1315 .no-js.wp-core-ui .frm-search .button.hide-if-no-js,
1316 .js.wp-core-ui .frm-search .button.hide-if-js {
1317 display: none;
1318 }
1319
1320 .frm-button-tertiary {
1321 border-color: transparent;
1322 color: var(--primary-500);
1323 }
1324
1325 .frm-button-tertiary:focus {
1326 outline: none;
1327 }
1328
1329 .frm-button-tertiary.frm_loading_button::before {
1330 border-right-color: var(--grey);
1331 border-bottom-color: var(--grey);
1332 }
1333
1334 .frm-button-red,
1335 .frm-button-red:focus {
1336 --primary-color: var(--error-500);
1337 --primary-500: var(--error-500);
1338 --primary-700: var(--error-700);
1339 }
1340
1341 .frm-button-red:not(.frm-button-tertiary),
1342 .frm-button-red:not(.frm-button-tertiary):focus {
1343 color: #fff !important;
1344 }
1345
1346 .frm-white-body h2 .button,
1347 .post-type-frm_display h2 .frm-button-primary,
1348 .frm-white-body .tablenav .button,
1349 .frm-button-primary.frm-button-sm,
1350 .frm-button-secondary.frm-button-sm,
1351 .frm-button-tertiary.frm-button-sm,
1352 .frm-button-red.frm-button-sm {
1353 padding: 4px 12px !important;
1354 font-size: var(--text-xs) !important;
1355 }
1356
1357 .frm_no_style_button {
1358 background: transparent;
1359 }
1360
1361 .frm-with-icon {
1362 display: flex;
1363 gap: var(--gap-xs);
1364 align-items: center;
1365 }
1366
1367 .frm-with-icon svg {
1368 opacity: .65; /* Get close to grey-500 without overriding hover colors */
1369 }
1370
1371 .frm-with-icon.button svg {
1372 height: var(--text-sm);
1373 width: var(--text-sm);
1374 }
1375
1376 .frm-with-icon.frm-button-sm svg {
1377 height: var(--text-xs);
1378 width: var(--text-xs);
1379 }
1380
1381 .frm-white-body .button.add_media {
1382 /* Media buttons above RTE */
1383 padding-left: 12px !important;
1384 padding-right: 12px !important;
1385 font-size: var(--text-xs);
1386 border-radius: var(--border-radius);
1387 }
1388
1389 .wp-core-ui.frm-white-body #post-query-submit.button,
1390 .wp-core-ui.frm-white-body .button.tablenav-pages-navspan,
1391 .wp-core-ui.frm-white-body .button.first-page,
1392 .wp-core-ui.frm-white-body .button.prev-page,
1393 .wp-core-ui.frm-white-body .button.next-page,
1394 .wp-core-ui.frm-white-body .button.last-page,
1395 .wp-core-ui.frm-white-body .button.action {
1396 background-color: transparent;
1397 border-color: var(--grey-300);
1398 color: var(--grey-700);
1399 border-radius: var(--border-radius);
1400 }
1401
1402 .post-type-frm_display.wp-core-ui .button-primary,
1403 .frm-button-primary,
1404 .wp-core-ui .button-primary.frm-button-primary,
1405 .frm_single_entry_page .button-primary {
1406 background-color: var(--primary-500) !important;
1407 color: #fff !important;
1408 }
1409
1410 .frm-button-primary.frm_large{
1411 font-size: var(--text-md) !important;
1412 height: auto !important;
1413 padding: 9px 18px !important;
1414 }
1415
1416 .frm-button-secondary.frm-small,
1417 .frm-button-primary.frm-small {
1418 font-size: var(--text-xs) !important;
1419 height: auto !important;
1420 padding: var(--gap-2xs) 12px !important;
1421 }
1422
1423 .frm-button-primary i:before {
1424 color: #fff;
1425 }
1426
1427 .wp-core-ui .button-primary.frm-button-primary:not([disabled]):hover,
1428 .frm-button-primary:not([disabled]):hover {
1429 background: var(--primary-700) !important;
1430 border-color: var(--primary-700) !important;
1431 }
1432
1433 .wp-core-ui .button-primary.frm-button-primary:active {
1434 vertical-align: inherit;
1435 }
1436
1437 .frm-white-body #search-submit,
1438 #frm-form-button .frm_button_submit,
1439 .frm-form-button .frm_button_submit,
1440 .frm-white-body .frm-preview-buttons button,
1441 .frm-white-body .button:not(.frm-button-primary),
1442 .wp-core-ui.frm-white-body .button-secondary,
1443 .wp-core-ui .button-secondary.frm-button-secondary,
1444 .wp-core-ui .button.frm-button-secondary,
1445 .frm-white-body .frm-button-secondary,
1446 .frm-button-secondary {
1447 color: var(--grey-800);
1448 border-color: var(--grey-300);
1449 background-color: #fff;
1450 }
1451
1452 #wp-content-media-buttons button,
1453 #wp-content-media-buttons a.button {
1454 border-color: var(--grey-300);
1455 }
1456
1457 .frm_orange_button {
1458 border-color: #da791d !important;
1459 background: var(--orange);
1460 color: #fff;
1461 }
1462
1463 .frm-white-body .button:not(.frm-button-primary):focus,
1464 .frm-white-body .button:not(.frm-button-primary):active,
1465 .frm-white-body .frm-button-secondary:hover,
1466 .wp-core-ui.frm-white-body .frm-button-secondary:hover,
1467 .wp-core-ui.frm-white-body .button-secondary:hover,
1468 .wp-core-ui.frm-white-body .button-secondary:focus,
1469 .wp-core-ui.frm-white-body .tablenav .button:hover,
1470 .frm_wrap .preview > .button:hover {
1471 border-color: var(--grey-300) !important;
1472 color: var(--grey-800);
1473 background: var(--grey-50) !important;
1474 box-shadow: none !important;
1475 outline: none !important;
1476 }
1477
1478 .frm-button-primary .frmsvg {
1479 color: #fff;
1480 }
1481
1482 .frm_wrap .preview i {
1483 font-size: inherit;
1484 }
1485
1486 .frm-white-body .frm-button-primary:focus,
1487 .frm-white-body .frm-button-primary:active,
1488 #frm-addons-page .button-primary:focus,
1489 #form_global_settings .button-primary:focus,
1490 #frm_upgrade_modal .button:focus {
1491 border-color: var(--primary-700) !important;
1492 background-color: var(--primary-700) !important;
1493 box-shadow: none !important;
1494 outline: none !important;
1495 }
1496
1497 .frm_wrap .preview > .button:focus,
1498 .frm_orange_button:hover,
1499 .frm_orange_button:focus,
1500 .toplevel_page_formidable #frm_upgrade_modal .button-primary:hover,
1501 .toplevel_page_formidable #frm_upgrade_modal .button-primary:focus,
1502 .toplevel_page_formidable .frm_wrap button.button-primary:hover,
1503 .toplevel_page_formidable .frm_wrap button.button-primary:focus {
1504 outline: none;
1505 }
1506
1507 .frm_orange_button:hover,
1508 .frm_orange_button:focus {
1509 border-color: var(--orange) !important;
1510 background: transparent;
1511 color: var(--orange);
1512 opacity: 1;
1513 }
1514
1515 .major-publishing-actions.frm_create_form_header {
1516 padding: 8px 0;
1517 }
1518
1519 .major-publishing-actions.frm_create_form_header .frm_create_form_header_inner {
1520 font-size: 15px;
1521 background: transparent;
1522 }
1523
1524 .frm-menu-boxes .frm_blank_form_text {
1525 padding-bottom: 26px;
1526 }
1527
1528 input.frm_insert_in_template {
1529 font-size: 10px;
1530 width: 98%;
1531 font-weight: normal
1532 }
1533
1534 .frm-dismissible a.dismiss:focus {
1535 box-shadow: none;
1536 }
1537 .frm-dismissible a.dismiss {
1538 top: 10px;
1539 right: 10px;
1540 position: absolute;
1541 }
1542 .frm-dismissible a.dismiss svg {
1543 color: var(--grey-800);
1544 }
1545
1546 /* Review request */
1547 .frm-review-notice {
1548 text-align: center;
1549 position: fixed !important;
1550 z-index: 999;
1551 bottom: 0;
1552 right: 0;
1553 width: 400px;
1554 box-shadow: var(--box-shadow-xxl) !important;
1555 }
1556
1557 .frm-review-notice a {
1558 margin: 0 var(--gap-xs) !important;
1559 }
1560
1561 .frm-review-notice .frm-button-primary,
1562 .frm-review-notice .frm-button-secondary {
1563 min-width: 100px;
1564 }
1565
1566 .frm-review-notice p {
1567 margin: 0 0 10px 0;
1568 }
1569
1570 .frm-review-notice p > span {
1571 font-size: 13px;
1572 opacity: 0.75;
1573 }
1574
1575 .frm-review-notice #frmapi-feedback {
1576 margin-top: var(--gap-lg);
1577 }
1578
1579 .frm-review-notice #frmapi-feedback [class^="frm__"] {
1580 display: none;
1581 }
1582
1583 .frm-review-notice .frm_error,
1584 .frm-review-notice label {
1585 color: #444;
1586 text-align: left;
1587 }
1588
1589 .frm-review-notice label {
1590 font-size: var(--text-sm);
1591 }
1592
1593 .frm-floating-success-message {
1594 position: fixed;
1595 z-index: 999;
1596 border-radius: 4px;
1597 right: 10px;
1598 bottom: 10px;
1599 }
1600
1601 .frm-box-shadow-xxl {
1602 box-shadow: var(--box-shadow-xxl) !important;
1603 }
1604
1605 /* Generic Classes */
1606 .frm-text-grey-900 {
1607 color: var(--grey-900);
1608 }
1609
1610 .frm_no_margin, /* deprecated */
1611 .frm-m-0 {
1612 margin: 0 !important;
1613 }
1614
1615 .frm-m-12 {
1616 margin: var(--gap-2xl);
1617 }
1618
1619 .frm_no_top_margin, /* deprecated */
1620 .frm-mt-0 {
1621 margin-top: 0 !important;
1622 }
1623
1624 .frm-mt-2xs {
1625 margin-top: var(--gap-2xs) !important;
1626 }
1627
1628 .frm-mt-xs {
1629 margin-top: var(--gap-xs) !important;
1630 }
1631
1632 .frm-mt-sm {
1633 margin-top: var(--gap-sm) !important;
1634 }
1635
1636 .frm-mt-md {
1637 margin-top: var(--gap-md) !important;
1638 }
1639
1640 .frm-mt-lg {
1641 margin-top: var(--gap-lg) !important;
1642 }
1643
1644 .frm-mt-2xl {
1645 margin-top: var(--gap-2xl) !important;
1646 }
1647
1648 .frm-mt-auto {
1649 margin-top: auto !important;
1650 }
1651
1652 .frm_no_bottom_margin, /* deprecated */
1653 .frm-mb-0 {
1654 margin-bottom: 0 !important;
1655 }
1656
1657 .frm-mb-2xs {
1658 margin-bottom: var(--gap-2xs) !important;
1659 }
1660
1661 .frm-mb-xs {
1662 margin-bottom: var(--gap-xs) !important;
1663 }
1664
1665 .frm-mb-sm {
1666 margin-bottom: var(--gap-sm) !important;
1667 }
1668
1669 .frm-mb-md {
1670 margin-bottom: var(--gap-md) !important;
1671 }
1672
1673 .frm-mb-lg {
1674 margin-bottom: var(--gap-lg) !important;
1675 }
1676
1677 .frm-ml-auto {
1678 margin-left: auto;
1679 }
1680
1681 .frm-mr-auto {
1682 margin-right: auto;
1683 }
1684
1685 .frm-mx-0 {
1686 margin-left: 0 !important;
1687 margin-right: 0 !important;
1688 }
1689
1690 .frm-mx-xs {
1691 margin-left: var(--gap-xs) !important;
1692 margin-right: var(--gap-xs) !important;
1693 }
1694
1695 .frm-mx-sm {
1696 margin-left: var(--gap-sm) !important;
1697 margin-right: var(--gap-sm) !important;
1698 }
1699
1700 .frm-p-0 {
1701 padding: 0 !important;
1702 }
1703
1704 .frm-p-1 {
1705 padding: 4px;
1706 }
1707
1708 .frm-p-sm,
1709 .frm-p-4 {
1710 padding: var(--gap-sm) !important;
1711 }
1712
1713 .frm-p-sm {
1714 padding: var(--gap-sm) !important;
1715 }
1716
1717 .frm-p-6,
1718 .frm-p-md {
1719 padding: var(--gap-md) !important;
1720 }
1721
1722 .frm-px-0 {
1723 padding-left: 0 !important;
1724 padding-right: 0 !important;
1725 }
1726
1727 .frm-py-0 {
1728 padding-top: 0 !important;
1729 padding-bottom: 0 !important;
1730 }
1731
1732 .frm-pt-sm {
1733 padding-top: var(--gap-sm) !important;
1734 }
1735
1736 .frm-pt-xl {
1737 padding-top: var(--gap-xl) !important;
1738 }
1739
1740 .frm-pb-md {
1741 padding-bottom: var(--gap-md) !important;
1742 }
1743 .frm-pb-sm {
1744 padding-bottom: var(--gap-sm) !important;
1745 }
1746 .frm-px-md {
1747 padding-right: var(--gap-md) !important;
1748 padding-left: var(--gap-md) !important;
1749 }
1750
1751 .frm-text-xs {
1752 font-size: var(--text-xs) !important;
1753 }
1754
1755 .frm-text-sm {
1756 font-size: var(--text-sm) !important;
1757 }
1758
1759 .frm-text-md {
1760 font-size: var(--text-md) !important;
1761 }
1762
1763 .frm-text-lg {
1764 font-size: var(--text-lg) !important;
1765 }
1766
1767 .frm-text-xl {
1768 font-size: var(--text-xl) !important;
1769 }
1770
1771 .frm-capitalize {
1772 text-transform: capitalize;
1773 }
1774
1775 .frm-font-medium {
1776 font-weight: 500 !important;
1777 }
1778
1779 .frm-font-semibold {
1780 font-weight: 600 !important;
1781 }
1782
1783 .frm-rounded-sm {
1784 border-radius: var(--small-radius) !important;
1785 }
1786
1787 .frm-w-auto {
1788 width: auto !important;
1789 }
1790
1791 .frm-w-full {
1792 width: 100% !important;
1793 }
1794
1795 .frm_block, /* deprecated */
1796 .frm-block {
1797 display: block;
1798 }
1799
1800 .frm_inline {
1801 display: inline;
1802 }
1803
1804 .frm_inline_block {
1805 display: inline-block !important;
1806 }
1807
1808 .frm-flex {
1809 display: flex;
1810 }
1811
1812 .frm_hidden,
1813 .js .frm-hide-js {
1814 display: none;
1815 }
1816
1817 .frm-flex-box {
1818 display: flex;
1819 gap: var(--gap-sm);
1820 }
1821
1822 .frm-flex-col {
1823 display: flex;
1824 flex-direction: column;
1825 }
1826
1827 .frm-flex-full {
1828 flex: 1;
1829 }
1830
1831 .frm-flex-center {
1832 display: flex;
1833 justify-content: center;
1834 align-items: center;
1835 }
1836
1837 .frm-shrink-0 {
1838 flex-shrink: 0;
1839 }
1840
1841 .frm-gap-0 {
1842 gap: 0 !important;
1843 }
1844
1845 .frm-gap-xs {
1846 gap: var(--gap-xs);
1847 }
1848
1849 .frm-gap-sm {
1850 gap: var(--gap-sm);
1851 }
1852
1853 .frm-gap-md {
1854 gap: var(--gap-md);
1855 }
1856
1857 .frm-gap-xl {
1858 gap: var(--gap-xl);
1859 }
1860
1861 .frm-justify-center {
1862 justify-content: center !important;
1863 }
1864
1865 .frm-justify-between {
1866 justify-content: space-between;
1867 }
1868
1869 .frm-justify-end {
1870 justify-content: end;
1871 }
1872
1873 .frm-items-center {
1874 align-items: center;
1875 }
1876
1877 .frm-transition-ease {
1878 transition: all .2s ease;
1879 }
1880
1881 .frm_invisible {
1882 visibility: hidden;
1883 transition: all .2s ease;
1884 }
1885
1886 .frm_no_float {
1887 float: none;
1888 }
1889
1890 .frm-text-right {
1891 text-align: right;
1892 }
1893
1894 .frm-border-b {
1895 border-bottom: 1px solid var(--grey-300);
1896 }
1897
1898 .frm-no-border {
1899 border: none !important;
1900 }
1901
1902 .frm-opacity-100 {
1903 opacity: 1;
1904 }
1905
1906 .frm-on-bottom {
1907 z-index: -1;
1908 }
1909
1910 /* End Generic Classes, Start Forced Generic Classes */
1911
1912 .frm-fields p > label.frm_hidden,
1913 .frm-lookup-modal .dismiss,
1914 .frm-right-panel .inside a.frm_hidden,
1915 #form_global_settings .frm_hidden,
1916 ul.frm_form_nav > li.frm_hidden,
1917 a.frm_hidden,
1918 .button.frm_hidden,
1919 .wp-core-ui .button.frm_hidden {
1920 display: none;
1921 }
1922
1923 .postbox .inside > p.frm_no_bottom_margin:last-child {
1924 margin-bottom: 0 !important;
1925 }
1926
1927 .frm_no_section_fields.frm_block {
1928 display: block;
1929 }
1930
1931 .actions.frm_visible_overflow {
1932 overflow: visible !important;
1933 }
1934
1935 .frm_full_opacity, /* deprecated */
1936 .frm_submit .frm_full_opacity,
1937 .frm_submit .frm-opacity-100 {
1938 opacity: 1;
1939 }
1940
1941 .frm-dropdown-menu.frm-on-top {
1942 z-index: 99999;
1943 }
1944
1945 /* End Forced Generic Classes */
1946
1947 /* Start Helper Classes */
1948 .frm-vertical-line {
1949 display: inline-block;
1950 width: 1px;
1951 height: 12px;
1952 background-color: var(--grey-300);
1953 }
1954
1955 .frm-admin-full-screen #adminmenumain,
1956 .frm-admin-full-screen #wpadminbar,
1957 .frm-admin-full-screen #adminmenuback,
1958 .frm-admin-full-screen #adminmenuwrap,
1959 .frm-admin-full-screen #wpfooter {
1960 display: none;
1961 }
1962
1963 .frm-admin-full-screen #wpcontent,
1964 .frm-admin-full-screen.auto-fold #wpcontent {
1965 margin: 0;
1966 padding: 0;
1967 }
1968
1969 .frm-admin-full-screen.appearance_page_starter-templates #wpbody-content {
1970 padding: 0;
1971 }
1972 /* End Helper Classes */
1973
1974 .frm_forms.with_frm_style {
1975 max-width: 100%;
1976 }
1977
1978 .post-type-frm_display .wrap > .subsubsub,
1979 .post-type-frm_display .wrap > .icl_subsubsub,
1980 .frm_form_settings > p {
1981 margin: 6px var(--gap-md);
1982 padding: 0;
1983 }
1984
1985 .frm-entry-container {
1986 margin: 0 40px 40px;
1987 padding: 0;
1988 }
1989
1990 #form_reports_page .frm-inner-content {
1991 width: calc(100% - 40px);
1992 max-width: 900px;
1993 margin: 20px auto;
1994 padding: 20px;
1995 }
1996
1997 .frm_inner_field_container > .frm_form_fields {
1998 clear: both;
1999 }
2000
2001 .post-type-frm_display h2,
2002 .frm_wrap h2 {
2003 margin-top: 0 !important;
2004 font-size: var(--text-lg);
2005 line-height: var(--leading);
2006 }
2007
2008 .post-type-frm_display .wrap > h2:first-child,
2009 .frm_wrap .wrap > h2:first-child {
2010 padding-top: 0;
2011 margin-top: 0 !important;
2012 font-size: var(--text-lg);
2013 }
2014
2015 #frm_form_editor_container {
2016 position: relative;
2017 margin-top: 28px;
2018 }
2019
2020 .form-field p {
2021 /* for conflicts */
2022 background: none;
2023 border: none;
2024 }
2025
2026 .form-field label.frm_primary_label {
2027 display: block;
2028 float: none;
2029 width: auto;
2030 }
2031
2032 #frm_view_editor_left label, /* Views */
2033 #frm_view_editor_left .frm_primary_label, /* Views */
2034 .frm-dialog .frm-sub-label,
2035 .frm-dialog label,
2036 .dropdown .frm_primary_label,
2037 .accordion-container label,
2038 .frm-fields td > label,
2039 .frm-fields td > div > label,
2040 .frm_form_field > label:first-child,
2041 .frm-fields p > label,
2042 .frm_on_submit_type > label,
2043 .post-type-frm_display .frm_form_field > label,
2044 #new_fields .frm_primary_label,
2045 #form_global_settings .frm_primary_label,
2046 #frm_form_editor_container .frm_primary_label,
2047 #permissions_settings_settings .frm_primary_label {
2048 color: var(--grey-700);
2049 margin: 0 0 3px;
2050 padding: 0;
2051 width: auto;
2052 font-size: var(--text-sm);
2053 display: block;
2054 line-height: var(--leading);
2055 }
2056
2057 #frm_form_editor_container #frm-show-fields .frm_primary_label {
2058 min-height: 21px;
2059 }
2060
2061 .frm-fields td input + label {
2062 display: inline;
2063 }
2064
2065 #frm_form_editor_container .edit_field_type_end_divider .frm_primary_label,
2066 #frm_form_editor_container .edit_field_type_break .frm_primary_label {
2067 display: none;
2068 }
2069
2070 form .frm_primary_label input {
2071 font-size: 12px;
2072 }
2073
2074 .with_frm_style form .form-field {
2075 margin-bottom: 20px;
2076 }
2077
2078 #frm_builder_page .with_frm_style form .frm_combo_inputs_container > .form-field {
2079 margin-bottom: 0;
2080 }
2081
2082 .frm_description,
2083 .with_frm_style form div.description,
2084 .frm_error,
2085 .with_frm_style form div.description textarea {
2086 padding: 0;
2087 font-size: 11px;
2088 }
2089
2090 .with_frm_style .description {
2091 color: inherit;
2092 }
2093
2094 #frm_form_editor_container .divider_section_only .frm_primary_label {
2095 display: flex;
2096 align-items: center;
2097 gap: var(--gap-xs);
2098 font-size: 20px;
2099 }
2100
2101 #frm_form_editor_container .divider_section_only .frm_primary_label .frm-sub-label {
2102 padding: 0;
2103 }
2104
2105 form .form-field.frm_field_loading {
2106 margin-bottom: 0;
2107 min-height: 0;
2108 padding: 0;
2109 text-align: center;
2110 }
2111
2112 .frm_sorting > .frm_field_loading .frm_visible_spinner.frm-wait {
2113 margin-bottom: 10px;
2114 }
2115
2116 .frm_sorting > .frm_field_loading ~ .frm_field_loading .frm_visible_spinner.frm-wait {
2117 margin-bottom: 0;
2118 display: none;
2119 }
2120
2121 .frm_description,
2122 .with_frm_style form div.description,
2123 .frm_error {
2124 margin: 0;
2125 }
2126
2127 .frm_error {
2128 color: #B94A48;
2129 }
2130
2131 form .frm_blank_field input,
2132 form .frm_blank_field textarea,
2133 form .frm_blank_field select,
2134 form .frm_blank_field .frm-g-recaptcha iframe,
2135 form .frm_blank_field .g-recaptcha iframe {
2136 border-color: #B94A48;
2137 }
2138
2139 form .frm_blank_field label {
2140 color: #B94A48;
2141 }
2142
2143 .frm_required {
2144 color: #B94A48;
2145 }
2146
2147 .with_frm_style .wp-editor-container textarea,
2148 .postbox .wp-editor-container textarea,
2149 .frm_remove_border {
2150 border: none;
2151 }
2152
2153 .with_frm_style .mceIframeContainer,
2154 .postbox .mceIframeContainer {
2155 background-color: #fff;
2156 }
2157
2158 .frm_pro_license_msg {
2159 clear: left;
2160 margin-top: 10px;
2161 }
2162
2163 .frm-license-input {
2164 position: relative;
2165 }
2166
2167 .frm-license-input span {
2168 font-size: var(--text-sm);
2169 }
2170
2171 .frm-license-input .frmsvg {
2172 width: 20px;
2173 height: 20px;
2174 margin-left: 5px;
2175 vertical-align: text-top;
2176 }
2177
2178 .frm-license-input .frmsvg,
2179 .frm-license-input span,
2180 .frm-license-input i {
2181 color: rgb(0, 131, 26);
2182 }
2183
2184 .upgrade_to_pro {
2185 padding: 10px 25px 25px;
2186 max-width: 700px;
2187 margin: 20px auto !important;
2188 }
2189
2190 .upgrade_to_pro .error {
2191 display: none;
2192 }
2193
2194 .toplevel_page_formidable #wpbody-content > .error {
2195 margin: 1px;
2196 padding: 5px 12px;
2197 }
2198
2199 .frm_error_style,
2200 .frm_warning_style,
2201 .frm_note_style,
2202 .frm_message,
2203 #post-body-content .frm_updated_message,
2204 div.frm_updated_message {
2205 border-radius: var(--small-radius);
2206 background-color: #D5F2DC;
2207 color: #1E561F;
2208 padding: var(--gap-sm) var(--gap-md);
2209 font-size: var(--text-sm);
2210 margin: var(--gap-sm) 0;
2211 text-align: left;
2212 }
2213
2214 #frm_top_bar + .wrap > .frm_updated_message, #frm_top_bar + .wrap > .frm_warning_style {
2215 display: inline-block;
2216 width: 100%;
2217 box-sizing: border-box;
2218 }
2219
2220 #post-body-content > .frm_updated_message {
2221 margin: 5px 65px;
2222 }
2223
2224 #form_global_settings #post-body-content > .frm_updated_message,
2225 #form_global_settings #post-body-content > .frm_warning_style {
2226 margin: 5px 25px;
2227 }
2228
2229 .frm_error_style {
2230 color: #973937;
2231 background-color: #EBCCCC;
2232 clear: both;
2233 }
2234
2235 .frm_error_style a {
2236 text-decoration: underline;
2237 font-weight: 600;
2238 }
2239
2240 .frm_error_style svg {
2241 opacity: .7;
2242 }
2243
2244 .frm_warning_style {
2245 color: #7A4D05;
2246 background-color: #FFF2D2;
2247 }
2248
2249 .frm_warning_heading{
2250 font-weight: bold;
2251 margin-bottom:4px;
2252 }
2253
2254 /* Warning message dismiss */
2255 .frm_warning_style {
2256 position: relative;
2257 padding-right: calc(var(--gap-md) + 15px);
2258 }
2259
2260 body.rtl .frm_warning_style {
2261 padding-right: var(--gap-md);
2262 padding-left: calc(var(--gap-md) + 15px);
2263 }
2264
2265 .frm-warning-dismiss {
2266 position: absolute;
2267 top: 10px;
2268 right: 10px;
2269 display: flex;
2270 cursor: pointer;
2271 transition: opacity 0.2s ease-out;
2272 }
2273
2274 body.rtl .frm-warning-dismiss {
2275 left: 10px;
2276 right: auto;
2277 }
2278
2279 .frm-warning-dismiss:hover {
2280 opacity: 0.8;
2281 }
2282
2283 .frm-warning-dismiss.frmsvg,
2284 .frm-warning-dismiss.frmsvg svg {
2285 width: 15px;
2286 height: 15px;
2287 }
2288
2289 .frm_note_style {
2290 background: rgba(188, 224, 253, 0.23);
2291 color: var(--grey-700);
2292 }
2293
2294 .frm-banner-alert {
2295 text-align: left;
2296 margin: 0;
2297 border-radius: 0;
2298 padding: 10px 0 10px 40px;
2299 }
2300
2301 .frm-banner-alert a {
2302 color: var(--primary-500);
2303 font-weight: 400;
2304 text-decoration: none;
2305 }
2306
2307 .frm_updated_message ul,
2308 .frm_updated_message li,
2309 .frm_warning_style ul,
2310 .frm_warning_style li,
2311 .frm_error_style ul,
2312 .frm_error_style li {
2313 margin: 0;
2314 }
2315
2316 .frm-inline-message {
2317 border: 1px solid var(--primary-700);
2318 border-radius: var(--small-radius);
2319 color: var(--primary-700);
2320 background: #fff;
2321 text-align: center;
2322 padding: 20px;
2323 font-size: var(--text-sm);
2324 line-height: var(--leading);
2325 }
2326
2327 .frm-inline-message a {
2328 text-decoration: underline;
2329 font-weight: 600;
2330 color: var(--primary-700);
2331 }
2332
2333 .frm_pro_heading span {
2334 margin-top: 10px;
2335 }
2336
2337 .frm_pro_heading .alignright {
2338 text-align: right;
2339 }
2340
2341 .frm-yes {
2342 color: var(--green);
2343 font-size: var(--text-xl);
2344 }
2345
2346 .frm-nope {
2347 color: var(--grey-400);
2348 font-size: var(--text-xl);
2349 }
2350
2351 .upgrade_to_pro a {
2352 color: var(--orange);
2353 }
2354
2355 .upgrade_to_pro table .frmsvg {
2356 height: var(--text-xl);
2357 width: var(--text-xl);
2358 }
2359
2360 .upgrade_to_pro table.widefat {
2361 background-color: #fff;
2362 border-collapse: collapse;
2363 }
2364
2365 .frm-white-body .upgrade_to_pro table th,
2366 .upgrade_to_pro table td {
2367 padding: 10px 15px;
2368 border: 1px solid var(--grey-300);
2369 line-height: var(--leading);
2370 font-size: var(--text-sm);
2371 }
2372
2373 .upgrade_to_pro table th.frmcenter {
2374 text-align: center;
2375 }
2376
2377 .widefat th.frm_table_break {
2378 background-color: var(--sidebar-color);
2379 }
2380
2381 h2.frm-h2 + .howto {
2382 color: var(--medium-grey);
2383 max-width: 850px;
2384 margin: 5px 0 20px;
2385 }
2386
2387 .frm-admin-page-addons #frm-using-lite {
2388 display: none;
2389 }
2390
2391 .frm-admin-page-addons .frm-search {
2392 margin-top: 0;
2393 }
2394
2395 .frm-addons {
2396 margin-top: var(--gap-lg);
2397 display: grid;
2398 grid-template-columns: 1fr 1fr 1fr;
2399 grid-gap: var(--gap-md);
2400 }
2401
2402 .frm-addons,
2403 .frm-addons h2,
2404 .frm-addons h3 {
2405 color: var(--grey-700);
2406 }
2407
2408 .frm-addons h2 {
2409 font-size: 17px;
2410 }
2411
2412 .frm-addons h3 {
2413 margin-top: 0;
2414 }
2415
2416 /* Card Components */
2417 .frm-card {
2418 width: 100%;
2419 border-radius: 10px;
2420 border: 1px solid var(--grey-300);
2421 opacity: 1;
2422 transition: opacity 1s;
2423 }
2424
2425 .frm-card-box {
2426 max-width: 500px;
2427 background-color: #fff;
2428 border-radius: var(--small-radius);
2429 padding: var(--gap-lg);
2430 box-shadow: var(--box-shadow-sm);
2431 }
2432
2433 .frm-card-box.frm-has-progress-bar {
2434 position: relative;
2435 overflow: hidden;
2436 border-radius: var(--medium-radius);
2437 }
2438
2439 .frm-card-box-progress-bar {
2440 position: absolute;
2441 top: 0;
2442 left: 0;
2443 right: 0;
2444 height: var(--gap-xs);
2445 background-color: var(--primary-25);
2446 }
2447
2448 .frm-card-box-progress-bar > span {
2449 position: absolute;
2450 top: 0;
2451 left: 0;
2452 bottom: 0;
2453 width: 33%;
2454 background-color: var(--primary-500);
2455 }
2456
2457 .frm-card-box-header {
2458 display: flex;
2459 justify-content: center;
2460 margin-bottom: var(--gap-sm);
2461 }
2462
2463 .frm-card-box.frm-has-progress-bar .frm-card-box-header {
2464 margin-top: var(--gap-xs);
2465 }
2466
2467 .frm-card-box-content > :last-child {
2468 margin-bottom: 0;
2469 }
2470
2471 .frm-card-box-footer {
2472 display: flex;
2473 justify-content: end;
2474 gap: var(--gap-sm);
2475 margin-top: var(--gap-lg);
2476 }
2477
2478 .frm-card-box-title {
2479 font-size: var(--text-xl) !important;
2480 font-weight: 600 !important;
2481 margin-bottom: var(--gap-xs);
2482 }
2483
2484 .frm-card-box-text {
2485 font-size: var(--text-md) !important;
2486 color: var(--grey-600) !important;
2487 margin-top: 0 !important;
2488 }
2489
2490 .frm-fade {
2491 opacity: 0;
2492 transition: all 1s;
2493 }
2494
2495 /* Add-on tiles */
2496 .frm-addons .frm-card.frm-addon-not-installed {
2497 position: relative;
2498 }
2499
2500 .frm-addons .plugin-card-top {
2501 min-height: 155px;
2502 padding-top: var(--gap-lg);
2503 overflow: hidden;
2504 }
2505
2506 .frm-addons .plugin-card-top h2 {
2507 margin-top: 0;
2508 font-weight: 400;
2509 }
2510
2511 .frm-template-row p,
2512 .frm-addons .plugin-card-top p {
2513 opacity: 0.8;
2514 }
2515
2516 .frm-addons .plugin-card-top > :not(p):not(h2) {
2517 /* Hide notices from third party plugins */
2518 display: none;
2519 }
2520
2521 .frm-addons .plugin-card-bottom {
2522 padding: 5px 20px 20px;
2523 text-align: center;
2524 background: transparent;
2525 border-top: none;
2526 }
2527
2528 .frm-addons .plugin-card-bottom,
2529 .frm-addons .plugin-card-bottom .button {
2530 font-size: 15px;
2531 }
2532
2533 .frm-addons .button,
2534 .frm-addons .frm-button-tertiary {
2535 float: right;
2536 }
2537
2538 .frm-addons .addon-status {
2539 float: left;
2540 padding-top: 4px;
2541 }
2542
2543 .frm-addon-not-installed .frm-activate-addon,
2544 .frm-addon-not-installed .frm-deactivate-addon,
2545 .frm-addon-not-installed .frm-uninstall-addon,
2546 .frm-addon-installed .frm-install-addon,
2547 .frm-addon-installed .frm-deactivate-addon,
2548 .frm-addon-active .frm-activate-addon,
2549 .frm-addon-active .frm-install-addon,
2550 .frm-addon-active .frm-uninstall-addon,
2551 .plugin-card-pro.frm-addon-active .button,
2552 .plugin-card-pro.frm-addon-active .frm-button-tertiary {
2553 display: none !important;
2554 }
2555
2556 #frm-addons-page .frm-addon-button {
2557 opacity: 1 !important;
2558 }
2559
2560 .frm-save-and-reload-options {
2561 margin-top: 10px;
2562 font-size: 13px;
2563 }
2564
2565 .frm-save-and-reload,
2566 .frm-save-and-reload + .frm-button-secondary {
2567 visibility: visible !important;
2568 }
2569
2570 .addon-status-label {
2571 opacity: .7;
2572 }
2573
2574 .frm-addon-active .addon-status-label {
2575 color: var(--green);
2576 opacity: 1;
2577 }
2578
2579 .frm-addon-error {
2580 position: absolute;
2581 top: 55px;
2582 left: 10px;
2583 right: 10px;
2584 font-weight: bold;
2585 text-align: center;
2586 }
2587
2588 /* Form Templates */
2589
2590 .frm-new-template.plugin-card-bottom {
2591 overflow: visible;
2592 }
2593
2594 #frm-new-template p:first-child {
2595 margin-top: 0;
2596 }
2597
2598 .frm-admin-page-formidableedit #wpbody-content > *:not(.frm-review-notice):not(.frm_previous_install):not(.frm-banner-alert),
2599 #wpbody-content > .updated,
2600 #wpbody-content > #update-nag,
2601 #wpbody-content > .update-nag,
2602 #wpbody-content > .notice,
2603 #wpbody-content > .error:not(.frm_previous_install),
2604 .frm-white-body .updated,
2605 .frm-white-body .notice,
2606 .frm_wrap > .wrap > .notice,
2607 .frm-white-body .error:not(.frm_previous_install)
2608 {
2609 display: none;
2610 }
2611
2612 .frm-admin-page-formidableedit #frm_builder_page {
2613 display: block !important;
2614 }
2615
2616 .frm-white-body .updated,
2617 .frm-white-body .error {
2618 margin: 0;
2619 padding: 10px 20px;
2620 }
2621
2622 .frm-modal .postbox {
2623 max-height: 600px;
2624 overflow: hidden;
2625 margin-bottom: 0;
2626 }
2627
2628 .frm-modal .postbox .frm_modal_top,
2629 .frm-dialog .frm_common_modal .postbox > div:first-child,
2630 .frm-error-modal .frm_modal_top {
2631 padding: var(--gap-md) var(--gap-md) 0;
2632 position: relative;
2633 }
2634
2635 .frm-modal h2,
2636 .frm-modal .postbox .inside h2, /* Override WP. */
2637 .frm-modal .postbox .frm-modal-title,
2638 .frm-dialog .frm_common_modal .postbox > div:first-child > div:first-child,
2639 .frm-error-modal .frm-modal-title {
2640 display: inline-block;
2641 font-size: var(--text-lg);
2642 color: var(--grey-900);
2643 font-weight: 600;
2644 margin: 0;
2645 padding: 0;
2646 }
2647
2648 .frm-modal h3 {
2649 font-weight: 500;
2650 }
2651
2652 /* Dismiss icon button */
2653
2654 .frm-inline-modal > a.dismiss,
2655 .frm-modal .postbox > a.dismiss,
2656 .frm-modal .postbox .frm-modal-title + div:last-child,
2657 .frm-dialog .frm_common_modal .postbox > div:first-child > div:last-child {
2658 position: absolute;
2659 top: 19px;
2660 right: 19px;
2661 display: flex;
2662 z-index: 2;
2663 }
2664
2665 body.rtl .frm-inline-modal > a.dismiss,
2666 body.rtl .frm-modal .postbox > a.dismiss,
2667 body.rtl .frm-modal .postbox .frm-modal-title + div:last-child,
2668 body.rtl .frm-dialog .frm_common_modal .postbox > div:first-child > div:last-child {
2669 right: unset;
2670 left: 30px;
2671 }
2672
2673 .frm-info-modal .postbox > a.dismiss,
2674 .frm-inline-modal > a.dismiss {
2675 right: 13px;
2676 top: 13px;
2677 }
2678
2679 .frm-modal .postbox .frm-modal-title + div:last-child a,
2680 .frm-modal a.dismiss .frmsvg,
2681 .frm_common_modal .frm_modal_top a .frmsvg {
2682 color: var(--grey-800);
2683 }
2684
2685 .frm-modal .frm_modal_content > div.inside,
2686 .frm_common_modal .frm_modal_content > div.inside {
2687 padding: var(--gap-md);
2688 margin: 0;
2689 font-size: var(--text-sm);
2690 color: var(--grey-700);
2691 }
2692
2693 .frm-modal p {
2694 color: var(--grey-900);
2695 }
2696
2697 .frm_common_modal .postbox {
2698 display: flex;
2699 flex-direction: column;
2700 }
2701
2702 .frm-modal .postbox > div.inside .cta-inside {
2703 overflow-y: auto;
2704 height: auto;
2705 }
2706
2707 .frm_modal_footer {
2708 padding: 0 var(--gap-md) var(--gap-sm);
2709 text-align: right;
2710 }
2711
2712 body.frm-body-with-open-modal {
2713 overflow-y: hidden;
2714 }
2715
2716 /* These template list styles are still used to list the View types in the New View modal. */
2717 .frm-templates-list {
2718 margin-top: 0;
2719 }
2720
2721 .frm-templates-list.frm_grid_container li {
2722 margin-bottom: 0;
2723 }
2724
2725 .frm-templates-list li {
2726 vertical-align: top;
2727 position: relative;
2728 box-sizing: border-box;
2729 border-radius: 6px;
2730 border: 1px solid transparent;
2731 text-align: left;
2732 }
2733
2734 .frm-templates-list li:not(.frm_hidden) {
2735 display: inline-block;
2736 }
2737
2738 .frm-templates-list.frm-categories-list li {
2739 width: 100%;
2740 }
2741
2742 .frm-templates-list li.frm-selectable {
2743 cursor: pointer;
2744 }
2745
2746 .frm-templates-list li.frm-selectable:hover {
2747 background: var(--light-blue);
2748 border-color: rgba(65, 153, 253, 0.5);
2749 }
2750
2751 .frm-templates-list li.frm-selectable:hover h3,
2752 .frm-templates-list li.frm-selectable:hover p {
2753 max-width: calc( 100% - 65px );
2754 }
2755
2756 .frm-templates-list .frm-featured-form {
2757 display: flex;
2758 width: 100%;
2759 }
2760
2761 .frm-templates-list li .frm-featured-form {
2762 padding: 7px 5px;
2763 }
2764
2765 .frm-templates-list li li > div {
2766 padding-left: 0;
2767 }
2768
2769 .frm-templates-list li > div > div {
2770 vertical-align: middle;
2771 }
2772
2773 .frm-category-icon,
2774 .frm-icon-wrapper {
2775 background: var(--primary-500);
2776 border-radius: var(--small-radius);
2777 color: #fff;
2778 width: 32px;
2779 height: 32px;
2780 font-size: 18px;
2781 box-sizing: border-box;
2782 align-self: center;
2783 justify-content: center;
2784 align-items: center;
2785 display: inline-flex;
2786 }
2787
2788 .frm-templates-list li .frm-category-icon {
2789 overflow: hidden;
2790 }
2791
2792 .frm-templates-list li h3,
2793 .frm-templates-list li p {
2794 text-align: left;
2795 margin: 0;
2796 white-space: nowrap;
2797 text-overflow: ellipsis;
2798 overflow: hidden;
2799 }
2800
2801 .frm-templates-list li h3,
2802 .frm-templates-list .frm-install-template h3 {
2803 font-size: var(--text-sm) !important;
2804 }
2805
2806 .frm-templates-list .frm-install-template div {
2807 text-align: left;
2808 }
2809
2810 #frm_leave_email,
2811 #frm_code_from_email {
2812 width: 480px;
2813 max-width: 100%;
2814 }
2815
2816 .control-section:hover .accordion-section-title {
2817 background: #fff !important;
2818 border-bottom-color: transparent;
2819 }
2820
2821 .frm-templates-list.frm-categories-list li > div > div:last-child {
2822 padding-left: 0;
2823 }
2824
2825 .frm-hover-icons {
2826 position: absolute;
2827 right: 0;
2828 top: calc( ( 58px - 2px - 22px ) / 2 ); /* Template item height - borders - icon height */
2829 max-width: 91px;
2830 height: 100%;
2831 box-sizing: border-box;
2832 padding: 0 10px 0 5px !important;
2833 border-radius: var(--small-radius);
2834 text-align: right;
2835 display: flex;
2836 gap: 5px;
2837 }
2838
2839 .frm-ready-made-solution .frm-hover-icons {
2840 visibility: hidden;
2841 }
2842
2843 .frm-ready-made-solution:hover .frm-hover-icons {
2844 visibility: visible;
2845 }
2846
2847 .frm-hover-icons a {
2848 width: 22px;
2849 height: 22px;
2850 font-size: var(--text-md);
2851 display: inline-flex;
2852 align-items: center;
2853 justify-content: center;
2854 border-radius: 50%;
2855 box-sizing: border-box;
2856 line-height: var(--leading);
2857 text-align: center;
2858 }
2859
2860 .frm-hover-icons > .frm-preview-form,
2861 .frm-hover-icons > .frm-delete-form {
2862 border: 1px solid var(--primary-500);
2863 }
2864
2865 .frm-hover-icons > .frm-create-form,
2866 .frm-ready-made-solution .frm-hover-icons a {
2867 background-color: var(--primary-500);
2868 }
2869
2870 .frm-hover-icons > a .frmsvg {
2871 width: 14px;
2872 height: 14px;
2873 vertical-align: baseline;
2874 }
2875
2876 .frm-hover-icons > .frm-preview-form .frmsvg,
2877 .frm-hover-icons > .frm-delete-form .frmsvg {
2878 color: var(--primary-500);
2879 }
2880
2881 .frm-hover-icons > .frm-unlock-form {
2882 background-color: var(--primary-500);
2883 }
2884
2885 .frm-hover-icons > .frm-unlock-form .frmsvg {
2886 background-color: var(--primary-500);
2887 }
2888
2889 .frm-ready-made-solution .frmsvg {
2890 width: 14px;
2891 height: 14px;
2892 }
2893
2894 .frm-hover-icons .frm-create-form svg,
2895 .frm-ready-made-solution .frm-hover-icons svg {
2896 color: #fff;
2897 }
2898
2899 .frm-hover-icons .frm-create-form:hover,
2900 .frm-ready-made-solution .frm-hover-icons a:hover,
2901 .frm-hover-icons > .frm-unlock-form:hover,
2902 .frm-hover-icons > .frm-unlock-form:hover .frmsvg
2903 {
2904 background-color: var(--primary-700) !important;
2905 }
2906
2907 .frm-hover-icons .frm-preview-form:hover,
2908 .frm-hover-icons .frm-delete-form:hover
2909 {
2910 border: 1px solid var(--primary-700) !important;
2911 }
2912
2913 .frm-hover-icons .frm-preview-form:hover .frmsvg,
2914 .frm-hover-icons .frm-delete-form:hover .frmsvg {
2915 color: var(--primary-700) !important;
2916 }
2917
2918 .frm-application-card h4 .frmsvg,
2919 .frm-locked-template h3 .frmsvg {
2920 height: var(--text-sm);
2921 width: var(--text-sm);
2922 vertical-align: text-top;
2923 color: var(--grey-500);
2924 }
2925
2926 .frm-modal-back {
2927 cursor: pointer;
2928 margin-right: 4px;
2929 }
2930
2931 .frm-modal-cancel {
2932 float: left;
2933 }
2934
2935 .frm-meta-tag,
2936 .frm-meta-tag:hover {
2937 padding: var(--gap-2xs) var(--gap-xs);
2938 border-radius: var(--small-radius);
2939 font-weight: 600;
2940 display: inline-flex;
2941 background-color: #D9EBFF;
2942 gap: 2px;
2943 }
2944
2945 .frm-meta-tag.frm-grey-tag,
2946 .frm-meta-tag.frm-grey-tag:hover {
2947 background-color: var(--sidebar-hover);
2948 color: var(--grey-900);
2949 }
2950
2951 .frm-meta-tag.frm-red-tag,
2952 .frm-meta-tag.frm-red-tag:hover {
2953 background: var(--error-100);
2954 color: var(--error-700);
2955 }
2956
2957 .frm-meta-tag.frm-orange-tag,
2958 .frm-meta-tag.frm-orange-tag:hover {
2959 background-color: #FEF7F4;
2960 color: var(--orange);
2961 }
2962
2963 .frm-meta-tag.frm-green-tag,
2964 .frm-meta-tag.frm-green-tag:hover {
2965 background-color: var(--success-500);
2966 color: #fff;
2967 }
2968
2969 .frm-entry-status-0,
2970 .frm-meta-tag.frm-lt-green-tag,
2971 .frm-meta-tag.frm-lt-green-tag:hover {
2972 background-color: var(--success-100);
2973 color: var(--success-800);
2974 }
2975
2976 .frm-meta-tag.frm-new-pill {
2977 background-color: var(--success-500);
2978 vertical-align: text-bottom;
2979 }
2980
2981 /* Start entry statuses */
2982 .frm-entry-status {
2983 font-weight: 500;
2984 }
2985
2986 .frm-entry-status-1 {
2987 color: #7A4D05;
2988 background: #FFF2D2;
2989 }
2990 /* End entry statuses */
2991
2992 #frm-create-footer {
2993 padding: 15px 20px;
2994 }
2995
2996 li .frm-hover-icons .frm-preview-form,
2997 .frm-hover-icons .frm-unlock-form,
2998 .frm-locked-template .frm-hover-icons .frm-create-form,
2999 .frm-modal-back
3000 {
3001 display: none;
3002 }
3003
3004
3005 .frm-locked-template .frm-hover-icons .frm-unlock-form,
3006 li[data-preview] .frm-hover-icons .frm-preview-form {
3007 display: inline-flex;
3008 }
3009
3010 .frm-modal-back svg {
3011 color: #7F7F7F;
3012 }
3013
3014 #frm-upgrade-body-list-wrapper > div {
3015 display: inline-block;
3016 width: calc( 100% / 3 );
3017 vertical-align: top;
3018 text-align: left;
3019 margin-bottom: 10px;
3020 }
3021
3022 #frm-upgrade-body-list-wrapper ul {
3023 padding-left: 40px;
3024 }
3025
3026 #frm-upgrade-body-list-wrapper ul li:before {
3027 content: "\2022";
3028 color: var(--primary-500);
3029 display: inline-block;
3030 width: 1em;
3031 margin-left: -1em;
3032 }
3033
3034 /* Embed Form Modal */
3035
3036 .frm-embed-modal-content {
3037 padding: var(--gap-md);
3038 }
3039
3040 .frm-embed-modal-content.frm-loading-page-options {
3041 display: flex;
3042 justify-content: center;
3043 }
3044
3045 #frm_embed_modal .frm_embed_example {
3046 background: var(--sidebar-color);
3047 border: 1px solid var(--sidebar-hover);
3048 border-radius: var(--small-radius);
3049 color: var(--grey-900);
3050 font-size: var(--text-sm);
3051 padding-right: var(--gap-lg);
3052 width: 100%;
3053 height: auto !important;
3054 resize: none;
3055 }
3056
3057 #frm_embed_modal textarea.frm_embed_example {
3058 padding-bottom: 0;
3059 }
3060
3061 .frm-embed-modal-content > div a {
3062 position: absolute;
3063 right: 0;
3064 top: 0;
3065 }
3066
3067 .frm-embed-modal-content > div {
3068 position: relative;
3069 margin-bottom: var(--gap-sm);
3070 }
3071
3072 .frm-embed-modal-content > div:last-child {
3073 margin-bottom: 0;
3074 }
3075
3076 .frm-embed-modal-content svg[id^="frm_copy_embed_"] {
3077 position: absolute;
3078 bottom: calc( ( 38px - 18px ) / 2 ); /* Input height - SVG height */
3079 right: 10px;
3080 cursor: pointer;
3081 opacity: 0.5;
3082 }
3083
3084 .frm-border-info-box,
3085 .frm-embed-modal-option {
3086 border-radius: var(--small-radius);
3087 border: 1px solid var(--grey-300);
3088 padding: var(--gap-sm);
3089 cursor: pointer;
3090 display: flex;
3091 gap: var(--gap-sm);
3092 font-size: var(--text-sm);
3093 }
3094
3095 .frm-embed-modal-option + .frm-embed-modal-option {
3096 margin-top: var(--gap-sm);
3097 }
3098
3099 .frm-collapsed .frmsvg,
3100 .caret.rotate-270,
3101 .frm-embed-modal-option .caret {
3102 align-self: center;
3103 margin-left: auto;
3104 transform: rotate(-90deg);
3105 }
3106
3107 #frm_embed_modal .frm_modal_footer {
3108 display: none;
3109 }
3110
3111 #frm_embed_modal.frm-on-page-2 .frm_modal_footer {
3112 display: block;
3113 }
3114
3115 .frm-embed-modal-content ul {
3116 max-height: 300px;
3117 overflow-y: scroll;
3118 }
3119
3120 .frm-embed-modal-wrapper.frm-dialog {
3121 overflow: visible;
3122 }
3123
3124 /* Bulk Options */
3125 #frm-bulk-modal .frm_grid_container {
3126 grid-template-columns: repeat(12, 8.33%);
3127 grid-gap: 0;
3128 }
3129
3130 #frm-bulk-modal .frm8 {
3131 border-right: 1px solid var(--grey-300);
3132 padding: 10px 20px 10px var(--gap-lg);
3133 }
3134
3135 #frm-bulk-modal .frm4 {
3136 padding: 10px 0;
3137 }
3138
3139 .frm-inline-modal .howto {
3140 margin: 5px 0 10px;
3141 color: var(--grey);
3142 }
3143
3144 .frm-inline-modal .frm_code_list + .howto {
3145 margin-bottom: 0;
3146 }
3147
3148 #frm_bulk_options {
3149 height: 240px;
3150 width: 100%;
3151 border: none;
3152 box-shadow: none;
3153 padding: 0;
3154 }
3155
3156 .frm-bulk-edit-link {
3157 text-align: right;
3158 font-size: var(--text-sm);
3159 padding: 0 5px 10px;
3160 }
3161
3162 .frm-small-add {
3163 font-size: var(--text-sm) !important;
3164 }
3165
3166 .frm-small-add span {
3167 color: var(--primary-500);
3168 font-size: 12px;
3169 height: 12px;
3170 width: 12px;
3171 }
3172
3173 .frm_no_captcha_text {
3174 font-weight: bold;
3175 color: #AA0000;
3176 }
3177
3178 .frm_image_from_url {
3179 height: 50px;
3180 }
3181
3182 /*Switch form dropdown*/
3183 h1 .fa-caret-down {
3184 font-size: 18px;
3185 }
3186
3187 .caret {
3188 display: inline-block;
3189 width: 19px;
3190 height: 9px;
3191 margin-right: -8px;
3192 vertical-align: middle;
3193 }
3194
3195 .caret,
3196 .wp-admin .frm_wrap select,
3197 .frm_wrap .frm_form_builder select,
3198 .frm_wrap .ui-autocomplete-input {
3199 background: transparent 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%23667085%22%2F%3E%3C%2Fsvg%3E') no-repeat right 5px top 55%;
3200 background-size: var(--text-md) var(--text-md);
3201 padding-right: var(--gap-lg) !important;
3202 }
3203
3204 .caret {
3205 padding-right: var(--gap-xs) !important;
3206 }
3207
3208 .frm-btn-group .caret {
3209 float: right;
3210 margin-top: calc( var(--text-md) / 2 );
3211 }
3212
3213 .dropdown {
3214 position: relative;
3215 }
3216
3217 .dropdown-toggle:focus {
3218 outline: 0;
3219 }
3220
3221 .frm_wrap .ui-autocomplete,
3222 #frm_adv_info.frm-dropdown-menu,
3223 .frm-dropdown-menu {
3224 /* Copied from .dropdown-menu rules from Bootstrap */
3225 position: absolute;
3226 top: 100%;
3227 left: 0;
3228 z-index: 1000;
3229 display: none;
3230 float: left;
3231 padding-left: 4px;
3232 padding-right: 4px;
3233 margin: var(--gap-xs) 0 0;
3234 text-align: left;
3235 list-style: none;
3236 background: none;
3237 background-color: #fff;
3238 background-clip: padding-box;
3239 border: 1px solid var(--grey-100);
3240 border-radius: 0.25rem;
3241 box-shadow: var(--box-shadow-lg);
3242
3243 /* Custom rules */
3244 max-height: 200px;
3245 overflow-y: auto;
3246 overflow-x: hidden;
3247 font-size: var(--text-md);
3248 width: auto;
3249 min-width: 160px;
3250 }
3251
3252 .frm6 .frm-dropdown-menu {
3253 min-width: 100px;
3254 max-width: 99%;
3255 }
3256
3257 #frm_bs_dropdown .frm-dropdown-menu {
3258 max-width: 400px;
3259 }
3260
3261 .field_type_list .frm-dropdown-menu {
3262 min-width: 150px !important;
3263 }
3264
3265 #frm_field_group_controls .frm-dropdown-menu,
3266 .frm-field-action-icons .frm-dropdown-menu {
3267 min-width: 180px !important;
3268 }
3269
3270 .frm-field-action-icons .frm-dropdown-toggle svg {
3271 color: #9EA9B8;
3272 }
3273
3274 .multiselect-container.frm-dropdown-menu,
3275 #search-submit .frm-dropdown-menu {
3276 min-width: 200px !important;
3277 }
3278
3279 .preview .frm-dropdown-menu {
3280 min-width: 230px !important;
3281 }
3282
3283 .frm-dropdown-menu.dropdown-menu-right {
3284 right: 0;
3285 left: auto;
3286 }
3287
3288 .frm-dropdown-menu .divider {
3289 height: 1px;
3290 margin: 9px 0;
3291 overflow: hidden;
3292 background-color: #e5e5e5;
3293 }
3294
3295 .frm-dropdown-menu > .dropdown-item {
3296 margin: 0;
3297 }
3298
3299 .frm-select-list-item,
3300 .frm_wrap .ui-autocomplete li > div,
3301 .multiselect-container button.multiselect-option,
3302 .frm-dropdown-menu > .dropdown-item > a,
3303 .frm-dropdown-menu .frm_dropdown_li {
3304 clear: both;
3305 font-weight: normal;
3306 white-space: nowrap;
3307 text-decoration: none;
3308 border-radius: var(--small-radius);
3309 }
3310
3311 .frm-dropdown-menu > .active > a,
3312 .frm-dropdown-menu > .active > a:hover,
3313 .frm-dropdown-menu > .active > a:focus {
3314 text-decoration: none;
3315 outline: 0;
3316 }
3317
3318 .frm-select-list-item.disabled,
3319 .frm-dropdown-menu > .disabled > a, .frm-dropdown-menu > .disabled > a:hover, .frm-dropdown-menu > .disabled > a:focus {
3320 color: #999999;
3321 }
3322
3323 .frm-select-list-item.disabled:hover,
3324 .frm-dropdown-menu > .disabled > a:hover,
3325 .frm-dropdown-menu > .disabled > a:focus {
3326 text-decoration: none;
3327 background-color: transparent;
3328 background-image: none;
3329 cursor: not-allowed;
3330 }
3331
3332 .open > .frm-dropdown-menu {
3333 display: block;
3334 }
3335
3336 .open > a {
3337 outline: 0;
3338 }
3339
3340 .dropdown-header {
3341 display: block;
3342 padding: 3px 10px;
3343 font-size: var(--text-xs);
3344 color: var(--grey-400);
3345 }
3346
3347 .dropdown-backdrop {
3348 position: fixed;
3349 left: 0;
3350 right: 0;
3351 bottom: 0;
3352 top: 0;
3353 z-index: 990;
3354 }
3355
3356 .dropdown-menu-right > .frm-dropdown-menu,
3357 .pull-right > .frm-dropdown-menu {
3358 right: 0;
3359 left: auto;
3360 }
3361
3362 .navbar-fixed-bottom .dropdown .caret {
3363 border-top: 0 dotted;
3364 border-bottom: 4px solid #000000;
3365 content: "";
3366 }
3367
3368 .navbar-fixed-bottom .dropdown .frm-dropdown-menu {
3369 top: auto;
3370 bottom: 100%;
3371 margin-bottom: 1px;
3372 }
3373
3374 .btn {
3375 border: 1px solid #ddd;
3376 background: #fff;
3377 height: 28px;
3378 line-height: var(--leading);
3379 }
3380
3381 a.frm_option_icon:before {
3382 color: var(--primary-500);
3383 font-size: 22px;
3384 width: 22px;
3385 height: 22px;
3386 }
3387
3388 a.frm_option_icon:focus::before,
3389 a.frm_option_icon:hover::before {
3390 color: var(--primary-700);
3391 }
3392
3393 .frm_top_left .frm-dropdown-toggle {
3394 color: #999;
3395 }
3396
3397 .frm-card ol {
3398 margin-left: 15px;
3399 }
3400
3401 .frm-dropdown-toggle {
3402 text-decoration: none;
3403 }
3404
3405 .frm-card .frm-dropdown-toggle {
3406 border: 1px solid var(--grey-300);
3407 border-radius: var(--small-radius);
3408 font-size: 13px;
3409 color: var(--grey-700);
3410 padding: 7px 20px;
3411 }
3412
3413 .frm_actions_dropdown .frm-dropdown-menu {
3414 font-size: var(--text-sm);
3415 color: #5F6C72;
3416 }
3417
3418 .frm-dropdown-menu .frm_icon_font {
3419 vertical-align: middle;
3420 color: #5F6C72;
3421 margin-right: 3px;
3422 }
3423
3424 /* BS Multiselect */
3425 .multiselect-container.frm-dropdown-menu {
3426 top: auto;
3427 left: auto;
3428 font-size: var(--text-sm);
3429 padding: 4px;
3430 margin-bottom: 3px;
3431 }
3432
3433 .frm-right-panel .accordion-section-content {
3434 background: transparent;
3435 padding: 0;
3436 overflow: initial;
3437 }
3438
3439 .frm-right-panel .accordion-section-content > .inside {
3440 padding: 0 0 var(--gap-xs);
3441 }
3442
3443 .frm-right-panel .accordion-section-content .inside a {
3444 font-size: inherit;
3445 }
3446
3447 #post-body-content + .frm-right-panel h3.accordion-section-title {
3448 padding: 7px 10px 8px 14px;
3449 font-size: var(--text-md);
3450 color: var(--grey-700);
3451 }
3452
3453 .frm-right-panel .control-section.open h3 {
3454 border-bottom: none;
3455 }
3456
3457 .js .frm-right-panel .control-section.open .accordion-section-title,
3458 .js .frm-right-panel .control-section .accordion-section-title:focus,
3459 .js .frm-right-panel .control-section .accordion-section-title:hover {
3460 background: transparent;
3461 color: var(--grey-900);
3462 }
3463
3464 .js .frm-right-panel .control-section .accordion-section-title:hover:before {
3465 color: var(--grey-700);
3466 }
3467
3468 .frm-with-line,
3469 .accordion-section-content h4 {
3470 font-size: var(--text-md);
3471 font-weight: 400;
3472 margin: 20px -20px 10px;
3473 padding: 0 20px;
3474 color: var(--grey-700);
3475 position: relative;
3476 border: none !important;
3477 }
3478
3479 .frm-with-line span,
3480 .accordion-section-content h4 span {
3481 background: #fff;
3482 padding: 0 10px;
3483 position: relative;
3484 display: inline-block;
3485 z-index: 2;
3486 }
3487
3488 .accordion-section-content h4 span {
3489 background: var(--sidebar-color);
3490 }
3491
3492 .frm-right-panel .frm-with-line span {
3493 background: var(--sidebar-color) !important;
3494 margin-left: -4px;
3495 }
3496
3497 .frm-right-panel .frm-inline-modal .frm-with-line span {
3498 background: #fff !important;
3499 }
3500
3501 .frm-right-panel .accordion-section-title:before,
3502 .frm-right-panel .accordion-section-title:after {
3503 content: "\e913" !important;
3504 font-family: "s11-fp" !important;
3505 font-size: 18px;
3506 font-variant: normal;
3507 text-rendering: auto;
3508 vertical-align: text-top;
3509 }
3510
3511 .frm-right-panel .accordion-section-title:after {
3512 top: calc(50% - 10px) !important;
3513 }
3514
3515 .frm-right-panel .open .accordion-section-title:after {
3516 content: "\e62a" !important;
3517 }
3518
3519 .frm-right-panel .accordion-section-title:before {
3520 content: "\f1de" !important;
3521 color: var(--grey);
3522 font-size: 17px !important;
3523 }
3524
3525 .frm-with-line:before,
3526 .accordion-section-content h4:before {
3527 content: '';
3528 display: block;
3529 position: absolute;
3530 border-bottom: 1px solid var(--grey-300);
3531 left: 0;
3532 width: 100%;
3533 top: 50%;
3534 }
3535
3536 .frm-right-panel .accordion-section {
3537 border: none;
3538 position: relative;
3539 }
3540 .frm-right-panel .accordion-section-title > .frmsvg:first-child {
3541 margin: 0 10px 0 0;
3542 color: var(--grey);
3543 }
3544 .frm-right-panel .accordion-section-title:hover > .frmsvg:first-child {
3545 color: var(--grey-900);
3546 }
3547
3548 .frm-right-panel .open .accordion-section-title > .frmsvg:last-child {
3549 transform: rotate(180deg);
3550 }
3551 #frm_view_editor_left.frm-right-panel .accordion-section-title,
3552 .frm-right-panel h3.accordion-section-title {
3553 padding: 15px 20px;
3554 background: var(--sidebar-color);
3555 line-height: var(--leading);
3556 color: var(--grey-700);
3557 font-size: var(--text-lg);
3558 font-weight: 400;
3559 }
3560
3561 .control-section .accordion-section-title:after, /** Form template list */
3562 .customize-pane-child .accordion-section-title:after {
3563 top: 15px;
3564 }
3565
3566 .accordion-container .frm-dropdown-menu {
3567 min-width: 40px;
3568 }
3569
3570 .frm-btn-group .multiselect.dropdown-toggle {
3571 box-sizing: border-box;
3572 min-height: unset;
3573 cursor: pointer;
3574 }
3575
3576 .accordion-container .frm-dropdown-menu:before,
3577 .accordion-container .multiselect.dropdown-toggle:before {
3578 font-family: "s11-fp" !important;
3579 }
3580
3581 .multiselect-container {
3582 position: absolute;
3583 list-style-type: none;
3584 margin: 0;
3585 padding: 0;
3586 width: 100%;
3587 max-width: 250px;
3588 }
3589
3590 .multiselect-container button.multiselect-option {
3591 width: 100%;
3592 text-align: left;
3593 border: none;
3594 margin-bottom: 4px;
3595 }
3596
3597 .multiselect-container button.multiselect-option label {
3598 margin-left: 5px;
3599 }
3600
3601 .accordion-container .multiselect-container label {
3602 padding: 3px 19px 3px 7px;
3603 }
3604
3605 .frm-btn-group.btn-group > .btn-group:nth-child(2) > .multiselect.btn {
3606 border-top-left-radius: 4px;
3607 border-bottom-left-radius: 4px
3608 }
3609
3610 .frm-btn-group.btn-group, .frm-btn-group.btn-group-vertical {
3611 display: block;
3612 }
3613
3614 .multiselect-option label {
3615 max-width: calc(100% - 22px);
3616 text-overflow: ellipsis;
3617 overflow: hidden;
3618 white-space: nowrap;
3619 }
3620
3621 .frm_scale {
3622 text-align: center;
3623 float: left;
3624 margin-right: 10px;
3625 }
3626
3627 .frm_scale input {
3628 display: block;
3629 margin: 5px
3630 }
3631
3632 .frm_multi_fields_container {
3633 float: left;
3634 }
3635
3636 .frm_multi_fields_container,
3637 .frm_form_builder .frm_form_fields input[type=tel]
3638 .frm_form_builder .frm_form_fields input[type=range],
3639 .frm_form_builder .frm_form_fields input[type=text] {
3640 width: 100%;
3641 height: auto;
3642 }
3643
3644 .frm_form_builder .frm_time_wrap .frm_time_sep {
3645 vertical-align: sub;
3646 vertical-align: -webkit-baseline-middle;
3647 }
3648
3649 .frm_form_builder input[type=range]::-webkit-slider-runnable-track {
3650 background-color: var(--blue-border);
3651 }
3652
3653 .frm_form_builder input[type=range]::-moz-range-track {
3654 background-color: var(--blue-border);
3655 }
3656
3657 .frm_form_builder input[type=range]::-ms-fill-lower {
3658 background-color: var(--blue-border);
3659 }
3660
3661 .frm_form_builder input[type=range]::-ms-fill-upper {
3662 background-color: var(--blue-border);
3663 }
3664
3665 .frm-embed-field-placeholder {
3666 text-align: center;
3667 height: 145px;
3668 display: flex;
3669 align-items: center;
3670 justify-content: center;
3671 }
3672
3673 .frm-fake-field {
3674 display: block;
3675 height: 25px;
3676 background-color: var(--light-blue);
3677 border: 1px solid var(--grey-300);
3678 margin: 10px 0;
3679 border-radius: var(--small-radius);
3680 }
3681
3682 .frm-embed-message {
3683 position: absolute;
3684 background: #fff;
3685 border: 1px solid var(--grey-300);
3686 color: var(--grey-700);
3687 padding: var(--gap-md);
3688 font-size: var(--text-lg);
3689 max-width: 200px;
3690 min-width: 50%;
3691 margin: 0 var(--gap-md);
3692 overflow: hidden;
3693 text-overflow: ellipsis;
3694 }
3695
3696 .frm-summary-message {
3697 top: 50%;
3698 left: 50%;
3699 padding: 15px 0;
3700 font-size: var(--text-md);
3701 transform: translate(-50%, -50%);
3702 }
3703
3704 .frm-summary-learn-more {
3705 font-size: inherit !important;
3706 }
3707
3708 .frm-single-settings .frm-embed-message {
3709 width: 100%;
3710 position: static;
3711 border-radius: var(--small-radius);
3712 }
3713
3714 #new_fields input[type=text],
3715 #new_fields input[type=number],
3716 .frm_field_box .frm_form_fields > textarea,
3717 .frm_form_fields .frm_form_field > textarea,
3718 .frm_form_fields .frm_form_field > input[type=email],
3719 .frm_form_fields .frm_form_field > input[type=url],
3720 .frm_form_fields .frm_form_field > input[type=number],
3721 .frm_form_fields .frm_form_field > input[type=tel],
3722 .frm_form_fields .frm_form_field > input[type=text],
3723 .frm_form_fields .frm_form_field > input[type=range] {
3724 width: 100%;
3725 }
3726
3727 .frm_form_fields textarea.wp-editor-area {
3728 width: 100%;
3729 border: none;
3730 }
3731
3732 .frm_form_fields input[type="file"], .frm_form_fields input[type="file"]:disabled {
3733 background: transparent;
3734 border: none;
3735 box-shadow: none;
3736 width: auto;
3737 }
3738
3739 .frm_form_fields select {
3740 width: auto;
3741 max-width: 100%;
3742 }
3743
3744 input[type="radio"],
3745 input[type="checkbox"] {
3746 width: 16px;
3747 padding: 0;
3748 }
3749
3750 .frm_wrap .frm-number-range + .frm_last input,
3751 .frm_wrap .frm-number-range input {
3752 text-align: center;
3753 font-weight: 600;
3754 }
3755
3756 .frm_wrap .frm-number-range input[type=number],
3757 .frm_wrap .frm-number-range input[type=text] {
3758 color: var(--primary-700);
3759 }
3760
3761 .frm-range-min {
3762 position: relative;
3763 }
3764
3765 .frm-range-min:after {
3766 content: '';
3767 height: 3px;
3768 width: 10px;
3769 border-radius: 30%;
3770 background: var(--primary-700);
3771 position: absolute;
3772 top: 17px;
3773 right: -28%;
3774 }
3775
3776 .frm_grid_container > p,
3777 .frm_grid_container > p.frm_form_field,
3778 .frm_grid_container > div.frm_form_field,
3779 #new_fields .frm_grid_container > p {
3780 margin-top: 8px;
3781 margin-bottom: 8px;
3782 margin-right: 0;
3783 }
3784
3785 #new_fields div.frm_grid_container > .frm_primary_label {
3786 margin-top: 8px;
3787 }
3788
3789 #new_fields .frm_primary_label + p,
3790 #new_fields .frm_primary_label + .frm6 + .frm6,
3791 #new_fields .frm_primary_label + .frm6 + .frm-inline-modal + .frm6 {
3792 margin-top: 0;
3793 }
3794
3795 .frm_catlevel_2, .frm_catlevel_3, .frm_catlevel_4, .frm_catlevel_5 {
3796 margin-left: 18px;
3797 }
3798
3799 .frm_wrap .frm-fields .auto_width,
3800 .frm_form_fields input.auto_width, .frm_form_fields select.auto_width, .frm_form_fields textarea.auto_width {
3801 width: auto !important;
3802 }
3803
3804 .frm_form_fields select.auto_width {
3805 min-width: 60px;
3806 }
3807
3808 .frm_form_fields input:focus, .frm_form_fields select:focus,
3809 .frm_form_fields textarea:focus, .frm_focus_field input {
3810 background-color: #fff;
3811 border-color: #ddd;
3812 }
3813
3814 .frm_form_builder .frm_radio,
3815 .frm_form_builder .frm_checkbox {
3816 display: block;
3817 margin-bottom: 2px;
3818 }
3819
3820 .frm_form_builder .frm_radio label,
3821 .frm_form_builder .frm_checkbox label {
3822 font-size: var(--text-sm);
3823 }
3824
3825 /* Start copied front-end CSS */
3826 .horizontal_radio .frm_radio,
3827 .horizontal_radio .frm_checkbox {
3828 margin-right: 5px;
3829 display: inline-block;
3830 }
3831
3832 .frm_form_field.frm_two_col .frm_opt_container,
3833 .frm_form_field.frm_three_col .frm_opt_container,
3834 .frm_form_field.frm_four_col .frm_opt_container{
3835 display: grid;
3836 grid-template-columns: repeat(2, 1fr);
3837 grid-auto-rows: max-content;
3838 grid-gap: 0 2.5%;
3839 }
3840
3841 .frm_form_field.frm_three_col .frm_opt_container{
3842 grid-template-columns: repeat(3, 1fr);
3843 }
3844
3845 .frm_form_field.frm_four_col .frm_opt_container{
3846 grid-template-columns: repeat(4, 1fr);
3847 }
3848
3849 .frm_form_field.frm_two_col .frm_radio,
3850 .frm_form_field.frm_two_col .frm_checkbox,
3851 .frm_form_field.frm_three_col .frm_radio,
3852 .frm_form_field.frm_three_col .frm_checkbox,
3853 .frm_form_field.frm_four_col .frm_radio,
3854 .frm_form_field.frm_four_col .frm_checkbox{
3855 grid-column-end: span 1;
3856 }
3857 /* End copied */
3858
3859 .frm_wrap .with_frm_style .frm_checkbox input[type=checkbox],
3860 .frm_wrap .with_frm_style .frm_radio input[type=radio],
3861 .frm_wrap input[type=checkbox],
3862 .frm-white-body input[type=checkbox],
3863 .field-group input[type=checkbox],
3864 .frm_scale input[type=radio],
3865 .frm_radio input[type=radio],
3866 .frm_checkbox input[type=checkbox] {
3867 border: 1px solid var(--grey-300);
3868 box-shadow: none;
3869 -webkit-appearance: none;
3870 }
3871
3872
3873 .frm_wrap .with_frm_style .frm_checkbox input[type=checkbox],
3874 .frm_wrap input[type=checkbox],
3875 .frm-white-body input[type=checkbox],
3876 .field-group input[type=checkbox],
3877 .frm_checkbox input[type=checkbox] {
3878 border-radius: 4px;
3879 }
3880
3881 .frm-white-body input[type="checkbox"]:checked,
3882 .frm_wrap input[type="checkbox"]:checked {
3883 background-color: var(--primary-500);
3884 border-color: var(--primary-500) !important;
3885 }
3886
3887 .frm-white-body input[type="checkbox"]:checked:focus,
3888 .frm_wrap input[type="checkbox"]:checked:focus {
3889 border-color: var(--primary-500);
3890 }
3891
3892 .frm-white-body input[type="checkbox"]:checked::before,
3893 .frm_wrap input[type="checkbox"]:checked::before {
3894 content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2010%2010%27%3E%3Cpath%20d%3D%27M9.2%202c.2.3.2.7%200%201l-5%205c-.3.2-.6.2-.9%200L.8 5.3a.6.6%200%200%201%20.9-.8l2%202%204.6-4.5c.3-.3.6-.3.9%200Z%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E");
3895 height: 12px;
3896 width: 12px;
3897 margin: 1px;
3898 }
3899
3900 .frm_radio input[type="radio"],
3901 .frm_checkbox input[type="checkbox"] {
3902 margin-right: 5px;
3903 }
3904
3905 .frm_single_entry_page .with_frm_style .frm_radio input[type=radio] {
3906 margin: 5px 0;
3907 width: 18px;
3908 position: relative; /* override Bootstrap */
3909 }
3910
3911 .frm_single_entry_page .with_frm_style .frm_radio input[type=radio]:before {
3912 position: relative !important;
3913 left: calc(50% - 6px);
3914 top: calc(50% - 6px);
3915 margin: 0 !important;
3916 }
3917
3918 .frm_inner_field_container {
3919 margin-bottom: 10px;
3920 }
3921
3922 .frm_conf_inline .frm_inner_field_container,
3923 .frm_conf_inline .frm_inner_conf_container {
3924 width: 49%;
3925 float: left;
3926 }
3927
3928 .frm_conf_inline .frm_inner_field_container {
3929 margin-right: 2%;
3930 clear: both;
3931 }
3932
3933 .frm_inner_field_container > label {
3934 text-overflow: ellipsis;
3935 overflow: hidden;
3936 white-space: nowrap;
3937 }
3938
3939 .frm_field_box:not(.edit_field_type_divider):hover > .frm_inner_field_container > label,
3940 .frm_field_box .divider_section_only:hover > .frm_inner_field_container > label,
3941 li.ui-state-default.selected > .frm_inner_field_container > label {
3942 max-width: calc(100% - 100px);
3943 }
3944
3945 .frm-drag-fade {
3946 background-color: var(--lightest-grey) !important;
3947 border-radius: 4px;
3948 }
3949
3950 .frm-drag-fade * {
3951 opacity: 0;
3952 }
3953
3954 .frm-dragging .divider_section_only,
3955 .frm-dragging .frm_field_box {
3956 pointer-events: none;
3957 }
3958
3959 .frm_form_settings #op-popup, /* 1Password */
3960 .frm_form_settings com-1password-op-button,
3961 .frm_conf_below .frm_conf_field_container .frm_primary_label,
3962 .frm_conf_inline .frm_inner_field_container .frm-show-click a,
3963 .frm_conf_below .frm_conf_field_container .frm-show-click a {
3964 display: none !important;
3965 }
3966
3967 .frm_conf_inline .frm_inner_field_container .frm-field-action-icons {
3968 position: absolute;
3969 right: 5px;
3970 }
3971
3972 .frm_conf_below .frm_conf_field_container {
3973 margin-top: 10px;
3974 }
3975
3976 .frm_calc_dec {
3977 width: 50px;
3978 }
3979
3980 .frm_ext_sc {
3981 display: none;
3982 }
3983
3984 .frm_long_input {
3985 width: 100% !important;
3986 box-sizing: border-box;
3987 }
3988
3989 .frmcenter {
3990 text-align: center;
3991 }
3992
3993 img.frm_help {
3994 margin-left: 2px;
3995 vertical-align: middle;
3996 padding-bottom: 2px;
3997 }
3998
3999 /* Loading */
4000 .frm_spinner.frm-wait,
4001 .frm_spinner.spinner {
4002 float: left;
4003 visibility: hidden;
4004 margin: 0 10px;
4005 }
4006
4007 .frm_visible_spinner.frm-wait,
4008 .frm_visible_spinner.spinner {
4009 visibility: visible;
4010 float: none;
4011 }
4012
4013 .frm_form_action_settings .frm_spinner.frm-wait,
4014 .frm_form_action_settings .frm_spinner.spinner {
4015 visibility: visible;
4016 float: none;
4017 vertical-align: bottom;
4018 }
4019
4020 .frm_form_action_settings .frm_loading {
4021 font-size: 15px;
4022 text-align: center;
4023 }
4024
4025 .frm_ajax_settings_tab .frm-wait,
4026 .frm_ajax_settings_tab .spinner {
4027 visibility: visible;
4028 float: none;
4029 margin-top: 20px;
4030 }
4031
4032 .wp-core-ui .frm_loading_button.button-primary.frm-button-primary,
4033 .frm_loading_button,
4034 .frm_loading_form.frm_button_submit {
4035 position: relative !important;
4036 opacity: .8;
4037 color: transparent !important;
4038 text-shadow: none !important;
4039 }
4040
4041 .frm_loading_button:hover,
4042 .frm_loading_button:active,
4043 .frm_loading_button:focus,
4044 .frm_loading_form.frm_button_submit:hover,
4045 .frm_loading_form.frm_button_submit:active,
4046 .frm_loading_form.frm_button_submit:focus {
4047 cursor: not-allowed;
4048 color: transparent !important;
4049 outline: none !important;
4050 box-shadow: none;
4051 }
4052
4053 .frm-wait {
4054 margin: 20px;
4055 width: 20px;
4056 height: 20px;
4057 position: relative;
4058 display: inline-block;
4059 }
4060
4061 #frm-show-fields .frm-wait:only-child {
4062 position: absolute;
4063 left: 50px;
4064 top: 30px;
4065 }
4066
4067 .frm-wait:before,
4068 .frm_loading_button:before,
4069 .frm_loading_form.frm_button_submit:before {
4070 content: '';
4071 display: inline-block;
4072
4073 position: absolute;
4074 background: transparent;
4075 border: 1px solid #fff;
4076 border-top-color: transparent;
4077 border-left-color: transparent;
4078 border-radius: 50%;
4079
4080 box-sizing: border-box;
4081 top: 50%;
4082 left: 50%;
4083 margin-top: -10px;
4084 margin-left: -10px;
4085 width: 20px;
4086 height: 20px;
4087
4088 -webkit-animation: spin 2s linear infinite;
4089 -moz-animation: spin 2s linear infinite;
4090 -o-animation: spin 2s linear infinite;
4091 animation: spin 2s linear infinite;
4092 }
4093
4094 .frm-wait:before {
4095 border-bottom-color: var(--primary-700);
4096 border-right-color: var(--primary-700);
4097 }
4098
4099 .frm_loading_button.frm-button-secondary:before {
4100 border-bottom-color: var(--primary-500);
4101 border-right-color: var(--primary-500);
4102 }
4103
4104 input[type=submit]:focus {
4105 outline: none !important;
4106 }
4107
4108 /* Effects */
4109
4110 @keyframes spin {
4111 0% {
4112 transform: rotate(0deg);
4113 }
4114 100% {
4115 transform: rotate(360deg);
4116 }
4117 }
4118
4119 label input[type="checkbox"], label input[type="radio"] {
4120 vertical-align: inherit;
4121 }
4122
4123 #editorcontainer #dyncontent {
4124 margin: 0;
4125 width: 100%;
4126 padding: 6px;
4127 line-height: var(--leading);
4128 border: 0 none;
4129 outline: none;
4130 box-sizing: border-box;
4131 }
4132
4133 /*ICONS*/
4134 .frm_postbox_icon {
4135 margin: -6px 0 0 -10px;
4136 }
4137
4138 .frm_form_builder a:hover {
4139 text-decoration: underline;
4140 }
4141
4142 .frm_form_builder .widget-title h4 {
4143 padding: 10px 15px;
4144 }
4145
4146 .frm_form_builder .widget-top a.widget-action:after {
4147 margin: 7px 12px 0;
4148 }
4149
4150 .frmbutton.frm_tgateway {
4151 display: none !important;
4152 }
4153
4154 .frm_html_legend pre {
4155 display: inline;
4156 }
4157
4158 #ed_fullscreen {
4159 display: none !important;
4160 }
4161
4162 .frm_posttax_opt_list {
4163 overflow: auto;
4164 max-height: 200px;
4165 background-color: #fff;
4166 }
4167
4168 .frm_posttax_opt_list p.howto {
4169 font-size: 12px;
4170 }
4171
4172 .frm_border_bottom {
4173 border-bottom: 1px solid var(--grey-300);
4174 margin-bottom: 10px;
4175 padding-bottom: 10px;
4176 }
4177
4178 .frm_posttax_opt_list .frm_border_bottom span.howto {
4179 padding-right: 10px;
4180 }
4181
4182 .frm_posttax_opt_list .frm_border_bottom input {
4183 margin-right: 1px;
4184 }
4185
4186 .frm_add_remove div.frm_form_field {
4187 padding-bottom: 5px;
4188 }
4189
4190 .frm_field_opts_list {
4191 max-height: 190px;
4192 overflow: auto;
4193 }
4194
4195 .frm_white_bg {
4196 background-color: #fff;
4197 }
4198
4199 .frm_border_light {
4200 border: solid 1px #ddd;
4201 }
4202
4203 #new_fields .form-table input[type=text],
4204 #new_fields .form-table select,
4205 .form-table .form-field input,
4206 .form-table .form-field .quicktags-toolbar input,
4207 .form-field input, .form-field .quicktags-toolbar input {
4208 width: auto;
4209 }
4210
4211 .frm_aff_link {
4212 float: right;
4213 }
4214
4215 .frm_select_box {
4216 text-align: center;
4217 font-weight: bold;
4218 width: 100%;
4219 background-color: transparent !important;
4220 }
4221
4222 .wp-list-table input.frm_select_box {
4223 text-align: left;
4224 font-weight: normal;
4225 font-size: inherit !important;
4226 border: none;
4227 padding: 0 !important;
4228 background-color: transparent !important;
4229 }
4230
4231 .wp-list-table input.frm_select_box:focus {
4232 outline: none;
4233 box-shadow: none;
4234 }
4235
4236 .wp-list-table .frm_no_items.frm_select_box {
4237 text-align: center;
4238 font-weight: bold;
4239 width: 500px;
4240 max-width: 100%;
4241 font-size: inherit;
4242 }
4243
4244 #frm-options-panel {
4245 padding: 0 var(--gap-sm);
4246 color: var(--grey-900);
4247 }
4248
4249 .frm-right-panel a.frm_add_logic_link,
4250 #frm-options-panel h3 {
4251 padding: 15px 0;
4252 margin-top: -2px;
4253 }
4254
4255 .frm-right-panel a.frm_add_logic_link:focus {
4256 outline: auto;
4257 }
4258
4259 #frm_style_sidebar h3,
4260 #frm_view_editor_left.frm-right-panel .accordion-section-title {
4261 padding: 15px 0;
4262 }
4263
4264 .frm_field_key {
4265 background-color: #F7F7F7;
4266 }
4267
4268 #frm_form_editor_container #edit-slug-box {
4269 padding: 0;
4270 }
4271
4272 .frm-alt-table {
4273 position: relative;
4274 width:100%;
4275 border-collapse:collapse;
4276 margin-top:0.5em;
4277 font-size:15px;
4278 }
4279
4280 /* Before `applyZebraStriping` is executed, an empty space is displayed */
4281 #form_show_entry_page .frm-alt-table:not(.frm-zebra-striping)::before {
4282 content: '';
4283 position: absolute;
4284 top: 0;
4285 right: 0;
4286 bottom: 0;
4287 left: 0;
4288 background-color: #fff;
4289 }
4290
4291 .frm-alt-table th {
4292 width:200px;
4293 }
4294
4295 .frm-alt-table tr,
4296 .frm-alt-table tr.frm-odd {
4297 background-color:transparent;
4298 }
4299
4300 .frm-alt-table tr.frm-even {
4301 background-color: var(--sidebar-color);
4302 }
4303
4304 .frm-alt-table th,
4305 .frm-alt-table td {
4306 background-color:transparent;
4307 vertical-align:top;
4308 text-align:left;
4309 padding:20px;
4310 }
4311
4312 .frm-alt-table h3 {
4313 margin-bottom: 0;
4314 }
4315
4316 .form-field .frm_cb_button {
4317 height: 22px;
4318 line-height: 20px;
4319 margin-bottom: 10px;
4320 margin-right: 5px;
4321 }
4322
4323 .edit_field_type_select .frm_option_val_label {
4324 margin-left: 12px;
4325 }
4326
4327 .frm_rte {
4328 background: url(../images/rte.png) no-repeat;
4329 }
4330
4331 .frm_rte .howto {
4332 margin: 10px 0 46px;
4333 }
4334
4335 .subform_section {
4336 margin: 25px;
4337
4338 }
4339
4340 .subform_section,
4341 .subform_section label,
4342 .subform_section input {
4343 opacity: 80;
4344 }
4345
4346 .subform_section .frm_sortable_field_opts {
4347 display: none;
4348 }
4349
4350 #frm_form_editor_container .subform_section .frm_primary_label {
4351 display: block;
4352 }
4353
4354 .subform_section.subform_break {
4355 border-top: 1px dashed #ccc;
4356 }
4357
4358 .button-secondary.frm_html_field {
4359 background-color: #ededed;
4360 padding: 10px 20px;
4361 line-height: inherit;
4362 width: auto;
4363 height: auto !important;
4364 border-radius: 0;
4365 box-sizing: content-box;
4366 }
4367
4368 .frm_html_field_placeholder {
4369 margin-bottom: 10px;
4370 text-align: center;
4371 }
4372
4373 .recaptcha_placeholder {
4374 border: 1px solid #d3d3d3;
4375 width: 300px;
4376 }
4377
4378 .turnstile_placeholder {
4379 width: 300px;
4380 }
4381
4382 .frm_sorting .frm_rte textarea {
4383 width: 653px;
4384 background: #fff;
4385 margin: 1px 0 0;
4386 border: 1px solid #dfdfdf;
4387 border-top: none;
4388 border-radius: 0;
4389 float: none !important;
4390 }
4391
4392 .frm_full_rte textarea {
4393 width: 98%;
4394 padding: 0;
4395 }
4396
4397 .frm_field_box {
4398 padding: 5px;
4399 min-height: 20px;
4400 margin: 10px 0;
4401 }
4402
4403 .frm_indent_opt, td.frm_indent_opt {
4404 padding-left: 25px;
4405 }
4406
4407 .frm_charts object {
4408 background: transparent;
4409 }
4410
4411 .frm_charts h2 {
4412 height: 34px;
4413 }
4414
4415 .frm_single_option.ui-sortable-placeholder,
4416 li.sortable-placeholder {
4417 border: none;
4418 margin: 0;
4419 visibility: visible !important;
4420 box-shadow: 2px -10px 0 2px var(--primary-500);
4421 }
4422
4423 #frm_form_editor_container > ul > .frm_single_option.ui-sortable-placeholder,
4424 #frm_form_editor_container > ul > li.sortable-placeholder {
4425 width: calc(100% - 5px) !important;
4426 height: 0 !important;
4427 }
4428
4429 #frm_form_editor_container > ul > li > ul {
4430 position: relative;
4431 }
4432
4433 #frm_form_editor_container > ul > li > ul > li.sortable-placeholder,
4434 #frm_form_editor_container ul.start_divider > li > ul > li.sortable-placeholder {
4435 position: absolute;
4436 top: 20px;
4437 bottom: 0;
4438 }
4439
4440 .edit_field_type_divider + li.sortable-placeholder {
4441 box-shadow: 2px 5px 0 2px var(--primary-500);
4442 }
4443
4444 .start_divider li.sortable-placeholder {
4445 box-shadow: 2px -5px 0 2px var(--primary-500);
4446 }
4447
4448 .frm-is-collapsed + .sortable-placeholder {
4449 box-shadow: 2px 15px 0 2px var(--primary-500);
4450 }
4451
4452 .frm_single_option.ui-sortable-placeholder {
4453 box-shadow: 0 0 1px 1px var(--primary-500);
4454 }
4455
4456 .frm_sorting > li.edit_field_type_end_divider:first-child,
4457 .frm-show-click,
4458 li.ui-state-default.edit_field_type_divider .frm-show-click {
4459 display: none;
4460 }
4461
4462 .frm_form_field.ui-sortable-helper .frm-field-action-icons,
4463 .frm_form_field.ui-sortable-helper .frm_form_fields,
4464 .frm_form_field.ui-sortable-helper .frm_description,
4465 .frm_form_field.ui-sortable-helper .description {
4466 display: none;
4467 }
4468
4469 .frm_form_field.ui-sortable-helper .frm_primary_label,
4470 .frm_form_field.ui-sortable-helper .frm_inner_field_container {
4471 margin: 0 !important;
4472 }
4473
4474 .frm-single-settings .frm-show-click {
4475 display: block !important;
4476 }
4477
4478 .frm-show-hover,
4479 .frm_single_visible_hover,
4480 li.ui-state-default.edit_field_type_divider .frm-show-hover {
4481 opacity: 0;
4482 transition: opacity .15s ease-in-out;
4483 }
4484
4485 #frm-show-fields .frm-field-settings-open .frm-show-hover {
4486 opacity: 1;
4487 }
4488
4489 .frm_sortable_field_opts {
4490 margin-top: 5px;
4491 }
4492
4493 .frm_single_option {
4494 clear: both;
4495 margin: 0;
4496 padding-bottom: 5px;
4497 }
4498
4499 .frm_product_price_wrapper,
4500 .frm_image_preview_wrapper,
4501 #new_fields .frm_single_option select,
4502 #new_fields .frm_single_option input[type=text] {
4503 width: calc(100% - 73px);
4504 }
4505
4506 .frm-right-panel .frm_single_option a.frm_remove_tag,
4507 .frm_single_option a {
4508 padding-left: 7px;
4509 }
4510
4511 .frm_single_option:hover .frm_single_visible_hover {
4512 opacity: 100;
4513 }
4514
4515 .frm_single_option .frm-drag {
4516 font-size: 23px;
4517 width: 22px;
4518 height: 19px;
4519 margin-left: -6px;
4520 color: var(--grey);
4521 }
4522
4523 .frm_single_option .frm-drag:before {
4524 vertical-align: middle;
4525 }
4526
4527 .frm-drag,
4528 .frm_single_option.ui-sortable-helper {
4529 cursor: move;
4530 }
4531
4532 .frm_single_option .frm_option_key {
4533 margin-left: 19px !important;
4534 }
4535
4536 .frm_option_key input[type=text] {
4537 margin-top: 15px !important;
4538 }
4539
4540 li.ui-state-default.selected .frm-show-click,
4541 li.ui-state-default.selected.edit_field_type_divider .frm-show-click {
4542 display: inline;
4543 vertical-align: top;
4544 }
4545
4546 .frm_field_box:not(.edit_field_type_divider):hover > .frm_inner_field_container > .frm-show-hover,
4547 .frm_field_box .divider_section_only:hover > .frm_inner_field_container > .frm-show-hover,
4548 li.ui-state-default.selected > .frm_inner_field_container > .frm-show-hover,
4549 li.ui-state-default.selected.edit_field_type_divider .divider_section_only .frm-show-hover {
4550 opacity: 100;
4551 }
4552
4553 li.frm_field_box > ul.frm_grid_container {
4554 position: relative;
4555 }
4556
4557 .frm_sorting span.ui-icon {
4558 width: 16px;
4559 }
4560
4561 /* Image options for Radio and Checkbox */
4562
4563 .frm_image_options .frm_image_option_container {
4564 --field-border-width: 1px;
4565 --border-color: var(--grey-300);
4566 --border-color-active: var(--primary-500);
4567 --border-radius: var(--small-radius);
4568 }
4569
4570 #form_show_entry_page .frm_file_link,
4571 #form_show_entry_page .frm_image_option_container {
4572 display: inline-flex;
4573 flex-wrap: nowrap;
4574 flex-direction: column;
4575 text-align: center;
4576 align-items: center;
4577 width: 150px;
4578 margin-right: 10px;
4579 margin-bottom: 10px;
4580 }
4581
4582 #form_show_entry_page .frm_image_option_container img {
4583 width: 150px;
4584 height: 150px;
4585 object-fit: cover;
4586 }
4587
4588 #form_show_entry_page .frm_file_link img {
4589 max-width: 150px;
4590 height: auto;
4591 }
4592
4593 #form_show_entry_page .frm_file_link ~ br {
4594 display: none;
4595 }
4596
4597 #form_show_entry_page .frm_upload_label {
4598 padding: 10px;
4599 }
4600
4601 #form_show_entry_page.frm_wrap .postbox {
4602 overflow: hidden;
4603 }
4604
4605 .frm_image_option_container .frm_image_placeholder_icon svg{
4606 height: 150px;
4607 }
4608
4609 .frm_list_entry_page .frm_file_link,
4610 .frm_list_entry_page .frm_image_option_container.frm_label_with_image {
4611 display: block;
4612 text-align: center;
4613 }
4614
4615 .frm_list_entry_page .frm_image_option_container img {
4616 width: 75px;
4617 height: 75px;
4618 object-fit: cover;
4619 }
4620
4621 .frm_list_entry_page img {
4622 max-width: 100%;
4623 height: auto;
4624 }
4625
4626 .frm_image_option_container .frm_empty_url {
4627 background-color: var(--sidebar-color);
4628 }
4629
4630 .frm_list_entry_page .frm_image_option_container .frm_text_label_for_image {
4631 display: block;
4632 padding: 5px 0 10px;
4633 }
4634
4635 .frm_list_entry_page .frm_upload_label,
4636 .frm-summary-page-wrapper .frm_text_label_for_image {
4637 display: block;
4638 }
4639
4640 #frm-welcome .frm_image_options .frm_image_option_container,
4641 #form_global_settings .frm_image_options .frm_image_option_container{
4642 background: var(--sidebar-color);
4643 }
4644
4645 #frm-welcome .frm_image_option_container svg,
4646 #form_global_settings .frm_image_option_container svg {
4647 max-width: calc( 100% - 20px );
4648 }
4649
4650 /* Style image option container for Directory add on. */
4651 #frm-new-template .frm_image_option_container svg {
4652 height: 50px;
4653 margin: 10px auto 0;
4654 }
4655
4656 /* Show an icon on top */
4657 .frm_image_option_container {
4658 position: relative;
4659 }
4660
4661 .frm_text_label_for_image > svg {
4662 width: 30px;
4663 position: absolute;
4664 top: 5px;
4665 right: calc( 50% - 15px );
4666 }
4667 /* End show an icon on top */
4668
4669 .frm_single_option .frm_option_key {
4670 margin-top: 17px;
4671 }
4672
4673 .frm_image_data {
4674 margin-left: var(--gap-xs);
4675 display: flex;
4676 flex-direction: column;
4677 font-size: var(--text-sm);
4678 justify-content: space-around;
4679 }
4680
4681 .frm_image_styling_frame {
4682 display: flex;
4683 align-items: stretch;
4684 margin-left: 1.5rem;
4685 }
4686
4687 .frm_image_styling_frame img{
4688 height: 54px;
4689 width: 54px;
4690 min-width: auto;
4691 min-height: auto;
4692 border-radius: 3px;
4693 object-fit: cover;
4694 object-position: center;
4695 }
4696
4697 .frm_image_styling_frame .frm_email_attachment_icon img {
4698 height: auto;
4699 width: auto;
4700 max-width: 54px;
4701 }
4702
4703 .frm_image_preview_title{
4704 color: var(--grey-500);
4705 overflow: hidden;
4706 white-space: nowrap;
4707 text-overflow: ellipsis;
4708 }
4709
4710 .frm_wrap .frm_choose_image_box {
4711 cursor: pointer;
4712 color: var(--grey-700);
4713 background-color: #F2F2F2;
4714 margin-left: 24px;
4715 text-align: center;
4716 width: 100%;
4717 }
4718
4719 .frm_wrap .frm_choose_image_box:hover {
4720 background: #fff;
4721 }
4722
4723 a.frm_remove_image_option,
4724 .frm_remove_image_option {
4725 color: var(--grey-400);
4726 cursor: pointer;
4727 }
4728
4729 a.frm_remove_image_option:hover .frmsvg,
4730 a.frm_remove_image_option:hover,
4731 .frm_remove_image_option:hover {
4732 color: rgba(40, 47, 54, 0.8);
4733 }
4734
4735 /* Form settings */
4736
4737 .frm-form-setting-tabs {
4738 margin-top: var(--gap-sm) !important;
4739 }
4740
4741 .frm-right-panel > .postbox {
4742 background-color: transparent;
4743 border: none;
4744 box-shadow: none;
4745 margin: 0;
4746 }
4747
4748 .frm-right-panel .postbox.frm_with_icons .inside,
4749 .frm-right-panel .postbox .inside,
4750 .frm-right-panel .inside {
4751 font-size: var(--text-md);
4752 padding: 15px 20px 20px;
4753 color: var(--grey-700);
4754 }
4755
4756 .frm-right-panel .misc-pub-section {
4757 padding: var(--gap-xs) 0;
4758 position: relative;
4759 }
4760
4761 .frm-right-panel .inside a,
4762 .frm-form-setting-tabs a {
4763 font-size: var(--text-md);
4764 color: var(--grey-700);
4765 padding: var(--gap-sm);
4766 display: block;
4767 }
4768
4769 .frm-form-setting-tabs a {
4770 color: var(--grey-900);
4771 padding: var(--gap-sm) var(--gap-md);
4772 }
4773
4774 .frm-right-panel .inside a {
4775 padding: 0;
4776 color: var(--primary-500);
4777 display: inline-block;
4778 }
4779
4780 .frm-right-panel .inside a:hover {
4781 color: var(--primary-700);
4782 }
4783
4784 .frm-form-setting-tabs a:hover {
4785 background: var(--sidebar-hover);
4786 color: var(--grey-900);
4787 }
4788
4789 .frm-right-panel .inside i,
4790 .frm-right-panel .inside .frmsvg,
4791 .frm-form-setting-tabs a i,
4792 .frm-form-setting-tabs a .frmsvg {
4793 margin: 0 5px;
4794 display: inline-block;
4795 width: 20px;
4796 height: 20px;
4797 color: var(--grey-500);
4798 }
4799
4800 .frm-form-setting-tabs a .frmsvg {
4801 margin: 0;
4802 }
4803
4804 .frm-right-panel .inside a:hover i,
4805 .frm-right-panel .inside a:hover .frmsvg,
4806 .frm-form-setting-tabs a:hover .frmsvg,
4807 .frm-form-setting-tabs a:hover span {
4808 color: var(--grey-700);
4809 }
4810
4811 .frm_settings_form .tabs-panel {
4812 padding: 0 25px;
4813 }
4814
4815 #form_settings_page .tabs-panel,
4816 .frm_settings_form .tabs-panel {
4817 max-height: initial !important;
4818 min-height: 50px !important;
4819 }
4820
4821 #frm_adv_info .tabs-panel {
4822 min-height: 0 !important;
4823 overflow-x: hidden;
4824 padding: 0;
4825 border: none;
4826 background: transparent;
4827 }
4828
4829 select.frm_cancelnew, input.frm_enternew {
4830 width: 175px;
4831 }
4832
4833 .frm_posttax_opt_list,
4834 .frm_submit_logic_rows {
4835 border: 1px solid var(--grey-300);
4836 padding: var(--gap-md);
4837 border-radius: var(--small-radius);
4838 margin: 5px 0 5px var(--gap-md);
4839 }
4840
4841 .frm_submit_logic_rows .frm_grid_container > p.frm_form_field {
4842 margin: 0;
4843 }
4844
4845 /* Color picker CSS */
4846 .frm-right-panel .wp-picker-open + .wp-picker-input-wrap {
4847 position: absolute;
4848 margin-left: calc( ( 100% - 35px ) * -1 );
4849 margin-top: 1px;
4850 width: calc( 100% - 36px );
4851 }
4852
4853 .frm-right-panel .wp-picker-container input[type="text"].wp-color-picker {
4854 border: none;
4855 padding: 5px 8px;
4856 font-family: inherit;
4857 color: var(--grey-700);
4858 font-size: var(--text-md);
4859 width: 100%;
4860 line-height: var(--leading);
4861 }
4862
4863 .frm-right-panel .wp-picker-input-wrap .wp-picker-clear {
4864 display: none !important;
4865 }
4866
4867 .frm-right-panel .wp-picker-holder {
4868 position: absolute;
4869 z-index: 999;
4870 }
4871
4872 .frm-right-panel .wp-picker-input-wrap label {
4873 margin-bottom: 0;
4874 }
4875
4876 .frm-right-panel .wp-picker-container .wp-color-result.button {
4877 width: 100%;
4878 overflow: hidden;
4879 margin: 0 !important;
4880 height: var(--h-md) !important;
4881 padding: 0 0 0 var(--gap-lg) !important;
4882 border-radius: var(--small-radius);
4883 border-color: var(--grey-300);
4884 }
4885
4886 .frm-right-panel .wp-color-result-text {
4887 line-height: var(--leading) !important;
4888 font-size: var(--text-md);
4889 background: #fff !important;
4890 color: var(--grey-900);
4891 padding: 5px 8px;
4892 border-color: var(--grey-300);
4893 text-align: left;
4894 }
4895
4896 .frm-right-panel .color-alpha {
4897 width: var(--gap-lg) !important;
4898 }
4899
4900 .frm_grid_container .wp-picker-container {
4901 width: 100%;
4902 position: relative;
4903 }
4904
4905 .wp-picker-container button.wp-color-result {
4906 border: 1px solid var(--grey-300) !important;
4907 }
4908
4909 .wp-picker-container .wp-picker-input-wrap input.hex.wp-color-picker {
4910 max-width: 100%;
4911 position: relative;
4912 }
4913
4914 .frm_end .wp-picker-holder {
4915 margin-left: -145px;
4916 }
4917
4918 .frm_end.frm6 .wp-picker-holder {
4919 margin-left: -86px;
4920 }
4921 /* End of color picker CSS */
4922
4923 /*
4924 These are the styles for the "Enable Formidable styling" toggle in the visual styler.
4925 To use this element, you can call the FrmHtmlHelper::toggle function.
4926 */
4927 .frm_toggle_opt {
4928 padding: 0;
4929 white-space: normal;
4930 display: inline;
4931 vertical-align: middle;
4932 font-weight: normal;
4933 }
4934
4935 .frm_on_label,
4936 .frm_off_label {
4937 color: var(--grey-700);
4938 }
4939
4940 .frm_toggle {
4941 position: relative;
4942 display: inline-block;
4943 width: 40px;
4944 height: var(--h-xs);
4945 vertical-align: middle;
4946 }
4947
4948 .frm_toggle_block {
4949 display: inline-flex !important;
4950 gap: var(--gap-sm);
4951 align-items: center;
4952 }
4953
4954 .frm_toggle input, /* Reverse compatibility */
4955 .frm_toggle_block input {
4956 display:none !important;
4957 }
4958
4959 .frm_toggle_slider {
4960 position: absolute;
4961 cursor: pointer;
4962 top: 0;
4963 left: 0;
4964 right: 0;
4965 bottom: 0;
4966 background-color: var(--grey-border);
4967 transition: .4s;
4968 border-radius: 30px;
4969 }
4970
4971 .frm_toggle_slider:before {
4972 border-radius: 50%;
4973 position: absolute;
4974 content: url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 height=%2711px%27 width=%2711px%27 viewBox=%270 0 20 20%27><path d=%27M16.8 4.5l-1.3-1.3L10 8.6 4.5 3.2 3.2 4.5 8.6 10l-5.4 5.5 1.3 1.3 5.5-5.4 5.5 5.4 1.3-1.3-5.4-5.5 5.4-5.5z%27 fill=%27%2398A2B3%27/%3E</svg>");
4975 height: 22px;
4976 width: 22px;
4977 padding: 0 5.5px;
4978 left: 1px;
4979 bottom: 1px;
4980 background-color: white;
4981 transition: .4s;
4982 box-sizing: border-box;
4983 box-shadow: var(--box-shadow-md);
4984 font-size: 21px;
4985 line-height: 18px;
4986 }
4987
4988 input:checked + .frm_toggle .frm_toggle_slider {
4989 background-color: var(--primary-500);
4990 }
4991
4992 input:focus + .frm_toggle .frm_toggle_slider {
4993 box-shadow: var(--box-shadow-md);
4994 }
4995
4996 input:checked + .frm_toggle .frm_toggle_slider:before {
4997 padding: 0 6px;
4998 transform: translateX(16px);
4999 content: url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 height=%2711px%27 width=%2711px%27 viewBox=%270 0 10 10%27><path d=%27M9.2 2c.2.3.2.7 0 1l-5 5c-.3.2-.6.2-.9 0L.8 5.3a.6.6 0 0 1 .9-.8l2 2 4.6-4.5c.3-.3.6-.3.9 0Z%27 fill=%27%234199FD%27/%3E</svg>");
5000 }
5001
5002 input[disabled] + .frm_toggle_slider {
5003 pointer-events: none;
5004 cursor: text;
5005 opacity: .5;
5006 }
5007
5008 .frm_toggle_opt ~ .frm_toggle .frm_toggle_slider:before {
5009 content: '' !important; /* Don't show x/check if off label included or on builder page */
5010 }
5011
5012 .rtl .frm_toggle_opt {
5013 padding: 0 8px;
5014 }
5015
5016 .rtl .frm_toggle_slider:before {
5017 left: 17px;
5018 }
5019
5020 .rtl input:checked + .frm_toggle .frm_toggle_slider:before {
5021 transform: none!important;
5022 left: 1px;
5023 }
5024
5025 /* Deprecated admin toggle */
5026 .frm_toggle_off,
5027 .frm_toggle_on {
5028 display: none;
5029 color: #fff;
5030 z-index: 999;
5031 position: absolute;
5032 font-size: 10px;
5033 line-height: 20px;
5034 left: 6px;
5035 }
5036
5037 .frm_toggle_off {
5038 display: inline;
5039 left: auto;
5040 right: 5px;
5041 color: var(--dark-grey);
5042 }
5043
5044 .frm_toggle_long {
5045 width: 80% !important;
5046 height: 28px;
5047 display: inline-block !important;
5048 }
5049
5050 .frm_toggle_long .frm_toggle_slider {
5051 background: var(--primary-700);
5052 box-shadow: 0 0 0 2px var(--primary-700);
5053 }
5054
5055 .frm_toggle_long .frm_toggle_off,
5056 .frm_toggle_long .frm_toggle_on {
5057 width: 50%;
5058 text-align: center;
5059 font-size: 13px;
5060 line-height: 28px;
5061 }
5062
5063 .frm_toggle_long .frm_toggle_on {
5064 left: 0;
5065 }
5066
5067 .frm_toggle_long .frm_toggle_off {
5068 right: 0;
5069 }
5070
5071 .frm_toggle_long .frm_toggle_slider:before {
5072 width: 50%;
5073 left: 0;
5074 top: 0;
5075 border-radius: var(--border-radius) 0 0 var(--border-radius);
5076 height: 100%;
5077 background-color: #fff;
5078 color: var(--primary-color);
5079 content: '' !important;
5080 }
5081
5082 .frm_toggle_long input:checked + .frm_toggle_slider:before {
5083 transform: translateX(101%);
5084 border-radius: 0 var(--border-radius) var(--border-radius) 0;
5085 }
5086
5087 input:checked + .frm_toggle_slider + .frm_toggle_on {
5088 display: inline;
5089 }
5090
5091 input:checked + .frm_toggle_slider + .frm_toggle_on + .frm_toggle_off {
5092 display: none;
5093 }
5094
5095 .frm_toggle_long .frm_toggle_on,
5096 .frm_toggle_long input:checked + .frm_toggle_slider + .frm_toggle_on + .frm_toggle_off {
5097 display: inline;
5098 color: var(--primary-500);
5099 font-weight: normal;
5100 }
5101
5102 .frm_toggle_long .frm_toggle_off,
5103 .frm_toggle_long input:checked + .frm_toggle_slider + .frm_toggle_on {
5104 color: #fff;
5105 font-weight: bold;
5106 }
5107
5108 /* End toggle styling */
5109
5110 /* Global Settings */
5111
5112 .tabs-panel {
5113 height: auto !important;
5114 min-height: 260px;
5115 }
5116
5117 .tabs-panel.panel_secondary {
5118 min-height: 20px;
5119 margin-top: 10px;
5120 margin-left: 150px;
5121 }
5122
5123 label.frm-example-icon {
5124 margin-right: 20px !important;
5125 display: inline-block !important;
5126 }
5127
5128 #frm_stripe_icon {
5129 border-radius: 5px;
5130 }
5131
5132 #captcha_settings .frm_primary_label {
5133 margin-top: var(--gap-sm);
5134 }
5135
5136 .frm-long-icon-buttons {
5137 display: flex;
5138 gap: var(--gap-md);
5139 }
5140
5141 .frm-long-icon-buttons > label {
5142 border: 1px solid var(--grey-300);
5143 color: var(--grey-700);
5144 border-radius: var(--small-radius);
5145 display: flex;
5146 padding: var(--gap-sm);
5147 gap: var(--gap-sm);
5148 justify-content: center;
5149 align-items: center;
5150 width: calc( 33% - var(--gap-sm) );
5151 box-sizing: border-box;
5152 }
5153
5154 .frm-long-icon-buttons > label:hover {
5155 color: var(--primary-500);
5156 }
5157
5158 .frm-long-icon-buttons input[type=radio] {
5159 display: none;
5160 }
5161
5162 .frm-long-icon-buttons input[type=radio]:checked + label {
5163 border-color: var(--primary-500);
5164 box-shadow: 0 0 0 1px var(--primary-color);
5165 }
5166
5167 .frm-long-icon-buttons label > svg {
5168 height: 21px;
5169 }
5170
5171 .frm-example-icon .frmsvg,
5172 .frm-example-icon i {
5173 height: 20px;
5174 width: 20px;
5175 font-size: 20px;
5176 color: var(--grey-700);
5177 }
5178
5179 .frm_license_msg {
5180 margin-top: 0;
5181 }
5182
5183 .frm_authorized_box .frm-show-unauthorized,
5184 .frm_unauthorized_box .frm-show-authorized {
5185 display: none;
5186 }
5187
5188 .edd_frm_status_icon.frm_icon_font {
5189 color: #D54E21;
5190 margin: 0 5px;
5191 }
5192
5193 .edd_frm_status_icon.frm_icon_font.frm_inactive_icon {
5194 color: green;
5195 }
5196
5197 /* Hide the install steps for solutions */
5198 #form_global_settings .tabs-panel .num svg {
5199 display: none;
5200 }
5201
5202 /* Empty List */
5203
5204 .frm_no_items {
5205 margin: 0 auto 50px;
5206 text-align: center;
5207 color: var(--grey-700);
5208 max-width: 500px;
5209 }
5210
5211 .frm-subscribe {
5212 margin: var(--gap-lg) 0;
5213 }
5214
5215 /* Inbox */
5216
5217 #frm_inbox_page .frm_page_container {
5218 height: auto;
5219 }
5220
5221 .frm_inbox_card {
5222 display: grid;
5223 grid-template-columns: 72px 1fr;
5224 grid-gap: var(--gap-xs);
5225 border-bottom: 1px solid var(--grey-300);
5226 padding: var(--gap-md);
5227 }
5228
5229 .frm_inbox_card_icon {
5230 grid-row: span 3 / span 3;
5231 padding-top: var(--gap-xs);
5232 text-align: center
5233 }
5234
5235 .frm_inbox_card_icon svg {
5236 height: 48px;
5237 width: 48px;
5238 color: var(--blue-border);
5239 }
5240
5241 .frm_inbox_card header {
5242 display: grid;
5243 grid-template-columns: 1fr 150px;
5244 align-items: center;
5245 }
5246
5247 .frm_inbox_card h3 {
5248 border: none;
5249 text-transform: none;
5250 margin: 0;
5251 padding: 0;
5252 }
5253
5254 .frm_inbox_date {
5255 text-align: right;
5256 }
5257
5258 .frm_inbox_count {
5259 color: #fff;
5260 border-radius: 50%;
5261 display: inline-block;
5262 margin-right: 8px;
5263 font-size: 11px;
5264 text-align: center;
5265 min-width: 18px;
5266 height: 18px;
5267 margin-left: 2px;
5268 vertical-align: text-bottom;
5269 }
5270
5271 /* Import/Export */
5272 .frm-lite .xml_opts .frm-export-xml-items {
5273 display: none;
5274 }
5275
5276 .csv_opts #frm_csv_col_sep {
5277 width: 45px;
5278 }
5279
5280 #frm_advanced td.frm_left_label {
5281 width: 20%;
5282 padding-right: 2px;
5283 }
5284
5285 #frm_where_options select {
5286 max-width: 200px;
5287 }
5288
5289 #frm_where_options select.frm_insert_where_options {
5290 width: 30%;
5291 }
5292
5293 #frm_where_options select.frm_where_is_options {
5294 width: 20%;
5295 }
5296
5297 #frm_where_options span.frm_where_val {
5298 width: 32%;
5299 display: inline-block;
5300 position: relative;
5301 }
5302
5303 #frm_where_options span.frm_where_val .frm_tooltip_icon {
5304 left: -4px;
5305 position: absolute;
5306 }
5307
5308 #frm_where_options span.frm_where_val.frm_hidden {
5309 display: none;
5310 }
5311
5312 #frm_where_options span.frm_where_val input, #frm_where_options span.frm_where_val select {
5313 width: 90%;
5314 margin-left: 10px;
5315 }
5316
5317 #frm_where_options {
5318 min-height: 31px;
5319 }
5320
5321 .tabs-panel.active .tabs-panel, .frm_settings_form .tabs-panel .tabs-panel {
5322 border: none;
5323 padding: 0;
5324 }
5325
5326 .frm-feature-banner {
5327 background: var(--grey-700);
5328 color: #fff;
5329 border-radius: var(--small-radius);
5330 padding: 20px;
5331 margin: 10px 0;
5332 }
5333
5334 .frm-feature-banner p {
5335 font-size: var(--text-sm);
5336 }
5337
5338 .frm-feature-banner .dismiss {
5339 margin-top: -10px;
5340 margin-right: -10px;
5341 }
5342
5343 .frm-feature-banner .dismiss svg {
5344 color: #fff;
5345 }
5346
5347 .frm-feature-banner .frm-big-icon {
5348 padding-right: 20px;
5349 float: left;
5350 min-height: 60px;
5351 }
5352
5353 .frm-big-icon svg {
5354 height: 60px;
5355 width: 60px;
5356 }
5357
5358 .frm-feature-banner p {
5359 margin-top: 0;
5360 }
5361
5362 /*for add-on reverse compatibility */
5363
5364 .frm_98_width {
5365 width: 100% !important;
5366 }
5367
5368 /*Form Settings Tab*/
5369
5370 h2.frm-h2,
5371 .frm_form_settings h2 {
5372 border-bottom: 1px solid var(--grey-300);
5373 color: var(--grey-900);
5374 font-weight: 400 !important;
5375 padding: 9px 0 5px;
5376 margin: 0;
5377 }
5378
5379 .frm_settings_form h3,
5380 .frm_form_settings h3,
5381 .frm_form_settings span.frm_add_logic_link {
5382 font-size: var(--text-md);
5383 border-top: 1px solid var(--grey-300);
5384 padding-top: var(--gap-sm);
5385 margin: var(--gap-sm) 0;
5386 font-weight: normal;
5387 text-transform: uppercase;
5388 color: var(--medium-grey);
5389 display: block;
5390 }
5391
5392 .frm_form_settings .howto {
5393 color: var(--grey-500);
5394 font-size: var(--text-sm);
5395 margin-top: 8px;
5396 }
5397
5398 .frm_form_settings .advanced_settings .form-table {
5399 margin-top: 0;
5400 }
5401
5402 .frm_form_settings td.frm_175_width {
5403 width: 175px;
5404 }
5405
5406 .frm_form_settings #success_url {
5407 width: 95%;
5408 }
5409
5410 .frm_wrap .ui-autocomplete {
5411 padding: 3px 0;
5412 max-height: 310px;
5413 }
5414
5415 .frm_wrap .ui-widget {
5416 font-family: inherit;
5417 }
5418
5419 .frm_wrap .ui-autocomplete li {
5420 padding: 2px 4px;
5421 background: none;
5422 color: var(--grey-700);
5423 border: none;
5424 font-weight: normal;
5425 }
5426
5427 .frm_wrap .ui-autocomplete .ui-menu-item-wrapper.ui-state-active {
5428 border: none;
5429 font-weight: inherit;
5430 }
5431
5432 .frm_select_with_label {
5433 margin: 7px 0 0;
5434 }
5435
5436 /* Customization Panel */
5437 #frm-insert-fields-box, #frm-conditionals {
5438 max-height: none;
5439 }
5440
5441 #frm-conditionals, #frm-adv-info-tab {
5442 display: none;
5443 max-height: 355px;
5444 }
5445
5446 #frm-insert-fields-box ul.subsubsub,
5447 #frm-conditionals ul.subsubsub {
5448 float: right;
5449 margin: 0;
5450 }
5451
5452 #frm-insert-fields-box ul.alignleft,
5453 #frm-conditionals ul.alignleft {
5454 margin: 5px 0 0;
5455 }
5456
5457 #frm_adv_info ul.frm_code_list.frm-full-hover {
5458 clear: both;
5459 max-height: 215px;
5460 overflow: auto;
5461 }
5462
5463 #frm-insert-fields-box ul.frm_code_list li.clear.frm_block {
5464 height: 10px;
5465 }
5466
5467 #frm_adv_info .frm_noallow {
5468 display: none;
5469 }
5470
5471 #frm_adv_info #frm-conditionals .frm_noallow {
5472 display: block;
5473 }
5474
5475 /* Customize HTML Tab */
5476 #frm_html_tab.frm_hidden {
5477 display: none;
5478 }
5479
5480 #frm_html_tab.active {
5481 display: inline;
5482 }
5483
5484 /*Form Actions Tab*/
5485 .frm_email_reply_container select,
5486 .frm_email_reply_container input,
5487 .form-table td.frm_150_width {
5488 width: 170px;
5489 }
5490
5491 #frm_notification_settings .frm_no_top_padding {
5492 padding-top: 0;
5493 }
5494
5495 .frm_email_settings.frm_email_settings.widgets-holder-wrap {
5496 overflow: auto;
5497 box-shadow: none;
5498 }
5499
5500 #frm_notification_settings .widget-top .widget-action,
5501 #frm_form_editor_container .widget-top .widget-action {
5502 border: 0;
5503 margin: 0;
5504 padding: 8px;
5505 background: 0 0;
5506 cursor: pointer;
5507 outline: 0;
5508 }
5509
5510 #frm_email_addon_menu {
5511 border: 1px solid var(--grey-300);
5512 padding: var(--gap-sm);
5513 border-radius: 4px;
5514 margin: var(--gap-md) 0 var(--gap-sm);
5515 }
5516
5517 #frm_email_addon_menu .frm-search {
5518 float: right;
5519 margin: 0;
5520 }
5521
5522 #frm_email_addon_menu h3.frm-no-border {
5523 clear: none;
5524 padding-top: 7px;
5525 }
5526
5527 .frm_email_settings .widget .widget-top {
5528 background-color: var(--sidebar-color);
5529 }
5530
5531 .frm_email_settings .widget .widget-top,
5532 .frm_email_settings .widget .widget-top h3 {
5533 cursor: pointer !important;
5534 }
5535
5536 .frm_email_settings .widget {
5537 margin-bottom: var(--gap-sm);
5538 }
5539
5540 .frm_form_action_settings .widget-top {
5541 box-shadow: none;
5542 border-color: var(--grey-300);
5543 border-radius: var(--small-radius);
5544 background: var(--lightest-grey);
5545 color: var(--grey-700);
5546 }
5547
5548 .frm_form_action_settings:hover .widget-top {
5549 border-color: var(--grey);
5550 }
5551
5552 .frm_form_action_settings.open .widget-top {
5553 border-bottom-left-radius: 0;
5554 border-bottom-right-radius: 0;
5555 border-bottom: none;
5556 }
5557
5558 .frm_form_action_settings.open:hover .widget-top {
5559 border-color: var(--grey-300);
5560 }
5561
5562 .frm_form_action_settings > .widget-inside {
5563 display: none;
5564 }
5565
5566 .frm_form_action_settings.open > .widget-inside {
5567 display: block;
5568 }
5569
5570 .frm_form_action_settings .widget-inside {
5571 min-height: 25px;
5572 padding: 15px;
5573 border-color: var(--grey-300);
5574 border-bottom-left-radius: 4px;
5575 border-bottom-right-radius: 4px;
5576 }
5577
5578 .frm_form_action_settings .widget-title h4,
5579 .frm_form_action_settings .widget-title h3 {
5580 display: inline-block;
5581 border-bottom: none;
5582 padding: 10px 10px 5px;
5583 font-size: var(--text-md);
5584 font-weight: 500;
5585 }
5586
5587 #frm_email_addon_menu h3 {
5588 margin: 0 0 var(--gap-sm);
5589 clear: both;
5590 }
5591
5592 .frm_single_api_settings p > label {
5593 display: inline;
5594 }
5595
5596 .frm_form_action_icon {
5597 margin-right: 5px;
5598 }
5599
5600 .frm_actions_list {
5601 margin: 0;
5602 display: inline;
5603 }
5604
5605 .frm_actions_list li {
5606 float: left;
5607 width: 15.6%;
5608 margin: 10px .5% 15px;
5609 height: 100px;
5610 text-align: center;
5611 }
5612
5613 .frm-limited-actions .frm-group-heading,
5614 .frm-limited-actions #frm-hide-groups,
5615 .frm-all-actions #frm-show-groups,
5616 .frm-limited-actions .frm-not-installed:not(.frm-search-result):not(.frm-default-show) {
5617 display: none;
5618 }
5619
5620 label.frm_action_events {
5621 padding-left: 15px;
5622 }
5623
5624 #frm-hide-groups,
5625 #frm-show-groups {
5626 font-size: var(--text-md);
5627 float: right;
5628 }
5629
5630 .frm_actions_list a:active, .frm_actions_list a:focus {
5631 outline: none;
5632 }
5633
5634 .frm_actions_list a {
5635 font-size: var(--text-sm);
5636 color: var(--grey-700);
5637 word-break: break-word;
5638 }
5639
5640 .frm_actions_list span.frm-outer-circle {
5641 /* 50px total with 30px content */
5642 background-color: var(--grey-100);
5643 padding: 10px;
5644 text-align: center;
5645 border-radius: 50%;
5646 display: block;
5647 width: 30px;
5648 height: 30px;
5649 margin: 0 auto 15px;
5650 line-height: 1;
5651 }
5652
5653 .frm_email_settings .widget-title h4 {
5654 color: var(--grey-700);
5655 }
5656
5657 .frm_disabled_action .widget-title h4 {
5658 color: var(--grey);
5659 }
5660
5661 .frm_actions_list a .frmsvg,
5662 .frm_actions_list a i {
5663 height: 18px;
5664 width: 18px;
5665 font-size: 18px;
5666 padding: 2px;
5667 color: var(--lightest-grey);
5668 }
5669
5670 span.frm-inner-circle,
5671 .frm_email_settings .widget-title .frm_form_action_icon {
5672 background-color: var(--grey-400);
5673 border-radius: 50%;
5674 display: inline-block;
5675 text-align: center;
5676 line-height: 1;
5677 }
5678
5679 span.frm-inner-circle {
5680 background-color: var(--primary-700);
5681 height: 22px;
5682 width: 22px;
5683 padding: 4px;
5684 color: #fff;
5685 }
5686
5687 .frm-inner-circle svg {
5688 fill: currentColor;
5689 }
5690
5691 .frm_email_settings .widget-title .frm_form_action_icon {
5692 height: 15px;
5693 width: 15px;
5694 padding: 5px;
5695 color: #fff;
5696 vertical-align: middle;
5697 }
5698
5699 .frm_actions_list .frmsvg,
5700 .frm_actions_list i:before,
5701 .frm_email_settings .widget-title .frm_form_action_icon i,
5702 .frm_email_settings .widget-title .frm_form_action_icon .frmsvg {
5703 height: 15px;
5704 width: 15px;
5705 vertical-align: text-top;
5706 }
5707
5708 .frm_actions_list i:before {
5709 vertical-align: middle;
5710 }
5711
5712 .frm_email_settings .widget-title:hover .frm_form_action_icon {
5713 background-color: var(--grey);
5714 }
5715
5716 span.frm-inner-circle.frm-inverse {
5717 background-color: transparent;
5718 color: var(--primary-700);
5719 padding: 0;
5720 height: 30px;
5721 width: 100%;
5722 }
5723
5724 .frm_actions_list span.frm-inverse i,
5725 .frm_actions_list span.frm-inverse .frmsvg {
5726 color: var(--primary-700);
5727 height: 30px;
5728 width: 30px;
5729 font-size: 30px;
5730 padding: 0;
5731 }
5732
5733 .frm_actions_list i.frm-inverse:before {
5734 height: 30px;
5735 width: 100%;
5736 font-size: 30px;
5737 }
5738
5739 .frm_email_settings .widget-title .frm_form_action_icon.frm-inverse {
5740 background: #fff;
5741 padding: 0;
5742 height: 24px;
5743 width: 24px;
5744 }
5745
5746 .frm_email_settings .widget-title .frm_form_action_icon.frm-inverse .frmsvg,
5747 .frm_email_settings .widget-title .frm_form_action_icon.frm-inverse i:before {
5748 color: var(--grey-400);
5749 height: 24px;
5750 width: 24px;
5751 font-size: 24px;
5752 }
5753
5754 .frm_email_settings .widget-title:hover .frm_form_action_icon.frm-inverse .frmsvg,
5755 .frm_email_settings .widget-title:hover .frm_form_action_icon.frm-inverse i:before {
5756 color: var(--grey-500);
5757 }
5758
5759 .frm_email_icons {
5760 padding: 10px 0 5px 6px;
5761 font-size: 20px;
5762 }
5763
5764 .frm_email_icons a {
5765 margin-left: 8px;
5766 color: var(--grey);
5767 opacity: 0;
5768 transition: all .2s ease;
5769 }
5770
5771 .frm_email_icons a .frmsvg {
5772 color: var(--grey);
5773 }
5774
5775 .frm_email_icons a:hover,
5776 .widget-top:hover .frm_email_icons a {
5777 opacity: 1;
5778 }
5779
5780 .frm_actions_list a.frm_inactive_action {
5781 color: var(--grey);
5782 }
5783
5784 .frm_inactive_action .frm-inner-circle,
5785 .frm_actions_list .frm_inactive_action i {
5786 opacity: .4;
5787 }
5788
5789 table td, .form-table tr td {
5790 vertical-align: top;
5791 }
5792
5793 #new_fields .form-table tr td {
5794 display: block;
5795 padding: 7px 0 0;
5796 }
5797
5798 #new_fields .form-table tr td:first-child {
5799 margin: 0;
5800 }
5801
5802 #new_fields .form-table tr td:last-child {
5803 margin-bottom: 9px;
5804 }
5805
5806 .form-table #list-table th {
5807 text-align: center;
5808 }
5809
5810 #form_settings_page th,
5811 #form_settings_page td,
5812 .frm_settings_form td,
5813 #frm_notification_settings .frm_form_action_settings td p {
5814 padding: 7px 0;
5815 }
5816
5817 #permissions_settings_settings .frm_grid_container {
5818 align-items: center;
5819 }
5820
5821 #frm_notification_settings .form-table > tbody > tr > th {
5822 width: 150px;
5823 font-weight: normal;
5824 padding-right: 10px;
5825 }
5826
5827 #frm_notification_settings .frm_single_email_settings .form-table > tbody > tr > th {
5828 width: 80px;
5829 }
5830
5831 #frm_notification_settings table tr td:first-child {
5832 padding-left: 0;
5833 }
5834
5835 #frm_notification_settings table tr td:last-child {
5836 padding-right: 0;
5837 }
5838
5839
5840 #frm_notification_settings .frm_left_label {
5841 /* For add-ons that haven't been updated for 4.0 */
5842 float: none;
5843 width: auto !important;
5844 }
5845
5846 .frm-fields .frm_autoresponder_rows select {
5847 width: auto;
5848 }
5849
5850 #frm_notification_settings .frm_with_left_label,
5851 #frm_notification_settings .frm_left_label + textarea,
5852 #frm_notification_settings .frm_left_label + select,
5853 #frm_notification_settings .frm_left_label + input[type=text] {
5854 width: 100%;
5855 }
5856
5857 #frm_notification_settings .frm_email_buttons {
5858 padding: var(--gap-2xs);
5859 background: var(--light-blue);
5860 color: var(--primary-700);
5861 border-radius: var(--small-radius);
5862 border-color: var(--blue-border);
5863 line-height: 1;
5864 height: auto;
5865 min-height: 12px;
5866 font-size: var(--text-xs);
5867 box-shadow: none;
5868 }
5869
5870 p.frm_bcc_cc_container,
5871 p.frm_reply_to_container {
5872 float: right;
5873 z-index: 1;
5874 position: relative;
5875 }
5876
5877 p.frm_bcc_cc_container {
5878 margin: 14px 0 0;
5879 }
5880
5881 p.frm_reply_to_container {
5882 margin: -4px 0 0;
5883 }
5884
5885 .frm_email_row .frm_cancel1_icon:before {
5886 vertical-align: bottom;
5887 }
5888
5889 .frm_logic_field_opts {
5890 max-width: 35%;
5891 }
5892
5893 .frm-inline-select,
5894 p.frm-inline-select,
5895 #frm_submit_logic_row,
5896 .frm_logic_rows .frm-collapse-me {
5897 line-height: var(--h-md) !important;
5898 }
5899
5900 .frm_logic_row {
5901 padding: var(--gap-xs) 0 0;
5902 align-items: center;
5903 }
5904
5905 .frm-single-settings .frm_logic_row > select {
5906 max-width: 32.5% !important;
5907 }
5908
5909 .frm-single-settings .frm_logic_row select:nth-child(2) {
5910 max-width: 20% !important;
5911 }
5912
5913 .frm-single-settings .frm_logic_row span input,
5914 .frm-single-settings .frm_logic_row span select {
5915 max-width: 36% !important;
5916 }
5917
5918 .frm-single-settings .frm_logic_row input {
5919 max-width: 118px !important;
5920 }
5921
5922 .frm-single-settings ul.frm_sortable_field_opts {
5923 margin-bottom: 5px;
5924 }
5925
5926 .frm-single-settings .frm_add_opt_container svg.frm_add_tag,
5927 .frm-single-settings .frm-add-other svg.frm_add_tag {
5928 position: relative;
5929 top: 5px;
5930 margin-right: 4px;
5931 }
5932
5933 .frm-single-settings .frm_single_option .frm_remove_tag {
5934 position: relative;
5935 bottom: 3px;
5936 }
5937
5938 .frm-single-settings .frm_single_option .frm_remove_tag:before {
5939 content: "";
5940 }
5941
5942 .advanced_settings .frm_logic_row {
5943 margin: 14px 0;
5944 }
5945
5946 .advanced_settings .frm_logic_row select,
5947 .advanced_settings .frm_logic_row input {
5948 max-width: 30% !important;
5949 }
5950
5951 .frm_form_action_settings .frm_logic_row p {
5952 margin-top: 0;
5953 margin-bottom: 0;
5954 padding: 0;
5955 }
5956
5957 #poststuff .widgets-holder-wrap .frm_form_action_settings .widget-inside {
5958 padding-bottom: 0;
5959 }
5960
5961 #poststuff .frm_form_settings .widgets-holder-wrap .widget-inside {
5962 padding-left: 15px;
5963 padding-right: 15px;
5964 }
5965
5966 #form_global_settings h3 {
5967 font-size: var(--text-sm);
5968 margin-top: 25px;
5969 }
5970
5971 #form_global_settings .tabs-panel + h3 {
5972 margin-top: 0;
5973 border: none;
5974 }
5975
5976 #poststuff .frm_form_settings .widget-inside h3,
5977 #poststuff .frm_form_settings .advanced_settings h3,
5978 #poststuff .frm_settings_form h3,
5979 #frm_advanced .inside h3 {
5980 border-top: 1px solid #eee;
5981 border-bottom: none;
5982 margin: 15px -15px 0;
5983 padding: 8px 15px;
5984 font-size: var(--text-sm);
5985 }
5986
5987 #poststuff .frm_form_settings h3.frm_first_h3,
5988 #poststuff h3.frm_first_h3 {
5989 border: none;
5990 margin-top: 0;
5991 }
5992
5993 h3.frm_add_logic_link {
5994 margin-bottom: 0 !important;
5995 }
5996
5997 a.frm_add_logic_link.frm_hidden {
5998 display: none;
5999 }
6000
6001 .frm_add_logic_link .frmsvg,
6002 .frm_add_logic_link i {
6003 margin-right: 5px;
6004 }
6005
6006 .frm_right_addon {
6007 position: relative;
6008 }
6009
6010 .frm_right_addon .frm_remove_field {
6011 position: absolute;
6012 padding: 5px 10px;
6013 right: 10px;
6014 bottom: 0;
6015 }
6016
6017 .frm_right_addon input {
6018 padding-right: var(--gap-lg);
6019 }
6020
6021 .frm_icon_font {
6022 color: #A0A0A0;
6023 color: var(--grey);
6024 }
6025
6026 .frm-fields label .frm_icon_font {
6027 font-size: inherit;
6028 }
6029
6030 .misc-pub-revisions.frm_icon_font,
6031 .misc-pub-revisions.frm_icon_font:hover {
6032 color: inherit;
6033 }
6034
6035 .postbox.frm_with_icons .inside {
6036 padding: 0;
6037 margin: 0;
6038 }
6039
6040 .frm_add_tag:before {
6041 content: '\e602';
6042 }
6043
6044 .frm_remove_tag:before {
6045 content: '\e600';
6046 }
6047
6048 .frm_logic_row .frm_remove_tag {
6049 padding-left: 7px;
6050 }
6051
6052 .frm_logic_row .frm1 > .frm_remove_tag {
6053 padding: 0;
6054 }
6055
6056 .frm_tooltip_icon:before {
6057 font-size: 13px;
6058 vertical-align: top;
6059 }
6060
6061 .form-field input[type=text].frm_other_input {
6062 width: 30%;
6063 margin-left: 10px;
6064 }
6065
6066 .frm-add-other {
6067 text-align: right;
6068 }
6069
6070 .frm_add_opt .frm_add_tag,
6071 .frm-add-other .frm_add_tag {
6072 vertical-align: 20%;
6073 }
6074
6075 .frm_action_icon {
6076 margin: 5px 0 0 5px;
6077 }
6078
6079 span.frm_action_icon {
6080 margin: 0 4px 0 0;
6081 }
6082
6083 .frm_action_icon:active {
6084 outline: none;
6085 }
6086
6087 a.frm_action_icon:hover {
6088 text-decoration: none;
6089 }
6090
6091 .frm_action_icon.frm_error_icon:before {
6092 content: '\e608';
6093 }
6094
6095 .frm_inactive_icon.frm_action_icon.frm_error_icon:before {
6096 content: '\e606';
6097 }
6098
6099 .frm-field-action-icons {
6100 text-align: right;
6101 position: absolute;
6102 top: 2px;
6103 right: 2px;
6104 max-width: 100%;
6105 }
6106
6107 .frm-field-action-icons .frm-field-id {
6108 display: inline-block;
6109 overflow: hidden;
6110 text-overflow: ellipsis;
6111 white-space: nowrap;
6112 width: 80px;
6113 max-width: calc( 100% - 50px );
6114 position: relative;
6115 top: 2px;
6116 }
6117
6118 .frm-field-action-icons > a {
6119 font-size: var(--text-md);
6120 width: 17px;
6121 }
6122
6123 .frm-field-action-icons a:hover {
6124 text-decoration: none;
6125 }
6126
6127 .frm-field-action-icons .dropdown {
6128 display: inline-block;
6129 }
6130
6131 .frm-field-action-icons > a .frmsvg {
6132 color: var(--grey-500) !important;
6133 font-size: 17px;
6134 width: 17px;
6135 height: 17px;
6136 }
6137
6138 .frm-field-action-icons > a .frmsvg,
6139 .frm-field-action-icons > div > a .frmsvg {
6140 vertical-align: baseline;
6141 }
6142
6143 .edit_field_type_end_divider .frm-field-action-icons {
6144 display: none !important;
6145 }
6146
6147 .frm-move {
6148 cursor: grab;
6149 }
6150
6151 span.howto {
6152 display: inline;
6153 }
6154
6155 .frm_import_message {
6156 margin: 15px 0;
6157 line-height: 2.5em;
6158 }
6159
6160 .frm_sorting .form-field .widget input[type="text"],
6161 .frm_sorting .form-field .widget input[type="number"],
6162 .frm_sorting .form-field .widget select,
6163 #wpcontent .frm_sorting .form-field .widget select,
6164 .frm_sorting .form-field .widget textarea {
6165 width: auto;
6166 }
6167
6168 .tagchecklist span.no_taglist {
6169 display: inline;
6170 float: none;
6171 line-height: 15px;
6172 margin-right: 0;
6173 font-size: inherit;
6174 }
6175
6176 .tagchecklist .frm_exclude_cat_list span {
6177 display: inline;
6178 }
6179
6180 .tagchecklist span a:before {
6181 line-height: 23px;
6182 text-align: start;
6183 }
6184
6185 .frm_form_action_settings .frm_email_row .frm_remove_field svg {
6186 position: relative;
6187 bottom: 2px;
6188 }
6189
6190 /* Entries Page */
6191 .frm_no_entries_form {
6192 padding: 60px 0;
6193 }
6194
6195 .frm_no_entries_form .frm_no_entries_header {
6196 font-size: 20px;
6197 margin-bottom: 10px;
6198 }
6199
6200 .frm_no_entries_form .frm_no_entries_text {
6201 line-height: var(--leading);
6202 }
6203
6204 #form_entries_page #the-list .no-items {
6205 height: 240px; /* Equals to the max height of search dropdown */
6206 }
6207
6208 /* Reports Page */
6209 #form_reports_page img.frm_no_reports {
6210 max-width: 100%;
6211 }
6212
6213 .frm_wrap .google-visualization-table .gradient,
6214 .frm_wrap .google-visualization-table-tr-head,
6215 .frm_wrap .google-visualization-table-tr-odd,
6216 .frm_wrap .google-visualization-table-tr-odd.google-visualization-table-tr-over {
6217 background: var(--lightest-grey);
6218 }
6219
6220 .frm_wrap .google-visualization-table-tr-over {
6221 background: #fff;
6222 }
6223
6224 .frm_wrap .google-visualization-table-table th,
6225 .frm_wrap .google-visualization-table-table td {
6226 border-right-width: 0;
6227 padding: 10px !important;
6228 }
6229
6230 .frm_wrap .google-visualization-table-tr-head,
6231 .frm_wrap .google-visualization-table-tr-head th {
6232 white-space: pre-wrap;
6233 font-size: var(--text-md);
6234 font-weight: 400 !important;
6235 text-align: left;
6236 }
6237
6238 .frm_wrap .google-visualization-table-td-number {
6239 text-align: inherit;
6240 }
6241
6242 #form_reports_page .postbox{
6243 text-align: center;
6244 float: none;
6245 display: inline-block;
6246 margin-right: 2%;
6247 width: 20%;
6248 min-width: 175px;
6249 }
6250
6251 /* Views Page */
6252 #form_views_page img.frm_no_views {
6253 max-width: 100%;
6254 }
6255
6256 /* Field options popup */
6257 .frm_field_opts_popup {
6258 min-width: 300px;
6259 background-color: #fff;
6260 }
6261
6262 .frm_field_opts_popup #wpadminbar {
6263 display: none;
6264 }
6265
6266 .frm_prepop {
6267 width: 100%;
6268 list-style: none;
6269 overflow: auto;
6270 margin: 0;
6271 max-height: 295px;
6272 }
6273
6274 .frm_prepop li {
6275 margin: 0;
6276 }
6277
6278 .frm_prepop li a {
6279 display: block;
6280 text-decoration: none;
6281 cursor: pointer;
6282 padding: 5px 20px;
6283 }
6284
6285 .frm_prepop li a:hover {
6286 background: var(--sidebar-color);
6287 }
6288
6289 #frm_form_editor_container #frm_form_key_box {
6290 width: 13em;
6291 max-width: 30%
6292 }
6293
6294 #frm_form_editor_container #frm_form_desc {
6295 width: 70%;
6296 }
6297
6298 #frm_form_editor_container .ui-widget-content {
6299 display: none;
6300 padding: 15px;
6301 }
6302
6303 #frm_form_editor_container .ui-widget-content label {
6304 float: left;
6305 width: 170px;
6306 text-align: right;
6307 padding-right: 5px;
6308 clear: both;
6309 }
6310
6311 #frm_form_editor_container .ui-widget-content label.nofloat {
6312 clear: none;
6313 float: none;
6314 margin-left: 10px;
6315 }
6316
6317 #frm_form_editor_container .ui-state-default {
6318 color: #333 !important;
6319 }
6320
6321 .frm_green {
6322 color: var(--green) !important;
6323 }
6324
6325 #frm_form_editor_container .ui-state-default a.frm_orange, .frm-right-panel a.frm_orange, #postbox-container-1 a.frm_orange {
6326 color: #D54E21;
6327 }
6328
6329 #styling_settings input[type=checkbox], #styling_settings input[type=radio] {
6330 border: solid 1px #bbb;
6331 }
6332
6333 #styling_settings .widget .widget-top, #frm_form_editor_container .widget .widget-top {
6334 cursor: pointer;
6335 }
6336
6337 .frm_sorting .widget, .frm_settings_page .widget {
6338 background: #fff;
6339 }
6340
6341 .frm_sorting .widget-title h4 {
6342 font-weight: normal;
6343 }
6344
6345 .frm_sorting .widget, #postbox-container-1 .widget, .frm-right-panel .widget, .frm_settings_page .widget {
6346 margin-bottom: 0;
6347 }
6348
6349 .frm_settings_page .widget-inside {
6350 padding: 0 5px 5px;
6351 }
6352
6353 .frm_sorting .widget,
6354 .widget-inside,
6355 .frm_sorting .form-field .widget {
6356 display: none;
6357 }
6358
6359 #frm-show-fields {
6360 min-height: 350px;
6361 padding: 0 0 35px;
6362 margin: 0;
6363 position: relative;
6364 }
6365
6366 .frm-has-fields #frm-show-fields {
6367 min-height: 50px;
6368 }
6369
6370 #frm_builder_page .frm-lite-credit-card-element,
6371 body.frm-admin-page-styles .frm-lite-credit-card-element {
6372 position: relative;
6373 }
6374
6375 #frm_builder_page .frm-lite-credit-card-element > div,
6376 body.frm-admin-page-styles .frm-lite-credit-card-element > div {
6377 position: absolute;
6378 top: calc( 50% - 1px);
6379 transform: translateY(-50%);
6380 right: 10px;
6381 color: #d0d4dd;
6382 }
6383
6384 #frm_builder_page #frm_field_group_controls {
6385 position: absolute;
6386 padding: 5px;
6387 border-radius: 4px 4px 0 0;
6388 text-align: right;
6389 box-sizing: border-box;
6390 right: 0;
6391 top: -28px;
6392 height: 28px;
6393 z-index: 3; /* section dividers use z-index: 2; position above that to avoid it taking over hover control. */
6394 }
6395
6396 .frm-field-group-hover-target,
6397 .frm-has-open-field-group-popup,
6398 #frm_builder_page #frm_field_group_controls,
6399 .frm-selected-field-group {
6400 background: rgba(65, 153, 253, 0.04);
6401 }
6402
6403 .frm-selected-field-group {
6404 position: relative;
6405 }
6406
6407 #frm_builder_page #frm_field_group_controls > span:first-child {
6408 margin-right: 5px;
6409 }
6410
6411 #frm_builder_page #frm_field_group_controls svg {
6412 pointer-events: none;
6413 }
6414
6415 #frm_field_group_controls {
6416 visibility: hidden;
6417 }
6418
6419 .frm-field-group-hover-target #frm_field_group_controls {
6420 visibility: visible;
6421 }
6422
6423 #frm_field_group_controls .dropdown-item a span {
6424 color: var(--grey-700);
6425 }
6426
6427 #frm_field_group_controls .dropdown-item a:hover {
6428 text-decoration: none;
6429 }
6430
6431 .frm_sorting .no_repeat_section li.ui-state-default.edit_field_type_end_divider {
6432 display: none !important;
6433 }
6434
6435 .frm-right-panel .ui-state-default,
6436 #postbox-container-1 .ui-state-default,
6437 .frm_sorting > li.ui-state-default,
6438 .frm_sorting .no_repeat_section li.ui-state-default.edit_field_type_end_divider:hover {
6439 border: 1px solid transparent;
6440 font-weight: normal !important;
6441 background-color: transparent;
6442 background-image: none;
6443 padding: 5px;
6444 margin: 0;
6445 box-shadow: none;
6446 display: block;
6447 text-align: inherit !important;
6448 overflow: visible;
6449 position: relative;
6450 }
6451
6452 #frm-show-fields li.frm_cancel_sort {
6453 /* If a section gets dropped into a section, hide it */
6454 display: none;
6455 }
6456
6457 .divider_drop {
6458 text-align: center;
6459 }
6460
6461 .divider_drop .howto .frm_icon_font {
6462 font-style: normal;
6463 }
6464
6465 .show_repeat_sec {
6466 display: none;
6467 }
6468
6469 .repeat_section .show_repeat_sec {
6470 display: inline-block;
6471 margin: 5px 0 0;
6472 }
6473
6474 .repeat_section tr.show_repeat_sec {
6475 display: table-row;
6476 }
6477
6478 .repeat_format .frm_repeat_label,
6479 .repeat_formattext .frmsvg,
6480 .repeat_formattext i {
6481 display: none;
6482 }
6483
6484 .frm_button {
6485 text-decoration: none;
6486 border: 1px solid #eee;
6487 padding: 5px;
6488 color: #444;
6489 vertical-align: middle;
6490 box-shadow: none !important;
6491 }
6492
6493 a.frm_button:hover {
6494 text-decoration: none !important;
6495 }
6496
6497 .frm_button,
6498 .frm_button .frm_icon_font:before {
6499 font-size: 13px;
6500 vertical-align: middle;
6501 }
6502
6503 .frm_button .frmsvg {
6504 width: 13px;
6505 height: 13px;
6506 }
6507
6508 .frm-right-panel .ui-state-default,
6509 #postbox-container-1 .ui-state-default {
6510 padding: 0;
6511 margin: 0;
6512 }
6513
6514 ul.start_divider {
6515 padding: 8px 13px 0 8px;
6516 min-height: 115px;
6517 transition: all 0.4s linear;
6518 }
6519
6520 .frm-section-collapsed .frm_no_section_fields,
6521 .frm-section-collapsed ul.start_divider {
6522 height: 0;
6523 min-height: 0 !important;
6524 }
6525
6526 .frm-section-collapsed ul.start_divider {
6527 overflow: hidden;
6528 }
6529
6530 .frm-section-collapsed .frm_no_section_fields {
6531 overflow: hidden;
6532 padding: 0;
6533 opacity: 0;
6534 }
6535
6536 .frm-section-collapsed .divider_section_only .frm-collapsed-label {
6537 display: inline;
6538 }
6539
6540 .frm-page-collapsed .frm_clone_icon,
6541 .frm-page-collapsed .frm_delete_field,
6542 .frm-page-collapsed .frm_clone_field,
6543 .frm-section-collapsed .frm_clone_icon {
6544 opacity: .5;
6545 cursor: not-allowed;
6546 }
6547
6548 /* Hide the Duplicate summary option because we are missing the logic that also adds a new page */
6549 .edit_field_type_summary .frm_more_options_li:nth-child(2) {
6550 display: none !important;
6551 }
6552
6553 .edit_field_type_submit .frm_more_options_li:not(:last-child) {
6554 display: none !important;
6555 }
6556
6557 .frm_no_section_fields:not(.frm_block) + ul.start_divider {
6558 padding: 0;
6559 min-height: 132px;
6560 }
6561
6562 .frm_sorting li.ui-state-default .divider_section_only {
6563 padding: 6px;
6564 margin-top: -10px;
6565 border: 2px solid transparent;
6566 border-radius: var(--small-radius);
6567 z-index: 2;
6568 position: relative;
6569 }
6570
6571 .divider_section_only > .frm_inner_field_container {
6572 padding: 5px 0;
6573 margin: 0;
6574 }
6575
6576 .frm-collapsed-label,
6577 .divider_section_only > .frm_inner_field_container .frm_form_fields {
6578 display: none;
6579 }
6580
6581 .frm-section-collapsed .divider_section_only:after,
6582 .divider_section_only:before {
6583 content: '';
6584 display: block;
6585 padding: 2px 0;
6586 line-height: 1px;
6587 border-top: 2px solid var(--grey-300);
6588 top: -2px;
6589 position: absolute;
6590 width: 100%;
6591 transition: .5s border-color ease-in-out;
6592 }
6593
6594 .frm-section-collapsed .divider_section_only:after {
6595 top: auto;
6596 bottom: -6px;
6597 }
6598
6599 .frm-section-collapsed .divider_section_only:hover:after,
6600 li.selected.frm-section-collapsed .divider_section_only:before,
6601 li.selected.frm-section-collapsed .divider_section_only:after,
6602 .divider_section_only:hover:before,
6603 li.selected .divider_section_only:before {
6604 border-color: transparent;
6605 }
6606
6607 .frm_sorting li.ui-state-default.edit_field_type_divider {
6608 overflow: visible;
6609 position: relative;
6610 padding: 0 0 0 20px;
6611 margin: 25px 0 0 -5px;
6612 border-left: 1px solid var(--primary-700);
6613 transition: border 0.7s ease-out;
6614 }
6615
6616 .frm-section-collapsed {
6617 border-left-color: transparent !important;
6618 }
6619
6620 .frm_sorting li.edit_field_type_end_divider,
6621 .frm_sorting .no_repeat_section li.ui-state-default.edit_field_type_end_divider:hover {
6622 margin: 0 0 var(--gap-sm);
6623 }
6624
6625 .frm-first-page .frm_prev_page {
6626 display: none;
6627 }
6628
6629 #frm_builder_page .frm_remove_form_row.frm_button,
6630 #frm_builder_page .frm_add_form_row.frm_button {
6631 border-radius: var(--small-radius);
6632 border: 1px solid var(--blue-border);
6633 }
6634
6635 #frm_builder_page .frm_remove_form_row .frmsvg,
6636 #frm_builder_page .frm_remove_form_row i:before,
6637 #frm_builder_page .frm_add_form_row .frmsvg,
6638 #frm_builder_page .frm_add_form_row i:before {
6639 color: var(--primary-700);
6640 }
6641
6642 .frm-preview-buttons .frm_button_submit {
6643 margin: 0 5px;
6644 }
6645
6646 .frm-page-break {
6647 border-top: 1px dashed var(--primary-700);
6648 margin-top: var(--gap-lg);
6649 position: relative;
6650 }
6651
6652 .edit_field_type_divider:before,
6653 .edit_field_type_divider:after,
6654 .frm-page-break:before,
6655 .frm-page-break:after {
6656 content: '';
6657 position: absolute;
6658 background-color: #fff;
6659 border-radius: 50%;
6660 border: 1px solid var(--primary-700);
6661 text-rendering: auto;
6662 -webkit-font-smoothing: antialiased;
6663 }
6664
6665 .edit_field_type_divider:before {
6666 font-family: 's11-fp';
6667 content: '\f1dc';
6668 width: 20px;
6669 height: 20px;
6670 left: -11px;
6671 top: 0;
6672 background: var(--primary-700);
6673 text-align: center;
6674 color: #fff;
6675 font-size: 13px;
6676 }
6677
6678 .repeat_section.edit_field_type_divider:before {
6679 font-family: 's11-fp';
6680 content: '\f363';
6681 }
6682
6683 .edit_field_type_divider:after {
6684 width: 5px;
6685 height: 5px;
6686 left: -4px;
6687 bottom: -4px;
6688 transition: all 0.4s ease-out;
6689 }
6690
6691 .frm-page-break:before,
6692 .frm-page-break:after {
6693 width: 8px;
6694 height: 8px;
6695 top: -6px;
6696 border-color: var(--grey);
6697 }
6698
6699 .frm-page-break:after {
6700 right: 0;
6701 }
6702
6703 #frm-fake-page .frm-page-break {
6704 border-color: var(--grey);
6705 }
6706
6707 #frm-fake-page {
6708 padding: 0 5px;
6709 }
6710
6711 .frm_sorting li.edit_field_type_divider:hover,
6712 .frm_sorting li.edit_field_type_divider.selected {
6713 border-left-color: var(--primary-500);
6714 }
6715
6716 .edit_field_type_divider.selected:before,
6717 .edit_field_type_divider:hover:before {
6718 border-color: var(--primary-500);
6719 background: var(--primary-500);
6720 }
6721
6722 .edit_field_type_divider.selected:after,
6723 .edit_field_type_divider:hover:after {
6724 border-color: var(--primary-500);
6725 }
6726
6727 .frm-section-collapsed:after {
6728 border-color: transparent !important;
6729 color: transparent;
6730 }
6731
6732 .frm-page-break .frm-collapse-page.button {
6733 margin-left: 46%;
6734 margin-top: calc( -32px / 2 );
6735 padding: 6px 12px !important;
6736 }
6737
6738 #frm-fake-page.frm-page-collapsed {
6739 margin-bottom: 0;
6740 }
6741
6742 .frm-page-collapsed {
6743 position: relative;
6744 overflow: visible !important;
6745 margin-bottom: var(--gap-lg);
6746 }
6747
6748 .frm-collapse-page .frmsvg,
6749 .frm-collapse-page .frm_arrowdown6_icon {
6750 width: var(--text-sm);
6751 height: var(--text-sm);
6752 font-size: var(--text-sm);
6753 text-align: center;
6754 margin-left: 2px;
6755 color: currentColor;
6756 transition: transform 300ms ease-in-out;
6757 }
6758
6759 .frm-page-collapsed .frm-collapse-page .frmsvg {
6760 transform: rotate(180deg);
6761 }
6762
6763 #frm-fake-page .frm_arrowdown6_icon {
6764 color: currentColor;
6765 }
6766
6767 .frm-collapsed i:before,
6768 .frm-page-collapsed .frm_arrowdown6_icon:before {
6769 content: '\e913';
6770 }
6771
6772 .frm-collapse-section svg {
6773 fill: var(--primary-color);
6774 transition: transform 0.2s ease-out, fill 0.2s ease-out;
6775 }
6776
6777 .frm-collapse-section:hover svg {
6778 fill: var(--primary-700);
6779 }
6780
6781 .frm-section-collapsed .frm-collapse-section svg {
6782 transform: rotate(-90deg);
6783 }
6784
6785 .open .widget-top .frm_arrow_right_icon:before {
6786 content: '\e62a';
6787 }
6788
6789 .frm-collapsed + .frm-collapse-me {
6790 overflow: hidden !important;
6791 }
6792
6793 .frm-collapse-me {
6794 padding-bottom: 10px;
6795 }
6796
6797 .frm-collapsed + div {
6798 height: 0;
6799 padding: 0;
6800 border-bottom: 2px solid var(--sidebar-hover);
6801 }
6802
6803 .frm_sorting .divider_section_only > .frm_ipe_field_label {
6804 font-size: 116%;
6805 }
6806
6807 #frm_form_editor_container .edit_field_type_break .frm_primary_label.frm_ipe_field_label.button {
6808 width: 150px;
6809 text-align: center;
6810 margin-bottom: 3px;
6811 display: block;
6812 }
6813
6814 tr.frm_options_heading td {
6815 padding-bottom: 0;
6816 }
6817
6818 .frm_sorting .widget-inside .form-table td p,
6819 .frm_sorting .widget-inside .form-wrap label {
6820 padding: 10px 0;
6821 }
6822
6823 .frm_no_fields,
6824 .frm_no_section_fields {
6825 text-align: center;
6826 position: absolute;
6827 color: var(--medium-grey);
6828 font-size: var(--text-md);
6829 box-sizing: border-box;
6830 border: 1px dashed var(--grey-300);
6831 }
6832
6833 .frm-over-droppable + .frm_no_fields {
6834 border-style: solid;
6835 }
6836
6837 .frm_no_section_fields {
6838 display: none;
6839 margin: 0;
6840 padding: 20px 0 0;
6841 width: calc( 100% - 20px );
6842 height: 121px;
6843 transition: all 0.4s linear;
6844 }
6845
6846 .frm_no_fields {
6847 min-height: 300px;
6848 margin: 20px 5%;
6849 width: 90%;
6850 top: 0;
6851 }
6852
6853 .frm-empty-fields .frm_updated_message ~ .frm_no_fields {
6854 top: 60px;
6855 }
6856
6857 #frm_form_editor_container:not(.frm-has-fields) #frm-show-fields > .frm_field_box:last-child {
6858 visibility: hidden;
6859 }
6860
6861 .frm-has-fields .frm_no_fields {
6862 display: none;
6863 }
6864
6865 #frm-form-button {
6866 display: none;
6867 margin: 0 7px 25px;
6868 }
6869
6870 .frm-has-fields #frm-form-button {
6871 display: block;
6872 }
6873
6874 .frm-large-plus.frmsvg {
6875 color: var(--primary-700);
6876 height: 45px;
6877 width: 45px;
6878 }
6879
6880 .frm_drag_inst {
6881 line-height: normal;
6882 font-size: 35px;
6883 font-weight: 300;
6884 margin: 80px 0 25px;
6885 }
6886
6887 .frm_no_section_fields p,
6888 .frm_no_fields p {
6889 color: var(--grey);
6890 font-size: 15px;
6891 }
6892
6893 .frm_product_price_wrapper {
6894 display: inline-block;
6895 vertical-align: middle;
6896 }
6897
6898 .frm_prod_type_single .frm_product_price_wrapper {
6899 width: 100%;
6900 }
6901
6902 #new_fields .frm_product_price_wrapper input:first-child {
6903 width: 60%;
6904 float: left;
6905 }
6906
6907 #new_fields .frm_product_price_wrapper input:nth-child(2) {
6908 width: 37%;
6909 float: right;
6910 }
6911
6912 .frm_priority_field_choices,
6913 li.frm_single_option {
6914 padding-bottom: 16px;
6915 border-bottom: 1px solid var(--sidebar-hover);
6916 }
6917
6918 .frm_priority_field_choices,
6919 li.frm_single_option:not(:last-child) {
6920 margin-bottom: 16px;
6921 }
6922
6923 .frm_prod_type_single input[type=radio],
6924 .frm_prod_type_single .frm_drag_icon,
6925 .frm_prod_type_single .frm_sortable_field_opts li:nth-child( n + 3 ),
6926 .frm_prod_type_single .frm_sortable_field_opts .frm_remove_tag,
6927 .frm_prod_type_single .frm_form_field:not(.frm_product_type):not(.frm_sep_val_product),
6928 .frm_prod_type_single .frm-bulk-edit-link,
6929 .frm_prod_type_user_def.frm_grid_container,
6930 .frm_prod_options_heading.frm_prod_user_def {
6931 display: none;
6932 }
6933
6934 .plugin-card-bottom .frm-trash {
6935 color: #a00;
6936 }
6937
6938 .frm-fields p > .frm_inline_label,
6939 .frm_inline_label {
6940 padding-left: 3px;
6941 margin-right: 12px;
6942 display: inline-block;
6943 }
6944
6945 .frm_left_label {
6946 clear: both;
6947 float: left;
6948 width: 32% !important;
6949 margin-right: 2% !important;
6950 line-height: 2em;
6951 }
6952
6953 table td.frm_left_label {
6954 float: none;
6955 line-height: inherit;
6956 padding: 5px 0 5px 2%;
6957 }
6958
6959 .frm_left_label.frm_alignright {
6960 padding-right: 10px;
6961 text-align: right;
6962 }
6963
6964 .frm-fields .frm_left_label + textarea,
6965 .frm-fields .frm_left_label + select,
6966 .frm-fields .frm_left_label + input[type=text],
6967 .frm_with_left_label {
6968 width: 66%;
6969 }
6970
6971 td.frm_left_label + td {
6972 width: 66%;
6973 padding-top: 0;
6974 }
6975
6976 #html_settings label {
6977 display: block;
6978 }
6979
6980 #html_settings .frm_field_html_box {
6981 width: 100%;
6982 }
6983
6984 ul.frm-category-tabs {
6985 margin-top: 2px;
6986 }
6987
6988 .frm-category-tabs > li a,
6989 .frm-category-tabs > li a:active {
6990 outline: none;
6991 box-shadow: none;
6992 display: flex;
6993 gap: var(--gap-xs);
6994 align-items: center;
6995 }
6996
6997 .frm-category-tabs > li.active .frmsvg,
6998 .frm-category-tabs > li.active i,
6999 .frm-category-tabs > li.active span,
7000 .frm-category-tabs > li.active a {
7001 color: var(--primary-500);
7002 }
7003
7004 .frm_wrap .manage-menus {
7005 margin-top: 0;
7006 border: none;
7007 border-bottom: 1px solid var(--grey-300);
7008 background: var(--lightest-grey);
7009 }
7010
7011 .general_settings .postbox .manage-menus {
7012 border-top: none;
7013 border-left: none;
7014 border-right: none;
7015 }
7016
7017 .frm-postbox-no-h3 {
7018 padding-top: 10px;
7019 }
7020
7021 .frm-right-panel .ui-state-default, #postbox-container-1 .ui-state-default {
7022 color: var(--grey-900);
7023 }
7024
7025 .no_repeat_section .frm_sorting > li.ui-state-default.edit_field_type_end_divider:hover {
7026 box-shadow: none;
7027 }
7028
7029 .frm-selected-field-group li.ui-state-default,
7030 .start_divider.frm_sorting li.ui-state-default.frm_not_divider.selected,
7031 .start_divider.frm_sorting li.ui-state-default.frm_not_divider:hover,
7032 .frm_sorting li.ui-state-default.frm_not_divider:hover,
7033 .frm_sorting li.ui-state-default.ui-sortable-helper,
7034 .frm_sorting li.ui-state-default.edit_field_type_divider .divider_section_only:hover,
7035 .frm_sorting .repeat_section li.ui-state-default.edit_field_type_end_divider:hover,
7036 .frm_sorting li.ui-state-default.selected.edit_field_type_divider .divider_section_only,
7037 .frm_update_msg,
7038 .frm_sorting li.ui-state-default.frm_not_divider.selected,
7039 .frm_sorting li.ui-state-default.selected.edit_field_type_divider .divider_section_only {
7040 border-color: var(--primary-500);
7041 transition: .5s border-color ease-in-out;
7042 }
7043
7044 .frm_sorting li.ui-state-default.frm_not_divider.selected {
7045 box-shadow: 0 0 1px 0 var(--primary-500);
7046 }
7047
7048 .frm_sorting li.ui-state-default {
7049 transition: .7s box-shadow ease-in-out, .7s height linear;
7050 }
7051
7052 .frm_sorting li.ui-state-default.frm-newly-added {
7053 box-shadow: inset 0 0 2px 1px var(--blue-border);
7054 }
7055
7056 .frm_sorting li.ui-state-default.selected.edit_field_type_divider .divider_section_only .frm-show-hover {
7057 visibility: visible !important;
7058 display: inline !important;
7059 }
7060
7061 .edit_field_type_end_divider > label {
7062 display: none !important;
7063 }
7064
7065 .frm_email_actions.feature-filter {
7066 font-weight: bold;
7067 border: 1px solid #DFDFDF;
7068 background-color: #EEEEEE;
7069 padding: 3px 5px 2px;
7070 font-size: var(--text-md);
7071 line-height: 20px;
7072 }
7073
7074 .frm_update_msg {
7075 border-style: solid;
7076 margin: 10px 0;
7077 color: #21759B;
7078 padding: 8px 15px;
7079 border-radius: 4px;
7080 }
7081
7082 .frm_update_msg.wrap {
7083 margin: 10px 20px 0 2px;
7084 }
7085
7086 #frm-insert-fields-box .frm_update_msg {
7087 margin-right: 0.9em;
7088 }
7089
7090 .frm_update_msg a {
7091 font-weight: bold;
7092 }
7093
7094 .widefat td {
7095 width: auto;
7096 }
7097
7098 .widefat .column-id {
7099 width: 3.7em;
7100 }
7101
7102 .widefat .column-show_count {
7103 width: 5em;
7104 }
7105
7106 .widefat .column-shortcode {
7107 width: 9em;
7108 }
7109
7110 .toplevel_page_formidable .column-shortcode div {
7111 display: flex;
7112 gap: var(--gap-xs);
7113 }
7114
7115 .widefat .column-entries, .widefat .column-link {
7116 width: 10%;
7117 text-align: center;
7118 }
7119
7120 .widefat .column-form_key, .widefat .column-created_at {
7121 width: 10%;
7122 }
7123
7124 .frm-white-body .search-box,
7125 .frm_wrap .frm-search {
7126 float: right;
7127 margin: 0;
7128 clear: right;
7129 }
7130
7131 .frm-white-body .search-box,
7132 .frm-search {
7133 min-width: 32%;
7134 position: relative;
7135 display: flex;
7136 gap: var(--gap-sm);
7137 align-items: center;
7138 }
7139
7140 .frm-inline-modal .frm-search,
7141 #frm_adv_info .frm-search {
7142 float: none;
7143 width: 100%;
7144 clear: both;
7145 margin: var(--gap-xs) 0;
7146 }
7147
7148 .frm-button-group a {
7149 margin: 0 7px !important;
7150 }
7151
7152 .frm_has_textarea .frm-with-right-icon {
7153 display: block;
7154 }
7155
7156 .frm-with-left-icon,
7157 .frm-with-right-icon {
7158 position: relative;
7159 }
7160
7161 i.frm-show-box,
7162 i.frm-show-inline-modal,
7163 .frm-with-left-icon i,
7164 .frm-with-right-icon i:not([class*=mce-]),
7165 .frmsvg.frm-show-box,
7166 .frmsvg.frm-show-inline-modal,
7167 .frm-with-left-icon .frmsvg,
7168 .frm-with-right-icon .frmsvg,
7169 .frm-search > .frmsvg,
7170 .frm-search span:not(.multiselect-selected-text):not(.multiselect-native-select) {
7171 position: absolute;
7172 padding: 0 14px;
7173 pointer-events: none;
7174 left: 0;
7175 color: var(--grey-400);
7176 font-size: var(--text-xs);
7177 }
7178
7179 .frm-with-right-icon .frmsvg,
7180 .frm-with-right-icon i:not([class*=mce-]) {
7181 right: 0;
7182 top: -3px;
7183 left: auto;
7184 padding: 0 10px 0 5px;
7185 }
7186
7187 .frm_form_settings .frm-with-right-icon .frmsvg {
7188 top: 0;
7189 }
7190
7191 .frm_form_settings .wp-editor-container .frm-with-right-icon .frmsvg, #frm_builder_page .wp-editor-container .frm-with-right-icon .frmsvg {
7192 top: auto;
7193 bottom: 0;
7194 }
7195
7196 .frm_form_settings .frm_has_textarea .frm-with-right-icon .frmsvg {
7197 top: auto;
7198 bottom: 6px;
7199 }
7200
7201 .frmsvg.frm-show-box,
7202 .frmsvg.frm-show-inline-modal,
7203 i.frm-show-box,
7204 i.frm-show-inline-modal {
7205 color: var(--primary-500);
7206 pointer-events: initial;
7207 cursor: pointer;
7208 z-index: 1;
7209 opacity: 1;
7210 top: auto;
7211 margin: calc( ( 36px - 18px ) / 2 ); /* input height - svg / 2 */
7212 margin-bottom: 0;
7213 padding: 0;
7214 }
7215
7216 .frm-open .frmsvg.frm-show-inline-modal,
7217 .frm-open i.frm-show-inline-modal {
7218 opacity: .5;
7219 }
7220
7221 .frm-lookup-box-label + .frm-inline-modal,
7222 .frm-open + .frm-inline-modal {
7223 top: -10px;
7224 margin-bottom: 0;
7225 }
7226
7227 .frm_grid_container > .frm-open + .frm-inline-modal {
7228 top: -4px;
7229 }
7230
7231 .frm-with-left-icon input {
7232 padding-left: 37px !important;
7233 }
7234
7235 .frm_wrap .frm-with-right-icon textarea,
7236 .frm_wrap .frm-with-right-icon input,
7237 .frm_wrap .frm-with-right-icon input[type=text] {
7238 padding-right: var(--gap-md);
7239 }
7240
7241 #frm-show-fields .frm-with-left-icon .frmsvg,
7242 #frm-show-fields .frm-with-left-icon i {
7243 padding-top: 10px;
7244 }
7245
7246 .frm-search .frm_search_icon {
7247 padding-left: 18px !important;
7248 padding-right: 12px !important;
7249 }
7250
7251 .frm-search input[name="s"],
7252 .frm-search .dropdown-toggle,
7253 .frm-search input.frm-search-input {
7254 border-radius: var(--small-radius);
7255 border-color: var(--grey-300);
7256 }
7257
7258 .frm-white-body .search-box input[name="s"], /* Views search */
7259 #wpwrap .frm-search input[type="search"] {
7260 flex: 1;
7261 font-size: var(--text-sm);
7262 line-height: var(--text-lg);
7263 padding: var(--gap-xs);
7264 }
7265
7266 .frm-search input[type="search"],
7267 .frm-search input[type="text"] {
7268 padding-left: var(--gap-xl) !important;
7269 }
7270
7271 .frm-search .dropdown-toggle {
7272 width: 100%;
7273 float: none;
7274 max-width: 200px;
7275 background: transparent;
7276 padding: 7px;
7277 padding-left: 33px !important;
7278 min-height: 32px;
7279 text-align: inherit;
7280 overflow: hidden;
7281 text-overflow: ellipsis;
7282 }
7283
7284 span.multiselect-selected-text {
7285 white-space: nowrap;
7286 display: inline-block;
7287 max-width: 90%;
7288 text-overflow: ellipsis;
7289 overflow: hidden;
7290 }
7291
7292 .frm-search #search-submit a {
7293 color: var(--grey-800);
7294 }
7295
7296 .frm-search #search-submit .caret {
7297 opacity:.7;
7298 }
7299
7300 .frm-not-set input {
7301 color: var(--primary-500) !important;
7302 font-size: 13px;
7303 }
7304
7305 .frm-not-set .frmsvg,
7306 .frm-not-set i {
7307 color: var(--primary-700);
7308 opacity: 1;
7309 }
7310
7311 .post-type-frm_display select[name="m"] + #post-query-submit,
7312 select[name="m"] {
7313 display: none;
7314 }
7315
7316 .frm_shortcode_select optgroup option {
7317 margin-left: 1em;
7318 }
7319
7320 .frm_shortcode_select optgroup {
7321 padding-top: 5px;
7322 }
7323
7324 .frm_shortcode_select .frm_subopt {
7325 margin-left: 2em;
7326 }
7327
7328 .misc-pub-section a.edit-frm_shortcode, .misc-pub-section a.edit-form-status {
7329 float: none;
7330 font-size: 13px;
7331 }
7332
7333 .frm-grid {
7334 border-collapse: collapse;
7335 border: none;
7336 margin-right: 10px;
7337 }
7338
7339 .frm-grid td, .frm-grid th {
7340 padding: 5px;
7341 border: 1px solid black;
7342 }
7343
7344 .pro_feature {
7345 text-decoration: line-through;
7346 }
7347
7348 /* View page */
7349
7350 .post-type-frm_display #poststuff #post-body.columns-2 {
7351 margin-right: var(--big-sidebar);
7352 }
7353
7354 .post-type-frm_display #post-body.columns-2 #postbox-container-1 {
7355 margin-right: calc( var(--big-sidebar) * -1 );
7356 width: calc( var(--big-sidebar) - 40px );
7357 }
7358
7359 .post-type-frm_display #poststuff #post-body.columns-2 #side-sortables {
7360 width: 100%;
7361 }
7362
7363 #frm_dyncontent .hndle,
7364 #frm_dyncontent .handlediv {
7365 display: none !important;
7366 }
7367
7368 .post-type-frm_display .meta-box-sortables .frm_form_nav > li > a,
7369 .post-type-frm_display .frm_form_nav .nav-tab-active {
7370 padding: 0 2px 5px;
7371 line-height: 1.4;
7372 }
7373
7374 .post-type-frm_display #advanced-sortables h2.hndle,
7375 .post-type-frm_display #side-sortables h2.hndle,
7376 .post-type-frm_display #normal-sortables h2.hndle {
7377 border-bottom: 1px solid var(--grey-300);
7378 margin: 10px 0 0 !important;
7379 padding: 0 25px 8px;
7380 }
7381
7382 .post-type-frm_display #side-sortables h2.hndle {
7383 margin-top: 0 !important;
7384 padding-top: 10px;
7385 }
7386
7387 .post-type-frm_display #post-body-content {
7388 margin-top: var(--gap-lg);
7389 }
7390
7391 .post-type-frm_display.edit-php #wpbody-content > .wrap {
7392 margin: 0;
7393 }
7394
7395 .post-type-frm_display .postbox .hndle,
7396 .post-type-frm_display .postbox {
7397 border-color: var(--grey-300);
7398 }
7399
7400 .post-type-frm_display #postbox-container-1 .postbox,
7401 .post-type-frm_display #postbox-container-2 .postbox {
7402 border-radius: var(--small-radius);
7403 border-color: var(--grey-300);
7404 box-shadow: none;
7405 }
7406
7407 .post-type-frm_display #side-sortables .postbox {
7408 border-radius: 0;
7409 border-top-width: 0;
7410 margin-bottom: 0;
7411 }
7412
7413 .post-type-frm_display #side-sortables .misc-pub-section {
7414 padding: 15px 20px 10px;
7415 }
7416
7417 .post-type-frm_display .misc-pub-section .frmsvg,
7418 .post-type-frm_display #post-body .misc-pub-post-status:before,
7419 .post-type-frm_display #post-body #visibility:before,
7420 .post-type-frm_display .curtime #timestamp:before,
7421 .post-type-frm_display #post-body .misc-pub-revisions:before,
7422 .post-type-frm_display span.wp-media-buttons-icon:before {
7423 color: var( --grey);
7424 }
7425
7426 .post-type-frm_display #frm_top_bar + #poststuff #submitdiv #publishing-action, /* Hide only if top bar is present */
7427 .post-type-frm_display #frm_top_bar + #poststuff #submitdiv #minor-publishing-actions,
7428 .post-type-frm_display #frm_top_bar + #poststuff #edit-slug-box,
7429 .post-type-frm_display .wrap h1.wp-heading-inline,
7430 .post-type-frm_display .wrap > .page-title-action {
7431 display: none;
7432 }
7433
7434 .post-type-frm_display #poststuff h2.nav-tab-wrapper {
7435 padding-left: 10px;
7436 margin-bottom: 0;
7437 padding-bottom: 0;
7438 }
7439
7440 .post-type-frm_display .nav-menus-php .wrap {
7441 margin: 10px 0 0;
7442 }
7443
7444 .post-type-frm_display .nav-menus-php .wrap p {
7445 padding-left: 12px;
7446 padding-right: 12px;
7447 }
7448
7449 .post-type-frm_display .nav-tab {
7450 display: inline-block;
7451 background-color: #f4f4f4;
7452 }
7453
7454 .post-type-frm_display .nav-tab.frm_hidden {
7455 display: none;
7456 }
7457
7458 .post-type-frm_display .nav-tab:hover {
7459 background-color: #e4e4e4;
7460 }
7461
7462 .frm_order_row,
7463 .frm_where_row {
7464 margin-bottom: 7px;
7465 line-height: 30px;
7466 }
7467
7468 .frm-single-settings .frm_prod_field_opt_cont {
7469 margin-top: initial;
7470 margin-bottom: 20px;
7471 }
7472
7473 /*hide elements if js is avail*/
7474 select.texture {
7475 display: none;
7476 }
7477
7478 .post-type-frm_display #wp-content-editor-tools,
7479 #wp-content-editor-tools {
7480 background-color: transparent;
7481 }
7482
7483 .post-type-frm_display #major-publishing-actions {
7484 border-color: var(--grey-300);
7485 background: var(--sidebar-color);
7486 }
7487
7488 .post-type-frm_display #frm_adv_info {
7489 width: calc( var(--big-sidebar) - 40px );
7490 height: calc( 100vh - 32px );
7491 overflow: hidden;
7492 }
7493
7494 .post-type-frm_display #frm_adv_info:not(.frm_fixed) {
7495 top: 0 !important;
7496 }
7497
7498 .post-type-frm_display #frm_adv_info.frm_fixed {
7499 position: fixed;
7500 z-index: 9999;
7501 top: 32px;
7502 }
7503
7504 .post-type-frm_display #frm_adv_info ul.frm_code_list.frm-full-hover {
7505 max-height: calc( 100vh - 180px );
7506 }
7507
7508 .frm_col_one {
7509 margin-right: 4%;
7510 clear: both;
7511 }
7512
7513 ul .frm_col_one {
7514 float: left;
7515 }
7516
7517 ul .frm_col_two {
7518 float: right;
7519 }
7520
7521 ul.frm_two_col {
7522 display: grid;
7523 grid-template-columns: repeat(2, minmax(0, 1fr));
7524 gap: var(--gap-sm);
7525 }
7526
7527 .frm_two_col li {
7528 margin-bottom: 0;
7529 }
7530
7531 .frm-info-modal a,
7532 .frm-info-modal ul,
7533 .frm-info-modal p,
7534 .frm-info-modal,
7535 .settings-lite-cta a,
7536 .settings-lite-cta ul,
7537 .settings-lite-cta {
7538 color: var(--grey-500);
7539 font-size: var(--text-md);
7540 box-shadow: none !important;
7541 }
7542
7543 .frm-info-modal h3,
7544 .settings-lite-cta h3 {
7545 font-size: 17px !important;
7546 }
7547
7548 .frm-green-icons .frmsvg {
7549 color: var(--green);
7550 }
7551
7552 .frm-info-modal .postbox .inside,
7553 .settings-lite-cta .postbox .inside {
7554 padding: var(--gap-md);
7555 margin: 0;
7556 }
7557
7558 .cta-inside a {
7559 color: var(--orange)
7560 }
7561
7562 .info-modal-inside a.frm-standard-link {
7563 color: var(--primary-500);
7564 }
7565
7566 .info-modal-inside a.frm-standard-link:hover {
7567 color: var(--primary-700);
7568 }
7569
7570 .frm_no_p_margin > p {
7571 margin: 0;
7572 }
7573
7574 .frm_code_list a.button {
7575 display: block;
7576 text-align: center;
7577 font-size: 11px;
7578 overflow: hidden;
7579 }
7580
7581 #frm-navbarDrop + .frm_code_list.frm-full-hover {
7582 margin: var(--gap-xs) 0 0;
7583 min-width: 300px;
7584 max-height: calc( ( 40px * 5 ) + 56px );
7585 }
7586
7587 .frm_code_list.frm-full-hover li {
7588 margin: 0;
7589 }
7590
7591 .frm-select-list-item,
7592 .frm_wrap .ui-autocomplete li > div,
7593 .multiselect-container button.multiselect-option,
7594 .frm-dropdown-menu > .dropdown-item > a,
7595 .frm-dropdown-menu > .dropdown-item > a:visited,
7596 .frm-dropdown-menu > .dropdown-item > a:link, /* Override jQuery UI */
7597 .frm-dropdown-menu .frm_dropdown_li,
7598 .frm_code_list.frm-full-hover a {
7599 display: flex;
7600 color: var(--grey-700);
7601 padding: 5px 10px;
7602 font-size: var(--text-md);
7603 gap: var(--gap-xs);
7604 align-items: center;
7605 }
7606
7607 .frm_code_list.frm-full-hover a span {
7608 max-width: 83px;
7609 margin-right: var(--gap-xs);
7610 margin-left: auto;
7611 }
7612
7613 .frm-single-settings .frm_code_list.frm-full-hover a {
7614 display: block;
7615 }
7616
7617 .frm_code_list.frm-full-hover a,
7618 .frm_code_list.frm-full-hover a span {
7619 white-space: nowrap;
7620 overflow: hidden;
7621 text-overflow: ellipsis;
7622 }
7623
7624 .frm_code_list.frm-full-hover.frmcenter a {
7625 display: block;
7626 }
7627
7628 #frm-layout-classes frm-full-hover a span {
7629 max-width: 45%;
7630 }
7631
7632 .frm-select-list-item.active,
7633 .frm-select-list-item:hover,
7634 .frm_wrap .ui-autocomplete li div.ui-state-active,
7635 .frm_wrap .ui-autocomplete li.ui-state-focus,
7636 .multiselect-container button.multiselect-option.active,
7637 .multiselect-container button.multiselect-option:hover,
7638 .frm-dropdown-menu > .dropdown-item > a:hover,
7639 .frm_code_list.frm-full-hover a:hover span,
7640 .frm_code_list.frm-full-hover a:hover {
7641 background: var(--primary-25);
7642 color: var(--primary-500);
7643 border-radius: var(--small-radius);
7644 }
7645
7646 .frm-select-list-item .frmsvg,
7647 .frm-dropdown-menu > .dropdown-item > a .frmsvg {
7648 opacity: .8;
7649 }
7650
7651 .frm-select-list-item:hover .frmsvg,
7652 .frm-dropdown-menu > .dropdown-item > a:hover .frmsvg {
7653 opacity: 1;
7654 }
7655
7656 .frm-dropdown-menu.frm_code_list > li > a {
7657 padding: 3px 15px;
7658 width: 300px;
7659 }
7660
7661 #frm_edit_box_content_modal .frm-with-search, /* Temp. Add .frm-dropdown-menu in Views */
7662 .frm-dropdown-menu .frm-with-search {
7663 padding: var(--gap-xs) 10px 0;
7664 }
7665
7666 .frm-dropdown-menu .subsubsub {
7667 padding: 0 10px;
7668 }
7669
7670 .frm_grid_container {
7671 overflow: visible;
7672 }
7673
7674 .frm_code_list.frm_grid_container {
7675 grid-gap: 5px;
7676 }
7677
7678 .frm_code_list.frm_grid_container li {
7679 width: auto;
7680 margin: 0;
7681 }
7682
7683 .frm_code_list.frm_grid_container a {
7684 padding: 5px 0;
7685 text-align: center;
7686 background-color: var(--light-blue);
7687 border: 1px solid var(--primary-500);
7688 color: var(--primary-500);
7689 display: block;
7690 border-radius: var(--small-radius);
7691 }
7692
7693 .frm_code_list.frm_grid_container a:hover {
7694 background-color: var(--primary-700);
7695 color: #fff;
7696 }
7697
7698 .frm_field_list #frm-insert-fields .button a {
7699 display: block;
7700 max-width: 95%;
7701 overflow: hidden;
7702 }
7703
7704 .field_type_list.frm_grid_container {
7705 gap: var(--gap-xs) var(--gap-sm);
7706 margin: var(--gap-xs);
7707 }
7708
7709 .field_type_list li {
7710 margin: 0;
7711 padding: 0;
7712 }
7713
7714 #frm-insert-fields .frm-search {
7715 float: none;
7716 margin: 15px 20px;
7717 width: auto;
7718 }
7719
7720 #frm-insert-fields li,
7721 #frm-insert-fields li a {
7722 text-decoration: none;
7723 font-weight: normal;
7724 font-size: var(--text-md) !important;
7725 color: var(--grey-900);
7726 }
7727
7728 #frm-insert-fields li.frm_show_upgrade {
7729 cursor: pointer;
7730 opacity: .5;
7731 }
7732
7733 #frm-insert-fields li a span {
7734 vertical-align: middle;
7735 }
7736
7737 .frmbutton.ui-draggable-dragging a,
7738 #frm-insert-fields li a:not(.disabled):hover {
7739 background: var(--grey-100);
7740 }
7741
7742 #frm-insert-fields li a.disabled:hover {
7743 cursor: not-allowed;
7744 }
7745
7746 #frm-insert-fields li.ui-draggable-disabled {
7747 opacity: 0.5;
7748 }
7749
7750 .frm_code_list {
7751 clear: both;
7752 }
7753
7754 .frm_code_list.frm-full-hover a.frm_hidden,
7755 .frm_code_list .frmkeys {
7756 display: none;
7757 }
7758
7759 .frmsvg {
7760 fill: currentColor;
7761 width: 18px;
7762 height: 18px;
7763 vertical-align: middle;
7764 }
7765
7766 input[disabled],
7767 .frmsvg svg {
7768 pointer-events: none;
7769 }
7770
7771 .frmsvg.frm_svg20 {
7772 width: 20px;
7773 height: 20px;
7774 }
7775
7776 .frmsvg.frm_svg15 {
7777 width: 15px;
7778 height: 15px;
7779 }
7780
7781 .frmsvg.frm_svg14 {
7782 width: 14px;
7783 height: 14px;
7784 }
7785
7786 .frmsvg.frm_svg13 {
7787 width: 13px;
7788 height: 13px;
7789 }
7790
7791 .frmbutton.ui-sortable-helper .frmsvg,
7792 .field_type_list li.frmbutton .frmsvg,
7793 .frmbutton.ui-sortable-helper i,
7794 .field_type_list li.frmbutton i,
7795 .frm_code_list a .frmsvg,
7796 .frm_code_list a i {
7797 color: var(--grey-500);
7798 display: inline-block;
7799 vertical-align: middle;
7800 width: var(--text-md);
7801 font-size: var(--text-md);
7802 }
7803
7804 /* Standardize icon size for field buttons in the builder */
7805 .field_type_list li.frmbutton .frmsvg {
7806 width: var(--text-xl);
7807 font-size: var(--text-xl);
7808 }
7809
7810 .frm_code_list i:before {
7811 font-size: inherit;
7812 }
7813
7814 #frm-insert-fields li a:not(.disabled):hover .frmsvg,
7815 #frm-insert-fields li a:not(.disabled):hover i {
7816 color: var(--grey-600);
7817 }
7818
7819 /* Icon while dragging */
7820 .frmbutton.ui-draggable-dragging {
7821 pointer-events: none;
7822 }
7823
7824 #frm-insert-fields li.frm_show_upgrade,
7825 #frm-insert-fields li a,
7826 .frmbutton.ui-draggable-dragging a {
7827 text-decoration: none;
7828 display: inline-flex !important;
7829 gap: var(--gap-xs);
7830 align-items: center;
7831 border-radius: var(--border-radius) !important;
7832 padding: var(--gap-xs) var(--gap-sm) !important;
7833 color: var(--grey-900) !important;
7834 }
7835
7836 /* Adjust field button size to full width in builder */
7837 #frm-insert-fields li a {
7838 display: flex !important;
7839 }
7840
7841 /* Prevents advanced fields from always appearing in search results */
7842 #frm-insert-fields li.frm_show_upgrade.frm_hidden {
7843 display: none !important;
7844 }
7845
7846 .frmbutton.ui-draggable-dragging a {
7847 border: 1px solid var(--grey-300);
7848 box-shadow: var(--box-shadow-md);
7849 }
7850
7851 .frmbutton.ui-draggable-dragging span {
7852 font-size: 15px;
7853 }
7854
7855 #frm-show-fields .frmbutton.ui-sortable-helper i,
7856 .frmbutton.ui-draggable-dragging i,
7857 .frmbutton.ui-draggable-dragging .frmsvg {
7858 color: #fff !important;
7859 }
7860
7861 .frmbutton.ui-draggable-dragging i,
7862 .frmbutton.ui-draggable-dragging .frmsvg {
7863 color: var(--grey-700) !important;
7864 }
7865
7866 .frm_sorting li.ui-state-default.ui-sortable-helper,
7867 .frmbutton.ui-sortable-helper {
7868 transition: opacity .2s;
7869 opacity: 1;
7870 }
7871
7872 /* End dragging */
7873
7874 li.frm_noallow.button,
7875 .frm_noallow {
7876 opacity: .5;
7877 }
7878
7879 .frm_actions_list a.frm_show_upgrade.frm_inactive_action:before,
7880 li.frm_noallow.button.frm_show_upgrade {
7881 cursor: pointer;
7882 }
7883
7884 .field_type_list li.frm_noallow.button.frm_show_upgrade:hover {
7885 border-color: inherit;
7886 }
7887
7888 .frm_noallow a {
7889 color: inherit;
7890 }
7891
7892 #frm_upgrade_modal_image {
7893 max-width: 200px;
7894 }
7895 #frm_upgrade_modal .frm-upgrade-message img {
7896 margin-top: 10px;
7897 width: 100%;
7898 }
7899 .frm-tab-message {
7900 max-width: 600px;
7901 margin: 20px auto;
7902 color: rgba(63, 75, 91, 0.8);
7903 }
7904
7905 .frm-settings-screenshot-toolbar {
7906 min-height: 39px;
7907 display: flex;
7908 }
7909
7910 .frm-settings-screenshot-toolbar .frm-minmax-icon {
7911 height: 8px;
7912 width: 8px;
7913 border-radius: 50%;
7914 align-self: center;
7915 margin-left: 10px;
7916 }
7917
7918 .frm-settings-screenshot-toolbar .frm-minmax-icon:first-of-type {
7919 margin-left: 20px;
7920 }
7921
7922 .frm-settings-screenshot-toolbar img {
7923 object-fit: contain;
7924 align-self: flex-end;
7925 margin-left: 25px;
7926 }
7927
7928 .frm-settings-screenshot-toolbar + div {
7929 background: #fff;
7930 padding-top: 25px;
7931 border-radius: 0 0 16px 16px;
7932 }
7933
7934 .frm-settings-screenshot-toolbar + div img {
7935 max-width: calc( 100% - 40px );
7936 }
7937
7938 .frm-settings-screenshot-wrapper {
7939 max-width: 700px;
7940 margin: 50px auto 0;
7941 box-shadow: 0px 4px 4px rgba(189, 196, 205, 0.25), 0px 12px 56px rgba(42, 57, 75, 0.25);
7942 border-radius: 16px;
7943 background: #EBECF1;
7944 }
7945
7946 .frm-dialog {
7947 z-index: 100;
7948 padding: 0 !important;
7949 border-radius: 16px;
7950 border: none;
7951 background-color: #fff;
7952 max-width: 100% !important;
7953 }
7954
7955 .frm-dialog .postbox {
7956 background: transparent;
7957 box-shadow: none;
7958 border: none;
7959 line-height: var(--leading);
7960 }
7961
7962 .frm-dialog input[type=text],
7963 .frm-dialog textarea {
7964 font-size: var(--text-md);
7965 }
7966
7967 .frm-dialog textarea {
7968 height: 75px;
7969 }
7970
7971 .frm-dialog button.frm-button-primary {
7972 margin-right: 10px;
7973 }
7974
7975 .frm-dialog .frm-sub-label,
7976 .frm-sub-label {
7977 color: var(--grey);
7978 text-transform: none;
7979 padding-left: 8px;
7980 }
7981
7982 h2 .frm-sub-label {
7983 font-size: var(--text-md);
7984 }
7985
7986 .frm-views-editor-body .ui-widget-overlay,
7987 .frm-white-body .ui-widget-overlay,
7988 .toplevel_page_formidable .ui-widget-overlay,
7989 body[class*=formidable-payments] .ui-widget-overlay {
7990 position: fixed;
7991 width: 100%;
7992 height: 100%;
7993 top: 0;
7994 left: 0;
7995 right: 0;
7996 bottom: 0;
7997 background: var(--grey-500);
7998 opacity: .5;
7999 z-index: 2;
8000 }
8001
8002 .frm-circled-icon {
8003 width: 60px;
8004 height: 60px;
8005 border-radius: 50%;
8006 background-color: var(--primary-25);
8007 }
8008
8009 .frm-circled-icon-large {
8010 width: 80px;
8011 height: 80px;
8012 }
8013
8014 .frm-circled-icon-green {
8015 background-color: var(--success-50);
8016 }
8017
8018 .frm-circled-icon .frmsvg {
8019 width: 21px;
8020 height: 24px;
8021 }
8022
8023 .frm-circled-icon-large .frmsvg {
8024 width: 24px;
8025 }
8026
8027 .frm-circled-icon .frmsvg use {
8028 color: var(--primary-500);
8029 }
8030
8031 .frm-circled-icon-green .frmsvg use {
8032 color: var(--success-500);
8033 }
8034
8035 .frm-upgrade-message img {
8036 max-width: 100%;
8037 }
8038
8039 a.frm-link-secondary {
8040 color: #c4c4c4;
8041 font-size: var(--text-sm);
8042 text-decoration: underline;
8043 }
8044
8045 .field_type_list li.button.frm_noallow,
8046 .field_type_list li.button.frm_noallow:hover,
8047 .button.frm_noallow,
8048 .button.frm_noallow:hover {
8049 color: inherit;
8050 border-color: #ccc;
8051 background: inherit;
8052 }
8053
8054 iframe#dyncontent_ifr {
8055 min-height: 150px;
8056 }
8057
8058 /*!
8059 * Bootstrap v4.6.1
8060 */
8061
8062 .tooltip {
8063 /* Copied from Bootstrap */
8064 position: absolute;
8065 display: block;
8066 margin: 0;
8067 font-style: normal;
8068 font-weight: 400;
8069 line-height: 1.5;
8070 text-align: left;
8071 text-align: start;
8072 text-decoration: none;
8073 text-shadow: none;
8074 text-transform: none;
8075 letter-spacing: normal;
8076 word-break: normal;
8077 word-spacing: normal;
8078 white-space: normal;
8079 line-break: auto;
8080 font-size: 0.875rem;
8081 word-wrap: break-word;
8082 opacity: 0;
8083
8084 /* Custom rules */
8085 z-index: 9999999;
8086 pointer-events: none;
8087 }
8088
8089 .tooltip.show {
8090 opacity: 0.9;
8091 }
8092
8093 .tooltip .arrow {
8094 position: absolute;
8095 display: block;
8096 width: 0.8rem;
8097 height: 0.4rem;
8098 margin-left: 0 !important;
8099 }
8100
8101 .tooltip .arrow::before {
8102 position: absolute;
8103 content: "";
8104 border-color: transparent;
8105 border-style: solid;
8106 }
8107
8108 .bs-tooltip-top, .bs-tooltip-auto[x-placement^="top"] {
8109 padding: 0.4rem 0;
8110 }
8111
8112 .bs-tooltip-top .arrow, .bs-tooltip-auto[x-placement^="top"] .arrow {
8113 bottom: 0;
8114 }
8115
8116 .bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before {
8117 top: 0;
8118 border-width: 0.4rem 0.4rem 0;
8119 border-top-color: #000;
8120 }
8121
8122 .bs-tooltip-right, .bs-tooltip-auto[x-placement^="right"] {
8123 padding: 0 0.4rem;
8124 }
8125
8126 .bs-tooltip-right .arrow, .bs-tooltip-auto[x-placement^="right"] .arrow {
8127 left: 0;
8128 width: 0.4rem;
8129 height: 0.8rem;
8130 }
8131
8132 .bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before {
8133 right: 0;
8134 border-width: 0.4rem 0.4rem 0.4rem 0;
8135 border-right-color: #000;
8136 }
8137
8138 .bs-tooltip-bottom, .bs-tooltip-auto[x-placement^="bottom"] {
8139 padding: 0.4rem 0;
8140 }
8141
8142 .bs-tooltip-bottom .arrow, .bs-tooltip-auto[x-placement^="bottom"] .arrow {
8143 top: 0;
8144 }
8145
8146 .bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
8147 bottom: 0;
8148 border-width: 0 0.4rem 0.4rem;
8149 border-bottom-color: #000;
8150 }
8151
8152 .bs-tooltip-left, .bs-tooltip-auto[x-placement^="left"] {
8153 padding: 0 0.4rem;
8154 }
8155
8156 .bs-tooltip-left .arrow, .bs-tooltip-auto[x-placement^="left"] .arrow {
8157 right: 0;
8158 width: 0.4rem;
8159 height: 0.8rem;
8160 }
8161
8162 .bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before {
8163 left: 0;
8164 border-width: 0.4rem 0 0.4rem 0.4rem;
8165 border-left-color: #000;
8166 }
8167
8168 .tooltip-inner {
8169 max-width: 200px;
8170 padding: 0.25rem 0.5rem;
8171 color: #fff;
8172 text-align: center;
8173 background-color: #000;
8174 border-radius: 0.25rem;
8175 }
8176
8177 .frm-dropdown-menu.show {
8178 display: block;
8179 }
8180
8181 /* End Bootstrap */
8182
8183 .preview.dropdown .dropdown-menu {
8184 min-width: 205px;
8185 }
8186
8187 .frm_clear {
8188 clear: both;
8189 }
8190
8191 .frm_clearfix:after {
8192 content: ".";
8193 display: block;
8194 clear: both;
8195 visibility: hidden;
8196 line-height: 0;
8197 height: 0;
8198 }
8199
8200 .frm_clearfix {
8201 display: block;
8202 }
8203
8204 .frm_admin_progress {
8205 overflow: hidden;
8206 height: 20px;
8207 margin-bottom: 20px;
8208 background-color: #f5f5f5;
8209 border-radius: 4px;
8210 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
8211 }
8212
8213 .frm_admin_progress_bar {
8214 float: left;
8215 width: 0;
8216 height: 100%;
8217 font-size: 12px;
8218 line-height: 20px;
8219 color: #ffffff;
8220 text-align: center;
8221 box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
8222 transition: width 0.6s ease;
8223 background-color: #04A4CC;
8224 }
8225
8226 .tooltip.frm_tooltip {
8227 position: fixed;
8228 top: auto !important;
8229 bottom: 0 !important;
8230 left: 0 !important;
8231 max-width: none;
8232 width: 100% !important;
8233 z-index: 99999;
8234 }
8235
8236 .tooltip.frm_tooltip.bottom {
8237 padding: 0;
8238 }
8239
8240 .frm_tooltip .tooltip-inner {
8241 max-width: none;
8242 min-height: 40px !important;
8243 text-align: left;
8244 box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.5);
8245 padding: 10px 40px;
8246 border-top-color: #ccc;
8247 background: var(--sidebar-color);
8248 color: var(--grey-700);
8249 border-radius: 0;
8250 opacity: 1;
8251 font-size: var(--text-sm);
8252 }
8253
8254 #frm_custom_css_box {
8255 width: 100%;
8256 }
8257
8258 /*form inputs/selects */
8259 .frm_form_field.frm_scroll_box .frm_opt_container,
8260 .frm-white-body .wrap input[type="text"], /* Cover Views pages */
8261 .frm-white-body .wrap input[type="search"],
8262 .frm-white-body .wrap input[type="number"],
8263 .frm-white-body .wrap select,
8264 #frm-form-templates-modal select,
8265 .frm-white-body .wrap textarea,
8266 button.frm_choose_image_box,
8267 #titlediv input[type="text"],
8268 .frm-fields button.btn,
8269 .frm_wrap textarea,
8270 .frm_wrap input[type="tel"],
8271 .frm_wrap input[type="text"],
8272 .frm_wrap input[type="email"]
8273 .frm_wrap input[type=search],
8274 .frm_wrap input[type="number"],
8275 .frm_wrap input[type="date"],
8276 .frm_wrap select,
8277 .wp-admin .frm_wrap select,
8278 .field-group textarea,
8279 .field-group input[type="text"],
8280 .field-group select,
8281 .frm-fields .frm-input-field {
8282 outline: 0;
8283 box-shadow: none;
8284 border-radius: var(--small-radius);
8285 padding: 5px 14px;
8286 border-color: var(--grey-300);
8287 color: var(--grey-800);
8288 font-size: var(--text-md);
8289 margin: 0;
8290 background-color: #fff;
8291 line-height: var(--leading);
8292 }
8293
8294 .frm_wrap ::-webkit-datetime-edit {
8295 line-height: var(--leading);
8296 }
8297
8298 .frm-white-body textarea:focus,
8299 .frm-white-body input:focus,
8300 .frm-white-body select:focus,
8301 .frm_wrap input:focus,
8302 .frm_wrap select:focus,
8303 .wp-core-ui .frm_wrap select:focus,
8304 #frm-form-templates-modal select:focus,
8305 .frm-btn-group .multiselect.dropdown-toggle:focus,
8306 .frm_wrap textarea:focus {
8307 border-color: var(--primary-500) !important;
8308 box-shadow: none !important;
8309 }
8310
8311 #postbox-container-2 textarea,
8312 .frm_wrap textarea,
8313 .field-group textarea {
8314 line-height: 2;
8315 }
8316
8317 .frm_wrap input[type="number"] {
8318 height: auto;
8319 }
8320
8321 .frm_wrap select {
8322 padding: 2px;
8323 }
8324
8325 .wp-admin .frm_wrap select,
8326 #frm-form-templates-modal select {
8327 max-width: 100%;
8328 }
8329
8330 .frm_form_field.frm_scroll_box .frm_opt_container {
8331 padding: 10px 12px;
8332 }
8333
8334 .frm_wrap input[disabled],
8335 .frm_wrap select[disabled],
8336 .frm_wrap textarea[disabled],
8337 .frm_wrap input[readonly],
8338 .frm_wrap select[readonly],
8339 .frm_wrap textarea[readonly],
8340 .frm_wrap input::placeholder {
8341 color: var(--grey-500);
8342 }
8343
8344 .frm_wrap .frm-button-primary.frm-disabled {
8345 opacity: 0.5;
8346 cursor: default;
8347 }
8348
8349 #postcustomstuff table td > div {
8350 /* To override some inline css in add-on */
8351 padding-top: 0 !important;
8352 }
8353
8354 .wp-admin .frm_wrap .form-table select {
8355 vertical-align: top;
8356 }
8357
8358 .frm_wrap .frm_form_builder select {
8359 line-height: var(--leading);
8360 height: var(--text-md);
8361 width: 100%;
8362 }
8363
8364 #postbox-container-2 select,
8365 .wp-admin .frm_wrap select,
8366 .frm_wrap .frm_form_builder select,
8367 #frm-form-templates-modal select {
8368 height: auto;
8369 background-position: right 11px top 55%;
8370 }
8371
8372 .frm-white-body .tablenav select,
8373 .frm-white-body .tablenav input[type="text"],
8374 .wp-admin .frm_wrap .tablenav select,
8375 .frm_wrap .tablenav input[type="date"],
8376 .frm_wrap .tablenav input[type="text"] {
8377 padding-top: 0;
8378 padding-bottom: 0;
8379 line-height: 1;
8380 }
8381
8382 .frm_wrap .tablenav ::-webkit-datetime-edit {
8383 line-height: 1;
8384 }
8385
8386 .frm-fields button.btn,
8387 .frm-fields textarea,
8388 .frm-fields input[type="text"],
8389 .frm-fields select,
8390 .field-group textarea,
8391 .field-group input[type="text"],
8392 .field-group select,
8393 .accordion-container input.hex,
8394 .frm-fields .frm-input-field {
8395 width: 100%;
8396 outline: 0;
8397 }
8398
8399 .frm-fields button.btn {
8400 height: var(--h-md);
8401 text-align: inherit;
8402 }
8403
8404 .global-font .field-group input[type="text"] {
8405 width: auto;
8406 }
8407
8408 /* Image Options */
8409
8410 .frm_images_dropdown .frm_image_option {
8411 margin: 0 !important;
8412 }
8413
8414 .frm_images_dropdown .frm_radio input[type=radio] {
8415 opacity: 0;
8416 position: absolute;
8417 z-index: -1;
8418 }
8419
8420 .frm_images_dropdown__image .frmsvg {
8421 width: 100%;
8422 max-width: 102px;
8423 fill: none;
8424 margin: 0;
8425 }
8426
8427 .frm_images_dropdown .frm_noallow .frm_image_option_container {
8428 opacity: .5;
8429 }
8430
8431 .frm_images_dropdown .frm_image_option_container {
8432 border-radius: var(--small-radius);
8433 border: 2px solid transparent;
8434 align-items: center;
8435 }
8436
8437 .frm_images_dropdown .frm_image_option_container:hover {
8438 background: #fff !important;
8439 }
8440
8441 .frm_images_dropdown input[type="radio"]:checked + .frm_image_option_container {
8442 background: #fff !important;
8443 border-color: var(--primary-500);
8444 }
8445
8446 .frm_images_dropdown .frm_text_label_for_image {
8447 padding: 0;
8448 text-align: left;
8449 }
8450
8451 /* End Image Options */
8452
8453 /* Welcome page */
8454
8455 .wp-core-ui .frm_grey.frm-button-primary.disabled,
8456 .wp-core-ui .frm_grey.frm-button-primary,
8457 #frm-welcome .frm_grey {
8458 opacity: 0.5;
8459 background: #F6F6F6 !important;
8460 border-color: #ddd !important;
8461 color: #9FA5AA !important;
8462 }
8463
8464 /* Chrome Scrollbars for Windows */
8465 .windows::-webkit-scrollbar,
8466 .windows ::-webkit-scrollbar {
8467 width: 7px;
8468 background: transparent;
8469 }
8470
8471 .windows::-webkit-scrollbar-thumb,
8472 .windows ::-webkit-scrollbar-thumb {
8473 background: var(--grey-300);
8474 -webkit-border-radius: var(--border-radius);
8475 -webkit-box-shadow: none;
8476 }
8477
8478 .windows::-webkit-scrollbar-corner,
8479 .windows ::-webkit-scrollbar-corner {
8480 background: transparent;
8481 }
8482
8483 .frm-scrollbar-wrapper {
8484 overflow-x: hidden;
8485 overflow-y: auto; /* Enable scrolling */
8486 -ms-overflow-style: none; /* For IE and Edge */
8487 scrollbar-color: transparent transparent; /* Firefox Scrollbar - transparent by default and show on hover */
8488 scrollbar-width: thin;
8489 }
8490
8491 .frm-scrollbar-wrapper:hover {
8492 scrollbar-color: var(--grey-300) var(--sidebar-color); /* Firefox Scrollbar - Show on hover */
8493 }
8494
8495 .frm-scrollbar-wrapper::-webkit-scrollbar {
8496 width: 3px;
8497 }
8498
8499 .frm-scrollbar-wrapper::-webkit-scrollbar-track {
8500 background: var(--sidebar-color);
8501 }
8502
8503 .frm-scrollbar-wrapper::-webkit-scrollbar-thumb {
8504 background: transparent;
8505 border-radius: 100vw;
8506 }
8507
8508 .frm-scrollbar-wrapper:hover::-webkit-scrollbar-thumb {
8509 background: var(--grey-300); /* Show scrollbar on hover */
8510 }
8511
8512 .frm-scrollbar-wrapper::-webkit-scrollbar-thumb:hover {
8513 background: var(--grey-400); /* Show scrollbar on hover */
8514 }
8515 /* End scrollbar */
8516
8517 /* RTL */
8518 .rtl h3 {
8519 font-weight: inherit !important;
8520 }
8521
8522 .rtl.js .accordion-section-title:after {
8523 left: 10px;
8524 right: auto;
8525 }
8526
8527 .rtl #frm_top_bar #frm_bs_dropdown {
8528 padding-left: 15px;
8529 }
8530
8531 .rtl .frm-full-close,
8532 .rtl .frm_wrap .columns-2 .frm-right-panel,
8533 .rtl .frm-right-panel {
8534 border-right-width: 1px;
8535 border-left-width: 0;
8536 }
8537
8538 .rtl .frm-full-close {
8539 padding-left: 0;
8540 padding-right: var(--gap-md);
8541 }
8542
8543 .rtl .frm-text-right {
8544 text-align: left;
8545 }
8546
8547 .rtl .frm_wrap #frm_adv_info ul.category-tabs li:first-child {
8548 border-left-width: 1px;
8549 }
8550
8551 .rtl .frm-dropdown-menu {
8552 text-align: right;
8553 }
8554
8555 .rtl .frm_actions_dropdown .frm_icon_font {
8556 float: right;
8557 margin-right: 0;
8558 margin-left: 3px;
8559 }
8560
8561 .rtl #frm-insert-fields-box,
8562 .rtl #frm-conditionals {
8563 padding-right: .9em;
8564 }
8565
8566 .rtl #html_settings .frm_field_html_box {
8567 margin-right: 0;
8568 }
8569
8570 .rtl .frm_list_entry_page h2 {
8571 float: right;
8572 }
8573
8574 .rtl .frm_scale {
8575 float: right;
8576 margin-left: 10px;
8577 margin-right: 0;
8578 }
8579
8580 .rtl .frm-page-break .frm-collapse-page.button {
8581 margin-left: 0;
8582 margin-right: 46%;
8583 }
8584
8585 .rtl .frm-field-action-icons {
8586 right: unset;
8587 left: 2px;
8588 }
8589
8590 .rtl .frm_has_shortcodes > i {
8591 right: auto;
8592 left: 5px;
8593 }
8594
8595 .rtl p.frm_reply_to_container,
8596 .rtl p.frm_bcc_cc_container {
8597 float: left;
8598 }
8599
8600 .rtl .frm-default-switcher {
8601 float: left;
8602 position: relative;
8603 }
8604
8605 .rtl .frm-with-right-icon .frmsvg {
8606 right: auto;
8607 left: 0;
8608 }
8609
8610 .rtl .frm-inline-modal > a.dismiss {
8611 left: 13px;
8612 right: auto;
8613 }
8614
8615 .rtl.wp-admin .frm_wrap select {
8616 padding-left: var(--gap-lg) !important;
8617 padding-right: 5px !important;
8618 background-position: left 11px top 55%;
8619 }
8620
8621 .rtl .frm_code_list.frm-full-hover a span {
8622 margin-left: var(--gap-xs);
8623 }
8624
8625 /* ---------------------------------------------------------------
8626 Clearfix
8627 --------------------------------------------------------------- */
8628 span.clear {
8629 display: block;
8630 }
8631
8632 .clearfix:after {
8633 content: ".";
8634 display: block;
8635 height: 0;
8636 clear: both;
8637 visibility: hidden;
8638 }
8639
8640 .clearfix {
8641 display: inline-block;
8642 }
8643
8644 /*Override styling from other plugins*/
8645 .frm_form_fields .clear {
8646 height: auto;
8647 }
8648
8649 /* Hides from IE-mac \*/
8650 * html .clearfix {
8651 height: 1%;
8652 }
8653
8654 .clearfix {
8655 display: block;
8656 }
8657
8658 /* End hide from IE-mac */
8659
8660 /*-----------------------------------------------------------------
8661 Responsive Design
8662 ---------------------------------------------------------------- */
8663
8664 @media only screen and (max-width: 1200px) {
8665 .frm-addons {
8666 grid-template-columns: 1fr 1fr;
8667 }
8668 }
8669
8670 @media only screen and (max-width: 1050px) {
8671 .frm-white-body,
8672 .frm_wrap {
8673 --biggest-sidebar: 390px;
8674 }
8675
8676 #form_settings_page .columns-2 {
8677 margin: 0;
8678 }
8679
8680 .frm_actions_list {
8681 margin-left: 0;
8682 }
8683 }
8684
8685 @media only screen and (max-width: 960px) {
8686 .frm-white-body,
8687 .frm_wrap {
8688 --gap-sm: 8px;
8689 --gap-md: 16px;
8690 --gap-2xl: 24px;
8691 }
8692
8693 .auto-fold #adminmenuwrap {
8694 width: 36px;
8695 }
8696
8697 .frm_wrap #postbox-container-1 #frm_adv_info {
8698 min-width: 220px;
8699 }
8700
8701 p.howto {
8702 display: inline-block;
8703 }
8704
8705 /* Fix: Issue where the admin page content had extra white space to the left on small screens */
8706 .auto-fold.frm-admin-page-styles:not(.frm-full-screen) .frm_page_container,
8707 .auto-fold:not(.frm-full-screen) .frm_wrap .frm_page_container {
8708 left: 36px;
8709 }
8710 }
8711
8712 @media only screen and (max-width: 850px) {
8713 #frm_bs_dropdown {
8714 /* There isn't enough room for the title on a screen this size so just hide it. */
8715 display: none;
8716 }
8717
8718 .frm-white-body,
8719 .frm_wrap {
8720 --biggest-sidebar: 350px;
8721 --big-sidebar: 350px;
8722 }
8723
8724 #frm_bs_dropdown .frm_bstooltip {
8725 /* There isn't enough room for the title on a screen this size so just hide it. */
8726 display: none !important;
8727 }
8728
8729 .frm_col_one {
8730 clear: none;
8731 }
8732
8733 .frm-fields p > .frm_inline_label,
8734 .frm_inline_label {
8735 display: block;
8736 margin: 5px 0;
8737 }
8738
8739 #frm_top_bar h1 {
8740 width: auto;
8741 max-width: 200px;
8742 }
8743
8744 #frm-publishing {
8745 width: auto;
8746 }
8747
8748 #frm_form_editor_container,
8749 .frm-entry-container {
8750 margin: 0 20px;
8751 }
8752
8753 .frmbutton.ui-sortable-helper .frmsvg,
8754 .field_type_list li.frmbutton .frmsvg,
8755 .frmbutton.ui-sortable-helper i,
8756 .field_type_list li.frmbutton i {
8757 margin: .15em 0 .15em .1em;
8758 width: 25px;
8759 }
8760
8761 .rtl .frmbutton.ui-sortable-helper .frmsvg,
8762 .rtl .field_type_list li.frmbutton .frmsvg,
8763 .rtl .frmbutton.ui-sortable-helper i,
8764 .rtl .field_type_list li.frmbutton i {
8765 margin: .15em .1em .15em 0;
8766 }
8767
8768 .frm_wrap .frm-search {
8769 float: none !important;
8770 width: auto;
8771 clear: both;
8772 }
8773
8774 .post-type-frm_display #frm_adv_info {
8775 top: auto !important;
8776 position: static;
8777 width: auto;
8778 }
8779
8780 .frm_wrap .frm-right-panel #frm_adv_info,
8781 .frm_wrap #postbox-container-1 #frm_adv_info {
8782 min-width: 275px;
8783 }
8784
8785 .frm_wrap #frm_adv_info ul.category-tabs li,
8786 .frm_wrap #frm_adv_info ul.category-tabs li.tabs {
8787 border: none;
8788 }
8789
8790 .frm_wrap #frm_adv_info ul.category-tabs li:first-child {
8791 margin-left: 12px;
8792 }
8793
8794 .frm_wrap #frm_adv_info ul.category-tabs li.tabs {
8795 border-bottom: 2px solid #5b9dd9;
8796 padding-bottom: 8px;
8797 }
8798
8799 .post-type-frm_display #poststuff {
8800 padding: 10px 25px;
8801 }
8802
8803 .post-type-frm_display #side-sortables .postbox {
8804 margin-bottom: 20px;
8805 border-radius: var(--small-radius);
8806 border-top-width: 1px;
8807 }
8808 }
8809
8810 @media only screen and (max-width: 782px) {
8811 .frm-white-body,
8812 .frm_wrap {
8813 --small-sidebar: 20%;
8814 --medium-sidebar: 35%
8815 }
8816
8817 #form_settings_page .advanced_settings .form-table td, .form-table th {
8818 display: table-cell;
8819 width: auto !important;
8820 }
8821
8822 .frm-white-body #publishing-action,
8823 .frm_wrap #publishing-action {
8824 line-height: normal;
8825 }
8826
8827 .frm-white-body #screen-meta-links {
8828 display: none;
8829 }
8830
8831 .frm_wrap .misc-pub-section {
8832 padding: 6px 0;
8833 }
8834
8835 .frm_wrap .misc-pub-section > a {
8836 float: none;
8837 white-space: nowrap;
8838 }
8839
8840 .frm-form-setting-tabs a {
8841 position: relative;
8842 padding: 10px 5px 10px 40px;
8843 }
8844
8845 .frm-form-setting-tabs a .frmsvg,
8846 .frm-form-setting-tabs a i {
8847 position: absolute;
8848 left: 13px;
8849 top: calc(50% - 10px);
8850 margin: 0;
8851 }
8852
8853 #frm-insert-fields .button,
8854 #frm-insert-fields .button a,
8855 .frmbutton.ui-sortable-helper a {
8856 line-height: 26px;
8857 max-height: 28px;
8858 }
8859
8860 a.frm_add_logic_link {
8861 margin-left: 0;
8862 margin-right: 0;
8863 width: 100%;
8864 box-sizing: border-box;
8865 }
8866
8867 a.frm_add_logic_link .frmsvg,
8868 a.frm_add_logic_link i {
8869 display: none;
8870 }
8871
8872 #new_fields .frm_single_option select,
8873 #new_fields .frm_single_option input[type=text] {
8874 width: calc(100% - 83px);
8875 }
8876
8877 .frm_single_entry_page .frm_form_fields input[type=text],
8878 .frm_single_entry_page .frm_form_fields select,
8879 .frm_single_entry_page .frm_form_fields textarea {
8880 width: 100%;
8881 }
8882
8883 .with_frm_style .frm_radio input[type=radio],
8884 .with_frm_style .frm_checkbox input[type=checkbox] {
8885 width: 25px !important;
8886 }
8887
8888 .frm_single_entry_page .with_frm_style .frm_radio input[type=radio],
8889 .frm_single_entry_page .with_frm_style .frm_checkbox input[type=checkbox] {
8890 width: 18px !important;
8891 }
8892
8893 .wp-list-table.toplevel_page_formidable .column-entries,
8894 .wp-list-table.toplevel_page_formidable .column-form_key,
8895 .wp-list-table.toplevel_page_formidable .column-shortcode,
8896 .wp-list-table.toplevel_page_formidable .column-created_at {
8897 display: none !important;
8898 }
8899
8900 .wp-list-table.toplevel_page_formidable td.column-entries,
8901 .wp-list-table.toplevel_page_formidable td.column-form_key,
8902 .wp-list-table.toplevel_page_formidable td.column-shortcode,
8903 .wp-list-table.toplevel_page_formidable td.column-created_at {
8904 padding: 3px 8px 3px 35%;
8905 text-align: left;
8906 }
8907
8908 #form_entries_page .wp-list-table th.frm_hidden,
8909 #form_entries_page .wp-list-table td.frm_hidden {
8910 display: none !important;
8911 }
8912
8913 .frm-white-body.auto-fold #wpcontent {
8914 padding-left: 0;
8915 }
8916
8917 .frm_right_addon .frm_remove_field {
8918 bottom: 11px;
8919 }
8920
8921 .frm-addons {
8922 grid-template-columns: 1fr;
8923 }
8924
8925 .frm-admin-page-styles .frm_page_container,
8926 .frm_wrap .frm_page_container {
8927 left: 0 !important;
8928 top: 46px !important;
8929 height: calc( 100vh - 46px ) !important;
8930 }
8931
8932 .frm_single_entry_page.frm_wrap .columns-2 {
8933 display: block;
8934 border-bottom: none;
8935 }
8936
8937 .frm_single_entry_page .wrap.frm-with-margin {
8938 margin: 10px 20px;
8939 }
8940
8941 .frm_single_entry_page #post-body-content + .frm-right-panel {
8942 width: auto;
8943 margin: 0 20px;
8944 border: 1px solid var(--sidebar-hover);
8945 border-radius: 6px;
8946 }
8947
8948 #wp-content-media-buttons a.frm_insert_form {
8949 padding: 0 var(--gap-sm);
8950 }
8951
8952 .frm-white-body input[type="checkbox"]:checked::before,
8953 .frm_wrap input[type="checkbox"]:checked::before {
8954 width: 1.2rem;
8955 height: 1.2rem;
8956 margin: 0.125rem;
8957 }
8958 }
8959
8960 @media only screen and (max-width: 700px) {
8961 .frm-white-body,
8962 .frm_wrap {
8963 --biggest-sidebar: 50%;
8964 --big-sidebar: 50%;
8965 }
8966 }
8967
8968 @media only screen and (max-width: 600px) {
8969 .frm-white-body,
8970 .frm_wrap {
8971 --small-sidebar: 45px;
8972 }
8973
8974 .frm-form-setting-tabs a {
8975 visibility: collapse;
8976 font-size: 0;
8977 padding: 0 var(--gap-sm);
8978 }
8979
8980 .frm-form-setting-tabs a .frmsvg,
8981 .frm-form-setting-tabs a i {
8982 visibility: visible;
8983 position: initial;
8984 font-size: 18px;
8985 }
8986
8987 #frm_builder_page #frm-insert-fields {
8988 padding: 0;
8989 }
8990
8991 .frm_wrap #frm_adv_info ul.category-tabs li {
8992 display: inline-block;
8993 padding: 0;
8994 margin: 2px 0;
8995 border-bottom: 2px solid transparent;
8996 }
8997
8998 .frm_wrap #frm_adv_info ul.category-tabs li.tabs,
8999 .frm_wrap #frm_adv_info ul.category-tabs li:first-child {
9000 margin-left: 0;
9001 padding: 0;
9002 }
9003
9004 .field_type_list li {
9005 text-align: center;
9006 }
9007
9008 #frm-insert-fields li a {
9009 padding: 5px;
9010 }
9011
9012 .frmbutton.ui-sortable-helper .frmsvg,
9013 .field_type_list li.frmbutton .frmsvg,
9014 .frmbutton.ui-sortable-helper i,
9015 .field_type_list li.frmbutton i {
9016 display: block;
9017 margin: 0 auto 3px;
9018 text-align: center;
9019 }
9020
9021 #frm_form_editor_container .frm_primary_label {
9022 clear: both;
9023 }
9024
9025 #frm_builder_page .frm_code_list a.button {
9026 padding: 2px;
9027 }
9028
9029 #frm_builder_page .frm_actions_dropdown > .frm-dropdown-menu {
9030 right: 0;
9031 left: auto;
9032 }
9033
9034 .frm-right-panel h3.accordion-section-title {
9035 padding-right: 10px;
9036 padding-left: 10px;
9037 font-size: 20px;
9038 white-space: nowrap;
9039 overflow: hidden;
9040 }
9041
9042 .frm-right-panel .accordion-section-title:before {
9043 margin-left: 0;
9044 margin-right: 3px;
9045 }
9046
9047 .rtl #frm_builder_page .frm_actions_dropdown > .frm-dropdown-menu {
9048 right: auto;
9049 left: 0;
9050 }
9051
9052 .frm_on_submit_type svg {
9053 display: none;
9054 }
9055 }
9056
9057 @media only screen and (max-width: 475px) {
9058 #frm_bs_dropdown {
9059 float: none;
9060 }
9061
9062 #frm-nav-tabs {
9063 padding: 0;
9064 white-space: nowrap;
9065 }
9066
9067 #frm-nav-tabs a {
9068 margin-right: 0;
9069 }
9070 }
9071
9072 /* Firefox */
9073 @-moz-document url-prefix() {
9074 .frm-white-body .tablenav select,
9075 .frm-white-body .tablenav input[type="text"],
9076 .wp-admin .frm_wrap .tablenav select,
9077 .frm_wrap .tablenav input[type="text"] {
9078 padding-top: 5px;
9079 }
9080 }
9081
9082 /* PRINT */
9083 @media print {
9084 a, .misc-pub-section a {
9085 color: #000 !important;
9086 }
9087
9088 .add-new-h2, #frm_top_bar, .dashicons,
9089 #adminmenuwrap, #adminmenuback, #wphead, #button_bar, #submitdiv, .button-secondary,
9090 #screen-metas, #screen-meta-links, #footer, #wpfooter, .inner-sidebar, .frm_form_nav,
9091 .frm_flash_graph, .frm_no_print, object, .error {
9092 visibility: hidden;
9093 display: none !important;
9094 }
9095
9096 .widget, .postbox, .stuffbox, .postbox h3 {
9097 border-width: 0 !important;
9098 border-color: #fff;
9099 }
9100
9101 .postbox {
9102 background: #fff !important;
9103 border: none;
9104 position: static;
9105 }
9106
9107 .postbox h3, .postbox h4 {
9108 background: #fff !important;
9109 }
9110
9111 #wpbody-content {
9112 float: none;
9113 }
9114
9115 #wpcontent, #post-body-content,
9116 .has-right-sidebar #post-body,
9117 #poststuff .columns-2 {
9118 margin: 0 !important;
9119 }
9120
9121 .frm_wrap #poststuff .columns-2 {
9122 display: block;
9123 }
9124
9125 #post-body-content + .frm-right-panel,
9126 .frm_wrap .columns-2 .frm-right-panel,
9127 .frm-right-panel {
9128 border: none;
9129 width: auto;
9130 display: block;
9131 padding: 20px;
9132 }
9133
9134 .frm_wrap .columns-2,
9135 .frm_wrap .frm_page_container {
9136 height: auto;
9137 display: block;
9138 }
9139
9140 .misc-pub-section > span {
9141 padding: 0;
9142 }
9143
9144 .frm-right-panel .postbox .inside {
9145 padding-left: 12px;
9146 padding-right: 12px;
9147 }
9148
9149 .curtime #timestamp:before {
9150 display: none;
9151 content: none !important;
9152 }
9153
9154 .frm_charts .alignleft {
9155 float: none;
9156 }
9157
9158 .pg_odd, .pg_even {
9159 page-break-inside: avoid;
9160 max-width: 600px;
9161 }
9162
9163 .form-table td, .form-table th {
9164 padding: 0;
9165 }
9166
9167 .frm_file_container a {
9168 display: block;
9169 width: 100%;
9170 }
9171 }
9172
9173 .frm-admin-page-styles #frm-publishing #save_menu_header,
9174 .frm-admin-page-styles2 #frm-publishing #save_menu_header {
9175 display: inline-block;
9176 }
9177
9178 /* Change the order of subfields of the Name field in the backend */
9179 .edit_form_item .frm_combo_inputs_container[data-name-layout="last_first"] .frm_form_subfield-first {
9180 order: 2;
9181 }
9182
9183 .frm-video-wrapper iframe {
9184 width: 100%;
9185 max-width: 843px;
9186 border-radius: var(--border-radius);
9187 }
9188
9189 #frm_field_group_popup {
9190 position: absolute;
9191 top: 0;
9192 right: 0;
9193 width: 366px;
9194 max-height: 231px;
9195 border-radius: 8px;
9196 background: #fff;
9197 box-shadow: 0px 20px 48px rgba(40, 47, 54, 0.15);
9198 z-index: 3;
9199 box-sizing: border-box;
9200 padding: 24px 0;
9201 text-align: left;
9202 }
9203
9204 .rtl #frm_field_group_popup {
9205 text-align: right;
9206 }
9207
9208 .frm-merge-fields-into-row #frm_field_group_popup {
9209 top: unset;
9210 bottom: 50px;
9211 height: 196px;
9212 }
9213
9214 #frm_field_group_popup > hr {
9215 margin: 12px 0;
9216 }
9217
9218 #frm_field_group_popup .frm-cancel-custom-field-group-layout,
9219 #frm_field_group_popup .frm-save-custom-field-group-layout {
9220 padding: 4px 18px;
9221 }
9222
9223 #frm_field_group_popup .frm-cancel-custom-field-group-layout:hover {
9224 border-color: var(--primary-500) !important;
9225 color: var(--primary-500);
9226 background-color: transparent !important;
9227 }
9228
9229 .frm-merge-fields-into-row #frm_field_group_popup .frm-break-field-group {
9230 display: none;
9231 }
9232
9233 .frm-merge-fields-into-row > a {
9234 color: rgba(40, 47, 54, 0.85);
9235 position: relative;
9236 top: 2px;
9237 }
9238
9239 .frm-row-layout-title {
9240 font-weight: 600;
9241 font-size: 11px;
9242 line-height: 15px;
9243 text-transform: uppercase;
9244 color: rgba(40, 47, 54, 0.45);
9245 margin-bottom: 27px;
9246 }
9247
9248 .frm-row-layout-option {
9249 background: #F6F7FB;
9250 box-sizing: border-box;
9251 border-radius: 2px;
9252 padding: 15px 10px;
9253 }
9254
9255 #frm_field_group_popup .frm-row-layout-option .frm_grid_container {
9256 grid-gap: 0 5%;
9257 grid-template-columns: repeat(12, auto);
9258 }
9259
9260 #frm_field_group_popup .frm-row-layout-option {
9261 cursor: pointer;
9262 border: 2px solid transparent;
9263 }
9264
9265 #frm_field_group_popup .frm-row-layout-option.frm-active-row-layout,
9266 #frm_field_group_popup .frm-row-layout-option:hover {
9267 border-color: var(--primary-500);
9268 }
9269
9270 .frm-custom-field-group-layout,
9271 .frm-break-field-group {
9272 padding: 4px 24px;
9273 cursor: pointer;
9274 font-size: var(--text-sm);
9275 line-height: 19px;
9276 color: rgba(72, 78, 84, 1);
9277 }
9278
9279 .frm-custom-field-group-layout:hover,
9280 .frm-break-field-group:hover {
9281 background-color: #f5f5f5f5;
9282 }
9283
9284 .frm-custom-field-group-layout svg,
9285 .frm-break-field-group svg {
9286 margin-right: 5px;
9287 }
9288
9289 #frm_field_multiselect_popup {
9290 background: white;
9291 height: 48px;
9292 position: fixed;
9293 border-radius: 4px;
9294 box-shadow: 0px 8px 24px rgba(40, 47, 54, 0.15);
9295 color: rgba(40, 47, 54, 0.85);
9296 font-size: 13px;
9297 right: 30px;
9298 bottom: 10px;
9299 }
9300
9301 #frm_field_multiselect_popup > div {
9302 display: inline-block;
9303 line-height: 48px;
9304 vertical-align: top;
9305 }
9306
9307 #frm_field_multiselect_popup.frm-unmergable > .frm-merge-fields-into-row,
9308 #frm_field_multiselect_popup.frm-unmergable > .frm-multiselect-popup-separator {
9309 display: none;
9310 }
9311
9312 #frm_field_multiselect_popup > div:not(.frm-multiselect-popup-separator) {
9313 padding: 0 20px;
9314 cursor: pointer;
9315 }
9316
9317 #frm_field_multiselect_popup > div:not(.frm-multiselect-popup-separator):hover {
9318 background: #f5f5f5f5;
9319 }
9320
9321 .frm-builder-popup-heading {
9322 font-weight: 600;
9323 font-size: 11px;
9324 line-height: 15px;
9325 text-transform: uppercase;
9326 color: rgba(40, 47, 54, 0.45);
9327 margin-bottom: 7px;
9328 }
9329
9330 .frm-builder-popup-subheading {
9331 font-size: 12px;
9332 line-height: 16px;
9333 color: rgba(40, 47, 54, 0.45);
9334 }
9335
9336 #frm_field_group_popup input[type="text"] {
9337 height: 30px;
9338 border-radius: 3px;
9339 font-size: 14px;
9340 padding: 8px;
9341 color: rgba(84, 95, 110, 1);
9342 border-color: rgba(40, 47, 54, 0.2);
9343 }
9344
9345 .frm-multiselect-popup-separator {
9346 height: 36px;
9347 width: 1px;
9348 position: relative;
9349 top: 6px;
9350 background: #C4C4C4;
9351 }
9352
9353 .frm-sortable-helper,
9354 .frm-multiselect-key-is-down li.form-field:not(.edit_field_type_divider) {
9355 pointer-events: none;
9356 }
9357
9358 .frm-sortable-helper {
9359 /* Make sure the item being dragged appears above other form builder fields */
9360 z-index: 99;
9361 }
9362
9363 #frm_banner {
9364 width: 100%;
9365 color: #fff;
9366 background: var(--primary-500);
9367 height: 40px;
9368 line-height: 40px;
9369 text-align: center;
9370 position: relative;
9371 }
9372
9373 .frm-banner-emoji {
9374 font-size: 19px;
9375 }
9376
9377 .frm-banner-emoji,
9378 .frm-banner-title {
9379 margin-right: 5px;
9380 vertical-align: top;
9381 }
9382
9383 .frm-banner-cta a {
9384 text-decoration: underline !important;
9385 }
9386
9387 #frm_banner .frm-banner-cta a.frm_inbox_dismiss {
9388 display: none;
9389 }
9390
9391 .frm-banner-dismiss {
9392 cursor: pointer;
9393 position: absolute;
9394 right: 10px;
9395 top: 50%;
9396 transform: translateY( -50% );
9397 }
9398
9399 .frm-banner-dismiss .frmsvg {
9400 vertical-align: top;
9401 }
9402
9403 .frm-ready-made-solution:not(.frm-search-result) {
9404 display: none !important;
9405 }
9406
9407 #frm_leave_email_wrapper .frmsvg {
9408 top: 0;
9409 }
9410
9411 #frm-add-my-email-address {
9412 margin-top: 30px;
9413 }
9414
9415 .frm-ready-made-solution h3 ~ a {
9416 color: var(--primary-500);
9417 }
9418
9419 .frm-ready-made-solution img {
9420 max-width: 100%;
9421 display: block;
9422 box-shadow: var(--box-shadow-lg);
9423 }
9424
9425 /* On Submit action */
9426 .frm_single_on_submit_settings .frm_form_field {
9427 margin: 8px 0;
9428 }
9429
9430 .frm_on_submit_type_setting {
9431 padding: 8px 0;
9432 }
9433
9434 .frm_on_submit_type label {
9435 display: flex;
9436 border: 1px solid var(--grey-border);
9437 border-radius: var(--small-radius);
9438 gap: 16px;
9439 padding: 16px;
9440 align-items: center;
9441 justify-content: center;
9442 }
9443
9444 .frm_on_submit_type input {
9445 opacity: 0 !important;
9446 position: absolute;
9447 z-index: -1;
9448 }
9449
9450 .frm_on_submit_type input[type="radio"]:checked + label {
9451 border-color: var(--primary-color);
9452 box-shadow: 0 0 0 1px var(--primary-color);
9453 }
9454
9455 #form_settings_page .frm_on_submit_type label:hover,
9456 .frm_on_submit_type input[type="radio"]:checked + label svg {
9457 color: var(--primary-color);
9458 }
9459 /* End On Submit action */
9460
9461 /* Start call-to-action */
9462 .frm_pro_tip,
9463 .frm-cta {
9464 justify-content: space-between;
9465 align-items: center;
9466 gap: var(--gap-2xl);
9467 padding: var(--gap-xs) var(--gap-sm);
9468 border-radius: var(--small-radius);
9469 background: var(--primary-25);
9470 }
9471
9472 .frm-cta.frm-cta-border {
9473 border: 1px solid var(--primary-200);
9474 }
9475
9476 .frm-cta h4 {
9477 font-weight: 600;
9478 margin: 0;
9479 }
9480
9481 .frm-cta-green {
9482 background-color: var(--success-25);
9483 }
9484
9485 .frm-cta-green .frm-banner-title {
9486 gap: calc(var(--gap-2xs) + 1px);
9487 color: var(--grey-700);
9488 }
9489
9490 .frm-cta-green.frm-cta-border {
9491 border-color: var(--success-100)
9492 }
9493
9494 .frm-right-panel .inside .frm_pro_tip,
9495 .frm_pro_tip {
9496 color: var(--grey-700);
9497 background: #FFE7DE;
9498 margin: 0 auto;
9499 display: flex;
9500 gap: var(--gap-xs);
9501 }
9502
9503 .frm_field_list .frm_pro_tip {
9504 margin: 10px 15px;
9505 position: relative;
9506 width: calc(100% - 30px);
9507 box-sizing: border-box;
9508 }
9509
9510 .frm_pro_tip .frmsvg,
9511 .frm_pro_tip i {
9512 color: var(--orange);
9513 }
9514
9515 .frm-tip-info {
9516 flex: 1;
9517 text-align: left;
9518 }
9519
9520 .frm-tip-cta {
9521 color: var(--orange);
9522 }
9523
9524 .frm-light-tip .frm_pro_tip {
9525 background: var(--primary-25);
9526 }
9527
9528 .frm-light-tip .frm_pro_tip .frmsvg,
9529 .frm-light-tip .frm_pro_tip i,
9530 .frm-light-tip .frm-tip-cta {
9531 color: var(--primary-500);
9532 }
9533
9534 .frm-tip-cta:hover {
9535 color: var(--primary-500);
9536 }
9537
9538 .nav-tab-wrapper .frm_pro_tip {
9539 float: right;
9540 }
9541 /* End call-to-action */
9542
9543 /* Start confirm and form templates modals */
9544 #frm-form-templates-modal textarea {
9545 height: 108px;
9546 }
9547
9548 #frm-form-templates-modal .frm-fields button.btn {
9549 border-color: var(--grey-300);
9550 color: var(--grey-900);
9551 cursor: pointer;
9552 }
9553
9554 #frm-form-templates-modal .frm-fields button.btn .frmsvg {
9555 color: var(--grey-400);
9556 width: 14px;
9557 height: 14px;
9558 }
9559
9560 #frm-form-templates-modal .frm-form-templates-modal-fieldset {
9561 position: relative;
9562 }
9563
9564 #frm-form-templates-modal .frm-form-templates-modal-fieldset .frm-with-left-icon .frmsvg {
9565 padding: 0;
9566 top: 0;
9567 left: 13px;
9568 }
9569
9570 /* Fixes pro issue #3508, prevent a conflict that hides the postbox in modal */
9571 #frm-form-templates-modal .postbox {
9572 display: block !important;
9573 }
9574
9575 /* Leave email modal */
9576 #frm_empty_inbox #frm-leave-email-modal {
9577 margin-top: var(--gap-2xl);
9578 }
9579
9580 /* Name your form modal */
9581 #frm-name-your-form-modal .frm_modal_top {
9582 padding-top: var(--gap-sm);
9583 }
9584 /* End confirm and form templates modals */
9585
9586 /* Field Group Message */
9587 #frm-field-group-message {
9588 position: absolute;
9589 bottom: 32px;
9590 right: calc(50% - var(--biggest-sidebar));
9591 padding: var(--gap-xs) var(--gap-sm);
9592 border-radius: 100px;
9593 background-color: var(--primary-25);
9594 }
9595
9596 #frm-field-group-message .frm-field-group-message-text {
9597 gap: 10px;
9598 color: var(--grey-800);
9599 }
9600
9601 #frm-field-group-message-dismiss {
9602 margin-left: var(--gap-xs)
9603 }
9604
9605 #frm-field-group-message-dismiss .frmsvg {
9606 color: var(--grey-800);
9607 width: 15px;
9608 height: 15px;
9609 cursor: pointer;
9610 transition: color 300ms ease-in-out;
9611 }
9612
9613 #frm-field-group-message-dismiss .frmsvg:hover {
9614 color: var(--grey-500);
9615 }
9616 /* End Field Group Message */
9617
9618 /* Start card layout */
9619 .frm-card-item {
9620 display: flex;
9621 border: 1px solid var(--grey-200);
9622 border-radius: var(--small-radius);
9623 padding: var(--gap-sm);
9624 box-shadow: var(--box-shadow-xs);
9625 background: #FFFFFF;
9626 }
9627 .frm-card-item:not(.frm-counter-card) {
9628 gap: 10px;
9629 }
9630 .frm-compact-card-item {
9631 padding: var(--gap-sm) 35px 10px 35px;
9632 }
9633 /* End card layout */
9634
9635 /* Pirate forms importer */
9636 #welcome-panel:has(#frm_form_pf_importer) {
9637 background-color: #fff;
9638 margin: var(--gap-sm) var(--gap-md) var(--gap-md);
9639 line-height: 2;
9640 }
9641
9642 #welcome-panel:has(#frm_form_pf_importer) .welcome-panel-content {
9643 text-align: start !important;
9644 min-height: unset;
9645 display: block;
9646 }
9647
9648 #frm_form_pf_importer div {
9649 margin: 10px 0 !important;
9650 }
9651
9652 #frm_form_pf_importer button {
9653 border: 1px solid var(--primary-500);
9654 padding: 7px 16px;
9655 min-height: 28px;
9656 line-height: var(--leading);
9657 margin-bottom: 0;
9658 background: var(--primary-500);
9659 color: #fff !important;
9660 }
9661
9662 #frm_form_pf_importer button:hover {
9663 background: #135e96;
9664 border-color: #135e96;
9665 }
9666 /* End Pirate forms importer */
9667
9668 /* Start Option Box */
9669 .frm-option-box {
9670 display: flex;
9671 justify-content: space-between;
9672 align-items: center;
9673 font-size: 14px;
9674 font-weight: 500;
9675 background-color: #fff;
9676 padding: 12px var(--gap-sm);
9677 border: 1px solid var(--grey-200);
9678 border-radius: var(--small-radius);
9679 margin-bottom: var(--gap-xs);
9680 transition: background-color 100ms ease-out;
9681 cursor: pointer;
9682 }
9683
9684 .frm-option-box:hover {
9685 background-color: var(--grey-25);
9686 }
9687
9688 .frm-option-box.frm-checked {
9689 background-color: var(--primary-25);
9690 border-color: var(--primary-200);
9691 }
9692
9693 .frm-option-box.frm-disabled {
9694 cursor: default;
9695 }
9696
9697 .frm-option-box input[type="checkbox"] {
9698 margin: 0;
9699 }
9700
9701 .frm-option-box.frm-disabled input[type="checkbox"] {
9702 opacity: 0.5;
9703 }
9704
9705 .frm-option-box .frm_help .frmsvg {
9706 width: 12px;
9707 height: 12px;
9708 }
9709 /* End Option Box */
9710
9711 /* Start Validation Error */
9712 .frm-validation-error:not(.frm_hidden) {
9713 display: flex;
9714 }
9715
9716 .frm-validation-error {
9717 gap: calc(var(--gap-xs) + var(--gap-2xs));
9718 }
9719
9720 .frm-validation-error span {
9721 color: var(--error-500);
9722 }
9723
9724 .frm-validation-error span[frm-error] {
9725 display: none;
9726 }
9727
9728 .frm-validation-error[frm-error="empty"] span[frm-error="empty"],
9729 .frm-validation-error[frm-error="invalid"] span[frm-error="invalid"],
9730 .frm-validation-error[frm-error="custom"] span[frm-error="custom"] {
9731 display: inline-block;
9732 }
9733
9734 /* Start Box Styles */
9735 .frm-box {
9736 padding: var(--gap-sm);
9737 border: 1px solid var(--grey-200);
9738 border-radius: var(--small-radius);
9739 }
9740 /* End Box Styles */
9741
9742 /* Start External Link Styles */
9743 .frm-link-with-external-icon {
9744 display: flex;
9745 align-items: center;
9746 gap: var(--gap-2xs);
9747 font-size: var(--text-xs);
9748 }
9749
9750 .frm-link-with-external-icon .frmsvg {
9751 width: 16px;
9752 height: 16px;
9753 transform: rotate(45deg);
9754 }
9755 /* End External Link Styles */
9756