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

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