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

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