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

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