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

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

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