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

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

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