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

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