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

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

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