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

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