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

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

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