PluginProbe
Formidable Forms – WordPress Form Builder for Contact Forms, Calculators, Quizzes & More / 6.9.1
Formidable Forms – WordPress Form Builder for Contact Forms, Calculators, Quizzes & More v6.9.1
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.9.1, at css/frm_admin.css

9,790 lines 184.9 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-featured-form .frm-inner-circle {
2591 margin: 0 auto 5px;
2592 }
2593
2594 .frm-new-template.plugin-card-bottom {
2595 overflow: visible;
2596 }
2597
2598 #frm-new-template p:first-child {
2599 margin-top: 0;
2600 }
2601
2602 .frm-admin-page-formidableedit #wpbody-content > *:not(.frm-review-notice):not(.frm_previous_install):not(.frm-banner-alert),
2603 #wpbody-content > .updated,
2604 #wpbody-content > #update-nag,
2605 #wpbody-content > .update-nag,
2606 #wpbody-content > .notice,
2607 #wpbody-content > .error:not(.frm_previous_install),
2608 .frm-white-body .updated,
2609 .frm-white-body .notice,
2610 .frm-white-body .error:not(.frm_previous_install)
2611 {
2612 display: none;
2613 }
2614
2615 .frm-admin-page-formidableedit #frm_builder_page {
2616 display: block !important;
2617 }
2618
2619 .frm-white-body .updated,
2620 .frm-white-body .error {
2621 margin: 0;
2622 padding: 10px 20px;
2623 }
2624
2625 .frm-modal .postbox {
2626 max-height: 600px;
2627 overflow: hidden;
2628 margin-bottom: 0;
2629 }
2630
2631 .frm-modal .postbox .frm_modal_top,
2632 .frm-dialog .frm_common_modal .postbox > div:first-child,
2633 .frm-error-modal .frm_modal_top {
2634 padding: var(--gap-md) var(--gap-md) 0;
2635 position: relative;
2636 }
2637
2638 .frm-modal h2,
2639 .frm-modal .postbox .inside h2, /* Override WP. */
2640 .frm-modal .postbox .frm-modal-title,
2641 .frm-dialog .frm_common_modal .postbox > div:first-child > div:first-child,
2642 .frm-error-modal .frm-modal-title {
2643 display: inline-block;
2644 font-size: var(--text-lg);
2645 color: var(--grey-900);
2646 font-weight: 600;
2647 margin: 0;
2648 padding: 0;
2649 }
2650
2651 .frm-modal h3 {
2652 font-weight: 500;
2653 }
2654
2655 /* Dismiss icon button */
2656
2657 .frm-inline-modal > a.dismiss,
2658 .frm-modal .postbox > a.dismiss,
2659 .frm-modal .postbox .frm-modal-title + div:last-child,
2660 .frm-dialog .frm_common_modal .postbox > div:first-child > div:last-child {
2661 position: absolute;
2662 top: 19px;
2663 right: 19px;
2664 display: flex;
2665 z-index: 2;
2666 }
2667
2668 body.rtl .frm-inline-modal > a.dismiss,
2669 body.rtl .frm-modal .postbox > a.dismiss,
2670 body.rtl .frm-modal .postbox .frm-modal-title + div:last-child,
2671 body.rtl .frm-dialog .frm_common_modal .postbox > div:first-child > div:last-child {
2672 right: unset;
2673 left: 30px;
2674 }
2675
2676 .frm-info-modal .postbox > a.dismiss,
2677 .frm-inline-modal > a.dismiss {
2678 right: 13px;
2679 top: 13px;
2680 }
2681
2682 .frm-modal .postbox .frm-modal-title + div:last-child a,
2683 .frm-modal a.dismiss .frmsvg,
2684 .frm_common_modal .frm_modal_top a .frmsvg {
2685 color: var(--grey-800);
2686 }
2687
2688 .frm-modal .frm_modal_content > div.inside,
2689 .frm_common_modal .frm_modal_content > div.inside {
2690 padding: var(--gap-md);
2691 margin: 0;
2692 font-size: var(--text-sm);
2693 color: var(--grey-700);
2694 }
2695
2696 .frm-modal p {
2697 color: var(--grey-900);
2698 }
2699
2700 .frm_common_modal .postbox {
2701 display: flex;
2702 flex-direction: column;
2703 }
2704
2705 .frm-modal .postbox > div.inside .cta-inside {
2706 overflow-y: auto;
2707 height: auto;
2708 }
2709
2710 .frm_modal_footer {
2711 padding: 0 var(--gap-md) var(--gap-sm);
2712 text-align: right;
2713 }
2714
2715 body.frm-body-with-open-modal {
2716 overflow-y: hidden;
2717 }
2718
2719 .frm-templates-list {
2720 margin-top: 0;
2721 }
2722
2723 .frm-templates-list.frm_grid_container li {
2724 margin-bottom: 0;
2725 }
2726
2727 .frm-templates-list li {
2728 vertical-align: top;
2729 position: relative;
2730 box-sizing: border-box;
2731 border-radius: 6px;
2732 border: 1px solid transparent;
2733 text-align: left;
2734 }
2735
2736 .frm-templates-list li:not(.frm_hidden) {
2737 display: inline-block;
2738 }
2739
2740 .frm-templates-list.frm-categories-list li {
2741 width: 100%;
2742 }
2743
2744 .frm-templates-list li.frm-selectable {
2745 cursor: pointer;
2746 }
2747
2748 .frm-templates-list li.frm-selectable:hover {
2749 background: var(--light-blue);
2750 border-color: rgba(65, 153, 253, 0.5);
2751 }
2752
2753 .frm-templates-list li.frm-selectable:hover h3,
2754 .frm-templates-list li.frm-selectable:hover p {
2755 max-width: calc( 100% - 65px );
2756 }
2757
2758 .frm-templates-list .frm-featured-form {
2759 display: flex;
2760 width: 100%;
2761 }
2762
2763 .frm-templates-list li .frm-featured-form {
2764 padding: 7px 5px;
2765 }
2766
2767 .frm-templates-list li li > div {
2768 padding-left: 0;
2769 }
2770
2771 .frm-templates-list li > div > div {
2772 vertical-align: middle;
2773 }
2774
2775 .frm-templates-list .frm-inner-circle,
2776 .frm-category-icon, /* Deprecated */
2777 .frm-icon-wrapper {
2778 background: var(--primary-500);
2779 border-radius: var(--small-radius);
2780 color: #fff;
2781 width: 32px;
2782 height: 32px;
2783 font-size: 18px;
2784 box-sizing: border-box;
2785 align-self: center;
2786 justify-content: center;
2787 align-items: center;
2788 display: inline-flex;
2789 }
2790
2791 .frm-templates-list .frm-inner-circle .frmsvg {
2792 vertical-align: top;
2793 }
2794
2795 .frm-templates-list li .frm-category-icon {
2796 overflow: hidden;
2797 }
2798
2799 .frm-templates-list .frm-template-details {
2800 /* the content container to the right of the icon in Create new form modal */
2801 display: inline-block;
2802 width: calc( 100% - 40px );
2803 padding-left: var(--gap-sm);
2804 box-sizing: border-box;
2805 transform: translateY(-2px);
2806 }
2807
2808 .frm-templates-list li h3,
2809 .frm-templates-list li p {
2810 text-align: left;
2811 margin: 0;
2812 white-space: nowrap;
2813 text-overflow: ellipsis;
2814 overflow: hidden;
2815 }
2816
2817 .frm-templates-list li h3,
2818 .frm-templates-list .frm-install-template h3 {
2819 font-size: var(--text-sm) !important;
2820 }
2821
2822 .frm-templates-list .frm-install-template div {
2823 text-align: left;
2824 }
2825
2826 #frm_leave_email,
2827 #frm_code_from_email {
2828 width: 480px;
2829 max-width: 100%;
2830 }
2831
2832 .control-section:hover .accordion-section-title {
2833 background: #fff !important;
2834 border-bottom-color: transparent;
2835 }
2836
2837 .frm-templates-list.frm-categories-list li > div > div:last-child {
2838 padding-left: 0;
2839 }
2840
2841 .frm-hover-icons {
2842 position: absolute;
2843 right: 0;
2844 top: calc( ( 58px - 2px - 22px ) / 2 ); /* Template item height - borders - icon height */
2845 max-width: 91px;
2846 height: 100%;
2847 box-sizing: border-box;
2848 padding: 0 10px 0 5px !important;
2849 border-radius: var(--small-radius);
2850 text-align: right;
2851 display: flex;
2852 gap: 5px;
2853 }
2854
2855 .frm-ready-made-solution .frm-hover-icons {
2856 visibility: hidden;
2857 }
2858
2859 .frm-ready-made-solution:hover .frm-hover-icons {
2860 visibility: visible;
2861 }
2862
2863 .frm-hover-icons a {
2864 width: 22px;
2865 height: 22px;
2866 font-size: var(--text-md);
2867 display: inline-flex;
2868 align-items: center;
2869 justify-content: center;
2870 border-radius: 50%;
2871 box-sizing: border-box;
2872 line-height: var(--leading);
2873 text-align: center;
2874 }
2875
2876 .frm-hover-icons > .frm-preview-form,
2877 .frm-hover-icons > .frm-delete-form {
2878 border: 1px solid var(--primary-500);
2879 }
2880
2881 .frm-hover-icons > .frm-create-form,
2882 .frm-ready-made-solution .frm-hover-icons a {
2883 background-color: var(--primary-500);
2884 }
2885
2886 .frm-hover-icons > a .frmsvg {
2887 width: 14px;
2888 height: 14px;
2889 vertical-align: baseline;
2890 }
2891
2892 .frm-hover-icons > .frm-preview-form .frmsvg,
2893 .frm-hover-icons > .frm-delete-form .frmsvg {
2894 color: var(--primary-500);
2895 }
2896
2897 .frm-hover-icons > .frm-unlock-form {
2898 background-color: var(--primary-500);
2899 }
2900
2901 .frm-hover-icons > .frm-unlock-form .frmsvg {
2902 background-color: var(--primary-500);
2903 }
2904
2905 .frm-ready-made-solution .frmsvg {
2906 width: 14px;
2907 height: 14px;
2908 }
2909
2910 .frm-hover-icons .frm-create-form svg,
2911 .frm-ready-made-solution .frm-hover-icons svg {
2912 color: #fff;
2913 }
2914
2915 .frm-hover-icons .frm-create-form:hover,
2916 .frm-ready-made-solution .frm-hover-icons a:hover,
2917 .frm-hover-icons > .frm-unlock-form:hover,
2918 .frm-hover-icons > .frm-unlock-form:hover .frmsvg
2919 {
2920 background-color: var(--primary-700) !important;
2921 }
2922
2923 .frm-hover-icons .frm-preview-form:hover,
2924 .frm-hover-icons .frm-delete-form:hover
2925 {
2926 border: 1px solid var(--primary-700) !important;
2927 }
2928
2929 .frm-hover-icons .frm-preview-form:hover .frmsvg,
2930 .frm-hover-icons .frm-delete-form:hover .frmsvg {
2931 color: var(--primary-700) !important;
2932 }
2933
2934 .frm-application-card h4 .frmsvg,
2935 .frm-locked-template h3 .frmsvg {
2936 height: var(--text-sm);
2937 width: var(--text-sm);
2938 vertical-align: text-top;
2939 color: var(--grey-500);
2940 }
2941
2942 .frm-modal-back {
2943 cursor: pointer;
2944 margin-right: 4px;
2945 }
2946
2947 .frm-modal-cancel {
2948 float: left;
2949 }
2950
2951 .frm-meta-tag,
2952 .frm-meta-tag:hover {
2953 padding: var(--gap-2xs) var(--gap-xs);
2954 border-radius: var(--small-radius);
2955 font-weight: 600;
2956 display: inline-flex;
2957 background-color: #D9EBFF;
2958 gap: 2px;
2959 }
2960
2961 .frm-meta-tag.frm-grey-tag,
2962 .frm-meta-tag.frm-grey-tag:hover {
2963 background-color: var(--sidebar-hover);
2964 color: var(--grey-900);
2965 }
2966
2967 .frm-meta-tag.frm-red-tag,
2968 .frm-meta-tag.frm-red-tag:hover {
2969 background: var(--error-100);
2970 color: var(--error-700);
2971 }
2972
2973 .frm-meta-tag.frm-orange-tag,
2974 .frm-meta-tag.frm-orange-tag:hover {
2975 background-color: #FEF7F4;
2976 color: var(--orange);
2977 }
2978
2979 .frm-meta-tag.frm-green-tag,
2980 .frm-meta-tag.frm-green-tag:hover {
2981 background-color: var(--success-500);
2982 color: #fff;
2983 }
2984
2985 .frm-entry-status-0,
2986 .frm-meta-tag.frm-lt-green-tag,
2987 .frm-meta-tag.frm-lt-green-tag:hover {
2988 background-color: var(--success-100);
2989 color: var(--success-800);
2990 }
2991
2992 .frm-meta-tag.frm-new-pill {
2993 background-color: var(--success-500);
2994 vertical-align: text-bottom;
2995 }
2996
2997 /* Start entry statuses */
2998 .frm-entry-status {
2999 font-weight: 500;
3000 }
3001
3002 .frm-entry-status-1 {
3003 color: #7A4D05;
3004 background: #FFF2D2;
3005 }
3006 /* End entry statuses */
3007
3008 #frm-create-footer {
3009 padding: 15px 20px;
3010 }
3011
3012 li .frm-hover-icons .frm-preview-form,
3013 .frm-hover-icons .frm-unlock-form,
3014 .frm-locked-template .frm-hover-icons .frm-create-form,
3015 .frm-modal-back
3016 {
3017 display: none;
3018 }
3019
3020
3021 .frm-locked-template .frm-hover-icons .frm-unlock-form,
3022 li[data-preview] .frm-hover-icons .frm-preview-form {
3023 display: inline-flex;
3024 }
3025
3026 .frm-modal-back svg {
3027 color: #7F7F7F;
3028 }
3029
3030 #frm-upgrade-body-list-wrapper > div {
3031 display: inline-block;
3032 width: calc( 100% / 3 );
3033 vertical-align: top;
3034 text-align: left;
3035 margin-bottom: 10px;
3036 }
3037
3038 #frm-upgrade-body-list-wrapper ul {
3039 padding-left: 40px;
3040 }
3041
3042 #frm-upgrade-body-list-wrapper ul li:before {
3043 content: "\2022";
3044 color: var(--primary-500);
3045 display: inline-block;
3046 width: 1em;
3047 margin-left: -1em;
3048 }
3049
3050 /* Embed Form Modal */
3051
3052 .frm-embed-modal-content {
3053 padding: var(--gap-md);
3054 }
3055
3056 .frm-embed-modal-content.frm-loading-page-options {
3057 display: flex;
3058 justify-content: center;
3059 }
3060
3061 #frm_embed_modal .frm_embed_example {
3062 background: var(--sidebar-color);
3063 border: 1px solid var(--sidebar-hover);
3064 border-radius: var(--small-radius);
3065 color: var(--grey-900);
3066 font-size: var(--text-sm);
3067 padding-right: var(--gap-lg);
3068 width: 100%;
3069 height: auto !important;
3070 resize: none;
3071 }
3072
3073 #frm_embed_modal textarea.frm_embed_example {
3074 padding-bottom: 0;
3075 }
3076
3077 .frm-embed-modal-content > div a {
3078 position: absolute;
3079 right: 0;
3080 top: 0;
3081 }
3082
3083 .frm-embed-modal-content > div {
3084 position: relative;
3085 margin-bottom: var(--gap-sm);
3086 }
3087
3088 .frm-embed-modal-content > div:last-child {
3089 margin-bottom: 0;
3090 }
3091
3092 .frm-embed-modal-content svg[id^="frm_copy_embed_"] {
3093 position: absolute;
3094 bottom: calc( ( 38px - 18px ) / 2 ); /* Input height - SVG height */
3095 right: 10px;
3096 cursor: pointer;
3097 opacity: 0.5;
3098 }
3099
3100 .frm-border-info-box,
3101 .frm-embed-modal-option {
3102 border-radius: var(--small-radius);
3103 border: 1px solid var(--grey-300);
3104 padding: var(--gap-sm);
3105 cursor: pointer;
3106 display: flex;
3107 gap: var(--gap-sm);
3108 font-size: var(--text-sm);
3109 }
3110
3111 .frm-embed-modal-option + .frm-embed-modal-option {
3112 margin-top: var(--gap-sm);
3113 }
3114
3115 .frm-collapsed .frmsvg,
3116 .caret.rotate-270,
3117 .frm-embed-modal-option .caret {
3118 align-self: center;
3119 margin-left: auto;
3120 transform: rotate(-90deg);
3121 }
3122
3123 #frm_embed_modal .frm_modal_footer {
3124 display: none;
3125 }
3126
3127 #frm_embed_modal.frm-on-page-2 .frm_modal_footer {
3128 display: block;
3129 }
3130
3131 .frm-embed-modal-content ul {
3132 max-height: 300px;
3133 overflow-y: scroll;
3134 }
3135
3136 .frm-embed-modal-wrapper.frm-dialog {
3137 overflow: visible;
3138 }
3139
3140 /* Bulk Options */
3141 #frm-bulk-modal .frm_grid_container {
3142 grid-template-columns: repeat(12, 8.33%);
3143 grid-gap: 0;
3144 }
3145
3146 #frm-bulk-modal .frm8 {
3147 border-right: 1px solid var(--grey-300);
3148 padding: 10px 20px 10px var(--gap-lg);
3149 }
3150
3151 #frm-bulk-modal .frm4 {
3152 padding: 10px 0;
3153 }
3154
3155 .frm-inline-modal .howto {
3156 margin: 5px 0 10px;
3157 color: var(--grey);
3158 }
3159
3160 .frm-inline-modal .frm_code_list + .howto {
3161 margin-bottom: 0;
3162 }
3163
3164 #frm_bulk_options {
3165 height: 240px;
3166 width: 100%;
3167 border: none;
3168 box-shadow: none;
3169 padding: 0;
3170 }
3171
3172 .frm-bulk-edit-link {
3173 text-align: right;
3174 font-size: var(--text-sm);
3175 padding: 0 5px 10px;
3176 }
3177
3178 .frm-small-add {
3179 font-size: var(--text-sm) !important;
3180 }
3181
3182 .frm-small-add span {
3183 color: var(--primary-500);
3184 font-size: 12px;
3185 height: 12px;
3186 width: 12px;
3187 }
3188
3189 .frm_no_captcha_text {
3190 font-weight: bold;
3191 color: #AA0000;
3192 }
3193
3194 .frm_image_from_url {
3195 height: 50px;
3196 }
3197
3198 /*Switch form dropdown*/
3199 h1 .fa-caret-down {
3200 font-size: 18px;
3201 }
3202
3203 .caret {
3204 display: inline-block;
3205 width: 19px;
3206 height: 9px;
3207 margin-right: -8px;
3208 vertical-align: middle;
3209 }
3210
3211 .caret,
3212 .wp-admin .frm_wrap select,
3213 .frm_wrap .frm_form_builder select,
3214 .frm_wrap .ui-autocomplete-input {
3215 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%;
3216 background-size: var(--text-md) var(--text-md);
3217 padding-right: var(--gap-lg) !important;
3218 }
3219
3220 .caret {
3221 padding-right: var(--gap-xs) !important;
3222 }
3223
3224 .frm-btn-group .caret {
3225 float: right;
3226 margin-top: calc( var(--text-md) / 2 );
3227 }
3228
3229 .dropdown {
3230 position: relative;
3231 }
3232
3233 .dropdown-toggle:focus {
3234 outline: 0;
3235 }
3236
3237 .frm_wrap .ui-autocomplete,
3238 #frm_adv_info.frm-dropdown-menu,
3239 .frm-dropdown-menu {
3240 /* Copied from .dropdown-menu rules from Bootstrap */
3241 position: absolute;
3242 top: 100%;
3243 left: 0;
3244 z-index: 1000;
3245 display: none;
3246 float: left;
3247 padding-left: 4px;
3248 padding-right: 4px;
3249 margin: var(--gap-xs) 0 0;
3250 text-align: left;
3251 list-style: none;
3252 background: none;
3253 background-color: #fff;
3254 background-clip: padding-box;
3255 border: 1px solid var(--grey-100);
3256 border-radius: 0.25rem;
3257 box-shadow: var(--box-shadow-lg);
3258
3259 /* Custom rules */
3260 max-height: 200px;
3261 overflow-y: auto;
3262 overflow-x: hidden;
3263 font-size: var(--text-md);
3264 width: auto;
3265 min-width: 160px;
3266 }
3267
3268 .frm6 .frm-dropdown-menu {
3269 min-width: 100px;
3270 max-width: 99%;
3271 }
3272
3273 #frm_bs_dropdown .frm-dropdown-menu {
3274 max-width: 400px;
3275 }
3276
3277 .field_type_list .frm-dropdown-menu {
3278 min-width: 150px !important;
3279 }
3280
3281 #frm_field_group_controls .frm-dropdown-menu,
3282 .frm-field-action-icons .frm-dropdown-menu {
3283 min-width: 180px !important;
3284 }
3285
3286 .frm-field-action-icons .frm-dropdown-toggle svg {
3287 color: #9EA9B8;
3288 }
3289
3290 .multiselect-container.frm-dropdown-menu,
3291 #search-submit .frm-dropdown-menu {
3292 min-width: 200px !important;
3293 }
3294
3295 .preview .frm-dropdown-menu {
3296 min-width: 230px !important;
3297 }
3298
3299 .frm-dropdown-menu.dropdown-menu-right {
3300 right: 0;
3301 left: auto;
3302 }
3303
3304 .frm-dropdown-menu .divider {
3305 height: 1px;
3306 margin: 9px 0;
3307 overflow: hidden;
3308 background-color: #e5e5e5;
3309 }
3310
3311 .frm-dropdown-menu > .dropdown-item {
3312 margin: 0;
3313 }
3314
3315 .frm-select-list-item,
3316 .frm_wrap .ui-autocomplete li > div,
3317 .multiselect-container button.multiselect-option,
3318 .frm-dropdown-menu > .dropdown-item > a,
3319 .frm-dropdown-menu .frm_dropdown_li {
3320 clear: both;
3321 font-weight: normal;
3322 white-space: nowrap;
3323 text-decoration: none;
3324 border-radius: var(--small-radius);
3325 }
3326
3327 .frm-dropdown-menu > .active > a,
3328 .frm-dropdown-menu > .active > a:hover,
3329 .frm-dropdown-menu > .active > a:focus {
3330 text-decoration: none;
3331 outline: 0;
3332 }
3333
3334 .frm-select-list-item.disabled,
3335 .frm-dropdown-menu > .disabled > a, .frm-dropdown-menu > .disabled > a:hover, .frm-dropdown-menu > .disabled > a:focus {
3336 color: #999999;
3337 }
3338
3339 .frm-select-list-item.disabled:hover,
3340 .frm-dropdown-menu > .disabled > a:hover,
3341 .frm-dropdown-menu > .disabled > a:focus {
3342 text-decoration: none;
3343 background-color: transparent;
3344 background-image: none;
3345 cursor: not-allowed;
3346 }
3347
3348 .open > .frm-dropdown-menu {
3349 display: block;
3350 }
3351
3352 .open > a {
3353 outline: 0;
3354 }
3355
3356 .dropdown-header {
3357 display: block;
3358 padding: 3px 10px;
3359 font-size: var(--text-xs);
3360 color: var(--grey-400);
3361 }
3362
3363 .dropdown-backdrop {
3364 position: fixed;
3365 left: 0;
3366 right: 0;
3367 bottom: 0;
3368 top: 0;
3369 z-index: 990;
3370 }
3371
3372 .dropdown-menu-right > .frm-dropdown-menu,
3373 .pull-right > .frm-dropdown-menu {
3374 right: 0;
3375 left: auto;
3376 }
3377
3378 .navbar-fixed-bottom .dropdown .caret {
3379 border-top: 0 dotted;
3380 border-bottom: 4px solid #000000;
3381 content: "";
3382 }
3383
3384 .navbar-fixed-bottom .dropdown .frm-dropdown-menu {
3385 top: auto;
3386 bottom: 100%;
3387 margin-bottom: 1px;
3388 }
3389
3390 .btn {
3391 border: 1px solid #ddd;
3392 background: #fff;
3393 height: 28px;
3394 line-height: var(--leading);
3395 }
3396
3397 a.frm_option_icon:before {
3398 color: var(--primary-500);
3399 font-size: 22px;
3400 width: 22px;
3401 height: 22px;
3402 }
3403
3404 a.frm_option_icon:focus::before,
3405 a.frm_option_icon:hover::before {
3406 color: var(--primary-700);
3407 }
3408
3409 .frm_top_left .frm-dropdown-toggle {
3410 color: #999;
3411 }
3412
3413 .frm-card ol {
3414 margin-left: 15px;
3415 }
3416
3417 .frm-dropdown-toggle {
3418 text-decoration: none;
3419 }
3420
3421 .frm-card .frm-dropdown-toggle {
3422 border: 1px solid var(--grey-300);
3423 border-radius: var(--small-radius);
3424 font-size: 13px;
3425 color: var(--grey-700);
3426 padding: 7px 20px;
3427 }
3428
3429 .frm_actions_dropdown .frm-dropdown-menu {
3430 font-size: var(--text-sm);
3431 color: #5F6C72;
3432 }
3433
3434 .frm-dropdown-menu .frm_icon_font {
3435 vertical-align: middle;
3436 color: #5F6C72;
3437 margin-right: 3px;
3438 }
3439
3440 /* BS Multiselect */
3441 .multiselect-container.frm-dropdown-menu {
3442 top: auto;
3443 left: auto;
3444 font-size: var(--text-sm);
3445 padding: 4px;
3446 margin-bottom: 3px;
3447 }
3448
3449 .frm-right-panel .accordion-section-content {
3450 background: transparent;
3451 padding: 0;
3452 overflow: initial;
3453 }
3454
3455 .frm-right-panel .accordion-section-content > .inside {
3456 padding: 0 0 var(--gap-xs);
3457 }
3458
3459 .frm-right-panel .accordion-section-content .inside a {
3460 font-size: inherit;
3461 }
3462
3463 #post-body-content + .frm-right-panel h3.accordion-section-title {
3464 padding: 7px 10px 8px 14px;
3465 font-size: var(--text-md);
3466 color: var(--grey-700);
3467 }
3468
3469 .frm-right-panel .control-section.open h3 {
3470 border-bottom: none;
3471 }
3472
3473 .js .frm-right-panel .control-section.open .accordion-section-title,
3474 .js .frm-right-panel .control-section .accordion-section-title:focus,
3475 .js .frm-right-panel .control-section .accordion-section-title:hover {
3476 background: transparent;
3477 color: var(--grey-900);
3478 }
3479
3480 .js .frm-right-panel .control-section .accordion-section-title:hover:before {
3481 color: var(--grey-700);
3482 }
3483
3484 .frm-with-line,
3485 .accordion-section-content h4 {
3486 font-size: var(--text-md);
3487 font-weight: 400;
3488 margin: 20px -20px 10px;
3489 padding: 0 20px;
3490 color: var(--grey-700);
3491 position: relative;
3492 border: none !important;
3493 }
3494
3495 .frm-with-line span,
3496 .accordion-section-content h4 span {
3497 background: #fff;
3498 padding: 0 10px;
3499 position: relative;
3500 display: inline-block;
3501 z-index: 2;
3502 }
3503
3504 .accordion-section-content h4 span {
3505 background: var(--sidebar-color);
3506 }
3507
3508 .frm-right-panel .frm-with-line span {
3509 background: var(--sidebar-color) !important;
3510 margin-left: -4px;
3511 }
3512
3513 .frm-right-panel .frm-inline-modal .frm-with-line span {
3514 background: #fff !important;
3515 }
3516
3517 .frm-right-panel .accordion-section-title:before,
3518 .frm-right-panel .accordion-section-title:after {
3519 content: "\e913" !important;
3520 font-family: "s11-fp" !important;
3521 font-size: 18px;
3522 font-variant: normal;
3523 text-rendering: auto;
3524 vertical-align: text-top;
3525 }
3526
3527 .frm-right-panel .accordion-section-title:after {
3528 top: calc(50% - 10px) !important;
3529 }
3530
3531 .frm-right-panel .open .accordion-section-title:after {
3532 content: "\e62a" !important;
3533 }
3534
3535 .frm-right-panel .accordion-section-title:before {
3536 content: "\f1de" !important;
3537 color: var(--grey);
3538 font-size: 17px !important;
3539 }
3540
3541 .frm-with-line:before,
3542 .accordion-section-content h4:before {
3543 content: '';
3544 display: block;
3545 position: absolute;
3546 border-bottom: 1px solid var(--grey-300);
3547 left: 0;
3548 width: 100%;
3549 top: 50%;
3550 }
3551
3552 .frm-right-panel .accordion-section {
3553 border: none;
3554 position: relative;
3555 }
3556 .frm-right-panel .accordion-section-title > .frmsvg:first-child {
3557 margin: 0 10px 0 0;
3558 color: var(--grey);
3559 }
3560 .frm-right-panel .accordion-section-title:hover > .frmsvg:first-child {
3561 color: var(--grey-900);
3562 }
3563
3564 .frm-right-panel .open .accordion-section-title > .frmsvg:last-child {
3565 transform: rotate(180deg);
3566 }
3567 #frm_view_editor_left.frm-right-panel .accordion-section-title,
3568 .frm-right-panel h3.accordion-section-title {
3569 padding: 15px 20px;
3570 background: var(--sidebar-color);
3571 line-height: var(--leading);
3572 color: var(--grey-700);
3573 font-size: var(--text-lg);
3574 font-weight: 400;
3575 }
3576
3577 .control-section .accordion-section-title:after, /** Form template list */
3578 .customize-pane-child .accordion-section-title:after {
3579 top: 15px;
3580 }
3581
3582 .accordion-container .frm-dropdown-menu {
3583 min-width: 40px;
3584 }
3585
3586 .frm-btn-group .multiselect.dropdown-toggle {
3587 box-sizing: border-box;
3588 min-height: unset;
3589 cursor: pointer;
3590 }
3591
3592 .accordion-container .frm-dropdown-menu:before,
3593 .accordion-container .multiselect.dropdown-toggle:before {
3594 font-family: "s11-fp" !important;
3595 }
3596
3597 .multiselect-container {
3598 position: absolute;
3599 list-style-type: none;
3600 margin: 0;
3601 padding: 0;
3602 width: 100%;
3603 max-width: 250px;
3604 }
3605
3606 .multiselect-container button.multiselect-option {
3607 width: 100%;
3608 text-align: left;
3609 border: none;
3610 margin-bottom: 4px;
3611 }
3612
3613 .multiselect-container button.multiselect-option label {
3614 margin-left: 5px;
3615 }
3616
3617 .accordion-container .multiselect-container label {
3618 padding: 3px 19px 3px 7px;
3619 }
3620
3621 .frm-btn-group.btn-group > .btn-group:nth-child(2) > .multiselect.btn {
3622 border-top-left-radius: 4px;
3623 border-bottom-left-radius: 4px
3624 }
3625
3626 .frm-btn-group.btn-group, .frm-btn-group.btn-group-vertical {
3627 display: block;
3628 }
3629
3630 .multiselect-option label {
3631 max-width: calc(100% - 22px);
3632 text-overflow: ellipsis;
3633 overflow: hidden;
3634 white-space: nowrap;
3635 }
3636
3637 .frm_scale {
3638 text-align: center;
3639 float: left;
3640 margin-right: 10px;
3641 }
3642
3643 .frm_scale input {
3644 display: block;
3645 margin: 5px
3646 }
3647
3648 .frm_multi_fields_container {
3649 float: left;
3650 }
3651
3652 .frm_multi_fields_container,
3653 .frm_form_builder .frm_form_fields input[type=tel]
3654 .frm_form_builder .frm_form_fields input[type=range],
3655 .frm_form_builder .frm_form_fields input[type=text] {
3656 width: 100%;
3657 height: auto;
3658 }
3659
3660 .frm_form_builder .frm_time_wrap .frm_time_sep {
3661 vertical-align: sub;
3662 vertical-align: -webkit-baseline-middle;
3663 }
3664
3665 .frm_form_builder input[type=range]::-webkit-slider-runnable-track {
3666 background-color: var(--blue-border);
3667 }
3668
3669 .frm_form_builder input[type=range]::-moz-range-track {
3670 background-color: var(--blue-border);
3671 }
3672
3673 .frm_form_builder input[type=range]::-ms-fill-lower {
3674 background-color: var(--blue-border);
3675 }
3676
3677 .frm_form_builder input[type=range]::-ms-fill-upper {
3678 background-color: var(--blue-border);
3679 }
3680
3681 .frm-embed-field-placeholder {
3682 text-align: center;
3683 height: 145px;
3684 display: flex;
3685 align-items: center;
3686 justify-content: center;
3687 }
3688
3689 .frm-fake-field {
3690 display: block;
3691 height: 25px;
3692 background-color: var(--light-blue);
3693 border: 1px solid var(--grey-300);
3694 margin: 10px 0;
3695 border-radius: var(--small-radius);
3696 }
3697
3698 .frm-embed-message {
3699 position: absolute;
3700 background: #fff;
3701 border: 1px solid var(--grey-300);
3702 color: var(--grey-700);
3703 padding: var(--gap-md);
3704 font-size: var(--text-lg);
3705 max-width: 200px;
3706 min-width: 50%;
3707 margin: 0 var(--gap-md);
3708 overflow: hidden;
3709 text-overflow: ellipsis;
3710 }
3711
3712 .frm-summary-message {
3713 top: 50%;
3714 left: 50%;
3715 padding: 15px 0;
3716 font-size: var(--text-md);
3717 transform: translate(-50%, -50%);
3718 }
3719
3720 .frm-summary-learn-more {
3721 font-size: inherit !important;
3722 }
3723
3724 .frm-single-settings .frm-embed-message {
3725 width: 100%;
3726 position: static;
3727 border-radius: var(--small-radius);
3728 }
3729
3730 #new_fields input[type=text],
3731 #new_fields input[type=number],
3732 .frm_field_box .frm_form_fields > textarea,
3733 .frm_form_fields .frm_form_field > textarea,
3734 .frm_form_fields .frm_form_field > input[type=email],
3735 .frm_form_fields .frm_form_field > input[type=url],
3736 .frm_form_fields .frm_form_field > input[type=number],
3737 .frm_form_fields .frm_form_field > input[type=tel],
3738 .frm_form_fields .frm_form_field > input[type=text],
3739 .frm_form_fields .frm_form_field > input[type=range] {
3740 width: 100%;
3741 }
3742
3743 .frm_form_fields textarea.wp-editor-area {
3744 width: 100%;
3745 border: none;
3746 }
3747
3748 .frm_form_fields input[type="file"], .frm_form_fields input[type="file"]:disabled {
3749 background: transparent;
3750 border: none;
3751 box-shadow: none;
3752 width: auto;
3753 }
3754
3755 .frm_form_fields select {
3756 width: auto;
3757 max-width: 100%;
3758 }
3759
3760 input[type="radio"],
3761 input[type="checkbox"] {
3762 width: 16px;
3763 padding: 0;
3764 }
3765
3766 .frm_wrap .frm-number-range + .frm_last input,
3767 .frm_wrap .frm-number-range input {
3768 text-align: center;
3769 font-weight: 600;
3770 }
3771
3772 .frm_wrap .frm-number-range input[type=number],
3773 .frm_wrap .frm-number-range input[type=text] {
3774 color: var(--primary-700);
3775 }
3776
3777 .frm-range-min {
3778 position: relative;
3779 }
3780
3781 .frm-range-min:after {
3782 content: '';
3783 height: 3px;
3784 width: 10px;
3785 border-radius: 30%;
3786 background: var(--primary-700);
3787 position: absolute;
3788 top: 17px;
3789 right: -28%;
3790 }
3791
3792 .frm_grid_container > p,
3793 .frm_grid_container > p.frm_form_field,
3794 .frm_grid_container > div.frm_form_field,
3795 #new_fields .frm_grid_container > p {
3796 margin-top: 8px;
3797 margin-bottom: 8px;
3798 margin-right: 0;
3799 }
3800
3801 #new_fields div.frm_grid_container > .frm_primary_label {
3802 margin-top: 8px;
3803 }
3804
3805 #new_fields .frm_primary_label + p,
3806 #new_fields .frm_primary_label + .frm6 + .frm6,
3807 #new_fields .frm_primary_label + .frm6 + .frm-inline-modal + .frm6 {
3808 margin-top: 0;
3809 }
3810
3811 .frm_catlevel_2, .frm_catlevel_3, .frm_catlevel_4, .frm_catlevel_5 {
3812 margin-left: 18px;
3813 }
3814
3815 .frm_wrap .frm-fields .auto_width,
3816 .frm_form_fields input.auto_width, .frm_form_fields select.auto_width, .frm_form_fields textarea.auto_width {
3817 width: auto !important;
3818 }
3819
3820 .frm_form_fields select.auto_width {
3821 min-width: 60px;
3822 }
3823
3824 .frm_form_fields input:focus, .frm_form_fields select:focus,
3825 .frm_form_fields textarea:focus, .frm_focus_field input {
3826 background-color: #fff;
3827 border-color: #ddd;
3828 }
3829
3830 .frm_form_builder .frm_radio,
3831 .frm_form_builder .frm_checkbox {
3832 display: block;
3833 margin-bottom: 2px;
3834 }
3835
3836 .frm_form_builder .frm_radio label,
3837 .frm_form_builder .frm_checkbox label {
3838 font-size: var(--text-sm);
3839 }
3840
3841 /* Start copied front-end CSS */
3842 .horizontal_radio .frm_radio,
3843 .horizontal_radio .frm_checkbox {
3844 margin-right: 5px;
3845 display: inline-block;
3846 }
3847
3848 .frm_form_field.frm_two_col .frm_opt_container,
3849 .frm_form_field.frm_three_col .frm_opt_container,
3850 .frm_form_field.frm_four_col .frm_opt_container{
3851 display: grid;
3852 grid-template-columns: repeat(2, 1fr);
3853 grid-auto-rows: max-content;
3854 grid-gap: 0 2.5%;
3855 }
3856
3857 .frm_form_field.frm_three_col .frm_opt_container{
3858 grid-template-columns: repeat(3, 1fr);
3859 }
3860
3861 .frm_form_field.frm_four_col .frm_opt_container{
3862 grid-template-columns: repeat(4, 1fr);
3863 }
3864
3865 .frm_form_field.frm_two_col .frm_radio,
3866 .frm_form_field.frm_two_col .frm_checkbox,
3867 .frm_form_field.frm_three_col .frm_radio,
3868 .frm_form_field.frm_three_col .frm_checkbox,
3869 .frm_form_field.frm_four_col .frm_radio,
3870 .frm_form_field.frm_four_col .frm_checkbox{
3871 grid-column-end: span 1;
3872 }
3873 /* End copied */
3874
3875 .frm_wrap .with_frm_style .frm_checkbox input[type=checkbox],
3876 .frm_wrap .with_frm_style .frm_radio input[type=radio],
3877 .frm_wrap input[type=checkbox],
3878 .frm-white-body input[type=checkbox],
3879 .field-group input[type=checkbox],
3880 .frm_scale input[type=radio],
3881 .frm_radio input[type=radio],
3882 .frm_checkbox input[type=checkbox] {
3883 border: 1px solid var(--grey-300);
3884 box-shadow: none;
3885 -webkit-appearance: none;
3886 }
3887
3888
3889 .frm_wrap .with_frm_style .frm_checkbox input[type=checkbox],
3890 .frm_wrap input[type=checkbox],
3891 .frm-white-body input[type=checkbox],
3892 .field-group input[type=checkbox],
3893 .frm_checkbox input[type=checkbox] {
3894 border-radius: 4px;
3895 }
3896
3897 .frm-white-body input[type="checkbox"]:checked,
3898 .frm_wrap input[type="checkbox"]:checked {
3899 background-color: var(--primary-500);
3900 border-color: var(--primary-500) !important;
3901 }
3902
3903 .frm-white-body input[type="checkbox"]:checked:focus,
3904 .frm_wrap input[type="checkbox"]:checked:focus {
3905 border-color: var(--primary-500);
3906 }
3907
3908 .frm-white-body input[type="checkbox"]:checked::before,
3909 .frm_wrap input[type="checkbox"]:checked::before {
3910 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");
3911 height: 12px;
3912 width: 12px;
3913 margin: 1px;
3914 }
3915
3916 .frm_radio input[type="radio"],
3917 .frm_checkbox input[type="checkbox"] {
3918 margin-right: 5px;
3919 }
3920
3921 .frm_single_entry_page .with_frm_style .frm_radio input[type=radio] {
3922 margin: 5px 0;
3923 width: 18px;
3924 position: relative; /* override Bootstrap */
3925 }
3926
3927 .frm_single_entry_page .with_frm_style .frm_radio input[type=radio]:before {
3928 position: relative !important;
3929 left: calc(50% - 6px);
3930 top: calc(50% - 6px);
3931 margin: 0 !important;
3932 }
3933
3934 .frm_inner_field_container {
3935 margin-bottom: 10px;
3936 }
3937
3938 .frm_conf_inline .frm_inner_field_container,
3939 .frm_conf_inline .frm_inner_conf_container {
3940 width: 49%;
3941 float: left;
3942 }
3943
3944 .frm_conf_inline .frm_inner_field_container {
3945 margin-right: 2%;
3946 clear: both;
3947 }
3948
3949 .frm_inner_field_container > label {
3950 text-overflow: ellipsis;
3951 overflow: hidden;
3952 white-space: nowrap;
3953 }
3954
3955 .frm_field_box:not(.edit_field_type_divider):hover > .frm_inner_field_container > label,
3956 .frm_field_box .divider_section_only:hover > .frm_inner_field_container > label,
3957 li.ui-state-default.selected > .frm_inner_field_container > label {
3958 max-width: calc(100% - 100px);
3959 }
3960
3961 .frm-drag-fade {
3962 background-color: var(--lightest-grey) !important;
3963 border-radius: 4px;
3964 }
3965
3966 .frm-drag-fade * {
3967 opacity: 0;
3968 }
3969
3970 .frm-dragging .divider_section_only,
3971 .frm-dragging .frm_field_box {
3972 pointer-events: none;
3973 }
3974
3975 .frm_form_settings #op-popup, /* 1Password */
3976 .frm_form_settings com-1password-op-button,
3977 .frm_conf_below .frm_conf_field_container .frm_primary_label,
3978 .frm_conf_inline .frm_inner_field_container .frm-show-click a,
3979 .frm_conf_below .frm_conf_field_container .frm-show-click a {
3980 display: none !important;
3981 }
3982
3983 .frm_conf_inline .frm_inner_field_container .frm-field-action-icons {
3984 position: absolute;
3985 right: 5px;
3986 }
3987
3988 .frm_conf_below .frm_conf_field_container {
3989 margin-top: 10px;
3990 }
3991
3992 .frm_calc_dec {
3993 width: 50px;
3994 }
3995
3996 .frm_ext_sc {
3997 display: none;
3998 }
3999
4000 .frm_long_input {
4001 width: 100% !important;
4002 box-sizing: border-box;
4003 }
4004
4005 .frmcenter {
4006 text-align: center;
4007 }
4008
4009 img.frm_help {
4010 margin-left: 2px;
4011 vertical-align: middle;
4012 padding-bottom: 2px;
4013 }
4014
4015 /* Loading */
4016 .frm_spinner.frm-wait,
4017 .frm_spinner.spinner {
4018 float: left;
4019 visibility: hidden;
4020 margin: 0 10px;
4021 }
4022
4023 .frm_visible_spinner.frm-wait,
4024 .frm_visible_spinner.spinner {
4025 visibility: visible;
4026 float: none;
4027 }
4028
4029 .frm_form_action_settings .frm_spinner.frm-wait,
4030 .frm_form_action_settings .frm_spinner.spinner {
4031 visibility: visible;
4032 float: none;
4033 vertical-align: bottom;
4034 }
4035
4036 .frm_form_action_settings .frm_loading {
4037 font-size: 15px;
4038 text-align: center;
4039 }
4040
4041 .frm_ajax_settings_tab .frm-wait,
4042 .frm_ajax_settings_tab .spinner {
4043 visibility: visible;
4044 float: none;
4045 margin-top: 20px;
4046 }
4047
4048 .wp-core-ui .frm_loading_button.button-primary.frm-button-primary,
4049 .frm_loading_button,
4050 .frm_loading_form.frm_button_submit {
4051 position: relative !important;
4052 opacity: .8;
4053 color: transparent !important;
4054 text-shadow: none !important;
4055 }
4056
4057 .frm_loading_button:hover,
4058 .frm_loading_button:active,
4059 .frm_loading_button:focus,
4060 .frm_loading_form.frm_button_submit:hover,
4061 .frm_loading_form.frm_button_submit:active,
4062 .frm_loading_form.frm_button_submit:focus {
4063 cursor: not-allowed;
4064 color: transparent !important;
4065 outline: none !important;
4066 box-shadow: none;
4067 }
4068
4069 .frm-wait {
4070 margin: 20px;
4071 width: 20px;
4072 height: 20px;
4073 position: relative;
4074 display: inline-block;
4075 }
4076
4077 #frm-show-fields .frm-wait:only-child {
4078 position: absolute;
4079 left: 50px;
4080 top: 30px;
4081 }
4082
4083 .frm-wait:before,
4084 .frm_loading_button:before,
4085 .frm_loading_form.frm_button_submit:before {
4086 content: '';
4087 display: inline-block;
4088
4089 position: absolute;
4090 background: transparent;
4091 border: 1px solid #fff;
4092 border-top-color: transparent;
4093 border-left-color: transparent;
4094 border-radius: 50%;
4095
4096 box-sizing: border-box;
4097 top: 50%;
4098 left: 50%;
4099 margin-top: -10px;
4100 margin-left: -10px;
4101 width: 20px;
4102 height: 20px;
4103
4104 -webkit-animation: spin 2s linear infinite;
4105 -moz-animation: spin 2s linear infinite;
4106 -o-animation: spin 2s linear infinite;
4107 animation: spin 2s linear infinite;
4108 }
4109
4110 .frm-wait:before {
4111 border-bottom-color: var(--primary-700);
4112 border-right-color: var(--primary-700);
4113 }
4114
4115 .frm_loading_button.frm-button-secondary:before {
4116 border-bottom-color: var(--primary-500);
4117 border-right-color: var(--primary-500);
4118 }
4119
4120 input[type=submit]:focus {
4121 outline: none !important;
4122 }
4123
4124 /* Effects */
4125
4126 @keyframes spin {
4127 0% {
4128 transform: rotate(0deg);
4129 }
4130 100% {
4131 transform: rotate(360deg);
4132 }
4133 }
4134
4135 label input[type="checkbox"], label input[type="radio"] {
4136 vertical-align: inherit;
4137 }
4138
4139 #editorcontainer #dyncontent {
4140 margin: 0;
4141 width: 100%;
4142 padding: 6px;
4143 line-height: var(--leading);
4144 border: 0 none;
4145 outline: none;
4146 box-sizing: border-box;
4147 }
4148
4149 /*ICONS*/
4150 .frm_postbox_icon {
4151 margin: -6px 0 0 -10px;
4152 }
4153
4154 .frm_form_builder a:hover {
4155 text-decoration: underline;
4156 }
4157
4158 .frm_form_builder .widget-title h4 {
4159 padding: 10px 15px;
4160 }
4161
4162 .frm_form_builder .widget-top a.widget-action:after {
4163 margin: 7px 12px 0;
4164 }
4165
4166 .frmbutton.frm_tgateway {
4167 display: none !important;
4168 }
4169
4170 .frm_html_legend pre {
4171 display: inline;
4172 }
4173
4174 #ed_fullscreen {
4175 display: none !important;
4176 }
4177
4178 .frm_posttax_opt_list {
4179 overflow: auto;
4180 max-height: 200px;
4181 background-color: #fff;
4182 }
4183
4184 .frm_posttax_opt_list p.howto {
4185 font-size: 12px;
4186 }
4187
4188 .frm_border_bottom {
4189 border-bottom: 1px solid var(--grey-300);
4190 margin-bottom: 10px;
4191 padding-bottom: 10px;
4192 }
4193
4194 .frm_posttax_opt_list .frm_border_bottom span.howto {
4195 padding-right: 10px;
4196 }
4197
4198 .frm_posttax_opt_list .frm_border_bottom input {
4199 margin-right: 1px;
4200 }
4201
4202 .frm_add_remove div.frm_form_field {
4203 padding-bottom: 5px;
4204 }
4205
4206 .frm_field_opts_list {
4207 max-height: 190px;
4208 overflow: auto;
4209 }
4210
4211 .frm_white_bg {
4212 background-color: #fff;
4213 }
4214
4215 .frm_border_light {
4216 border: solid 1px #ddd;
4217 }
4218
4219 #new_fields .form-table input[type=text],
4220 #new_fields .form-table select,
4221 .form-table .form-field input,
4222 .form-table .form-field .quicktags-toolbar input,
4223 .form-field input, .form-field .quicktags-toolbar input {
4224 width: auto;
4225 }
4226
4227 .frm_aff_link {
4228 float: right;
4229 }
4230
4231 .frm_select_box {
4232 text-align: center;
4233 font-weight: bold;
4234 width: 100%;
4235 background-color: transparent !important;
4236 }
4237
4238 .wp-list-table input.frm_select_box {
4239 text-align: left;
4240 font-weight: normal;
4241 font-size: inherit !important;
4242 border: none;
4243 padding: 0 !important;
4244 background-color: transparent !important;
4245 }
4246
4247 .wp-list-table input.frm_select_box:focus {
4248 outline: none;
4249 box-shadow: none;
4250 }
4251
4252 .wp-list-table .frm_no_items.frm_select_box {
4253 text-align: center;
4254 font-weight: bold;
4255 width: 500px;
4256 max-width: 100%;
4257 font-size: inherit;
4258 }
4259
4260 #frm-options-panel {
4261 padding: 0 var(--gap-sm);
4262 color: var(--grey-900);
4263 }
4264
4265 .frm-right-panel a.frm_add_logic_link,
4266 #frm-options-panel h3 {
4267 padding: 15px 0;
4268 margin-top: -2px;
4269 }
4270
4271 .frm-right-panel a.frm_add_logic_link:focus {
4272 outline: auto;
4273 }
4274
4275 #frm_style_sidebar h3,
4276 #frm_view_editor_left.frm-right-panel .accordion-section-title {
4277 padding: 15px 0;
4278 }
4279
4280 .frm_field_key {
4281 background-color: #F7F7F7;
4282 }
4283
4284 #frm_form_editor_container #edit-slug-box {
4285 padding: 0;
4286 }
4287
4288 .frm-alt-table {
4289 position: relative;
4290 width:100%;
4291 border-collapse:collapse;
4292 margin-top:0.5em;
4293 font-size:15px;
4294 }
4295
4296 /* Before `applyZebraStriping` is executed, an empty space is displayed */
4297 #form_show_entry_page .frm-alt-table:not(.frm-zebra-striping)::before {
4298 content: '';
4299 position: absolute;
4300 top: 0;
4301 right: 0;
4302 bottom: 0;
4303 left: 0;
4304 background-color: #fff;
4305 }
4306
4307 .frm-alt-table th {
4308 width:200px;
4309 }
4310
4311 .frm-alt-table tr,
4312 .frm-alt-table tr.frm-odd {
4313 background-color:transparent;
4314 }
4315
4316 .frm-alt-table tr.frm-even {
4317 background-color: var(--sidebar-color);
4318 }
4319
4320 .frm-alt-table th,
4321 .frm-alt-table td {
4322 background-color:transparent;
4323 vertical-align:top;
4324 text-align:left;
4325 padding:20px;
4326 }
4327
4328 .frm-alt-table h3 {
4329 margin-bottom: 0;
4330 }
4331
4332 .form-field .frm_cb_button {
4333 height: 22px;
4334 line-height: 20px;
4335 margin-bottom: 10px;
4336 margin-right: 5px;
4337 }
4338
4339 .edit_field_type_select .frm_option_val_label {
4340 margin-left: 12px;
4341 }
4342
4343 .frm_rte {
4344 background: url(../images/rte.png) no-repeat;
4345 }
4346
4347 .frm_rte .howto {
4348 margin: 10px 0 46px;
4349 }
4350
4351 .subform_section {
4352 margin: 25px;
4353
4354 }
4355
4356 .subform_section,
4357 .subform_section label,
4358 .subform_section input {
4359 opacity: 80;
4360 }
4361
4362 .subform_section .frm_sortable_field_opts {
4363 display: none;
4364 }
4365
4366 #frm_form_editor_container .subform_section .frm_primary_label {
4367 display: block;
4368 }
4369
4370 .subform_section.subform_break {
4371 border-top: 1px dashed #ccc;
4372 }
4373
4374 .button-secondary.frm_html_field {
4375 background-color: #ededed;
4376 padding: 10px 20px;
4377 line-height: inherit;
4378 width: auto;
4379 height: auto !important;
4380 border-radius: 0;
4381 box-sizing: content-box;
4382 }
4383
4384 .frm_html_field_placeholder {
4385 margin-bottom: 10px;
4386 text-align: center;
4387 }
4388
4389 .recaptcha_placeholder {
4390 border: 1px solid #d3d3d3;
4391 width: 300px;
4392 }
4393
4394 .turnstile_placeholder {
4395 width: 300px;
4396 }
4397
4398 .frm_sorting .frm_rte textarea {
4399 width: 653px;
4400 background: #fff;
4401 margin: 1px 0 0;
4402 border: 1px solid #dfdfdf;
4403 border-top: none;
4404 border-radius: 0;
4405 float: none !important;
4406 }
4407
4408 .frm_full_rte textarea {
4409 width: 98%;
4410 padding: 0;
4411 }
4412
4413 .frm_field_box {
4414 padding: 5px;
4415 min-height: 20px;
4416 margin: 10px 0;
4417 }
4418
4419 .frm_indent_opt, td.frm_indent_opt {
4420 padding-left: 25px;
4421 }
4422
4423 .frm_charts object {
4424 background: transparent;
4425 }
4426
4427 .frm_charts h2 {
4428 height: 34px;
4429 }
4430
4431 .frm_single_option.ui-sortable-placeholder,
4432 li.sortable-placeholder {
4433 border: none;
4434 margin: 0;
4435 visibility: visible !important;
4436 box-shadow: 2px -10px 0 2px var(--primary-500);
4437 }
4438
4439 #frm_form_editor_container > ul > .frm_single_option.ui-sortable-placeholder,
4440 #frm_form_editor_container > ul > li.sortable-placeholder {
4441 width: calc(100% - 5px) !important;
4442 height: 0 !important;
4443 }
4444
4445 #frm_form_editor_container > ul > li > ul {
4446 position: relative;
4447 }
4448
4449 #frm_form_editor_container > ul > li > ul > li.sortable-placeholder,
4450 #frm_form_editor_container ul.start_divider > li > ul > li.sortable-placeholder {
4451 position: absolute;
4452 top: 20px;
4453 bottom: 0;
4454 }
4455
4456 .edit_field_type_divider + li.sortable-placeholder {
4457 box-shadow: 2px 5px 0 2px var(--primary-500);
4458 }
4459
4460 .start_divider li.sortable-placeholder {
4461 box-shadow: 2px -5px 0 2px var(--primary-500);
4462 }
4463
4464 .frm-is-collapsed + .sortable-placeholder {
4465 box-shadow: 2px 15px 0 2px var(--primary-500);
4466 }
4467
4468 .frm_single_option.ui-sortable-placeholder {
4469 box-shadow: 0 0 1px 1px var(--primary-500);
4470 }
4471
4472 .frm_sorting > li.edit_field_type_end_divider:first-child,
4473 .frm-show-click,
4474 li.ui-state-default.edit_field_type_divider .frm-show-click {
4475 display: none;
4476 }
4477
4478 .frm_form_field.ui-sortable-helper .frm-field-action-icons,
4479 .frm_form_field.ui-sortable-helper .frm_form_fields,
4480 .frm_form_field.ui-sortable-helper .frm_description,
4481 .frm_form_field.ui-sortable-helper .description {
4482 display: none;
4483 }
4484
4485 .frm_form_field.ui-sortable-helper .frm_primary_label,
4486 .frm_form_field.ui-sortable-helper .frm_inner_field_container {
4487 margin: 0 !important;
4488 }
4489
4490 .frm-single-settings .frm-show-click {
4491 display: block !important;
4492 }
4493
4494 .frm-show-hover,
4495 .frm_single_visible_hover,
4496 li.ui-state-default.edit_field_type_divider .frm-show-hover {
4497 opacity: 0;
4498 transition: opacity .15s ease-in-out;
4499 }
4500
4501 #frm-show-fields .frm-field-settings-open .frm-show-hover {
4502 opacity: 1;
4503 }
4504
4505 .frm_sortable_field_opts {
4506 margin-top: 5px;
4507 }
4508
4509 .frm_single_option {
4510 clear: both;
4511 margin: 0;
4512 padding-bottom: 5px;
4513 }
4514
4515 .frm_product_price_wrapper,
4516 .frm_image_preview_wrapper,
4517 #new_fields .frm_single_option select,
4518 #new_fields .frm_single_option input[type=text] {
4519 width: calc(100% - 73px);
4520 }
4521
4522 .frm-right-panel .frm_single_option a.frm_remove_tag,
4523 .frm_single_option a {
4524 padding-left: 7px;
4525 }
4526
4527 .frm_single_option:hover .frm_single_visible_hover {
4528 opacity: 100;
4529 }
4530
4531 .frm_single_option .frm-drag {
4532 font-size: 23px;
4533 width: 22px;
4534 height: 19px;
4535 margin-left: -6px;
4536 color: var(--grey);
4537 }
4538
4539 .frm_single_option .frm-drag:before {
4540 vertical-align: middle;
4541 }
4542
4543 .frm-drag,
4544 .frm_single_option.ui-sortable-helper {
4545 cursor: move;
4546 }
4547
4548 .frm_single_option .frm_option_key {
4549 margin-left: 19px !important;
4550 }
4551
4552 .frm_option_key input[type=text] {
4553 margin-top: 15px !important;
4554 }
4555
4556 li.ui-state-default.selected .frm-show-click,
4557 li.ui-state-default.selected.edit_field_type_divider .frm-show-click {
4558 display: inline;
4559 vertical-align: top;
4560 }
4561
4562 .frm_field_box:not(.edit_field_type_divider):hover > .frm_inner_field_container > .frm-show-hover,
4563 .frm_field_box .divider_section_only:hover > .frm_inner_field_container > .frm-show-hover,
4564 li.ui-state-default.selected > .frm_inner_field_container > .frm-show-hover,
4565 li.ui-state-default.selected.edit_field_type_divider .divider_section_only .frm-show-hover {
4566 opacity: 100;
4567 }
4568
4569 li.frm_field_box > ul.frm_grid_container {
4570 position: relative;
4571 }
4572
4573 .frm_sorting span.ui-icon {
4574 width: 16px;
4575 }
4576
4577 /* Image options for Radio and Checkbox */
4578
4579 .frm_image_options .frm_image_option_container {
4580 --field-border-width: 1px;
4581 --border-color: var(--grey-300);
4582 --border-color-active: var(--primary-500);
4583 --border-radius: var(--small-radius);
4584 }
4585
4586 #form_show_entry_page .frm_file_link,
4587 #form_show_entry_page .frm_image_option_container {
4588 display: inline-flex;
4589 flex-wrap: nowrap;
4590 flex-direction: column;
4591 text-align: center;
4592 align-items: center;
4593 width: 150px;
4594 margin-right: 10px;
4595 margin-bottom: 10px;
4596 }
4597
4598 #form_show_entry_page .frm_image_option_container img {
4599 width: 150px;
4600 height: 150px;
4601 object-fit: cover;
4602 }
4603
4604 #form_show_entry_page .frm_file_link img {
4605 max-width: 150px;
4606 height: auto;
4607 }
4608
4609 #form_show_entry_page .frm_file_link ~ br {
4610 display: none;
4611 }
4612
4613 #form_show_entry_page .frm_upload_label {
4614 padding: 10px;
4615 }
4616
4617 #form_show_entry_page.frm_wrap .postbox {
4618 overflow: hidden;
4619 }
4620
4621 .frm_image_option_container .frm_image_placeholder_icon svg{
4622 height: 150px;
4623 }
4624
4625 .frm_list_entry_page .frm_file_link,
4626 .frm_list_entry_page .frm_image_option_container.frm_label_with_image {
4627 display: block;
4628 text-align: center;
4629 }
4630
4631 .frm_list_entry_page .frm_image_option_container img {
4632 width: 75px;
4633 height: 75px;
4634 object-fit: cover;
4635 }
4636
4637 .frm_list_entry_page img {
4638 max-width: 100%;
4639 height: auto;
4640 }
4641
4642 .frm_image_option_container .frm_empty_url {
4643 background-color: var(--sidebar-color);
4644 }
4645
4646 .frm_list_entry_page .frm_image_option_container .frm_text_label_for_image {
4647 display: block;
4648 padding: 5px 0 10px;
4649 }
4650
4651 .frm_list_entry_page .frm_upload_label,
4652 .frm-summary-page-wrapper .frm_text_label_for_image {
4653 display: block;
4654 }
4655
4656 #frm-welcome .frm_image_options .frm_image_option_container,
4657 #form_global_settings .frm_image_options .frm_image_option_container{
4658 background: var(--sidebar-color);
4659 }
4660
4661 #frm-welcome .frm_image_option_container svg,
4662 #form_global_settings .frm_image_option_container svg {
4663 max-width: calc( 100% - 20px );
4664 }
4665
4666 /* Style image option container for Directory add on. */
4667 #frm-new-template .frm_image_option_container svg {
4668 height: 50px;
4669 margin: 10px auto 0;
4670 }
4671
4672 /* Show an icon on top */
4673 .frm_image_option_container {
4674 position: relative;
4675 }
4676
4677 .frm_text_label_for_image > svg {
4678 width: 30px;
4679 position: absolute;
4680 top: 5px;
4681 right: calc( 50% - 15px );
4682 }
4683 /* End show an icon on top */
4684
4685 .frm_single_option .frm_option_key {
4686 margin-top: 17px;
4687 }
4688
4689 .frm_image_data {
4690 margin-left: var(--gap-xs);
4691 display: flex;
4692 flex-direction: column;
4693 font-size: var(--text-sm);
4694 justify-content: space-around;
4695 }
4696
4697 .frm_image_styling_frame {
4698 display: flex;
4699 align-items: stretch;
4700 margin-left: 1.5rem;
4701 }
4702
4703 .frm_image_styling_frame img{
4704 height: 54px;
4705 width: 54px;
4706 min-width: auto;
4707 min-height: auto;
4708 border-radius: 3px;
4709 object-fit: cover;
4710 object-position: center;
4711 }
4712
4713 .frm_image_styling_frame .frm_email_attachment_icon img {
4714 height: auto;
4715 width: auto;
4716 max-width: 54px;
4717 }
4718
4719 .frm_image_preview_title{
4720 color: var(--grey-500);
4721 overflow: hidden;
4722 white-space: nowrap;
4723 text-overflow: ellipsis;
4724 }
4725
4726 .frm_wrap .frm_choose_image_box {
4727 cursor: pointer;
4728 color: var(--grey-700);
4729 background-color: #F2F2F2;
4730 margin-left: 24px;
4731 text-align: center;
4732 width: 100%;
4733 }
4734
4735 .frm_wrap .frm_choose_image_box:hover {
4736 background: #fff;
4737 }
4738
4739 a.frm_remove_image_option,
4740 .frm_remove_image_option {
4741 color: var(--grey-400);
4742 cursor: pointer;
4743 }
4744
4745 a.frm_remove_image_option:hover .frmsvg,
4746 a.frm_remove_image_option:hover,
4747 .frm_remove_image_option:hover {
4748 color: rgba(40, 47, 54, 0.8);
4749 }
4750
4751 /* Form settings */
4752
4753 .frm-form-setting-tabs {
4754 margin-top: var(--gap-sm) !important;
4755 }
4756
4757 .frm-right-panel > .postbox {
4758 background-color: transparent;
4759 border: none;
4760 box-shadow: none;
4761 margin: 0;
4762 }
4763
4764 .frm-right-panel .postbox.frm_with_icons .inside,
4765 .frm-right-panel .postbox .inside,
4766 .frm-right-panel .inside {
4767 font-size: var(--text-md);
4768 padding: 15px 20px 20px;
4769 color: var(--grey-700);
4770 }
4771
4772 .frm-right-panel .misc-pub-section {
4773 padding: var(--gap-xs) 0;
4774 position: relative;
4775 }
4776
4777 .frm-right-panel .inside a,
4778 .frm-form-setting-tabs a {
4779 font-size: var(--text-md);
4780 color: var(--grey-700);
4781 padding: var(--gap-sm);
4782 display: block;
4783 }
4784
4785 .frm-form-setting-tabs a {
4786 color: var(--grey-900);
4787 padding: var(--gap-sm) var(--gap-md);
4788 }
4789
4790 .frm-right-panel .inside a {
4791 padding: 0;
4792 color: var(--primary-500);
4793 display: inline-block;
4794 }
4795
4796 .frm-right-panel .inside a:hover {
4797 color: var(--primary-700);
4798 }
4799
4800 .frm-form-setting-tabs a:hover {
4801 background: var(--sidebar-hover);
4802 color: var(--grey-900);
4803 }
4804
4805 .frm-right-panel .inside i,
4806 .frm-right-panel .inside .frmsvg,
4807 .frm-form-setting-tabs a i,
4808 .frm-form-setting-tabs a .frmsvg {
4809 margin: 0 5px;
4810 display: inline-block;
4811 width: 20px;
4812 height: 20px;
4813 color: var(--grey-500);
4814 }
4815
4816 .frm-form-setting-tabs a .frmsvg {
4817 margin: 0;
4818 }
4819
4820 .frm-right-panel .inside a:hover i,
4821 .frm-right-panel .inside a:hover .frmsvg,
4822 .frm-form-setting-tabs a:hover .frmsvg,
4823 .frm-form-setting-tabs a:hover span {
4824 color: var(--grey-700);
4825 }
4826
4827 .frm_settings_form .tabs-panel {
4828 padding: 0 25px;
4829 }
4830
4831 #form_settings_page .tabs-panel,
4832 .frm_settings_form .tabs-panel {
4833 max-height: initial !important;
4834 min-height: 50px !important;
4835 }
4836
4837 #frm_adv_info .tabs-panel {
4838 min-height: 0 !important;
4839 overflow-x: hidden;
4840 padding: 0;
4841 border: none;
4842 background: transparent;
4843 }
4844
4845 select.frm_cancelnew, input.frm_enternew {
4846 width: 175px;
4847 }
4848
4849 .frm_posttax_opt_list,
4850 .frm_submit_logic_rows {
4851 border: 1px solid var(--grey-300);
4852 padding: var(--gap-md);
4853 border-radius: var(--small-radius);
4854 margin: 5px 0 5px var(--gap-md);
4855 }
4856
4857 .frm_submit_logic_rows .frm_grid_container > p.frm_form_field {
4858 margin: 0;
4859 }
4860
4861 /* Color picker CSS */
4862 .frm-right-panel .wp-picker-open + .wp-picker-input-wrap {
4863 position: absolute;
4864 margin-left: calc( ( 100% - 35px ) * -1 );
4865 margin-top: 1px;
4866 width: calc( 100% - 36px );
4867 }
4868
4869 .frm-right-panel .wp-picker-container input[type="text"].wp-color-picker {
4870 border: none;
4871 padding: 5px 8px;
4872 font-family: inherit;
4873 color: var(--grey-700);
4874 font-size: var(--text-md);
4875 width: 100%;
4876 line-height: var(--leading);
4877 }
4878
4879 .frm-right-panel .wp-picker-input-wrap .wp-picker-clear {
4880 display: none !important;
4881 }
4882
4883 .frm-right-panel .wp-picker-holder {
4884 position: absolute;
4885 z-index: 999;
4886 }
4887
4888 .frm-right-panel .wp-picker-input-wrap label {
4889 margin-bottom: 0;
4890 }
4891
4892 .frm-right-panel .wp-picker-container .wp-color-result.button {
4893 width: 100%;
4894 overflow: hidden;
4895 margin: 0 !important;
4896 height: var(--h-md) !important;
4897 padding: 0 0 0 var(--gap-lg) !important;
4898 border-radius: var(--small-radius);
4899 border-color: var(--grey-300);
4900 }
4901
4902 .frm-right-panel .wp-color-result-text {
4903 line-height: var(--leading) !important;
4904 font-size: var(--text-md);
4905 background: #fff !important;
4906 color: var(--grey-900);
4907 padding: 5px 8px;
4908 border-color: var(--grey-300);
4909 text-align: left;
4910 }
4911
4912 .frm-right-panel .color-alpha {
4913 width: var(--gap-lg) !important;
4914 }
4915
4916 .frm_grid_container .wp-picker-container {
4917 width: 100%;
4918 position: relative;
4919 }
4920
4921 .wp-picker-container button.wp-color-result {
4922 border: 1px solid var(--grey-300) !important;
4923 }
4924
4925 .wp-picker-container .wp-picker-input-wrap input.hex.wp-color-picker {
4926 max-width: 100%;
4927 position: relative;
4928 }
4929
4930 .frm_end .wp-picker-holder {
4931 margin-left: -145px;
4932 }
4933
4934 .frm_end.frm6 .wp-picker-holder {
4935 margin-left: -86px;
4936 }
4937 /* End of color picker CSS */
4938
4939 /*
4940 These are the styles for the "Enable Formidable styling" toggle in the visual styler.
4941 To use this element, you can call the FrmHtmlHelper::toggle function.
4942 */
4943 .frm_toggle_opt {
4944 padding: 0;
4945 white-space: normal;
4946 display: inline;
4947 vertical-align: middle;
4948 font-weight: normal;
4949 }
4950
4951 .frm_on_label,
4952 .frm_off_label {
4953 color: var(--grey-700);
4954 }
4955
4956 .frm_toggle {
4957 position: relative;
4958 display: inline-block;
4959 width: 40px;
4960 height: var(--h-xs);
4961 vertical-align: middle;
4962 }
4963
4964 .frm_toggle_block {
4965 display: inline-flex !important;
4966 gap: var(--gap-sm);
4967 align-items: center;
4968 }
4969
4970 .frm_toggle input, /* Reverse compatibility */
4971 .frm_toggle_block input {
4972 display:none !important;
4973 }
4974
4975 .frm_toggle_slider {
4976 position: absolute;
4977 cursor: pointer;
4978 top: 0;
4979 left: 0;
4980 right: 0;
4981 bottom: 0;
4982 background-color: var(--grey-border);
4983 transition: .4s;
4984 border-radius: 30px;
4985 }
4986
4987 .frm_toggle_slider:before {
4988 border-radius: 50%;
4989 position: absolute;
4990 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>");
4991 height: 22px;
4992 width: 22px;
4993 padding: 0 5.5px;
4994 left: 1px;
4995 bottom: 1px;
4996 background-color: white;
4997 transition: .4s;
4998 box-sizing: border-box;
4999 box-shadow: var(--box-shadow-md);
5000 font-size: 21px;
5001 line-height: 18px;
5002 }
5003
5004 input:checked + .frm_toggle .frm_toggle_slider {
5005 background-color: var(--primary-500);
5006 }
5007
5008 input:focus + .frm_toggle .frm_toggle_slider {
5009 box-shadow: var(--box-shadow-md);
5010 }
5011
5012 input:checked + .frm_toggle .frm_toggle_slider:before {
5013 padding: 0 6px;
5014 transform: translateX(16px);
5015 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>");
5016 }
5017
5018 input[disabled] + .frm_toggle_slider {
5019 pointer-events: none;
5020 cursor: text;
5021 opacity: .5;
5022 }
5023
5024 .frm_toggle_opt ~ .frm_toggle .frm_toggle_slider:before {
5025 content: '' !important; /* Don't show x/check if off label included or on builder page */
5026 }
5027
5028 .rtl .frm_toggle_opt {
5029 padding: 0 8px;
5030 }
5031
5032 .rtl .frm_toggle_slider:before {
5033 left: 17px;
5034 }
5035
5036 .rtl input:checked + .frm_toggle .frm_toggle_slider:before {
5037 transform: none!important;
5038 left: 1px;
5039 }
5040
5041 /* Deprecated admin toggle */
5042 .frm_toggle_off,
5043 .frm_toggle_on {
5044 display: none;
5045 color: #fff;
5046 z-index: 999;
5047 position: absolute;
5048 font-size: 10px;
5049 line-height: 20px;
5050 left: 6px;
5051 }
5052
5053 .frm_toggle_off {
5054 display: inline;
5055 left: auto;
5056 right: 5px;
5057 color: var(--dark-grey);
5058 }
5059
5060 .frm_toggle_long {
5061 width: 80% !important;
5062 height: 28px;
5063 display: inline-block !important;
5064 }
5065
5066 .frm_toggle_long .frm_toggle_slider {
5067 background: var(--primary-700);
5068 box-shadow: 0 0 0 2px var(--primary-700);
5069 }
5070
5071 .frm_toggle_long .frm_toggle_off,
5072 .frm_toggle_long .frm_toggle_on {
5073 width: 50%;
5074 text-align: center;
5075 font-size: 13px;
5076 line-height: 28px;
5077 }
5078
5079 .frm_toggle_long .frm_toggle_on {
5080 left: 0;
5081 }
5082
5083 .frm_toggle_long .frm_toggle_off {
5084 right: 0;
5085 }
5086
5087 .frm_toggle_long .frm_toggle_slider:before {
5088 width: 50%;
5089 left: 0;
5090 top: 0;
5091 border-radius: var(--border-radius) 0 0 var(--border-radius);
5092 height: 100%;
5093 background-color: #fff;
5094 color: var(--primary-color);
5095 content: '' !important;
5096 }
5097
5098 .frm_toggle_long input:checked + .frm_toggle_slider:before {
5099 transform: translateX(101%);
5100 border-radius: 0 var(--border-radius) var(--border-radius) 0;
5101 }
5102
5103 input:checked + .frm_toggle_slider + .frm_toggle_on {
5104 display: inline;
5105 }
5106
5107 input:checked + .frm_toggle_slider + .frm_toggle_on + .frm_toggle_off {
5108 display: none;
5109 }
5110
5111 .frm_toggle_long .frm_toggle_on,
5112 .frm_toggle_long input:checked + .frm_toggle_slider + .frm_toggle_on + .frm_toggle_off {
5113 display: inline;
5114 color: var(--primary-500);
5115 font-weight: normal;
5116 }
5117
5118 .frm_toggle_long .frm_toggle_off,
5119 .frm_toggle_long input:checked + .frm_toggle_slider + .frm_toggle_on {
5120 color: #fff;
5121 font-weight: bold;
5122 }
5123
5124 /* End toggle styling */
5125
5126 /* Global Settings */
5127
5128 .tabs-panel {
5129 height: auto !important;
5130 min-height: 260px;
5131 }
5132
5133 .tabs-panel.panel_secondary {
5134 min-height: 20px;
5135 margin-top: 10px;
5136 margin-left: 150px;
5137 }
5138
5139 label.frm-example-icon {
5140 margin-right: 20px !important;
5141 display: inline-block !important;
5142 }
5143
5144 #frm_stripe_icon {
5145 border-radius: 5px;
5146 }
5147
5148 #captcha_settings .frm_primary_label {
5149 margin-top: var(--gap-sm);
5150 }
5151
5152 .frm-long-icon-buttons {
5153 display: flex;
5154 gap: var(--gap-md);
5155 }
5156
5157 .frm-long-icon-buttons > label {
5158 border: 1px solid var(--grey-300);
5159 color: var(--grey-700);
5160 border-radius: var(--small-radius);
5161 display: flex;
5162 padding: var(--gap-sm);
5163 gap: var(--gap-sm);
5164 justify-content: center;
5165 align-items: center;
5166 width: calc( 33% - var(--gap-sm) );
5167 box-sizing: border-box;
5168 }
5169
5170 .frm-long-icon-buttons > label:hover {
5171 color: var(--primary-500);
5172 }
5173
5174 .frm-long-icon-buttons input[type=radio] {
5175 display: none;
5176 }
5177
5178 .frm-long-icon-buttons input[type=radio]:checked + label {
5179 border-color: var(--primary-500);
5180 box-shadow: 0 0 0 1px var(--primary-color);
5181 }
5182
5183 .frm-long-icon-buttons label > svg {
5184 height: 21px;
5185 }
5186
5187 .frm-example-icon .frmsvg,
5188 .frm-example-icon i {
5189 height: 20px;
5190 width: 20px;
5191 font-size: 20px;
5192 color: var(--grey-700);
5193 }
5194
5195 .frm_license_msg {
5196 margin-top: 0;
5197 }
5198
5199 .frm_authorized_box .frm-show-unauthorized,
5200 .frm_unauthorized_box .frm-show-authorized {
5201 display: none;
5202 }
5203
5204 .edd_frm_status_icon.frm_icon_font {
5205 color: #D54E21;
5206 margin: 0 5px;
5207 }
5208
5209 .edd_frm_status_icon.frm_icon_font.frm_inactive_icon {
5210 color: green;
5211 }
5212
5213 /* Hide the install steps for solutions */
5214 #form_global_settings .tabs-panel .num svg {
5215 display: none;
5216 }
5217
5218 /* Empty List */
5219
5220 .frm_no_items {
5221 margin: 0 auto 50px;
5222 text-align: center;
5223 color: var(--grey-700);
5224 max-width: 500px;
5225 }
5226
5227 .frm-subscribe {
5228 margin: var(--gap-lg) 0;
5229 }
5230
5231 /* Inbox */
5232
5233 #frm_inbox_page .frm_page_container {
5234 height: auto;
5235 }
5236
5237 .frm_inbox_card {
5238 display: grid;
5239 grid-template-columns: 72px 1fr;
5240 grid-gap: var(--gap-xs);
5241 border-bottom: 1px solid var(--grey-300);
5242 padding: var(--gap-md);
5243 }
5244
5245 .frm_inbox_card_icon {
5246 grid-row: span 3 / span 3;
5247 padding-top: var(--gap-xs);
5248 text-align: center
5249 }
5250
5251 .frm_inbox_card_icon svg {
5252 height: 48px;
5253 width: 48px;
5254 color: var(--blue-border);
5255 }
5256
5257 .frm_inbox_card header {
5258 display: grid;
5259 grid-template-columns: 1fr 150px;
5260 align-items: center;
5261 }
5262
5263 .frm_inbox_card h3 {
5264 border: none;
5265 text-transform: none;
5266 margin: 0;
5267 padding: 0;
5268 }
5269
5270 .frm_inbox_date {
5271 text-align: right;
5272 }
5273
5274 .frm_inbox_count {
5275 color: #fff;
5276 border-radius: 50%;
5277 display: inline-block;
5278 margin-right: 8px;
5279 font-size: 11px;
5280 text-align: center;
5281 }
5282
5283 .frm_inbox_count {
5284 min-width: 18px;
5285 height: 18px;
5286 margin-left: 2px;
5287 vertical-align: text-bottom;
5288 }
5289
5290 /* Import/Export */
5291 .frm-lite .xml_opts .frm-export-xml-items {
5292 display: none;
5293 }
5294
5295 .csv_opts #frm_csv_col_sep {
5296 width: 45px;
5297 }
5298
5299 #frm_advanced td.frm_left_label {
5300 width: 20%;
5301 padding-right: 2px;
5302 }
5303
5304 #frm_where_options select {
5305 max-width: 200px;
5306 }
5307
5308 #frm_where_options select.frm_insert_where_options {
5309 width: 30%;
5310 }
5311
5312 #frm_where_options select.frm_where_is_options {
5313 width: 20%;
5314 }
5315
5316 #frm_where_options span.frm_where_val {
5317 width: 32%;
5318 display: inline-block;
5319 position: relative;
5320 }
5321
5322 #frm_where_options span.frm_where_val .frm_tooltip_icon {
5323 left: -4px;
5324 position: absolute;
5325 }
5326
5327 #frm_where_options span.frm_where_val.frm_hidden {
5328 display: none;
5329 }
5330
5331 #frm_where_options span.frm_where_val input, #frm_where_options span.frm_where_val select {
5332 width: 90%;
5333 margin-left: 10px;
5334 }
5335
5336 #frm_where_options {
5337 min-height: 31px;
5338 }
5339
5340 .tabs-panel.active .tabs-panel, .frm_settings_form .tabs-panel .tabs-panel {
5341 border: none;
5342 padding: 0;
5343 }
5344
5345 .frm-feature-banner {
5346 background: var(--grey-700);
5347 color: #fff;
5348 border-radius: var(--small-radius);
5349 padding: 20px;
5350 margin: 10px 0;
5351 }
5352
5353 .frm-feature-banner p {
5354 font-size: var(--text-sm);
5355 }
5356
5357 .frm-feature-banner .dismiss {
5358 margin-top: -10px;
5359 margin-right: -10px;
5360 }
5361
5362 .frm-feature-banner .dismiss svg {
5363 color: #fff;
5364 }
5365
5366 .frm-feature-banner .frm-big-icon {
5367 padding-right: 20px;
5368 float: left;
5369 min-height: 60px;
5370 }
5371
5372 .frm-big-icon svg {
5373 height: 60px;
5374 width: 60px;
5375 }
5376
5377 .frm-feature-banner p {
5378 margin-top: 0;
5379 }
5380
5381 /*for add-on reverse compatibility */
5382
5383 .frm_98_width {
5384 width: 100% !important;
5385 }
5386
5387 /*Form Settings Tab*/
5388
5389 h2.frm-h2,
5390 .frm_form_settings h2 {
5391 border-bottom: 1px solid var(--grey-300);
5392 color: var(--grey-900);
5393 font-weight: 400 !important;
5394 padding: 9px 0 5px;
5395 margin: 0;
5396 }
5397
5398 .frm_settings_form h3,
5399 .frm_form_settings h3,
5400 .frm_form_settings span.frm_add_logic_link {
5401 font-size: var(--text-md);
5402 border-top: 1px solid var(--grey-300);
5403 padding-top: var(--gap-sm);
5404 margin: var(--gap-sm) 0;
5405 font-weight: normal;
5406 text-transform: uppercase;
5407 color: var(--medium-grey);
5408 display: block;
5409 }
5410
5411 .frm_form_settings .howto {
5412 color: var(--grey-500);
5413 font-size: var(--text-sm);
5414 margin-top: 8px;
5415 }
5416
5417 .frm_form_settings .advanced_settings .form-table {
5418 margin-top: 0;
5419 }
5420
5421 .frm_form_settings td.frm_175_width {
5422 width: 175px;
5423 }
5424
5425 .frm_form_settings #success_url {
5426 width: 95%;
5427 }
5428
5429 .frm_wrap .ui-autocomplete {
5430 padding: 3px 0;
5431 max-height: 310px;
5432 }
5433
5434 .frm_wrap .ui-widget {
5435 font-family: inherit;
5436 }
5437
5438 .frm_wrap .ui-autocomplete li {
5439 padding: 2px 4px;
5440 background: none;
5441 color: var(--grey-700);
5442 border: none;
5443 font-weight: normal;
5444 }
5445
5446 .frm_wrap .ui-autocomplete .ui-menu-item-wrapper.ui-state-active {
5447 border: none;
5448 font-weight: inherit;
5449 }
5450
5451 .frm_select_with_label {
5452 margin: 7px 0 0;
5453 }
5454
5455 /* Customization Panel */
5456 #frm-insert-fields-box, #frm-conditionals {
5457 max-height: none;
5458 }
5459
5460 #frm-conditionals, #frm-adv-info-tab {
5461 display: none;
5462 max-height: 355px;
5463 }
5464
5465 #frm-insert-fields-box ul.subsubsub,
5466 #frm-conditionals ul.subsubsub {
5467 float: right;
5468 margin: 0;
5469 }
5470
5471 #frm-insert-fields-box ul.alignleft,
5472 #frm-conditionals ul.alignleft {
5473 margin: 5px 0 0;
5474 }
5475
5476 #frm_adv_info ul.frm_code_list.frm-full-hover {
5477 clear: both;
5478 max-height: 215px;
5479 overflow: auto;
5480 }
5481
5482 #frm-insert-fields-box ul.frm_code_list li.clear.frm_block {
5483 height: 10px;
5484 }
5485
5486 #frm_adv_info .frm_noallow {
5487 display: none;
5488 }
5489
5490 #frm_adv_info #frm-conditionals .frm_noallow {
5491 display: block;
5492 }
5493
5494 /* Customize HTML Tab */
5495 #frm_html_tab.frm_hidden {
5496 display: none;
5497 }
5498
5499 #frm_html_tab.active {
5500 display: inline;
5501 }
5502
5503 /*Form Actions Tab*/
5504 .frm_email_reply_container select,
5505 .frm_email_reply_container input,
5506 .form-table td.frm_150_width {
5507 width: 170px;
5508 }
5509
5510 #frm_notification_settings .frm_no_top_padding {
5511 padding-top: 0;
5512 }
5513
5514 .frm_email_settings.frm_email_settings.widgets-holder-wrap {
5515 overflow: auto;
5516 box-shadow: none;
5517 }
5518
5519 #frm_notification_settings .widget-top .widget-action,
5520 #frm_form_editor_container .widget-top .widget-action {
5521 border: 0;
5522 margin: 0;
5523 padding: 8px;
5524 background: 0 0;
5525 cursor: pointer;
5526 outline: 0;
5527 }
5528
5529 #frm_email_addon_menu {
5530 border: 1px solid var(--grey-300);
5531 padding: var(--gap-sm);
5532 border-radius: 4px;
5533 margin: var(--gap-md) 0 var(--gap-sm);
5534 }
5535
5536 #frm_email_addon_menu .frm-search {
5537 float: right;
5538 margin: 0;
5539 }
5540
5541 #frm_email_addon_menu h3.frm-no-border {
5542 clear: none;
5543 padding-top: 7px;
5544 }
5545
5546 .frm_email_settings .widget .widget-top {
5547 background-color: var(--sidebar-color);
5548 }
5549
5550 .frm_email_settings .widget .widget-top,
5551 .frm_email_settings .widget .widget-top h3 {
5552 cursor: pointer !important;
5553 }
5554
5555 .frm_email_settings .widget {
5556 margin-bottom: var(--gap-sm);
5557 }
5558
5559 .frm_form_action_settings .widget-top {
5560 box-shadow: none;
5561 border-color: var(--grey-300);
5562 border-radius: var(--small-radius);
5563 background: var(--lightest-grey);
5564 color: var(--grey-700);
5565 }
5566
5567 .frm_form_action_settings:hover .widget-top {
5568 border-color: var(--grey);
5569 }
5570
5571 .frm_form_action_settings.open .widget-top {
5572 border-bottom-left-radius: 0;
5573 border-bottom-right-radius: 0;
5574 border-bottom: none;
5575 }
5576
5577 .frm_form_action_settings.open:hover .widget-top {
5578 border-color: var(--grey-300);
5579 }
5580
5581 .frm_form_action_settings > .widget-inside {
5582 display: none;
5583 }
5584
5585 .frm_form_action_settings.open > .widget-inside {
5586 display: block;
5587 }
5588
5589 .frm_form_action_settings .widget-inside {
5590 min-height: 25px;
5591 padding: 15px;
5592 border-color: var(--grey-300);
5593 border-bottom-left-radius: 4px;
5594 border-bottom-right-radius: 4px;
5595 }
5596
5597 .frm_form_action_settings .widget-title h4,
5598 .frm_form_action_settings .widget-title h3 {
5599 display: inline-block;
5600 border-bottom: none;
5601 padding: 10px 10px 5px;
5602 font-size: var(--text-md);
5603 font-weight: 500;
5604 }
5605
5606 #frm_email_addon_menu h3 {
5607 margin: 0 0 var(--gap-sm);
5608 clear: both;
5609 }
5610
5611 .frm_single_api_settings p > label {
5612 display: inline;
5613 }
5614
5615 .frm_form_action_icon {
5616 margin-right: 5px;
5617 }
5618
5619 .frm_actions_list {
5620 margin: 0;
5621 display: inline;
5622 }
5623
5624 .frm_actions_list li {
5625 float: left;
5626 width: 15.6%;
5627 margin: 10px .5% 15px;
5628 height: 100px;
5629 text-align: center;
5630 }
5631
5632 .frm-limited-actions .frm-group-heading,
5633 .frm-limited-actions #frm-hide-groups,
5634 .frm-all-actions #frm-show-groups,
5635 .frm-limited-actions .frm-not-installed:not(.frm-search-result):not(.frm-default-show) {
5636 display: none;
5637 }
5638
5639 label.frm_action_events {
5640 padding-left: 15px;
5641 }
5642
5643 #frm-hide-groups,
5644 #frm-show-groups {
5645 font-size: var(--text-md);
5646 float: right;
5647 }
5648
5649 .frm_actions_list a:active, .frm_actions_list a:focus {
5650 outline: none;
5651 }
5652
5653 .frm_actions_list a {
5654 font-size: var(--text-sm);
5655 color: var(--grey-700);
5656 word-break: break-word;
5657 }
5658
5659 .frm_actions_list span.frm-outer-circle {
5660 /* 50px total with 30px content */
5661 background-color: var(--grey-100);
5662 padding: 10px;
5663 text-align: center;
5664 border-radius: 50%;
5665 display: block;
5666 width: 30px;
5667 height: 30px;
5668 margin: 0 auto 15px;
5669 line-height: 1;
5670 }
5671
5672 .frm_email_settings .widget-title h4 {
5673 color: var(--grey-700);
5674 }
5675
5676 .frm_disabled_action .widget-title h4 {
5677 color: var(--grey);
5678 }
5679
5680 .frm_actions_list a .frmsvg,
5681 .frm_actions_list a i {
5682 height: 18px;
5683 width: 18px;
5684 font-size: 18px;
5685 padding: 2px;
5686 color: var(--lightest-grey);
5687 }
5688
5689 span.frm-inner-circle,
5690 .frm_email_settings .widget-title .frm_form_action_icon {
5691 background-color: var(--grey-400);
5692 border-radius: 50%;
5693 display: inline-block;
5694 text-align: center;
5695 line-height: 1;
5696 }
5697
5698 span.frm-inner-circle {
5699 background-color: var(--primary-700);
5700 height: 22px;
5701 width: 22px;
5702 padding: 4px;
5703 color: #fff;
5704 }
5705
5706 .frm-inner-circle svg {
5707 fill: currentColor;
5708 }
5709
5710 .frm_email_settings .widget-title .frm_form_action_icon {
5711 height: 15px;
5712 width: 15px;
5713 padding: 5px;
5714 color: #fff;
5715 vertical-align: middle;
5716 }
5717
5718 .frm_actions_list .frmsvg,
5719 .frm_actions_list i:before,
5720 .frm_email_settings .widget-title .frm_form_action_icon i,
5721 .frm_email_settings .widget-title .frm_form_action_icon .frmsvg {
5722 height: 15px;
5723 width: 15px;
5724 vertical-align: text-top;
5725 }
5726
5727 .frm_actions_list i:before {
5728 vertical-align: middle;
5729 }
5730
5731 .frm_email_settings .widget-title:hover .frm_form_action_icon {
5732 background-color: var(--grey);
5733 }
5734
5735 span.frm-inner-circle.frm-inverse {
5736 background-color: transparent;
5737 color: var(--primary-700);
5738 padding: 0;
5739 height: 30px;
5740 width: 100%;
5741 }
5742
5743 .frm_actions_list span.frm-inverse i,
5744 .frm_actions_list span.frm-inverse .frmsvg {
5745 color: var(--primary-700);
5746 height: 30px;
5747 width: 30px;
5748 font-size: 30px;
5749 padding: 0;
5750 }
5751
5752 .frm_actions_list i.frm-inverse:before {
5753 height: 30px;
5754 width: 100%;
5755 font-size: 30px;
5756 }
5757
5758 .frm_email_settings .widget-title .frm_form_action_icon.frm-inverse {
5759 background: #fff;
5760 padding: 0;
5761 height: 24px;
5762 width: 24px;
5763 }
5764
5765 .frm_email_settings .widget-title .frm_form_action_icon.frm-inverse .frmsvg,
5766 .frm_email_settings .widget-title .frm_form_action_icon.frm-inverse i:before {
5767 color: var(--grey-400);
5768 height: 24px;
5769 width: 24px;
5770 font-size: 24px;
5771 }
5772
5773 .frm_email_settings .widget-title:hover .frm_form_action_icon.frm-inverse .frmsvg,
5774 .frm_email_settings .widget-title:hover .frm_form_action_icon.frm-inverse i:before {
5775 color: var(--grey-500);
5776 }
5777
5778 .frm_email_icons {
5779 padding: 10px 0 5px 6px;
5780 font-size: 20px;
5781 }
5782
5783 .frm_email_icons a {
5784 margin-left: 8px;
5785 color: var(--grey);
5786 opacity: 0;
5787 transition: all .2s ease;
5788 }
5789
5790 .frm_email_icons a .frmsvg {
5791 color: var(--grey);
5792 }
5793
5794 .frm_email_icons a:hover,
5795 .widget-top:hover .frm_email_icons a {
5796 opacity: 1;
5797 }
5798
5799 .frm_actions_list a.frm_inactive_action {
5800 color: var(--grey);
5801 }
5802
5803 .frm_inactive_action .frm-inner-circle,
5804 .frm_actions_list .frm_inactive_action i {
5805 opacity: .4;
5806 }
5807
5808 table td, .form-table tr td {
5809 vertical-align: top;
5810 }
5811
5812 #new_fields .form-table tr td {
5813 display: block;
5814 padding: 7px 0 0;
5815 }
5816
5817 #new_fields .form-table tr td:first-child {
5818 margin: 0;
5819 }
5820
5821 #new_fields .form-table tr td:last-child {
5822 margin-bottom: 9px;
5823 }
5824
5825 .form-table #list-table th {
5826 text-align: center;
5827 }
5828
5829 #form_settings_page th,
5830 #form_settings_page td,
5831 .frm_settings_form td,
5832 #frm_notification_settings .frm_form_action_settings td p {
5833 padding: 7px 0;
5834 }
5835
5836 #permissions_settings_settings .frm_grid_container {
5837 align-items: center;
5838 }
5839
5840 #frm_notification_settings .form-table > tbody > tr > th {
5841 width: 150px;
5842 font-weight: normal;
5843 padding-right: 10px;
5844 }
5845
5846 #frm_notification_settings .frm_single_email_settings .form-table > tbody > tr > th {
5847 width: 80px;
5848 }
5849
5850 #frm_notification_settings table tr td:first-child {
5851 padding-left: 0;
5852 }
5853
5854 #frm_notification_settings table tr td:last-child {
5855 padding-right: 0;
5856 }
5857
5858
5859 #frm_notification_settings .frm_left_label {
5860 /* For add-ons that haven't been updated for 4.0 */
5861 float: none;
5862 width: auto !important;
5863 }
5864
5865 .frm-fields .frm_autoresponder_rows select {
5866 width: auto;
5867 }
5868
5869 #frm_notification_settings .frm_with_left_label,
5870 #frm_notification_settings .frm_left_label + textarea,
5871 #frm_notification_settings .frm_left_label + select,
5872 #frm_notification_settings .frm_left_label + input[type=text] {
5873 width: 100%;
5874 }
5875
5876 #frm_notification_settings .frm_email_buttons {
5877 padding: var(--gap-2xs);
5878 background: var(--light-blue);
5879 color: var(--primary-700);
5880 border-radius: var(--small-radius);
5881 border-color: var(--blue-border);
5882 line-height: 1;
5883 height: auto;
5884 min-height: 12px;
5885 font-size: var(--text-xs);
5886 box-shadow: none;
5887 }
5888
5889 p.frm_bcc_cc_container,
5890 p.frm_reply_to_container {
5891 float: right;
5892 z-index: 1;
5893 position: relative;
5894 }
5895
5896 p.frm_bcc_cc_container {
5897 margin: 14px 0 0;
5898 }
5899
5900 p.frm_reply_to_container {
5901 margin: -4px 0 0;
5902 }
5903
5904 .frm_email_row .frm_cancel1_icon:before {
5905 vertical-align: bottom;
5906 }
5907
5908 .frm_logic_field_opts {
5909 max-width: 35%;
5910 }
5911
5912 .frm-inline-select,
5913 p.frm-inline-select,
5914 #frm_submit_logic_row,
5915 .frm_logic_rows .frm-collapse-me {
5916 line-height: var(--h-md) !important;
5917 }
5918
5919 .frm_logic_row {
5920 padding: var(--gap-xs) 0 0;
5921 align-items: center;
5922 }
5923
5924 .frm-single-settings .frm_logic_row > select {
5925 max-width: 32.5% !important;
5926 }
5927
5928 .frm-single-settings .frm_logic_row select:nth-child(2) {
5929 max-width: 20% !important;
5930 }
5931
5932 .frm-single-settings .frm_logic_row span input,
5933 .frm-single-settings .frm_logic_row span select {
5934 max-width: 36% !important;
5935 }
5936
5937 .frm-single-settings .frm_logic_row input {
5938 max-width: 118px !important;
5939 }
5940
5941 .frm-single-settings ul.frm_sortable_field_opts {
5942 margin-bottom: 5px;
5943 }
5944
5945 .advanced_settings .frm_logic_row {
5946 margin: 14px 0;
5947 }
5948
5949 .advanced_settings .frm_logic_row select,
5950 .advanced_settings .frm_logic_row input {
5951 max-width: 30% !important;
5952 }
5953
5954 .frm_form_action_settings .frm_logic_row p {
5955 margin-top: 0;
5956 margin-bottom: 0;
5957 padding: 0;
5958 }
5959
5960 #poststuff .widgets-holder-wrap .frm_form_action_settings .widget-inside {
5961 padding-bottom: 0;
5962 }
5963
5964 #poststuff .frm_form_settings .widgets-holder-wrap .widget-inside {
5965 padding-left: 15px;
5966 padding-right: 15px;
5967 }
5968
5969 #form_global_settings h3 {
5970 font-size: var(--text-sm);
5971 margin-top: 25px;
5972 }
5973
5974 #form_global_settings .tabs-panel + h3 {
5975 margin-top: 0;
5976 border: none;
5977 }
5978
5979 #poststuff .frm_form_settings .widget-inside h3,
5980 #poststuff .frm_form_settings .advanced_settings h3,
5981 #poststuff .frm_settings_form h3,
5982 #frm_advanced .inside h3 {
5983 border-top: 1px solid #eee;
5984 border-bottom: none;
5985 margin: 15px -15px 0;
5986 padding: 8px 15px;
5987 font-size: var(--text-sm);
5988 }
5989
5990 #poststuff .frm_form_settings h3.frm_first_h3,
5991 #poststuff h3.frm_first_h3 {
5992 border: none;
5993 margin-top: 0;
5994 }
5995
5996 h3.frm_add_logic_link {
5997 margin-bottom: 0 !important;
5998 }
5999
6000 a.frm_add_logic_link.frm_hidden {
6001 display: none;
6002 }
6003
6004 .frm_add_logic_link .frmsvg,
6005 .frm_add_logic_link i {
6006 margin-right: 5px;
6007 }
6008
6009 .frm_right_addon {
6010 position: relative;
6011 }
6012
6013 .frm_right_addon .frm_remove_field {
6014 position: absolute;
6015 padding: 5px 10px;
6016 right: 10px;
6017 bottom: 0;
6018 }
6019
6020 .frm_right_addon input {
6021 padding-right: var(--gap-lg);
6022 }
6023
6024 .frm_icon_font {
6025 color: #A0A0A0;
6026 color: var(--grey);
6027 }
6028
6029 .frm-fields label .frm_icon_font {
6030 font-size: inherit;
6031 }
6032
6033 .misc-pub-revisions.frm_icon_font,
6034 .misc-pub-revisions.frm_icon_font:hover {
6035 color: inherit;
6036 }
6037
6038 .postbox.frm_with_icons .inside {
6039 padding: 0;
6040 margin: 0;
6041 }
6042
6043 .frm_add_tag:before {
6044 content: '\e602';
6045 }
6046
6047 .frm_remove_tag:before {
6048 content: '\e600';
6049 }
6050
6051 .frm_logic_row .frm_remove_tag {
6052 padding-left: 7px;
6053 }
6054
6055 .frm_logic_row .frm1 > .frm_remove_tag {
6056 padding: 0;
6057 }
6058
6059 .frm_tooltip_icon:before {
6060 font-size: 13px;
6061 vertical-align: top;
6062 }
6063
6064 .form-field input[type=text].frm_other_input {
6065 width: 30%;
6066 margin-left: 10px;
6067 }
6068
6069 .frm-add-other {
6070 text-align: right;
6071 }
6072
6073 .frm_add_opt .frm_add_tag,
6074 .frm-add-other .frm_add_tag {
6075 vertical-align: 20%;
6076 }
6077
6078 .frm_action_icon {
6079 margin: 5px 0 0 5px;
6080 }
6081
6082 span.frm_action_icon {
6083 margin: 0 4px 0 0;
6084 }
6085
6086 .frm_action_icon:active {
6087 outline: none;
6088 }
6089
6090 a.frm_action_icon:hover {
6091 text-decoration: none;
6092 }
6093
6094 .frm_action_icon.frm_error_icon:before {
6095 content: '\e608';
6096 }
6097
6098 .frm_inactive_icon.frm_action_icon.frm_error_icon:before {
6099 content: '\e606';
6100 }
6101
6102 .frm-field-action-icons {
6103 text-align: right;
6104 position: absolute;
6105 top: 2px;
6106 right: 2px;
6107 max-width: 100%;
6108 }
6109
6110 .frm-field-action-icons .frm-field-id {
6111 display: inline-block;
6112 overflow: hidden;
6113 text-overflow: ellipsis;
6114 white-space: nowrap;
6115 width: 80px;
6116 max-width: calc( 100% - 50px );
6117 position: relative;
6118 top: 2px;
6119 }
6120
6121 .frm-field-action-icons > a {
6122 font-size: var(--text-md);
6123 width: 17px;
6124 }
6125
6126 .frm-field-action-icons a:hover {
6127 text-decoration: none;
6128 }
6129
6130 .frm-field-action-icons .dropdown {
6131 display: inline-block;
6132 }
6133
6134 .frm-field-action-icons > a .frmsvg {
6135 color: var(--grey-500) !important;
6136 font-size: 17px;
6137 width: 17px;
6138 height: 17px;
6139 }
6140
6141 .frm-field-action-icons > a .frmsvg,
6142 .frm-field-action-icons > div > a .frmsvg {
6143 vertical-align: baseline;
6144 }
6145
6146 .edit_field_type_end_divider .frm-field-action-icons {
6147 display: none !important;
6148 }
6149
6150 .frm-move {
6151 cursor: grab;
6152 }
6153
6154 span.howto {
6155 display: inline;
6156 }
6157
6158 .frm_import_message {
6159 margin: 15px 0;
6160 line-height: 2.5em;
6161 }
6162
6163 .frm_sorting .form-field .widget input[type="text"],
6164 .frm_sorting .form-field .widget input[type="number"],
6165 .frm_sorting .form-field .widget select,
6166 #wpcontent .frm_sorting .form-field .widget select,
6167 .frm_sorting .form-field .widget textarea {
6168 width: auto;
6169 }
6170
6171 .tagchecklist span.no_taglist {
6172 display: inline;
6173 float: none;
6174 line-height: 15px;
6175 margin-right: 0;
6176 font-size: inherit;
6177 }
6178
6179 .tagchecklist .frm_exclude_cat_list span {
6180 display: inline;
6181 }
6182
6183 .tagchecklist span a:before {
6184 line-height: 23px;
6185 text-align: start;
6186 }
6187
6188 /* Entries Page */
6189 .frm_no_entries_form {
6190 padding: 60px 0;
6191 }
6192
6193 .frm_no_entries_form .frm_no_entries_header {
6194 font-size: 20px;
6195 margin-bottom: 10px;
6196 }
6197
6198 .frm_no_entries_form .frm_no_entries_text {
6199 line-height: var(--leading);
6200 }
6201
6202 #form_entries_page #the-list .no-items {
6203 height: 240px; /* Equals to the max height of search dropdown */
6204 }
6205
6206 /* Reports Page */
6207 #form_reports_page img.frm_no_reports {
6208 max-width: 100%;
6209 }
6210
6211 .frm_wrap .google-visualization-table .gradient,
6212 .frm_wrap .google-visualization-table-tr-head,
6213 .frm_wrap .google-visualization-table-tr-odd,
6214 .frm_wrap .google-visualization-table-tr-odd.google-visualization-table-tr-over {
6215 background: var(--lightest-grey);
6216 }
6217
6218 .frm_wrap .google-visualization-table-tr-over {
6219 background: #fff;
6220 }
6221
6222 .frm_wrap .google-visualization-table-table th,
6223 .frm_wrap .google-visualization-table-table td {
6224 border-right-width: 0;
6225 padding: 10px !important;
6226 }
6227
6228 .frm_wrap .google-visualization-table-tr-head,
6229 .frm_wrap .google-visualization-table-tr-head th {
6230 white-space: pre-wrap;
6231 font-size: var(--text-md);
6232 font-weight: 400 !important;
6233 text-align: left;
6234 }
6235
6236 .frm_wrap .google-visualization-table-td-number {
6237 text-align: inherit;
6238 }
6239
6240 #form_reports_page .postbox{
6241 text-align: center;
6242 float: none;
6243 display: inline-block;
6244 margin-right: 2%;
6245 width: 20%;
6246 min-width: 175px;
6247 }
6248
6249 /* Views Page */
6250 #form_views_page img.frm_no_views {
6251 max-width: 100%;
6252 }
6253
6254 /* Field options popup */
6255 .frm_field_opts_popup {
6256 min-width: 300px;
6257 background-color: #fff;
6258 }
6259
6260 .frm_field_opts_popup #wpadminbar {
6261 display: none;
6262 }
6263
6264 .frm_prepop {
6265 width: 100%;
6266 list-style: none;
6267 overflow: auto;
6268 margin: 0;
6269 max-height: 295px;
6270 }
6271
6272 .frm_prepop li {
6273 margin: 0;
6274 }
6275
6276 .frm_prepop li a {
6277 display: block;
6278 text-decoration: none;
6279 cursor: pointer;
6280 padding: 5px 20px;
6281 }
6282
6283 .frm_prepop li a:hover {
6284 background: var(--sidebar-color);
6285 }
6286
6287 /* */
6288 #frm_form_editor_container #frm_form_key_box {
6289 width: 13em;
6290 max-width: 30%
6291 }
6292
6293 #frm_form_editor_container #frm_form_desc {
6294 width: 70%;
6295 }
6296
6297 #frm_form_editor_container .ui-widget-content {
6298 display: none;
6299 padding: 15px;
6300 }
6301
6302 #frm_form_editor_container .ui-widget-content label {
6303 float: left;
6304 width: 170px;
6305 text-align: right;
6306 padding-right: 5px;
6307 clear: both;
6308 }
6309
6310 #frm_form_editor_container .ui-widget-content label.nofloat {
6311 clear: none;
6312 float: none;
6313 margin-left: 10px;
6314 }
6315
6316 #frm_form_editor_container .ui-state-default {
6317 color: #333 !important;
6318 }
6319
6320 .frm_green {
6321 color: var(--green) !important;
6322 }
6323
6324 #frm_form_editor_container .ui-state-default a.frm_orange, .frm-right-panel a.frm_orange, #postbox-container-1 a.frm_orange {
6325 color: #D54E21;
6326 }
6327
6328 #styling_settings input[type=checkbox], #styling_settings input[type=radio] {
6329 border: solid 1px #bbb;
6330 }
6331
6332 #styling_settings .widget .widget-top, #frm_form_editor_container .widget .widget-top {
6333 cursor: pointer;
6334 }
6335
6336 .frm_sorting .widget, .frm_settings_page .widget {
6337 background: #fff;
6338 }
6339
6340 .frm_sorting .widget-title h4 {
6341 font-weight: normal;
6342 }
6343
6344 .frm_sorting .widget, #postbox-container-1 .widget, .frm-right-panel .widget, .frm_settings_page .widget {
6345 margin-bottom: 0;
6346 }
6347
6348 .frm_settings_page .widget-inside {
6349 padding: 0 5px 5px;
6350 }
6351
6352 .frm_sorting .widget,
6353 .widget-inside,
6354 .frm_sorting .form-field .widget {
6355 display: none;
6356 }
6357
6358 #frm-show-fields {
6359 min-height: 350px;
6360 padding: 0 0 35px;
6361 margin: 0;
6362 position: relative;
6363 }
6364
6365 .frm-has-fields #frm-show-fields {
6366 min-height: 50px;
6367 }
6368
6369 #frm_builder_page .frm-lite-credit-card-element,
6370 body.frm-admin-page-styles .frm-lite-credit-card-element {
6371 position: relative;
6372 }
6373
6374 #frm_builder_page .frm-lite-credit-card-element > div,
6375 body.frm-admin-page-styles .frm-lite-credit-card-element > div {
6376 position: absolute;
6377 top: calc( 50% - 1px);
6378 transform: translateY(-50%);
6379 right: 10px;
6380 color: #d0d4dd;
6381 }
6382
6383 #frm_builder_page #frm_field_group_controls {
6384 position: absolute;
6385 padding: 5px;
6386 border-radius: 4px 4px 0 0;
6387 text-align: right;
6388 box-sizing: border-box;
6389 right: 0;
6390 top: -28px;
6391 height: 28px;
6392 z-index: 3; /* section dividers use z-index: 2; position above that to avoid it taking over hover control. */
6393 }
6394
6395 .frm-field-group-hover-target,
6396 .frm-has-open-field-group-popup,
6397 #frm_builder_page #frm_field_group_controls,
6398 .frm-selected-field-group {
6399 background: rgba(65, 153, 253, 0.04);
6400 }
6401
6402 .frm-selected-field-group {
6403 position: relative;
6404 }
6405
6406 #frm_builder_page #frm_field_group_controls > span:first-child {
6407 margin-right: 5px;
6408 }
6409
6410 #frm_builder_page #frm_field_group_controls svg {
6411 pointer-events: none;
6412 }
6413
6414 #frm_field_group_controls {
6415 visibility: hidden;
6416 }
6417
6418 .frm-field-group-hover-target #frm_field_group_controls {
6419 visibility: visible;
6420 }
6421
6422 #frm_field_group_controls .dropdown-item a span {
6423 color: var(--grey-700);
6424 }
6425
6426 #frm_field_group_controls .dropdown-item a:hover {
6427 text-decoration: none;
6428 }
6429
6430 .frm_sorting .no_repeat_section li.ui-state-default.edit_field_type_end_divider {
6431 display: none !important;
6432 }
6433
6434 .frm-right-panel .ui-state-default,
6435 #postbox-container-1 .ui-state-default,
6436 .frm_sorting > li.ui-state-default,
6437 .frm_sorting .no_repeat_section li.ui-state-default.edit_field_type_end_divider:hover {
6438 border: 1px solid transparent;
6439 font-weight: normal !important;
6440 background-color: transparent;
6441 background-image: none;
6442 padding: 5px;
6443 margin: 0;
6444 box-shadow: none;
6445 display: block;
6446 text-align: inherit !important;
6447 overflow: visible;
6448 position: relative;
6449 }
6450
6451 #frm-show-fields li.frm_cancel_sort {
6452 /* If a section gets dropped into a section, hide it */
6453 display: none;
6454 }
6455
6456 .divider_drop {
6457 text-align: center;
6458 }
6459
6460 .divider_drop .howto .frm_icon_font {
6461 font-style: normal;
6462 }
6463
6464 .show_repeat_sec {
6465 display: none;
6466 }
6467
6468 .repeat_section .show_repeat_sec {
6469 display: inline-block;
6470 margin: 5px 0 0;
6471 }
6472
6473 .repeat_section tr.show_repeat_sec {
6474 display: table-row;
6475 }
6476
6477 .repeat_format .frm_repeat_label,
6478 .repeat_formattext .frmsvg,
6479 .repeat_formattext i {
6480 display: none;
6481 }
6482
6483 .frm_button {
6484 text-decoration: none;
6485 border: 1px solid #eee;
6486 padding: 5px;
6487 color: #444;
6488 vertical-align: middle;
6489 box-shadow: none !important;
6490 }
6491
6492 a.frm_button:hover {
6493 text-decoration: none !important;
6494 }
6495
6496 .frm_button,
6497 .frm_button .frm_icon_font:before {
6498 font-size: 13px;
6499 vertical-align: middle;
6500 }
6501
6502 .frm_button .frmsvg {
6503 width: 13px;
6504 height: 13px;
6505 }
6506
6507 .frm-right-panel .ui-state-default,
6508 #postbox-container-1 .ui-state-default {
6509 padding: 0;
6510 margin: 0;
6511 }
6512
6513 ul.start_divider {
6514 padding: 8px 13px 0 8px;
6515 min-height: 115px;
6516 transition: all 0.4s linear;
6517 }
6518
6519 .frm-section-collapsed .frm_no_section_fields,
6520 .frm-section-collapsed ul.start_divider {
6521 height: 0;
6522 min-height: 0 !important;
6523 }
6524
6525 .frm-section-collapsed ul.start_divider {
6526 overflow: hidden;
6527 }
6528
6529 .frm-section-collapsed .frm_no_section_fields {
6530 overflow: hidden;
6531 padding: 0;
6532 opacity: 0;
6533 }
6534
6535 .frm-section-collapsed .divider_section_only .frm-collapsed-label {
6536 display: inline;
6537 }
6538
6539 .frm-page-collapsed .frm_clone_icon,
6540 .frm-page-collapsed .frm_delete_field,
6541 .frm-page-collapsed .frm_clone_field,
6542 .frm-section-collapsed .frm_clone_icon {
6543 opacity: .5;
6544 cursor: not-allowed;
6545 }
6546
6547 /* Hide the Duplicate summary option because we are missing the logic that also adds a new page */
6548 .edit_field_type_summary .frm_more_options_li:nth-child(2) {
6549 display: none !important;
6550 }
6551
6552 .edit_field_type_submit .frm_more_options_li:not(:last-child) {
6553 display: none !important;
6554 }
6555
6556 .frm_no_section_fields:not(.frm_block) + ul.start_divider {
6557 padding: 0;
6558 min-height: 132px;
6559 }
6560
6561 .frm_sorting li.ui-state-default .divider_section_only {
6562 padding: 6px;
6563 margin-top: -10px;
6564 border: 2px solid transparent;
6565 border-radius: var(--small-radius);
6566 z-index: 2;
6567 position: relative;
6568 }
6569
6570 .divider_section_only > .frm_inner_field_container {
6571 padding: 5px 0;
6572 margin: 0;
6573 }
6574
6575 .frm-collapsed-label,
6576 .divider_section_only > .frm_inner_field_container .frm_form_fields {
6577 display: none;
6578 }
6579
6580 .frm-section-collapsed .divider_section_only:after,
6581 .divider_section_only:before {
6582 content: '';
6583 display: block;
6584 padding: 2px 0;
6585 line-height: 1px;
6586 border-top: 2px solid var(--grey-300);
6587 top: -2px;
6588 position: absolute;
6589 width: 100%;
6590 transition: .5s border-color ease-in-out;
6591 }
6592
6593 .frm-section-collapsed .divider_section_only:after {
6594 top: auto;
6595 bottom: -6px;
6596 }
6597
6598 .frm-section-collapsed .divider_section_only:hover:after,
6599 li.selected.frm-section-collapsed .divider_section_only:before,
6600 li.selected.frm-section-collapsed .divider_section_only:after,
6601 .divider_section_only:hover:before,
6602 li.selected .divider_section_only:before {
6603 border-color: transparent;
6604 }
6605
6606 .frm_sorting li.ui-state-default.edit_field_type_divider {
6607 overflow: visible;
6608 position: relative;
6609 padding: 0 0 0 20px;
6610 margin: 25px 0 0 -5px;
6611 border-left: 1px solid var(--primary-700);
6612 transition: border 0.7s ease-out;
6613 }
6614
6615 .frm-section-collapsed {
6616 border-left-color: transparent !important;
6617 }
6618
6619 .frm_sorting li.edit_field_type_end_divider,
6620 .frm_sorting .no_repeat_section li.ui-state-default.edit_field_type_end_divider:hover {
6621 margin: 0 0 var(--gap-sm);
6622 }
6623
6624 .frm-first-page .frm_prev_page {
6625 display: none;
6626 }
6627
6628 #frm_builder_page .frm_remove_form_row.frm_button,
6629 #frm_builder_page .frm_add_form_row.frm_button {
6630 border-radius: var(--small-radius);
6631 border: 1px solid var(--blue-border);
6632 }
6633
6634 #frm_builder_page .frm_remove_form_row .frmsvg,
6635 #frm_builder_page .frm_remove_form_row i:before,
6636 #frm_builder_page .frm_add_form_row .frmsvg,
6637 #frm_builder_page .frm_add_form_row i:before {
6638 color: var(--primary-700);
6639 }
6640
6641 .frm-preview-buttons .frm_button_submit {
6642 margin: 0 5px;
6643 }
6644
6645 .frm-page-break {
6646 border-top: 1px dashed var(--primary-700);
6647 margin-top: var(--gap-lg);
6648 position: relative;
6649 }
6650
6651 .edit_field_type_divider:before,
6652 .edit_field_type_divider:after,
6653 .frm-page-break:before,
6654 .frm-page-break:after {
6655 content: '';
6656 position: absolute;
6657 background-color: #fff;
6658 border-radius: 50%;
6659 border: 1px solid var(--primary-700);
6660 text-rendering: auto;
6661 -webkit-font-smoothing: antialiased;
6662 }
6663
6664 .edit_field_type_divider:before {
6665 font-family: 's11-fp';
6666 content: '\f1dc';
6667 width: 20px;
6668 height: 20px;
6669 left: -11px;
6670 top: 0;
6671 background: var(--primary-700);
6672 text-align: center;
6673 color: #fff;
6674 font-size: 13px;
6675 }
6676
6677 .repeat_section.edit_field_type_divider:before {
6678 font-family: 's11-fp';
6679 content: '\f363';
6680 }
6681
6682 .edit_field_type_divider:after {
6683 width: 5px;
6684 height: 5px;
6685 left: -4px;
6686 bottom: -4px;
6687 transition: all 0.4s ease-out;
6688 }
6689
6690 .frm-page-break:before,
6691 .frm-page-break:after {
6692 width: 8px;
6693 height: 8px;
6694 top: -6px;
6695 border-color: var(--grey);
6696 }
6697
6698 .frm-page-break:after {
6699 right: 0;
6700 }
6701
6702 #frm-fake-page .frm-page-break {
6703 border-color: var(--grey);
6704 }
6705
6706 #frm-fake-page {
6707 padding: 0 5px;
6708 }
6709
6710 .frm_sorting li.edit_field_type_divider:hover,
6711 .frm_sorting li.edit_field_type_divider.selected {
6712 border-left-color: var(--primary-500);
6713 }
6714
6715 .edit_field_type_divider.selected:before,
6716 .edit_field_type_divider:hover:before {
6717 border-color: var(--primary-500);
6718 background: var(--primary-500);
6719 }
6720
6721 .edit_field_type_divider.selected:after,
6722 .edit_field_type_divider:hover:after {
6723 border-color: var(--primary-500);
6724 }
6725
6726 .frm-section-collapsed:after {
6727 border-color: transparent !important;
6728 color: transparent;
6729 }
6730
6731 .frm-page-break .frm-collapse-page.button {
6732 margin-left: 46%;
6733 margin-top: calc( -32px / 2 );
6734 padding: 6px 12px !important;
6735 }
6736
6737 #frm-fake-page.frm-page-collapsed {
6738 margin-bottom: 0;
6739 }
6740
6741 .frm-page-collapsed {
6742 position: relative;
6743 overflow: visible !important;
6744 margin-bottom: var(--gap-lg);
6745 }
6746
6747 .frm-collapse-page .frmsvg,
6748 .frm-collapse-page .frm_arrowdown6_icon {
6749 width: var(--text-sm);
6750 height: var(--text-sm);
6751 font-size: var(--text-sm);
6752 text-align: center;
6753 margin-left: 2px;
6754 color: currentColor;
6755 transition: transform 300ms ease-in-out;
6756 }
6757
6758 .frm-page-collapsed .frm-collapse-page .frmsvg {
6759 transform: rotate(180deg);
6760 }
6761
6762 #frm-fake-page .frm_arrowdown6_icon {
6763 color: currentColor;
6764 }
6765
6766 .frm-collapsed i:before,
6767 .frm-page-collapsed .frm_arrowdown6_icon:before {
6768 content: '\e913';
6769 }
6770
6771 .frm-collapse-section svg {
6772 fill: var(--primary-color);
6773 transition: transform 0.2s ease-out, fill 0.2s ease-out;
6774 }
6775
6776 .frm-collapse-section:hover svg {
6777 fill: var(--primary-700);
6778 }
6779
6780 .frm-section-collapsed .frm-collapse-section svg {
6781 transform: rotate(-90deg);
6782 }
6783
6784 .open .widget-top .frm_arrow_right_icon:before {
6785 content: '\e62a';
6786 }
6787
6788 .frm-collapsed + .frm-collapse-me {
6789 overflow: hidden !important;
6790 }
6791
6792 .frm-collapse-me {
6793 padding-bottom: 10px;
6794 }
6795
6796 .frm-collapsed + div {
6797 height: 0;
6798 padding: 0;
6799 border-bottom: 2px solid var(--sidebar-hover);
6800 }
6801
6802 .frm_sorting .divider_section_only > .frm_ipe_field_label {
6803 font-size: 116%;
6804 }
6805
6806 #frm_form_editor_container .edit_field_type_break .frm_primary_label.frm_ipe_field_label.button {
6807 width: 150px;
6808 text-align: center;
6809 margin-bottom: 3px;
6810 display: block;
6811 }
6812
6813 tr.frm_options_heading td {
6814 padding-bottom: 0;
6815 }
6816
6817 .frm_sorting .widget-inside .form-table td p,
6818 .frm_sorting .widget-inside .form-wrap label {
6819 padding: 10px 0;
6820 }
6821
6822 .frm_no_fields,
6823 .frm_no_section_fields {
6824 text-align: center;
6825 position: absolute;
6826 color: var(--medium-grey);
6827 font-size: var(--text-md);
6828 box-sizing: border-box;
6829 border: 1px dashed var(--grey-300);
6830 }
6831
6832 .ui-droppable-active ~ .frm_no_fields {
6833 border-style: solid;
6834 }
6835
6836 .frm_no_section_fields {
6837 display: none;
6838 margin: 0;
6839 padding: 20px 0 0;
6840 width: calc( 100% - 20px );
6841 height: 121px;
6842 transition: all 0.4s linear;
6843 }
6844
6845 .frm_no_fields {
6846 min-height: 300px;
6847 margin: 20px 5%;
6848 width: 90%;
6849 top: 0;
6850 }
6851
6852 .frm-empty-fields .frm_updated_message ~ .frm_no_fields {
6853 top: 60px;
6854 }
6855
6856 #frm_form_editor_container:not(.frm-has-fields) #frm-show-fields > .frm_field_box:last-child {
6857 visibility: hidden;
6858 }
6859
6860 .frm-has-fields .frm_no_fields {
6861 display: none;
6862 }
6863
6864 #frm-form-button {
6865 display: none;
6866 margin: 0 7px 25px;
6867 }
6868
6869 .frm-has-fields #frm-form-button {
6870 display: block;
6871 }
6872
6873 .frm-large-plus.frmsvg {
6874 color: var(--primary-700);
6875 height: 45px;
6876 width: 45px;
6877 }
6878
6879 .frm_drag_inst {
6880 line-height: normal;
6881 font-size: 35px;
6882 font-weight: 300;
6883 margin: 80px 0 25px;
6884 }
6885
6886 .frm_no_section_fields p,
6887 .frm_no_fields p {
6888 color: var(--grey);
6889 font-size: 15px;
6890 }
6891
6892 .frm_product_price_wrapper {
6893 display: inline-block;
6894 vertical-align: middle;
6895 }
6896
6897 .frm_prod_type_single .frm_product_price_wrapper {
6898 width: 100%;
6899 }
6900
6901 #new_fields .frm_product_price_wrapper input:first-child {
6902 width: 60%;
6903 float: left;
6904 }
6905
6906 #new_fields .frm_product_price_wrapper input:nth-child(2) {
6907 width: 37%;
6908 float: right;
6909 }
6910
6911 .frm_priority_field_choices,
6912 li.frm_single_option {
6913 padding-bottom: 16px;
6914 border-bottom: 1px solid var(--sidebar-hover);
6915 }
6916
6917 .frm_priority_field_choices,
6918 li.frm_single_option:not(:last-child) {
6919 margin-bottom: 16px;
6920 }
6921
6922 .frm_prod_type_single input[type=radio],
6923 .frm_prod_type_single .frm_drag_icon,
6924 .frm_prod_type_single .frm_sortable_field_opts li:nth-child( n + 3 ),
6925 .frm_prod_type_single .frm_sortable_field_opts .frm_remove_tag,
6926 .frm_prod_type_single .frm_form_field:not(.frm_product_type):not(.frm_sep_val_product),
6927 .frm_prod_type_single .frm-bulk-edit-link,
6928 .frm_prod_type_user_def.frm_grid_container,
6929 .frm_prod_options_heading.frm_prod_user_def {
6930 display: none;
6931 }
6932
6933 .plugin-card-bottom .frm-trash {
6934 color: #a00;
6935 }
6936
6937 .frm-fields p > .frm_inline_label,
6938 .frm_inline_label {
6939 padding-left: 3px;
6940 margin-right: 12px;
6941 display: inline-block;
6942 }
6943
6944 .frm_left_label {
6945 clear: both;
6946 float: left;
6947 width: 32% !important;
6948 margin-right: 2% !important;
6949 line-height: 2em;
6950 }
6951
6952 table td.frm_left_label {
6953 float: none;
6954 line-height: inherit;
6955 padding: 5px 0 5px 2%;
6956 }
6957
6958 .frm_left_label.frm_alignright {
6959 padding-right: 10px;
6960 text-align: right;
6961 }
6962
6963 .frm-fields .frm_left_label + textarea,
6964 .frm-fields .frm_left_label + select,
6965 .frm-fields .frm_left_label + input[type=text],
6966 .frm_with_left_label {
6967 width: 66%;
6968 }
6969
6970 td.frm_left_label + td {
6971 width: 66%;
6972 padding-top: 0;
6973 }
6974
6975 #html_settings label {
6976 display: block;
6977 }
6978
6979 #html_settings .frm_field_html_box {
6980 width: 100%;
6981 }
6982
6983 ul.frm-category-tabs {
6984 margin-top: 2px;
6985 }
6986
6987 .frm-category-tabs > li a,
6988 .frm-category-tabs > li a:active {
6989 outline: none;
6990 box-shadow: none;
6991 display: flex;
6992 gap: var(--gap-xs);
6993 align-items: center;
6994 }
6995
6996 .frm-category-tabs > li.active .frmsvg,
6997 .frm-category-tabs > li.active i,
6998 .frm-category-tabs > li.active span,
6999 .frm-category-tabs > li.active a {
7000 color: var(--primary-500);
7001 }
7002
7003 .frm_wrap .manage-menus {
7004 margin-top: 0;
7005 border: none;
7006 border-bottom: 1px solid var(--grey-300);
7007 background: var(--lightest-grey);
7008 }
7009
7010 .general_settings .postbox .manage-menus {
7011 border-top: none;
7012 border-left: none;
7013 border-right: none;
7014 }
7015
7016 .postbox .frm-help-tabs.inside,
7017 #poststuff .frm-help-tabs.inside {
7018 padding-left: 0;
7019 padding-right: 0;
7020 padding-bottom: 12px;
7021 margin-top: 0;
7022 margin-bottom: 0;
7023 }
7024
7025 .postbox .frm-help-tabs.inside {
7026 padding-bottom: inherit;
7027 }
7028
7029 .frm-help-tabs form > .submit {
7030 margin-left: 154px;
7031 padding-left: 0.9em;
7032 }
7033
7034 #poststuff h3.frm_no_bg {
7035 background: none;
7036 cursor: default;
7037 }
7038
7039 .frm-postbox-no-h3 {
7040 padding-top: 10px;
7041 }
7042
7043 .frm-right-panel .ui-state-default, #postbox-container-1 .ui-state-default {
7044 color: var(--grey-900);
7045 }
7046
7047 .no_repeat_section .frm_sorting > li.ui-state-default.edit_field_type_end_divider:hover {
7048 box-shadow: none;
7049 }
7050
7051 .frm-selected-field-group li.ui-state-default,
7052 .start_divider.frm_sorting li.ui-state-default.frm_not_divider.selected,
7053 .start_divider.frm_sorting li.ui-state-default.frm_not_divider:hover,
7054 .frm_sorting li.ui-state-default.frm_not_divider:hover,
7055 .frm_sorting li.ui-state-default.ui-sortable-helper,
7056 .frm_sorting li.ui-state-default.edit_field_type_divider .divider_section_only:hover,
7057 .frm_sorting .repeat_section li.ui-state-default.edit_field_type_end_divider:hover,
7058 .frm_sorting li.ui-state-default.selected.edit_field_type_divider .divider_section_only,
7059 .frm_update_msg,
7060 .frm_sorting li.ui-state-default.frm_not_divider.selected,
7061 .frm_sorting li.ui-state-default.selected.edit_field_type_divider .divider_section_only {
7062 border-color: var(--primary-500);
7063 transition: .5s border-color ease-in-out;
7064 }
7065
7066 .frm_sorting li.ui-state-default.frm_not_divider.selected {
7067 box-shadow: 0 0 1px 0 var(--primary-500);
7068 }
7069
7070 .frm_sorting li.ui-state-default {
7071 transition: .7s box-shadow ease-in-out, .7s height linear;
7072 }
7073
7074 .frm_sorting li.ui-state-default.frm-newly-added {
7075 box-shadow: inset 0 0 2px 1px var(--blue-border);
7076 }
7077
7078 .frm_sorting li.ui-state-default.selected.edit_field_type_divider .divider_section_only .frm-show-hover {
7079 visibility: visible !important;
7080 display: inline !important;
7081 }
7082
7083 .edit_field_type_end_divider > label {
7084 display: none !important;
7085 }
7086
7087 .frm_email_actions.feature-filter {
7088 font-weight: bold;
7089 border: 1px solid #DFDFDF;
7090 background-color: #EEEEEE;
7091 padding: 3px 5px 2px;
7092 font-size: var(--text-md);
7093 line-height: 20px;
7094 }
7095
7096 .frm_update_msg {
7097 border-style: solid;
7098 margin: 10px 0;
7099 color: #21759B;
7100 padding: 8px 15px;
7101 border-radius: 4px;
7102 }
7103
7104 .frm_update_msg.wrap {
7105 margin: 10px 20px 0 2px;
7106 }
7107
7108 #frm-insert-fields-box .frm_update_msg {
7109 margin-right: 0.9em;
7110 }
7111
7112 .frm_update_msg a {
7113 font-weight: bold;
7114 }
7115
7116 .widefat td {
7117 width: auto;
7118 }
7119
7120 .widefat .column-id {
7121 width: 3.7em;
7122 }
7123
7124 .widefat .column-show_count {
7125 width: 5em;
7126 }
7127
7128 .widefat .column-shortcode {
7129 width: 9em;
7130 }
7131
7132 .toplevel_page_formidable .column-shortcode div {
7133 display: flex;
7134 gap: var(--gap-xs);
7135 }
7136
7137 .widefat .column-entries, .widefat .column-link {
7138 width: 10%;
7139 text-align: center;
7140 }
7141
7142 .widefat .column-form_key, .widefat .column-created_at {
7143 width: 10%;
7144 }
7145
7146 .frm-white-body .search-box,
7147 .frm_wrap .frm-search {
7148 float: right;
7149 margin: 0;
7150 clear: right;
7151 }
7152
7153 .frm-white-body .search-box,
7154 .frm-search {
7155 min-width: 32%;
7156 position: relative;
7157 display: flex;
7158 gap: var(--gap-sm);
7159 align-items: center;
7160 }
7161
7162 .frm-inline-modal .frm-search,
7163 #frm_adv_info .frm-search {
7164 float: none;
7165 width: 100%;
7166 clear: both;
7167 margin: var(--gap-xs) 0;
7168 }
7169
7170 .frm-button-group a {
7171 margin: 0 7px !important;
7172 }
7173
7174 .frm_has_textarea .frm-with-right-icon {
7175 display: block;
7176 }
7177
7178 .frm-with-left-icon,
7179 .frm-with-right-icon {
7180 position: relative;
7181 }
7182
7183 i.frm-show-box,
7184 i.frm-show-inline-modal,
7185 .frm-with-left-icon i,
7186 .frm-with-right-icon i:not([class*=mce-]),
7187 .frmsvg.frm-show-box,
7188 .frmsvg.frm-show-inline-modal,
7189 .frm-with-left-icon .frmsvg,
7190 .frm-with-right-icon .frmsvg,
7191 .frm-search > .frmsvg,
7192 .frm-search span:not(.multiselect-selected-text):not(.multiselect-native-select) {
7193 position: absolute;
7194 padding: 0 14px;
7195 pointer-events: none;
7196 left: 0;
7197 color: var(--grey-400);
7198 font-size: var(--text-xs);
7199 }
7200
7201 .frm-with-right-icon .frmsvg,
7202 .frm-with-right-icon i:not([class*=mce-]) {
7203 right: 0;
7204 top: -3px;
7205 left: auto;
7206 padding: 0 10px 0 5px;
7207 }
7208
7209 .frm_form_settings .frm-with-right-icon .frmsvg {
7210 top: 0;
7211 }
7212
7213 .frm_form_settings .wp-editor-container .frm-with-right-icon .frmsvg, #frm_builder_page .wp-editor-container .frm-with-right-icon .frmsvg {
7214 top: auto;
7215 bottom: 0;
7216 }
7217
7218 .frm_form_settings .frm_has_textarea .frm-with-right-icon .frmsvg {
7219 top: auto;
7220 bottom: 6px;
7221 }
7222
7223 .frmsvg.frm-show-box,
7224 .frmsvg.frm-show-inline-modal,
7225 i.frm-show-box,
7226 i.frm-show-inline-modal {
7227 color: var(--primary-500);
7228 pointer-events: initial;
7229 cursor: pointer;
7230 z-index: 1;
7231 opacity: 1;
7232 top: auto;
7233 margin: calc( ( 36px - 18px ) / 2 ); /* input height - svg / 2 */
7234 margin-bottom: 0;
7235 padding: 0;
7236 }
7237
7238 .frm-open .frmsvg.frm-show-inline-modal,
7239 .frm-open i.frm-show-inline-modal {
7240 opacity: .5;
7241 }
7242
7243 .frm-lookup-box-label + .frm-inline-modal,
7244 .frm-open + .frm-inline-modal {
7245 top: -10px;
7246 margin-bottom: 0;
7247 }
7248
7249 .frm_grid_container > .frm-open + .frm-inline-modal {
7250 top: -4px;
7251 }
7252
7253 .frm-with-left-icon input {
7254 padding-left: 37px !important;
7255 }
7256
7257 .frm_wrap .frm-with-right-icon textarea,
7258 .frm_wrap .frm-with-right-icon input,
7259 .frm_wrap .frm-with-right-icon input[type=text] {
7260 padding-right: var(--gap-md);
7261 }
7262
7263 #frm-show-fields .frm-with-left-icon .frmsvg,
7264 #frm-show-fields .frm-with-left-icon i {
7265 padding-top: 10px;
7266 }
7267
7268 .frm-search .frm_search_icon {
7269 padding-left: 18px !important;
7270 padding-right: 12px !important;
7271 }
7272
7273 .frm-search input[name="s"],
7274 .frm-search .dropdown-toggle,
7275 .frm-search input.frm-search-input {
7276 border-radius: var(--small-radius);
7277 border-color: var(--grey-300);
7278 }
7279
7280 .frm-white-body .search-box input[name="s"], /* Views search */
7281 #wpwrap .frm-search input[type="search"] {
7282 flex: 1;
7283 font-size: var(--text-sm);
7284 line-height: var(--text-lg);
7285 padding: var(--gap-xs);
7286 }
7287
7288 .frm-search input[type="search"],
7289 .frm-search input[type="text"] {
7290 padding-left: var(--gap-xl) !important;
7291 }
7292
7293 .frm-search .dropdown-toggle {
7294 width: 100%;
7295 float: none;
7296 max-width: 200px;
7297 background: transparent;
7298 padding: 7px;
7299 padding-left: 33px !important;
7300 min-height: 32px;
7301 text-align: inherit;
7302 overflow: hidden;
7303 text-overflow: ellipsis;
7304 }
7305
7306 span.multiselect-selected-text {
7307 white-space: nowrap;
7308 display: inline-block;
7309 max-width: 90%;
7310 text-overflow: ellipsis;
7311 overflow: hidden;
7312 }
7313
7314 .frm-search #search-submit a {
7315 color: var(--grey-800);
7316 }
7317
7318 .frm-search #search-submit .caret {
7319 opacity:.7;
7320 }
7321
7322 .frm-not-set input {
7323 color: var(--primary-500) !important;
7324 font-size: 13px;
7325 }
7326
7327 .frm-not-set .frmsvg,
7328 .frm-not-set i {
7329 color: var(--primary-700);
7330 opacity: 1;
7331 }
7332
7333 .post-type-frm_display select[name="m"] + #post-query-submit,
7334 select[name="m"] {
7335 display: none;
7336 }
7337
7338 .frm_shortcode_select optgroup option {
7339 margin-left: 1em;
7340 }
7341
7342 .frm_shortcode_select optgroup {
7343 padding-top: 5px;
7344 }
7345
7346 .frm_shortcode_select .frm_subopt {
7347 margin-left: 2em;
7348 }
7349
7350 .misc-pub-section a.edit-frm_shortcode, .misc-pub-section a.edit-form-status {
7351 float: none;
7352 font-size: 13px;
7353 }
7354
7355 .frm-grid {
7356 border-collapse: collapse;
7357 border: none;
7358 margin-right: 10px;
7359 }
7360
7361 .frm-grid td, .frm-grid th {
7362 padding: 5px;
7363 border: 1px solid black;
7364 }
7365
7366 .pro_feature {
7367 text-decoration: line-through;
7368 }
7369
7370 /* View page */
7371
7372 .post-type-frm_display #poststuff #post-body.columns-2 {
7373 margin-right: var(--big-sidebar);
7374 }
7375
7376 .post-type-frm_display #post-body.columns-2 #postbox-container-1 {
7377 margin-right: calc( var(--big-sidebar) * -1 );
7378 width: calc( var(--big-sidebar) - 40px );
7379 }
7380
7381 .post-type-frm_display #poststuff #post-body.columns-2 #side-sortables {
7382 width: 100%;
7383 }
7384
7385 #frm_dyncontent .hndle,
7386 #frm_dyncontent .handlediv {
7387 display: none !important;
7388 }
7389
7390 .post-type-frm_display .meta-box-sortables .frm_form_nav > li > a,
7391 .post-type-frm_display .frm_form_nav .nav-tab-active {
7392 padding: 0 2px 5px;
7393 line-height: 1.4;
7394 }
7395
7396 .post-type-frm_display #advanced-sortables h2.hndle,
7397 .post-type-frm_display #side-sortables h2.hndle,
7398 .post-type-frm_display #normal-sortables h2.hndle {
7399 border-bottom: 1px solid var(--grey-300);
7400 margin: 10px 0 0 !important;
7401 padding: 0 25px 8px;
7402 }
7403
7404 .post-type-frm_display #side-sortables h2.hndle {
7405 margin-top: 0 !important;
7406 padding-top: 10px;
7407 }
7408
7409 .post-type-frm_display #post-body-content {
7410 margin-top: var(--gap-lg);
7411 }
7412
7413 .post-type-frm_display.edit-php #wpbody-content > .wrap {
7414 margin: 0;
7415 }
7416
7417 .post-type-frm_display .postbox .hndle,
7418 .post-type-frm_display .postbox {
7419 border-color: var(--grey-300);
7420 }
7421
7422 .post-type-frm_display #postbox-container-1 .postbox,
7423 .post-type-frm_display #postbox-container-2 .postbox {
7424 border-radius: var(--small-radius);
7425 border-color: var(--grey-300);
7426 box-shadow: none;
7427 }
7428
7429 .post-type-frm_display #side-sortables .postbox {
7430 border-radius: 0;
7431 border-top-width: 0;
7432 margin-bottom: 0;
7433 }
7434
7435 .post-type-frm_display #side-sortables .misc-pub-section {
7436 padding: 15px 20px 10px;
7437 }
7438
7439 .post-type-frm_display .misc-pub-section .frmsvg,
7440 .post-type-frm_display #post-body .misc-pub-post-status:before,
7441 .post-type-frm_display #post-body #visibility:before,
7442 .post-type-frm_display .curtime #timestamp:before,
7443 .post-type-frm_display #post-body .misc-pub-revisions:before,
7444 .post-type-frm_display span.wp-media-buttons-icon:before {
7445 color: var( --grey);
7446 }
7447
7448 .post-type-frm_display #frm_top_bar + #poststuff #submitdiv #publishing-action, /* Hide only if top bar is present */
7449 .post-type-frm_display #frm_top_bar + #poststuff #submitdiv #minor-publishing-actions,
7450 .post-type-frm_display #frm_top_bar + #poststuff #edit-slug-box,
7451 .post-type-frm_display .wrap h1.wp-heading-inline,
7452 .post-type-frm_display .wrap > .page-title-action {
7453 display: none;
7454 }
7455
7456 .post-type-frm_display #poststuff h2.nav-tab-wrapper {
7457 padding-left: 10px;
7458 margin-bottom: 0;
7459 padding-bottom: 0;
7460 }
7461
7462 .post-type-frm_display .nav-menus-php .wrap {
7463 margin: 10px 0 0;
7464 }
7465
7466 .post-type-frm_display .nav-menus-php .wrap p {
7467 padding-left: 12px;
7468 padding-right: 12px;
7469 }
7470
7471 .post-type-frm_display .nav-tab {
7472 display: inline-block;
7473 background-color: #f4f4f4;
7474 }
7475
7476 .post-type-frm_display .nav-tab.frm_hidden {
7477 display: none;
7478 }
7479
7480 .post-type-frm_display .nav-tab:hover {
7481 background-color: #e4e4e4;
7482 }
7483
7484 .frm_order_row,
7485 .frm_where_row {
7486 margin-bottom: 7px;
7487 line-height: 30px;
7488 }
7489
7490 .frm-single-settings .frm_prod_field_opt_cont {
7491 margin-top: initial;
7492 margin-bottom: 20px;
7493 }
7494
7495 /*hide elements if js is avail*/
7496 select.texture {
7497 display: none;
7498 }
7499
7500 .post-type-frm_display #wp-content-editor-tools,
7501 #wp-content-editor-tools {
7502 background-color: transparent;
7503 }
7504
7505 .post-type-frm_display #major-publishing-actions {
7506 border-color: var(--grey-300);
7507 background: var(--sidebar-color);
7508 }
7509
7510 .post-type-frm_display #frm_adv_info {
7511 width: calc( var(--big-sidebar) - 40px );
7512 height: calc( 100vh - 32px );
7513 overflow: hidden;
7514 }
7515
7516 .post-type-frm_display #frm_adv_info:not(.frm_fixed) {
7517 top: 0 !important;
7518 }
7519
7520 .post-type-frm_display #frm_adv_info.frm_fixed {
7521 position: fixed;
7522 z-index: 9999;
7523 top: 32px;
7524 }
7525
7526 .post-type-frm_display #frm_adv_info ul.frm_code_list.frm-full-hover {
7527 max-height: calc( 100vh - 180px );
7528 }
7529
7530 .frm_col_one {
7531 margin-right: 4%;
7532 clear: both;
7533 }
7534
7535 ul .frm_col_one {
7536 float: left;
7537 }
7538
7539 ul .frm_col_two {
7540 float: right;
7541 }
7542
7543 ul.frm_two_col {
7544 display: grid;
7545 grid-template-columns: repeat(2, minmax(0, 1fr));
7546 gap: var(--gap-sm);
7547 }
7548
7549 .frm_two_col li {
7550 margin-bottom: 0;
7551 }
7552
7553 .frm-info-modal a,
7554 .frm-info-modal ul,
7555 .frm-info-modal p,
7556 .frm-info-modal,
7557 .settings-lite-cta a,
7558 .settings-lite-cta ul,
7559 .settings-lite-cta {
7560 color: var(--grey-500);
7561 font-size: var(--text-md);
7562 box-shadow: none !important;
7563 }
7564
7565 .frm-info-modal h3,
7566 .settings-lite-cta h3 {
7567 font-size: 17px !important;
7568 }
7569
7570 .frm-green-icons .frmsvg {
7571 color: var(--green);
7572 }
7573
7574 .frm-info-modal .postbox .inside,
7575 .settings-lite-cta .postbox .inside {
7576 padding: var(--gap-md);
7577 margin: 0;
7578 }
7579
7580 .cta-inside a {
7581 color: var(--orange)
7582 }
7583
7584 .info-modal-inside a.frm-standard-link {
7585 color: var(--primary-500);
7586 }
7587
7588 .info-modal-inside a.frm-standard-link:hover {
7589 color: var(--primary-700);
7590 }
7591
7592 .frm_no_p_margin > p {
7593 margin: 0;
7594 }
7595
7596 .frm_code_list a.button {
7597 display: block;
7598 text-align: center;
7599 font-size: 11px;
7600 overflow: hidden;
7601 }
7602
7603 #frm-navbarDrop + .frm_code_list.frm-full-hover {
7604 margin: var(--gap-xs) 0 0;
7605 min-width: 300px;
7606 max-height: calc( ( 40px * 5 ) + 56px );
7607 }
7608
7609 .frm_code_list.frm-full-hover li {
7610 margin: 0;
7611 }
7612
7613 .frm-select-list-item,
7614 .frm_wrap .ui-autocomplete li > div,
7615 .multiselect-container button.multiselect-option,
7616 .frm-dropdown-menu > .dropdown-item > a,
7617 .frm-dropdown-menu > .dropdown-item > a:visited,
7618 .frm-dropdown-menu > .dropdown-item > a:link, /* Override jQuery UI */
7619 .frm-dropdown-menu .frm_dropdown_li,
7620 .frm_code_list.frm-full-hover a {
7621 display: flex;
7622 color: var(--grey-700);
7623 padding: 5px 10px;
7624 font-size: var(--text-md);
7625 gap: var(--gap-xs);
7626 align-items: center;
7627 }
7628
7629 .frm_code_list.frm-full-hover a span {
7630 max-width: 83px;
7631 margin-right: var(--gap-xs);
7632 margin-left: auto;
7633 }
7634
7635 .frm-single-settings .frm_code_list.frm-full-hover a {
7636 display: block;
7637 }
7638
7639 .frm_code_list.frm-full-hover a,
7640 .frm_code_list.frm-full-hover a span {
7641 white-space: nowrap;
7642 overflow: hidden;
7643 text-overflow: ellipsis;
7644 }
7645
7646 .frm_code_list.frm-full-hover.frmcenter a {
7647 display: block;
7648 }
7649
7650 #frm-layout-classes frm-full-hover a span {
7651 max-width: 45%;
7652 }
7653
7654 .frm-select-list-item.active,
7655 .frm-select-list-item:hover,
7656 .frm_wrap .ui-autocomplete li div.ui-state-active,
7657 .frm_wrap .ui-autocomplete li.ui-state-focus,
7658 .multiselect-container button.multiselect-option.active,
7659 .multiselect-container button.multiselect-option:hover,
7660 .frm-dropdown-menu > .dropdown-item > a:hover,
7661 .frm_code_list.frm-full-hover a:hover span,
7662 .frm_code_list.frm-full-hover a:hover {
7663 background: var(--primary-25);
7664 color: var(--primary-500);
7665 border-radius: var(--small-radius);
7666 }
7667
7668 .frm-select-list-item .frmsvg,
7669 .frm-dropdown-menu > .dropdown-item > a .frmsvg {
7670 opacity: .8;
7671 }
7672
7673 .frm-select-list-item:hover .frmsvg,
7674 .frm-dropdown-menu > .dropdown-item > a:hover .frmsvg {
7675 opacity: 1;
7676 }
7677
7678 .frm-dropdown-menu.frm_code_list > li > a {
7679 padding: 3px 15px;
7680 width: 300px;
7681 }
7682
7683 #frm_edit_box_content_modal .frm-with-search, /* Temp. Add .frm-dropdown-menu in Views */
7684 .frm-dropdown-menu .frm-with-search {
7685 padding: var(--gap-xs) 10px 0;
7686 }
7687
7688 .frm-dropdown-menu .subsubsub {
7689 padding: 0 10px;
7690 }
7691
7692 .frm_grid_container {
7693 overflow: visible;
7694 }
7695
7696 .frm_code_list.frm_grid_container {
7697 grid-gap: 5px;
7698 }
7699
7700 .frm_code_list.frm_grid_container li {
7701 width: auto;
7702 margin: 0;
7703 }
7704
7705 .frm_code_list.frm_grid_container a {
7706 padding: 5px 0;
7707 text-align: center;
7708 background-color: var(--light-blue);
7709 border: 1px solid var(--primary-500);
7710 color: var(--primary-500);
7711 display: block;
7712 border-radius: var(--small-radius);
7713 }
7714
7715 .frm_code_list.frm_grid_container a:hover {
7716 background-color: var(--primary-700);
7717 color: #fff;
7718 }
7719
7720 .frm_field_list #frm-insert-fields .button a {
7721 display: block;
7722 max-width: 95%;
7723 overflow: hidden;
7724 }
7725
7726 .field_type_list.frm_grid_container {
7727 gap: var(--gap-xs) var(--gap-sm);
7728 margin: var(--gap-xs);
7729 }
7730
7731 .field_type_list li {
7732 margin: 0;
7733 padding: 0;
7734 }
7735
7736 #frm-insert-fields .frm-search {
7737 float: none;
7738 margin: 15px 20px;
7739 width: auto;
7740 }
7741
7742 #frm-insert-fields li,
7743 #frm-insert-fields li a {
7744 text-decoration: none;
7745 font-weight: normal;
7746 font-size: var(--text-md) !important;
7747 color: var(--grey-900);
7748 }
7749
7750 #frm-insert-fields li.frm_show_upgrade {
7751 cursor: pointer;
7752 opacity: .5;
7753 }
7754
7755 #frm-insert-fields li a span {
7756 vertical-align: middle;
7757 }
7758
7759 .frmbutton.ui-draggable-dragging a,
7760 #frm-insert-fields li a:not(.disabled):hover {
7761 background: var(--grey-100);
7762 }
7763
7764 #frm-insert-fields li a.disabled:hover {
7765 cursor: not-allowed;
7766 }
7767
7768 #frm-insert-fields li.ui-draggable-disabled {
7769 opacity: 0.5;
7770 }
7771
7772 .frm_code_list {
7773 clear: both;
7774 }
7775
7776 .frm_code_list.frm-full-hover a.frm_hidden,
7777 .frm_code_list .frmkeys {
7778 display: none;
7779 }
7780
7781 .frmsvg {
7782 fill: currentColor;
7783 width: 18px;
7784 height: 18px;
7785 vertical-align: middle;
7786 }
7787
7788 input[disabled],
7789 .frmsvg svg {
7790 pointer-events: none;
7791 }
7792
7793 .frmsvg.frm_svg20 {
7794 width: 20px;
7795 height: 20px;
7796 }
7797
7798 .frmsvg.frm_svg15 {
7799 width: 15px;
7800 height: 15px;
7801 }
7802
7803 .frmsvg.frm_svg14 {
7804 width: 14px;
7805 height: 14px;
7806 }
7807
7808 .frmsvg.frm_svg13 {
7809 width: 13px;
7810 height: 13px;
7811 }
7812
7813 .frmbutton.ui-sortable-helper .frmsvg,
7814 .field_type_list li.frmbutton .frmsvg,
7815 .frmbutton.ui-sortable-helper i,
7816 .field_type_list li.frmbutton i,
7817 .frm_code_list a .frmsvg,
7818 .frm_code_list a i {
7819 color: var(--grey-500);
7820 display: inline-block;
7821 vertical-align: middle;
7822 width: var(--text-md);
7823 font-size: var(--text-md);
7824 }
7825
7826 /* Standardize icon size for field buttons in the builder */
7827 .field_type_list li.frmbutton .frmsvg {
7828 width: var(--text-xl);
7829 font-size: var(--text-xl);
7830 }
7831
7832 .frm_code_list i:before {
7833 font-size: inherit;
7834 }
7835
7836 #frm-insert-fields li a:not(.disabled):hover .frmsvg,
7837 #frm-insert-fields li a:not(.disabled):hover i {
7838 color: var(--grey-600);
7839 }
7840
7841 /* Icon while dragging */
7842 .frmbutton.ui-draggable-dragging {
7843 pointer-events: none;
7844 }
7845
7846 #frm-insert-fields li.frm_show_upgrade,
7847 #frm-insert-fields li a,
7848 .frmbutton.ui-draggable-dragging a {
7849 text-decoration: none;
7850 display: inline-flex !important;
7851 gap: var(--gap-xs);
7852 align-items: center;
7853 border-radius: var(--border-radius) !important;
7854 padding: var(--gap-xs) var(--gap-sm) !important;
7855 color: var(--grey-900) !important;
7856 }
7857
7858 /* Adjust field button size to full width in builder */
7859 #frm-insert-fields li a {
7860 display: flex !important;
7861 }
7862
7863 /* Prevents advanced fields from always appearing in search results */
7864 #frm-insert-fields li.frm_show_upgrade.frm_hidden {
7865 display: none !important;
7866 }
7867
7868 .frmbutton.ui-draggable-dragging a {
7869 border: 1px solid var(--grey-300);
7870 box-shadow: var(--box-shadow-md);
7871 }
7872
7873 .frmbutton.ui-draggable-dragging span {
7874 font-size: 15px;
7875 }
7876
7877 #frm-show-fields .frmbutton.ui-sortable-helper i,
7878 .frmbutton.ui-draggable-dragging i,
7879 .frmbutton.ui-draggable-dragging .frmsvg {
7880 color: #fff !important;
7881 }
7882
7883 .frmbutton.ui-draggable-dragging i,
7884 .frmbutton.ui-draggable-dragging .frmsvg {
7885 color: var(--grey-700) !important;
7886 }
7887
7888 .frm_sorting li.ui-state-default.ui-sortable-helper,
7889 .frmbutton.ui-sortable-helper {
7890 transition: opacity .2s;
7891 opacity: 1;
7892 }
7893
7894 .frm-field-group-count {
7895 background-color: var(--sidebar-hover);
7896 padding: 5px;
7897 color: #fff !important;
7898 border-radius: 10px;
7899 }
7900
7901 /* End dragging */
7902
7903 .field_type_list .frm_icon_font:before {
7904 font-size: 20px;
7905 }
7906
7907 li.frm_noallow.button,
7908 .frm_noallow {
7909 opacity: .5;
7910 filter: alpha(opacity=50);
7911 }
7912
7913 .frm_actions_list a.frm_show_upgrade.frm_inactive_action:before,
7914 li.frm_noallow.button.frm_show_upgrade {
7915 cursor: pointer;
7916 }
7917
7918 .field_type_list li.frm_noallow.button.frm_show_upgrade:hover {
7919 border-color: inherit;
7920 }
7921
7922 .frm_noallow a {
7923 color: inherit;
7924 }
7925
7926 #frm_upgrade_modal_image {
7927 max-width: 200px;
7928 }
7929 #frm_upgrade_modal .frm-upgrade-message img {
7930 margin-top: 10px;
7931 width: 100%;
7932 }
7933 .frm-tab-message {
7934 max-width: 600px;
7935 margin: 20px auto;
7936 color: rgba(63, 75, 91, 0.8);
7937 }
7938
7939 .frm-settings-screenshot-toolbar {
7940 min-height: 39px;
7941 display: flex;
7942 }
7943
7944 .frm-settings-screenshot-toolbar .frm-minmax-icon {
7945 height: 8px;
7946 width: 8px;
7947 border-radius: 50%;
7948 align-self: center;
7949 margin-left: 10px;
7950 }
7951
7952 .frm-settings-screenshot-toolbar .frm-minmax-icon:first-of-type {
7953 margin-left: 20px;
7954 }
7955
7956 .frm-settings-screenshot-toolbar img {
7957 object-fit: contain;
7958 align-self: flex-end;
7959 margin-left: 25px;
7960 }
7961
7962 .frm-settings-screenshot-toolbar + div {
7963 background: #fff;
7964 padding-top: 25px;
7965 border-radius: 0 0 16px 16px;
7966 }
7967
7968 .frm-settings-screenshot-toolbar + div img {
7969 max-width: calc( 100% - 40px );
7970 }
7971
7972 .frm-settings-screenshot-wrapper {
7973 max-width: 700px;
7974 margin: 50px auto 0;
7975 box-shadow: 0px 4px 4px rgba(189, 196, 205, 0.25), 0px 12px 56px rgba(42, 57, 75, 0.25);
7976 border-radius: 16px;
7977 background: #EBECF1;
7978 }
7979
7980 .frm-dialog {
7981 z-index: 100;
7982 padding: 0 !important;
7983 border-radius: 16px;
7984 border: none;
7985 background-color: #fff;
7986 max-width: 100% !important;
7987 }
7988
7989 .frm-dialog .postbox {
7990 background: transparent;
7991 box-shadow: none;
7992 border: none;
7993 line-height: var(--leading);
7994 }
7995
7996 .frm-dialog input[type=text],
7997 .frm-dialog textarea {
7998 font-size: var(--text-md);
7999 }
8000
8001 .frm-dialog textarea {
8002 height: 75px;
8003 }
8004
8005 .frm-dialog button.frm-button-primary {
8006 margin-right: 10px;
8007 }
8008
8009 .frm-dialog .frm-sub-label,
8010 .frm-sub-label {
8011 color: var(--grey);
8012 text-transform: none;
8013 padding-left: 8px;
8014 }
8015
8016 h2 .frm-sub-label {
8017 font-size: var(--text-md);
8018 }
8019
8020 .frm-views-editor-body .ui-widget-overlay,
8021 .frm-white-body .ui-widget-overlay,
8022 .toplevel_page_formidable .ui-widget-overlay,
8023 body[class*=formidable-payments] .ui-widget-overlay {
8024 position: fixed;
8025 width: 100%;
8026 height: 100%;
8027 top: 0;
8028 left: 0;
8029 right: 0;
8030 bottom: 0;
8031 background: var(--grey-500);
8032 opacity: .5;
8033 z-index: 2;
8034 }
8035
8036 .frm-circled-icon {
8037 width: 60px;
8038 height: 60px;
8039 border-radius: 50%;
8040 background-color: var(--primary-25);
8041 }
8042
8043 .frm-circled-icon-large {
8044 width: 80px;
8045 height: 80px;
8046 }
8047
8048 .frm-circled-icon-green {
8049 background-color: var(--success-50);
8050 }
8051
8052 .frm-circled-icon .frmsvg {
8053 width: 21px;
8054 height: 24px;
8055 }
8056
8057 .frm-circled-icon-large .frmsvg {
8058 width: 24px;
8059 }
8060
8061 .frm-circled-icon .frmsvg use {
8062 color: var(--primary-500);
8063 }
8064
8065 .frm-circled-icon-green .frmsvg use {
8066 color: var(--success-500);
8067 }
8068
8069 .frm-upgrade-message img {
8070 max-width: 100%;
8071 }
8072
8073 a.frm-link-secondary {
8074 color: #c4c4c4;
8075 font-size: var(--text-sm);
8076 text-decoration: underline;
8077 }
8078
8079 .field_type_list li.button.frm_noallow,
8080 .field_type_list li.button.frm_noallow:hover,
8081 .button.frm_noallow,
8082 .button.frm_noallow:hover {
8083 color: inherit;
8084 border-color: #ccc;
8085 background: inherit;
8086 }
8087
8088 iframe#dyncontent_ifr {
8089 min-height: 150px;
8090 }
8091
8092 /*!
8093 * Bootstrap v4.6.1
8094 */
8095
8096 .tooltip {
8097 /* Copied from Bootstrap */
8098 position: absolute;
8099 display: block;
8100 margin: 0;
8101 font-style: normal;
8102 font-weight: 400;
8103 line-height: 1.5;
8104 text-align: left;
8105 text-align: start;
8106 text-decoration: none;
8107 text-shadow: none;
8108 text-transform: none;
8109 letter-spacing: normal;
8110 word-break: normal;
8111 word-spacing: normal;
8112 white-space: normal;
8113 line-break: auto;
8114 font-size: 0.875rem;
8115 word-wrap: break-word;
8116 opacity: 0;
8117
8118 /* Custom rules */
8119 z-index: 9999999;
8120 pointer-events: none;
8121 }
8122
8123 .tooltip.show {
8124 opacity: 0.9;
8125 }
8126
8127 .tooltip .arrow {
8128 position: absolute;
8129 display: block;
8130 width: 0.8rem;
8131 height: 0.4rem;
8132 margin-left: 0 !important;
8133 }
8134
8135 .tooltip .arrow::before {
8136 position: absolute;
8137 content: "";
8138 border-color: transparent;
8139 border-style: solid;
8140 }
8141
8142 .bs-tooltip-top, .bs-tooltip-auto[x-placement^="top"] {
8143 padding: 0.4rem 0;
8144 }
8145
8146 .bs-tooltip-top .arrow, .bs-tooltip-auto[x-placement^="top"] .arrow {
8147 bottom: 0;
8148 }
8149
8150 .bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before {
8151 top: 0;
8152 border-width: 0.4rem 0.4rem 0;
8153 border-top-color: #000;
8154 }
8155
8156 .bs-tooltip-right, .bs-tooltip-auto[x-placement^="right"] {
8157 padding: 0 0.4rem;
8158 }
8159
8160 .bs-tooltip-right .arrow, .bs-tooltip-auto[x-placement^="right"] .arrow {
8161 left: 0;
8162 width: 0.4rem;
8163 height: 0.8rem;
8164 }
8165
8166 .bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before {
8167 right: 0;
8168 border-width: 0.4rem 0.4rem 0.4rem 0;
8169 border-right-color: #000;
8170 }
8171
8172 .bs-tooltip-bottom, .bs-tooltip-auto[x-placement^="bottom"] {
8173 padding: 0.4rem 0;
8174 }
8175
8176 .bs-tooltip-bottom .arrow, .bs-tooltip-auto[x-placement^="bottom"] .arrow {
8177 top: 0;
8178 }
8179
8180 .bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
8181 bottom: 0;
8182 border-width: 0 0.4rem 0.4rem;
8183 border-bottom-color: #000;
8184 }
8185
8186 .bs-tooltip-left, .bs-tooltip-auto[x-placement^="left"] {
8187 padding: 0 0.4rem;
8188 }
8189
8190 .bs-tooltip-left .arrow, .bs-tooltip-auto[x-placement^="left"] .arrow {
8191 right: 0;
8192 width: 0.4rem;
8193 height: 0.8rem;
8194 }
8195
8196 .bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before {
8197 left: 0;
8198 border-width: 0.4rem 0 0.4rem 0.4rem;
8199 border-left-color: #000;
8200 }
8201
8202 .tooltip-inner {
8203 max-width: 200px;
8204 padding: 0.25rem 0.5rem;
8205 color: #fff;
8206 text-align: center;
8207 background-color: #000;
8208 border-radius: 0.25rem;
8209 }
8210
8211 .frm-dropdown-menu.show {
8212 display: block;
8213 }
8214
8215 /* End Bootstrap */
8216
8217 .preview.dropdown .dropdown-menu {
8218 min-width: 205px;
8219 }
8220
8221 .frm_clear {
8222 clear: both;
8223 }
8224
8225 .frm_clearfix:after {
8226 content: ".";
8227 display: block;
8228 clear: both;
8229 visibility: hidden;
8230 line-height: 0;
8231 height: 0;
8232 }
8233
8234 .frm_clearfix {
8235 display: block;
8236 }
8237
8238 .frm_admin_progress {
8239 overflow: hidden;
8240 height: 20px;
8241 margin-bottom: 20px;
8242 background-color: #f5f5f5;
8243 border-radius: 4px;
8244 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
8245 }
8246
8247 .frm_admin_progress_bar {
8248 float: left;
8249 width: 0;
8250 height: 100%;
8251 font-size: 12px;
8252 line-height: 20px;
8253 color: #ffffff;
8254 text-align: center;
8255 box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
8256 transition: width 0.6s ease;
8257 background-color: #04A4CC;
8258 }
8259
8260 .tooltip.frm_tooltip {
8261 position: fixed;
8262 top: auto !important;
8263 bottom: 0 !important;
8264 left: 0 !important;
8265 max-width: none;
8266 width: 100% !important;
8267 z-index: 99999;
8268 }
8269
8270 .tooltip.frm_tooltip.bottom {
8271 padding: 0;
8272 }
8273
8274 .frm_tooltip .tooltip-inner {
8275 max-width: none;
8276 min-height: 40px !important;
8277 text-align: left;
8278 box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.5);
8279 padding: 10px 40px;
8280 border-top-color: #ccc;
8281 background: var(--sidebar-color);
8282 color: var(--grey-700);
8283 border-radius: 0;
8284 opacity: 1;
8285 font-size: var(--text-sm);
8286 }
8287
8288 #frm_custom_css_box {
8289 width: 100%;
8290 }
8291
8292 /*form inputs/selects */
8293 .frm_form_field.frm_scroll_box .frm_opt_container,
8294 .frm-white-body .wrap input[type="text"], /* Cover Views pages */
8295 .frm-white-body .wrap input[type="search"],
8296 .frm-white-body .wrap input[type="number"],
8297 .frm-white-body .wrap select,
8298 #frm-form-templates-modal select,
8299 .frm-white-body .wrap textarea,
8300 button.frm_choose_image_box,
8301 #titlediv input[type="text"],
8302 .frm-fields button.btn,
8303 .frm_wrap textarea,
8304 .frm_wrap input[type="tel"],
8305 .frm_wrap input[type="text"],
8306 .frm_wrap input[type="email"]
8307 .frm_wrap input[type=search],
8308 .frm_wrap input[type="number"],
8309 .frm_wrap input[type="date"],
8310 .frm_wrap select,
8311 .wp-admin .frm_wrap select,
8312 .field-group textarea,
8313 .field-group input[type="text"],
8314 .field-group select,
8315 .frm-fields .frm-input-field {
8316 outline: 0;
8317 box-shadow: none;
8318 border-radius: var(--small-radius);
8319 padding: 5px 14px;
8320 border-color: var(--grey-300);
8321 color: var(--grey-800);
8322 font-size: var(--text-md);
8323 margin: 0;
8324 background-color: #fff;
8325 line-height: var(--leading);
8326 }
8327
8328 .frm_wrap ::-webkit-datetime-edit {
8329 line-height: var(--leading);
8330 }
8331
8332 .frm-white-body textarea:focus,
8333 .frm-white-body input:focus,
8334 .frm-white-body select:focus,
8335 .frm_wrap input:focus,
8336 .frm_wrap select:focus,
8337 .wp-core-ui .frm_wrap select:focus,
8338 #frm-form-templates-modal select:focus,
8339 .frm-btn-group .multiselect.dropdown-toggle:focus,
8340 .frm_wrap textarea:focus {
8341 border-color: var(--primary-500) !important;
8342 box-shadow: none !important;
8343 }
8344
8345 #postbox-container-2 textarea,
8346 .frm_wrap textarea,
8347 .field-group textarea {
8348 line-height: 2;
8349 }
8350
8351 .frm_wrap input[type="number"] {
8352 height: auto;
8353 }
8354
8355 .frm_wrap select {
8356 padding: 2px;
8357 }
8358
8359 .wp-admin .frm_wrap select,
8360 #frm-form-templates-modal select {
8361 max-width: 100%;
8362 }
8363
8364 .frm_form_field.frm_scroll_box .frm_opt_container {
8365 padding: 10px 12px;
8366 }
8367
8368 .frm_wrap input[disabled],
8369 .frm_wrap select[disabled],
8370 .frm_wrap textarea[disabled],
8371 .frm_wrap input[readonly],
8372 .frm_wrap select[readonly],
8373 .frm_wrap textarea[readonly],
8374 .frm_wrap input::placeholder {
8375 color: var(--grey-500);
8376 }
8377
8378 .frm_wrap .frm-button-primary.frm-disabled {
8379 opacity: 0.5;
8380 cursor: default;
8381 }
8382
8383 #postcustomstuff table td > div {
8384 /* To override some inline css in add-on */
8385 padding-top: 0 !important;
8386 }
8387
8388 .wp-admin .frm_wrap .form-table select {
8389 vertical-align: top;
8390 }
8391
8392 .frm_wrap .frm_form_builder select {
8393 line-height: var(--leading);
8394 height: var(--text-md);
8395 width: 100%;
8396 }
8397
8398 #postbox-container-2 select,
8399 .wp-admin .frm_wrap select,
8400 .frm_wrap .frm_form_builder select,
8401 #frm-form-templates-modal select {
8402 height: auto;
8403 background-position: right 11px top 55%;
8404 }
8405
8406 .frm-white-body .tablenav select,
8407 .frm-white-body .tablenav input[type="text"],
8408 .wp-admin .frm_wrap .tablenav select,
8409 .frm_wrap .tablenav input[type="date"],
8410 .frm_wrap .tablenav input[type="text"] {
8411 padding-top: 0;
8412 padding-bottom: 0;
8413 line-height: 1;
8414 }
8415
8416 .frm_wrap .tablenav ::-webkit-datetime-edit {
8417 line-height: 1;
8418 }
8419
8420 .frm-fields button.btn,
8421 .frm-fields textarea,
8422 .frm-fields input[type="text"],
8423 .frm-fields select,
8424 .field-group textarea,
8425 .field-group input[type="text"],
8426 .field-group select,
8427 .accordion-container input.hex,
8428 .frm-fields .frm-input-field {
8429 width: 100%;
8430 outline: 0;
8431 }
8432
8433 .frm-fields button.btn {
8434 height: var(--h-md);
8435 text-align: inherit;
8436 }
8437
8438 .global-font .field-group input[type="text"] {
8439 width: auto;
8440 }
8441
8442 /* Image Options */
8443
8444 .frm_images_dropdown .frm_image_option {
8445 margin: 0 !important;
8446 }
8447
8448 .frm_images_dropdown .frm_radio input[type=radio] {
8449 opacity: 0;
8450 position: absolute;
8451 z-index: -1;
8452 }
8453
8454 .frm_images_dropdown__image .frmsvg {
8455 width: 100%;
8456 max-width: 102px;
8457 fill: none;
8458 margin: 0;
8459 }
8460
8461 .frm_images_dropdown .frm_noallow .frm_image_option_container {
8462 opacity: .5;
8463 }
8464
8465 .frm_images_dropdown .frm_image_option_container {
8466 border-radius: var(--small-radius);
8467 border: 2px solid transparent;
8468 align-items: center;
8469 }
8470
8471 .frm_images_dropdown .frm_image_option_container:hover {
8472 background: #fff !important;
8473 }
8474
8475 .frm_images_dropdown input[type="radio"]:checked + .frm_image_option_container {
8476 background: #fff !important;
8477 border-color: var(--primary-500);
8478 }
8479
8480 .frm_images_dropdown .frm_text_label_for_image {
8481 padding: 0;
8482 text-align: left;
8483 }
8484
8485 /* End Image Options */
8486
8487 /* Welcome page */
8488
8489 .wp-core-ui .frm_grey.frm-button-primary.disabled,
8490 .wp-core-ui .frm_grey.frm-button-primary,
8491 #frm-welcome .frm_grey {
8492 opacity: 0.5;
8493 background: #F6F6F6 !important;
8494 border-color: #ddd !important;
8495 color: #9FA5AA !important;
8496 }
8497
8498 /* Chrome Scrollbars for Windows */
8499 .windows::-webkit-scrollbar,
8500 .windows ::-webkit-scrollbar {
8501 width: 7px;
8502 background: transparent;
8503 }
8504
8505 .windows::-webkit-scrollbar-thumb,
8506 .windows ::-webkit-scrollbar-thumb {
8507 background: var(--grey-300);
8508 -webkit-border-radius: var(--border-radius);
8509 -webkit-box-shadow: none;
8510 }
8511
8512 .windows::-webkit-scrollbar-corner,
8513 .windows ::-webkit-scrollbar-corner {
8514 background: transparent;
8515 }
8516
8517 .frm-scrollbar-wrapper {
8518 overflow-x: hidden;
8519 overflow-y: auto; /* Enable scrolling */
8520 -ms-overflow-style: none; /* For IE and Edge */
8521 scrollbar-color: transparent transparent; /* Firefox Scrollbar - transparent by default and show on hover */
8522 scrollbar-width: thin;
8523 }
8524
8525 .frm-scrollbar-wrapper:hover {
8526 scrollbar-color: var(--grey-300) var(--sidebar-color); /* Firefox Scrollbar - Show on hover */
8527 }
8528
8529 .frm-scrollbar-wrapper::-webkit-scrollbar {
8530 width: 3px;
8531 }
8532
8533 .frm-scrollbar-wrapper::-webkit-scrollbar-track {
8534 background: var(--sidebar-color);
8535 }
8536
8537 .frm-scrollbar-wrapper::-webkit-scrollbar-thumb {
8538 background: transparent;
8539 border-radius: 100vw;
8540 }
8541
8542 .frm-scrollbar-wrapper:hover::-webkit-scrollbar-thumb {
8543 background: var(--grey-300); /* Show scrollbar on hover */
8544 }
8545
8546 .frm-scrollbar-wrapper::-webkit-scrollbar-thumb:hover {
8547 background: var(--grey-400); /* Show scrollbar on hover */
8548 }
8549 /* End scrollbar */
8550
8551 /* RTL */
8552 .rtl h3 {
8553 font-weight: inherit !important;
8554 }
8555
8556 .rtl.js .accordion-section-title:after {
8557 left: 10px;
8558 right: auto;
8559 }
8560
8561 .rtl #frm_top_bar #frm_bs_dropdown {
8562 padding-left: 15px;
8563 }
8564
8565 .rtl .frm-full-close,
8566 .rtl .frm_wrap .columns-2 .frm-right-panel,
8567 .rtl .frm-right-panel {
8568 border-right-width: 1px;
8569 border-left-width: 0;
8570 }
8571
8572 .rtl .frm-full-close {
8573 padding-left: 0;
8574 padding-right: var(--gap-md);
8575 }
8576
8577 .rtl .frm-text-right {
8578 text-align: left;
8579 }
8580
8581 .rtl .frm_wrap #frm_adv_info ul.category-tabs li:first-child {
8582 border-left-width: 1px;
8583 }
8584
8585 .rtl .frm-dropdown-menu {
8586 text-align: right;
8587 }
8588
8589 .rtl .frm_actions_dropdown .frm_icon_font {
8590 float: right;
8591 margin-right: 0;
8592 margin-left: 3px;
8593 }
8594
8595 .rtl #frm-insert-fields-box,
8596 .rtl #frm-conditionals {
8597 padding-right: .9em;
8598 }
8599
8600 .rtl #html_settings .frm_field_html_box {
8601 margin-right: 0;
8602 }
8603
8604 .rtl .frm_list_entry_page h2 {
8605 float: right;
8606 }
8607
8608 .rtl .frm_scale {
8609 float: right;
8610 margin-left: 10px;
8611 margin-right: 0;
8612 }
8613
8614 .rtl .frm-page-break .frm-collapse-page.button {
8615 margin-left: 0;
8616 margin-right: 46%;
8617 }
8618
8619 .rtl .frm-field-action-icons {
8620 right: unset;
8621 left: 2px;
8622 }
8623
8624 .rtl .frm_has_shortcodes > i {
8625 right: auto;
8626 left: 5px;
8627 }
8628
8629 .rtl p.frm_reply_to_container,
8630 .rtl p.frm_bcc_cc_container {
8631 float: left;
8632 }
8633
8634 .rtl .frm-default-switcher {
8635 float: left;
8636 position: relative;
8637 }
8638
8639 .rtl .frm-with-right-icon .frmsvg {
8640 right: auto;
8641 left: 0;
8642 }
8643
8644 .rtl .frm-inline-modal > a.dismiss {
8645 left: 13px;
8646 right: auto;
8647 }
8648
8649 .rtl.wp-admin .frm_wrap select {
8650 padding-left: var(--gap-lg) !important;
8651 padding-right: 5px !important;
8652 background-position: left 11px top 55%;
8653 }
8654
8655 .rtl .frm_code_list.frm-full-hover a span {
8656 margin-left: var(--gap-xs);
8657 }
8658
8659 /* ---------------------------------------------------------------
8660 Clearfix
8661 --------------------------------------------------------------- */
8662 span.clear {
8663 display: block;
8664 }
8665
8666 .clearfix:after {
8667 content: ".";
8668 display: block;
8669 height: 0;
8670 clear: both;
8671 visibility: hidden;
8672 }
8673
8674 .clearfix {
8675 display: inline-block;
8676 }
8677
8678 /*Override styling from other plugins*/
8679 .frm_form_fields .clear {
8680 height: auto;
8681 }
8682
8683 /* Hides from IE-mac \*/
8684 * html .clearfix {
8685 height: 1%;
8686 }
8687
8688 .clearfix {
8689 display: block;
8690 }
8691
8692 /* End hide from IE-mac */
8693
8694 /*-----------------------------------------------------------------
8695 Responsive Design
8696 ---------------------------------------------------------------- */
8697
8698 @media only screen and (max-width: 1200px) {
8699 .frm-addons {
8700 grid-template-columns: 1fr 1fr;
8701 }
8702 }
8703
8704 @media only screen and (max-width: 1050px) {
8705 .frm-white-body,
8706 .frm_wrap {
8707 --biggest-sidebar: 390px;
8708 }
8709
8710 #form_settings_page .columns-2 {
8711 margin: 0;
8712 }
8713
8714 .frm_actions_list {
8715 margin-left: 0;
8716 }
8717 }
8718
8719 @media only screen and (max-width: 960px) {
8720 .frm-white-body,
8721 .frm_wrap {
8722 --gap-sm: 8px;
8723 --gap-md: 16px;
8724 --gap-2xl: 24px;
8725 }
8726
8727 .auto-fold #adminmenuwrap {
8728 width: 36px;
8729 }
8730
8731 .frm_wrap #postbox-container-1 #frm_adv_info {
8732 min-width: 220px;
8733 }
8734
8735 p.howto {
8736 display: inline-block;
8737 }
8738
8739 /* Fix: Issue where the admin page content had extra white space to the left on small screens */
8740 .auto-fold.frm-admin-page-styles:not(.frm-full-screen) .frm_page_container,
8741 .auto-fold:not(.frm-full-screen) .frm_wrap .frm_page_container {
8742 left: 36px;
8743 }
8744 }
8745
8746 @media only screen and (max-width: 850px) {
8747 #frm_bs_dropdown {
8748 /* There isn't enough room for the title on a screen this size so just hide it. */
8749 display: none;
8750 }
8751
8752 .frm-white-body,
8753 .frm_wrap {
8754 --biggest-sidebar: 350px;
8755 --big-sidebar: 350px;
8756 }
8757
8758 #frm_bs_dropdown .frm_bstooltip {
8759 /* There isn't enough room for the title on a screen this size so just hide it. */
8760 display: none !important;
8761 }
8762
8763 .frm_col_one {
8764 clear: none;
8765 }
8766
8767 .frm-fields p > .frm_inline_label,
8768 .frm_inline_label {
8769 display: block;
8770 margin: 5px 0;
8771 }
8772
8773 #frm_top_bar h1 {
8774 width: auto;
8775 max-width: 200px;
8776 }
8777
8778 #frm-publishing {
8779 width: auto;
8780 }
8781
8782 #frm_form_editor_container,
8783 .frm-entry-container {
8784 margin: 0 20px;
8785 }
8786
8787 .frmbutton.ui-sortable-helper .frmsvg,
8788 .field_type_list li.frmbutton .frmsvg,
8789 .frmbutton.ui-sortable-helper i,
8790 .field_type_list li.frmbutton i {
8791 margin: .15em 0 .15em .1em;
8792 width: 25px;
8793 }
8794
8795 .rtl .frmbutton.ui-sortable-helper .frmsvg,
8796 .rtl .field_type_list li.frmbutton .frmsvg,
8797 .rtl .frmbutton.ui-sortable-helper i,
8798 .rtl .field_type_list li.frmbutton i {
8799 margin: .15em .1em .15em 0;
8800 }
8801
8802 .frm_wrap .frm-search {
8803 float: none !important;
8804 width: auto;
8805 clear: both;
8806 }
8807
8808 .post-type-frm_display #frm_adv_info {
8809 top: auto !important;
8810 position: static;
8811 width: auto;
8812 }
8813
8814 .frm_wrap .frm-right-panel #frm_adv_info,
8815 .frm_wrap #postbox-container-1 #frm_adv_info {
8816 min-width: 275px;
8817 }
8818
8819 .frm_wrap #frm_adv_info ul.category-tabs li,
8820 .frm_wrap #frm_adv_info ul.category-tabs li.tabs {
8821 border: none;
8822 }
8823
8824 .frm_wrap #frm_adv_info ul.category-tabs li:first-child {
8825 margin-left: 12px;
8826 }
8827
8828 .frm_wrap #frm_adv_info ul.category-tabs li.tabs {
8829 border-bottom: 2px solid #5b9dd9;
8830 padding-bottom: 8px;
8831 }
8832
8833 .post-type-frm_display #poststuff {
8834 padding: 10px 25px;
8835 }
8836
8837 .post-type-frm_display #side-sortables .postbox {
8838 margin-bottom: 20px;
8839 border-radius: var(--small-radius);
8840 border-top-width: 1px;
8841 }
8842 }
8843
8844 @media only screen and (max-width: 782px) {
8845 .frm-white-body,
8846 .frm_wrap {
8847 --small-sidebar: 20%;
8848 --medium-sidebar: 35%
8849 }
8850
8851 #form_settings_page .advanced_settings .form-table td, .form-table th {
8852 display: table-cell;
8853 width: auto !important;
8854 }
8855
8856 .frm-white-body #publishing-action,
8857 .frm_wrap #publishing-action {
8858 line-height: normal;
8859 }
8860
8861 .frm-white-body #screen-meta-links {
8862 display: none;
8863 }
8864
8865 .frm_wrap .misc-pub-section {
8866 padding: 6px 0;
8867 }
8868
8869 .frm_wrap .misc-pub-section > a {
8870 float: none;
8871 white-space: nowrap;
8872 }
8873
8874 .frm-form-setting-tabs a {
8875 position: relative;
8876 padding: 10px 5px 10px 40px;
8877 }
8878
8879 .frm-form-setting-tabs a .frmsvg,
8880 .frm-form-setting-tabs a i {
8881 position: absolute;
8882 left: 13px;
8883 top: calc(50% - 10px);
8884 margin: 0;
8885 }
8886
8887 #frm-insert-fields .button,
8888 #frm-insert-fields .button a,
8889 .frmbutton.ui-sortable-helper a {
8890 line-height: 26px;
8891 max-height: 28px;
8892 }
8893
8894 a.frm_add_logic_link {
8895 margin-left: 0;
8896 margin-right: 0;
8897 width: 100%;
8898 box-sizing: border-box;
8899 }
8900
8901 a.frm_add_logic_link .frmsvg,
8902 a.frm_add_logic_link i {
8903 display: none;
8904 }
8905
8906 #new_fields .frm_single_option select,
8907 #new_fields .frm_single_option input[type=text] {
8908 width: calc(100% - 83px);
8909 }
8910
8911 .frm_single_entry_page .frm_form_fields input[type=text],
8912 .frm_single_entry_page .frm_form_fields select,
8913 .frm_single_entry_page .frm_form_fields textarea {
8914 width: 100%;
8915 }
8916
8917 .with_frm_style .frm_radio input[type=radio],
8918 .with_frm_style .frm_checkbox input[type=checkbox] {
8919 width: 25px !important;
8920 }
8921
8922 .frm_single_entry_page .with_frm_style .frm_radio input[type=radio],
8923 .frm_single_entry_page .with_frm_style .frm_checkbox input[type=checkbox] {
8924 width: 18px !important;
8925 }
8926
8927 .wp-list-table.toplevel_page_formidable .column-entries,
8928 .wp-list-table.toplevel_page_formidable .column-form_key,
8929 .wp-list-table.toplevel_page_formidable .column-shortcode,
8930 .wp-list-table.toplevel_page_formidable .column-created_at {
8931 display: none !important;
8932 }
8933
8934 .wp-list-table.toplevel_page_formidable td.column-entries,
8935 .wp-list-table.toplevel_page_formidable td.column-form_key,
8936 .wp-list-table.toplevel_page_formidable td.column-shortcode,
8937 .wp-list-table.toplevel_page_formidable td.column-created_at {
8938 padding: 3px 8px 3px 35%;
8939 text-align: left;
8940 }
8941
8942 #form_entries_page .wp-list-table th.frm_hidden,
8943 #form_entries_page .wp-list-table td.frm_hidden {
8944 display: none !important;
8945 }
8946
8947 .frm-white-body.auto-fold #wpcontent {
8948 padding-left: 0;
8949 }
8950
8951 .frm_right_addon .frm_remove_field {
8952 bottom: 11px;
8953 }
8954
8955 .frm-addons {
8956 grid-template-columns: 1fr;
8957 }
8958
8959 .frm-admin-page-styles .frm_page_container,
8960 .frm_wrap .frm_page_container {
8961 left: 0 !important;
8962 top: 46px !important;
8963 height: calc( 100vh - 46px ) !important;
8964 }
8965
8966 .frm_single_entry_page.frm_wrap .columns-2 {
8967 display: block;
8968 border-bottom: none;
8969 }
8970
8971 .frm_single_entry_page .wrap.frm-with-margin {
8972 margin: 10px 20px;
8973 }
8974
8975 .frm_single_entry_page #post-body-content + .frm-right-panel {
8976 width: auto;
8977 margin: 0 20px;
8978 border: 1px solid var(--sidebar-hover);
8979 border-radius: 6px;
8980 }
8981
8982 #wp-content-media-buttons a.frm_insert_form {
8983 padding: 0 var(--gap-sm);
8984 }
8985
8986 .frm-white-body input[type="checkbox"]:checked::before,
8987 .frm_wrap input[type="checkbox"]:checked::before {
8988 width: 1.2rem;
8989 height: 1.2rem;
8990 margin: 0.125rem;
8991 }
8992 }
8993
8994 @media only screen and (max-width: 700px) {
8995 .frm-white-body,
8996 .frm_wrap {
8997 --biggest-sidebar: 50%;
8998 --big-sidebar: 50%;
8999 }
9000 }
9001
9002 @media only screen and (max-width: 600px) {
9003 .frm-white-body,
9004 .frm_wrap {
9005 --small-sidebar: 45px;
9006 }
9007
9008 .frm-form-setting-tabs a {
9009 visibility: collapse;
9010 font-size: 0;
9011 padding: 0 var(--gap-sm);
9012 }
9013
9014 .frm-form-setting-tabs a .frmsvg,
9015 .frm-form-setting-tabs a i {
9016 visibility: visible;
9017 position: initial;
9018 font-size: 18px;
9019 }
9020
9021 #frm_builder_page #frm-insert-fields {
9022 padding: 0;
9023 }
9024
9025 .frm_wrap #frm_adv_info ul.category-tabs li {
9026 display: inline-block;
9027 padding: 0;
9028 margin: 2px 0;
9029 border-bottom: 2px solid transparent;
9030 }
9031
9032 .frm_wrap #frm_adv_info ul.category-tabs li.tabs,
9033 .frm_wrap #frm_adv_info ul.category-tabs li:first-child {
9034 margin-left: 0;
9035 padding: 0;
9036 }
9037
9038 .field_type_list li {
9039 text-align: center;
9040 }
9041
9042 #frm-insert-fields li a {
9043 padding: 5px;
9044 }
9045
9046 .frmbutton.ui-sortable-helper .frmsvg,
9047 .field_type_list li.frmbutton .frmsvg,
9048 .frmbutton.ui-sortable-helper i,
9049 .field_type_list li.frmbutton i {
9050 display: block;
9051 margin: 0 auto 3px;
9052 text-align: center;
9053 }
9054
9055 #frm_form_editor_container .frm_primary_label {
9056 clear: both;
9057 }
9058
9059 #frm_builder_page .frm_code_list a.button {
9060 padding: 2px;
9061 }
9062
9063 #frm_builder_page .frm_actions_dropdown > .frm-dropdown-menu {
9064 right: 0;
9065 left: auto;
9066 }
9067
9068 .frm-right-panel h3.accordion-section-title {
9069 padding-right: 10px;
9070 padding-left: 10px;
9071 font-size: 20px;
9072 white-space: nowrap;
9073 overflow: hidden;
9074 }
9075
9076 .frm-right-panel .accordion-section-title:before {
9077 margin-left: 0;
9078 margin-right: 3px;
9079 }
9080
9081 .rtl #frm_builder_page .frm_actions_dropdown > .frm-dropdown-menu {
9082 right: auto;
9083 left: 0;
9084 }
9085
9086 .frm_on_submit_type svg {
9087 display: none;
9088 }
9089 }
9090
9091 @media only screen and (max-width: 475px) {
9092 #frm_bs_dropdown {
9093 float: none;
9094 }
9095
9096 #frm-nav-tabs {
9097 padding: 0;
9098 white-space: nowrap;
9099 }
9100
9101 #frm-nav-tabs a {
9102 margin-right: 0;
9103 }
9104 }
9105
9106 /* Firefox */
9107 @-moz-document url-prefix() {
9108 .frm-white-body .tablenav select,
9109 .frm-white-body .tablenav input[type="text"],
9110 .wp-admin .frm_wrap .tablenav select,
9111 .frm_wrap .tablenav input[type="text"] {
9112 padding-top: 5px;
9113 }
9114 }
9115
9116 /* PRINT */
9117 @media print {
9118 a, .misc-pub-section a {
9119 color: #000 !important;
9120 }
9121
9122 .add-new-h2, #frm_top_bar, .dashicons,
9123 #adminmenuwrap, #adminmenuback, #wphead, #button_bar, #submitdiv, .button-secondary,
9124 #screen-metas, #screen-meta-links, #footer, #wpfooter, .inner-sidebar, .frm_form_nav,
9125 .frm_flash_graph, .frm_no_print, object, .error {
9126 visibility: hidden;
9127 display: none !important;
9128 }
9129
9130 .widget, .postbox, .stuffbox, .postbox h3 {
9131 border-width: 0 !important;
9132 border-color: #fff;
9133 }
9134
9135 .postbox {
9136 background: #fff !important;
9137 border: none;
9138 position: static;
9139 }
9140
9141 .postbox h3, .postbox h4 {
9142 background: #fff !important;
9143 }
9144
9145 #wpbody-content {
9146 float: none;
9147 }
9148
9149 #wpcontent, #post-body-content,
9150 .has-right-sidebar #post-body,
9151 #poststuff .columns-2 {
9152 margin: 0 !important;
9153 }
9154
9155 .frm_wrap #poststuff .columns-2 {
9156 display: block;
9157 }
9158
9159 #post-body-content + .frm-right-panel,
9160 .frm_wrap .columns-2 .frm-right-panel,
9161 .frm-right-panel {
9162 border: none;
9163 width: auto;
9164 display: block;
9165 padding: 20px;
9166 }
9167
9168 .frm_wrap .columns-2,
9169 .frm_wrap .frm_page_container {
9170 height: auto;
9171 display: block;
9172 }
9173
9174 .misc-pub-section > span {
9175 padding: 0;
9176 }
9177
9178 .frm-right-panel .postbox .inside {
9179 padding-left: 12px;
9180 padding-right: 12px;
9181 }
9182
9183 .curtime #timestamp:before {
9184 display: none;
9185 content: none !important;
9186 }
9187
9188 .frm_charts .alignleft {
9189 float: none;
9190 }
9191
9192 .pg_odd, .pg_even {
9193 page-break-inside: avoid;
9194 max-width: 600px;
9195 }
9196
9197 .form-table td, .form-table th {
9198 padding: 0;
9199 }
9200
9201 .frm_file_container a {
9202 display: block;
9203 width: 100%;
9204 }
9205 }
9206
9207 .frm-admin-page-styles #frm-publishing #save_menu_header,
9208 .frm-admin-page-styles2 #frm-publishing #save_menu_header {
9209 display: inline-block;
9210 }
9211
9212 /* Change the order of subfields of the Name field in the backend */
9213 .edit_form_item .frm_combo_inputs_container[data-name-layout="last_first"] .frm_form_subfield-first {
9214 order: 2;
9215 }
9216
9217 .frm-video-wrapper iframe {
9218 width: 100%;
9219 max-width: 843px;
9220 border-radius: var(--border-radius);
9221 }
9222
9223 #frm_field_group_popup {
9224 position: absolute;
9225 top: 0;
9226 right: 0;
9227 width: 366px;
9228 max-height: 231px;
9229 border-radius: 8px;
9230 background: #fff;
9231 box-shadow: 0px 20px 48px rgba(40, 47, 54, 0.15);
9232 z-index: 3;
9233 box-sizing: border-box;
9234 padding: 24px 0;
9235 text-align: left;
9236 }
9237
9238 .rtl #frm_field_group_popup {
9239 text-align: right;
9240 }
9241
9242 .frm-merge-fields-into-row #frm_field_group_popup {
9243 top: unset;
9244 bottom: 50px;
9245 height: 196px;
9246 }
9247
9248 #frm_field_group_popup > hr {
9249 margin: 12px 0;
9250 }
9251
9252 #frm_field_group_popup .frm-cancel-custom-field-group-layout,
9253 #frm_field_group_popup .frm-save-custom-field-group-layout {
9254 padding: 4px 18px;
9255 }
9256
9257 #frm_field_group_popup .frm-cancel-custom-field-group-layout:hover {
9258 border-color: var(--primary-500) !important;
9259 color: var(--primary-500);
9260 background-color: transparent !important;
9261 }
9262
9263 .frm-merge-fields-into-row #frm_field_group_popup .frm-break-field-group {
9264 display: none;
9265 }
9266
9267 .frm-merge-fields-into-row > a {
9268 color: rgba(40, 47, 54, 0.85);
9269 position: relative;
9270 top: 2px;
9271 }
9272
9273 .frm-row-layout-title {
9274 font-weight: 600;
9275 font-size: 11px;
9276 line-height: 15px;
9277 text-transform: uppercase;
9278 color: rgba(40, 47, 54, 0.45);
9279 margin-bottom: 27px;
9280 }
9281
9282 .frm-row-layout-option {
9283 background: #F6F7FB;
9284 box-sizing: border-box;
9285 border-radius: 2px;
9286 padding: 15px 10px;
9287 }
9288
9289 #frm_field_group_popup .frm-row-layout-option .frm_grid_container {
9290 grid-gap: 0 5%;
9291 grid-template-columns: repeat(12, auto);
9292 }
9293
9294 #frm_field_group_popup .frm-row-layout-option {
9295 cursor: pointer;
9296 border: 2px solid transparent;
9297 }
9298
9299 #frm_field_group_popup .frm-row-layout-option.frm-active-row-layout,
9300 #frm_field_group_popup .frm-row-layout-option:hover {
9301 border-color: var(--primary-500);
9302 }
9303
9304 .frm-custom-field-group-layout,
9305 .frm-break-field-group {
9306 padding: 4px 24px;
9307 cursor: pointer;
9308 font-size: var(--text-sm);
9309 line-height: 19px;
9310 color: rgba(72, 78, 84, 1);
9311 }
9312
9313 .frm-custom-field-group-layout:hover,
9314 .frm-break-field-group:hover {
9315 background-color: #f5f5f5f5;
9316 }
9317
9318 .frm-custom-field-group-layout svg,
9319 .frm-break-field-group svg {
9320 margin-right: 5px;
9321 }
9322
9323 #frm_field_multiselect_popup {
9324 background: white;
9325 height: 48px;
9326 position: fixed;
9327 border-radius: 4px;
9328 box-shadow: 0px 8px 24px rgba(40, 47, 54, 0.15);
9329 color: rgba(40, 47, 54, 0.85);
9330 font-size: 13px;
9331 right: 30px;
9332 bottom: 10px;
9333 }
9334
9335 #frm_field_multiselect_popup > div {
9336 display: inline-block;
9337 line-height: 48px;
9338 vertical-align: top;
9339 }
9340
9341 #frm_field_multiselect_popup.frm-unmergable > .frm-merge-fields-into-row,
9342 #frm_field_multiselect_popup.frm-unmergable > .frm-multiselect-popup-separator {
9343 display: none;
9344 }
9345
9346 #frm_field_multiselect_popup > div:not(.frm-multiselect-popup-separator) {
9347 padding: 0 20px;
9348 cursor: pointer;
9349 }
9350
9351 #frm_field_multiselect_popup > div:not(.frm-multiselect-popup-separator):hover {
9352 background: #f5f5f5f5;
9353 }
9354
9355 .frm-builder-popup-heading {
9356 font-weight: 600;
9357 font-size: 11px;
9358 line-height: 15px;
9359 text-transform: uppercase;
9360 color: rgba(40, 47, 54, 0.45);
9361 margin-bottom: 7px;
9362 }
9363
9364 .frm-builder-popup-subheading {
9365 font-size: 12px;
9366 line-height: 16px;
9367 color: rgba(40, 47, 54, 0.45);
9368 }
9369
9370 #frm_field_group_popup input[type="text"] {
9371 height: 30px;
9372 border-radius: 3px;
9373 font-size: 14px;
9374 padding: 8px;
9375 color: rgba(84, 95, 110, 1);
9376 border-color: rgba(40, 47, 54, 0.2);
9377 }
9378
9379 .frm-multiselect-popup-separator {
9380 height: 36px;
9381 width: 1px;
9382 position: relative;
9383 top: 6px;
9384 background: #C4C4C4;
9385 }
9386
9387 .frm-sortable-helper,
9388 .frm-multiselect-key-is-down li.form-field:not(.edit_field_type_divider) {
9389 pointer-events: none;
9390 }
9391
9392 .frm-sortable-helper {
9393 /* Make sure the item being dragged appears above other form builder fields */
9394 z-index: 99;
9395 }
9396
9397 #frm_banner {
9398 width: 100%;
9399 color: #fff;
9400 background: var(--primary-500);
9401 height: 40px;
9402 line-height: 40px;
9403 text-align: center;
9404 position: relative;
9405 }
9406
9407 .frm-banner-emoji {
9408 font-size: 19px;
9409 }
9410
9411 .frm-banner-emoji,
9412 .frm-banner-title {
9413 margin-right: 5px;
9414 vertical-align: top;
9415 }
9416
9417 .frm-banner-cta a {
9418 text-decoration: underline !important;
9419 }
9420
9421 #frm_banner .frm-banner-cta a.frm_inbox_dismiss {
9422 display: none;
9423 }
9424
9425 .frm-banner-dismiss {
9426 cursor: pointer;
9427 position: absolute;
9428 right: 10px;
9429 top: 50%;
9430 transform: translateY( -50% );
9431 }
9432
9433 .frm-banner-dismiss .frmsvg {
9434 vertical-align: top;
9435 }
9436
9437 .frm-ready-made-solution:not(.frm-search-result) {
9438 display: none !important;
9439 }
9440
9441 #frm_leave_email_wrapper .frmsvg {
9442 top: 0;
9443 }
9444
9445 #frm-add-my-email-address {
9446 margin-top: 30px;
9447 }
9448
9449 .frm-ready-made-solution h3 ~ a {
9450 color: var(--primary-500);
9451 }
9452
9453 .frm-ready-made-solution img {
9454 max-width: 100%;
9455 display: block;
9456 box-shadow: var(--box-shadow-lg);
9457 }
9458
9459 /* On Submit action */
9460 .frm_single_on_submit_settings .frm_form_field {
9461 margin: 8px 0;
9462 }
9463
9464 .frm_on_submit_type_setting {
9465 padding: 8px 0;
9466 }
9467
9468 .frm_on_submit_type label {
9469 display: flex;
9470 border: 1px solid var(--grey-border);
9471 border-radius: var(--small-radius);
9472 gap: 16px;
9473 padding: 16px;
9474 align-items: center;
9475 justify-content: center;
9476 }
9477
9478 .frm_on_submit_type input {
9479 opacity: 0 !important;
9480 position: absolute;
9481 z-index: -1;
9482 }
9483
9484 .frm_on_submit_type input[type="radio"]:checked + label {
9485 border-color: var(--primary-color);
9486 box-shadow: 0 0 0 1px var(--primary-color);
9487 }
9488
9489 #form_settings_page .frm_on_submit_type label:hover,
9490 .frm_on_submit_type input[type="radio"]:checked + label svg {
9491 color: var(--primary-color);
9492 }
9493 /* End On Submit action */
9494
9495 /* Start call-to-action */
9496 .frm_pro_tip,
9497 .frm-cta {
9498 justify-content: space-between;
9499 align-items: center;
9500 gap: var(--gap-2xl);
9501 padding: var(--gap-xs) var(--gap-sm);
9502 border-radius: var(--small-radius);
9503 background: var(--primary-25);
9504 }
9505
9506 .frm-cta.frm-cta-border {
9507 border: 1px solid var(--primary-200);
9508 }
9509
9510 .frm-cta h4 {
9511 font-weight: 600;
9512 margin: 0;
9513 }
9514
9515 .frm-cta-green {
9516 background-color: var(--success-25);
9517 }
9518
9519 .frm-cta-green .frm-banner-title {
9520 gap: calc(var(--gap-2xs) + 1px);
9521 color: var(--grey-700);
9522 }
9523
9524 .frm-cta-green.frm-cta-border {
9525 border-color: var(--success-100)
9526 }
9527
9528 .frm-right-panel .inside .frm_pro_tip,
9529 .frm_pro_tip {
9530 color: var(--grey-700);
9531 background: #FFE7DE;
9532 margin: 0 auto;
9533 display: flex;
9534 gap: var(--gap-xs);
9535 }
9536
9537 .frm_field_list .frm_pro_tip {
9538 margin: 10px 15px;
9539 position: relative;
9540 width: calc(100% - 30px);
9541 box-sizing: border-box;
9542 }
9543
9544 .frm_pro_tip .frmsvg,
9545 .frm_pro_tip i {
9546 color: var(--orange);
9547 }
9548
9549 .frm-tip-info {
9550 flex: 1;
9551 text-align: left;
9552 }
9553
9554 .frm-tip-cta {
9555 color: var(--orange);
9556 }
9557
9558 .frm-light-tip .frm_pro_tip {
9559 background: var(--primary-25);
9560 }
9561
9562 .frm-light-tip .frm_pro_tip .frmsvg,
9563 .frm-light-tip .frm_pro_tip i,
9564 .frm-light-tip .frm-tip-cta {
9565 color: var(--primary-500);
9566 }
9567
9568 .frm-tip-cta:hover {
9569 color: var(--primary-500);
9570 }
9571
9572 .nav-tab-wrapper .frm_pro_tip {
9573 float: right;
9574 }
9575 /* End call-to-action */
9576
9577 /* Start confirm and form templates modals */
9578 #frm-form-templates-modal textarea {
9579 height: 108px;
9580 }
9581
9582 #frm-form-templates-modal .frm-fields button.btn {
9583 border-color: var(--grey-300);
9584 color: var(--grey-900);
9585 cursor: pointer;
9586 }
9587
9588 #frm-form-templates-modal .frm-fields button.btn .frmsvg {
9589 color: var(--grey-400);
9590 width: 14px;
9591 height: 14px;
9592 }
9593
9594 #frm-form-templates-modal .frm-form-templates-modal-fieldset {
9595 position: relative;
9596 }
9597
9598 #frm-form-templates-modal .frm-form-templates-modal-fieldset .frm-with-left-icon .frmsvg {
9599 padding: 0;
9600 top: 0;
9601 left: 13px;
9602 }
9603
9604 /* Fixes pro issue #3508, prevent a conflict that hides the postbox in modal */
9605 #frm-form-templates-modal .postbox {
9606 display: block !important;
9607 }
9608
9609 /* Leave email modal */
9610 #frm_empty_inbox #frm-leave-email-modal {
9611 margin-top: var(--gap-2xl);
9612 }
9613
9614 /* Name your form modal */
9615 #frm-name-your-form-modal .frm_modal_top {
9616 padding-top: var(--gap-sm);
9617 }
9618 /* End confirm and form templates modals */
9619
9620 /* Field Group Message */
9621 #frm-field-group-message {
9622 position: absolute;
9623 bottom: 32px;
9624 right: calc(50% - var(--biggest-sidebar));
9625 padding: var(--gap-xs) var(--gap-sm);
9626 border-radius: 100px;
9627 background-color: var(--primary-25);
9628 }
9629
9630 #frm-field-group-message .frm-field-group-message-text {
9631 gap: 10px;
9632 color: var(--grey-800);
9633 }
9634
9635 #frm-field-group-message-dismiss {
9636 margin-left: var(--gap-xs)
9637 }
9638
9639 #frm-field-group-message-dismiss .frmsvg {
9640 color: var(--grey-800);
9641 width: 15px;
9642 height: 15px;
9643 cursor: pointer;
9644 transition: color 300ms ease-in-out;
9645 }
9646
9647 #frm-field-group-message-dismiss .frmsvg:hover {
9648 color: var(--grey-500);
9649 }
9650 /* End Field Group Message */
9651
9652 /* Start card layout */
9653 .frm-card-item {
9654 display: flex;
9655 border: 1px solid var(--grey-200);
9656 border-radius: var(--small-radius);
9657 padding: var(--gap-sm);
9658 box-shadow: var(--box-shadow-xs);
9659 background: #FFFFFF;
9660 }
9661 .frm-card-item:not(.frm-counter-card) {
9662 gap: 10px;
9663 }
9664 .frm-compact-card-item {
9665 padding: var(--gap-sm) 35px 10px 35px;
9666 }
9667 /* End card layout */
9668
9669 /* Pirate forms importer */
9670 #welcome-panel:has(#frm_form_pf_importer) {
9671 background-color: #fff;
9672 margin: var(--gap-sm) var(--gap-md) var(--gap-md);
9673 line-height: 2;
9674 }
9675
9676 #welcome-panel:has(#frm_form_pf_importer) .welcome-panel-content {
9677 text-align: start !important;
9678 min-height: unset;
9679 display: block;
9680 }
9681
9682 #frm_form_pf_importer div {
9683 margin: 10px 0 !important;
9684 }
9685
9686 #frm_form_pf_importer button {
9687 border: 1px solid var(--primary-500);
9688 padding: 7px 16px;
9689 min-height: 28px;
9690 line-height: var(--leading);
9691 margin-bottom: 0;
9692 background: var(--primary-500);
9693 color: #fff !important;
9694 }
9695
9696 #frm_form_pf_importer button:hover {
9697 background: #135e96;
9698 border-color: #135e96;
9699 }
9700 /* End Pirate forms importer */
9701
9702 /* Start Option Box */
9703 .frm-option-box {
9704 display: flex;
9705 justify-content: space-between;
9706 align-items: center;
9707 font-size: 14px;
9708 font-weight: 500;
9709 background-color: #fff;
9710 padding: 12px var(--gap-sm);
9711 border: 1px solid var(--grey-200);
9712 border-radius: var(--small-radius);
9713 margin-bottom: var(--gap-xs);
9714 transition: background-color 100ms ease-out;
9715 cursor: pointer;
9716 }
9717
9718 .frm-option-box:hover {
9719 background-color: var(--grey-25);
9720 }
9721
9722 .frm-option-box.frm-checked {
9723 background-color: var(--primary-25);
9724 border-color: var(--primary-200);
9725 }
9726
9727 .frm-option-box.frm-disabled {
9728 cursor: default;
9729 }
9730
9731 .frm-option-box input[type="checkbox"] {
9732 margin: 0;
9733 }
9734
9735 .frm-option-box.frm-disabled input[type="checkbox"] {
9736 opacity: 0.5;
9737 }
9738
9739 .frm-option-box .frm_help .frmsvg {
9740 width: 12px;
9741 height: 12px;
9742 }
9743 /* End Option Box */
9744
9745 /* Start Validation Error */
9746 .frm-validation-error:not(.frm_hidden) {
9747 display: flex;
9748 }
9749
9750 .frm-validation-error {
9751 gap: calc(var(--gap-xs) + var(--gap-2xs));
9752 }
9753
9754 .frm-validation-error span {
9755 color: var(--error-500);
9756 }
9757
9758 .frm-validation-error span[frm-error] {
9759 display: none;
9760 }
9761
9762 .frm-validation-error[frm-error="empty"] span[frm-error="empty"],
9763 .frm-validation-error[frm-error="invalid"] span[frm-error="invalid"],
9764 .frm-validation-error[frm-error="custom"] span[frm-error="custom"] {
9765 display: inline-block;
9766 }
9767
9768 /* Start Box Styles */
9769 .frm-box {
9770 padding: var(--gap-sm);
9771 border: 1px solid var(--grey-200);
9772 border-radius: var(--small-radius);
9773 }
9774 /* End Box Styles */
9775
9776 /* Start External Link Styles */
9777 .frm-link-with-external-icon {
9778 display: flex;
9779 align-items: center;
9780 gap: var(--gap-2xs);
9781 font-size: var(--text-xs);
9782 }
9783
9784 .frm-link-with-external-icon .frmsvg {
9785 width: 16px;
9786 height: 16px;
9787 transform: rotate(45deg);
9788 }
9789 /* End External Link Styles */
9790