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

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