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

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