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

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