PluginProbe
Formidable Forms – WordPress Form Builder for Contact Forms, Calculators, Quizzes & More / 6.12
Formidable Forms – WordPress Form Builder for Contact Forms, Calculators, Quizzes & More v6.12
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
← All changes | css/frm_admin.css +1321 -624 6.36.12 View file →
@@ -5,8 +5,9 @@
5 5 .frm_wrap {
6 6 --grey-900: #101828;
7 7 --grey-800: #1D2939;
8 8 --grey-700: #344054;
9 + --grey-600: #475467;
9 10 --grey-500: #667085; /* Roughly 65% opacity */
10 11 --grey-400: #98A2B3;
11 12 --grey-300: #D0D5DD;
12 13 --grey-200: #EAECF0;
@@ -22,21 +23,31 @@
22 23 --sidebar-color: var(--grey-50);
23 24 --sidebar-hover: var(--grey-200);
24 25 --primary-700: #2B66A9;
25 26 --primary-500: #4199FD;
27 + --primary-200: #C0DDFE;
26 28 --primary-25: #F5FAFF;
27 29 --primary-color: var(--primary-500); /* Deprecated */
28 30 --primary-hover: var(--primary-700); /* Deprecated */
29 31 --light-blue: var(--primary-25); /* Deprecated */
30 32 --blue-border: rgb(188, 224, 253);
33 + --error-700: #B42318;
31 34 --error-500: #F04438;
32 - --error-700: #B42318;
35 + --error-300: #FECDCA;
36 + --error-100: #FEE4E2;
33 37 --green: rgb(63, 172, 37);
34 38 --orange: #F15A24;
35 39 --pink: rgb(226, 42, 110);
36 40 --purple: rgb(141, 53, 245);
41 + --success-900: #054F31;
42 + --success-800: #065F46;
43 + --success-500: #12b76a;
44 + --success-100: #D1FAE5;
45 + --success-50: #ECFDF3;
46 + --success-25: #f6fef9;
37 47 --border-radius: 35px;
38 48 --small-radius: 8px;
49 + --medium-radius: 16px;
39 50 --small-sidebar: 275px;
40 51 --medium-sidebar: 350px;
41 52 --big-sidebar: 390px;
42 53 --biggest-sidebar: 450px;
@@ -55,12 +66,17 @@
55 66 --gap-md: 24px;
56 67 --gap-lg: 32px;
57 68 --gap-xl: 40px;
58 69 --gap-2xl: 48px;
70 + --box-shadow-xs: 0px 0.47074466943740845px 0.9414893388748169px 0px rgba(16, 24, 40, 0.05);
59 71 --box-shadow-sm: 0px 0.470745px 1.41223px rgba(16, 24, 40, 0.1), 0px 0.470745px 0.941489px rgba(16, 24, 40, 0.06);
60 72 --box-shadow-md: 0px 1.88298px 3.76596px -0.941489px rgba(16, 24, 40, 0.1), 0px 0.941489px 1.88298px -0.941489px rgba(16, 24, 40, 0.06);
61 73 --box-shadow-lg: 0px 6px 8px -2px rgba(16, 24, 40, 0.08), 0px 1.88298px 4px -1px rgba(16, 24, 40, 0.03), 0px 0.470745px 1.41223px rgba(16, 24, 40, 0.1), 0px 0.470745px 0.941489px rgba(16, 24, 40, 0.06);
62 74 --box-shadow-xl: 0px 9.41489px 11.2979px -1.88298px rgba(16, 24, 40, 0.08), 0px 3.76596px 3.76596px -1.88298px rgba(16, 24, 40, 0.03);
75 + --box-shadow-xxl: 0 11px 22px -5px rgba(16, 24, 40, 0.18);
76 +
77 + /* Override front-end CSS */
78 + --check-label-color: var(--grey-700);
63 79 }
64 80
65 81 @font-face {
66 82 font-family: 'Inter';
@@ -94,8 +110,14 @@
94 110 color: var(--grey-500);
95 111 line-height: var(--leading);
96 112 }
97 113
114 +.frm-white-body p,
115 +.frm_wrap p {
116 + margin: var(--gap-sm) 0;
117 +}
118 +
119 +
98 120 body:not(.frm-admin-page-styles):not(.frm-admin-page-style) .with_frm_style .frm_form_fields > fieldset {
99 121 --fieldset-padding: 15px 0;
100 122 }
101 123
@@ -105,13 +127,16 @@
105 127 }
106 128
107 129 .post-type-frm_display .wrap > #posts-filter,
108 130 .wrap.frm-with-margin,
109 -#frm_top_bar + .wrap,
110 131 .frm_wrap > .wrap {
111 132 margin: var(--gap-sm) var(--gap-md) var(--gap-md);
112 133 }
113 134
135 +#frm_top_bar + .wrap {
136 + margin: var(--gap-xl);
137 +}
138 +
114 139 .frm-full-screen #wpbody-content > .wrap {
115 140 margin: 0;
116 141 }
117 142
@@ -139,8 +164,13 @@
139 164 .frm-full-screen .wp-header-end {
140 165 display: none;
141 166 }
142 167
168 +body.frm-white-body:not(.frm-full-screen) .mce-fullscreen {
169 + top: 32px;
170 + left: 160px;
171 +}
172 +
143 173 .frm-full-screen #wpbody-content,
144 174 .frm-full-screen #wpbody,
145 175 .frm-full-screen #wpcontent {
146 176 padding: 0;
@@ -153,10 +183,9 @@
153 183 padding-bottom: 0;
154 184 }
155 185
156 186 .post-new-php.post-type-frm_display #screen-meta-links,
157 -.post-php.post-type-frm_display #screen-meta-links,
158 -.frm-white-body #wpfooter {
187 +.post-php.post-type-frm_display #screen-meta-links {
159 188 display: none;
160 189 }
161 190
162 191 .frm-white-body #screen-meta-links {
@@ -161,9 +190,9 @@
161 190
162 191 .frm-white-body #screen-meta-links {
163 192 position: fixed;
164 193 bottom: 0;
165 - right: 20px;
194 + right: 20px;
166 195 }
167 196
168 197 .frm-full-screen #screen-meta-links .screen-meta-toggle {
169 198 right: 55px;
@@ -214,8 +243,16 @@
214 243 .frm-white-body .wrap #post-body {
215 244 padding: 0 20px;
216 245 }
217 246
247 +.frm-grey-body #wpbody {
248 + background: var(--grey-100);
249 +}
250 +
251 +.frm-grey-body #frm_top_bar {
252 + background: #fff;
253 +}
254 +
218 255 .post-type-frm_display .tablenav,
219 256 .frm_wrap .tablenav {
220 257 margin-bottom: 10px;
221 258 }
@@ -266,8 +303,18 @@
266 303 overflow: auto;
267 304 border: 1px solid var(--grey-300);
268 305 }
269 306
307 +.frm_form_field.frm6_followed + p,
308 +.frm_form_field.frm6_followed + div {
309 + grid-column: span 6 / span 6;
310 +}
311 +
312 +.frm_form_field.frm-phone-type + p > label,
313 +.frm_form_field.frm-phone-type + div > label {
314 + opacity: 0; /* Hide the label for the format input in the phone field. */
315 +}
316 +
270 317 .frm-short-list {
271 318 overflow: auto;
272 319 max-height: 190px;
273 320 }
@@ -326,8 +373,9 @@
326 373
327 374 .frm-white-body .wrap h2,
328 375 .frm-white-body h2 {
329 376 font-size: var(--text-lg);
377 + font-weight: 500;
330 378 }
331 379
332 380 .frm-white-body .wrap h3,
333 381 .frm-white-body h3 {
@@ -339,8 +387,35 @@
339 387 font-size: var(--text-sm);
340 388 font-weight: 500;
341 389 }
342 390
391 +/* Error modal */
392 +#frm_error_modal .frm_lock_simple {
393 + padding: 20px;
394 + border-radius: 50%;
395 + background-color: var(--primary-25);
396 + display: inline-block;
397 +}
398 +
399 +#frm_error_modal #frm_lock_simple {
400 + color: var(--primary-500);
401 +}
402 +
403 +#frm_error_modal .frm-modal-title {
404 + display: block;
405 +}
406 +
407 +#frm_error_modal .frm-modal-title h2 {
408 + font-weight: 600;
409 + font-size: var(--text-xl);
410 + margin: 0;
411 +}
412 +
413 +#frm_error_modal .frm_modal_content {
414 + padding: var(--gap-md);
415 + color: var(--grey-900);
416 +}
417 +
343 418 /* Override CSS in Views plugin. */
344 419 .frm-views-editor-body .frm_page_container #frm_top_bar h1 {
345 420 padding: 0 !important;
346 421 color: var(--grey-900);
@@ -367,9 +442,9 @@
367 442 }
368 443
369 444 #frm_edit_box_content_modal .frm_modal_footer > div {
370 445 display: flex;
371 - justify-content: space-between;
446 + justify-content: space-between;
372 447 }
373 448
374 449 #frm_edit_box_content_modal #frm_modal_box_select_area,
375 450 #frm_edit_box_content_modal #frm_box_content_wysiwyg_wrapper,
@@ -500,9 +575,8 @@
500 575 .frm-nav-tabs a:active,
501 576 .frm_form_nav a:active,
502 577 .frm_form_nav a:focus {
503 578 outline: none;
504 - -webkit-box-shadow: none;
505 579 box-shadow: none;
506 580 }
507 581
508 582 .frm_form_nav > li > a {
@@ -562,9 +636,9 @@
562 636 display: inline-flex;
563 637 gap: var(--gap-sm);
564 638 align-items: center;
565 639 text-align: left;
566 - width: 200px;
640 + min-width: 200px;
567 641 }
568 642
569 643 #frm_top_bar h1 span {
570 644 max-width: 175px;
@@ -596,9 +670,9 @@
596 670 border-left: 2px solid var(--grey);
597 671 }
598 672
599 673 .frm_wrap > #frm_top_bar #frm-publishing {
600 - margin-top: 0;
674 + margin-top: 0;
601 675 }
602 676
603 677 #frm-publishing {
604 678 min-width: 225px;
@@ -670,9 +744,11 @@
670 744 position: static;
671 745 }
672 746
673 747 .auto-fold.frm-admin-page-styles .frm_page_container,
674 -.auto-fold .frm_wrap .frm_page_container {
748 +.auto-fold .frm_wrap .frm_page_container,
749 +.frm-unfold.frm-admin-page-styles .frm_page_container,
750 +.frm-unfold .frm_wrap .frm_page_container {
675 751 left: 160px;
676 752 }
677 753
678 754 .folded.frm-admin-page-styles .frm_page_container,
@@ -705,9 +781,9 @@
705 781 }
706 782
707 783 .columns-2 .frm-right-panel + div {
708 784 padding-bottom: var(--gap-md);
709 - border-left: 1px solid var(--sidebar-hover);
785 + border-left: 1px solid var(--grey-300);
710 786 }
711 787
712 788 .columns-2 .frm-right-panel + div,
713 789 .frm_wrap #post-body-content {
@@ -805,9 +881,9 @@
805 881 padding-left: 18px;
806 882 box-sizing: border-box;
807 883 }
808 884
809 -#form_settings_page #frm_adv_info {
885 +#form_settings_page #frm_adv_info, #frm_builder_page #frm_adv_info {
810 886 display: none;
811 887 top: 0;
812 888 width: 310px;
813 889 max-height: 315px;
@@ -816,9 +892,10 @@
816 892 z-index: 100;
817 893 }
818 894
819 895 #form_global_settings .columns-2 .frm-right-panel,
820 -#form_settings_page .columns-2 .frm-right-panel {
896 +#form_settings_page .columns-2 .frm-right-panel,
897 +#frm-form-templates-page .frm-right-panel {
821 898 flex: 0 0 var(--small-sidebar);
822 899 width: var(--small-sidebar);
823 900 min-width: var(--small-sidebar);
824 901 }
@@ -921,9 +998,10 @@
921 998 background-color: #fff;
922 999 margin: 0 -4px;
923 1000 }
924 1001
925 -.frm_form_settings span.frm-with-right-icon {
1002 +.frm_form_settings span.frm-with-right-icon,
1003 +#frm_builder_page .frm_has_shortcodes span.frm-with-right-icon:not(.frm_hidden) {
926 1004 display: block;
927 1005 }
928 1006
929 1007 .frm-inline-modal .frm-nav-tabs,
@@ -1087,12 +1165,48 @@
1087 1165 #postbox-container-1 .frm_field_list #frm-insert-fields .frmbutton.dropdown {
1088 1166 position: relative;
1089 1167 }
1090 1168
1169 +/* Admin footer */
1091 1170 .frm-white-body #footer-upgrade {
1092 1171 display: none;
1093 1172 }
1094 1173
1174 +.frm-admin-footer-links,
1175 +.frm-admin-footer-links-nav,
1176 +.frm-admin-footer-links-socials {
1177 + display: flex;
1178 + justify-content: center;
1179 +}
1180 +
1181 +.frm-admin-footer-links {
1182 + gap: var(--gap-2xs);
1183 + flex-direction: column;
1184 + text-align: center;
1185 + padding: var(--gap-xl) 0 var(--gap-lg);
1186 + font-size: var(--text-xs);
1187 + color: var(--grey-400);
1188 +}
1189 +
1190 +body.frm-hidden-overflow {
1191 + height: 100%;
1192 + overflow: hidden;
1193 +}
1194 +
1195 +.frm-admin-footer-links-nav {
1196 + gap: var(--gap-2xs);
1197 + margin-bottom: var(--gap-xs);
1198 +}
1199 +
1200 +.frm-admin-footer-links-socials {
1201 + gap: var(--gap-xs);
1202 +}
1203 +
1204 +.frm-admin-footer-links-socials a {
1205 + color: var(--grey-400);
1206 +}
1207 +/* End Admin footer */
1208 +
1095 1209 .frm_list_entry_page h2 {
1096 1210 float: left;
1097 1211 }
1098 1212
@@ -1176,8 +1290,9 @@
1176 1290 .wp-core-ui.frm-white-body .button-secondary,
1177 1291 .frm-white-body .button-primary,
1178 1292 .frm-white-body .button-secondary,
1179 1293 #frm-form-button button,
1294 +.frm-form-button button,
1180 1295 .frm-preview-buttons button,
1181 1296 .frm-button-red,
1182 1297 .frm-button-tertiary {
1183 1298 text-shadow: none;
@@ -1196,20 +1311,39 @@
1196 1311 margin-bottom: 0;
1197 1312 display: inline-block;
1198 1313 }
1199 1314
1315 +.no-js.wp-core-ui .frm-search .button.hide-if-no-js,
1316 +.js.wp-core-ui .frm-search .button.hide-if-js {
1317 + display: none;
1318 +}
1319 +
1200 1320 .frm-button-tertiary {
1201 1321 border-color: transparent;
1202 1322 color: var(--primary-500);
1203 1323 }
1204 1324
1325 +.frm-button-tertiary:focus {
1326 + outline: none;
1327 +}
1328 +
1329 +.frm-button-tertiary.frm_loading_button::before {
1330 + border-right-color: var(--grey);
1331 + border-bottom-color: var(--grey);
1332 +}
1333 +
1205 1334 .frm-button-red,
1206 1335 .frm-button-red:focus {
1207 - color: #fff !important;
1336 + --primary-color: var(--error-500);
1208 1337 --primary-500: var(--error-500);
1209 1338 --primary-700: var(--error-700);
1210 1339 }
1211 1340
1341 +.frm-button-red:not(.frm-button-tertiary),
1342 +.frm-button-red:not(.frm-button-tertiary):focus {
1343 + color: #fff !important;
1344 +}
1345 +
1212 1346 .frm-white-body h2 .button,
1213 1347 .post-type-frm_display h2 .frm-button-primary,
1214 1348 .frm-white-body .tablenav .button,
1215 1349 .frm-button-primary.frm-button-sm,
@@ -1278,14 +1412,21 @@
1278 1412 height: auto !important;
1279 1413 padding: 9px 18px !important;
1280 1414 }
1281 1415
1416 +.frm-button-secondary.frm-small,
1417 +.frm-button-primary.frm-small {
1418 + font-size: var(--text-xs) !important;
1419 + height: auto !important;
1420 + padding: var(--gap-2xs) 12px !important;
1421 +}
1422 +
1282 1423 .frm-button-primary i:before {
1283 1424 color: #fff;
1284 1425 }
1285 1426
1286 -.wp-core-ui .button-primary.frm-button-primary:hover,
1287 -.frm-button-primary:hover {
1427 +.wp-core-ui .button-primary.frm-button-primary:not([disabled]):hover,
1428 +.frm-button-primary:not([disabled]):hover {
1288 1429 background: var(--primary-700) !important;
1289 1430 border-color: var(--primary-700) !important;
1290 1431 }
1291 1432
@@ -1294,8 +1435,9 @@
1294 1435 }
1295 1436
1296 1437 .frm-white-body #search-submit,
1297 1438 #frm-form-button .frm_button_submit,
1439 +.frm-form-button .frm_button_submit,
1298 1440 .frm-white-body .frm-preview-buttons button,
1299 1441 .frm-white-body .button:not(.frm-button-primary),
1300 1442 .wp-core-ui.frm-white-body .button-secondary,
1301 1443 .wp-core-ui .button-secondary.frm-button-secondary,
@@ -1388,11 +1530,22 @@
1388 1530 width: 98%;
1389 1531 font-weight: normal
1390 1532 }
1391 1533
1534 +.frm-dismissible a.dismiss:focus {
1535 + box-shadow: none;
1536 +}
1537 +.frm-dismissible a.dismiss {
1538 + top: 10px;
1539 + right: 10px;
1540 + position: absolute;
1541 +}
1542 +.frm-dismissible a.dismiss svg {
1543 + color: var(--grey-800);
1544 +}
1545 +
1392 1546 /* Review request */
1393 -.frm-review-notice.notice {
1394 - border: 1px solid #ddd;
1547 +.frm-review-notice {
1395 1548 text-align: center;
1396 1549 position: fixed !important;
1397 1550 z-index: 999;
1398 1551 bottom: 0;
@@ -1397,18 +1550,11 @@
1397 1550 z-index: 999;
1398 1551 bottom: 0;
1399 1552 right: 0;
1400 1553 width: 400px;
1554 + box-shadow: var(--box-shadow-xxl) !important;
1401 1555 }
1402 1556
1403 -.frm-review-notice.notice form,
1404 -.frm-review-notice.notice p {
1405 - font-size: var(--text-sm);
1406 - max-width: 600px;
1407 - margin-left: auto;
1408 - margin-right: auto;
1409 -}
1410 -
1411 1557 .frm-review-notice a {
1412 1558 margin: 0 var(--gap-xs) !important;
1413 1559 }
1414 1560
@@ -1416,17 +1562,25 @@
1416 1562 .frm-review-notice .frm-button-secondary {
1417 1563 min-width: 100px;
1418 1564 }
1419 1565
1566 +.frm-review-notice p {
1567 + margin: 0 0 10px 0;
1568 +}
1569 +
1420 1570 .frm-review-notice p > span {
1421 1571 font-size: 13px;
1422 1572 opacity: 0.75;
1423 1573 }
1424 1574
1425 -#frmapi-feedback {
1575 +.frm-review-notice #frmapi-feedback {
1426 1576 margin-top: var(--gap-lg);
1427 1577 }
1428 1578
1579 +.frm-review-notice #frmapi-feedback [class^="frm__"] {
1580 + display: none;
1581 +}
1582 +
1429 1583 .frm-review-notice .frm_error,
1430 1584 .frm-review-notice label {
1431 1585 color: #444;
1432 1586 text-align: left;
@@ -1436,14 +1590,24 @@
1436 1590 font-size: var(--text-sm);
1437 1591 }
1438 1592
1439 1593 .frm-floating-success-message {
1594 + position: fixed;
1595 + z-index: 999;
1440 1596 border-radius: 4px;
1441 - right: 10px !important;
1442 - bottom: 10px !important;
1597 + right: 10px;
1598 + bottom: 10px;
1443 1599 }
1444 1600
1601 +.frm-box-shadow-xxl {
1602 + box-shadow: var(--box-shadow-xxl) !important;
1603 +}
1604 +
1445 1605 /* Generic Classes */
1606 +.frm-text-grey-900 {
1607 + color: var(--grey-900);
1608 +}
1609 +
1446 1610 .frm_no_margin, /* deprecated */
1447 1611 .frm-m-0 {
1448 1612 margin: 0 !important;
1449 1613 }
@@ -1449,9 +1613,8 @@
1449 1613 }
1450 1614
1451 1615 .frm-m-12 {
1452 1616 margin: var(--gap-2xl);
1453 -
1454 1617 }
1455 1618
1456 1619 .frm_no_top_margin, /* deprecated */
1457 1620 .frm-mt-0 {
@@ -1457,13 +1620,49 @@
1457 1620 .frm-mt-0 {
1458 1621 margin-top: 0 !important;
1459 1622 }
1460 1623
1624 +.frm-mt-2xs {
1625 + margin-top: var(--gap-2xs) !important;
1626 +}
1627 +
1628 +.frm-mt-xs {
1629 + margin-top: var(--gap-xs) !important;
1630 +}
1631 +
1632 +.frm-mt-sm {
1633 + margin-top: var(--gap-sm) !important;
1634 +}
1635 +
1636 +.frm-mt-md {
1637 + margin-top: var(--gap-md) !important;
1638 +}
1639 +
1640 +.frm-mt-lg {
1641 + margin-top: var(--gap-lg) !important;
1642 +}
1643 +
1644 +.frm-mt-2xl {
1645 + margin-top: var(--gap-2xl) !important;
1646 +}
1647 +
1648 +.frm-mt-auto {
1649 + margin-top: auto !important;
1650 +}
1651 +
1461 1652 .frm_no_bottom_margin, /* deprecated */
1462 1653 .frm-mb-0 {
1463 1654 margin-bottom: 0 !important;
1464 1655 }
1465 1656
1657 +.frm-mb-2xs {
1658 + margin-bottom: var(--gap-2xs) !important;
1659 +}
1660 +
1661 +.frm-mb-xs {
1662 + margin-bottom: var(--gap-xs) !important;
1663 +}
1664 +
1466 1665 .frm-mb-sm {
1467 1666 margin-bottom: var(--gap-sm) !important;
1468 1667 }
1469 1668
@@ -1474,37 +1673,118 @@
1474 1673 .frm-mb-lg {
1475 1674 margin-bottom: var(--gap-lg) !important;
1476 1675 }
1477 1676
1677 +.frm-ml-auto {
1678 + margin-left: auto;
1679 +}
1680 +
1681 +.frm-mr-auto {
1682 + margin-right: auto;
1683 +}
1684 +
1685 +.frm-mx-0 {
1686 + margin-left: 0 !important;
1687 + margin-right: 0 !important;
1688 +}
1689 +
1690 +.frm-mx-xs {
1691 + margin-left: var(--gap-xs) !important;
1692 + margin-right: var(--gap-xs) !important;
1693 +}
1694 +
1478 1695 .frm-mx-sm {
1479 1696 margin-left: var(--gap-sm) !important;
1480 1697 margin-right: var(--gap-sm) !important;
1481 1698 }
1482 1699
1700 +.frm-p-0 {
1701 + padding: 0 !important;
1702 +}
1703 +
1483 1704 .frm-p-1 {
1484 1705 padding: 4px;
1485 1706 }
1486 1707
1708 +.frm-p-sm,
1487 1709 .frm-p-4 {
1488 - padding: var(--gap-sm);
1710 + padding: var(--gap-sm) !important;
1489 1711 }
1490 1712
1491 -.frm-p-6 {
1492 - padding: var(--gap-md);
1713 +.frm-p-sm {
1714 + padding: var(--gap-sm) !important;
1493 1715 }
1494 1716
1717 +.frm-p-6,
1718 +.frm-p-md {
1719 + padding: var(--gap-md) !important;
1720 +}
1721 +
1722 +.frm-px-0 {
1723 + padding-left: 0 !important;
1724 + padding-right: 0 !important;
1725 +}
1726 +
1727 +.frm-py-0 {
1728 + padding-top: 0 !important;
1729 + padding-bottom: 0 !important;
1730 +}
1731 +
1732 +.frm-pt-sm {
1733 + padding-top: var(--gap-sm) !important;
1734 +}
1735 +
1736 +.frm-pt-xl {
1737 + padding-top: var(--gap-xl) !important;
1738 +}
1739 +
1740 +.frm-pb-md {
1741 + padding-bottom: var(--gap-md) !important;
1742 +}
1743 +.frm-pb-sm {
1744 + padding-bottom: var(--gap-sm) !important;
1745 +}
1746 +.frm-px-md {
1747 + padding-right: var(--gap-md) !important;
1748 + padding-left: var(--gap-md) !important;
1749 +}
1750 +
1751 +.frm-text-xs {
1752 + font-size: var(--text-xs) !important;
1753 +}
1754 +
1755 +.frm-text-sm {
1756 + font-size: var(--text-sm) !important;
1757 +}
1758 +
1495 1759 .frm-text-md {
1496 - font-size: var(--text-md);
1760 + font-size: var(--text-md) !important;
1497 1761 }
1498 1762
1499 1763 .frm-text-lg {
1500 - font-size: var(--text-lg);
1764 + font-size: var(--text-lg) !important;
1501 1765 }
1502 1766
1503 1767 .frm-text-xl {
1504 - font-size: var(--text-xl);
1768 + font-size: var(--text-xl) !important;
1505 1769 }
1506 1770
1771 +.frm-capitalize {
1772 + text-transform: capitalize;
1773 +}
1774 +
1775 +.frm-font-medium {
1776 + font-weight: 500 !important;
1777 +}
1778 +
1779 +.frm-font-semibold {
1780 + font-weight: 600 !important;
1781 +}
1782 +
1783 +.frm-rounded-sm {
1784 + border-radius: var(--small-radius) !important;
1785 +}
1786 +
1507 1787 .frm-w-auto {
1508 1788 width: auto !important;
1509 1789 }
1510 1790
@@ -1511,13 +1791,58 @@
1511 1791 .frm-w-full {
1512 1792 width: 100% !important;
1513 1793 }
1514 1794
1795 +.frm_block, /* deprecated */
1796 +.frm-block {
1797 + display: block;
1798 +}
1799 +
1800 +.frm_inline {
1801 + display: inline;
1802 +}
1803 +
1804 +.frm_inline_block {
1805 + display: inline-block !important;
1806 +}
1807 +
1808 +.frm-flex {
1809 + display: flex;
1810 +}
1811 +
1812 +.frm_hidden,
1813 +.js .frm-hide-js {
1814 + display: none;
1815 +}
1816 +
1515 1817 .frm-flex-box {
1516 1818 display: flex;
1517 1819 gap: var(--gap-sm);
1518 1820 }
1519 1821
1822 +.frm-flex-col {
1823 + display: flex;
1824 + flex-direction: column;
1825 +}
1826 +
1827 +.frm-flex-full {
1828 + flex: 1;
1829 +}
1830 +
1831 +.frm-flex-center {
1832 + display: flex;
1833 + justify-content: center;
1834 + align-items: center;
1835 +}
1836 +
1837 +.frm-shrink-0 {
1838 + flex-shrink: 0;
1839 +}
1840 +
1841 +.frm-gap-0 {
1842 + gap: 0 !important;
1843 +}
1844 +
1520 1845 .frm-gap-xs {
1521 1846 gap: var(--gap-xs);
1522 1847 }
1523 1848
@@ -1528,12 +1853,28 @@
1528 1853 .frm-gap-md {
1529 1854 gap: var(--gap-md);
1530 1855 }
1531 1856
1857 +.frm-gap-xl {
1858 + gap: var(--gap-xl);
1859 +}
1860 +
1861 +.frm-justify-center {
1862 + justify-content: center !important;
1863 +}
1864 +
1532 1865 .frm-justify-between {
1533 1866 justify-content: space-between;
1534 1867 }
1535 1868
1869 +.frm-justify-end {
1870 + justify-content: end;
1871 +}
1872 +
1873 +.frm-items-center {
1874 + align-items: center;
1875 +}
1876 +
1536 1877 .frm-transition-ease {
1537 1878 transition: all .2s ease;
1538 1879 }
1539 1880
@@ -1545,25 +1886,8 @@
1545 1886 .frm_no_float {
1546 1887 float: none;
1547 1888 }
1548 1889
1549 -.frm_block, /* deprecated */
1550 -.frm-block {
1551 - display: block;
1552 -}
1553 -
1554 -.frm_inline {
1555 - display: inline;
1556 -}
1557 -
1558 -.frm_inline_block {
1559 - display: inline-block !important;
1560 -}
1561 -
1562 -.frm_hidden {
1563 - display: none;
1564 -}
1565 -
1566 1890 .frm-text-right {
1567 1891 text-align: right;
1568 1892 }
1569 1893
@@ -1581,8 +1905,9 @@
1581 1905
1582 1906 .frm-on-bottom {
1583 1907 z-index: -1;
1584 1908 }
1909 +
1585 1910 /* End Generic Classes, Start Forced Generic Classes */
1586 1911
1587 1912 .frm-fields p > label.frm_hidden,
1588 1913 .frm-lookup-modal .dismiss,
@@ -1618,8 +1943,35 @@
1618 1943 }
1619 1944
1620 1945 /* End Forced Generic Classes */
1621 1946
1947 +/* Start Helper Classes */
1948 +.frm-vertical-line {
1949 + display: inline-block;
1950 + width: 1px;
1951 + height: 12px;
1952 + background-color: var(--grey-300);
1953 +}
1954 +
1955 +.frm-admin-full-screen #adminmenumain,
1956 +.frm-admin-full-screen #wpadminbar,
1957 +.frm-admin-full-screen #adminmenuback,
1958 +.frm-admin-full-screen #adminmenuwrap,
1959 +.frm-admin-full-screen #wpfooter {
1960 + display: none;
1961 +}
1962 +
1963 +.frm-admin-full-screen #wpcontent,
1964 +.frm-admin-full-screen.auto-fold #wpcontent {
1965 + margin: 0;
1966 + padding: 0;
1967 +}
1968 +
1969 +.frm-admin-full-screen.appearance_page_starter-templates #wpbody-content {
1970 + padding: 0;
1971 +}
1972 +/* End Helper Classes */
1973 +
1622 1974 .frm_forms.with_frm_style {
1623 1975 max-width: 100%;
1624 1976 }
1625 1977
@@ -1690,9 +2042,10 @@
1690 2042 .frm_on_submit_type > label,
1691 2043 .post-type-frm_display .frm_form_field > label,
1692 2044 #new_fields .frm_primary_label,
1693 2045 #form_global_settings .frm_primary_label,
1694 -#frm_form_editor_container .frm_primary_label {
2046 +#frm_form_editor_container .frm_primary_label,
2047 +#permissions_settings_settings .frm_primary_label {
1695 2048 color: var(--grey-700);
1696 2049 margin: 0 0 3px;
1697 2050 padding: 0;
1698 2051 width: auto;
@@ -1700,8 +2053,12 @@
1700 2053 display: block;
1701 2054 line-height: var(--leading);
1702 2055 }
1703 2056
2057 +#frm_form_editor_container #frm-show-fields .frm_primary_label {
2058 + min-height: 21px;
2059 +}
2060 +
1704 2061 .frm-fields td input + label {
1705 2062 display: inline;
1706 2063 }
1707 2064
@@ -1734,11 +2091,18 @@
1734 2091 color: inherit;
1735 2092 }
1736 2093
1737 2094 #frm_form_editor_container .divider_section_only .frm_primary_label {
2095 + display: flex;
2096 + align-items: center;
2097 + gap: var(--gap-xs);
1738 2098 font-size: 20px;
1739 2099 }
1740 2100
2101 +#frm_form_editor_container .divider_section_only .frm_primary_label .frm-sub-label {
2102 + padding: 0;
2103 +}
2104 +
1741 2105 form .form-field.frm_field_loading {
1742 2106 margin-bottom: 0;
1743 2107 min-height: 0;
1744 2108 padding: 0;
@@ -1760,9 +2124,9 @@
1760 2124 margin: 0;
1761 2125 }
1762 2126
1763 2127 .frm_error {
1764 - color: #B94A48;
2128 + color: #F04438;
1765 2129 }
1766 2130
1767 2131 form .frm_blank_field input,
1768 2132 form .frm_blank_field textarea,
@@ -1768,17 +2132,17 @@
1768 2132 form .frm_blank_field textarea,
1769 2133 form .frm_blank_field select,
1770 2134 form .frm_blank_field .frm-g-recaptcha iframe,
1771 2135 form .frm_blank_field .g-recaptcha iframe {
1772 - border-color: #B94A48;
2136 + border-color: #F04438;
1773 2137 }
1774 2138
1775 2139 form .frm_blank_field label {
1776 - color: #B94A48;
2140 + color: #F04438;
1777 2141 }
1778 2142
1779 2143 .frm_required {
1780 - color: #B94A48;
2144 + color: #F04438;
1781 2145 }
1782 2146
1783 2147 .with_frm_style .wp-editor-container textarea,
1784 2148 .postbox .wp-editor-container textarea,
@@ -1800,13 +2164,9 @@
1800 2164 position: relative;
1801 2165 }
1802 2166
1803 2167 .frm-license-input span {
1804 - position: absolute;
1805 - right: 0;
1806 - top: 5px;
1807 - padding: 0 10px;
1808 - font-size: 15px;
2168 + font-size: var(--text-sm);
1809 2169 }
1810 2170
1811 2171 .frm-license-input .frmsvg {
1812 2172 width: 20px;
@@ -1872,14 +2232,14 @@
1872 2232 clear: both;
1873 2233 }
1874 2234
1875 2235 .frm_error_style a {
1876 - text-decoration: underline;
1877 - font-weight: 600;
2236 + text-decoration: underline;
2237 + font-weight: 600;
1878 2238 }
1879 2239
1880 2240 .frm_error_style svg {
1881 - opacity: .7;
2241 + opacity: .7;
1882 2242 }
1883 2243
1884 2244 .frm_warning_style {
1885 2245 color: #7A4D05;
@@ -2052,8 +2412,9 @@
2052 2412 .frm-addons h3 {
2053 2413 margin-top: 0;
2054 2414 }
2055 2415
2416 +/* Card Components */
2056 2417 .frm-card {
2057 2418 width: 100%;
2058 2419 border-radius: 10px;
2059 2420 border: 1px solid var(--grey-300);
@@ -2060,8 +2421,73 @@
2060 2421 opacity: 1;
2061 2422 transition: opacity 1s;
2062 2423 }
2063 2424
2425 +.frm-card-box {
2426 + max-width: 500px;
2427 + background-color: #fff;
2428 + border-radius: var(--small-radius);
2429 + padding: var(--gap-lg);
2430 + box-shadow: var(--box-shadow-sm);
2431 +}
2432 +
2433 +.frm-card-box.frm-has-progress-bar {
2434 + position: relative;
2435 + overflow: hidden;
2436 + border-radius: var(--medium-radius);
2437 +}
2438 +
2439 +.frm-card-box-progress-bar {
2440 + position: absolute;
2441 + top: 0;
2442 + left: 0;
2443 + right: 0;
2444 + height: var(--gap-xs);
2445 + background-color: var(--primary-25);
2446 +}
2447 +
2448 +.frm-card-box-progress-bar > span {
2449 + position: absolute;
2450 + top: 0;
2451 + left: 0;
2452 + bottom: 0;
2453 + width: 33%;
2454 + background-color: var(--primary-500);
2455 +}
2456 +
2457 +.frm-card-box-header {
2458 + display: flex;
2459 + justify-content: center;
2460 + margin-bottom: var(--gap-sm);
2461 +}
2462 +
2463 +.frm-card-box.frm-has-progress-bar .frm-card-box-header {
2464 + margin-top: var(--gap-xs);
2465 +}
2466 +
2467 +.frm-card-box-content > :last-child {
2468 + margin-bottom: 0;
2469 +}
2470 +
2471 +.frm-card-box-footer {
2472 + display: flex;
2473 + justify-content: end;
2474 + gap: var(--gap-sm);
2475 + margin-top: var(--gap-lg);
2476 +}
2477 +
2478 +.frm-card-box-title {
2479 + font-size: var(--text-xl) !important;
2480 + font-weight: 600 !important;
2481 + margin-bottom: var(--gap-xs);
2482 +}
2483 +
2484 +.frm-card-box-text {
2485 + font-size: var(--text-md) !important;
2486 + color: var(--grey-600) !important;
2487 + margin-top: 0 !important;
2488 +}
2489 +
2064 2490 .frm-fade {
2065 2491 opacity: 0;
2066 2492 transition: all 1s;
2067 2493 }
@@ -2071,9 +2497,9 @@
2071 2497 position: relative;
2072 2498 }
2073 2499
2074 2500 .frm-addons .plugin-card-top {
2075 - height: 155px;
2501 + min-height: 155px;
2076 2502 padding-top: var(--gap-lg);
2077 2503 overflow: hidden;
2078 2504 }
2079 2505
@@ -2086,8 +2512,13 @@
2086 2512 .frm-addons .plugin-card-top p {
2087 2513 opacity: 0.8;
2088 2514 }
2089 2515
2516 +.frm-addons .plugin-card-top > :not(p):not(h2) {
2517 + /* Hide notices from third party plugins */
2518 + display: none;
2519 +}
2520 +
2090 2521 .frm-addons .plugin-card-bottom {
2091 2522 padding: 5px 20px 20px;
2092 2523 text-align: center;
2093 2524 background: transparent;
@@ -2098,9 +2529,10 @@
2098 2529 .frm-addons .plugin-card-bottom .button {
2099 2530 font-size: 15px;
2100 2531 }
2101 2532
2102 -.frm-addons .button {
2533 +.frm-addons .button,
2534 +.frm-addons .frm-button-tertiary {
2103 2535 float: right;
2104 2536 }
2105 2537
2106 2538 .frm-addons .addon-status {
@@ -2107,12 +2539,25 @@
2107 2539 float: left;
2108 2540 padding-top: 4px;
2109 2541 }
2110 2542
2111 -.frm-addon-active .button {
2112 - visibility: hidden;
2543 +.frm-addon-not-installed .frm-activate-addon,
2544 +.frm-addon-not-installed .frm-deactivate-addon,
2545 +.frm-addon-not-installed .frm-uninstall-addon,
2546 +.frm-addon-installed .frm-install-addon,
2547 +.frm-addon-installed .frm-deactivate-addon,
2548 +.frm-addon-active .frm-activate-addon,
2549 +.frm-addon-active .frm-install-addon,
2550 +.frm-addon-active .frm-uninstall-addon,
2551 +.plugin-card-pro.frm-addon-active .button,
2552 +.plugin-card-pro.frm-addon-active .frm-button-tertiary {
2553 + display: none !important;
2113 2554 }
2114 2555
2556 +#frm-addons-page .frm-addon-button {
2557 + opacity: 1 !important;
2558 +}
2559 +
2115 2560 .frm-save-and-reload-options {
2116 2561 margin-top: 10px;
2117 2562 font-size: 13px;
2118 2563 }
@@ -2141,12 +2586,8 @@
2141 2586 }
2142 2587
2143 2588 /* Form Templates */
2144 2589
2145 -.frm-featured-form .frm-inner-circle {
2146 - margin: 0 auto 5px;
2147 -}
2148 -
2149 2590 .frm-new-template.plugin-card-bottom {
2150 2591 overflow: visible;
2151 2592 }
2152 2593
@@ -2157,12 +2598,19 @@
2157 2598 .frm-admin-page-formidableedit #wpbody-content > *:not(.frm-review-notice):not(.frm_previous_install):not(.frm-banner-alert),
2158 2599 #wpbody-content > .updated,
2159 2600 #wpbody-content > #update-nag,
2160 2601 #wpbody-content > .update-nag,
2161 -#wpbody-content > .notice:not(.frm-review-notice),
2602 +#wpbody-content > .notice,
2162 2603 #wpbody-content > .error:not(.frm_previous_install),
2604 +#wpbody-content > [class*="admin-notice"],
2163 2605 .frm-white-body .updated,
2164 -.frm-white-body .notice:not(.frm-review-notice),
2606 +.frm-white-body .notice,
2607 +.frm-white-body [class*="admin-notice"],
2608 +.frm-white-body [class*="review-banner"],
2609 +.frm-white-body [id$="-review-banner"],
2610 +.frm-white-body #codepeople-review-banner,
2611 +.frm_wrap > .wrap > .notice,
2612 +.frm_wrap > .wrap > [class*="admin-notice"],
2165 2613 .frm-white-body .error:not(.frm_previous_install)
2166 2614 {
2167 2615 display: none;
2168 2616 }
@@ -2171,16 +2619,14 @@
2171 2619 display: block !important;
2172 2620 }
2173 2621
2174 2622 .frm-white-body .updated,
2175 -.frm-white-body .notice,
2176 2623 .frm-white-body .error {
2177 2624 margin: 0;
2178 2625 padding: 10px 20px;
2179 2626 }
2180 2627
2181 -.frm-modal .postbox,
2182 -#frm_new_form_modal .postbox {
2628 +.frm-modal .postbox {
2183 2629 max-height: 600px;
2184 2630 overflow: hidden;
2185 2631 margin-bottom: 0;
2186 2632 }
@@ -2185,27 +2631,41 @@
2185 2631 margin-bottom: 0;
2186 2632 }
2187 2633
2188 2634 .frm-modal .postbox .frm_modal_top,
2189 -.frm-dialog .frm_common_modal .postbox > div:first-child {
2635 +.frm-dialog .frm_common_modal .postbox > div:first-child,
2636 +.frm-error-modal .frm_modal_top {
2190 2637 padding: var(--gap-md) var(--gap-md) 0;
2191 2638 position: relative;
2192 2639 }
2193 2640
2641 +.frm-modal h2,
2642 +.frm-modal .postbox .inside h2, /* Override WP. */
2194 2643 .frm-modal .postbox .frm-modal-title,
2195 -.frm-dialog .frm_common_modal .postbox > div:first-child > div:first-child {
2644 +.frm-dialog .frm_common_modal .postbox > div:first-child > div:first-child,
2645 +.frm-error-modal .frm-modal-title {
2196 2646 display: inline-block;
2197 - font-size: var(--text-xl);
2647 + font-size: var(--text-lg);
2198 2648 color: var(--grey-900);
2649 + font-weight: 600;
2650 + margin: 0;
2651 + padding: 0;
2199 2652 }
2200 2653
2654 +.frm-modal h3 {
2655 + font-weight: 500;
2656 +}
2657 +
2658 +/* Dismiss icon button */
2659 +
2201 2660 .frm-inline-modal > a.dismiss,
2202 2661 .frm-modal .postbox > a.dismiss,
2203 2662 .frm-modal .postbox .frm-modal-title + div:last-child,
2204 2663 .frm-dialog .frm_common_modal .postbox > div:first-child > div:last-child {
2205 2664 position: absolute;
2206 - right: 30px;
2207 - top: 25px;
2665 + top: 19px;
2666 + right: 19px;
2667 + display: flex;
2208 2668 z-index: 2;
2209 2669 }
2210 2670
2211 2671 body.rtl .frm-inline-modal > a.dismiss,
@@ -2224,11 +2684,17 @@
2224 2684
2225 2685 .frm-modal .postbox .frm-modal-title + div:last-child a,
2226 2686 .frm-modal a.dismiss .frmsvg,
2227 2687 .frm_common_modal .frm_modal_top a .frmsvg {
2228 - color: var(--grey-900);
2688 + color: var(--grey-500);
2229 2689 }
2230 2690
2691 +.frm-modal .postbox .frm-modal-title + div:last-child a:hover,
2692 +.frm-modal a.dismiss .frmsvg:hover,
2693 +.frm_common_modal .frm_modal_top a .frmsvg:hover {
2694 + color: var(--grey-700);
2695 +}
2696 +
2231 2697 .frm-modal .frm_modal_content > div.inside,
2232 2698 .frm_common_modal .frm_modal_content > div.inside {
2233 2699 padding: var(--gap-md);
2234 2700 margin: 0;
@@ -2235,8 +2701,12 @@
2235 2701 font-size: var(--text-sm);
2236 2702 color: var(--grey-700);
2237 2703 }
2238 2704
2705 +.frm-modal p {
2706 + color: var(--grey-900);
2707 +}
2708 +
2239 2709 .frm_common_modal .postbox {
2240 2710 display: flex;
2241 2711 flex-direction: column;
2242 2712 }
@@ -2243,9 +2713,8 @@
2243 2713
2244 2714 .frm-modal .postbox > div.inside .cta-inside {
2245 2715 overflow-y: auto;
2246 2716 height: auto;
2247 - padding: 0 var(--gap-sm);
2248 2717 }
2249 2718
2250 2719 .frm_modal_footer {
2251 2720 padding: 0 var(--gap-md) var(--gap-sm);
@@ -2255,26 +2724,9 @@
2255 2724 body.frm-body-with-open-modal {
2256 2725 overflow-y: hidden;
2257 2726 }
2258 2727
2259 -#frm_new_form_modal .postbox > div.inside {
2260 - max-height: 490px;
2261 - overflow-y: auto;
2262 - overflow-x: hidden;
2263 - margin: 0;
2264 - padding: 10px 0 0;
2265 -}
2266 -
2267 -#frm_new_form_modal .postbox > div.inside .cta-inside {
2268 - overflow-y: auto;
2269 - height: auto;
2270 - padding: 0 var(--gap-md);
2271 -}
2272 -
2273 -#frm_new_form_modal .accordion-container {
2274 - width: 100%;
2275 -}
2276 -
2728 +/* These template list styles are still used to list the View types in the New View modal. */
2277 2729 .frm-templates-list {
2278 2730 margin-top: 0;
2279 2731 }
2280 2732
@@ -2329,16 +2781,15 @@
2329 2781 .frm-templates-list li > div > div {
2330 2782 vertical-align: middle;
2331 2783 }
2332 2784
2333 -.frm-templates-list .frm-inner-circle,
2334 -.frm-category-icon, /* Deprecated */
2785 +.frm-category-icon,
2335 2786 .frm-icon-wrapper {
2336 2787 background: var(--primary-500);
2337 2788 border-radius: var(--small-radius);
2338 2789 color: #fff;
2339 - width: 40px;
2340 - height: 40px;
2790 + width: 32px;
2791 + height: 32px;
2341 2792 font-size: 18px;
2342 2793 box-sizing: border-box;
2343 2794 align-self: center;
2344 2795 justify-content: center;
@@ -2345,26 +2796,12 @@
2345 2796 align-items: center;
2346 2797 display: inline-flex;
2347 2798 }
2348 2799
2349 -.frm-templates-list .frm-inner-circle .frmsvg {
2350 - vertical-align: top;
2351 -}
2352 -
2353 2800 .frm-templates-list li .frm-category-icon {
2354 2801 overflow: hidden;
2355 - align-self: flex-start;
2356 2802 }
2357 2803
2358 -.frm-templates-list .frm-template-details {
2359 - /* the content container to the right of the icon in Create new form modal */
2360 - display: inline-block;
2361 - width: calc( 100% - 40px );
2362 - padding-left: var(--gap-sm);
2363 - box-sizing: border-box;
2364 - transform: translateY(-2px);
2365 -}
2366 -
2367 2804 .frm-templates-list li h3,
2368 2805 .frm-templates-list li p {
2369 2806 text-align: left;
2370 2807 margin: 0;
@@ -2381,82 +2818,23 @@
2381 2818 .frm-templates-list .frm-install-template div {
2382 2819 text-align: left;
2383 2820 }
2384 2821
2385 -#frm_new_form_modal .frm-search {
2386 - width: 100%;
2387 - margin: var(--gap-sm) 0 var(--gap-md);
2388 -}
2389 -
2390 2822 #frm_leave_email,
2391 -#frm_code_from_email
2392 -{
2823 +#frm_code_from_email {
2393 2824 width: 480px;
2825 + max-width: 100%;
2394 2826 }
2395 2827
2396 -#frm_new_form_modal #template-search-input {
2397 - width: 100%;
2398 -}
2399 -
2400 -#frm-email-block .frm-with-left-icon .frmsvg {
2401 - padding: 0;
2402 - top: 0;
2403 - left: 13px;
2404 -}
2405 -
2406 -#frm_new_form_modal .accordion-container {
2407 - display: inline-block;
2408 - padding: 0;
2409 - border-top: 1px solid var(--grey-300);
2410 - box-sizing: border-box;
2411 - margin: 0 5px;
2412 - width: calc( 100% - 10px );
2413 -}
2414 -
2415 -#frm_new_form_modal .accordion-section-title {
2416 - padding: 0;
2417 -}
2418 -
2419 -#frm_new_form_modal .accordion-section-title:hover,
2420 -.control-section:hover .accordion-section-title,
2421 -#frm_new_form_modal .accordion-section.open .accordion-section-title
2422 -{
2828 +.control-section:hover .accordion-section-title {
2423 2829 background: #fff !important;
2424 2830 border-bottom-color: transparent;
2425 2831 }
2426 2832
2427 -#frm_new_form_modal .accordion-section.open:hover {
2428 - border-bottom-color: transparent;
2429 -}
2430 -
2431 -#frm_new_form_modal .accordion-section {
2432 - padding: 8px 0 4px;
2433 -}
2434 -
2435 -#frm_new_form_modal .accordion-section + .accordion-section {
2436 - border-top: 1px solid var(--grey-300);
2437 - border-radius: 0;
2438 -}
2439 -
2440 -.frm-templates-list.frm-categories-list li > div > div:last-child,
2441 -#frm_new_form_modal .accordion-section .frm-featured-form
2442 -{
2833 +.frm-templates-list.frm-categories-list li > div > div:last-child {
2443 2834 padding-left: 0;
2444 2835 }
2445 2836
2446 -#frm_new_form_modal .frm-templates-list.frm-categories-list .accordion-section-title {
2447 - padding-left: var(--gap-sm);
2448 -}
2449 -
2450 -#frm_new_form_modal .frm-templates-list.frm-categories-list li.frm-selectable {
2451 - padding: 0 10px;
2452 - overflow: hidden;
2453 -}
2454 -
2455 -#frm_new_form_modal .accordion-section-content {
2456 - padding: var(--gap-sm);
2457 -}
2458 -
2459 2837 .frm-hover-icons {
2460 2838 position: absolute;
2461 2839 right: 0;
2462 2840 top: calc( ( 58px - 2px - 22px ) / 2 ); /* Template item height - borders - icon height */
@@ -2482,10 +2860,10 @@
2482 2860 width: 22px;
2483 2861 height: 22px;
2484 2862 font-size: var(--text-md);
2485 2863 display: inline-flex;
2486 - align-items: center;
2487 - justify-content: center;
2864 + align-items: center;
2865 + justify-content: center;
2488 2866 border-radius: 50%;
2489 2867 box-sizing: border-box;
2490 2868 line-height: var(--leading);
2491 2869 text-align: center;
@@ -2556,21 +2934,8 @@
2556 2934 vertical-align: text-top;
2557 2935 color: var(--grey-500);
2558 2936 }
2559 2937
2560 -#frm_new_form_modal .frm-use-this-template {
2561 - margin-left: 10px;
2562 -}
2563 -
2564 -#frm_new_form_modal #frm-preview-block {
2565 - padding: var(--gap-md) var(--gap-lg);
2566 - overflow-x: hidden;
2567 -}
2568 -
2569 -#frm_new_form_modal #frm-details-block {
2570 - padding: var(--gap-md) var(--gap-lg);
2571 -}
2572 -
2573 2938 .frm-modal-back {
2574 2939 cursor: pointer;
2575 2940 margin-right: 4px;
2576 2941 }
@@ -2578,116 +2943,83 @@
2578 2943 .frm-modal-cancel {
2579 2944 float: left;
2580 2945 }
2581 2946
2582 -.frm-plan-required-tag {
2583 - margin-left: 5px;
2584 - transform: translateY(-1px);
2585 - background: #FDE6DE;
2586 - color: #F15A24;
2947 +.frm-meta-tag,
2948 +.frm-meta-tag:hover {
2949 + padding: var(--gap-2xs) var(--gap-xs);
2950 + border-radius: var(--small-radius);
2951 + font-weight: 600;
2952 + display: inline-flex;
2953 + background-color: #D9EBFF;
2954 + gap: 2px;
2587 2955 }
2588 2956
2589 -.frm-ready-made-solution .frm-meta-tag {
2590 - width: fit-content;
2591 - background: #FDE6DE;
2592 - color: #F15A24;
2957 +.frm-meta-tag.frm-grey-tag,
2958 +.frm-meta-tag.frm-grey-tag:hover {
2959 + background-color: var(--sidebar-hover);
2960 + color: var(--grey-900);
2593 2961 }
2594 2962
2595 -.frm-meta-tag {
2596 - font-size: 10px;
2597 - padding: 4px 6px;
2598 - border-radius: 4px;
2599 - text-transform: uppercase;
2600 - font-weight: normal;
2601 - display: inline-block;
2602 - line-height: 12px;
2963 +.frm-meta-tag.frm-red-tag,
2964 +.frm-meta-tag.frm-red-tag:hover {
2965 + background: var(--error-100);
2966 + color: var(--error-700);
2603 2967 }
2604 2968
2605 -#frm_new_form_modal.frm-expired #frm-create-block,
2606 -#frm_new_form_modal.frm-expiring #frm-create-block {
2607 - max-height: 450px;
2969 +.frm-meta-tag.frm-orange-tag,
2970 +.frm-meta-tag.frm-orange-tag:hover {
2971 + background-color: #FEF7F4;
2972 + color: var(--orange);
2608 2973 }
2609 2974
2610 -#frm-create-footer {
2611 - padding: 15px 20px;
2975 +.frm-meta-tag.frm-green-tag,
2976 +.frm-meta-tag.frm-green-tag:hover {
2977 + background-color: var(--success-500);
2978 + color: #fff;
2612 2979 }
2613 2980
2614 -#frm_code_from_email_options {
2615 - margin-top: 20px;
2981 +.frm-entry-status-0,
2982 +.frm-meta-tag.frm-lt-green-tag,
2983 +.frm-meta-tag.frm-lt-green-tag:hover {
2984 + background-color: var(--success-100);
2985 + color: var(--success-800);
2616 2986 }
2617 2987
2618 -#frm_code_from_email_options * {
2619 - color: var(--primary-500);
2988 +.frm-meta-tag.frm-new-pill {
2989 + background-color: var(--success-500);
2990 + vertical-align: text-bottom;
2620 2991 }
2621 2992
2622 -#frm-email-block p,
2623 -#frm-code-block p,
2624 -#frm-renew-block p
2625 -{
2626 - padding: 0 40px;
2627 - max-width: 400px;
2628 - margin: 0 auto 20px;
2993 +/* Start entry statuses */
2994 +.frm-entry-status {
2995 + font-weight: 500;
2629 2996 }
2630 2997
2998 +.frm-entry-status-1 {
2999 + color: #7A4D05;
3000 + background: #FFF2D2;
3001 +}
3002 +/* End entry statuses */
3003 +
3004 +#frm-create-footer {
3005 + padding: 15px 20px;
3006 +}
3007 +
2631 3008 li .frm-hover-icons .frm-preview-form,
2632 3009 .frm-hover-icons .frm-unlock-form,
2633 3010 .frm-locked-template .frm-hover-icons .frm-create-form,
2634 -#frm_new_form_modal .frm-modal-back ~ span,
2635 -#frm_new_form_modal .postbox > div:first-child ~ div,
2636 -.frm-modal-back,
2637 -#frm_new_form_modal:not([frm-page="create"]) a.dismiss,
2638 -#frm_code_from_email_error span,
2639 -#frm_leave_email_error span,
2640 -#frm_new_form_modal .frm-delete-form,
2641 -#frm-details-block #frm-new-template button,
2642 -#frm-create-title span[frm-type="template"],
2643 -#frm-create-title[frm-type="template"] span[frm-type="form"]
3011 +.frm-modal-back
2644 3012 {
2645 3013 display: none;
2646 3014 }
2647 3015
2648 -#frm_new_form_modal:not([frm-page="create"]) .frm-modal-back,
2649 -#frm_new_form_modal[frm-page="create"] #frm-create-title,
2650 -#frm-create-title[frm-type="template"] span[frm-type="template"],
2651 -#frm_new_form_modal[frm-page="preview"] #frm-preview-title,
2652 -#frm_new_form_modal[frm-page="details"] #frm-create-title,
2653 -#frm_new_form_modal[frm-page="upgrade"] #frm-upgrade-title,
2654 -#frm_new_form_modal[frm-page="email"] #frm-email-title,
2655 -#frm_new_form_modal[frm-page="code"] #frm-email-title,
2656 -#frm_new_form_modal[frm-page="renew"] #frm-renew-title,
2657 -#frm_code_from_email_error[frm-error="wrong-code"] span[frm-error="wrong-code"],
2658 -#frm_code_from_email_error[frm-error="empty"] span[frm-error="empty"],
2659 -#frm_code_from_email_error[frm-error="custom"] span[frm-error="custom"],
2660 -#frm_leave_email_error[frm-error="invalid"] span[frm-error="invalid"],
2661 -#frm_leave_email_error[frm-error="empty"] span[frm-error="empty"]
2662 -{
2663 - display: inline-block;
2664 -}
2665 3016
2666 3017 .frm-locked-template .frm-hover-icons .frm-unlock-form,
2667 -li[data-preview] .frm-hover-icons .frm-preview-form,
2668 -#frm_new_form_modal .frm-selectable[data-custom="1"] .frm-hover-icons .frm-delete-form {
3018 +li[data-preview] .frm-hover-icons .frm-preview-form {
2669 3019 display: inline-flex;
2670 3020 }
2671 3021
2672 -#frm_new_form_modal[frm-page="create"] #frm-create-block,
2673 -#frm_new_form_modal[frm-page="preview"] #frm-preview-block,
2674 -#frm_new_form_modal[frm-page="details"] #frm-details-block,
2675 -#frm_new_form_modal[frm-page="upgrade"] #frm-upgrade-block,
2676 -#frm_new_form_modal[frm-page="email"] #frm-email-block,
2677 -#frm_new_form_modal[frm-page="code"] #frm-code-block,
2678 -#frm_new_form_modal[frm-page="renew"] #frm-renew-block,
2679 -#frm_new_form_modal[frm-page="create"] #frm-create-footer,
2680 -#frm_new_form_modal[frm-page="preview"] #frm-preview-footer,
2681 -#frm_new_form_modal[frm-page="details"] #frm-details-footer,
2682 -#frm_new_form_modal[frm-page="upgrade"] #frm-upgrade-footer,
2683 -#frm_new_form_modal[frm-page="email"] #frm-email-footer,
2684 -#frm_new_form_modal[frm-page="code"] #frm-code-footer,
2685 -#frm_new_form_modal[frm-page="renew"] #frm-renew-footer
2686 -{
2687 - display: block;
2688 -}
2689 -
2690 3022 .frm-modal-back svg {
2691 3023 color: #7F7F7F;
2692 3024 }
2693 3025
@@ -2858,64 +3190,8 @@
2858 3190 .frm_image_from_url {
2859 3191 height: 50px;
2860 3192 }
2861 3193
2862 -.frm-right-panel .inside a.frm_pro_tip,
2863 -a.frm_pro_tip {
2864 - font-size: var(--text-sm);
2865 - display: inline-block;
2866 - color: var(--grey-700);
2867 - background: #FFE7DE;
2868 - border-radius: var(--small-radius);
2869 - padding: 5px 15px;
2870 - margin: 0 auto;
2871 - display: flex;
2872 - align-items: center;
2873 -}
2874 -
2875 -a.frm_pro_tip:hover {
2876 - color: var(--grey-700);
2877 - border-color: var(--primary-500);
2878 -}
2879 -
2880 -a.frm_pro_tip:hover .frmsvg {
2881 - fill: var(--primary-500);
2882 -}
2883 -
2884 -.frm_field_list .frm_pro_tip {
2885 - margin: 10px 15px;
2886 - position: relative;
2887 - width: calc(100% - 30px);
2888 - box-sizing: border-box;
2889 -}
2890 -
2891 -a.frm_pro_tip .frmsvg,
2892 -a.frm_pro_tip i {
2893 - color: var(--orange);
2894 - margin-right: 5px;
2895 -}
2896 -
2897 -a.frm_pro_tip .frmsvg {
2898 - margin-right: 10px;
2899 -}
2900 -
2901 -.frm-tip-info {
2902 - flex: 1;
2903 - text-align: left;
2904 -}
2905 -
2906 -.frm-tip-cta {
2907 - color: var(--orange);
2908 -}
2909 -
2910 -.nav-tab-wrapper .frm_pro_tip {
2911 - float: right;
2912 -}
2913 -
2914 -.frm_pro_tip:hover .frm-tip-cta {
2915 - color: var(--primary-500);
2916 -}
2917 -
2918 3194 /*Switch form dropdown*/
2919 3195 h1 .fa-caret-down {
2920 3196 font-size: 18px;
2921 3197 }
@@ -3162,9 +3438,9 @@
3162 3438 top: auto;
3163 3439 left: auto;
3164 3440 font-size: var(--text-sm);
3165 3441 padding: 4px;
3166 - margin-bottom: 3px;
3442 + margin-bottom: 3px;
3167 3443 }
3168 3444
3169 3445 .frm-right-panel .accordion-section-content {
3170 3446 background: transparent;
@@ -3233,28 +3509,10 @@
3233 3509 .frm-right-panel .frm-inline-modal .frm-with-line span {
3234 3510 background: #fff !important;
3235 3511 }
3236 3512
3237 -.frm-with-line:before,
3238 -.accordion-section-content h4:before {
3239 - content: '';
3240 - display: block;
3241 - position: absolute;
3242 - border-bottom: 1px solid var(--grey-300);
3243 - left: 0;
3244 - width: 100%;
3245 - top: 50%;
3246 -}
3247 -
3248 -.frm-right-panel .accordion-section {
3249 - border: none;
3250 - position: relative;
3251 -}
3252 -
3253 3513 .frm-right-panel .accordion-section-title:before,
3254 -.frm-right-panel .accordion-section-title:after,
3255 -#frm_new_form_modal .accordion-section-title:after
3256 -{
3514 +.frm-right-panel .accordion-section-title:after {
3257 3515 content: "\e913" !important;
3258 3516 font-family: "s11-fp" !important;
3259 3517 font-size: 18px;
3260 3518 font-variant: normal;
@@ -3261,12 +3519,8 @@
3261 3519 text-rendering: auto;
3262 3520 vertical-align: text-top;
3263 3521 }
3264 3522
3265 -#frm_new_form_modal .accordion-section.open .accordion-section-title:after {
3266 - transform: rotate(90deg);
3267 -}
3268 -
3269 3523 .frm-right-panel .accordion-section-title:after {
3270 3524 top: calc(50% - 10px) !important;
3271 3525 }
3272 3526
@@ -3277,68 +3531,36 @@
3277 3531 .frm-right-panel .accordion-section-title:before {
3278 3532 content: "\f1de" !important;
3279 3533 color: var(--grey);
3280 3534 font-size: 17px !important;
3281 - margin: 0 10px 0 0;
3282 3535 }
3283 3536
3284 -.form-title-style .accordion-section-title:before,
3285 -.section-fields-style .accordion-section-title:before {
3286 - content: "\f1dc" !important;
3537 +.frm-with-line:before,
3538 +.accordion-section-content h4:before {
3539 + content: '';
3540 + display: block;
3541 + position: absolute;
3542 + border-bottom: 1px solid var(--grey-300);
3543 + left: 0;
3544 + width: 100%;
3545 + top: 50%;
3287 3546 }
3288 3547
3289 -.form-description-style .accordion-section-title:before {
3290 - content: "\e90f" !important;
3548 +.frm-right-panel .accordion-section {
3549 + border: none;
3550 + position: relative;
3291 3551 }
3292 -
3293 -.field-colors-style .accordion-section-title:before {
3294 - content: "\e96d" !important;
3552 +.frm-right-panel .accordion-section-title > .frmsvg:first-child {
3553 + margin: 0 10px 0 0;
3554 + color: var(--grey);
3295 3555 }
3296 -
3297 -.field-sizes-style .accordion-section-title:before {
3298 - content: "\e920" !important;
3556 +.frm-right-panel .accordion-section-title:hover > .frmsvg:first-child {
3557 + color: var(--grey-900);
3299 3558 }
3300 3559
3301 -.field-labels-style .accordion-section-title:before {
3302 - content: "\e953" !important;
3560 +.frm-right-panel .open .accordion-section-title > .frmsvg:last-child {
3561 + transform: rotate(180deg);
3303 3562 }
3304 -
3305 -.field-description-style .accordion-section-title:before{
3306 - content: "\e611" !important;
3307 -}
3308 -
3309 -.check-box-radio-fields-style .accordion-section-title:before{
3310 - content: "\f14a" !important;
3311 -}
3312 -
3313 -.buttons-style .accordion-section-title:before{
3314 - content: "\e911" !important;
3315 -}
3316 -
3317 -.repeater-fields-style .accordion-section-title:before{
3318 - content: "\e974" !important;
3319 -}
3320 -
3321 -.toggle-fields-style .accordion-section-title:before{
3322 - content: "\f205" !important;
3323 -}
3324 -
3325 -.slider-fields-style .accordion-section-title:before{
3326 - content: "\f386" !important;
3327 -}
3328 -
3329 -.form-messages-style .accordion-section-title:before{
3330 - content: "\e915" !important;
3331 -}
3332 -
3333 -.date-fields-style .accordion-section-title:before{
3334 - content: "\f073" !important;
3335 -}
3336 -
3337 -.progress-bars-style .accordion-section-title:before{
3338 - content: "\e939" !important;
3339 -}
3340 -
3341 3563 #frm_view_editor_left.frm-right-panel .accordion-section-title,
3342 3564 .frm-right-panel h3.accordion-section-title {
3343 3565 padding: 15px 20px;
3344 3566 background: var(--sidebar-color);
@@ -3359,8 +3581,9 @@
3359 3581
3360 3582 .frm-btn-group .multiselect.dropdown-toggle {
3361 3583 box-sizing: border-box;
3362 3584 min-height: unset;
3585 + cursor: pointer;
3363 3586 }
3364 3587
3365 3588 .accordion-container .frm-dropdown-menu:before,
3366 3589 .accordion-container .multiselect.dropdown-toggle:before {
@@ -3617,8 +3840,16 @@
3617 3840 margin-right: 5px;
3618 3841 display: inline-block;
3619 3842 }
3620 3843
3844 +.frm_form_builder .frm_opt_container .frm_radio.frm_image_option label,
3845 +.frm_form_builder .frm_opt_container .frm_checkbox.frm_image_option label {
3846 + display: flex;
3847 + align-items: center;
3848 + gap: 9px;
3849 + white-space: normal;
3850 +}
3851 +
3621 3852 .frm_form_field.frm_two_col .frm_opt_container,
3622 3853 .frm_form_field.frm_three_col .frm_opt_container,
3623 3854 .frm_form_field.frm_four_col .frm_opt_container{
3624 3855 display: grid;
@@ -3680,11 +3911,11 @@
3680 3911
3681 3912 .frm-white-body input[type="checkbox"]:checked::before,
3682 3913 .frm_wrap input[type="checkbox"]:checked::before {
3683 3914 content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2010%2010%27%3E%3Cpath%20d%3D%27M9.2%202c.2.3.2.7%200%201l-5%205c-.3.2-.6.2-.9%200L.8 5.3a.6.6%200%200%201%20.9-.8l2%202%204.6-4.5c.3-.3.6-.3.9%200Z%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E");
3684 - height: 12px;
3685 - width: 12px;
3686 - margin: 1px;
3915 + height: 12px;
3916 + width: 12px;
3917 + margin: 1px;
3687 3918 }
3688 3919
3689 3920 .frm_radio input[type="radio"],
3690 3921 .frm_checkbox input[type="checkbox"] {
@@ -3915,10 +4146,8 @@
3915 4146 padding: 6px;
3916 4147 line-height: var(--leading);
3917 4148 border: 0 none;
3918 4149 outline: none;
3919 - -moz-box-sizing: border-box;
3920 - -webkit-box-sizing: border-box;
3921 4150 box-sizing: border-box;
3922 4151 }
3923 4152
3924 4153 /*ICONS*/
@@ -4042,8 +4271,12 @@
4042 4271 padding: 15px 0;
4043 4272 margin-top: -2px;
4044 4273 }
4045 4274
4275 +.frm-right-panel a.frm_add_logic_link:focus {
4276 + outline: auto;
4277 +}
4278 +
4046 4279 #frm_style_sidebar h3,
4047 4280 #frm_view_editor_left.frm-right-panel .accordion-section-title {
4048 4281 padding: 15px 0;
4049 4282 }
@@ -4056,8 +4289,9 @@
4056 4289 padding: 0;
4057 4290 }
4058 4291
4059 4292 .frm-alt-table {
4293 + position: relative;
4060 4294 width:100%;
4061 4295 border-collapse:collapse;
4062 4296 margin-top:0.5em;
4063 4297 font-size:15px;
@@ -4062,16 +4296,32 @@
4062 4296 margin-top:0.5em;
4063 4297 font-size:15px;
4064 4298 }
4065 4299
4300 +/* Before `applyZebraStriping` is executed, an empty space is displayed */
4301 +#form_show_entry_page .frm-alt-table:not(.frm-zebra-striping)::before {
4302 + content: '';
4303 + position: absolute;
4304 + top: 0;
4305 + right: 0;
4306 + bottom: 0;
4307 + left: 0;
4308 + background-color: #fff;
4309 +}
4310 +
4066 4311 .frm-alt-table th {
4067 4312 width:200px;
4068 4313 }
4069 4314
4070 -.frm-alt-table tr {
4315 +.frm-alt-table tr,
4316 +.frm-alt-table tr.frm-odd {
4071 4317 background-color:transparent;
4072 4318 }
4073 4319
4320 +.frm-alt-table tr.frm-even {
4321 + background-color: var(--sidebar-color);
4322 +}
4323 +
4074 4324 .frm-alt-table th,
4075 4325 .frm-alt-table td {
4076 4326 background-color:transparent;
4077 4327 vertical-align:top;
@@ -4078,12 +4328,8 @@
4078 4328 text-align:left;
4079 4329 padding:20px;
4080 4330 }
4081 4331
4082 -.frm-alt-table tr:nth-child(even) {
4083 - background-color: var(--sidebar-color);
4084 -}
4085 -
4086 4332 .frm-alt-table h3 {
4087 4333 margin-bottom: 0;
4088 4334 }
4089 4335
@@ -4134,13 +4380,9 @@
4134 4380 padding: 10px 20px;
4135 4381 line-height: inherit;
4136 4382 width: auto;
4137 4383 height: auto !important;
4138 - -moz-border-radius: 0;
4139 - -webkit-border-radius: 0;
4140 4384 border-radius: 0;
4141 - -webkit-box-sizing: content-box;
4142 - -moz-box-sizing: content-box;
4143 4385 box-sizing: content-box;
4144 4386 }
4145 4387
4146 4388 .frm_html_field_placeholder {
@@ -4152,8 +4394,12 @@
4152 4394 border: 1px solid #d3d3d3;
4153 4395 width: 300px;
4154 4396 }
4155 4397
4398 +.turnstile_placeholder {
4399 + width: 300px;
4400 +}
4401 +
4156 4402 .frm_sorting .frm_rte textarea {
4157 4403 width: 653px;
4158 4404 background: #fff;
4159 4405 margin: 1px 0 0;
@@ -4158,10 +4404,8 @@
4158 4404 background: #fff;
4159 4405 margin: 1px 0 0;
4160 4406 border: 1px solid #dfdfdf;
4161 4407 border-top: none;
4162 - -moz-border-radius: 0;
4163 - -webkit-border-radius: 0;
4164 4408 border-radius: 0;
4165 4409 float: none !important;
4166 4410 }
4167 4411
@@ -4342,13 +4586,8 @@
4342 4586 --border-color-active: var(--primary-500);
4343 4587 --border-radius: var(--small-radius);
4344 4588 }
4345 4589
4346 -.frm_image_option_container svg {
4347 - height: 50px;
4348 - margin: 10px auto 0;
4349 -}
4350 -
4351 4590 #form_show_entry_page .frm_file_link,
4352 4591 #form_show_entry_page .frm_image_option_container {
4353 4592 display: inline-flex;
4354 4593 flex-wrap: nowrap;
@@ -4378,8 +4617,12 @@
4378 4617 #form_show_entry_page .frm_upload_label {
4379 4618 padding: 10px;
4380 4619 }
4381 4620
4621 +#form_show_entry_page.frm_wrap .postbox {
4622 + overflow: hidden;
4623 +}
4624 +
4382 4625 .frm_image_option_container .frm_image_placeholder_icon svg{
4383 4626 height: 150px;
4384 4627 }
4385 4628
@@ -4423,8 +4666,14 @@
4423 4666 #form_global_settings .frm_image_option_container svg {
4424 4667 max-width: calc( 100% - 20px );
4425 4668 }
4426 4669
4670 +/* Style image option container for Directory add on. */
4671 +#frm-new-template .frm_image_option_container svg {
4672 + height: 50px;
4673 + margin: 10px auto 0;
4674 +}
4675 +
4427 4676 /* Show an icon on top */
4428 4677 .frm_image_option_container {
4429 4678 position: relative;
4430 4679 }
@@ -4686,9 +4935,9 @@
4686 4935 margin-left: -145px;
4687 4936 }
4688 4937
4689 4938 .frm_end.frm6 .wp-picker-holder {
4690 - margin-left: -86px;
4939 + margin-left: -86px;
4691 4940 }
4692 4941 /* End of color picker CSS */
4693 4942
4694 4943 /*
@@ -4704,9 +4953,9 @@
4704 4953 }
4705 4954
4706 4955 .frm_on_label,
4707 4956 .frm_off_label {
4708 - color: #444444;
4957 + color: var(--grey-700);
4709 4958 }
4710 4959
4711 4960 .frm_toggle {
4712 4961 position: relative;
@@ -4716,10 +4965,10 @@
4716 4965 vertical-align: middle;
4717 4966 }
4718 4967
4719 4968 .frm_toggle_block {
4720 - display: inline-flex;
4721 - gap: var(--gap-sm);
4969 + display: inline-flex !important;
4970 + gap: var(--gap-sm);
4722 4971 align-items: center;
4723 4972 }
4724 4973
4725 4974 .frm_toggle input, /* Reverse compatibility */
@@ -4905,9 +5154,9 @@
4905 5154 }
4906 5155
4907 5156 .frm-long-icon-buttons {
4908 5157 display: flex;
4909 - gap: var(--gap-md);
5158 + gap: var(--gap-md);
4910 5159 }
4911 5160
4912 5161 .frm-long-icon-buttons > label {
4913 5162 border: 1px solid var(--grey-300);
@@ -5025,11 +5274,9 @@
5025 5274 .frm_inbox_date {
5026 5275 text-align: right;
5027 5276 }
5028 5277
5029 -.frm_inbox_count,
5030 -.frm_inbox_unread {
5031 - background: var(--orange);
5278 +.frm_inbox_count {
5032 5279 color: #fff;
5033 5280 border-radius: 50%;
5034 5281 display: inline-block;
5035 5282 margin-right: 8px;
@@ -5034,16 +5281,8 @@
5034 5281 display: inline-block;
5035 5282 margin-right: 8px;
5036 5283 font-size: 11px;
5037 5284 text-align: center;
5038 -}
5039 -
5040 -.frm_inbox_unread {
5041 - width: 8px;
5042 - height: 8px;
5043 -}
5044 -
5045 -.frm_inbox_count {
5046 5285 min-width: 18px;
5047 5286 height: 18px;
5048 5287 margin-left: 2px;
5049 5288 vertical-align: text-bottom;
@@ -5049,8 +5288,12 @@
5049 5288 vertical-align: text-bottom;
5050 5289 }
5051 5290
5052 5291 /* Import/Export */
5292 +.frm-lite .xml_opts .frm-export-xml-items {
5293 + display: none;
5294 +}
5295 +
5053 5296 .csv_opts #frm_csv_col_sep {
5054 5297 width: 45px;
5055 5298 }
5056 5299
@@ -5076,9 +5319,10 @@
5076 5319 display: inline-block;
5077 5320 position: relative;
5078 5321 }
5079 5322
5080 -#frm_where_options span.frm_where_val .frm_tooltip_icon {
5323 +#frm_where_options span.frm_where_val .frm_tooltip_icon,
5324 +#frm_where_options span.frm_where_val .frm_help {
5081 5325 left: -4px;
5082 5326 position: absolute;
5083 5327 }
5084 5328
@@ -5112,10 +5356,10 @@
5112 5356 font-size: var(--text-sm);
5113 5357 }
5114 5358
5115 5359 .frm-feature-banner .dismiss {
5116 - margin-top: -10px;
5117 - margin-right: -10px;
5360 + margin-top: -10px;
5361 + margin-right: -10px;
5118 5362 }
5119 5363
5120 5364 .frm-feature-banner .dismiss svg {
5121 5365 color: #fff;
@@ -5283,8 +5527,12 @@
5283 5527 cursor: pointer;
5284 5528 outline: 0;
5285 5529 }
5286 5530
5531 +#frm_notification_settings .widget-top .widget-action{
5532 + padding-top: 13.5px;
5533 +}
5534 +
5287 5535 #frm_email_addon_menu {
5288 5536 border: 1px solid var(--grey-300);
5289 5537 padding: var(--gap-sm);
5290 5538 border-radius: 4px;
@@ -5643,16 +5891,23 @@
5643 5891 font-size: var(--text-xs);
5644 5892 box-shadow: none;
5645 5893 }
5646 5894
5647 -.frm_reply_to_container,
5648 -.frm_bcc_cc_container {
5895 +p.frm_bcc_cc_container,
5896 +p.frm_reply_to_container {
5649 5897 float: right;
5650 - margin: -4px 0 0;
5651 5898 z-index: 1;
5652 5899 position: relative;
5653 5900 }
5654 5901
5902 +p.frm_bcc_cc_container {
5903 + margin: 14px 0 0;
5904 +}
5905 +
5906 +p.frm_reply_to_container {
5907 + margin: -4px 0 0;
5908 +}
5909 +
5655 5910 .frm_email_row .frm_cancel1_icon:before {
5656 5911 vertical-align: bottom;
5657 5912 }
5658 5913
@@ -5692,8 +5947,24 @@
5692 5947 .frm-single-settings ul.frm_sortable_field_opts {
5693 5948 margin-bottom: 5px;
5694 5949 }
5695 5950
5951 +.frm-single-settings .frm_add_opt_container svg.frm_add_tag,
5952 +.frm-single-settings .frm-add-other svg.frm_add_tag {
5953 + position: relative;
5954 + top: 5px;
5955 + margin-right: 4px;
5956 +}
5957 +
5958 +.frm-single-settings .frm_single_option .frm_remove_tag {
5959 + position: relative;
5960 + bottom: 3px;
5961 +}
5962 +
5963 +.frm-single-settings .frm_single_option .frm_remove_tag:before {
5964 + content: "";
5965 +}
5966 +
5696 5967 .advanced_settings .frm_logic_row {
5697 5968 margin: 14px 0;
5698 5969 }
5699 5970
@@ -5811,8 +6082,16 @@
5811 6082 font-size: 13px;
5812 6083 vertical-align: top;
5813 6084 }
5814 6085
6086 +.frm_help svg {
6087 + height: 13px;
6088 + width: 13px;
6089 + vertical-align: top;
6090 + color: #A0A0A0;
6091 + color: var(--grey);
6092 +}
6093 +
5815 6094 .form-field input[type=text].frm_other_input {
5816 6095 width: 30%;
5817 6096 margin-left: 10px;
5818 6097 }
@@ -5935,8 +6214,13 @@
5935 6214 line-height: 23px;
5936 6215 text-align: start;
5937 6216 }
5938 6217
6218 +.frm_form_action_settings .frm_email_row .frm_remove_field svg {
6219 + position: relative;
6220 + bottom: 2px;
6221 +}
6222 +
5939 6223 /* Entries Page */
5940 6224 .frm_no_entries_form {
5941 6225 padding: 60px 0;
5942 6226 }
@@ -6034,9 +6318,8 @@
6034 6318 .frm_prepop li a:hover {
6035 6319 background: var(--sidebar-color);
6036 6320 }
6037 6321
6038 -/* */
6039 6322 #frm_form_editor_container #frm_form_key_box {
6040 6323 width: 13em;
6041 6324 max-width: 30%
6042 6325 }
@@ -6116,8 +6399,22 @@
6116 6399 .frm-has-fields #frm-show-fields {
6117 6400 min-height: 50px;
6118 6401 }
6119 6402
6403 +#frm_builder_page .frm-lite-credit-card-element,
6404 +body.frm-admin-page-styles .frm-lite-credit-card-element {
6405 + position: relative;
6406 +}
6407 +
6408 +#frm_builder_page .frm-lite-credit-card-element > div,
6409 +body.frm-admin-page-styles .frm-lite-credit-card-element > div {
6410 + position: absolute;
6411 + top: calc( 50% - 1px);
6412 + transform: translateY(-50%);
6413 + right: 10px;
6414 + color: #d0d4dd;
6415 +}
6416 +
6120 6417 #frm_builder_page #frm_field_group_controls {
6121 6418 position: absolute;
6122 6419 padding: 5px;
6123 6420 border-radius: 4px 4px 0 0;
@@ -6285,8 +6582,12 @@
6285 6582 .edit_field_type_summary .frm_more_options_li:nth-child(2) {
6286 6583 display: none !important;
6287 6584 }
6288 6585
6586 +.edit_field_type_submit .frm_more_options_li:not(:last-child) {
6587 + display: none !important;
6588 +}
6589 +
6289 6590 .frm_no_section_fields:not(.frm_block) + ul.start_divider {
6290 6591 padding: 0;
6291 6592 min-height: 132px;
6292 6593 }
@@ -6329,8 +6630,9 @@
6329 6630 }
6330 6631
6331 6632 .frm-section-collapsed .divider_section_only:hover:after,
6332 6633 li.selected.frm-section-collapsed .divider_section_only:before,
6634 +li.selected.frm-section-collapsed .divider_section_only:after,
6333 6635 .divider_section_only:hover:before,
6334 6636 li.selected .divider_section_only:before {
6335 6637 border-color: transparent;
6336 6638 }
@@ -6364,10 +6666,10 @@
6364 6666 }
6365 6667
6366 6668 #frm_builder_page .frm_remove_form_row .frmsvg,
6367 6669 #frm_builder_page .frm_remove_form_row i:before,
6368 -.frm_wrap .frm_add_form_row .frmsvg,
6369 -.frm_add_form_row i:before {
6670 +#frm_builder_page .frm_add_form_row .frmsvg,
6671 +#frm_builder_page .frm_add_form_row i:before {
6370 6672 color: var(--primary-700);
6371 6673 }
6372 6674
6373 6675 .frm-preview-buttons .frm_button_submit {
@@ -6385,11 +6687,8 @@
6385 6687 .frm-page-break:before,
6386 6688 .frm-page-break:after {
6387 6689 content: '';
6388 6690 position: absolute;
6389 - top: -4px;
6390 - width: 4px;
6391 - height: 4px;
6392 6691 background-color: #fff;
6393 6692 border-radius: 50%;
6394 6693 border: 1px solid var(--primary-700);
6395 6694 text-rendering: auto;
@@ -6395,23 +6694,11 @@
6395 6694 text-rendering: auto;
6396 6695 -webkit-font-smoothing: antialiased;
6397 6696 }
6398 6697
6399 -.frm-page-break:after {
6400 - right: 0;
6401 -}
6402 -
6403 -#frm-fake-page {
6404 - padding: 0 5px;
6405 -}
6406 -
6407 -#frm-fake-page .frm-page-break,
6408 -#frm-fake-page .frm-page-break:before,
6409 -#frm-fake-page .frm-page-break:after {
6410 - border-color: var(--grey);
6411 -}
6412 -
6413 6698 .edit_field_type_divider:before {
6699 + font-family: 's11-fp';
6700 + content: '\f1dc';
6414 6701 width: 20px;
6415 6702 height: 20px;
6416 6703 left: -11px;
6417 6704 top: 0;
@@ -6420,13 +6707,8 @@
6420 6707 color: #fff;
6421 6708 font-size: 13px;
6422 6709 }
6423 6710
6424 -.edit_field_type_divider:before{
6425 - font-family: 's11-fp';
6426 - content: '\f1dc';
6427 -}
6428 -
6429 6711 .repeat_section.edit_field_type_divider:before {
6430 6712 font-family: 's11-fp';
6431 6713 content: '\f363';
6432 6714 }
@@ -6431,15 +6713,35 @@
6431 6713 content: '\f363';
6432 6714 }
6433 6715
6434 6716 .edit_field_type_divider:after {
6717 + width: 5px;
6718 + height: 5px;
6435 6719 left: -4px;
6436 - bottom: 0;
6437 - top: auto;
6720 + bottom: -4px;
6438 6721 transition: all 0.4s ease-out;
6439 6722 }
6440 6723
6724 +.frm-page-break:before,
6725 +.frm-page-break:after {
6726 + width: 8px;
6727 + height: 8px;
6728 + top: -6px;
6729 + border-color: var(--grey);
6730 +}
6441 6731
6732 +.frm-page-break:after {
6733 + right: 0;
6734 +}
6735 +
6736 +#frm-fake-page .frm-page-break {
6737 + border-color: var(--grey);
6738 +}
6739 +
6740 +#frm-fake-page {
6741 + padding: 0 5px;
6742 +}
6743 +
6442 6744 .frm_sorting li.edit_field_type_divider:hover,
6443 6745 .frm_sorting li.edit_field_type_divider.selected {
6444 6746 border-left-color: var(--primary-500);
6445 6747 }
@@ -6461,9 +6763,10 @@
6461 6763 }
6462 6764
6463 6765 .frm-page-break .frm-collapse-page.button {
6464 6766 margin-left: 46%;
6465 - margin-top: calc( -28px / 2 );
6767 + margin-top: calc( -32px / 2 );
6768 + padding: 6px 12px !important;
6466 6769 }
6467 6770
6468 6771 #frm-fake-page.frm-page-collapsed {
6469 6772 margin-bottom: 0;
@@ -6474,20 +6777,8 @@
6474 6777 overflow: visible !important;
6475 6778 margin-bottom: var(--gap-lg);
6476 6779 }
6477 6780
6478 -.frm-page-collapsed:after {
6479 - content: '';
6480 - display: block;
6481 - border: 1px dashed var(--grey-300);
6482 - border-left: none;
6483 - border-right: none;
6484 - height: 6px;
6485 - position: absolute;
6486 - width: calc( 100% - 10px );
6487 - bottom: -15px;
6488 -}
6489 -
6490 6781 .frm-collapse-page .frmsvg,
6491 6782 .frm-collapse-page .frm_arrowdown6_icon {
6492 6783 width: var(--text-sm);
6493 6784 height: var(--text-sm);
@@ -6494,26 +6785,47 @@
6494 6785 font-size: var(--text-sm);
6495 6786 text-align: center;
6496 6787 margin-left: 2px;
6497 6788 color: currentColor;
6789 + transition: transform 300ms ease-in-out;
6498 6790 }
6499 6791
6792 +.frm-page-collapsed .frm-collapse-page .frmsvg {
6793 + transform: rotate(180deg);
6794 +}
6795 +
6500 6796 #frm-fake-page .frm_arrowdown6_icon {
6501 6797 color: currentColor;
6502 6798 }
6503 6799
6504 6800 .frm-collapsed i:before,
6505 -.frm-section-collapsed .frm_arrowdown6_icon:before,
6506 6801 .frm-page-collapsed .frm_arrowdown6_icon:before {
6507 6802 content: '\e913';
6508 6803 }
6509 6804
6510 -.open .widget-top .frm_arrow_right_icon:before {
6511 - content: '\e62a';
6805 +.frm-collapse-section svg {
6806 + fill: var(--primary-color);
6807 + transition: transform 0.2s ease-out, fill 0.2s ease-out;
6512 6808 }
6513 6809
6810 +.frm-collapse-section:hover svg {
6811 + fill: var(--primary-700);
6812 +}
6813 +
6814 +.frm-section-collapsed .frm-collapse-section svg {
6815 + transform: rotate(-90deg);
6816 +}
6817 +
6818 +.open .widget-top .widget-title-action button .frmsvg {
6819 + transform: rotate(90deg);
6820 +}
6821 +
6822 +.widget-top .widget-title-action button .frmsvg use {
6823 + color: var(--grey);
6824 +}
6825 +
6514 6826 .frm-collapsed + .frm-collapse-me {
6515 - overflow: hidden !important;
6827 + overflow: hidden !important;
6516 6828 }
6517 6829
6518 6830 .frm-collapse-me {
6519 6831 padding-bottom: 10px;
@@ -6554,9 +6866,9 @@
6554 6866 box-sizing: border-box;
6555 6867 border: 1px dashed var(--grey-300);
6556 6868 }
6557 6869
6558 -.ui-droppable-active ~ .frm_no_fields {
6870 +.frm-over-droppable + .frm_no_fields {
6559 6871 border-style: solid;
6560 6872 }
6561 6873
6562 6874 .frm_no_section_fields {
@@ -6574,8 +6886,16 @@
6574 6886 width: 90%;
6575 6887 top: 0;
6576 6888 }
6577 6889
6890 +.frm-empty-fields .frm_updated_message ~ .frm_no_fields {
6891 + top: 60px;
6892 +}
6893 +
6894 +#frm_form_editor_container:not(.frm-has-fields) #frm-show-fields > .frm_field_box:last-child {
6895 + visibility: hidden;
6896 +}
6897 +
6578 6898 .frm-has-fields .frm_no_fields {
6579 6899 display: none;
6580 6900 }
6581 6901
@@ -6647,14 +6967,8 @@
6647 6967 .frm_prod_options_heading.frm_prod_user_def {
6648 6968 display: none;
6649 6969 }
6650 6970
6651 -#frm-preview-block {
6652 - height: 400px;
6653 - overflow: scroll;
6654 - margin: 0;
6655 -}
6656 -
6657 6971 .plugin-card-bottom .frm-trash {
6658 6972 color: #a00;
6659 6973 }
6660 6974
@@ -6660,10 +6974,10 @@
6660 6974
6661 6975 .frm-fields p > .frm_inline_label,
6662 6976 .frm_inline_label {
6663 6977 padding-left: 3px;
6664 - margin-right: 12px;
6665 - display: inline-block;
6978 + margin-right: 12px;
6979 + display: inline-block;
6666 6980 }
6667 6981
6668 6982 .frm_left_label {
6669 6983 clear: both;
@@ -6736,31 +7050,8 @@
6736 7050 border-left: none;
6737 7051 border-right: none;
6738 7052 }
6739 7053
6740 -.postbox .frm-help-tabs.inside,
6741 -#poststuff .frm-help-tabs.inside {
6742 - padding-left: 0;
6743 - padding-right: 0;
6744 - padding-bottom: 12px;
6745 - margin-top: 0;
6746 - margin-bottom: 0;
6747 -}
6748 -
6749 -.postbox .frm-help-tabs.inside {
6750 - padding-bottom: inherit;
6751 -}
6752 -
6753 -.frm-help-tabs form > .submit {
6754 - margin-left: 154px;
6755 - padding-left: 0.9em;
6756 -}
6757 -
6758 -#poststuff h3.frm_no_bg {
6759 - background: none;
6760 - cursor: default;
6761 -}
6762 -
6763 7054 .frm-postbox-no-h3 {
6764 7055 padding-top: 10px;
6765 7056 }
6766 7057
@@ -6933,9 +7224,9 @@
6933 7224 .frm_form_settings .frm-with-right-icon .frmsvg {
6934 7225 top: 0;
6935 7226 }
6936 7227
6937 -.frm_form_settings .wp-editor-container .frm-with-right-icon .frmsvg {
7228 +.frm_form_settings .wp-editor-container .frm-with-right-icon .frmsvg, #frm_builder_page .wp-editor-container .frm-with-right-icon .frmsvg {
6938 7229 top: auto;
6939 7230 bottom: 0;
6940 7231 }
6941 7232
@@ -6988,26 +7279,33 @@
6988 7279 #frm-show-fields .frm-with-left-icon i {
6989 7280 padding-top: 10px;
6990 7281 }
6991 7282
7283 +.frm-search .frm_search_icon {
7284 + padding-left: 18px !important;
7285 + padding-right: 12px !important;
7286 +}
7287 +
6992 7288 .frm-search input[name="s"],
6993 7289 .frm-search .dropdown-toggle,
6994 7290 .frm-search input.frm-search-input {
6995 7291 border-radius: var(--small-radius);
6996 - padding-left: 33px !important;
6997 7292 border-color: var(--grey-300);
6998 7293 }
6999 7294
7000 -.frm_wrap .frm-search .frm-search-input,
7001 -.frm-modal .frm-search .frm-search-input,
7002 7295 .frm-white-body .search-box input[name="s"], /* Views search */
7003 -.frm_wrap .frm-search input[name="s"] {
7004 - padding-top: 3px;
7005 - padding-bottom: 3px;
7296 +#wpwrap .frm-search input[type="search"] {
7006 7297 flex: 1;
7007 7298 font-size: var(--text-sm);
7299 + line-height: var(--text-lg);
7300 + padding: var(--gap-xs);
7008 7301 }
7009 7302
7303 +.frm-search input[type="search"],
7304 +.frm-search input[type="text"] {
7305 + padding-left: var(--gap-xl) !important;
7306 +}
7307 +
7010 7308 .frm-search .dropdown-toggle {
7011 7309 width: 100%;
7012 7310 float: none;
7013 7311 max-width: 200px;
@@ -7012,8 +7310,9 @@
7012 7310 float: none;
7013 7311 max-width: 200px;
7014 7312 background: transparent;
7015 7313 padding: 7px;
7314 + padding-left: 33px !important;
7016 7315 min-height: 32px;
7017 7316 text-align: inherit;
7018 7317 overflow: hidden;
7019 7318 text-overflow: ellipsis;
@@ -7148,9 +7447,9 @@
7148 7447 margin-bottom: 0;
7149 7448 }
7150 7449
7151 7450 .post-type-frm_display #side-sortables .misc-pub-section {
7152 - padding: 15px 20px 10px;
7451 + padding: 15px 20px 10px;
7153 7452 }
7154 7453
7155 7454 .post-type-frm_display .misc-pub-section .frmsvg,
7156 7455 .post-type-frm_display #post-body .misc-pub-post-status:before,
@@ -7255,16 +7554,16 @@
7255 7554 ul .frm_col_two {
7256 7555 float: right;
7257 7556 }
7258 7557
7259 -.frm_two_col li {
7260 - float: left;
7261 - width: 48%;
7262 - margin-right: 4%;
7558 +ul.frm_two_col {
7559 + display: grid;
7560 + grid-template-columns: repeat(2, minmax(0, 1fr));
7561 + gap: var(--gap-sm);
7263 7562 }
7264 7563
7265 -.frm_two_col li:nth-child(2n+2) {
7266 - margin-right: 0;
7564 +.frm_two_col li {
7565 + margin-bottom: 0;
7267 7566 }
7268 7567
7269 7568 .frm-info-modal a,
7270 7569 .frm-info-modal ul,
@@ -7271,11 +7570,10 @@
7271 7570 .frm-info-modal p,
7272 7571 .frm-info-modal,
7273 7572 .settings-lite-cta a,
7274 7573 .settings-lite-cta ul,
7275 -.settings-lite-cta p,
7276 7574 .settings-lite-cta {
7277 - color: #666;
7575 + color: var(--grey-500);
7278 7576 font-size: var(--text-md);
7279 7577 box-shadow: none !important;
7280 7578 }
7281 7579
@@ -7289,9 +7587,9 @@
7289 7587 }
7290 7588
7291 7589 .frm-info-modal .postbox .inside,
7292 7590 .settings-lite-cta .postbox .inside {
7293 - padding: 20px 40px;
7591 + padding: var(--gap-md);
7294 7592 margin: 0;
7295 7593 }
7296 7594
7297 7595 .cta-inside a {
@@ -7339,17 +7637,21 @@
7339 7637 color: var(--grey-700);
7340 7638 padding: 5px 10px;
7341 7639 font-size: var(--text-md);
7342 7640 gap: var(--gap-xs);
7343 - align-items: center;
7641 + align-items: center;
7344 7642 }
7345 7643
7346 7644 .frm_code_list.frm-full-hover a span {
7347 7645 max-width: 83px;
7348 - text-align: right;
7646 + margin-right: var(--gap-xs);
7349 7647 margin-left: auto;
7350 7648 }
7351 7649
7650 +.frm-single-settings .frm_code_list.frm-full-hover a {
7651 + display: block;
7652 +}
7653 +
7352 7654 .frm_code_list.frm-full-hover a,
7353 7655 .frm_code_list.frm-full-hover a span {
7354 7656 white-space: nowrap;
7355 7657 overflow: hidden;
@@ -7535,8 +7837,14 @@
7535 7837 width: var(--text-md);
7536 7838 font-size: var(--text-md);
7537 7839 }
7538 7840
7841 +/* Standardize icon size for field buttons in the builder */
7842 +.field_type_list li.frmbutton .frmsvg {
7843 + width: var(--text-xl);
7844 + font-size: var(--text-xl);
7845 +}
7846 +
7539 7847 .frm_code_list i:before {
7540 7848 font-size: inherit;
7541 7849 }
7542 7850
@@ -7561,8 +7869,18 @@
7561 7869 padding: var(--gap-xs) var(--gap-sm) !important;
7562 7870 color: var(--grey-900) !important;
7563 7871 }
7564 7872
7873 +/* Adjust field button size to full width in builder */
7874 +#frm-insert-fields li a {
7875 + display: flex !important;
7876 +}
7877 +
7878 +/* Prevents advanced fields from always appearing in search results */
7879 +#frm-insert-fields li.frm_show_upgrade.frm_hidden {
7880 + display: none !important;
7881 +}
7882 +
7565 7883 .frmbutton.ui-draggable-dragging a {
7566 7884 border: 1px solid var(--grey-300);
7567 7885 box-shadow: var(--box-shadow-md);
7568 7886 }
@@ -7587,25 +7905,13 @@
7587 7905 transition: opacity .2s;
7588 7906 opacity: 1;
7589 7907 }
7590 7908
7591 -.frm-field-group-count {
7592 - background-color: var(--sidebar-hover);
7593 - padding: 5px;
7594 - color: #fff !important;
7595 - border-radius: 10px;
7596 -}
7597 -
7598 7909 /* End dragging */
7599 7910
7600 -.field_type_list .frm_icon_font:before {
7601 - font-size: 20px;
7602 -}
7603 -
7604 7911 li.frm_noallow.button,
7605 7912 .frm_noallow {
7606 7913 opacity: .5;
7607 - filter: alpha(opacity=50);
7608 7914 }
7609 7915
7610 7916 .frm_actions_list a.frm_show_upgrade.frm_inactive_action:before,
7611 7917 li.frm_noallow.button.frm_show_upgrade {
@@ -7622,9 +7928,12 @@
7622 7928
7623 7929 #frm_upgrade_modal_image {
7624 7930 max-width: 200px;
7625 7931 }
7626 -
7932 +#frm_upgrade_modal .frm-upgrade-message img {
7933 + margin-top: 10px;
7934 + width: 100%;
7935 +}
7627 7936 .frm-tab-message {
7628 7937 max-width: 600px;
7629 7938 margin: 20px auto;
7630 7939 color: rgba(63, 75, 91, 0.8);
@@ -7712,9 +8021,10 @@
7712 8021 }
7713 8022
7714 8023 .frm-views-editor-body .ui-widget-overlay,
7715 8024 .frm-white-body .ui-widget-overlay,
7716 -.toplevel_page_formidable .ui-widget-overlay {
8025 +.toplevel_page_formidable .ui-widget-overlay,
8026 +body[class*=formidable-payments] .ui-widget-overlay {
7717 8027 position: fixed;
7718 8028 width: 100%;
7719 8029 height: 100%;
7720 8030 top: 0;
@@ -7725,21 +8035,41 @@
7725 8035 opacity: .5;
7726 8036 z-index: 2;
7727 8037 }
7728 8038
7729 -#frm_upgrade_modal {
7730 - text-align: center;
8039 +.frm-circled-icon {
8040 + width: 60px;
8041 + height: 60px;
8042 + border-radius: 50%;
8043 + background-color: var(--primary-25);
7731 8044 }
7732 8045
7733 -#frm_upgrade_modal .frm_lock_icon {
7734 - display: block;
7735 - margin: 0 auto;
7736 - height: 35px;
7737 - width: 35px;
7738 - color: #c4c4c4;
7739 - padding-bottom: 20px;
8046 +.frm-circled-icon-large {
8047 + width: 80px;
8048 + height: 80px;
7740 8049 }
7741 8050
8051 +.frm-circled-icon-green {
8052 + background-color: var(--success-50);
8053 +}
8054 +
8055 +.frm-circled-icon .frmsvg {
8056 + width: 21px;
8057 + height: 24px;
8058 +}
8059 +
8060 +.frm-circled-icon-large .frmsvg {
8061 + width: 24px;
8062 +}
8063 +
8064 +.frm-circled-icon .frmsvg use {
8065 + color: var(--primary-500);
8066 + }
8067 +
8068 +.frm-circled-icon-green .frmsvg use {
8069 + color: var(--success-500);
8070 +}
8071 +
7742 8072 .frm-upgrade-message img {
7743 8073 max-width: 100%;
7744 8074 }
7745 8075
@@ -7967,8 +8297,9 @@
7967 8297 .frm-white-body .wrap input[type="text"], /* Cover Views pages */
7968 8298 .frm-white-body .wrap input[type="search"],
7969 8299 .frm-white-body .wrap input[type="number"],
7970 8300 .frm-white-body .wrap select,
8301 +#frm-form-templates-modal select,
7971 8302 .frm-white-body .wrap textarea,
7972 8303 button.frm_choose_image_box,
7973 8304 #titlediv input[type="text"],
7974 8305 .frm-fields button.btn,
@@ -7974,8 +8305,9 @@
7974 8305 .frm-fields button.btn,
7975 8306 .frm_wrap textarea,
7976 8307 .frm_wrap input[type="tel"],
7977 8308 .frm_wrap input[type="text"],
8309 +.frm_wrap input[type="email"]
7978 8310 .frm_wrap input[type=search],
7979 8311 .frm_wrap input[type="number"],
7980 8312 .frm_wrap input[type="date"],
7981 8313 .frm_wrap select,
@@ -7981,9 +8313,10 @@
7981 8313 .frm_wrap select,
7982 8314 .wp-admin .frm_wrap select,
7983 8315 .field-group textarea,
7984 8316 .field-group input[type="text"],
7985 -.field-group select {
8317 +.field-group select,
8318 +.frm-fields .frm-input-field {
7986 8319 outline: 0;
7987 8320 box-shadow: none;
7988 8321 border-radius: var(--small-radius);
7989 8322 padding: 5px 14px;
@@ -7995,9 +8328,9 @@
7995 8328 line-height: var(--leading);
7996 8329 }
7997 8330
7998 8331 .frm_wrap ::-webkit-datetime-edit {
7999 - line-height: var(--leading);
8332 + line-height: var(--leading);
8000 8333 }
8001 8334
8002 8335 .frm-white-body textarea:focus,
8003 8336 .frm-white-body input:focus,
@@ -8004,8 +8337,9 @@
8004 8337 .frm-white-body select:focus,
8005 8338 .frm_wrap input:focus,
8006 8339 .frm_wrap select:focus,
8007 8340 .wp-core-ui .frm_wrap select:focus,
8341 +#frm-form-templates-modal select:focus,
8008 8342 .frm-btn-group .multiselect.dropdown-toggle:focus,
8009 8343 .frm_wrap textarea:focus {
8010 8344 border-color: var(--primary-500) !important;
8011 8345 box-shadow: none !important;
@@ -8024,9 +8358,10 @@
8024 8358 .frm_wrap select {
8025 8359 padding: 2px;
8026 8360 }
8027 8361
8028 -.wp-admin .frm_wrap select {
8362 +.wp-admin .frm_wrap select,
8363 +#frm-form-templates-modal select {
8029 8364 max-width: 100%;
8030 8365 }
8031 8366
8032 8367 .frm_form_field.frm_scroll_box .frm_opt_container {
@@ -8042,8 +8377,13 @@
8042 8377 .frm_wrap input::placeholder {
8043 8378 color: var(--grey-500);
8044 8379 }
8045 8380
8381 +.frm_wrap .frm-button-primary.frm-disabled {
8382 + opacity: 0.5;
8383 + cursor: default;
8384 +}
8385 +
8046 8386 #postcustomstuff table td > div {
8047 8387 /* To override some inline css in add-on */
8048 8388 padding-top: 0 !important;
8049 8389 }
@@ -8059,9 +8399,10 @@
8059 8399 }
8060 8400
8061 8401 #postbox-container-2 select,
8062 8402 .wp-admin .frm_wrap select,
8063 -.frm_wrap .frm_form_builder select {
8403 +.frm_wrap .frm_form_builder select,
8404 +#frm-form-templates-modal select {
8064 8405 height: auto;
8065 8406 background-position: right 11px top 55%;
8066 8407 }
8067 8408
@@ -8075,9 +8416,9 @@
8075 8416 line-height: 1;
8076 8417 }
8077 8418
8078 8419 .frm_wrap .tablenav ::-webkit-datetime-edit {
8079 - line-height: 1;
8420 + line-height: 1;
8080 8421 }
8081 8422
8082 8423 .frm-fields button.btn,
8083 8424 .frm-fields textarea,
@@ -8085,9 +8426,10 @@
8085 8426 .frm-fields select,
8086 8427 .field-group textarea,
8087 8428 .field-group input[type="text"],
8088 8429 .field-group select,
8089 -.accordion-container input.hex {
8430 +.accordion-container input.hex,
8431 +.frm-fields .frm-input-field {
8090 8432 width: 100%;
8091 8433 outline: 0;
8092 8434 }
8093 8435
@@ -8106,11 +8448,11 @@
8106 8448 margin: 0 !important;
8107 8449 }
8108 8450
8109 8451 .frm_images_dropdown .frm_radio input[type=radio] {
8110 - opacity: 0;
8111 - position: absolute;
8112 - z-index: -1;
8452 + opacity: 0;
8453 + position: absolute;
8454 + z-index: -1;
8113 8455 }
8114 8456
8115 8457 .frm_images_dropdown__image .frmsvg {
8116 8458 width: 100%;
@@ -8174,8 +8516,42 @@
8174 8516 .windows ::-webkit-scrollbar-corner {
8175 8517 background: transparent;
8176 8518 }
8177 8519
8520 +.frm-scrollbar-wrapper {
8521 + overflow-x: hidden;
8522 + overflow-y: auto; /* Enable scrolling */
8523 + -ms-overflow-style: none; /* For IE and Edge */
8524 + scrollbar-color: transparent transparent; /* Firefox Scrollbar - transparent by default and show on hover */
8525 + scrollbar-width: thin;
8526 +}
8527 +
8528 +.frm-scrollbar-wrapper:hover {
8529 + scrollbar-color: var(--grey-300) var(--sidebar-color); /* Firefox Scrollbar - Show on hover */
8530 +}
8531 +
8532 +.frm-scrollbar-wrapper::-webkit-scrollbar {
8533 + width: 3px;
8534 +}
8535 +
8536 +.frm-scrollbar-wrapper::-webkit-scrollbar-track {
8537 + background: var(--sidebar-color);
8538 +}
8539 +
8540 +.frm-scrollbar-wrapper::-webkit-scrollbar-thumb {
8541 + background: transparent;
8542 + border-radius: 100vw;
8543 +}
8544 +
8545 +.frm-scrollbar-wrapper:hover::-webkit-scrollbar-thumb {
8546 + background: var(--grey-300); /* Show scrollbar on hover */
8547 +}
8548 +
8549 +.frm-scrollbar-wrapper::-webkit-scrollbar-thumb:hover {
8550 + background: var(--grey-400); /* Show scrollbar on hover */
8551 +}
8552 +/* End scrollbar */
8553 +
8178 8554 /* RTL */
8179 8555 .rtl h3 {
8180 8556 font-weight: inherit !important;
8181 8557 }
@@ -8252,10 +8628,10 @@
8252 8628 right: auto;
8253 8629 left: 5px;
8254 8630 }
8255 8631
8256 -.rtl .frm_reply_to_container,
8257 -.rtl .frm_bcc_cc_container {
8632 +.rtl p.frm_reply_to_container,
8633 +.rtl p.frm_bcc_cc_container {
8258 8634 float: left;
8259 8635 }
8260 8636
8261 8637 .rtl .frm-default-switcher {
@@ -8278,8 +8654,12 @@
8278 8654 padding-right: 5px !important;
8279 8655 background-position: left 11px top 55%;
8280 8656 }
8281 8657
8658 +.rtl .frm_code_list.frm-full-hover a span {
8659 + margin-left: var(--gap-xs);
8660 +}
8661 +
8282 8662 /* ---------------------------------------------------------------
8283 8663 Clearfix
8284 8664 --------------------------------------------------------------- */
8285 8665 span.clear {
@@ -8358,8 +8738,13 @@
8358 8738 p.howto {
8359 8739 display: inline-block;
8360 8740 }
8361 8741
8742 + /* Fix: Issue where the admin page content had extra white space to the left on small screens */
8743 + .auto-fold.frm-admin-page-styles:not(.frm-full-screen) .frm_page_container,
8744 + .auto-fold:not(.frm-full-screen) .frm_wrap .frm_page_container {
8745 + left: 36px;
8746 + }
8362 8747 }
8363 8748
8364 8749 @media only screen and (max-width: 850px) {
8365 8750 #frm_bs_dropdown {
@@ -8599,8 +8984,15 @@
8599 8984
8600 8985 #wp-content-media-buttons a.frm_insert_form {
8601 8986 padding: 0 var(--gap-sm);
8602 8987 }
8988 +
8989 + .frm-white-body input[type="checkbox"]:checked::before,
8990 + .frm_wrap input[type="checkbox"]:checked::before {
8991 + width: 1.2rem;
8992 + height: 1.2rem;
8993 + margin: 0.125rem;
8994 + }
8603 8995 }
8604 8996
8605 8997 @media only screen and (max-width: 700px) {
8606 8998 .frm-white-body,
@@ -8835,9 +9227,9 @@
8835 9227 position: absolute;
8836 9228 top: 0;
8837 9229 right: 0;
8838 9230 width: 366px;
8839 - height: 231px;
9231 + max-height: 231px;
8840 9232 border-radius: 8px;
8841 9233 background: #fff;
8842 9234 box-shadow: 0px 20px 48px rgba(40, 47, 54, 0.15);
8843 9235 z-index: 3;
@@ -8855,8 +9247,23 @@
8855 9247 bottom: 50px;
8856 9248 height: 196px;
8857 9249 }
8858 9250
9251 +#frm_field_group_popup > hr {
9252 + margin: 12px 0;
9253 +}
9254 +
9255 +#frm_field_group_popup .frm-cancel-custom-field-group-layout,
9256 +#frm_field_group_popup .frm-save-custom-field-group-layout {
9257 + padding: 4px 18px;
9258 +}
9259 +
9260 +#frm_field_group_popup .frm-cancel-custom-field-group-layout:hover {
9261 + border-color: var(--primary-500) !important;
9262 + color: var(--primary-500);
9263 + background-color: transparent !important;
9264 +}
9265 +
8859 9266 .frm-merge-fields-into-row #frm_field_group_popup .frm-break-field-group {
8860 9267 display: none;
8861 9268 }
8862 9269
@@ -8871,9 +9278,9 @@
8871 9278 font-size: 11px;
8872 9279 line-height: 15px;
8873 9280 text-transform: uppercase;
8874 9281 color: rgba(40, 47, 54, 0.45);
8875 - margin-bottom: 40px;
9282 + margin-bottom: 27px;
8876 9283 }
8877 9284
8878 9285 .frm-row-layout-option {
8879 9286 background: #F6F7FB;
@@ -8878,9 +9285,9 @@
8878 9285 .frm-row-layout-option {
8879 9286 background: #F6F7FB;
8880 9287 box-sizing: border-box;
8881 9288 border-radius: 2px;
8882 - padding: 18px 11px;
9289 + padding: 15px 10px;
8883 9290 }
8884 9291
8885 9292 #frm_field_group_popup .frm-row-layout-option .frm_grid_container {
8886 9293 grid-gap: 0 5%;
@@ -8888,22 +9295,23 @@
8888 9295 }
8889 9296
8890 9297 #frm_field_group_popup .frm-row-layout-option {
8891 9298 cursor: pointer;
9299 + border: 2px solid transparent;
8892 9300 }
8893 9301
8894 9302 #frm_field_group_popup .frm-row-layout-option.frm-active-row-layout,
8895 9303 #frm_field_group_popup .frm-row-layout-option:hover {
8896 - outline: 1px solid var(--primary-500);
9304 + border-color: var(--primary-500);
8897 9305 }
8898 9306
8899 9307 .frm-custom-field-group-layout,
8900 9308 .frm-break-field-group {
8901 - padding: 5px 15px;
9309 + padding: 4px 24px;
8902 9310 cursor: pointer;
8903 9311 font-size: var(--text-sm);
8904 9312 line-height: 19px;
8905 - color: rgba(40, 47, 54, 0.85);
9313 + color: rgba(72, 78, 84, 1);
8906 9314 }
8907 9315
8908 9316 .frm-custom-field-group-layout:hover,
8909 9317 .frm-break-field-group:hover {
@@ -8948,12 +9356,13 @@
8948 9356 }
8949 9357
8950 9358 .frm-builder-popup-heading {
8951 9359 font-weight: 600;
8952 - font-size: 12px;
9360 + font-size: 11px;
8953 9361 line-height: 15px;
8954 9362 text-transform: uppercase;
8955 9363 color: rgba(40, 47, 54, 0.45);
9364 + margin-bottom: 7px;
8956 9365 }
8957 9366
8958 9367 .frm-builder-popup-subheading {
8959 9368 font-size: 12px;
@@ -8960,8 +9369,17 @@
8960 9369 line-height: 16px;
8961 9370 color: rgba(40, 47, 54, 0.45);
8962 9371 }
8963 9372
9373 +#frm_field_group_popup input[type="text"] {
9374 + height: 30px;
9375 + border-radius: 3px;
9376 + font-size: 14px;
9377 + padding: 8px;
9378 + color: rgba(84, 95, 110, 1);
9379 + border-color: rgba(40, 47, 54, 0.2);
9380 +}
9381 +
8964 9382 .frm-multiselect-popup-separator {
8965 9383 height: 36px;
8966 9384 width: 1px;
8967 9385 position: relative;
@@ -9002,8 +9420,12 @@
9002 9420 .frm-banner-cta a {
9003 9421 text-decoration: underline !important;
9004 9422 }
9005 9423
9424 +#frm_banner .frm-banner-cta a.frm_inbox_dismiss {
9425 + display: none;
9426 +}
9427 +
9006 9428 .frm-banner-dismiss {
9007 9429 cursor: pointer;
9008 9430 position: absolute;
9009 9431 right: 10px;
@@ -9018,43 +9440,16 @@
9018 9440 .frm-ready-made-solution:not(.frm-search-result) {
9019 9441 display: none !important;
9020 9442 }
9021 9443
9022 -#frm_new_form_modal .frm-ready-made-solution {
9023 - padding: var(--gap-xs) !important;
9024 - margin: var(--gap-xs) 0 var(--gap-sm);
9025 - display: flex;
9026 - gap: var(--gap-sm);
9027 - position: relative;
9028 - overflow: visible !important;
9444 +#frm_leave_email_wrapper .frmsvg {
9445 + top: 0;
9029 9446 }
9030 9447
9031 -#frm_new_form_modal .frm-ready-made-solution:after {
9032 - width: 100%;
9033 - height: 1px;
9034 - background: var(--grey-300);
9035 - content: '';
9036 - position: absolute;
9037 - bottom: -10px;
9038 - left: 0;
9448 +#frm-add-my-email-address {
9449 + margin-top: 30px;
9039 9450 }
9040 9451
9041 -#frm_new_form_modal .frm-ready-made-solution.frm-search-result:last-of-type::after {
9042 - content: none;
9043 -}
9044 -
9045 -#frm_new_form_modal .frm-solution-details {
9046 - flex: 1;
9047 - display: flex;
9048 - gap: var(--gap-2xs);
9049 - flex-direction: column;
9050 -}
9051 -
9052 -#frm_new_form_modal .frm-ready-made-solution > div:first-child {
9053 - width: 30%;
9054 - text-align: center;
9055 -}
9056 -
9057 9452 .frm-ready-made-solution h3 ~ a {
9058 9453 color: var(--primary-500);
9059 9454 }
9060 9455
@@ -9084,10 +9479,10 @@
9084 9479 }
9085 9480
9086 9481 .frm_on_submit_type input {
9087 9482 opacity: 0 !important;
9088 - position: absolute;
9089 - z-index: -1;
9483 + position: absolute;
9484 + z-index: -1;
9090 9485 }
9091 9486
9092 9487 .frm_on_submit_type input[type="radio"]:checked + label {
9093 9488 border-color: var(--primary-color);
@@ -9098,4 +9493,306 @@
9098 9493 .frm_on_submit_type input[type="radio"]:checked + label svg {
9099 9494 color: var(--primary-color);
9100 9495 }
9101 9496 /* End On Submit action */
9497 +
9498 +/* Start call-to-action */
9499 +.frm_pro_tip,
9500 +.frm-cta {
9501 + justify-content: space-between;
9502 + align-items: center;
9503 + gap: var(--gap-2xl);
9504 + padding: var(--gap-xs) var(--gap-sm);
9505 + border-radius: var(--small-radius);
9506 + background: var(--primary-25);
9507 +}
9508 +
9509 +.frm-cta.frm-cta-border {
9510 + border: 1px solid var(--primary-200);
9511 +}
9512 +
9513 +.frm-cta h4 {
9514 + font-weight: 600;
9515 + margin: 0;
9516 +}
9517 +
9518 +.frm-cta-green {
9519 + background-color: var(--success-25);
9520 +}
9521 +
9522 +.frm-cta-green .frm-banner-title {
9523 + gap: calc(var(--gap-2xs) + 1px);
9524 + color: var(--grey-700);
9525 +}
9526 +
9527 +.frm-cta-green.frm-cta-border {
9528 + border-color: var(--success-100)
9529 +}
9530 +
9531 +.frm-right-panel .inside .frm_pro_tip,
9532 +.frm_pro_tip {
9533 + color: var(--grey-700);
9534 + background: #FFE7DE;
9535 + margin: 0 auto;
9536 + display: flex;
9537 + gap: var(--gap-xs);
9538 +}
9539 +
9540 +.frm_field_list .frm_pro_tip {
9541 + margin: 10px 15px;
9542 + position: relative;
9543 + width: calc(100% - 30px);
9544 + box-sizing: border-box;
9545 +}
9546 +
9547 +.frm_pro_tip .frmsvg,
9548 +.frm_pro_tip i {
9549 + color: var(--orange);
9550 +}
9551 +
9552 +.frm-tip-info {
9553 + flex: 1;
9554 + text-align: left;
9555 +}
9556 +
9557 +.frm-tip-cta {
9558 + color: var(--orange);
9559 +}
9560 +
9561 +.frm-light-tip .frm_pro_tip {
9562 + background: var(--primary-25);
9563 +}
9564 +
9565 +.frm-light-tip .frm_pro_tip .frmsvg,
9566 +.frm-light-tip .frm_pro_tip i,
9567 +.frm-light-tip .frm-tip-cta {
9568 + color: var(--primary-500);
9569 +}
9570 +
9571 +.frm-tip-cta:hover {
9572 + color: var(--primary-500);
9573 +}
9574 +
9575 +.nav-tab-wrapper .frm_pro_tip {
9576 + float: right;
9577 +}
9578 +/* End call-to-action */
9579 +
9580 +/* Start confirm and form templates modals */
9581 +#frm-form-templates-modal textarea {
9582 + height: 108px;
9583 +}
9584 +
9585 +#frm-form-templates-modal .frm-fields button.btn {
9586 + border-color: var(--grey-300);
9587 + color: var(--grey-900);
9588 + cursor: pointer;
9589 +}
9590 +
9591 +#frm-form-templates-modal .frm-fields button.btn .frmsvg {
9592 + color: var(--grey-400);
9593 + width: 14px;
9594 + height: 14px;
9595 +}
9596 +
9597 +#frm-form-templates-modal .frm-form-templates-modal-fieldset {
9598 + position: relative;
9599 +}
9600 +
9601 +#frm-form-templates-modal .frm-form-templates-modal-fieldset .frm-with-left-icon .frmsvg {
9602 + padding: 0;
9603 + top: 0;
9604 + left: 13px;
9605 +}
9606 +
9607 +/* Fixes pro issue #3508, prevent a conflict that hides the postbox in modal */
9608 +#frm-form-templates-modal .postbox {
9609 + display: block !important;
9610 +}
9611 +
9612 +/* Leave email modal */
9613 +#frm_empty_inbox #frm-leave-email-modal {
9614 + margin-top: var(--gap-2xl);
9615 +}
9616 +
9617 +/* Name your form modal */
9618 +#frm-name-your-form-modal .frm_modal_top {
9619 + padding-top: var(--gap-sm);
9620 +}
9621 +/* End confirm and form templates modals */
9622 +
9623 +/* Field Group Message */
9624 +#frm-field-group-message {
9625 + position: absolute;
9626 + bottom: 32px;
9627 + right: calc(50% - var(--biggest-sidebar));
9628 + padding: var(--gap-xs) var(--gap-sm);
9629 + border-radius: 100px;
9630 + background-color: var(--primary-25);
9631 +}
9632 +
9633 +#frm-field-group-message .frm-field-group-message-text {
9634 + gap: 10px;
9635 + color: var(--grey-800);
9636 +}
9637 +
9638 +#frm-field-group-message-dismiss {
9639 + margin-left: var(--gap-xs)
9640 +}
9641 +
9642 +#frm-field-group-message-dismiss .frmsvg {
9643 + color: var(--grey-800);
9644 + width: 15px;
9645 + height: 15px;
9646 + cursor: pointer;
9647 + transition: color 300ms ease-in-out;
9648 +}
9649 +
9650 +#frm-field-group-message-dismiss .frmsvg:hover {
9651 + color: var(--grey-500);
9652 +}
9653 +/* End Field Group Message */
9654 +
9655 +/* Start card layout */
9656 +.frm-card-item {
9657 + display: flex;
9658 + border: 1px solid var(--grey-200);
9659 + border-radius: var(--small-radius);
9660 + padding: var(--gap-sm);
9661 + box-shadow: var(--box-shadow-xs);
9662 + background: #FFFFFF;
9663 +}
9664 +.frm-card-item:not(.frm-counter-card) {
9665 + gap: 10px;
9666 +}
9667 +.frm-compact-card-item {
9668 + padding: var(--gap-sm) 35px 10px 35px;
9669 +}
9670 +/* End card layout */
9671 +
9672 +/* Pirate forms importer */
9673 +#welcome-panel:has(#frm_form_pf_importer) {
9674 + background-color: #fff;
9675 + margin: var(--gap-sm) var(--gap-md) var(--gap-md);
9676 + line-height: 2;
9677 +}
9678 +
9679 +#welcome-panel:has(#frm_form_pf_importer) .welcome-panel-content {
9680 + text-align: start !important;
9681 + min-height: unset;
9682 + display: block;
9683 +}
9684 +
9685 +#frm_form_pf_importer div {
9686 + margin: 10px 0 !important;
9687 +}
9688 +
9689 +#frm_form_pf_importer button {
9690 + border: 1px solid var(--primary-500);
9691 + padding: 7px 16px;
9692 + min-height: 28px;
9693 + line-height: var(--leading);
9694 + margin-bottom: 0;
9695 + background: var(--primary-500);
9696 + color: #fff !important;
9697 +}
9698 +
9699 +#frm_form_pf_importer button:hover {
9700 + background: #135e96;
9701 + border-color: #135e96;
9702 +}
9703 +/* End Pirate forms importer */
9704 +
9705 +/* Start Option Box */
9706 +.frm-option-box {
9707 + display: flex;
9708 + justify-content: space-between;
9709 + align-items: center;
9710 + font-size: 14px;
9711 + font-weight: 500;
9712 + background-color: #fff;
9713 + padding: 12px var(--gap-sm);
9714 + border: 1px solid var(--grey-200);
9715 + border-radius: var(--small-radius);
9716 + margin-bottom: var(--gap-xs);
9717 + transition: background-color 100ms ease-out;
9718 + cursor: pointer;
9719 +}
9720 +
9721 +.frm-option-box:hover {
9722 + background-color: var(--grey-25);
9723 +}
9724 +
9725 +.frm-option-box.frm-checked {
9726 + background-color: var(--primary-25);
9727 + border-color: var(--primary-200);
9728 +}
9729 +
9730 +.frm-option-box.frm-disabled {
9731 + cursor: default;
9732 +}
9733 +
9734 +.frm-option-box input[type="checkbox"] {
9735 + margin: 0;
9736 +}
9737 +
9738 +.frm-option-box.frm-disabled input[type="checkbox"] {
9739 + opacity: 0.5;
9740 +}
9741 +
9742 +.frm-option-box .frm_help .frmsvg {
9743 + width: 12px;
9744 + height: 12px;
9745 +}
9746 +/* End Option Box */
9747 +
9748 +/* Start Validation Error */
9749 +.frm-validation-error:not(.frm_hidden) {
9750 + display: flex;
9751 +}
9752 +
9753 +.frm-validation-error {
9754 + gap: calc(var(--gap-xs) + var(--gap-2xs));
9755 +}
9756 +
9757 +.frm-validation-error span {
9758 + color: var(--error-500);
9759 +}
9760 +
9761 +.frm-validation-error span[frm-error] {
9762 + display: none;
9763 +}
9764 +
9765 +.frm-validation-error[frm-error="empty"] span[frm-error="empty"],
9766 +.frm-validation-error[frm-error="invalid"] span[frm-error="invalid"],
9767 +.frm-validation-error[frm-error="custom"] span[frm-error="custom"] {
9768 + display: inline-block;
9769 +}
9770 +
9771 +/* Start Box Styles */
9772 +.frm-box {
9773 + padding: var(--gap-sm);
9774 + border: 1px solid var(--grey-200);
9775 + border-radius: var(--small-radius);
9776 +}
9777 +/* End Box Styles */
9778 +
9779 +/* Start External Link Styles */
9780 +.frm-link-with-external-icon {
9781 + display: flex;
9782 + align-items: center;
9783 + gap: var(--gap-2xs);
9784 + font-size: var(--text-xs);
9785 +}
9786 +
9787 +.frm-link-with-external-icon .frmsvg {
9788 + width: 16px;
9789 + height: 16px;
9790 + transform: rotate(45deg);
9791 +}
9792 +/* End External Link Styles */
9793 +
9794 +/* Always hide submit field button */
9795 +.field_type_list .frm_tsubmit {
9796 + display: none !important;
9797 +}
9798 +/* End always hide submit field button */