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

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