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

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

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