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

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