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

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