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

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