PluginProbe
Formidable Forms – WordPress Form Builder for Contact Forms, Calculators, Quizzes & More / 6.13
Formidable Forms – WordPress Form Builder for Contact Forms, Calculators, Quizzes & More v6.13
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 +1283 -622 6.3.26.13 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
@@ -1767,9 +2124,9 @@
1767 2124 margin: 0;
1768 2125 }
1769 2126
1770 2127 .frm_error {
1771 - color: #B94A48;
2128 + color: #F04438;
1772 2129 }
1773 2130
1774 2131 form .frm_blank_field input,
1775 2132 form .frm_blank_field textarea,
@@ -1775,17 +2132,17 @@
1775 2132 form .frm_blank_field textarea,
1776 2133 form .frm_blank_field select,
1777 2134 form .frm_blank_field .frm-g-recaptcha iframe,
1778 2135 form .frm_blank_field .g-recaptcha iframe {
1779 - border-color: #B94A48;
2136 + border-color: #F04438;
1780 2137 }
1781 2138
1782 2139 form .frm_blank_field label {
1783 - color: #B94A48;
2140 + color: #F04438;
1784 2141 }
1785 2142
1786 2143 .frm_required {
1787 - color: #B94A48;
2144 + color: #F04438;
1788 2145 }
1789 2146
1790 2147 .with_frm_style .wp-editor-container textarea,
1791 2148 .postbox .wp-editor-container textarea,
@@ -1807,13 +2164,9 @@
1807 2164 position: relative;
1808 2165 }
1809 2166
1810 2167 .frm-license-input span {
1811 - position: absolute;
1812 - right: 0;
1813 - top: 5px;
1814 - padding: 0 10px;
1815 - font-size: 15px;
2168 + font-size: var(--text-sm);
1816 2169 }
1817 2170
1818 2171 .frm-license-input .frmsvg {
1819 2172 width: 20px;
@@ -1879,14 +2232,14 @@
1879 2232 clear: both;
1880 2233 }
1881 2234
1882 2235 .frm_error_style a {
1883 - text-decoration: underline;
1884 - font-weight: 600;
2236 + text-decoration: underline;
2237 + font-weight: 600;
1885 2238 }
1886 2239
1887 2240 .frm_error_style svg {
1888 - opacity: .7;
2241 + opacity: .7;
1889 2242 }
1890 2243
1891 2244 .frm_warning_style {
1892 2245 color: #7A4D05;
@@ -2059,8 +2412,9 @@
2059 2412 .frm-addons h3 {
2060 2413 margin-top: 0;
2061 2414 }
2062 2415
2416 +/* Card Components */
2063 2417 .frm-card {
2064 2418 width: 100%;
2065 2419 border-radius: 10px;
2066 2420 border: 1px solid var(--grey-300);
@@ -2067,8 +2421,73 @@
2067 2421 opacity: 1;
2068 2422 transition: opacity 1s;
2069 2423 }
2070 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 +
2071 2490 .frm-fade {
2072 2491 opacity: 0;
2073 2492 transition: all 1s;
2074 2493 }
@@ -2093,8 +2512,13 @@
2093 2512 .frm-addons .plugin-card-top p {
2094 2513 opacity: 0.8;
2095 2514 }
2096 2515
2516 +.frm-addons .plugin-card-top > :not(p):not(h2) {
2517 + /* Hide notices from third party plugins */
2518 + display: none;
2519 +}
2520 +
2097 2521 .frm-addons .plugin-card-bottom {
2098 2522 padding: 5px 20px 20px;
2099 2523 text-align: center;
2100 2524 background: transparent;
@@ -2105,9 +2529,10 @@
2105 2529 .frm-addons .plugin-card-bottom .button {
2106 2530 font-size: 15px;
2107 2531 }
2108 2532
2109 -.frm-addons .button {
2533 +.frm-addons .button,
2534 +.frm-addons .frm-button-tertiary {
2110 2535 float: right;
2111 2536 }
2112 2537
2113 2538 .frm-addons .addon-status {
@@ -2114,12 +2539,25 @@
2114 2539 float: left;
2115 2540 padding-top: 4px;
2116 2541 }
2117 2542
2118 -.frm-addon-active .button {
2119 - 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;
2120 2554 }
2121 2555
2556 +#frm-addons-page .frm-addon-button {
2557 + opacity: 1 !important;
2558 +}
2559 +
2122 2560 .frm-save-and-reload-options {
2123 2561 margin-top: 10px;
2124 2562 font-size: 13px;
2125 2563 }
@@ -2148,12 +2586,8 @@
2148 2586 }
2149 2587
2150 2588 /* Form Templates */
2151 2589
2152 -.frm-featured-form .frm-inner-circle {
2153 - margin: 0 auto 5px;
2154 -}
2155 -
2156 2590 .frm-new-template.plugin-card-bottom {
2157 2591 overflow: visible;
2158 2592 }
2159 2593
@@ -2164,12 +2598,19 @@
2164 2598 .frm-admin-page-formidableedit #wpbody-content > *:not(.frm-review-notice):not(.frm_previous_install):not(.frm-banner-alert),
2165 2599 #wpbody-content > .updated,
2166 2600 #wpbody-content > #update-nag,
2167 2601 #wpbody-content > .update-nag,
2168 -#wpbody-content > .notice:not(.frm-review-notice),
2602 +#wpbody-content > .notice,
2169 2603 #wpbody-content > .error:not(.frm_previous_install),
2604 +#wpbody-content > [class*="admin-notice"],
2170 2605 .frm-white-body .updated,
2171 -.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"],
2172 2613 .frm-white-body .error:not(.frm_previous_install)
2173 2614 {
2174 2615 display: none;
2175 2616 }
@@ -2178,16 +2619,14 @@
2178 2619 display: block !important;
2179 2620 }
2180 2621
2181 2622 .frm-white-body .updated,
2182 -.frm-white-body .notice,
2183 2623 .frm-white-body .error {
2184 2624 margin: 0;
2185 2625 padding: 10px 20px;
2186 2626 }
2187 2627
2188 -.frm-modal .postbox,
2189 -#frm_new_form_modal .postbox {
2628 +.frm-modal .postbox {
2190 2629 max-height: 600px;
2191 2630 overflow: hidden;
2192 2631 margin-bottom: 0;
2193 2632 }
@@ -2192,27 +2631,41 @@
2192 2631 margin-bottom: 0;
2193 2632 }
2194 2633
2195 2634 .frm-modal .postbox .frm_modal_top,
2196 -.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 {
2197 2637 padding: var(--gap-md) var(--gap-md) 0;
2198 2638 position: relative;
2199 2639 }
2200 2640
2641 +.frm-modal h2,
2642 +.frm-modal .postbox .inside h2, /* Override WP. */
2201 2643 .frm-modal .postbox .frm-modal-title,
2202 -.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 {
2203 2646 display: inline-block;
2204 - font-size: var(--text-xl);
2647 + font-size: var(--text-lg);
2205 2648 color: var(--grey-900);
2649 + font-weight: 600;
2650 + margin: 0;
2651 + padding: 0;
2206 2652 }
2207 2653
2654 +.frm-modal h3 {
2655 + font-weight: 500;
2656 +}
2657 +
2658 +/* Dismiss icon button */
2659 +
2208 2660 .frm-inline-modal > a.dismiss,
2209 2661 .frm-modal .postbox > a.dismiss,
2210 2662 .frm-modal .postbox .frm-modal-title + div:last-child,
2211 2663 .frm-dialog .frm_common_modal .postbox > div:first-child > div:last-child {
2212 2664 position: absolute;
2213 - right: 30px;
2214 - top: 25px;
2665 + top: 19px;
2666 + right: 19px;
2667 + display: flex;
2215 2668 z-index: 2;
2216 2669 }
2217 2670
2218 2671 body.rtl .frm-inline-modal > a.dismiss,
@@ -2231,11 +2684,17 @@
2231 2684
2232 2685 .frm-modal .postbox .frm-modal-title + div:last-child a,
2233 2686 .frm-modal a.dismiss .frmsvg,
2234 2687 .frm_common_modal .frm_modal_top a .frmsvg {
2235 - color: var(--grey-900);
2688 + color: var(--grey-500);
2236 2689 }
2237 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 +
2238 2697 .frm-modal .frm_modal_content > div.inside,
2239 2698 .frm_common_modal .frm_modal_content > div.inside {
2240 2699 padding: var(--gap-md);
2241 2700 margin: 0;
@@ -2242,8 +2701,12 @@
2242 2701 font-size: var(--text-sm);
2243 2702 color: var(--grey-700);
2244 2703 }
2245 2704
2705 +.frm-modal p {
2706 + color: var(--grey-900);
2707 +}
2708 +
2246 2709 .frm_common_modal .postbox {
2247 2710 display: flex;
2248 2711 flex-direction: column;
2249 2712 }
@@ -2250,9 +2713,8 @@
2250 2713
2251 2714 .frm-modal .postbox > div.inside .cta-inside {
2252 2715 overflow-y: auto;
2253 2716 height: auto;
2254 - padding: 0 var(--gap-sm);
2255 2717 }
2256 2718
2257 2719 .frm_modal_footer {
2258 2720 padding: 0 var(--gap-md) var(--gap-sm);
@@ -2262,26 +2724,9 @@
2262 2724 body.frm-body-with-open-modal {
2263 2725 overflow-y: hidden;
2264 2726 }
2265 2727
2266 -#frm_new_form_modal .postbox > div.inside {
2267 - max-height: 490px;
2268 - overflow-y: auto;
2269 - overflow-x: hidden;
2270 - margin: 0;
2271 - padding: 10px 0 0;
2272 -}
2273 -
2274 -#frm_new_form_modal .postbox > div.inside .cta-inside {
2275 - overflow-y: auto;
2276 - height: auto;
2277 - padding: 0 var(--gap-md);
2278 -}
2279 -
2280 -#frm_new_form_modal .accordion-container {
2281 - width: 100%;
2282 -}
2283 -
2728 +/* These template list styles are still used to list the View types in the New View modal. */
2284 2729 .frm-templates-list {
2285 2730 margin-top: 0;
2286 2731 }
2287 2732
@@ -2336,16 +2781,15 @@
2336 2781 .frm-templates-list li > div > div {
2337 2782 vertical-align: middle;
2338 2783 }
2339 2784
2340 -.frm-templates-list .frm-inner-circle,
2341 -.frm-category-icon, /* Deprecated */
2785 +.frm-category-icon,
2342 2786 .frm-icon-wrapper {
2343 2787 background: var(--primary-500);
2344 2788 border-radius: var(--small-radius);
2345 2789 color: #fff;
2346 - width: 40px;
2347 - height: 40px;
2790 + width: 32px;
2791 + height: 32px;
2348 2792 font-size: 18px;
2349 2793 box-sizing: border-box;
2350 2794 align-self: center;
2351 2795 justify-content: center;
@@ -2352,26 +2796,12 @@
2352 2796 align-items: center;
2353 2797 display: inline-flex;
2354 2798 }
2355 2799
2356 -.frm-templates-list .frm-inner-circle .frmsvg {
2357 - vertical-align: top;
2358 -}
2359 -
2360 2800 .frm-templates-list li .frm-category-icon {
2361 2801 overflow: hidden;
2362 - align-self: flex-start;
2363 2802 }
2364 2803
2365 -.frm-templates-list .frm-template-details {
2366 - /* the content container to the right of the icon in Create new form modal */
2367 - display: inline-block;
2368 - width: calc( 100% - 40px );
2369 - padding-left: var(--gap-sm);
2370 - box-sizing: border-box;
2371 - transform: translateY(-2px);
2372 -}
2373 -
2374 2804 .frm-templates-list li h3,
2375 2805 .frm-templates-list li p {
2376 2806 text-align: left;
2377 2807 margin: 0;
@@ -2388,82 +2818,23 @@
2388 2818 .frm-templates-list .frm-install-template div {
2389 2819 text-align: left;
2390 2820 }
2391 2821
2392 -#frm_new_form_modal .frm-search {
2393 - width: 100%;
2394 - margin: var(--gap-sm) 0 var(--gap-md);
2395 -}
2396 -
2397 2822 #frm_leave_email,
2398 -#frm_code_from_email
2399 -{
2823 +#frm_code_from_email {
2400 2824 width: 480px;
2825 + max-width: 100%;
2401 2826 }
2402 2827
2403 -#frm_new_form_modal #template-search-input {
2404 - width: 100%;
2405 -}
2406 -
2407 -#frm-email-block .frm-with-left-icon .frmsvg {
2408 - padding: 0;
2409 - top: 0;
2410 - left: 13px;
2411 -}
2412 -
2413 -#frm_new_form_modal .accordion-container {
2414 - display: inline-block;
2415 - padding: 0;
2416 - border-top: 1px solid var(--grey-300);
2417 - box-sizing: border-box;
2418 - margin: 0 5px;
2419 - width: calc( 100% - 10px );
2420 -}
2421 -
2422 -#frm_new_form_modal .accordion-section-title {
2423 - padding: 0;
2424 -}
2425 -
2426 -#frm_new_form_modal .accordion-section-title:hover,
2427 -.control-section:hover .accordion-section-title,
2428 -#frm_new_form_modal .accordion-section.open .accordion-section-title
2429 -{
2828 +.control-section:hover .accordion-section-title {
2430 2829 background: #fff !important;
2431 2830 border-bottom-color: transparent;
2432 2831 }
2433 2832
2434 -#frm_new_form_modal .accordion-section.open:hover {
2435 - border-bottom-color: transparent;
2436 -}
2437 -
2438 -#frm_new_form_modal .accordion-section {
2439 - padding: 8px 0 4px;
2440 -}
2441 -
2442 -#frm_new_form_modal .accordion-section + .accordion-section {
2443 - border-top: 1px solid var(--grey-300);
2444 - border-radius: 0;
2445 -}
2446 -
2447 -.frm-templates-list.frm-categories-list li > div > div:last-child,
2448 -#frm_new_form_modal .accordion-section .frm-featured-form
2449 -{
2833 +.frm-templates-list.frm-categories-list li > div > div:last-child {
2450 2834 padding-left: 0;
2451 2835 }
2452 2836
2453 -#frm_new_form_modal .frm-templates-list.frm-categories-list .accordion-section-title {
2454 - padding-left: var(--gap-sm);
2455 -}
2456 -
2457 -#frm_new_form_modal .frm-templates-list.frm-categories-list li.frm-selectable {
2458 - padding: 0 10px;
2459 - overflow: hidden;
2460 -}
2461 -
2462 -#frm_new_form_modal .accordion-section-content {
2463 - padding: var(--gap-sm);
2464 -}
2465 -
2466 2837 .frm-hover-icons {
2467 2838 position: absolute;
2468 2839 right: 0;
2469 2840 top: calc( ( 58px - 2px - 22px ) / 2 ); /* Template item height - borders - icon height */
@@ -2489,10 +2860,10 @@
2489 2860 width: 22px;
2490 2861 height: 22px;
2491 2862 font-size: var(--text-md);
2492 2863 display: inline-flex;
2493 - align-items: center;
2494 - justify-content: center;
2864 + align-items: center;
2865 + justify-content: center;
2495 2866 border-radius: 50%;
2496 2867 box-sizing: border-box;
2497 2868 line-height: var(--leading);
2498 2869 text-align: center;
@@ -2563,21 +2934,8 @@
2563 2934 vertical-align: text-top;
2564 2935 color: var(--grey-500);
2565 2936 }
2566 2937
2567 -#frm_new_form_modal .frm-use-this-template {
2568 - margin-left: 10px;
2569 -}
2570 -
2571 -#frm_new_form_modal #frm-preview-block {
2572 - padding: var(--gap-md) var(--gap-lg);
2573 - overflow-x: hidden;
2574 -}
2575 -
2576 -#frm_new_form_modal #frm-details-block {
2577 - padding: var(--gap-md) var(--gap-lg);
2578 -}
2579 -
2580 2938 .frm-modal-back {
2581 2939 cursor: pointer;
2582 2940 margin-right: 4px;
2583 2941 }
@@ -2585,116 +2943,83 @@
2585 2943 .frm-modal-cancel {
2586 2944 float: left;
2587 2945 }
2588 2946
2589 -.frm-plan-required-tag {
2590 - margin-left: 5px;
2591 - transform: translateY(-1px);
2592 - background: #FDE6DE;
2593 - 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;
2594 2955 }
2595 2956
2596 -.frm-ready-made-solution .frm-meta-tag {
2597 - width: fit-content;
2598 - background: #FDE6DE;
2599 - 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);
2600 2961 }
2601 2962
2602 -.frm-meta-tag {
2603 - font-size: 10px;
2604 - padding: 4px 6px;
2605 - border-radius: 4px;
2606 - text-transform: uppercase;
2607 - font-weight: normal;
2608 - display: inline-block;
2609 - 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);
2610 2967 }
2611 2968
2612 -#frm_new_form_modal.frm-expired #frm-create-block,
2613 -#frm_new_form_modal.frm-expiring #frm-create-block {
2614 - 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);
2615 2973 }
2616 2974
2617 -#frm-create-footer {
2618 - 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;
2619 2979 }
2620 2980
2621 -#frm_code_from_email_options {
2622 - 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);
2623 2986 }
2624 2987
2625 -#frm_code_from_email_options * {
2626 - color: var(--primary-500);
2988 +.frm-meta-tag.frm-new-pill {
2989 + background-color: var(--success-500);
2990 + vertical-align: text-bottom;
2627 2991 }
2628 2992
2629 -#frm-email-block p,
2630 -#frm-code-block p,
2631 -#frm-renew-block p
2632 -{
2633 - padding: 0 40px;
2634 - max-width: 400px;
2635 - margin: 0 auto 20px;
2993 +/* Start entry statuses */
2994 +.frm-entry-status {
2995 + font-weight: 500;
2636 2996 }
2637 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 +
2638 3008 li .frm-hover-icons .frm-preview-form,
2639 3009 .frm-hover-icons .frm-unlock-form,
2640 3010 .frm-locked-template .frm-hover-icons .frm-create-form,
2641 -#frm_new_form_modal .frm-modal-back ~ span,
2642 -#frm_new_form_modal .postbox > div:first-child ~ div,
2643 -.frm-modal-back,
2644 -#frm_new_form_modal:not([frm-page="create"]) a.dismiss,
2645 -#frm_code_from_email_error span,
2646 -#frm_leave_email_error span,
2647 -#frm_new_form_modal .frm-delete-form,
2648 -#frm-details-block #frm-new-template button,
2649 -#frm-create-title span[frm-type="template"],
2650 -#frm-create-title[frm-type="template"] span[frm-type="form"]
3011 +.frm-modal-back
2651 3012 {
2652 3013 display: none;
2653 3014 }
2654 3015
2655 -#frm_new_form_modal:not([frm-page="create"]) .frm-modal-back,
2656 -#frm_new_form_modal[frm-page="create"] #frm-create-title,
2657 -#frm-create-title[frm-type="template"] span[frm-type="template"],
2658 -#frm_new_form_modal[frm-page="preview"] #frm-preview-title,
2659 -#frm_new_form_modal[frm-page="details"] #frm-create-title,
2660 -#frm_new_form_modal[frm-page="upgrade"] #frm-upgrade-title,
2661 -#frm_new_form_modal[frm-page="email"] #frm-email-title,
2662 -#frm_new_form_modal[frm-page="code"] #frm-email-title,
2663 -#frm_new_form_modal[frm-page="renew"] #frm-renew-title,
2664 -#frm_code_from_email_error[frm-error="wrong-code"] span[frm-error="wrong-code"],
2665 -#frm_code_from_email_error[frm-error="empty"] span[frm-error="empty"],
2666 -#frm_code_from_email_error[frm-error="custom"] span[frm-error="custom"],
2667 -#frm_leave_email_error[frm-error="invalid"] span[frm-error="invalid"],
2668 -#frm_leave_email_error[frm-error="empty"] span[frm-error="empty"]
2669 -{
2670 - display: inline-block;
2671 -}
2672 3016
2673 3017 .frm-locked-template .frm-hover-icons .frm-unlock-form,
2674 -li[data-preview] .frm-hover-icons .frm-preview-form,
2675 -#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 {
2676 3019 display: inline-flex;
2677 3020 }
2678 3021
2679 -#frm_new_form_modal[frm-page="create"] #frm-create-block,
2680 -#frm_new_form_modal[frm-page="preview"] #frm-preview-block,
2681 -#frm_new_form_modal[frm-page="details"] #frm-details-block,
2682 -#frm_new_form_modal[frm-page="upgrade"] #frm-upgrade-block,
2683 -#frm_new_form_modal[frm-page="email"] #frm-email-block,
2684 -#frm_new_form_modal[frm-page="code"] #frm-code-block,
2685 -#frm_new_form_modal[frm-page="renew"] #frm-renew-block,
2686 -#frm_new_form_modal[frm-page="create"] #frm-create-footer,
2687 -#frm_new_form_modal[frm-page="preview"] #frm-preview-footer,
2688 -#frm_new_form_modal[frm-page="details"] #frm-details-footer,
2689 -#frm_new_form_modal[frm-page="upgrade"] #frm-upgrade-footer,
2690 -#frm_new_form_modal[frm-page="email"] #frm-email-footer,
2691 -#frm_new_form_modal[frm-page="code"] #frm-code-footer,
2692 -#frm_new_form_modal[frm-page="renew"] #frm-renew-footer
2693 -{
2694 - display: block;
2695 -}
2696 -
2697 3022 .frm-modal-back svg {
2698 3023 color: #7F7F7F;
2699 3024 }
2700 3025
@@ -2865,64 +3190,8 @@
2865 3190 .frm_image_from_url {
2866 3191 height: 50px;
2867 3192 }
2868 3193
2869 -.frm-right-panel .inside a.frm_pro_tip,
2870 -a.frm_pro_tip {
2871 - font-size: var(--text-sm);
2872 - display: inline-block;
2873 - color: var(--grey-700);
2874 - background: #FFE7DE;
2875 - border-radius: var(--small-radius);
2876 - padding: 5px 15px;
2877 - margin: 0 auto;
2878 - display: flex;
2879 - align-items: center;
2880 -}
2881 -
2882 -a.frm_pro_tip:hover {
2883 - color: var(--grey-700);
2884 - border-color: var(--primary-500);
2885 -}
2886 -
2887 -a.frm_pro_tip:hover .frmsvg {
2888 - fill: var(--primary-500);
2889 -}
2890 -
2891 -.frm_field_list .frm_pro_tip {
2892 - margin: 10px 15px;
2893 - position: relative;
2894 - width: calc(100% - 30px);
2895 - box-sizing: border-box;
2896 -}
2897 -
2898 -a.frm_pro_tip .frmsvg,
2899 -a.frm_pro_tip i {
2900 - color: var(--orange);
2901 - margin-right: 5px;
2902 -}
2903 -
2904 -a.frm_pro_tip .frmsvg {
2905 - margin-right: 10px;
2906 -}
2907 -
2908 -.frm-tip-info {
2909 - flex: 1;
2910 - text-align: left;
2911 -}
2912 -
2913 -.frm-tip-cta {
2914 - color: var(--orange);
2915 -}
2916 -
2917 -.nav-tab-wrapper .frm_pro_tip {
2918 - float: right;
2919 -}
2920 -
2921 -.frm_pro_tip:hover .frm-tip-cta {
2922 - color: var(--primary-500);
2923 -}
2924 -
2925 3194 /*Switch form dropdown*/
2926 3195 h1 .fa-caret-down {
2927 3196 font-size: 18px;
2928 3197 }
@@ -3169,9 +3438,9 @@
3169 3438 top: auto;
3170 3439 left: auto;
3171 3440 font-size: var(--text-sm);
3172 3441 padding: 4px;
3173 - margin-bottom: 3px;
3442 + margin-bottom: 3px;
3174 3443 }
3175 3444
3176 3445 .frm-right-panel .accordion-section-content {
3177 3446 background: transparent;
@@ -3240,28 +3509,10 @@
3240 3509 .frm-right-panel .frm-inline-modal .frm-with-line span {
3241 3510 background: #fff !important;
3242 3511 }
3243 3512
3244 -.frm-with-line:before,
3245 -.accordion-section-content h4:before {
3246 - content: '';
3247 - display: block;
3248 - position: absolute;
3249 - border-bottom: 1px solid var(--grey-300);
3250 - left: 0;
3251 - width: 100%;
3252 - top: 50%;
3253 -}
3254 -
3255 -.frm-right-panel .accordion-section {
3256 - border: none;
3257 - position: relative;
3258 -}
3259 -
3260 3513 .frm-right-panel .accordion-section-title:before,
3261 -.frm-right-panel .accordion-section-title:after,
3262 -#frm_new_form_modal .accordion-section-title:after
3263 -{
3514 +.frm-right-panel .accordion-section-title:after {
3264 3515 content: "\e913" !important;
3265 3516 font-family: "s11-fp" !important;
3266 3517 font-size: 18px;
3267 3518 font-variant: normal;
@@ -3268,12 +3519,8 @@
3268 3519 text-rendering: auto;
3269 3520 vertical-align: text-top;
3270 3521 }
3271 3522
3272 -#frm_new_form_modal .accordion-section.open .accordion-section-title:after {
3273 - transform: rotate(90deg);
3274 -}
3275 -
3276 3523 .frm-right-panel .accordion-section-title:after {
3277 3524 top: calc(50% - 10px) !important;
3278 3525 }
3279 3526
@@ -3284,68 +3531,36 @@
3284 3531 .frm-right-panel .accordion-section-title:before {
3285 3532 content: "\f1de" !important;
3286 3533 color: var(--grey);
3287 3534 font-size: 17px !important;
3288 - margin: 0 10px 0 0;
3289 3535 }
3290 3536
3291 -.form-title-style .accordion-section-title:before,
3292 -.section-fields-style .accordion-section-title:before {
3293 - 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%;
3294 3546 }
3295 3547
3296 -.form-description-style .accordion-section-title:before {
3297 - content: "\e90f" !important;
3548 +.frm-right-panel .accordion-section {
3549 + border: none;
3550 + position: relative;
3298 3551 }
3299 -
3300 -.field-colors-style .accordion-section-title:before {
3301 - content: "\e96d" !important;
3552 +.frm-right-panel .accordion-section-title > .frmsvg:first-child {
3553 + margin: 0 10px 0 0;
3554 + color: var(--grey);
3302 3555 }
3303 -
3304 -.field-sizes-style .accordion-section-title:before {
3305 - content: "\e920" !important;
3556 +.frm-right-panel .accordion-section-title:hover > .frmsvg:first-child {
3557 + color: var(--grey-900);
3306 3558 }
3307 3559
3308 -.field-labels-style .accordion-section-title:before {
3309 - content: "\e953" !important;
3560 +.frm-right-panel .open .accordion-section-title > .frmsvg:last-child {
3561 + transform: rotate(180deg);
3310 3562 }
3311 -
3312 -.field-description-style .accordion-section-title:before{
3313 - content: "\e611" !important;
3314 -}
3315 -
3316 -.check-box-radio-fields-style .accordion-section-title:before{
3317 - content: "\f14a" !important;
3318 -}
3319 -
3320 -.buttons-style .accordion-section-title:before{
3321 - content: "\e911" !important;
3322 -}
3323 -
3324 -.repeater-fields-style .accordion-section-title:before{
3325 - content: "\e974" !important;
3326 -}
3327 -
3328 -.toggle-fields-style .accordion-section-title:before{
3329 - content: "\f205" !important;
3330 -}
3331 -
3332 -.slider-fields-style .accordion-section-title:before{
3333 - content: "\f386" !important;
3334 -}
3335 -
3336 -.form-messages-style .accordion-section-title:before{
3337 - content: "\e915" !important;
3338 -}
3339 -
3340 -.date-fields-style .accordion-section-title:before{
3341 - content: "\f073" !important;
3342 -}
3343 -
3344 -.progress-bars-style .accordion-section-title:before{
3345 - content: "\e939" !important;
3346 -}
3347 -
3348 3563 #frm_view_editor_left.frm-right-panel .accordion-section-title,
3349 3564 .frm-right-panel h3.accordion-section-title {
3350 3565 padding: 15px 20px;
3351 3566 background: var(--sidebar-color);
@@ -3366,8 +3581,9 @@
3366 3581
3367 3582 .frm-btn-group .multiselect.dropdown-toggle {
3368 3583 box-sizing: border-box;
3369 3584 min-height: unset;
3585 + cursor: pointer;
3370 3586 }
3371 3587
3372 3588 .accordion-container .frm-dropdown-menu:before,
3373 3589 .accordion-container .multiselect.dropdown-toggle:before {
@@ -3624,8 +3840,16 @@
3624 3840 margin-right: 5px;
3625 3841 display: inline-block;
3626 3842 }
3627 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 +
3628 3852 .frm_form_field.frm_two_col .frm_opt_container,
3629 3853 .frm_form_field.frm_three_col .frm_opt_container,
3630 3854 .frm_form_field.frm_four_col .frm_opt_container{
3631 3855 display: grid;
@@ -3687,11 +3911,11 @@
3687 3911
3688 3912 .frm-white-body input[type="checkbox"]:checked::before,
3689 3913 .frm_wrap input[type="checkbox"]:checked::before {
3690 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");
3691 - height: 12px;
3692 - width: 12px;
3693 - margin: 1px;
3915 + height: 12px;
3916 + width: 12px;
3917 + margin: 1px;
3694 3918 }
3695 3919
3696 3920 .frm_radio input[type="radio"],
3697 3921 .frm_checkbox input[type="checkbox"] {
@@ -3922,10 +4146,8 @@
3922 4146 padding: 6px;
3923 4147 line-height: var(--leading);
3924 4148 border: 0 none;
3925 4149 outline: none;
3926 - -moz-box-sizing: border-box;
3927 - -webkit-box-sizing: border-box;
3928 4150 box-sizing: border-box;
3929 4151 }
3930 4152
3931 4153 /*ICONS*/
@@ -4049,8 +4271,12 @@
4049 4271 padding: 15px 0;
4050 4272 margin-top: -2px;
4051 4273 }
4052 4274
4275 +.frm-right-panel a.frm_add_logic_link:focus {
4276 + outline: auto;
4277 +}
4278 +
4053 4279 #frm_style_sidebar h3,
4054 4280 #frm_view_editor_left.frm-right-panel .accordion-section-title {
4055 4281 padding: 15px 0;
4056 4282 }
@@ -4063,8 +4289,9 @@
4063 4289 padding: 0;
4064 4290 }
4065 4291
4066 4292 .frm-alt-table {
4293 + position: relative;
4067 4294 width:100%;
4068 4295 border-collapse:collapse;
4069 4296 margin-top:0.5em;
4070 4297 font-size:15px;
@@ -4069,16 +4296,32 @@
4069 4296 margin-top:0.5em;
4070 4297 font-size:15px;
4071 4298 }
4072 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 +
4073 4311 .frm-alt-table th {
4074 4312 width:200px;
4075 4313 }
4076 4314
4077 -.frm-alt-table tr {
4315 +.frm-alt-table tr,
4316 +.frm-alt-table tr.frm-odd {
4078 4317 background-color:transparent;
4079 4318 }
4080 4319
4320 +.frm-alt-table tr.frm-even {
4321 + background-color: var(--sidebar-color);
4322 +}
4323 +
4081 4324 .frm-alt-table th,
4082 4325 .frm-alt-table td {
4083 4326 background-color:transparent;
4084 4327 vertical-align:top;
@@ -4085,12 +4328,8 @@
4085 4328 text-align:left;
4086 4329 padding:20px;
4087 4330 }
4088 4331
4089 -.frm-alt-table tr:nth-child(even) {
4090 - background-color: var(--sidebar-color);
4091 -}
4092 -
4093 4332 .frm-alt-table h3 {
4094 4333 margin-bottom: 0;
4095 4334 }
4096 4335
@@ -4141,13 +4380,9 @@
4141 4380 padding: 10px 20px;
4142 4381 line-height: inherit;
4143 4382 width: auto;
4144 4383 height: auto !important;
4145 - -moz-border-radius: 0;
4146 - -webkit-border-radius: 0;
4147 4384 border-radius: 0;
4148 - -webkit-box-sizing: content-box;
4149 - -moz-box-sizing: content-box;
4150 4385 box-sizing: content-box;
4151 4386 }
4152 4387
4153 4388 .frm_html_field_placeholder {
@@ -4159,8 +4394,12 @@
4159 4394 border: 1px solid #d3d3d3;
4160 4395 width: 300px;
4161 4396 }
4162 4397
4398 +.turnstile_placeholder {
4399 + width: 300px;
4400 +}
4401 +
4163 4402 .frm_sorting .frm_rte textarea {
4164 4403 width: 653px;
4165 4404 background: #fff;
4166 4405 margin: 1px 0 0;
@@ -4165,10 +4404,8 @@
4165 4404 background: #fff;
4166 4405 margin: 1px 0 0;
4167 4406 border: 1px solid #dfdfdf;
4168 4407 border-top: none;
4169 - -moz-border-radius: 0;
4170 - -webkit-border-radius: 0;
4171 4408 border-radius: 0;
4172 4409 float: none !important;
4173 4410 }
4174 4411
@@ -4349,13 +4586,8 @@
4349 4586 --border-color-active: var(--primary-500);
4350 4587 --border-radius: var(--small-radius);
4351 4588 }
4352 4589
4353 -.frm_image_option_container svg {
4354 - height: 50px;
4355 - margin: 10px auto 0;
4356 -}
4357 -
4358 4590 #form_show_entry_page .frm_file_link,
4359 4591 #form_show_entry_page .frm_image_option_container {
4360 4592 display: inline-flex;
4361 4593 flex-wrap: nowrap;
@@ -4385,8 +4617,12 @@
4385 4617 #form_show_entry_page .frm_upload_label {
4386 4618 padding: 10px;
4387 4619 }
4388 4620
4621 +#form_show_entry_page.frm_wrap .postbox {
4622 + overflow: hidden;
4623 +}
4624 +
4389 4625 .frm_image_option_container .frm_image_placeholder_icon svg{
4390 4626 height: 150px;
4391 4627 }
4392 4628
@@ -4430,8 +4666,14 @@
4430 4666 #form_global_settings .frm_image_option_container svg {
4431 4667 max-width: calc( 100% - 20px );
4432 4668 }
4433 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 +
4434 4676 /* Show an icon on top */
4435 4677 .frm_image_option_container {
4436 4678 position: relative;
4437 4679 }
@@ -4693,9 +4935,9 @@
4693 4935 margin-left: -145px;
4694 4936 }
4695 4937
4696 4938 .frm_end.frm6 .wp-picker-holder {
4697 - margin-left: -86px;
4939 + margin-left: -86px;
4698 4940 }
4699 4941 /* End of color picker CSS */
4700 4942
4701 4943 /*
@@ -4711,9 +4953,9 @@
4711 4953 }
4712 4954
4713 4955 .frm_on_label,
4714 4956 .frm_off_label {
4715 - color: #444444;
4957 + color: var(--grey-700);
4716 4958 }
4717 4959
4718 4960 .frm_toggle {
4719 4961 position: relative;
@@ -4723,10 +4965,10 @@
4723 4965 vertical-align: middle;
4724 4966 }
4725 4967
4726 4968 .frm_toggle_block {
4727 - display: inline-flex;
4728 - gap: var(--gap-sm);
4969 + display: inline-flex !important;
4970 + gap: var(--gap-sm);
4729 4971 align-items: center;
4730 4972 }
4731 4973
4732 4974 .frm_toggle input, /* Reverse compatibility */
@@ -4912,9 +5154,9 @@
4912 5154 }
4913 5155
4914 5156 .frm-long-icon-buttons {
4915 5157 display: flex;
4916 - gap: var(--gap-md);
5158 + gap: var(--gap-md);
4917 5159 }
4918 5160
4919 5161 .frm-long-icon-buttons > label {
4920 5162 border: 1px solid var(--grey-300);
@@ -5032,11 +5274,9 @@
5032 5274 .frm_inbox_date {
5033 5275 text-align: right;
5034 5276 }
5035 5277
5036 -.frm_inbox_count,
5037 -.frm_inbox_unread {
5038 - background: var(--orange);
5278 +.frm_inbox_count {
5039 5279 color: #fff;
5040 5280 border-radius: 50%;
5041 5281 display: inline-block;
5042 5282 margin-right: 8px;
@@ -5041,16 +5281,8 @@
5041 5281 display: inline-block;
5042 5282 margin-right: 8px;
5043 5283 font-size: 11px;
5044 5284 text-align: center;
5045 -}
5046 -
5047 -.frm_inbox_unread {
5048 - width: 8px;
5049 - height: 8px;
5050 -}
5051 -
5052 -.frm_inbox_count {
5053 5285 min-width: 18px;
5054 5286 height: 18px;
5055 5287 margin-left: 2px;
5056 5288 vertical-align: text-bottom;
@@ -5056,8 +5288,12 @@
5056 5288 vertical-align: text-bottom;
5057 5289 }
5058 5290
5059 5291 /* Import/Export */
5292 +.frm-lite .xml_opts .frm-export-xml-items {
5293 + display: none;
5294 +}
5295 +
5060 5296 .csv_opts #frm_csv_col_sep {
5061 5297 width: 45px;
5062 5298 }
5063 5299
@@ -5083,9 +5319,10 @@
5083 5319 display: inline-block;
5084 5320 position: relative;
5085 5321 }
5086 5322
5087 -#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 {
5088 5325 left: -4px;
5089 5326 position: absolute;
5090 5327 }
5091 5328
@@ -5119,10 +5356,10 @@
5119 5356 font-size: var(--text-sm);
5120 5357 }
5121 5358
5122 5359 .frm-feature-banner .dismiss {
5123 - margin-top: -10px;
5124 - margin-right: -10px;
5360 + margin-top: -10px;
5361 + margin-right: -10px;
5125 5362 }
5126 5363
5127 5364 .frm-feature-banner .dismiss svg {
5128 5365 color: #fff;
@@ -5290,8 +5527,12 @@
5290 5527 cursor: pointer;
5291 5528 outline: 0;
5292 5529 }
5293 5530
5531 +#frm_notification_settings .widget-top .widget-action{
5532 + padding-top: 13.5px;
5533 +}
5534 +
5294 5535 #frm_email_addon_menu {
5295 5536 border: 1px solid var(--grey-300);
5296 5537 padding: var(--gap-sm);
5297 5538 border-radius: 4px;
@@ -5650,16 +5891,23 @@
5650 5891 font-size: var(--text-xs);
5651 5892 box-shadow: none;
5652 5893 }
5653 5894
5654 -.frm_reply_to_container,
5655 -.frm_bcc_cc_container {
5895 +p.frm_bcc_cc_container,
5896 +p.frm_reply_to_container {
5656 5897 float: right;
5657 - margin: -4px 0 0;
5658 5898 z-index: 1;
5659 5899 position: relative;
5660 5900 }
5661 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 +
5662 5910 .frm_email_row .frm_cancel1_icon:before {
5663 5911 vertical-align: bottom;
5664 5912 }
5665 5913
@@ -5699,8 +5947,24 @@
5699 5947 .frm-single-settings ul.frm_sortable_field_opts {
5700 5948 margin-bottom: 5px;
5701 5949 }
5702 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 +
5703 5967 .advanced_settings .frm_logic_row {
5704 5968 margin: 14px 0;
5705 5969 }
5706 5970
@@ -5818,8 +6082,16 @@
5818 6082 font-size: 13px;
5819 6083 vertical-align: top;
5820 6084 }
5821 6085
6086 +.frm_help svg {
6087 + height: 13px;
6088 + width: 13px;
6089 + vertical-align: top;
6090 + color: #A0A0A0;
6091 + color: var(--grey);
6092 +}
6093 +
5822 6094 .form-field input[type=text].frm_other_input {
5823 6095 width: 30%;
5824 6096 margin-left: 10px;
5825 6097 }
@@ -5942,8 +6214,13 @@
5942 6214 line-height: 23px;
5943 6215 text-align: start;
5944 6216 }
5945 6217
6218 +.frm_form_action_settings .frm_email_row .frm_remove_field svg {
6219 + position: relative;
6220 + bottom: 2px;
6221 +}
6222 +
5946 6223 /* Entries Page */
5947 6224 .frm_no_entries_form {
5948 6225 padding: 60px 0;
5949 6226 }
@@ -6041,9 +6318,8 @@
6041 6318 .frm_prepop li a:hover {
6042 6319 background: var(--sidebar-color);
6043 6320 }
6044 6321
6045 -/* */
6046 6322 #frm_form_editor_container #frm_form_key_box {
6047 6323 width: 13em;
6048 6324 max-width: 30%
6049 6325 }
@@ -6123,8 +6399,22 @@
6123 6399 .frm-has-fields #frm-show-fields {
6124 6400 min-height: 50px;
6125 6401 }
6126 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 +
6127 6417 #frm_builder_page #frm_field_group_controls {
6128 6418 position: absolute;
6129 6419 padding: 5px;
6130 6420 border-radius: 4px 4px 0 0;
@@ -6292,8 +6582,12 @@
6292 6582 .edit_field_type_summary .frm_more_options_li:nth-child(2) {
6293 6583 display: none !important;
6294 6584 }
6295 6585
6586 +.edit_field_type_submit .frm_more_options_li:not(:last-child) {
6587 + display: none !important;
6588 +}
6589 +
6296 6590 .frm_no_section_fields:not(.frm_block) + ul.start_divider {
6297 6591 padding: 0;
6298 6592 min-height: 132px;
6299 6593 }
@@ -6372,10 +6666,10 @@
6372 6666 }
6373 6667
6374 6668 #frm_builder_page .frm_remove_form_row .frmsvg,
6375 6669 #frm_builder_page .frm_remove_form_row i:before,
6376 -.frm_wrap .frm_add_form_row .frmsvg,
6377 -.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 {
6378 6672 color: var(--primary-700);
6379 6673 }
6380 6674
6381 6675 .frm-preview-buttons .frm_button_submit {
@@ -6393,11 +6687,8 @@
6393 6687 .frm-page-break:before,
6394 6688 .frm-page-break:after {
6395 6689 content: '';
6396 6690 position: absolute;
6397 - top: -4px;
6398 - width: 4px;
6399 - height: 4px;
6400 6691 background-color: #fff;
6401 6692 border-radius: 50%;
6402 6693 border: 1px solid var(--primary-700);
6403 6694 text-rendering: auto;
@@ -6403,23 +6694,11 @@
6403 6694 text-rendering: auto;
6404 6695 -webkit-font-smoothing: antialiased;
6405 6696 }
6406 6697
6407 -.frm-page-break:after {
6408 - right: 0;
6409 -}
6410 -
6411 -#frm-fake-page {
6412 - padding: 0 5px;
6413 -}
6414 -
6415 -#frm-fake-page .frm-page-break,
6416 -#frm-fake-page .frm-page-break:before,
6417 -#frm-fake-page .frm-page-break:after {
6418 - border-color: var(--grey);
6419 -}
6420 -
6421 6698 .edit_field_type_divider:before {
6699 + font-family: 's11-fp';
6700 + content: '\f1dc';
6422 6701 width: 20px;
6423 6702 height: 20px;
6424 6703 left: -11px;
6425 6704 top: 0;
@@ -6428,13 +6707,8 @@
6428 6707 color: #fff;
6429 6708 font-size: 13px;
6430 6709 }
6431 6710
6432 -.edit_field_type_divider:before{
6433 - font-family: 's11-fp';
6434 - content: '\f1dc';
6435 -}
6436 -
6437 6711 .repeat_section.edit_field_type_divider:before {
6438 6712 font-family: 's11-fp';
6439 6713 content: '\f363';
6440 6714 }
@@ -6439,15 +6713,35 @@
6439 6713 content: '\f363';
6440 6714 }
6441 6715
6442 6716 .edit_field_type_divider:after {
6717 + width: 5px;
6718 + height: 5px;
6443 6719 left: -4px;
6444 - bottom: 0;
6445 - top: auto;
6720 + bottom: -4px;
6446 6721 transition: all 0.4s ease-out;
6447 6722 }
6448 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 +}
6449 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 +
6450 6744 .frm_sorting li.edit_field_type_divider:hover,
6451 6745 .frm_sorting li.edit_field_type_divider.selected {
6452 6746 border-left-color: var(--primary-500);
6453 6747 }
@@ -6469,9 +6763,10 @@
6469 6763 }
6470 6764
6471 6765 .frm-page-break .frm-collapse-page.button {
6472 6766 margin-left: 46%;
6473 - margin-top: calc( -28px / 2 );
6767 + margin-top: calc( -32px / 2 );
6768 + padding: 6px 12px !important;
6474 6769 }
6475 6770
6476 6771 #frm-fake-page.frm-page-collapsed {
6477 6772 margin-bottom: 0;
@@ -6482,20 +6777,8 @@
6482 6777 overflow: visible !important;
6483 6778 margin-bottom: var(--gap-lg);
6484 6779 }
6485 6780
6486 -.frm-page-collapsed:after {
6487 - content: '';
6488 - display: block;
6489 - border: 1px dashed var(--grey-300);
6490 - border-left: none;
6491 - border-right: none;
6492 - height: 6px;
6493 - position: absolute;
6494 - width: calc( 100% - 10px );
6495 - bottom: -15px;
6496 -}
6497 -
6498 6781 .frm-collapse-page .frmsvg,
6499 6782 .frm-collapse-page .frm_arrowdown6_icon {
6500 6783 width: var(--text-sm);
6501 6784 height: var(--text-sm);
@@ -6502,10 +6785,15 @@
6502 6785 font-size: var(--text-sm);
6503 6786 text-align: center;
6504 6787 margin-left: 2px;
6505 6788 color: currentColor;
6789 + transition: transform 300ms ease-in-out;
6506 6790 }
6507 6791
6792 +.frm-page-collapsed .frm-collapse-page .frmsvg {
6793 + transform: rotate(180deg);
6794 +}
6795 +
6508 6796 #frm-fake-page .frm_arrowdown6_icon {
6509 6797 color: currentColor;
6510 6798 }
6511 6799
@@ -6526,14 +6814,18 @@
6526 6814 .frm-section-collapsed .frm-collapse-section svg {
6527 6815 transform: rotate(-90deg);
6528 6816 }
6529 6817
6530 -.open .widget-top .frm_arrow_right_icon:before {
6531 - content: '\e62a';
6818 +.open .widget-top .widget-title-action button .frmsvg {
6819 + transform: rotate(90deg);
6532 6820 }
6533 6821
6822 +.widget-top .widget-title-action button .frmsvg use {
6823 + color: var(--grey);
6824 +}
6825 +
6534 6826 .frm-collapsed + .frm-collapse-me {
6535 - overflow: hidden !important;
6827 + overflow: hidden !important;
6536 6828 }
6537 6829
6538 6830 .frm-collapse-me {
6539 6831 padding-bottom: 10px;
@@ -6574,9 +6866,9 @@
6574 6866 box-sizing: border-box;
6575 6867 border: 1px dashed var(--grey-300);
6576 6868 }
6577 6869
6578 -.ui-droppable-active ~ .frm_no_fields {
6870 +.frm-over-droppable + .frm_no_fields {
6579 6871 border-style: solid;
6580 6872 }
6581 6873
6582 6874 .frm_no_section_fields {
@@ -6594,8 +6886,16 @@
6594 6886 width: 90%;
6595 6887 top: 0;
6596 6888 }
6597 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 +
6598 6898 .frm-has-fields .frm_no_fields {
6599 6899 display: none;
6600 6900 }
6601 6901
@@ -6667,14 +6967,8 @@
6667 6967 .frm_prod_options_heading.frm_prod_user_def {
6668 6968 display: none;
6669 6969 }
6670 6970
6671 -#frm-preview-block {
6672 - height: 400px;
6673 - overflow: scroll;
6674 - margin: 0;
6675 -}
6676 -
6677 6971 .plugin-card-bottom .frm-trash {
6678 6972 color: #a00;
6679 6973 }
6680 6974
@@ -6680,10 +6974,10 @@
6680 6974
6681 6975 .frm-fields p > .frm_inline_label,
6682 6976 .frm_inline_label {
6683 6977 padding-left: 3px;
6684 - margin-right: 12px;
6685 - display: inline-block;
6978 + margin-right: 12px;
6979 + display: inline-block;
6686 6980 }
6687 6981
6688 6982 .frm_left_label {
6689 6983 clear: both;
@@ -6756,31 +7050,8 @@
6756 7050 border-left: none;
6757 7051 border-right: none;
6758 7052 }
6759 7053
6760 -.postbox .frm-help-tabs.inside,
6761 -#poststuff .frm-help-tabs.inside {
6762 - padding-left: 0;
6763 - padding-right: 0;
6764 - padding-bottom: 12px;
6765 - margin-top: 0;
6766 - margin-bottom: 0;
6767 -}
6768 -
6769 -.postbox .frm-help-tabs.inside {
6770 - padding-bottom: inherit;
6771 -}
6772 -
6773 -.frm-help-tabs form > .submit {
6774 - margin-left: 154px;
6775 - padding-left: 0.9em;
6776 -}
6777 -
6778 -#poststuff h3.frm_no_bg {
6779 - background: none;
6780 - cursor: default;
6781 -}
6782 -
6783 7054 .frm-postbox-no-h3 {
6784 7055 padding-top: 10px;
6785 7056 }
6786 7057
@@ -6953,9 +7224,9 @@
6953 7224 .frm_form_settings .frm-with-right-icon .frmsvg {
6954 7225 top: 0;
6955 7226 }
6956 7227
6957 -.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 {
6958 7229 top: auto;
6959 7230 bottom: 0;
6960 7231 }
6961 7232
@@ -7008,26 +7279,33 @@
7008 7279 #frm-show-fields .frm-with-left-icon i {
7009 7280 padding-top: 10px;
7010 7281 }
7011 7282
7283 +.frm-search .frm_search_icon {
7284 + padding-left: 18px !important;
7285 + padding-right: 12px !important;
7286 +}
7287 +
7012 7288 .frm-search input[name="s"],
7013 7289 .frm-search .dropdown-toggle,
7014 7290 .frm-search input.frm-search-input {
7015 7291 border-radius: var(--small-radius);
7016 - padding-left: 33px !important;
7017 7292 border-color: var(--grey-300);
7018 7293 }
7019 7294
7020 -.frm_wrap .frm-search .frm-search-input,
7021 -.frm-modal .frm-search .frm-search-input,
7022 7295 .frm-white-body .search-box input[name="s"], /* Views search */
7023 -.frm_wrap .frm-search input[name="s"] {
7024 - padding-top: 3px;
7025 - padding-bottom: 3px;
7296 +#wpwrap .frm-search input[type="search"] {
7026 7297 flex: 1;
7027 7298 font-size: var(--text-sm);
7299 + line-height: var(--text-lg);
7300 + padding: var(--gap-xs);
7028 7301 }
7029 7302
7303 +.frm-search input[type="search"],
7304 +.frm-search input[type="text"] {
7305 + padding-left: var(--gap-xl) !important;
7306 +}
7307 +
7030 7308 .frm-search .dropdown-toggle {
7031 7309 width: 100%;
7032 7310 float: none;
7033 7311 max-width: 200px;
@@ -7032,8 +7310,9 @@
7032 7310 float: none;
7033 7311 max-width: 200px;
7034 7312 background: transparent;
7035 7313 padding: 7px;
7314 + padding-left: 33px !important;
7036 7315 min-height: 32px;
7037 7316 text-align: inherit;
7038 7317 overflow: hidden;
7039 7318 text-overflow: ellipsis;
@@ -7168,9 +7447,9 @@
7168 7447 margin-bottom: 0;
7169 7448 }
7170 7449
7171 7450 .post-type-frm_display #side-sortables .misc-pub-section {
7172 - padding: 15px 20px 10px;
7451 + padding: 15px 20px 10px;
7173 7452 }
7174 7453
7175 7454 .post-type-frm_display .misc-pub-section .frmsvg,
7176 7455 .post-type-frm_display #post-body .misc-pub-post-status:before,
@@ -7275,16 +7554,16 @@
7275 7554 ul .frm_col_two {
7276 7555 float: right;
7277 7556 }
7278 7557
7279 -.frm_two_col li {
7280 - float: left;
7281 - width: 48%;
7282 - 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);
7283 7562 }
7284 7563
7285 -.frm_two_col li:nth-child(2n+2) {
7286 - margin-right: 0;
7564 +.frm_two_col li {
7565 + margin-bottom: 0;
7287 7566 }
7288 7567
7289 7568 .frm-info-modal a,
7290 7569 .frm-info-modal ul,
@@ -7291,11 +7570,10 @@
7291 7570 .frm-info-modal p,
7292 7571 .frm-info-modal,
7293 7572 .settings-lite-cta a,
7294 7573 .settings-lite-cta ul,
7295 -.settings-lite-cta p,
7296 7574 .settings-lite-cta {
7297 - color: #666;
7575 + color: var(--grey-500);
7298 7576 font-size: var(--text-md);
7299 7577 box-shadow: none !important;
7300 7578 }
7301 7579
@@ -7309,9 +7587,9 @@
7309 7587 }
7310 7588
7311 7589 .frm-info-modal .postbox .inside,
7312 7590 .settings-lite-cta .postbox .inside {
7313 - padding: 20px 40px;
7591 + padding: var(--gap-md);
7314 7592 margin: 0;
7315 7593 }
7316 7594
7317 7595 .cta-inside a {
@@ -7359,17 +7637,21 @@
7359 7637 color: var(--grey-700);
7360 7638 padding: 5px 10px;
7361 7639 font-size: var(--text-md);
7362 7640 gap: var(--gap-xs);
7363 - align-items: center;
7641 + align-items: center;
7364 7642 }
7365 7643
7366 7644 .frm_code_list.frm-full-hover a span {
7367 7645 max-width: 83px;
7368 - text-align: right;
7646 + margin-right: var(--gap-xs);
7369 7647 margin-left: auto;
7370 7648 }
7371 7649
7650 +.frm-single-settings .frm_code_list.frm-full-hover a {
7651 + display: block;
7652 +}
7653 +
7372 7654 .frm_code_list.frm-full-hover a,
7373 7655 .frm_code_list.frm-full-hover a span {
7374 7656 white-space: nowrap;
7375 7657 overflow: hidden;
@@ -7592,8 +7874,13 @@
7592 7874 #frm-insert-fields li a {
7593 7875 display: flex !important;
7594 7876 }
7595 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 +
7596 7883 .frmbutton.ui-draggable-dragging a {
7597 7884 border: 1px solid var(--grey-300);
7598 7885 box-shadow: var(--box-shadow-md);
7599 7886 }
@@ -7618,25 +7905,13 @@
7618 7905 transition: opacity .2s;
7619 7906 opacity: 1;
7620 7907 }
7621 7908
7622 -.frm-field-group-count {
7623 - background-color: var(--sidebar-hover);
7624 - padding: 5px;
7625 - color: #fff !important;
7626 - border-radius: 10px;
7627 -}
7628 -
7629 7909 /* End dragging */
7630 7910
7631 -.field_type_list .frm_icon_font:before {
7632 - font-size: 20px;
7633 -}
7634 -
7635 7911 li.frm_noallow.button,
7636 7912 .frm_noallow {
7637 7913 opacity: .5;
7638 - filter: alpha(opacity=50);
7639 7914 }
7640 7915
7641 7916 .frm_actions_list a.frm_show_upgrade.frm_inactive_action:before,
7642 7917 li.frm_noallow.button.frm_show_upgrade {
@@ -7653,9 +7928,12 @@
7653 7928
7654 7929 #frm_upgrade_modal_image {
7655 7930 max-width: 200px;
7656 7931 }
7657 -
7932 +#frm_upgrade_modal .frm-upgrade-message img {
7933 + margin-top: 10px;
7934 + width: 100%;
7935 +}
7658 7936 .frm-tab-message {
7659 7937 max-width: 600px;
7660 7938 margin: 20px auto;
7661 7939 color: rgba(63, 75, 91, 0.8);
@@ -7743,9 +8021,10 @@
7743 8021 }
7744 8022
7745 8023 .frm-views-editor-body .ui-widget-overlay,
7746 8024 .frm-white-body .ui-widget-overlay,
7747 -.toplevel_page_formidable .ui-widget-overlay {
8025 +.toplevel_page_formidable .ui-widget-overlay,
8026 +body[class*=formidable-payments] .ui-widget-overlay {
7748 8027 position: fixed;
7749 8028 width: 100%;
7750 8029 height: 100%;
7751 8030 top: 0;
@@ -7756,21 +8035,41 @@
7756 8035 opacity: .5;
7757 8036 z-index: 2;
7758 8037 }
7759 8038
7760 -#frm_upgrade_modal {
7761 - text-align: center;
8039 +.frm-circled-icon {
8040 + width: 60px;
8041 + height: 60px;
8042 + border-radius: 50%;
8043 + background-color: var(--primary-25);
7762 8044 }
7763 8045
7764 -#frm_upgrade_modal .frm_lock_icon {
7765 - display: block;
7766 - margin: 0 auto;
7767 - height: 35px;
7768 - width: 35px;
7769 - color: #c4c4c4;
7770 - padding-bottom: 20px;
8046 +.frm-circled-icon-large {
8047 + width: 80px;
8048 + height: 80px;
7771 8049 }
7772 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 +
7773 8072 .frm-upgrade-message img {
7774 8073 max-width: 100%;
7775 8074 }
7776 8075
@@ -7998,8 +8297,9 @@
7998 8297 .frm-white-body .wrap input[type="text"], /* Cover Views pages */
7999 8298 .frm-white-body .wrap input[type="search"],
8000 8299 .frm-white-body .wrap input[type="number"],
8001 8300 .frm-white-body .wrap select,
8301 +#frm-form-templates-modal select,
8002 8302 .frm-white-body .wrap textarea,
8003 8303 button.frm_choose_image_box,
8004 8304 #titlediv input[type="text"],
8005 8305 .frm-fields button.btn,
@@ -8005,8 +8305,9 @@
8005 8305 .frm-fields button.btn,
8006 8306 .frm_wrap textarea,
8007 8307 .frm_wrap input[type="tel"],
8008 8308 .frm_wrap input[type="text"],
8309 +.frm_wrap input[type="email"]
8009 8310 .frm_wrap input[type=search],
8010 8311 .frm_wrap input[type="number"],
8011 8312 .frm_wrap input[type="date"],
8012 8313 .frm_wrap select,
@@ -8012,9 +8313,10 @@
8012 8313 .frm_wrap select,
8013 8314 .wp-admin .frm_wrap select,
8014 8315 .field-group textarea,
8015 8316 .field-group input[type="text"],
8016 -.field-group select {
8317 +.field-group select,
8318 +.frm-fields .frm-input-field {
8017 8319 outline: 0;
8018 8320 box-shadow: none;
8019 8321 border-radius: var(--small-radius);
8020 8322 padding: 5px 14px;
@@ -8026,9 +8328,9 @@
8026 8328 line-height: var(--leading);
8027 8329 }
8028 8330
8029 8331 .frm_wrap ::-webkit-datetime-edit {
8030 - line-height: var(--leading);
8332 + line-height: var(--leading);
8031 8333 }
8032 8334
8033 8335 .frm-white-body textarea:focus,
8034 8336 .frm-white-body input:focus,
@@ -8035,8 +8337,9 @@
8035 8337 .frm-white-body select:focus,
8036 8338 .frm_wrap input:focus,
8037 8339 .frm_wrap select:focus,
8038 8340 .wp-core-ui .frm_wrap select:focus,
8341 +#frm-form-templates-modal select:focus,
8039 8342 .frm-btn-group .multiselect.dropdown-toggle:focus,
8040 8343 .frm_wrap textarea:focus {
8041 8344 border-color: var(--primary-500) !important;
8042 8345 box-shadow: none !important;
@@ -8055,9 +8358,10 @@
8055 8358 .frm_wrap select {
8056 8359 padding: 2px;
8057 8360 }
8058 8361
8059 -.wp-admin .frm_wrap select {
8362 +.wp-admin .frm_wrap select,
8363 +#frm-form-templates-modal select {
8060 8364 max-width: 100%;
8061 8365 }
8062 8366
8063 8367 .frm_form_field.frm_scroll_box .frm_opt_container {
@@ -8073,8 +8377,13 @@
8073 8377 .frm_wrap input::placeholder {
8074 8378 color: var(--grey-500);
8075 8379 }
8076 8380
8381 +.frm_wrap .frm-button-primary.frm-disabled {
8382 + opacity: 0.5;
8383 + cursor: default;
8384 +}
8385 +
8077 8386 #postcustomstuff table td > div {
8078 8387 /* To override some inline css in add-on */
8079 8388 padding-top: 0 !important;
8080 8389 }
@@ -8090,9 +8399,10 @@
8090 8399 }
8091 8400
8092 8401 #postbox-container-2 select,
8093 8402 .wp-admin .frm_wrap select,
8094 -.frm_wrap .frm_form_builder select {
8403 +.frm_wrap .frm_form_builder select,
8404 +#frm-form-templates-modal select {
8095 8405 height: auto;
8096 8406 background-position: right 11px top 55%;
8097 8407 }
8098 8408
@@ -8106,9 +8416,9 @@
8106 8416 line-height: 1;
8107 8417 }
8108 8418
8109 8419 .frm_wrap .tablenav ::-webkit-datetime-edit {
8110 - line-height: 1;
8420 + line-height: 1;
8111 8421 }
8112 8422
8113 8423 .frm-fields button.btn,
8114 8424 .frm-fields textarea,
@@ -8116,9 +8426,10 @@
8116 8426 .frm-fields select,
8117 8427 .field-group textarea,
8118 8428 .field-group input[type="text"],
8119 8429 .field-group select,
8120 -.accordion-container input.hex {
8430 +.accordion-container input.hex,
8431 +.frm-fields .frm-input-field {
8121 8432 width: 100%;
8122 8433 outline: 0;
8123 8434 }
8124 8435
@@ -8137,11 +8448,11 @@
8137 8448 margin: 0 !important;
8138 8449 }
8139 8450
8140 8451 .frm_images_dropdown .frm_radio input[type=radio] {
8141 - opacity: 0;
8142 - position: absolute;
8143 - z-index: -1;
8452 + opacity: 0;
8453 + position: absolute;
8454 + z-index: -1;
8144 8455 }
8145 8456
8146 8457 .frm_images_dropdown__image .frmsvg {
8147 8458 width: 100%;
@@ -8205,8 +8516,42 @@
8205 8516 .windows ::-webkit-scrollbar-corner {
8206 8517 background: transparent;
8207 8518 }
8208 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 +
8209 8554 /* RTL */
8210 8555 .rtl h3 {
8211 8556 font-weight: inherit !important;
8212 8557 }
@@ -8283,10 +8628,10 @@
8283 8628 right: auto;
8284 8629 left: 5px;
8285 8630 }
8286 8631
8287 -.rtl .frm_reply_to_container,
8288 -.rtl .frm_bcc_cc_container {
8632 +.rtl p.frm_reply_to_container,
8633 +.rtl p.frm_bcc_cc_container {
8289 8634 float: left;
8290 8635 }
8291 8636
8292 8637 .rtl .frm-default-switcher {
@@ -8309,8 +8654,12 @@
8309 8654 padding-right: 5px !important;
8310 8655 background-position: left 11px top 55%;
8311 8656 }
8312 8657
8658 +.rtl .frm_code_list.frm-full-hover a span {
8659 + margin-left: var(--gap-xs);
8660 +}
8661 +
8313 8662 /* ---------------------------------------------------------------
8314 8663 Clearfix
8315 8664 --------------------------------------------------------------- */
8316 8665 span.clear {
@@ -8635,8 +8984,15 @@
8635 8984
8636 8985 #wp-content-media-buttons a.frm_insert_form {
8637 8986 padding: 0 var(--gap-sm);
8638 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 + }
8639 8995 }
8640 8996
8641 8997 @media only screen and (max-width: 700px) {
8642 8998 .frm-white-body,
@@ -8871,9 +9227,9 @@
8871 9227 position: absolute;
8872 9228 top: 0;
8873 9229 right: 0;
8874 9230 width: 366px;
8875 - height: 231px;
9231 + max-height: 231px;
8876 9232 border-radius: 8px;
8877 9233 background: #fff;
8878 9234 box-shadow: 0px 20px 48px rgba(40, 47, 54, 0.15);
8879 9235 z-index: 3;
@@ -8891,8 +9247,23 @@
8891 9247 bottom: 50px;
8892 9248 height: 196px;
8893 9249 }
8894 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 +
8895 9266 .frm-merge-fields-into-row #frm_field_group_popup .frm-break-field-group {
8896 9267 display: none;
8897 9268 }
8898 9269
@@ -8907,9 +9278,9 @@
8907 9278 font-size: 11px;
8908 9279 line-height: 15px;
8909 9280 text-transform: uppercase;
8910 9281 color: rgba(40, 47, 54, 0.45);
8911 - margin-bottom: 40px;
9282 + margin-bottom: 27px;
8912 9283 }
8913 9284
8914 9285 .frm-row-layout-option {
8915 9286 background: #F6F7FB;
@@ -8914,9 +9285,9 @@
8914 9285 .frm-row-layout-option {
8915 9286 background: #F6F7FB;
8916 9287 box-sizing: border-box;
8917 9288 border-radius: 2px;
8918 - padding: 18px 11px;
9289 + padding: 15px 10px;
8919 9290 }
8920 9291
8921 9292 #frm_field_group_popup .frm-row-layout-option .frm_grid_container {
8922 9293 grid-gap: 0 5%;
@@ -8924,22 +9295,23 @@
8924 9295 }
8925 9296
8926 9297 #frm_field_group_popup .frm-row-layout-option {
8927 9298 cursor: pointer;
9299 + border: 2px solid transparent;
8928 9300 }
8929 9301
8930 9302 #frm_field_group_popup .frm-row-layout-option.frm-active-row-layout,
8931 9303 #frm_field_group_popup .frm-row-layout-option:hover {
8932 - outline: 1px solid var(--primary-500);
9304 + border-color: var(--primary-500);
8933 9305 }
8934 9306
8935 9307 .frm-custom-field-group-layout,
8936 9308 .frm-break-field-group {
8937 - padding: 5px 15px;
9309 + padding: 4px 24px;
8938 9310 cursor: pointer;
8939 9311 font-size: var(--text-sm);
8940 9312 line-height: 19px;
8941 - color: rgba(40, 47, 54, 0.85);
9313 + color: rgba(72, 78, 84, 1);
8942 9314 }
8943 9315
8944 9316 .frm-custom-field-group-layout:hover,
8945 9317 .frm-break-field-group:hover {
@@ -8984,12 +9356,13 @@
8984 9356 }
8985 9357
8986 9358 .frm-builder-popup-heading {
8987 9359 font-weight: 600;
8988 - font-size: 12px;
9360 + font-size: 11px;
8989 9361 line-height: 15px;
8990 9362 text-transform: uppercase;
8991 9363 color: rgba(40, 47, 54, 0.45);
9364 + margin-bottom: 7px;
8992 9365 }
8993 9366
8994 9367 .frm-builder-popup-subheading {
8995 9368 font-size: 12px;
@@ -8996,8 +9369,17 @@
8996 9369 line-height: 16px;
8997 9370 color: rgba(40, 47, 54, 0.45);
8998 9371 }
8999 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 +
9000 9382 .frm-multiselect-popup-separator {
9001 9383 height: 36px;
9002 9384 width: 1px;
9003 9385 position: relative;
@@ -9038,8 +9420,12 @@
9038 9420 .frm-banner-cta a {
9039 9421 text-decoration: underline !important;
9040 9422 }
9041 9423
9424 +#frm_banner .frm-banner-cta a.frm_inbox_dismiss {
9425 + display: none;
9426 +}
9427 +
9042 9428 .frm-banner-dismiss {
9043 9429 cursor: pointer;
9044 9430 position: absolute;
9045 9431 right: 10px;
@@ -9054,43 +9440,16 @@
9054 9440 .frm-ready-made-solution:not(.frm-search-result) {
9055 9441 display: none !important;
9056 9442 }
9057 9443
9058 -#frm_new_form_modal .frm-ready-made-solution {
9059 - padding: var(--gap-xs) !important;
9060 - margin: var(--gap-xs) 0 var(--gap-sm);
9061 - display: flex;
9062 - gap: var(--gap-sm);
9063 - position: relative;
9064 - overflow: visible !important;
9444 +#frm_leave_email_wrapper .frmsvg {
9445 + top: 0;
9065 9446 }
9066 9447
9067 -#frm_new_form_modal .frm-ready-made-solution:after {
9068 - width: 100%;
9069 - height: 1px;
9070 - background: var(--grey-300);
9071 - content: '';
9072 - position: absolute;
9073 - bottom: -10px;
9074 - left: 0;
9448 +#frm-add-my-email-address {
9449 + margin-top: 30px;
9075 9450 }
9076 9451
9077 -#frm_new_form_modal .frm-ready-made-solution.frm-search-result:last-of-type::after {
9078 - content: none;
9079 -}
9080 -
9081 -#frm_new_form_modal .frm-solution-details {
9082 - flex: 1;
9083 - display: flex;
9084 - gap: var(--gap-2xs);
9085 - flex-direction: column;
9086 -}
9087 -
9088 -#frm_new_form_modal .frm-ready-made-solution > div:first-child {
9089 - width: 30%;
9090 - text-align: center;
9091 -}
9092 -
9093 9452 .frm-ready-made-solution h3 ~ a {
9094 9453 color: var(--primary-500);
9095 9454 }
9096 9455
@@ -9120,10 +9479,10 @@
9120 9479 }
9121 9480
9122 9481 .frm_on_submit_type input {
9123 9482 opacity: 0 !important;
9124 - position: absolute;
9125 - z-index: -1;
9483 + position: absolute;
9484 + z-index: -1;
9126 9485 }
9127 9486
9128 9487 .frm_on_submit_type input[type="radio"]:checked + label {
9129 9488 border-color: var(--primary-color);
@@ -9134,4 +9493,306 @@
9134 9493 .frm_on_submit_type input[type="radio"]:checked + label svg {
9135 9494 color: var(--primary-color);
9136 9495 }
9137 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 */