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

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

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