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

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