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

9,789 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 .frm-over-droppable + .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 }
7911
7912 .frm_actions_list a.frm_show_upgrade.frm_inactive_action:before,
7913 li.frm_noallow.button.frm_show_upgrade {
7914 cursor: pointer;
7915 }
7916
7917 .field_type_list li.frm_noallow.button.frm_show_upgrade:hover {
7918 border-color: inherit;
7919 }
7920
7921 .frm_noallow a {
7922 color: inherit;
7923 }
7924
7925 #frm_upgrade_modal_image {
7926 max-width: 200px;
7927 }
7928 #frm_upgrade_modal .frm-upgrade-message img {
7929 margin-top: 10px;
7930 width: 100%;
7931 }
7932 .frm-tab-message {
7933 max-width: 600px;
7934 margin: 20px auto;
7935 color: rgba(63, 75, 91, 0.8);
7936 }
7937
7938 .frm-settings-screenshot-toolbar {
7939 min-height: 39px;
7940 display: flex;
7941 }
7942
7943 .frm-settings-screenshot-toolbar .frm-minmax-icon {
7944 height: 8px;
7945 width: 8px;
7946 border-radius: 50%;
7947 align-self: center;
7948 margin-left: 10px;
7949 }
7950
7951 .frm-settings-screenshot-toolbar .frm-minmax-icon:first-of-type {
7952 margin-left: 20px;
7953 }
7954
7955 .frm-settings-screenshot-toolbar img {
7956 object-fit: contain;
7957 align-self: flex-end;
7958 margin-left: 25px;
7959 }
7960
7961 .frm-settings-screenshot-toolbar + div {
7962 background: #fff;
7963 padding-top: 25px;
7964 border-radius: 0 0 16px 16px;
7965 }
7966
7967 .frm-settings-screenshot-toolbar + div img {
7968 max-width: calc( 100% - 40px );
7969 }
7970
7971 .frm-settings-screenshot-wrapper {
7972 max-width: 700px;
7973 margin: 50px auto 0;
7974 box-shadow: 0px 4px 4px rgba(189, 196, 205, 0.25), 0px 12px 56px rgba(42, 57, 75, 0.25);
7975 border-radius: 16px;
7976 background: #EBECF1;
7977 }
7978
7979 .frm-dialog {
7980 z-index: 100;
7981 padding: 0 !important;
7982 border-radius: 16px;
7983 border: none;
7984 background-color: #fff;
7985 max-width: 100% !important;
7986 }
7987
7988 .frm-dialog .postbox {
7989 background: transparent;
7990 box-shadow: none;
7991 border: none;
7992 line-height: var(--leading);
7993 }
7994
7995 .frm-dialog input[type=text],
7996 .frm-dialog textarea {
7997 font-size: var(--text-md);
7998 }
7999
8000 .frm-dialog textarea {
8001 height: 75px;
8002 }
8003
8004 .frm-dialog button.frm-button-primary {
8005 margin-right: 10px;
8006 }
8007
8008 .frm-dialog .frm-sub-label,
8009 .frm-sub-label {
8010 color: var(--grey);
8011 text-transform: none;
8012 padding-left: 8px;
8013 }
8014
8015 h2 .frm-sub-label {
8016 font-size: var(--text-md);
8017 }
8018
8019 .frm-views-editor-body .ui-widget-overlay,
8020 .frm-white-body .ui-widget-overlay,
8021 .toplevel_page_formidable .ui-widget-overlay,
8022 body[class*=formidable-payments] .ui-widget-overlay {
8023 position: fixed;
8024 width: 100%;
8025 height: 100%;
8026 top: 0;
8027 left: 0;
8028 right: 0;
8029 bottom: 0;
8030 background: var(--grey-500);
8031 opacity: .5;
8032 z-index: 2;
8033 }
8034
8035 .frm-circled-icon {
8036 width: 60px;
8037 height: 60px;
8038 border-radius: 50%;
8039 background-color: var(--primary-25);
8040 }
8041
8042 .frm-circled-icon-large {
8043 width: 80px;
8044 height: 80px;
8045 }
8046
8047 .frm-circled-icon-green {
8048 background-color: var(--success-50);
8049 }
8050
8051 .frm-circled-icon .frmsvg {
8052 width: 21px;
8053 height: 24px;
8054 }
8055
8056 .frm-circled-icon-large .frmsvg {
8057 width: 24px;
8058 }
8059
8060 .frm-circled-icon .frmsvg use {
8061 color: var(--primary-500);
8062 }
8063
8064 .frm-circled-icon-green .frmsvg use {
8065 color: var(--success-500);
8066 }
8067
8068 .frm-upgrade-message img {
8069 max-width: 100%;
8070 }
8071
8072 a.frm-link-secondary {
8073 color: #c4c4c4;
8074 font-size: var(--text-sm);
8075 text-decoration: underline;
8076 }
8077
8078 .field_type_list li.button.frm_noallow,
8079 .field_type_list li.button.frm_noallow:hover,
8080 .button.frm_noallow,
8081 .button.frm_noallow:hover {
8082 color: inherit;
8083 border-color: #ccc;
8084 background: inherit;
8085 }
8086
8087 iframe#dyncontent_ifr {
8088 min-height: 150px;
8089 }
8090
8091 /*!
8092 * Bootstrap v4.6.1
8093 */
8094
8095 .tooltip {
8096 /* Copied from Bootstrap */
8097 position: absolute;
8098 display: block;
8099 margin: 0;
8100 font-style: normal;
8101 font-weight: 400;
8102 line-height: 1.5;
8103 text-align: left;
8104 text-align: start;
8105 text-decoration: none;
8106 text-shadow: none;
8107 text-transform: none;
8108 letter-spacing: normal;
8109 word-break: normal;
8110 word-spacing: normal;
8111 white-space: normal;
8112 line-break: auto;
8113 font-size: 0.875rem;
8114 word-wrap: break-word;
8115 opacity: 0;
8116
8117 /* Custom rules */
8118 z-index: 9999999;
8119 pointer-events: none;
8120 }
8121
8122 .tooltip.show {
8123 opacity: 0.9;
8124 }
8125
8126 .tooltip .arrow {
8127 position: absolute;
8128 display: block;
8129 width: 0.8rem;
8130 height: 0.4rem;
8131 margin-left: 0 !important;
8132 }
8133
8134 .tooltip .arrow::before {
8135 position: absolute;
8136 content: "";
8137 border-color: transparent;
8138 border-style: solid;
8139 }
8140
8141 .bs-tooltip-top, .bs-tooltip-auto[x-placement^="top"] {
8142 padding: 0.4rem 0;
8143 }
8144
8145 .bs-tooltip-top .arrow, .bs-tooltip-auto[x-placement^="top"] .arrow {
8146 bottom: 0;
8147 }
8148
8149 .bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before {
8150 top: 0;
8151 border-width: 0.4rem 0.4rem 0;
8152 border-top-color: #000;
8153 }
8154
8155 .bs-tooltip-right, .bs-tooltip-auto[x-placement^="right"] {
8156 padding: 0 0.4rem;
8157 }
8158
8159 .bs-tooltip-right .arrow, .bs-tooltip-auto[x-placement^="right"] .arrow {
8160 left: 0;
8161 width: 0.4rem;
8162 height: 0.8rem;
8163 }
8164
8165 .bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before {
8166 right: 0;
8167 border-width: 0.4rem 0.4rem 0.4rem 0;
8168 border-right-color: #000;
8169 }
8170
8171 .bs-tooltip-bottom, .bs-tooltip-auto[x-placement^="bottom"] {
8172 padding: 0.4rem 0;
8173 }
8174
8175 .bs-tooltip-bottom .arrow, .bs-tooltip-auto[x-placement^="bottom"] .arrow {
8176 top: 0;
8177 }
8178
8179 .bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
8180 bottom: 0;
8181 border-width: 0 0.4rem 0.4rem;
8182 border-bottom-color: #000;
8183 }
8184
8185 .bs-tooltip-left, .bs-tooltip-auto[x-placement^="left"] {
8186 padding: 0 0.4rem;
8187 }
8188
8189 .bs-tooltip-left .arrow, .bs-tooltip-auto[x-placement^="left"] .arrow {
8190 right: 0;
8191 width: 0.4rem;
8192 height: 0.8rem;
8193 }
8194
8195 .bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before {
8196 left: 0;
8197 border-width: 0.4rem 0 0.4rem 0.4rem;
8198 border-left-color: #000;
8199 }
8200
8201 .tooltip-inner {
8202 max-width: 200px;
8203 padding: 0.25rem 0.5rem;
8204 color: #fff;
8205 text-align: center;
8206 background-color: #000;
8207 border-radius: 0.25rem;
8208 }
8209
8210 .frm-dropdown-menu.show {
8211 display: block;
8212 }
8213
8214 /* End Bootstrap */
8215
8216 .preview.dropdown .dropdown-menu {
8217 min-width: 205px;
8218 }
8219
8220 .frm_clear {
8221 clear: both;
8222 }
8223
8224 .frm_clearfix:after {
8225 content: ".";
8226 display: block;
8227 clear: both;
8228 visibility: hidden;
8229 line-height: 0;
8230 height: 0;
8231 }
8232
8233 .frm_clearfix {
8234 display: block;
8235 }
8236
8237 .frm_admin_progress {
8238 overflow: hidden;
8239 height: 20px;
8240 margin-bottom: 20px;
8241 background-color: #f5f5f5;
8242 border-radius: 4px;
8243 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
8244 }
8245
8246 .frm_admin_progress_bar {
8247 float: left;
8248 width: 0;
8249 height: 100%;
8250 font-size: 12px;
8251 line-height: 20px;
8252 color: #ffffff;
8253 text-align: center;
8254 box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
8255 transition: width 0.6s ease;
8256 background-color: #04A4CC;
8257 }
8258
8259 .tooltip.frm_tooltip {
8260 position: fixed;
8261 top: auto !important;
8262 bottom: 0 !important;
8263 left: 0 !important;
8264 max-width: none;
8265 width: 100% !important;
8266 z-index: 99999;
8267 }
8268
8269 .tooltip.frm_tooltip.bottom {
8270 padding: 0;
8271 }
8272
8273 .frm_tooltip .tooltip-inner {
8274 max-width: none;
8275 min-height: 40px !important;
8276 text-align: left;
8277 box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.5);
8278 padding: 10px 40px;
8279 border-top-color: #ccc;
8280 background: var(--sidebar-color);
8281 color: var(--grey-700);
8282 border-radius: 0;
8283 opacity: 1;
8284 font-size: var(--text-sm);
8285 }
8286
8287 #frm_custom_css_box {
8288 width: 100%;
8289 }
8290
8291 /*form inputs/selects */
8292 .frm_form_field.frm_scroll_box .frm_opt_container,
8293 .frm-white-body .wrap input[type="text"], /* Cover Views pages */
8294 .frm-white-body .wrap input[type="search"],
8295 .frm-white-body .wrap input[type="number"],
8296 .frm-white-body .wrap select,
8297 #frm-form-templates-modal select,
8298 .frm-white-body .wrap textarea,
8299 button.frm_choose_image_box,
8300 #titlediv input[type="text"],
8301 .frm-fields button.btn,
8302 .frm_wrap textarea,
8303 .frm_wrap input[type="tel"],
8304 .frm_wrap input[type="text"],
8305 .frm_wrap input[type="email"]
8306 .frm_wrap input[type=search],
8307 .frm_wrap input[type="number"],
8308 .frm_wrap input[type="date"],
8309 .frm_wrap select,
8310 .wp-admin .frm_wrap select,
8311 .field-group textarea,
8312 .field-group input[type="text"],
8313 .field-group select,
8314 .frm-fields .frm-input-field {
8315 outline: 0;
8316 box-shadow: none;
8317 border-radius: var(--small-radius);
8318 padding: 5px 14px;
8319 border-color: var(--grey-300);
8320 color: var(--grey-800);
8321 font-size: var(--text-md);
8322 margin: 0;
8323 background-color: #fff;
8324 line-height: var(--leading);
8325 }
8326
8327 .frm_wrap ::-webkit-datetime-edit {
8328 line-height: var(--leading);
8329 }
8330
8331 .frm-white-body textarea:focus,
8332 .frm-white-body input:focus,
8333 .frm-white-body select:focus,
8334 .frm_wrap input:focus,
8335 .frm_wrap select:focus,
8336 .wp-core-ui .frm_wrap select:focus,
8337 #frm-form-templates-modal select:focus,
8338 .frm-btn-group .multiselect.dropdown-toggle:focus,
8339 .frm_wrap textarea:focus {
8340 border-color: var(--primary-500) !important;
8341 box-shadow: none !important;
8342 }
8343
8344 #postbox-container-2 textarea,
8345 .frm_wrap textarea,
8346 .field-group textarea {
8347 line-height: 2;
8348 }
8349
8350 .frm_wrap input[type="number"] {
8351 height: auto;
8352 }
8353
8354 .frm_wrap select {
8355 padding: 2px;
8356 }
8357
8358 .wp-admin .frm_wrap select,
8359 #frm-form-templates-modal select {
8360 max-width: 100%;
8361 }
8362
8363 .frm_form_field.frm_scroll_box .frm_opt_container {
8364 padding: 10px 12px;
8365 }
8366
8367 .frm_wrap input[disabled],
8368 .frm_wrap select[disabled],
8369 .frm_wrap textarea[disabled],
8370 .frm_wrap input[readonly],
8371 .frm_wrap select[readonly],
8372 .frm_wrap textarea[readonly],
8373 .frm_wrap input::placeholder {
8374 color: var(--grey-500);
8375 }
8376
8377 .frm_wrap .frm-button-primary.frm-disabled {
8378 opacity: 0.5;
8379 cursor: default;
8380 }
8381
8382 #postcustomstuff table td > div {
8383 /* To override some inline css in add-on */
8384 padding-top: 0 !important;
8385 }
8386
8387 .wp-admin .frm_wrap .form-table select {
8388 vertical-align: top;
8389 }
8390
8391 .frm_wrap .frm_form_builder select {
8392 line-height: var(--leading);
8393 height: var(--text-md);
8394 width: 100%;
8395 }
8396
8397 #postbox-container-2 select,
8398 .wp-admin .frm_wrap select,
8399 .frm_wrap .frm_form_builder select,
8400 #frm-form-templates-modal select {
8401 height: auto;
8402 background-position: right 11px top 55%;
8403 }
8404
8405 .frm-white-body .tablenav select,
8406 .frm-white-body .tablenav input[type="text"],
8407 .wp-admin .frm_wrap .tablenav select,
8408 .frm_wrap .tablenav input[type="date"],
8409 .frm_wrap .tablenav input[type="text"] {
8410 padding-top: 0;
8411 padding-bottom: 0;
8412 line-height: 1;
8413 }
8414
8415 .frm_wrap .tablenav ::-webkit-datetime-edit {
8416 line-height: 1;
8417 }
8418
8419 .frm-fields button.btn,
8420 .frm-fields textarea,
8421 .frm-fields input[type="text"],
8422 .frm-fields select,
8423 .field-group textarea,
8424 .field-group input[type="text"],
8425 .field-group select,
8426 .accordion-container input.hex,
8427 .frm-fields .frm-input-field {
8428 width: 100%;
8429 outline: 0;
8430 }
8431
8432 .frm-fields button.btn {
8433 height: var(--h-md);
8434 text-align: inherit;
8435 }
8436
8437 .global-font .field-group input[type="text"] {
8438 width: auto;
8439 }
8440
8441 /* Image Options */
8442
8443 .frm_images_dropdown .frm_image_option {
8444 margin: 0 !important;
8445 }
8446
8447 .frm_images_dropdown .frm_radio input[type=radio] {
8448 opacity: 0;
8449 position: absolute;
8450 z-index: -1;
8451 }
8452
8453 .frm_images_dropdown__image .frmsvg {
8454 width: 100%;
8455 max-width: 102px;
8456 fill: none;
8457 margin: 0;
8458 }
8459
8460 .frm_images_dropdown .frm_noallow .frm_image_option_container {
8461 opacity: .5;
8462 }
8463
8464 .frm_images_dropdown .frm_image_option_container {
8465 border-radius: var(--small-radius);
8466 border: 2px solid transparent;
8467 align-items: center;
8468 }
8469
8470 .frm_images_dropdown .frm_image_option_container:hover {
8471 background: #fff !important;
8472 }
8473
8474 .frm_images_dropdown input[type="radio"]:checked + .frm_image_option_container {
8475 background: #fff !important;
8476 border-color: var(--primary-500);
8477 }
8478
8479 .frm_images_dropdown .frm_text_label_for_image {
8480 padding: 0;
8481 text-align: left;
8482 }
8483
8484 /* End Image Options */
8485
8486 /* Welcome page */
8487
8488 .wp-core-ui .frm_grey.frm-button-primary.disabled,
8489 .wp-core-ui .frm_grey.frm-button-primary,
8490 #frm-welcome .frm_grey {
8491 opacity: 0.5;
8492 background: #F6F6F6 !important;
8493 border-color: #ddd !important;
8494 color: #9FA5AA !important;
8495 }
8496
8497 /* Chrome Scrollbars for Windows */
8498 .windows::-webkit-scrollbar,
8499 .windows ::-webkit-scrollbar {
8500 width: 7px;
8501 background: transparent;
8502 }
8503
8504 .windows::-webkit-scrollbar-thumb,
8505 .windows ::-webkit-scrollbar-thumb {
8506 background: var(--grey-300);
8507 -webkit-border-radius: var(--border-radius);
8508 -webkit-box-shadow: none;
8509 }
8510
8511 .windows::-webkit-scrollbar-corner,
8512 .windows ::-webkit-scrollbar-corner {
8513 background: transparent;
8514 }
8515
8516 .frm-scrollbar-wrapper {
8517 overflow-x: hidden;
8518 overflow-y: auto; /* Enable scrolling */
8519 -ms-overflow-style: none; /* For IE and Edge */
8520 scrollbar-color: transparent transparent; /* Firefox Scrollbar - transparent by default and show on hover */
8521 scrollbar-width: thin;
8522 }
8523
8524 .frm-scrollbar-wrapper:hover {
8525 scrollbar-color: var(--grey-300) var(--sidebar-color); /* Firefox Scrollbar - Show on hover */
8526 }
8527
8528 .frm-scrollbar-wrapper::-webkit-scrollbar {
8529 width: 3px;
8530 }
8531
8532 .frm-scrollbar-wrapper::-webkit-scrollbar-track {
8533 background: var(--sidebar-color);
8534 }
8535
8536 .frm-scrollbar-wrapper::-webkit-scrollbar-thumb {
8537 background: transparent;
8538 border-radius: 100vw;
8539 }
8540
8541 .frm-scrollbar-wrapper:hover::-webkit-scrollbar-thumb {
8542 background: var(--grey-300); /* Show scrollbar on hover */
8543 }
8544
8545 .frm-scrollbar-wrapper::-webkit-scrollbar-thumb:hover {
8546 background: var(--grey-400); /* Show scrollbar on hover */
8547 }
8548 /* End scrollbar */
8549
8550 /* RTL */
8551 .rtl h3 {
8552 font-weight: inherit !important;
8553 }
8554
8555 .rtl.js .accordion-section-title:after {
8556 left: 10px;
8557 right: auto;
8558 }
8559
8560 .rtl #frm_top_bar #frm_bs_dropdown {
8561 padding-left: 15px;
8562 }
8563
8564 .rtl .frm-full-close,
8565 .rtl .frm_wrap .columns-2 .frm-right-panel,
8566 .rtl .frm-right-panel {
8567 border-right-width: 1px;
8568 border-left-width: 0;
8569 }
8570
8571 .rtl .frm-full-close {
8572 padding-left: 0;
8573 padding-right: var(--gap-md);
8574 }
8575
8576 .rtl .frm-text-right {
8577 text-align: left;
8578 }
8579
8580 .rtl .frm_wrap #frm_adv_info ul.category-tabs li:first-child {
8581 border-left-width: 1px;
8582 }
8583
8584 .rtl .frm-dropdown-menu {
8585 text-align: right;
8586 }
8587
8588 .rtl .frm_actions_dropdown .frm_icon_font {
8589 float: right;
8590 margin-right: 0;
8591 margin-left: 3px;
8592 }
8593
8594 .rtl #frm-insert-fields-box,
8595 .rtl #frm-conditionals {
8596 padding-right: .9em;
8597 }
8598
8599 .rtl #html_settings .frm_field_html_box {
8600 margin-right: 0;
8601 }
8602
8603 .rtl .frm_list_entry_page h2 {
8604 float: right;
8605 }
8606
8607 .rtl .frm_scale {
8608 float: right;
8609 margin-left: 10px;
8610 margin-right: 0;
8611 }
8612
8613 .rtl .frm-page-break .frm-collapse-page.button {
8614 margin-left: 0;
8615 margin-right: 46%;
8616 }
8617
8618 .rtl .frm-field-action-icons {
8619 right: unset;
8620 left: 2px;
8621 }
8622
8623 .rtl .frm_has_shortcodes > i {
8624 right: auto;
8625 left: 5px;
8626 }
8627
8628 .rtl p.frm_reply_to_container,
8629 .rtl p.frm_bcc_cc_container {
8630 float: left;
8631 }
8632
8633 .rtl .frm-default-switcher {
8634 float: left;
8635 position: relative;
8636 }
8637
8638 .rtl .frm-with-right-icon .frmsvg {
8639 right: auto;
8640 left: 0;
8641 }
8642
8643 .rtl .frm-inline-modal > a.dismiss {
8644 left: 13px;
8645 right: auto;
8646 }
8647
8648 .rtl.wp-admin .frm_wrap select {
8649 padding-left: var(--gap-lg) !important;
8650 padding-right: 5px !important;
8651 background-position: left 11px top 55%;
8652 }
8653
8654 .rtl .frm_code_list.frm-full-hover a span {
8655 margin-left: var(--gap-xs);
8656 }
8657
8658 /* ---------------------------------------------------------------
8659 Clearfix
8660 --------------------------------------------------------------- */
8661 span.clear {
8662 display: block;
8663 }
8664
8665 .clearfix:after {
8666 content: ".";
8667 display: block;
8668 height: 0;
8669 clear: both;
8670 visibility: hidden;
8671 }
8672
8673 .clearfix {
8674 display: inline-block;
8675 }
8676
8677 /*Override styling from other plugins*/
8678 .frm_form_fields .clear {
8679 height: auto;
8680 }
8681
8682 /* Hides from IE-mac \*/
8683 * html .clearfix {
8684 height: 1%;
8685 }
8686
8687 .clearfix {
8688 display: block;
8689 }
8690
8691 /* End hide from IE-mac */
8692
8693 /*-----------------------------------------------------------------
8694 Responsive Design
8695 ---------------------------------------------------------------- */
8696
8697 @media only screen and (max-width: 1200px) {
8698 .frm-addons {
8699 grid-template-columns: 1fr 1fr;
8700 }
8701 }
8702
8703 @media only screen and (max-width: 1050px) {
8704 .frm-white-body,
8705 .frm_wrap {
8706 --biggest-sidebar: 390px;
8707 }
8708
8709 #form_settings_page .columns-2 {
8710 margin: 0;
8711 }
8712
8713 .frm_actions_list {
8714 margin-left: 0;
8715 }
8716 }
8717
8718 @media only screen and (max-width: 960px) {
8719 .frm-white-body,
8720 .frm_wrap {
8721 --gap-sm: 8px;
8722 --gap-md: 16px;
8723 --gap-2xl: 24px;
8724 }
8725
8726 .auto-fold #adminmenuwrap {
8727 width: 36px;
8728 }
8729
8730 .frm_wrap #postbox-container-1 #frm_adv_info {
8731 min-width: 220px;
8732 }
8733
8734 p.howto {
8735 display: inline-block;
8736 }
8737
8738 /* Fix: Issue where the admin page content had extra white space to the left on small screens */
8739 .auto-fold.frm-admin-page-styles:not(.frm-full-screen) .frm_page_container,
8740 .auto-fold:not(.frm-full-screen) .frm_wrap .frm_page_container {
8741 left: 36px;
8742 }
8743 }
8744
8745 @media only screen and (max-width: 850px) {
8746 #frm_bs_dropdown {
8747 /* There isn't enough room for the title on a screen this size so just hide it. */
8748 display: none;
8749 }
8750
8751 .frm-white-body,
8752 .frm_wrap {
8753 --biggest-sidebar: 350px;
8754 --big-sidebar: 350px;
8755 }
8756
8757 #frm_bs_dropdown .frm_bstooltip {
8758 /* There isn't enough room for the title on a screen this size so just hide it. */
8759 display: none !important;
8760 }
8761
8762 .frm_col_one {
8763 clear: none;
8764 }
8765
8766 .frm-fields p > .frm_inline_label,
8767 .frm_inline_label {
8768 display: block;
8769 margin: 5px 0;
8770 }
8771
8772 #frm_top_bar h1 {
8773 width: auto;
8774 max-width: 200px;
8775 }
8776
8777 #frm-publishing {
8778 width: auto;
8779 }
8780
8781 #frm_form_editor_container,
8782 .frm-entry-container {
8783 margin: 0 20px;
8784 }
8785
8786 .frmbutton.ui-sortable-helper .frmsvg,
8787 .field_type_list li.frmbutton .frmsvg,
8788 .frmbutton.ui-sortable-helper i,
8789 .field_type_list li.frmbutton i {
8790 margin: .15em 0 .15em .1em;
8791 width: 25px;
8792 }
8793
8794 .rtl .frmbutton.ui-sortable-helper .frmsvg,
8795 .rtl .field_type_list li.frmbutton .frmsvg,
8796 .rtl .frmbutton.ui-sortable-helper i,
8797 .rtl .field_type_list li.frmbutton i {
8798 margin: .15em .1em .15em 0;
8799 }
8800
8801 .frm_wrap .frm-search {
8802 float: none !important;
8803 width: auto;
8804 clear: both;
8805 }
8806
8807 .post-type-frm_display #frm_adv_info {
8808 top: auto !important;
8809 position: static;
8810 width: auto;
8811 }
8812
8813 .frm_wrap .frm-right-panel #frm_adv_info,
8814 .frm_wrap #postbox-container-1 #frm_adv_info {
8815 min-width: 275px;
8816 }
8817
8818 .frm_wrap #frm_adv_info ul.category-tabs li,
8819 .frm_wrap #frm_adv_info ul.category-tabs li.tabs {
8820 border: none;
8821 }
8822
8823 .frm_wrap #frm_adv_info ul.category-tabs li:first-child {
8824 margin-left: 12px;
8825 }
8826
8827 .frm_wrap #frm_adv_info ul.category-tabs li.tabs {
8828 border-bottom: 2px solid #5b9dd9;
8829 padding-bottom: 8px;
8830 }
8831
8832 .post-type-frm_display #poststuff {
8833 padding: 10px 25px;
8834 }
8835
8836 .post-type-frm_display #side-sortables .postbox {
8837 margin-bottom: 20px;
8838 border-radius: var(--small-radius);
8839 border-top-width: 1px;
8840 }
8841 }
8842
8843 @media only screen and (max-width: 782px) {
8844 .frm-white-body,
8845 .frm_wrap {
8846 --small-sidebar: 20%;
8847 --medium-sidebar: 35%
8848 }
8849
8850 #form_settings_page .advanced_settings .form-table td, .form-table th {
8851 display: table-cell;
8852 width: auto !important;
8853 }
8854
8855 .frm-white-body #publishing-action,
8856 .frm_wrap #publishing-action {
8857 line-height: normal;
8858 }
8859
8860 .frm-white-body #screen-meta-links {
8861 display: none;
8862 }
8863
8864 .frm_wrap .misc-pub-section {
8865 padding: 6px 0;
8866 }
8867
8868 .frm_wrap .misc-pub-section > a {
8869 float: none;
8870 white-space: nowrap;
8871 }
8872
8873 .frm-form-setting-tabs a {
8874 position: relative;
8875 padding: 10px 5px 10px 40px;
8876 }
8877
8878 .frm-form-setting-tabs a .frmsvg,
8879 .frm-form-setting-tabs a i {
8880 position: absolute;
8881 left: 13px;
8882 top: calc(50% - 10px);
8883 margin: 0;
8884 }
8885
8886 #frm-insert-fields .button,
8887 #frm-insert-fields .button a,
8888 .frmbutton.ui-sortable-helper a {
8889 line-height: 26px;
8890 max-height: 28px;
8891 }
8892
8893 a.frm_add_logic_link {
8894 margin-left: 0;
8895 margin-right: 0;
8896 width: 100%;
8897 box-sizing: border-box;
8898 }
8899
8900 a.frm_add_logic_link .frmsvg,
8901 a.frm_add_logic_link i {
8902 display: none;
8903 }
8904
8905 #new_fields .frm_single_option select,
8906 #new_fields .frm_single_option input[type=text] {
8907 width: calc(100% - 83px);
8908 }
8909
8910 .frm_single_entry_page .frm_form_fields input[type=text],
8911 .frm_single_entry_page .frm_form_fields select,
8912 .frm_single_entry_page .frm_form_fields textarea {
8913 width: 100%;
8914 }
8915
8916 .with_frm_style .frm_radio input[type=radio],
8917 .with_frm_style .frm_checkbox input[type=checkbox] {
8918 width: 25px !important;
8919 }
8920
8921 .frm_single_entry_page .with_frm_style .frm_radio input[type=radio],
8922 .frm_single_entry_page .with_frm_style .frm_checkbox input[type=checkbox] {
8923 width: 18px !important;
8924 }
8925
8926 .wp-list-table.toplevel_page_formidable .column-entries,
8927 .wp-list-table.toplevel_page_formidable .column-form_key,
8928 .wp-list-table.toplevel_page_formidable .column-shortcode,
8929 .wp-list-table.toplevel_page_formidable .column-created_at {
8930 display: none !important;
8931 }
8932
8933 .wp-list-table.toplevel_page_formidable td.column-entries,
8934 .wp-list-table.toplevel_page_formidable td.column-form_key,
8935 .wp-list-table.toplevel_page_formidable td.column-shortcode,
8936 .wp-list-table.toplevel_page_formidable td.column-created_at {
8937 padding: 3px 8px 3px 35%;
8938 text-align: left;
8939 }
8940
8941 #form_entries_page .wp-list-table th.frm_hidden,
8942 #form_entries_page .wp-list-table td.frm_hidden {
8943 display: none !important;
8944 }
8945
8946 .frm-white-body.auto-fold #wpcontent {
8947 padding-left: 0;
8948 }
8949
8950 .frm_right_addon .frm_remove_field {
8951 bottom: 11px;
8952 }
8953
8954 .frm-addons {
8955 grid-template-columns: 1fr;
8956 }
8957
8958 .frm-admin-page-styles .frm_page_container,
8959 .frm_wrap .frm_page_container {
8960 left: 0 !important;
8961 top: 46px !important;
8962 height: calc( 100vh - 46px ) !important;
8963 }
8964
8965 .frm_single_entry_page.frm_wrap .columns-2 {
8966 display: block;
8967 border-bottom: none;
8968 }
8969
8970 .frm_single_entry_page .wrap.frm-with-margin {
8971 margin: 10px 20px;
8972 }
8973
8974 .frm_single_entry_page #post-body-content + .frm-right-panel {
8975 width: auto;
8976 margin: 0 20px;
8977 border: 1px solid var(--sidebar-hover);
8978 border-radius: 6px;
8979 }
8980
8981 #wp-content-media-buttons a.frm_insert_form {
8982 padding: 0 var(--gap-sm);
8983 }
8984
8985 .frm-white-body input[type="checkbox"]:checked::before,
8986 .frm_wrap input[type="checkbox"]:checked::before {
8987 width: 1.2rem;
8988 height: 1.2rem;
8989 margin: 0.125rem;
8990 }
8991 }
8992
8993 @media only screen and (max-width: 700px) {
8994 .frm-white-body,
8995 .frm_wrap {
8996 --biggest-sidebar: 50%;
8997 --big-sidebar: 50%;
8998 }
8999 }
9000
9001 @media only screen and (max-width: 600px) {
9002 .frm-white-body,
9003 .frm_wrap {
9004 --small-sidebar: 45px;
9005 }
9006
9007 .frm-form-setting-tabs a {
9008 visibility: collapse;
9009 font-size: 0;
9010 padding: 0 var(--gap-sm);
9011 }
9012
9013 .frm-form-setting-tabs a .frmsvg,
9014 .frm-form-setting-tabs a i {
9015 visibility: visible;
9016 position: initial;
9017 font-size: 18px;
9018 }
9019
9020 #frm_builder_page #frm-insert-fields {
9021 padding: 0;
9022 }
9023
9024 .frm_wrap #frm_adv_info ul.category-tabs li {
9025 display: inline-block;
9026 padding: 0;
9027 margin: 2px 0;
9028 border-bottom: 2px solid transparent;
9029 }
9030
9031 .frm_wrap #frm_adv_info ul.category-tabs li.tabs,
9032 .frm_wrap #frm_adv_info ul.category-tabs li:first-child {
9033 margin-left: 0;
9034 padding: 0;
9035 }
9036
9037 .field_type_list li {
9038 text-align: center;
9039 }
9040
9041 #frm-insert-fields li a {
9042 padding: 5px;
9043 }
9044
9045 .frmbutton.ui-sortable-helper .frmsvg,
9046 .field_type_list li.frmbutton .frmsvg,
9047 .frmbutton.ui-sortable-helper i,
9048 .field_type_list li.frmbutton i {
9049 display: block;
9050 margin: 0 auto 3px;
9051 text-align: center;
9052 }
9053
9054 #frm_form_editor_container .frm_primary_label {
9055 clear: both;
9056 }
9057
9058 #frm_builder_page .frm_code_list a.button {
9059 padding: 2px;
9060 }
9061
9062 #frm_builder_page .frm_actions_dropdown > .frm-dropdown-menu {
9063 right: 0;
9064 left: auto;
9065 }
9066
9067 .frm-right-panel h3.accordion-section-title {
9068 padding-right: 10px;
9069 padding-left: 10px;
9070 font-size: 20px;
9071 white-space: nowrap;
9072 overflow: hidden;
9073 }
9074
9075 .frm-right-panel .accordion-section-title:before {
9076 margin-left: 0;
9077 margin-right: 3px;
9078 }
9079
9080 .rtl #frm_builder_page .frm_actions_dropdown > .frm-dropdown-menu {
9081 right: auto;
9082 left: 0;
9083 }
9084
9085 .frm_on_submit_type svg {
9086 display: none;
9087 }
9088 }
9089
9090 @media only screen and (max-width: 475px) {
9091 #frm_bs_dropdown {
9092 float: none;
9093 }
9094
9095 #frm-nav-tabs {
9096 padding: 0;
9097 white-space: nowrap;
9098 }
9099
9100 #frm-nav-tabs a {
9101 margin-right: 0;
9102 }
9103 }
9104
9105 /* Firefox */
9106 @-moz-document url-prefix() {
9107 .frm-white-body .tablenav select,
9108 .frm-white-body .tablenav input[type="text"],
9109 .wp-admin .frm_wrap .tablenav select,
9110 .frm_wrap .tablenav input[type="text"] {
9111 padding-top: 5px;
9112 }
9113 }
9114
9115 /* PRINT */
9116 @media print {
9117 a, .misc-pub-section a {
9118 color: #000 !important;
9119 }
9120
9121 .add-new-h2, #frm_top_bar, .dashicons,
9122 #adminmenuwrap, #adminmenuback, #wphead, #button_bar, #submitdiv, .button-secondary,
9123 #screen-metas, #screen-meta-links, #footer, #wpfooter, .inner-sidebar, .frm_form_nav,
9124 .frm_flash_graph, .frm_no_print, object, .error {
9125 visibility: hidden;
9126 display: none !important;
9127 }
9128
9129 .widget, .postbox, .stuffbox, .postbox h3 {
9130 border-width: 0 !important;
9131 border-color: #fff;
9132 }
9133
9134 .postbox {
9135 background: #fff !important;
9136 border: none;
9137 position: static;
9138 }
9139
9140 .postbox h3, .postbox h4 {
9141 background: #fff !important;
9142 }
9143
9144 #wpbody-content {
9145 float: none;
9146 }
9147
9148 #wpcontent, #post-body-content,
9149 .has-right-sidebar #post-body,
9150 #poststuff .columns-2 {
9151 margin: 0 !important;
9152 }
9153
9154 .frm_wrap #poststuff .columns-2 {
9155 display: block;
9156 }
9157
9158 #post-body-content + .frm-right-panel,
9159 .frm_wrap .columns-2 .frm-right-panel,
9160 .frm-right-panel {
9161 border: none;
9162 width: auto;
9163 display: block;
9164 padding: 20px;
9165 }
9166
9167 .frm_wrap .columns-2,
9168 .frm_wrap .frm_page_container {
9169 height: auto;
9170 display: block;
9171 }
9172
9173 .misc-pub-section > span {
9174 padding: 0;
9175 }
9176
9177 .frm-right-panel .postbox .inside {
9178 padding-left: 12px;
9179 padding-right: 12px;
9180 }
9181
9182 .curtime #timestamp:before {
9183 display: none;
9184 content: none !important;
9185 }
9186
9187 .frm_charts .alignleft {
9188 float: none;
9189 }
9190
9191 .pg_odd, .pg_even {
9192 page-break-inside: avoid;
9193 max-width: 600px;
9194 }
9195
9196 .form-table td, .form-table th {
9197 padding: 0;
9198 }
9199
9200 .frm_file_container a {
9201 display: block;
9202 width: 100%;
9203 }
9204 }
9205
9206 .frm-admin-page-styles #frm-publishing #save_menu_header,
9207 .frm-admin-page-styles2 #frm-publishing #save_menu_header {
9208 display: inline-block;
9209 }
9210
9211 /* Change the order of subfields of the Name field in the backend */
9212 .edit_form_item .frm_combo_inputs_container[data-name-layout="last_first"] .frm_form_subfield-first {
9213 order: 2;
9214 }
9215
9216 .frm-video-wrapper iframe {
9217 width: 100%;
9218 max-width: 843px;
9219 border-radius: var(--border-radius);
9220 }
9221
9222 #frm_field_group_popup {
9223 position: absolute;
9224 top: 0;
9225 right: 0;
9226 width: 366px;
9227 max-height: 231px;
9228 border-radius: 8px;
9229 background: #fff;
9230 box-shadow: 0px 20px 48px rgba(40, 47, 54, 0.15);
9231 z-index: 3;
9232 box-sizing: border-box;
9233 padding: 24px 0;
9234 text-align: left;
9235 }
9236
9237 .rtl #frm_field_group_popup {
9238 text-align: right;
9239 }
9240
9241 .frm-merge-fields-into-row #frm_field_group_popup {
9242 top: unset;
9243 bottom: 50px;
9244 height: 196px;
9245 }
9246
9247 #frm_field_group_popup > hr {
9248 margin: 12px 0;
9249 }
9250
9251 #frm_field_group_popup .frm-cancel-custom-field-group-layout,
9252 #frm_field_group_popup .frm-save-custom-field-group-layout {
9253 padding: 4px 18px;
9254 }
9255
9256 #frm_field_group_popup .frm-cancel-custom-field-group-layout:hover {
9257 border-color: var(--primary-500) !important;
9258 color: var(--primary-500);
9259 background-color: transparent !important;
9260 }
9261
9262 .frm-merge-fields-into-row #frm_field_group_popup .frm-break-field-group {
9263 display: none;
9264 }
9265
9266 .frm-merge-fields-into-row > a {
9267 color: rgba(40, 47, 54, 0.85);
9268 position: relative;
9269 top: 2px;
9270 }
9271
9272 .frm-row-layout-title {
9273 font-weight: 600;
9274 font-size: 11px;
9275 line-height: 15px;
9276 text-transform: uppercase;
9277 color: rgba(40, 47, 54, 0.45);
9278 margin-bottom: 27px;
9279 }
9280
9281 .frm-row-layout-option {
9282 background: #F6F7FB;
9283 box-sizing: border-box;
9284 border-radius: 2px;
9285 padding: 15px 10px;
9286 }
9287
9288 #frm_field_group_popup .frm-row-layout-option .frm_grid_container {
9289 grid-gap: 0 5%;
9290 grid-template-columns: repeat(12, auto);
9291 }
9292
9293 #frm_field_group_popup .frm-row-layout-option {
9294 cursor: pointer;
9295 border: 2px solid transparent;
9296 }
9297
9298 #frm_field_group_popup .frm-row-layout-option.frm-active-row-layout,
9299 #frm_field_group_popup .frm-row-layout-option:hover {
9300 border-color: var(--primary-500);
9301 }
9302
9303 .frm-custom-field-group-layout,
9304 .frm-break-field-group {
9305 padding: 4px 24px;
9306 cursor: pointer;
9307 font-size: var(--text-sm);
9308 line-height: 19px;
9309 color: rgba(72, 78, 84, 1);
9310 }
9311
9312 .frm-custom-field-group-layout:hover,
9313 .frm-break-field-group:hover {
9314 background-color: #f5f5f5f5;
9315 }
9316
9317 .frm-custom-field-group-layout svg,
9318 .frm-break-field-group svg {
9319 margin-right: 5px;
9320 }
9321
9322 #frm_field_multiselect_popup {
9323 background: white;
9324 height: 48px;
9325 position: fixed;
9326 border-radius: 4px;
9327 box-shadow: 0px 8px 24px rgba(40, 47, 54, 0.15);
9328 color: rgba(40, 47, 54, 0.85);
9329 font-size: 13px;
9330 right: 30px;
9331 bottom: 10px;
9332 }
9333
9334 #frm_field_multiselect_popup > div {
9335 display: inline-block;
9336 line-height: 48px;
9337 vertical-align: top;
9338 }
9339
9340 #frm_field_multiselect_popup.frm-unmergable > .frm-merge-fields-into-row,
9341 #frm_field_multiselect_popup.frm-unmergable > .frm-multiselect-popup-separator {
9342 display: none;
9343 }
9344
9345 #frm_field_multiselect_popup > div:not(.frm-multiselect-popup-separator) {
9346 padding: 0 20px;
9347 cursor: pointer;
9348 }
9349
9350 #frm_field_multiselect_popup > div:not(.frm-multiselect-popup-separator):hover {
9351 background: #f5f5f5f5;
9352 }
9353
9354 .frm-builder-popup-heading {
9355 font-weight: 600;
9356 font-size: 11px;
9357 line-height: 15px;
9358 text-transform: uppercase;
9359 color: rgba(40, 47, 54, 0.45);
9360 margin-bottom: 7px;
9361 }
9362
9363 .frm-builder-popup-subheading {
9364 font-size: 12px;
9365 line-height: 16px;
9366 color: rgba(40, 47, 54, 0.45);
9367 }
9368
9369 #frm_field_group_popup input[type="text"] {
9370 height: 30px;
9371 border-radius: 3px;
9372 font-size: 14px;
9373 padding: 8px;
9374 color: rgba(84, 95, 110, 1);
9375 border-color: rgba(40, 47, 54, 0.2);
9376 }
9377
9378 .frm-multiselect-popup-separator {
9379 height: 36px;
9380 width: 1px;
9381 position: relative;
9382 top: 6px;
9383 background: #C4C4C4;
9384 }
9385
9386 .frm-sortable-helper,
9387 .frm-multiselect-key-is-down li.form-field:not(.edit_field_type_divider) {
9388 pointer-events: none;
9389 }
9390
9391 .frm-sortable-helper {
9392 /* Make sure the item being dragged appears above other form builder fields */
9393 z-index: 99;
9394 }
9395
9396 #frm_banner {
9397 width: 100%;
9398 color: #fff;
9399 background: var(--primary-500);
9400 height: 40px;
9401 line-height: 40px;
9402 text-align: center;
9403 position: relative;
9404 }
9405
9406 .frm-banner-emoji {
9407 font-size: 19px;
9408 }
9409
9410 .frm-banner-emoji,
9411 .frm-banner-title {
9412 margin-right: 5px;
9413 vertical-align: top;
9414 }
9415
9416 .frm-banner-cta a {
9417 text-decoration: underline !important;
9418 }
9419
9420 #frm_banner .frm-banner-cta a.frm_inbox_dismiss {
9421 display: none;
9422 }
9423
9424 .frm-banner-dismiss {
9425 cursor: pointer;
9426 position: absolute;
9427 right: 10px;
9428 top: 50%;
9429 transform: translateY( -50% );
9430 }
9431
9432 .frm-banner-dismiss .frmsvg {
9433 vertical-align: top;
9434 }
9435
9436 .frm-ready-made-solution:not(.frm-search-result) {
9437 display: none !important;
9438 }
9439
9440 #frm_leave_email_wrapper .frmsvg {
9441 top: 0;
9442 }
9443
9444 #frm-add-my-email-address {
9445 margin-top: 30px;
9446 }
9447
9448 .frm-ready-made-solution h3 ~ a {
9449 color: var(--primary-500);
9450 }
9451
9452 .frm-ready-made-solution img {
9453 max-width: 100%;
9454 display: block;
9455 box-shadow: var(--box-shadow-lg);
9456 }
9457
9458 /* On Submit action */
9459 .frm_single_on_submit_settings .frm_form_field {
9460 margin: 8px 0;
9461 }
9462
9463 .frm_on_submit_type_setting {
9464 padding: 8px 0;
9465 }
9466
9467 .frm_on_submit_type label {
9468 display: flex;
9469 border: 1px solid var(--grey-border);
9470 border-radius: var(--small-radius);
9471 gap: 16px;
9472 padding: 16px;
9473 align-items: center;
9474 justify-content: center;
9475 }
9476
9477 .frm_on_submit_type input {
9478 opacity: 0 !important;
9479 position: absolute;
9480 z-index: -1;
9481 }
9482
9483 .frm_on_submit_type input[type="radio"]:checked + label {
9484 border-color: var(--primary-color);
9485 box-shadow: 0 0 0 1px var(--primary-color);
9486 }
9487
9488 #form_settings_page .frm_on_submit_type label:hover,
9489 .frm_on_submit_type input[type="radio"]:checked + label svg {
9490 color: var(--primary-color);
9491 }
9492 /* End On Submit action */
9493
9494 /* Start call-to-action */
9495 .frm_pro_tip,
9496 .frm-cta {
9497 justify-content: space-between;
9498 align-items: center;
9499 gap: var(--gap-2xl);
9500 padding: var(--gap-xs) var(--gap-sm);
9501 border-radius: var(--small-radius);
9502 background: var(--primary-25);
9503 }
9504
9505 .frm-cta.frm-cta-border {
9506 border: 1px solid var(--primary-200);
9507 }
9508
9509 .frm-cta h4 {
9510 font-weight: 600;
9511 margin: 0;
9512 }
9513
9514 .frm-cta-green {
9515 background-color: var(--success-25);
9516 }
9517
9518 .frm-cta-green .frm-banner-title {
9519 gap: calc(var(--gap-2xs) + 1px);
9520 color: var(--grey-700);
9521 }
9522
9523 .frm-cta-green.frm-cta-border {
9524 border-color: var(--success-100)
9525 }
9526
9527 .frm-right-panel .inside .frm_pro_tip,
9528 .frm_pro_tip {
9529 color: var(--grey-700);
9530 background: #FFE7DE;
9531 margin: 0 auto;
9532 display: flex;
9533 gap: var(--gap-xs);
9534 }
9535
9536 .frm_field_list .frm_pro_tip {
9537 margin: 10px 15px;
9538 position: relative;
9539 width: calc(100% - 30px);
9540 box-sizing: border-box;
9541 }
9542
9543 .frm_pro_tip .frmsvg,
9544 .frm_pro_tip i {
9545 color: var(--orange);
9546 }
9547
9548 .frm-tip-info {
9549 flex: 1;
9550 text-align: left;
9551 }
9552
9553 .frm-tip-cta {
9554 color: var(--orange);
9555 }
9556
9557 .frm-light-tip .frm_pro_tip {
9558 background: var(--primary-25);
9559 }
9560
9561 .frm-light-tip .frm_pro_tip .frmsvg,
9562 .frm-light-tip .frm_pro_tip i,
9563 .frm-light-tip .frm-tip-cta {
9564 color: var(--primary-500);
9565 }
9566
9567 .frm-tip-cta:hover {
9568 color: var(--primary-500);
9569 }
9570
9571 .nav-tab-wrapper .frm_pro_tip {
9572 float: right;
9573 }
9574 /* End call-to-action */
9575
9576 /* Start confirm and form templates modals */
9577 #frm-form-templates-modal textarea {
9578 height: 108px;
9579 }
9580
9581 #frm-form-templates-modal .frm-fields button.btn {
9582 border-color: var(--grey-300);
9583 color: var(--grey-900);
9584 cursor: pointer;
9585 }
9586
9587 #frm-form-templates-modal .frm-fields button.btn .frmsvg {
9588 color: var(--grey-400);
9589 width: 14px;
9590 height: 14px;
9591 }
9592
9593 #frm-form-templates-modal .frm-form-templates-modal-fieldset {
9594 position: relative;
9595 }
9596
9597 #frm-form-templates-modal .frm-form-templates-modal-fieldset .frm-with-left-icon .frmsvg {
9598 padding: 0;
9599 top: 0;
9600 left: 13px;
9601 }
9602
9603 /* Fixes pro issue #3508, prevent a conflict that hides the postbox in modal */
9604 #frm-form-templates-modal .postbox {
9605 display: block !important;
9606 }
9607
9608 /* Leave email modal */
9609 #frm_empty_inbox #frm-leave-email-modal {
9610 margin-top: var(--gap-2xl);
9611 }
9612
9613 /* Name your form modal */
9614 #frm-name-your-form-modal .frm_modal_top {
9615 padding-top: var(--gap-sm);
9616 }
9617 /* End confirm and form templates modals */
9618
9619 /* Field Group Message */
9620 #frm-field-group-message {
9621 position: absolute;
9622 bottom: 32px;
9623 right: calc(50% - var(--biggest-sidebar));
9624 padding: var(--gap-xs) var(--gap-sm);
9625 border-radius: 100px;
9626 background-color: var(--primary-25);
9627 }
9628
9629 #frm-field-group-message .frm-field-group-message-text {
9630 gap: 10px;
9631 color: var(--grey-800);
9632 }
9633
9634 #frm-field-group-message-dismiss {
9635 margin-left: var(--gap-xs)
9636 }
9637
9638 #frm-field-group-message-dismiss .frmsvg {
9639 color: var(--grey-800);
9640 width: 15px;
9641 height: 15px;
9642 cursor: pointer;
9643 transition: color 300ms ease-in-out;
9644 }
9645
9646 #frm-field-group-message-dismiss .frmsvg:hover {
9647 color: var(--grey-500);
9648 }
9649 /* End Field Group Message */
9650
9651 /* Start card layout */
9652 .frm-card-item {
9653 display: flex;
9654 border: 1px solid var(--grey-200);
9655 border-radius: var(--small-radius);
9656 padding: var(--gap-sm);
9657 box-shadow: var(--box-shadow-xs);
9658 background: #FFFFFF;
9659 }
9660 .frm-card-item:not(.frm-counter-card) {
9661 gap: 10px;
9662 }
9663 .frm-compact-card-item {
9664 padding: var(--gap-sm) 35px 10px 35px;
9665 }
9666 /* End card layout */
9667
9668 /* Pirate forms importer */
9669 #welcome-panel:has(#frm_form_pf_importer) {
9670 background-color: #fff;
9671 margin: var(--gap-sm) var(--gap-md) var(--gap-md);
9672 line-height: 2;
9673 }
9674
9675 #welcome-panel:has(#frm_form_pf_importer) .welcome-panel-content {
9676 text-align: start !important;
9677 min-height: unset;
9678 display: block;
9679 }
9680
9681 #frm_form_pf_importer div {
9682 margin: 10px 0 !important;
9683 }
9684
9685 #frm_form_pf_importer button {
9686 border: 1px solid var(--primary-500);
9687 padding: 7px 16px;
9688 min-height: 28px;
9689 line-height: var(--leading);
9690 margin-bottom: 0;
9691 background: var(--primary-500);
9692 color: #fff !important;
9693 }
9694
9695 #frm_form_pf_importer button:hover {
9696 background: #135e96;
9697 border-color: #135e96;
9698 }
9699 /* End Pirate forms importer */
9700
9701 /* Start Option Box */
9702 .frm-option-box {
9703 display: flex;
9704 justify-content: space-between;
9705 align-items: center;
9706 font-size: 14px;
9707 font-weight: 500;
9708 background-color: #fff;
9709 padding: 12px var(--gap-sm);
9710 border: 1px solid var(--grey-200);
9711 border-radius: var(--small-radius);
9712 margin-bottom: var(--gap-xs);
9713 transition: background-color 100ms ease-out;
9714 cursor: pointer;
9715 }
9716
9717 .frm-option-box:hover {
9718 background-color: var(--grey-25);
9719 }
9720
9721 .frm-option-box.frm-checked {
9722 background-color: var(--primary-25);
9723 border-color: var(--primary-200);
9724 }
9725
9726 .frm-option-box.frm-disabled {
9727 cursor: default;
9728 }
9729
9730 .frm-option-box input[type="checkbox"] {
9731 margin: 0;
9732 }
9733
9734 .frm-option-box.frm-disabled input[type="checkbox"] {
9735 opacity: 0.5;
9736 }
9737
9738 .frm-option-box .frm_help .frmsvg {
9739 width: 12px;
9740 height: 12px;
9741 }
9742 /* End Option Box */
9743
9744 /* Start Validation Error */
9745 .frm-validation-error:not(.frm_hidden) {
9746 display: flex;
9747 }
9748
9749 .frm-validation-error {
9750 gap: calc(var(--gap-xs) + var(--gap-2xs));
9751 }
9752
9753 .frm-validation-error span {
9754 color: var(--error-500);
9755 }
9756
9757 .frm-validation-error span[frm-error] {
9758 display: none;
9759 }
9760
9761 .frm-validation-error[frm-error="empty"] span[frm-error="empty"],
9762 .frm-validation-error[frm-error="invalid"] span[frm-error="invalid"],
9763 .frm-validation-error[frm-error="custom"] span[frm-error="custom"] {
9764 display: inline-block;
9765 }
9766
9767 /* Start Box Styles */
9768 .frm-box {
9769 padding: var(--gap-sm);
9770 border: 1px solid var(--grey-200);
9771 border-radius: var(--small-radius);
9772 }
9773 /* End Box Styles */
9774
9775 /* Start External Link Styles */
9776 .frm-link-with-external-icon {
9777 display: flex;
9778 align-items: center;
9779 gap: var(--gap-2xs);
9780 font-size: var(--text-xs);
9781 }
9782
9783 .frm-link-with-external-icon .frmsvg {
9784 width: 16px;
9785 height: 16px;
9786 transform: rotate(45deg);
9787 }
9788 /* End External Link Styles */
9789