PluginProbe
Formidable Forms – WordPress Form Builder for Contact Forms, Calculators, Quizzes & More / 5.4.5
Formidable Forms – WordPress Form Builder for Contact Forms, Calculators, Quizzes & More v5.4.5
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 +1403 -2006 6.5.25.4.5 View file →
@@ -1,103 +1,33 @@
1 1 @import url(font_icons.css);
2 2
3 3 :root,
4 -.frm-white-body,
5 4 .frm_wrap {
6 - --grey-900: #101828;
7 - --grey-800: #1D2939;
8 - --grey-700: #344054;
9 - --grey-500: #667085; /* Roughly 65% opacity */
10 - --grey-400: #98A2B3;
11 - --grey-300: #D0D5DD;
12 - --grey-200: #EAECF0;
13 - --grey-100: #F2F4F7;
14 - --grey-50: #F9FAFB;
15 - --grey-25: #FCFCFD;
16 - --darkest-grey: var(--grey-900); /* Deprecated */
17 - --dark-grey: var(--grey-700); /* Deprecated */
5 + --light-blue: rgba(188, 224, 253, .2);
6 + --blue-border: rgb(188, 224, 253);
7 + --darkest-grey: rgb(40, 47, 54);
8 + --dark-grey: rgba(40, 47, 54, .85);
18 9 --medium-grey: rgba(40, 47, 54, .65);
19 - --grey: var(--grey-500); /* Deprecated */
20 - --grey-border: var(--grey-300); /* Deprecated */
10 + --grey: rgba(40, 47, 54, .45);
11 + --grey-border: rgba(40, 47, 54, .2);
21 12 --lightest-grey: rgb(250, 250, 250);
22 - --sidebar-color: var(--grey-50);
23 - --sidebar-hover: var(--grey-200);
24 - --primary-700: #2B66A9;
25 - --primary-500: #4199FD;
26 - --primary-25: #F5FAFF;
27 - --primary-color: var(--primary-500); /* Deprecated */
28 - --primary-hover: var(--primary-700); /* Deprecated */
29 - --light-blue: var(--primary-25); /* Deprecated */
30 - --blue-border: rgb(188, 224, 253);
31 - --error-300: #FECDCA;
32 - --error-500: #F04438;
33 - --error-700: #B42318;
13 + --sidebar-color: rgb(246, 247, 251);
14 + --sidebar-hover: rgb(227, 232, 235);
15 + --primary-color: rgb(65, 153, 253);
16 + --primary-hover: rgb(49, 119, 199);
34 17 --green: rgb(63, 172, 37);
35 18 --orange: #F15A24;
36 19 --pink: rgb(226, 42, 110);
37 20 --purple: rgb(141, 53, 245);
38 21 --border-radius: 35px;
39 - --small-radius: 8px;
22 + --small-radius: 6px;
40 23 --small-sidebar: 275px;
41 24 --medium-sidebar: 350px;
42 25 --big-sidebar: 390px;
43 26 --biggest-sidebar: 450px;
44 - --text-xs: 12px;
45 - --text-sm: 14px;
46 - --text-md: 16px;
47 - --text-lg: 18px;
48 - --text-xl: 20px;
49 - --h-xs: 24px;
50 - --h-sm: 30px;
51 - --h-md: 36px;
52 - --leading: 1.5;
53 - --gap-2xs: 4px;
54 - --gap-xs: 8px;
55 - --gap-sm: 16px;
56 - --gap-md: 24px;
57 - --gap-lg: 32px;
58 - --gap-xl: 40px;
59 - --gap-2xl: 48px;
60 - --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);
61 - --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);
62 - --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);
63 - --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);
64 27 }
65 28
66 -@font-face {
67 - font-family: 'Inter';
68 - src: url('../fonts/Inter-VariableFont_slnt,wght.ttf?v=1') format('truetype');
69 -}
70 -
71 -.with_frm_style,
72 -.frm-white-body .wpbody-content,
73 -.frm_wrap {
74 - font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
75 -}
76 -
77 -/* Safari 11+ */
78 -@media not all and (min-resolution:.001dpcm) {
79 - @supports (-webkit-appearance:none) and (stroke-color:transparent) {
80 - .with_frm_style,
81 - .frm-white-body .wpbody-content,
82 - .frm_wrap {
83 - -webkit-font-smoothing: antialiased;
84 - }
85 - }
86 -}
87 -
88 -.frm-white-body,
89 -.frm-white-body p,
90 -.frm_wrap,
91 -.frm_wrap p,
92 -.frm-modal,
93 -.frm-white-body .postbox .inside {
94 - font-size: var(--text-sm);
95 - color: var(--grey-500);
96 - line-height: var(--leading);
97 -}
98 -
99 -body:not(.frm-admin-page-styles):not(.frm-admin-page-style) .with_frm_style .frm_form_fields > fieldset {
29 +body:not(.frm-admin-page-styles) .with_frm_style .frm_form_fields > fieldset {
100 30 --fieldset-padding: 15px 0;
101 31 }
102 32
103 33 a, .widget .widget-top, .stuffbox h3, .frm-collapsed {
@@ -104,13 +34,12 @@
104 34 cursor: pointer;
105 35 text-decoration: none;
106 36 }
107 37
108 -.post-type-frm_display .wrap > #posts-filter,
109 38 .wrap.frm-with-margin,
110 39 #frm_top_bar + .wrap,
111 40 .frm_wrap > .wrap {
112 - margin: var(--gap-sm) var(--gap-md) var(--gap-md);
41 + margin: 10px 40px 30px;
113 42 }
114 43
115 44 .frm-full-screen #wpbody-content > .wrap {
116 45 margin: 0;
@@ -119,12 +48,23 @@
119 48 .post-type-frm_display .wrap {
120 49 margin: 0;
121 50 }
122 51
52 +.columns-2 .frm-right-panel + #post-body-content {
53 + padding-bottom: 26px;
54 + border-left: 1px solid var(--sidebar-hover);
55 +}
56 +
123 57 .toplevel_page_formidable #post-body-content {
124 58 overflow-x: visible;
125 59 }
126 60
61 +.formidable_page_formidable-pro-upgrade #wpfooter,
62 +.toplevel_page_formidable #wpfooter {
63 + border-top: 1px solid #ddd;
64 + background: #fff;
65 +}
66 +
127 67 .frm-full-screen {
128 68 height: 100%;
129 69 overflow: hidden;
130 70 }
@@ -134,40 +74,31 @@
134 74 .frm-full-screen.post-type-frm_display {
135 75 overflow: auto;
136 76 }
137 77
138 -.frm-full-screen #wpadminbar,
139 -.frm-full-screen #adminmenumain,
140 78 .frm-full-screen .wp-header-end {
141 79 display: none;
142 80 }
143 81
144 -body.frm-white-body:not(.frm-full-screen) .mce-fullscreen {
145 - top: 32px;
146 - left: 160px;
147 -}
148 -
149 82 .frm-full-screen #wpbody-content,
150 83 .frm-full-screen #wpbody,
151 84 .frm-full-screen #wpcontent {
152 - padding: 0;
85 + padding-bottom: 0;
153 86 overflow: hidden;
154 - margin: 0 !important;
155 87 }
156 88
157 89 .frm-white-body #wpbody-content {
158 90 position: relative; /* For screen meta links */
159 - padding-bottom: 0;
160 91 }
161 92
162 93 .post-new-php.post-type-frm_display #screen-meta-links,
163 -.post-php.post-type-frm_display #screen-meta-links {
94 +.post-php.post-type-frm_display #screen-meta-links,
95 +.frm-full-screen #wpfooter {
164 96 display: none;
165 97 }
166 98
167 99 .frm-white-body #screen-meta-links {
168 - position: fixed;
169 - bottom: 0;
100 + position: absolute;
170 101 right: 20px;
171 102 }
172 103
173 104 .frm-full-screen #screen-meta-links .screen-meta-toggle {
@@ -173,14 +104,8 @@
173 104 .frm-full-screen #screen-meta-links .screen-meta-toggle {
174 105 right: 55px;
175 106 }
176 107
177 -.frm-white-body #screen-meta-links .show-settings {
178 - border-radius: var(--small-radius) var(--small-radius) 0 0;
179 - border: 1px solid var(--grey-300);
180 - border-bottom: none;
181 -}
182 -
183 108 .frm-white-body.frm-lite #screen-meta-links .screen-meta-toggle {
184 109 right: 125px; /* Don't cover the lite upgrade button */
185 110 }
186 111
@@ -192,9 +117,9 @@
192 117 color: var(--grey);
193 118 }
194 119
195 120 .frm-white-body .columns-2 {
196 - border-bottom: 1px solid var(--grey-300);
121 + border-bottom: 1px solid var(--grey-border);
197 122 }
198 123
199 124 .frm-full-screen .columns-2 {
200 125 border: none;
@@ -224,11 +149,10 @@
224 149 .frm_wrap .tablenav {
225 150 margin-bottom: 10px;
226 151 }
227 152
228 -.frm-white-body .tablenav .actions select,
229 153 .wp-admin .frm_wrap .tablenav select {
230 - margin-right: var(--gap-xs);
154 + margin-right: 6px;
231 155 }
232 156
233 157 .tablenav .actions .button {
234 158 margin-top: 1px;
@@ -246,17 +170,17 @@
246 170 background: #fff;
247 171 }
248 172
249 173 .frm-white-body table.widefat th {
250 - font-size: var(--text-md);
174 + font-size: 16px;
251 175 }
252 176
253 177 .frm-white-body table.widefat th a {
254 - color: var(--grey-700);
178 + color: var(--dark-grey);
255 179 }
256 180
257 181 .frm-white-body table.widefat strong a {
258 - color: var(--primary-700);
182 + color: var(--primary-hover);
259 183 }
260 184
261 185 .frm-scroll-box {
262 186 clear: both;
@@ -261,9 +185,9 @@
261 185 .frm-scroll-box {
262 186 clear: both;
263 187 overflow: auto;
264 188 max-height: 405px;
265 - border: 1px solid var(--grey-300);
189 + border: 1px solid var(--grey-border);
266 190 border-radius: var(--small-radius);
267 191 }
268 192
269 193 .frm_form_field.frm_scroll_box .frm_opt_container {
@@ -268,9 +192,9 @@
268 192
269 193 .frm_form_field.frm_scroll_box .frm_opt_container {
270 194 height: 100px;
271 195 overflow: auto;
272 - border: 1px solid var(--grey-300);
196 + border: 1px solid var(--grey-border);
273 197 }
274 198
275 199 .frm-short-list {
276 200 overflow: auto;
@@ -277,9 +201,9 @@
277 201 max-height: 190px;
278 202 }
279 203
280 204 .frm-white-body table.frm-border td {
281 - font-size: var(--text-sm);
205 + font-size: 14px;
282 206 }
283 207
284 208 .frm-white-body .striped > tbody > :nth-child(odd) {
285 209 background-color: #fff;
@@ -293,122 +217,33 @@
293 217 float: right;
294 218 }
295 219
296 220 #frm_top_bar {
297 - display: flex;
298 - gap: var(--gap-sm);
221 + display: block;
299 222 width: 100%;
300 - height: 72px;
223 + max-height: 100px;
224 + padding: 25px 40px 25px;
301 225 margin: 0;
302 226 box-sizing: border-box;
303 227 text-align: center;
304 - padding: 0 var(--gap-md);
305 228 }
306 229
307 -#frm_top_bar > .frm-full-close:last-child,
308 -#frm_top_bar > #frm-publishing:last-child {
309 - margin-left: auto;
310 -}
311 -
312 -#frm_top_bar {
313 - border-bottom: 1px solid var(--grey-300);
314 - padding: 0 var(--gap-md);
230 +.post-type-frm_display:not(.edit-php) #frm_top_bar,
231 +.frm-full-screen.post-type-frm_display #frm_top_bar,
232 +.frm_page_container #frm_top_bar {
233 + border-bottom: 1px solid var(--grey-border);
234 + padding: 0 20px;
315 235 overflow: visible;
316 236 }
317 237
318 -.frm-white-body h1,
319 -.frm-white-body h2,
320 -.frm-white-body h3,
321 -.frm-white-body h4 {
322 - color: var(--grey-900);
323 - font-weight: 400;
324 - line-height: var(--leading) !important;
238 +.frm-full-screen #frm_top_bar {
239 + padding: 0 15px !important;
325 240 }
326 241
327 -.frm-white-body .wrap h1,
328 -.frm-white-body h1 {
329 - font-size: var(--text-xl);
330 -}
331 -
332 -.frm-white-body .wrap h2,
333 -.frm-white-body h2 {
334 - font-size: var(--text-lg);
335 -}
336 -
337 -.frm-white-body .wrap h3,
338 -.frm-white-body h3 {
339 - font-size: var(--text-md);
340 -}
341 -
342 -.frm-white-body .wrap h4,
343 -.frm-white-body h4 {
344 - font-size: var(--text-sm);
345 - font-weight: 500;
346 -}
347 -
348 -/* Override CSS in Views plugin. */
349 -.frm-views-editor-body .frm_page_container #frm_top_bar h1 {
350 - padding: 0 !important;
351 - color: var(--grey-900);
352 - font-size: var(--text-xl) !important;
353 -}
354 -
355 -.post-type-frm_display .frm_top_left {
356 - padding-bottom: 0 !important;
357 -}
358 -
359 -.frm-new-table-view-option.frm-selected-table-view-option {
360 - border-radius: var(--small-radius);
361 - background: var(--primary-25);
362 -}
363 -
364 -.frm-views-editor-body #frm_adv_info .tabs-panel { /* Views sidebar */
365 - padding-left: 4px;
366 - padding-right: 4px;
367 -}
368 -
369 -#frm_edit_box_content_modal .frm_modal_footer {
370 - padding-top: var(--gap-sm);
371 - border-top: 1px solid var(--grey-300);
372 -}
373 -
374 -#frm_edit_box_content_modal .frm_modal_footer > div {
375 - display: flex;
376 - justify-content: space-between;
377 -}
378 -
379 -#frm_edit_box_content_modal #frm_modal_box_select_area,
380 -#frm_edit_box_content_modal #frm_box_content_wysiwyg_wrapper,
381 -#frm_edit_box_content_modal .frm_modal_content {
382 - max-height: calc(100vh - 176px) !important;
383 -}
384 -
385 -#frm_edit_box_content_modal #frm_modal_box_select_area {
386 - height: calc(100vh - 176px) !important;
387 -}
388 -
389 -#frm_edit_box_content_modal #wp-content-editor-tools {
390 - padding-top: 0;
391 -}
392 -
393 -#frm_edit_box_content_modal.frm-modal .postbox .frm-modal-title + div:last-child {
394 - right: var(--gap-md);
395 -}
396 -
397 -.frm_code_list.frm-full-hover .frm-dropdown-view a {
398 - flex-direction: row-reverse; /* Switch in the HTML */
399 -}
400 -
401 -#frm_view_editor_left.frm-right-panel .accordion-section-title:before {
402 - content: '' !important;
403 - margin: 0;
404 -}
405 -/** End Temporary View CSS */
406 -
407 242 .frm-upgrade-bar {
408 - background: rgba(188, 224, 253, 0.23);
243 + background: var(--sidebar-color);
409 244 border-bottom: 1px solid var(--sidebar-hover);
410 - padding: 3px 0 3px 40px;
245 + padding: 3px 0 3px 60px;
411 246 font-size: 95%;
412 247 }
413 248
414 249 .frm-upgrade-bar span {
@@ -415,27 +250,22 @@
415 250 opacity: .9;
416 251 }
417 252
418 253 a h1 .frmsvg {
419 - color: var(--grey-400);
420 - vertical-align: middle;
421 - min-width: var(--text-sm);
254 + color: var(--medium-grey);
255 + vertical-align: baseline;
422 256 }
423 257
424 -a .frmsvg {
425 - color: currentColor;
426 -}
427 -
428 258 .frm_wrap .view-switch a.current:before,
429 -.frm-white-body a,
430 -.frm_wrap a,
431 -.frm_wrap a i {
259 +a .frmsvg,
260 +.frm_wrap a i,
261 +.frm_wrap a {
432 262 color: var(--primary-color);
433 263 }
434 264
435 265 .frm_wrap a:active,
436 266 .frm_wrap a:hover {
437 - color: var(--primary-700);
267 + color: var(--primary-hover);
438 268 box-shadow: none;
439 269 }
440 270
441 271 .post-type-frm_display a:focus,
@@ -449,30 +279,34 @@
449 279 white-space: nowrap;
450 280 max-width: 250px;
451 281 overflow: hidden;
452 282 text-overflow: ellipsis;
453 - align-self: center;
454 283 }
455 284
456 -.post-type-frm_display .frm_top_left,
457 285 .frm_top_left.frm_top_wide {
458 286 max-width: 100%;
459 287 }
460 288
461 -.post-type-frm_display .frm_nav_bar .frm-header-logo,
462 -.frm_nav_bar .frm-header-logo {
463 - margin: 18px 0 10px;
289 +.frm-header-logo,
290 +.edit-php.post-type-frm_display .frm-header-logo {
291 + float: left;
292 + margin: 0 15px 0 0;
464 293 }
465 294
466 -#frm_top_bar .frm_form_nav {
467 - flex: 1;
295 +.frm-full-screen.post-type-frm_display .frm-header-logo,
296 +.post-type-frm_display .frm-header-logo,
297 +.frm_page_container .frm-header-logo {
298 + margin: 13px 0 0;
468 299 }
469 300
301 +.frm_page_container .frm-header-logo {
302 + margin-bottom: 6px;
303 +}
304 +
470 305 ul.frm_form_nav {
471 306 margin: 0 auto;
472 - padding-top: 18px;
307 + padding-top: 19px;
473 308 display: block;
474 - min-width: 240px;
475 309 }
476 310
477 311 .nav-tab-wrapper.frm_form_nav {
478 312 padding: 0 25px;
@@ -478,12 +312,16 @@
478 312 padding: 0 25px;
479 313 }
480 314
481 315 ul.frm_form_nav > li {
482 - margin: 0 min(3.5%, 32px) 0 0;
316 + margin: 0 3.5% 0 0;
483 317 display: inline-block;
484 318 }
485 319
320 +ul.frm_form_nav > li:last-of-type {
321 + margin-right: 0;
322 +}
323 +
486 324 .post-type-frm_display #advanced-sortables h2.hndle,
487 325 .post-type-frm_display #side-sortables h2.hndle,
488 326 .post-type-frm_display #normal-sortables h2.hndle,
489 327 .post-type-frm_display .frm_form_nav .nav-tab-active,
@@ -490,12 +328,13 @@
490 328 .frm_form_nav > li > a {
491 329 font-size: 1.3em;
492 330 text-decoration: none;
493 331 display: block;
494 - padding: 6px 2px 4px;
332 + padding: 5px 2px 15px;
495 333 font-weight: 500;
496 - color: var(--grey-700);
497 - border-bottom: 2px solid transparent;
334 + color: var(--dark-grey);
335 + border-bottom: 3px solid transparent;
336 + letter-spacing: 1px;
498 337 }
499 338
500 339 .post-type-frm_display.js .postbox .handlediv .toggle-indicator:before {
501 340 margin-top: 10px;
@@ -510,15 +349,18 @@
510 349 box-shadow: none;
511 350 }
512 351
513 352 .frm_form_nav > li > a {
514 - font-size: var(--text-md);
515 - font-weight: 400;
516 - color: var(--grey-500);
353 + font-size: 13px;
354 + text-transform: uppercase;
517 355 }
518 356
357 +.frm_form_nav > li > a:not(.frm_noallow) {
358 + opacity: 0.8;
359 +}
360 +
519 361 .frm_form_nav > li > a:hover {
520 - border-color: var(--primary-700);
362 + border-color: var(--primary-hover);
521 363 }
522 364
523 365 .frm_form_nav .frm-dropdown-menu a:hover {
524 366 background-color: #eaf2fa;
@@ -526,27 +368,25 @@
526 368
527 369 .post-type-frm_display .frm_form_nav .nav-tab-active,
528 370 .post-type-frm_display .frm_form_nav .nav-tab-active:hover,
529 371 .frm_form_nav > li a.current_page {
530 - color: var(--primary-500);
531 - border-color: var(--primary-500);
372 + color: var(--primary-color);
373 + border-color: var(--primary-color);
532 374 background: transparent;
533 375 opacity: 1;
534 - font-weight: 600;
535 376 }
536 377
537 378 .frm-full-close {
538 379 display: none;
539 - padding-left: var(--gap-md);
540 - border: 0 solid var(--grey-300);
541 - border-left-width: 1px; /* Make RTL a bit less maintenance */
380 + float: right;
381 + padding: 15px 0 14px 12px;
382 + border-left: 1px solid var(--grey-border);
542 383 height: 100%;
543 384 box-sizing: border-box;
544 385 }
545 386
546 387 .frm-full-screen .frm-full-close {
547 - display: flex;
548 - align-items: center;
388 + display: block;
549 389 }
550 390
551 391 .frm-full-close a {
552 392 display: block;
@@ -555,49 +395,57 @@
555 395 .frm-full-close .frmsvg {
556 396 font-size: 20px;
557 397 width: 20px;
558 398 height: 20px;
559 - color: var(--grey-500);
399 + padding: 5px;
400 + color: var(--grey);
560 401 }
561 402
562 -#frm_top_bar h1 {
403 +.edit-php.post-type-frm_display #frm_top_bar h1,
404 +.frm_wrap #frm_top_bar h1 {
405 + font-size: 22px;
563 406 font-weight: 400;
564 407 padding: 0;
565 408 margin: 0;
566 - color: var(--grey-900);
567 - display: inline-flex;
568 - gap: var(--gap-sm);
569 - align-items: center;
409 + color: var(--medium-grey);
410 + display: inline-block;
411 + line-height: 1.4;
412 +}
413 +
414 +.frm-full-screen.post-type-frm_display #frm_top_bar h1,
415 +.post-type-frm_display #frm_top_bar h1,
416 +.frm_page_container #frm_top_bar h1 {
417 + margin: 0 15px;
418 + padding: 20px 0 0;
570 419 text-align: left;
571 420 width: 200px;
421 + line-height: 1.16;
572 422 }
573 423
574 -#frm_top_bar h1 span {
424 +.frm-full-screen.post-type-frm_display #frm_top_bar h1 span,
425 +.post-type-frm_display #frm_top_bar h1 span,
426 +.frm_page_container #frm_top_bar h1 span {
427 + font-size: 19px;
575 428 max-width: 175px;
576 429 text-overflow: ellipsis;
577 430 overflow: hidden;
578 431 white-space: nowrap;
579 432 display: inline-block;
580 - vertical-align: bottom;
581 433 }
582 434
583 -#frm_top_bar ul.frm_form_nav,
584 -#frm_top_bar .frm-header-logo,
585 -#frm_top_bar #frm_bs_dropdown {
586 - align-self: center;
587 - margin-top: 0;
588 - margin-bottom: 0;
589 - padding-top: 0;
435 +#frm_top_bar h1,
436 +#frm_top_bar h2 {
437 + color: var(--medium-grey);
590 438 }
591 439
592 -#frm_top_bar .frm-header-logo {
593 - display: flex; /* Get rid of extra padding below logo */
440 +#frm_top_bar #frm_bs_dropdown {
441 + float: left;
594 442 }
595 443
596 444 #frm_top_bar h2 {
597 445 float: left;
598 - margin: 0 0 0 var(--gap-sm);
599 - padding: 2px 0 2px var(--gap-sm);
446 + margin: 0 0 0 15px;
447 + padding: 2px 0 2px 15px;
600 448 font-weight: normal;
601 449 border-left: 2px solid var(--grey);
602 450 }
603 451
@@ -605,19 +453,28 @@
605 453 margin-top: 0;
606 454 }
607 455
608 456 #frm-publishing {
457 + float: right;
458 + margin-top: 15px;
609 459 min-width: 225px;
610 - align-self: center;
611 - align-items: center;
612 - display: flex;
613 - flex-direction: row-reverse;
614 - gap: 0 var(--gap-sm);
615 - flex-wrap: wrap;
460 + max-width: 325px;
461 + min-height: 10px;
616 462 }
617 463
464 +#frm-publishing #publishing-action,
465 +#frm-publishing #preview-action,
466 +#frm-preview-action,
467 +#frm-publishing > input[type=submit],
468 +#frm-publishing > .button,
469 +#frm-publishing > button,
470 +#frm-embed-action {
471 + float: right;
472 + margin: 0 10px 0 0;
473 +}
474 +
618 475 .frm_wrap .postbox {
619 - border-color: var(--grey-300);
476 + border-color: var(--grey-border);
620 477 border-radius: 6px;
621 478 box-shadow: none;
622 479 }
623 480
@@ -625,9 +482,9 @@
625 482 cursor: default;
626 483 padding: 10px 20px;
627 484 margin: 0;
628 485 line-height: 1.4em;
629 - border-color: var(--grey-300);
486 + border-color: var(--grey-border);
630 487 }
631 488
632 489 .frm-pre-hndle {
633 490 font-size: 15px;
@@ -651,48 +508,16 @@
651 508 clear: both;
652 509 margin: 0;
653 510 }
654 511
655 -.frm_wrap .subsubsub a {
656 - line-height: var(--leading);
657 - font-size: var(--text-sm);
658 -}
659 -
660 -.frm-admin-page-styles .frm_page_container,
661 -.frm_wrap .frm_page_container { /* Use .frm_wrap to avoid messing up Views editor layout */
512 +.frm_wrap .frm_page_container {
662 513 height: calc( 100vh - 32px );
663 514 display: flex;
664 515 flex-direction: column;
665 516 overflow: hidden;
666 517 padding-top: 0;
667 - position: fixed;
668 - top: 32px;
669 - bottom: 0;
670 - left: 0;
671 - right: 0;
672 518 }
673 519
674 -.frm-admin-page-translate .frm_wrap .frm_page_container, .frm-admin-page-update_translations .frm_wrap .frm_page_container {
675 - position: static;
676 -}
677 -
678 -.auto-fold.frm-admin-page-styles .frm_page_container,
679 -.auto-fold .frm_wrap .frm_page_container {
680 - left: 160px;
681 -}
682 -
683 -.folded.frm-admin-page-styles .frm_page_container,
684 -.folded .frm_wrap .frm_page_container {
685 - left: 38px;
686 -}
687 -
688 -.frm-full-screen.frm-admin-page-styles .frm_page_container,
689 -.frm-full-screen .frm_wrap .frm_page_container {
690 - height: 100vh;
691 - top: 0;
692 - left: 0;
693 -}
694 -
695 520 .frm-full-screen.frm-admin-page-entries .frm_page_container,
696 521 .frm-new-entry .frm_page_container,
697 522 .frm-admin-page-reports .frm_page_container,
698 523 .frm_list_entry_page .frm_page_container {
@@ -703,22 +528,16 @@
703 528 .frm-new-entry .columns-2 {
704 529 border: none;
705 530 }
706 531
707 -.frm-white-body #frm_top_bar,
708 -.frm-white-body .columns-2 {
532 +.frm_wrap #frm_top_bar,
533 +.frm_wrap .columns-2 {
709 534 flex: 0 0 auto;
710 535 }
711 536
712 -.columns-2 .frm-right-panel + div {
713 - padding-bottom: var(--gap-md);
714 - border-left: 1px solid var(--sidebar-hover);
715 -}
716 -
717 -.columns-2 .frm-right-panel + div,
718 537 .frm_wrap #post-body-content {
719 538 padding-bottom: 0;
720 - padding-top: var(--gap-sm);
539 + padding-top: 20px;
721 540 margin-bottom: 0;
722 541 background: #fff;
723 542 width: auto;
724 543 float: none;
@@ -724,17 +543,16 @@
724 543 float: none;
725 544 flex: 2;
726 545 }
727 546
728 -.frm-white-body .columns-2 {
547 +.frm_wrap .columns-2 {
729 548 flex: 1;
730 549 display: flex;
731 550 overflow: hidden;
732 551 }
733 552
734 -.frm-white-body .columns-2 > div {
553 +.frm_wrap .columns-2 > div {
735 554 overflow-y: auto;
736 - box-sizing: border-box;
737 555 }
738 556
739 557 .frm_wrap .columns-2 .frm-right-panel,
740 558 .frm-right-panel {
@@ -781,9 +599,9 @@
781 599
782 600 .frm-default-switcher a.current,
783 601 .frm-default-switcher a.current .frmsvg,
784 602 .frm-default-switcher a.current i {
785 - color: var( --primary-500);
603 + color: var( --primary-color);
786 604 }
787 605
788 606 #new_fields,
789 607 .frm-has-modal,
@@ -794,12 +612,25 @@
794 612 .frm-inline-modal.postbox {
795 613 background: #fff;
796 614 }
797 615
616 +.frm_has_shortcodes > .frmsvg,
617 +.frm_has_shortcodes > i {
618 + top: 37px;
619 + right: 5px;
620 + margin-top: -9px;
621 + padding: 5px;
622 + font-size: 10px;
623 + height: 10px;
624 + width: 10px;
625 + line-height: 9px;
626 + font-weight: bold;
627 +}
628 +
798 629 .frm_has_shortcodes .frmsvg,
799 -.frm_has_shortcodes i:not([class*=mce-]) {
630 +.frm_has_shortcodes i {
800 631 position: absolute;
801 - color: var(--primary-500);
632 + color: var(--primary-color);
802 633 border-radius: 50%;
803 634 border: 1px solid transparent;
804 635 z-index: 100;
805 636 text-align: center;
@@ -812,11 +643,13 @@
812 643 }
813 644
814 645 #form_settings_page #frm_adv_info {
815 646 display: none;
647 + position: absolute;
816 648 top: 0;
817 - width: 310px;
818 - max-height: 315px;
649 + left: 0;
650 + width: 300px;
651 + max-height: 350px;
819 652 min-height: 200px;
820 653 overflow-y: scroll;
821 654 z-index: 100;
822 655 }
@@ -827,14 +660,10 @@
827 660 width: var(--small-sidebar);
828 661 min-width: var(--small-sidebar);
829 662 }
830 663
831 -#form_global_settings .frm_grid_container {
832 - gap: 0 var(--gap-md);
833 -}
834 -
835 664 .frm-inner-content {
836 - padding: var(--gap-md);
665 + padding: 10px 25px;
837 666 }
838 667
839 668 .post-type-frm_display #poststuff {
840 669 padding: 0 0 10px 40px;
@@ -900,17 +729,17 @@
900 729 }
901 730
902 731 .frm-right-panel .frm_field_list #frm-insert-fields {
903 732 max-height: none;
904 - font-size: var(--text-sm);
733 + font-size: 14px;
905 734 padding: 0;
906 735 }
907 736
908 737 .frm-nav-tabs {
909 738 margin: 10px 0 20px;
910 - padding: 0 var(--gap-sm);
739 + padding: 0 15px;
911 740 display: block;
912 - border-bottom: 1px solid var(--grey-300);
741 + border-bottom: 2px solid var(--sidebar-hover);
913 742 }
914 743
915 744 #frm-nav-tabs {
916 745 position: -webkit-sticky;
@@ -921,20 +750,11 @@
921 750 margin-top: 0;
922 751 padding-top: 5px;
923 752 }
924 753
925 -.frm_form_settings #frm_adv_info #frm-nav-tabs {
926 - background-color: #fff;
927 - margin: 0 -4px;
928 -}
929 -
930 -.frm_form_settings span.frm-with-right-icon {
931 - display: block;
932 -}
933 -
934 754 .frm-inline-modal .frm-nav-tabs,
935 755 #frm_adv_info .frm-nav-tabs {
936 - margin: 5px 0 0;
756 + margin: 5px 0 10px;
937 757 }
938 758
939 759 #frm_adv_info .frm-nav-tabs.frm-compact-nav {
940 760 padding-right: 0;
@@ -942,23 +762,19 @@
942 762 }
943 763
944 764 .frm-nav-tabs li {
945 765 display: inline-block;
766 + font-size: 15px;
946 767 margin: 0;
947 768 }
948 769
949 770 .frm-nav-tabs a {
950 - color: var(--grey-700);
771 + color: var(--dark-grey);
951 772 padding: 10px 1px;
952 773 margin: 0 9px;
953 774 border-bottom: 2px solid transparent;
954 775 }
955 776
956 -.frm_form_settings #frm_adv_info .frm-nav-tabs a {
957 - padding: 5px 1px;
958 - color: var(--grey-500);
959 -}
960 -
961 777 .frm-nav-tabs.frm-compact-nav a {
962 778 margin: 0 5px;
963 779 }
964 780
@@ -967,24 +783,20 @@
967 783 opacity: .9;
968 784 }
969 785
970 786 #frm_adv_info .frm-nav-tabs a {
971 - color: var(--grey-700);
787 + color: var(--dark-grey);
972 788 }
973 789
974 790 .frm-nav-tabs a:hover,
975 791 .frm-nav-tabs .frm-tabs a {
976 - color: var(--primary-500) !important;
977 - border-color: var(--primary-500);
792 + color: var(--primary-color) !important;
793 + border-color: var(--primary-color);
978 794 }
979 795
980 -.frm_form_settings #frm_adv_info .frm-nav-tabs .frm-tabs a {
981 - font-weight: 500;
982 -}
983 -
984 796 #frm-bulk-modal .howto,
985 797 #frm-bulk-modal h3 {
986 - font-size: var(--text-sm);
798 + font-size: 14px;
987 799 font-weight: 400;
988 800 margin: 5px 0 10px;
989 801 color: var(--grey);
990 802 }
@@ -992,12 +804,11 @@
992 804 #frm-bulk-modal h3 {
993 805 margin-left: 20px;
994 806 }
995 807
996 -.frm-right-panel a.frm_add_logic_link,
997 808 .frm-right-panel h3 {
998 - color: var(--grey-700);
999 - font-size: var(--text-lg);
809 + color: var(--dark-grey);
810 + font-size: 20px;
1000 811 font-weight: 400;
1001 812 border-top: 2px solid var(--sidebar-hover);
1002 813 margin: 0;
1003 814 }
@@ -1007,17 +818,10 @@
1007 818 border-top: none;
1008 819 padding-top: 0 !important;
1009 820 }
1010 821
1011 -.frm-flex-justify,
1012 -.frm-right-panel .frm-single-settings h3 {
1013 - display: flex;
1014 - justify-content: space-between;
1015 - align-items: center;
1016 -}
1017 -
1018 822 .frm-right-panel h3 i {
1019 - color: var(--grey-700);
823 + color: var(--dark-grey);
1020 824 float: right;
1021 825 width: 16px;
1022 826 cursor: pointer;
1023 827 }
@@ -1079,12 +883,8 @@
1079 883 .frm_wrap #frm-categorydiv {
1080 884 border-right: none;
1081 885 }
1082 886
1083 -#frm_adv_info #frm-conditionals {
1084 - padding-top: var(--gap-sm);
1085 -}
1086 -
1087 887 #postbox-container-1 #taxonomy-linkcategory #frm-html-tags {
1088 888 display: none;
1089 889 max-height: none;
1090 890 }
@@ -1092,53 +892,12 @@
1092 892 #postbox-container-1 .frm_field_list #frm-insert-fields .frmbutton.dropdown {
1093 893 position: relative;
1094 894 }
1095 895
1096 -/* Admin footer */
1097 -.frm-white-body #footer-upgrade {
896 +.toplevel_page_formidable #footer-upgrade {
1098 897 display: none;
1099 898 }
1100 899
1101 -.frm-admin-footer-links,
1102 -.frm-admin-footer-links-nav,
1103 -.frm-admin-footer-links-socials {
1104 - display: flex;
1105 - justify-content: center;
1106 -}
1107 -
1108 -.frm-admin-footer-links {
1109 - gap: var(--gap-2xs);
1110 - flex-direction: column;
1111 - text-align: center;
1112 - padding: var(--gap-xl) 0 var(--gap-lg) 160px;
1113 - font-size: var(--text-xs);
1114 - color: var(--grey-400);
1115 -}
1116 -
1117 -body.rtl .frm-admin-footer-links {
1118 - padding-left: unset;
1119 - padding-right: 160px;
1120 -}
1121 -
1122 -body.frm-hidden-overflow {
1123 - height: 100%;
1124 - overflow: hidden;
1125 -}
1126 -
1127 -.frm-admin-footer-links-nav {
1128 - gap: var(--gap-2xs);
1129 - margin-bottom: var(--gap-xs);
1130 -}
1131 -
1132 -.frm-admin-footer-links-socials {
1133 - gap: var(--gap-xs);
1134 -}
1135 -
1136 -.frm-admin-footer-links-socials a {
1137 - color: var(--grey-400);
1138 -}
1139 -/* End Admin footer */
1140 -
1141 900 .frm_list_entry_page h2 {
1142 901 float: left;
1143 902 }
1144 903
@@ -1145,8 +904,13 @@
1145 904 .frm_list_entry_page h2 + .error {
1146 905 clear: both;
1147 906 }
1148 907
908 +#titlediv #title {
909 + line-height: 1.5;
910 + height: auto;
911 +}
912 +
1149 913 .frm_sidebar select {
1150 914 width: 100%;
1151 915 margin-left: 0;
1152 916 margin-right: 0;
@@ -1183,12 +947,14 @@
1183 947
1184 948 /* Buttons */
1185 949
1186 950 .frm_orange_button,
1187 -.frm_reverse_button {
951 +.frm_reverse_button,
952 +.post-type-frm_display .wrap .add-new-h2 {
1188 953 font-size: 12px;
1189 954 border: 1px solid var(--orange);
1190 955 color: var(--orange);
956 + line-height: 1.4;
1191 957 font-weight: 600;
1192 958 padding: 1px 4px;
1193 959 border-radius: 4px;
1194 960 background: transparent;
@@ -1193,11 +959,33 @@
1193 959 border-radius: 4px;
1194 960 background: transparent;
1195 961 }
1196 962
963 +.post-type-frm_display .wrap .add-new-h2 {
964 + margin: 1px 0 0 10px;
965 + text-transform: lowercase;
966 + position: initial;
967 + vertical-align: middle;
968 +}
969 +
970 +h1 .frm-button-secondary,
971 +h1 .frm-button-primary,
972 +h2 .frm-button-secondary,
973 +h2 .frm-button-primary {
974 + font-size: 14px !important;
975 + font-weight: normal;
976 + margin: 0 5px !important;
977 + line-height: 25px !important;
978 + vertical-align: text-bottom !important;
979 + height: auto !important;
980 +}
981 +
1197 982 .frm_reverse_button:hover,
1198 983 .frm_reverse_button:active,
1199 -.frm_reverse_button:focus {
984 +.frm_reverse_button:focus,
985 +.post-type-frm_display .wrap .add-new-h2:hover,
986 +.post-type-frm_display .wrap .add-new-h2:active,
987 +.post-type-frm_display .wrap .add-new-h2:focus {
1200 988 color: #fff;
1201 989 background: var(--orange);
1202 990 border: 1px solid var(--orange);
1203 991 }
@@ -1208,108 +996,42 @@
1208 996 }
1209 997
1210 998 .frm-button-primary,
1211 999 .wp-core-ui .button-primary.frm-button-primary,
1212 -.wp-core-ui .button.frm-button-primary,
1213 1000 .frm-button-secondary,
1214 1001 .wp-core-ui .button-secondary.frm-button-secondary,
1215 1002 .wp-core-ui .button.frm-button-secondary,
1216 -.frm-white-body .frm-search .button,
1217 -.frm-white-body .search-box .button, /* Views */
1218 -.frm-white-body .tablenav .button,
1219 1003 .frm_orange_button,
1220 1004 .toplevel_page_formidable #frm_upgrade_modal .button-primary,
1005 +#form_global_settings .button-secondary,
1221 1006 .wp-core-ui.frm-white-body .button-primary,
1222 1007 .wp-core-ui.frm-white-body .button-secondary,
1223 1008 .frm-white-body .button-primary,
1224 1009 .frm-white-body .button-secondary,
1225 -#frm-form-button button,
1226 -.frm-preview-buttons button,
1227 -.frm-button-red,
1228 -.frm-button-tertiary {
1010 +.wp-core-ui.frm-white-body .button:not(.button-small),
1011 +.frm-white-body button:not(.wp-switch-editor):not(.dropdown-toggle):not(.media-menu-item):not(.media-modal-close):not(.frm_no_style_button){
1229 1012 text-shadow: none;
1230 1013 box-shadow: none;
1231 1014 border-radius: 30px;
1232 - border: 1px solid var(--primary-500);
1233 - font-size: var(--text-sm);
1015 + border-color: var(--primary-color);
1016 + font-size: 1em;
1234 1017 transition: all .2s ease;
1235 - padding: 7px 16px;
1236 - height: auto;
1018 + padding: 0 15px;
1019 + height: 28px;
1237 1020 min-height: 28px;
1238 1021 outline: none;
1239 - line-height: var(--leading);
1240 - box-sizing: border-box;
1241 - font-weight: 500;
1242 - margin-bottom: 0;
1243 - display: inline-block;
1022 + line-height: 26px;
1244 1023 }
1245 1024
1246 -.frm-button-tertiary {
1247 - border-color: transparent;
1248 - color: var(--primary-500);
1249 -}
1250 -
1251 -.frm-button-red,
1252 -.frm-button-red:focus {
1253 - color: #fff !important;
1254 - --primary-500: var(--error-500);
1255 - --primary-700: var(--error-700);
1256 -}
1257 -
1258 -.frm-white-body h2 .button,
1259 -.post-type-frm_display h2 .frm-button-primary,
1260 -.frm-white-body .tablenav .button,
1261 -.frm-button-primary.frm-button-sm,
1262 -.frm-button-secondary.frm-button-sm,
1263 -.frm-button-tertiary.frm-button-sm,
1264 -.frm-button-red.frm-button-sm {
1265 - padding: 4px 12px !important;
1266 - font-size: var(--text-xs) !important;
1267 -}
1268 -
1269 -.frm_no_style_button {
1270 - background: transparent;
1271 -}
1272 -
1273 -.frm-with-icon {
1274 - display: flex;
1275 - gap: var(--gap-xs);
1276 - align-items: center;
1277 -}
1278 -
1279 -.frm-with-icon svg {
1280 - opacity: .65; /* Get close to grey-500 without overriding hover colors */
1281 -}
1282 -
1283 -.frm-with-icon.button svg {
1284 - height: var(--text-sm);
1285 - width: var(--text-sm);
1286 -}
1287 -
1288 -.frm-with-icon.frm-button-sm svg {
1289 - height: var(--text-xs);
1290 - width: var(--text-xs);
1291 -}
1292 -
1293 -.frm-white-body .button.add_media {
1294 - /* Media buttons above RTE */
1295 - padding-left: 12px !important;
1296 - padding-right: 12px !important;
1297 - font-size: var(--text-xs);
1298 - border-radius: var(--border-radius);
1299 -}
1300 -
1301 1025 .wp-core-ui.frm-white-body #post-query-submit.button,
1302 -.wp-core-ui.frm-white-body .button.tablenav-pages-navspan,
1303 1026 .wp-core-ui.frm-white-body .button.first-page,
1304 1027 .wp-core-ui.frm-white-body .button.prev-page,
1305 1028 .wp-core-ui.frm-white-body .button.next-page,
1306 1029 .wp-core-ui.frm-white-body .button.last-page,
1307 1030 .wp-core-ui.frm-white-body .button.action {
1308 - background-color: transparent;
1309 - border-color: var(--grey-300);
1310 - color: var(--grey-700);
1311 - border-radius: var(--border-radius);
1031 + background-color: var(--lightest-grey);
1032 + border-color: var(--grey-border);
1033 + color: var(--dark-grey);
1312 1034 }
1313 1035
1314 1036 .post-type-frm_display.wp-core-ui .button-primary,
1315 1037 .frm-button-primary,
@@ -1314,16 +1036,16 @@
1314 1036 .post-type-frm_display.wp-core-ui .button-primary,
1315 1037 .frm-button-primary,
1316 1038 .wp-core-ui .button-primary.frm-button-primary,
1317 1039 .frm_single_entry_page .button-primary {
1318 - background-color: var(--primary-500) !important;
1040 + background-color: var(--primary-color) !important;
1319 1041 color: #fff !important;
1320 1042 }
1321 1043
1322 1044 .frm-button-primary.frm_large{
1323 - font-size: var(--text-md) !important;
1045 + font-size: 22px !important;
1324 1046 height: auto !important;
1325 - padding: 9px 18px !important;
1047 + padding: 16px 32px !important;
1326 1048 }
1327 1049
1328 1050 .frm-button-primary i:before {
1329 1051 color: #fff;
@@ -1330,10 +1052,10 @@
1330 1052 }
1331 1053
1332 1054 .wp-core-ui .button-primary.frm-button-primary:hover,
1333 1055 .frm-button-primary:hover {
1334 - background: var(--primary-700) !important;
1335 - border-color: var(--primary-700) !important;
1056 + background: var(--primary-hover) !important;
1057 + border-color: var(--primary-hover) !important;
1336 1058 }
1337 1059
1338 1060 .wp-core-ui .button-primary.frm-button-primary:active {
1339 1061 vertical-align: inherit;
@@ -1338,25 +1060,20 @@
1338 1060 .wp-core-ui .button-primary.frm-button-primary:active {
1339 1061 vertical-align: inherit;
1340 1062 }
1341 1063
1342 -.frm-white-body #search-submit,
1343 1064 #frm-form-button .frm_button_submit,
1344 -.frm-white-body .frm-preview-buttons button,
1345 -.frm-white-body .button:not(.frm-button-primary),
1346 1065 .wp-core-ui.frm-white-body .button-secondary,
1347 1066 .wp-core-ui .button-secondary.frm-button-secondary,
1348 1067 .wp-core-ui .button.frm-button-secondary,
1349 -.frm-white-body .frm-button-secondary,
1350 1068 .frm-button-secondary {
1351 - color: var(--grey-800);
1352 - border-color: var(--grey-300);
1353 - background-color: #fff;
1069 + color: var(--primary-color);
1070 + background-color: transparent;
1354 1071 }
1355 1072
1356 1073 #wp-content-media-buttons button,
1357 1074 #wp-content-media-buttons a.button {
1358 - border-color: var(--grey-300);
1075 + border-color: var(--grey-border);
1359 1076 }
1360 1077
1361 1078 .frm_orange_button {
1362 1079 border-color: #da791d !important;
@@ -1363,23 +1080,26 @@
1363 1080 background: var(--orange);
1364 1081 color: #fff;
1365 1082 }
1366 1083
1367 -.frm-white-body .button:not(.frm-button-primary):focus,
1368 -.frm-white-body .button:not(.frm-button-primary):active,
1369 -.frm-white-body .frm-button-secondary:hover,
1370 1084 .wp-core-ui.frm-white-body .frm-button-secondary:hover,
1371 1085 .wp-core-ui.frm-white-body .button-secondary:hover,
1372 1086 .wp-core-ui.frm-white-body .button-secondary:focus,
1373 -.wp-core-ui.frm-white-body .tablenav .button:hover,
1374 1087 .frm_wrap .preview > .button:hover {
1375 - border-color: var(--grey-300) !important;
1376 - color: var(--grey-800);
1377 - background: var(--grey-50) !important;
1378 - box-shadow: none !important;
1379 - outline: none !important;
1088 + border-color: var(--primary-hover) !important;
1089 + background: var(--primary-hover) !important;
1090 + color: #fff;
1091 + box-shadow: none;
1380 1092 }
1381 1093
1094 +.frm-with-plus {
1095 + padding-left: 10px !important;
1096 +}
1097 +
1098 +.frm-with-plus .frmsvg {
1099 + margin-right: 5px;
1100 +}
1101 +
1382 1102 .frm-button-primary .frmsvg {
1383 1103 color: #fff;
1384 1104 }
1385 1105
@@ -1386,20 +1106,23 @@
1386 1106 .frm_wrap .preview i {
1387 1107 font-size: inherit;
1388 1108 }
1389 1109
1390 -.frm-white-body .frm-button-primary:focus,
1391 -.frm-white-body .frm-button-primary:active,
1110 +.wp-core-ui.frm-white-body .frm-button-secondary:hover .frmsvg,
1111 +.frm_wrap .preview > .button:hover .frmsvg,
1112 +.wp-core-ui.frm-white-body .frm-button-secondary:hover i,
1113 +.frm_wrap .preview > .button:hover i {
1114 + color: #fff;
1115 +}
1116 +
1392 1117 #frm-addons-page .button-primary:focus,
1393 1118 #form_global_settings .button-primary:focus,
1394 -#frm_upgrade_modal .button:focus {
1395 - border-color: var(--primary-700) !important;
1396 - background-color: var(--primary-700) !important;
1397 - box-shadow: none !important;
1398 - outline: none !important;
1119 +#frm_upgrade_modal .button:focus,
1120 +.frm_wrap .preview > .button:focus {
1121 + border-color: var(--primary-hover) !important;
1122 + outline: none;
1399 1123 }
1400 1124
1401 -.frm_wrap .preview > .button:focus,
1402 1125 .frm_orange_button:hover,
1403 1126 .frm_orange_button:focus,
1404 1127 .toplevel_page_formidable #frm_upgrade_modal .button-primary:hover,
1405 1128 .toplevel_page_formidable #frm_upgrade_modal .button-primary:focus,
@@ -1447,9 +1170,9 @@
1447 1170 }
1448 1171
1449 1172 .frm-review-notice.notice form,
1450 1173 .frm-review-notice.notice p {
1451 - font-size: var(--text-sm);
1174 + font-size: 14px;
1452 1175 max-width: 600px;
1453 1176 margin-left: auto;
1454 1177 margin-right: auto;
1455 1178 }
@@ -1454,14 +1177,17 @@
1454 1177 margin-right: auto;
1455 1178 }
1456 1179
1457 1180 .frm-review-notice a {
1458 - margin: 0 var(--gap-xs) !important;
1181 + margin: 5px;
1459 1182 }
1460 1183
1461 1184 .frm-review-notice .frm-button-primary,
1462 1185 .frm-review-notice .frm-button-secondary {
1463 1186 min-width: 100px;
1187 + display: inline-block;
1188 + text-align: center;
1189 + padding: 2px 10px;
1464 1190 }
1465 1191
1466 1192 .frm-review-notice p > span {
1467 1193 font-size: 13px;
@@ -1468,9 +1194,9 @@
1468 1194 opacity: 0.75;
1469 1195 }
1470 1196
1471 1197 #frmapi-feedback {
1472 - margin-top: var(--gap-lg);
1198 + margin-top: 30px;
1473 1199 }
1474 1200
1475 1201 .frm-review-notice .frm_error,
1476 1202 .frm-review-notice label {
@@ -1478,112 +1204,12 @@
1478 1204 text-align: left;
1479 1205 }
1480 1206
1481 1207 .frm-review-notice label {
1482 - font-size: var(--text-sm);
1208 + font-size: 14px;
1483 1209 }
1484 1210
1485 -.frm-floating-success-message {
1486 - border-radius: 4px;
1487 - right: 10px !important;
1488 - bottom: 10px !important;
1489 -}
1490 -
1491 1211 /* Generic Classes */
1492 -.frm_no_margin, /* deprecated */
1493 -.frm-m-0 {
1494 - margin: 0 !important;
1495 -}
1496 -
1497 -.frm-m-12 {
1498 - margin: var(--gap-2xl);
1499 -
1500 -}
1501 -
1502 -.frm_no_top_margin, /* deprecated */
1503 -.frm-mt-0 {
1504 - margin-top: 0 !important;
1505 -}
1506 -
1507 -.frm_no_bottom_margin, /* deprecated */
1508 -.frm-mb-0 {
1509 - margin-bottom: 0 !important;
1510 -}
1511 -
1512 -.frm-mb-sm {
1513 - margin-bottom: var(--gap-sm) !important;
1514 -}
1515 -
1516 -.frm-mb-md {
1517 - margin-bottom: var(--gap-md) !important;
1518 -}
1519 -
1520 -.frm-mb-lg {
1521 - margin-bottom: var(--gap-lg) !important;
1522 -}
1523 -
1524 -.frm-mx-sm {
1525 - margin-left: var(--gap-sm) !important;
1526 - margin-right: var(--gap-sm) !important;
1527 -}
1528 -
1529 -.frm-p-1 {
1530 - padding: 4px;
1531 -}
1532 -
1533 -.frm-p-4 {
1534 - padding: var(--gap-sm);
1535 -}
1536 -
1537 -.frm-p-6 {
1538 - padding: var(--gap-md);
1539 -}
1540 -
1541 -.frm-text-md {
1542 - font-size: var(--text-md);
1543 -}
1544 -
1545 -.frm-text-lg {
1546 - font-size: var(--text-lg);
1547 -}
1548 -
1549 -.frm-text-xl {
1550 - font-size: var(--text-xl);
1551 -}
1552 -
1553 -.frm-w-auto {
1554 - width: auto !important;
1555 -}
1556 -
1557 -.frm-w-full {
1558 - width: 100% !important;
1559 -}
1560 -
1561 -.frm-flex-box {
1562 - display: flex;
1563 - gap: var(--gap-sm);
1564 -}
1565 -
1566 -.frm-gap-xs {
1567 - gap: var(--gap-xs);
1568 -}
1569 -
1570 -.frm-gap-sm {
1571 - gap: var(--gap-sm);
1572 -}
1573 -
1574 -.frm-gap-md {
1575 - gap: var(--gap-md);
1576 -}
1577 -
1578 -.frm-justify-between {
1579 - justify-content: space-between;
1580 -}
1581 -
1582 -.frm-transition-ease {
1583 - transition: all .2s ease;
1584 -}
1585 -
1586 1212 .frm_invisible {
1587 1213 visibility: hidden;
1588 1214 transition: all .2s ease;
1589 1215 }
@@ -1591,10 +1217,10 @@
1591 1217 .frm_no_float {
1592 1218 float: none;
1593 1219 }
1594 1220
1595 -.frm_block, /* deprecated */
1596 -.frm-block {
1221 +.frm_block,
1222 +.frm_no_section_fields.frm_block {
1597 1223 display: block;
1598 1224 }
1599 1225
1600 1226 .frm_inline {
@@ -1604,81 +1230,81 @@
1604 1230 .frm_inline_block {
1605 1231 display: inline-block !important;
1606 1232 }
1607 1233
1234 +.frm-lookup-modal .dismiss,
1235 +.frm-right-panel .inside a.frm_hidden,
1236 +ul.frm_form_nav > li.frm_hidden,
1237 +a.frm_hidden,
1238 +.button.frm_hidden,
1239 +.wp-core-ui .button.frm_hidden,
1608 1240 .frm_hidden {
1609 1241 display: none;
1610 1242 }
1611 1243
1612 -.frm-text-right {
1613 - text-align: right;
1244 +.frm_no_margin {
1245 + margin: 0;
1614 1246 }
1615 1247
1616 -.frm-border-b {
1617 - border-bottom: 1px solid var(--grey-300);
1248 +.frm_no_top_margin {
1249 + margin-top: 0 !important;
1618 1250 }
1619 1251
1620 -.frm-no-border {
1621 - border: none !important;
1252 +.postbox .inside > p.frm_no_bottom_margin:last-child,
1253 +.frm_no_bottom_margin {
1254 + margin-bottom: 0 !important;
1622 1255 }
1623 1256
1624 -.frm-opacity-100 {
1625 - opacity: 1;
1257 +.frm_tiny_top_margin {
1258 + margin-top: 1px;
1626 1259 }
1627 1260
1628 -.frm-on-bottom {
1629 - z-index: -1;
1261 +.frm_small_top_margin {
1262 + margin-top: 5px;
1630 1263 }
1631 -/* End Generic Classes, Start Forced Generic Classes */
1632 1264
1633 -.frm-fields p > label.frm_hidden,
1634 -.frm-lookup-modal .dismiss,
1635 -.frm-right-panel .inside a.frm_hidden,
1636 -#form_global_settings .frm_hidden,
1637 -ul.frm_form_nav > li.frm_hidden,
1638 -a.frm_hidden,
1639 -.button.frm_hidden,
1640 -.wp-core-ui .button.frm_hidden {
1641 - display: none;
1265 +.frm_cursor_pointer {
1266 + cursor: pointer;
1642 1267 }
1643 1268
1644 -.postbox .inside > p.frm_no_bottom_margin:last-child {
1645 - margin-bottom: 0 !important;
1269 +.frm_right_text {
1270 + text-align: right;
1646 1271 }
1647 1272
1648 -.frm_no_section_fields.frm_block {
1649 - display: block;
1273 +.frm_submit .frm_full_opacity, .frm_full_opacity {
1274 + opacity: 1;
1650 1275 }
1651 1276
1277 +.frm_med_padding {
1278 + padding: 10px;
1279 +}
1280 +
1652 1281 .actions.frm_visible_overflow {
1653 1282 overflow: visible !important;
1654 1283 }
1655 1284
1656 -.frm_full_opacity, /* deprecated */
1657 -.frm_submit .frm_full_opacity,
1658 -.frm_submit .frm-opacity-100 {
1659 - opacity: 1;
1660 -}
1661 -
1662 1285 .frm-dropdown-menu.frm-on-top {
1663 1286 z-index: 99999;
1664 1287 }
1665 1288
1666 -/* End Forced Generic Classes */
1289 +.frm-on-bottom {
1290 + z-index: -1;
1291 +}
1667 1292
1668 1293 .frm_forms.with_frm_style {
1669 1294 max-width: 100%;
1670 1295 }
1671 1296
1297 +.post-type-frm_display .wrap > #posts-filter,
1672 1298 .post-type-frm_display .wrap > .subsubsub,
1673 1299 .post-type-frm_display .wrap > .icl_subsubsub,
1674 1300 .frm_form_settings > p {
1675 - margin: 6px var(--gap-md);
1301 + margin: 6px 40px;
1676 1302 padding: 0;
1677 1303 }
1678 1304
1679 1305 .frm-entry-container {
1680 - margin: 0 40px 40px;
1306 + margin: 20px 40px 40px;
1681 1307 padding: 0;
1682 1308 }
1683 1309
1684 1310 #form_reports_page .frm-inner-content {
@@ -1692,24 +1318,24 @@
1692 1318 clear: both;
1693 1319 }
1694 1320
1695 1321 .post-type-frm_display h2,
1696 -.frm_wrap h2 {
1697 - margin-top: 0 !important;
1698 - font-size: var(--text-lg);
1699 - line-height: var(--leading);
1322 +.frm_page_container h2 {
1323 + margin: 10px 0 !important;
1324 + color: var(--medium-grey);
1325 + font-weight: 500;
1326 + font-size: 19px;
1700 1327 }
1701 1328
1702 1329 .post-type-frm_display .wrap > h2:first-child,
1703 -.frm_wrap .wrap > h2:first-child {
1704 - padding-top: 0;
1330 +.frm_page_container .wrap > h2:first-child {
1705 1331 margin-top: 0 !important;
1706 - font-size: var(--text-lg);
1332 + font-size: 22px;
1707 1333 }
1708 1334
1709 1335 #frm_form_editor_container {
1710 1336 position: relative;
1711 - margin-top: 28px;
1337 + margin: 25px 50px 50px;
1712 1338 }
1713 1339
1714 1340 .form-field p {
1715 1341 /* for conflicts */
@@ -1722,30 +1348,21 @@
1722 1348 float: none;
1723 1349 width: auto;
1724 1350 }
1725 1351
1726 -#frm_view_editor_left label, /* Views */
1727 -#frm_view_editor_left .frm_primary_label, /* Views */
1728 -.frm-dialog .frm-sub-label,
1729 -.frm-dialog label,
1730 -.dropdown .frm_primary_label,
1731 1352 .accordion-container label,
1732 1353 .frm-fields td > label,
1733 1354 .frm-fields td > div > label,
1734 -.frm_form_field > label:first-child,
1735 1355 .frm-fields p > label,
1736 -.frm_on_submit_type > label,
1737 1356 .post-type-frm_display .frm_form_field > label,
1738 1357 #new_fields .frm_primary_label,
1739 -#form_global_settings .frm_primary_label,
1740 1358 #frm_form_editor_container .frm_primary_label {
1741 - color: var(--grey-700);
1359 + color: var(--dark-grey);
1742 1360 margin: 0 0 3px;
1743 1361 padding: 0;
1744 1362 width: auto;
1745 - font-size: var(--text-sm);
1363 + font-size: 14px;
1746 1364 display: block;
1747 - line-height: var(--leading);
1748 1365 }
1749 1366
1750 1367 .frm-fields td input + label {
1751 1368 display: inline;
@@ -1763,9 +1380,9 @@
1763 1380 .with_frm_style form .form-field {
1764 1381 margin-bottom: 20px;
1765 1382 }
1766 1383
1767 -#frm_builder_page .with_frm_style form .frm_combo_inputs_container > .form-field {
1384 +.with_frm_style form .frm_combo_inputs_container > .form-field {
1768 1385 margin-bottom: 0;
1769 1386 }
1770 1387
1771 1388 .frm_description,
@@ -1780,18 +1397,11 @@
1780 1397 color: inherit;
1781 1398 }
1782 1399
1783 1400 #frm_form_editor_container .divider_section_only .frm_primary_label {
1784 - display: flex;
1785 - align-items: center;
1786 - gap: var(--gap-xs);
1787 1401 font-size: 20px;
1788 1402 }
1789 1403
1790 -#frm_form_editor_container .divider_section_only .frm_primary_label .frm-sub-label {
1791 - padding: 0;
1792 -}
1793 -
1794 1404 form .form-field.frm_field_loading {
1795 1405 margin-bottom: 0;
1796 1406 min-height: 0;
1797 1407 padding: 0;
@@ -1879,8 +1489,14 @@
1879 1489 max-width: 700px;
1880 1490 margin: 20px auto !important;
1881 1491 }
1882 1492
1493 +.upgrade_to_pro h1,
1494 +.upgrade_to_pro h3,
1495 +.upgrade_to_pro {
1496 + color: #444;
1497 +}
1498 +
1883 1499 .upgrade_to_pro .error {
1884 1500 display: none;
1885 1501 }
1886 1502
@@ -1890,19 +1506,19 @@
1890 1506 }
1891 1507
1892 1508 .frm_error_style,
1893 1509 .frm_warning_style,
1894 -.frm_note_style,
1895 1510 .frm_message,
1896 1511 #post-body-content .frm_updated_message,
1897 1512 div.frm_updated_message {
1898 - border-radius: var(--small-radius);
1899 - background-color: #D5F2DC;
1900 - color: #1E561F;
1901 - padding: var(--gap-sm) var(--gap-md);
1902 - font-size: var(--text-sm);
1903 - margin: var(--gap-sm) 0;
1904 - text-align: left;
1513 + border-radius: var(--border-radius);
1514 + border: 1px solid #D6E9C6;
1515 + background-color: #DFF0D8;
1516 + color: #468847;
1517 + padding: 5px 25px;
1518 + font-size: 14px;
1519 + margin: 5px 0 15px;
1520 + text-align: center;
1905 1521 }
1906 1522
1907 1523 #frm_top_bar + .wrap > .frm_updated_message, #frm_top_bar + .wrap > .frm_warning_style {
1908 1524 display: inline-block;
@@ -1913,20 +1529,21 @@
1913 1529 #post-body-content > .frm_updated_message {
1914 1530 margin: 5px 65px;
1915 1531 }
1916 1532
1917 -#form_global_settings #post-body-content > .frm_updated_message,
1918 -#form_global_settings #post-body-content > .frm_warning_style {
1533 +#form_global_settings .frm_updated_message {
1919 1534 margin: 5px 25px;
1920 1535 }
1921 1536
1922 1537 .frm_error_style {
1923 1538 color: #973937;
1924 - background-color: #EBCCCC;
1539 + border-color: #F2DEDE;
1540 + background-color: #F2DEDE;
1925 1541 clear: both;
1926 1542 }
1927 1543
1928 1544 .frm_error_style a {
1545 + color: #973937;
1929 1546 text-decoration: underline;
1930 1547 font-weight: 600;
1931 1548 }
1932 1549
@@ -1934,10 +1551,14 @@
1934 1551 opacity: .7;
1935 1552 }
1936 1553
1937 1554 .frm_warning_style {
1938 - color: #7A4D05;
1939 - background-color: #FFF2D2;
1555 + color: #8B6E3C;
1556 + border-color: #FBECCD;
1557 + background-color: #FDF9E3;
1558 + border-radius: 10px;
1559 + text-align: left;
1560 + padding-top: 5px;
1940 1561 }
1941 1562
1942 1563 .frm_warning_heading{
1943 1564 font-weight: bold;
@@ -1943,57 +1564,17 @@
1943 1564 font-weight: bold;
1944 1565 margin-bottom:4px;
1945 1566 }
1946 1567
1947 -/* Warning message dismiss */
1948 -.frm_warning_style {
1949 - position: relative;
1950 - padding-right: calc(var(--gap-md) + 15px);
1951 -}
1952 -
1953 -body.rtl .frm_warning_style {
1954 - padding-right: var(--gap-md);
1955 - padding-left: calc(var(--gap-md) + 15px);
1956 -}
1957 -
1958 -.frm-warning-dismiss {
1959 - position: absolute;
1960 - top: 10px;
1961 - right: 10px;
1962 - display: flex;
1963 - cursor: pointer;
1964 - transition: opacity 0.2s ease-out;
1965 -}
1966 -
1967 -body.rtl .frm-warning-dismiss {
1968 - left: 10px;
1969 - right: auto;
1970 -}
1971 -
1972 -.frm-warning-dismiss:hover {
1973 - opacity: 0.8;
1974 -}
1975 -
1976 -.frm-warning-dismiss.frmsvg,
1977 -.frm-warning-dismiss.frmsvg svg {
1978 - width: 15px;
1979 - height: 15px;
1980 -}
1981 -
1982 -.frm_note_style {
1983 - background: rgba(188, 224, 253, 0.23);
1984 - color: var(--grey-700);
1985 -}
1986 -
1987 1568 .frm-banner-alert {
1988 1569 text-align: left;
1989 1570 margin: 0;
1990 1571 border-radius: 0;
1991 - padding: 10px 0 10px 40px;
1572 + padding: 10px 0 10px 50px;
1992 1573 }
1993 1574
1994 1575 .frm-banner-alert a {
1995 - color: var(--primary-500);
1576 + color: var(--primary-color);
1996 1577 font-weight: 400;
1997 1578 text-decoration: none;
1998 1579 }
1999 1580
@@ -2006,24 +1587,57 @@
2006 1587 margin: 0;
2007 1588 }
2008 1589
2009 1590 .frm-inline-message {
2010 - border: 1px solid var(--primary-700);
1591 + border: 1px solid var(--primary-hover);
2011 1592 border-radius: var(--small-radius);
2012 - color: var(--primary-700);
1593 + color: var(--primary-hover);
2013 1594 background: #fff;
2014 1595 text-align: center;
2015 1596 padding: 20px;
2016 - font-size: var(--text-sm);
2017 - line-height: var(--leading);
1597 + font-size: 14px;
1598 + line-height: 1.4em;
2018 1599 }
2019 1600
2020 1601 .frm-inline-message a {
2021 - text-decoration: underline;
2022 1602 font-weight: 600;
2023 - color: var(--primary-700);
1603 + color: var(--primary-hover);
2024 1604 }
2025 1605
1606 +.frm_ribbon {
1607 + -webkit-transform: rotate(45deg);
1608 + -moz-transform: rotate(45deg);
1609 + -ms-transform: rotate(45deg);
1610 + -o-transform: rotate(45deg);
1611 + transform: rotate(45deg);
1612 + border: 25px solid transparent;
1613 + border-bottom: 25px solid var(--orange);
1614 + position: absolute;
1615 + top: -31px;
1616 + right: -74px;
1617 + padding: 0px 10px;
1618 + width: 30px;
1619 + color: white;
1620 + font-family: sans-serif;
1621 + size: 11px;
1622 +}
1623 +
1624 +.plugin-card-top .frm_ribbon {
1625 + right: -33px;
1626 + top: -28px;
1627 +}
1628 +
1629 +.frm_ribbon span {
1630 + position: absolute;
1631 + left: 25px;
1632 + font-size: 15px;
1633 + top: 4px;
1634 +}
1635 +
1636 +.accordion-section-content .frm-selectable:hover .frm_ribbon {
1637 + display: none;
1638 +}
1639 +
2026 1640 .frm_pro_heading span {
2027 1641 margin-top: 10px;
2028 1642 }
2029 1643
@@ -2032,14 +1646,15 @@
2032 1646 }
2033 1647
2034 1648 .frm-yes {
2035 1649 color: var(--green);
2036 - font-size: var(--text-xl);
1650 + font-size: 21px;
1651 + font-weight: 500;
2037 1652 }
2038 1653
2039 1654 .frm-nope {
2040 - color: var(--grey-400);
2041 - font-size: var(--text-xl);
1655 + color: #d2e0f2;
1656 + font-size: 21px;
2042 1657 }
2043 1658
2044 1659 .upgrade_to_pro a {
2045 1660 color: var(--orange);
@@ -2045,10 +1660,10 @@
2045 1660 color: var(--orange);
2046 1661 }
2047 1662
2048 1663 .upgrade_to_pro table .frmsvg {
2049 - height: var(--text-xl);
2050 - width: var(--text-xl);
1664 + height: 20px;
1665 + width: 20px;
2051 1666 }
2052 1667
2053 1668 .upgrade_to_pro table.widefat {
2054 1669 background-color: #fff;
@@ -2054,14 +1669,12 @@
2054 1669 background-color: #fff;
2055 1670 border-collapse: collapse;
2056 1671 }
2057 1672
2058 -.frm-white-body .upgrade_to_pro table th,
1673 +.upgrade_to_pro table th,
2059 1674 .upgrade_to_pro table td {
2060 1675 padding: 10px 15px;
2061 - border: 1px solid var(--grey-300);
2062 - line-height: var(--leading);
2063 - font-size: var(--text-sm);
1676 + border: 1px solid #d2e0f2;
2064 1677 }
2065 1678
2066 1679 .upgrade_to_pro table th.frmcenter {
2067 1680 text-align: center;
@@ -2067,9 +1680,9 @@
2067 1680 text-align: center;
2068 1681 }
2069 1682
2070 1683 .widefat th.frm_table_break {
2071 - background-color: var(--sidebar-color);
1684 + background-color: #f6f7fb;
2072 1685 }
2073 1686
2074 1687 h2.frm-h2 + .howto {
2075 1688 color: var(--medium-grey);
@@ -2085,18 +1698,18 @@
2085 1698 margin-top: 0;
2086 1699 }
2087 1700
2088 1701 .frm-addons {
2089 - margin-top: var(--gap-lg);
1702 + margin-top: 30px;
2090 1703 display: grid;
2091 1704 grid-template-columns: 1fr 1fr 1fr;
2092 - grid-gap: var(--gap-md);
1705 + grid-gap: 30px 2%;
2093 1706 }
2094 1707
2095 1708 .frm-addons,
2096 1709 .frm-addons h2,
2097 1710 .frm-addons h3 {
2098 - color: var(--grey-700);
1711 + color: var(--dark-grey);
2099 1712 }
2100 1713
2101 1714 .frm-addons h2 {
2102 1715 font-size: 17px;
@@ -2108,9 +1721,9 @@
2108 1721
2109 1722 .frm-card {
2110 1723 width: 100%;
2111 1724 border-radius: 10px;
2112 - border: 1px solid var(--grey-300);
1725 + border: 1px solid var(--grey-border);
2113 1726 opacity: 1;
2114 1727 transition: opacity 1s;
2115 1728 }
2116 1729
@@ -2124,10 +1737,10 @@
2124 1737 position: relative;
2125 1738 }
2126 1739
2127 1740 .frm-addons .plugin-card-top {
2128 - min-height: 155px;
2129 - padding-top: var(--gap-lg);
1741 + height: 140px;
1742 + padding-top: 30px;
2130 1743 overflow: hidden;
2131 1744 }
2132 1745
2133 1746 .frm-addons .plugin-card-top h2 {
@@ -2202,13 +1815,9 @@
2202 1815 .frm-new-template.plugin-card-bottom {
2203 1816 overflow: visible;
2204 1817 }
2205 1818
2206 -#frm-new-template p:first-child {
2207 - margin-top: 0;
2208 -}
2209 -
2210 -.frm-admin-page-formidableedit #wpbody-content > *:not(.frm-review-notice):not(.frm_previous_install):not(.frm-banner-alert),
1819 +.frm-admin-page-formidableedit #wpbody-content > *:not(.frm-review-notice):not(.frm_previous_install),
2211 1820 #wpbody-content > .updated,
2212 1821 #wpbody-content > #update-nag,
2213 1822 #wpbody-content > .update-nag,
2214 1823 #wpbody-content > .notice:not(.frm-review-notice),
@@ -2239,17 +1848,21 @@
2239 1848 }
2240 1849
2241 1850 .frm-modal .postbox .frm_modal_top,
2242 1851 .frm-dialog .frm_common_modal .postbox > div:first-child {
2243 - padding: var(--gap-md) var(--gap-md) 0;
1852 + padding: 30px 30px 10px;
2244 1853 position: relative;
2245 1854 }
2246 1855
1856 +.frm-modal .postbox .frm_modal_top {
1857 + border-bottom: 1px solid var(--sidebar-hover);
1858 +}
1859 +
2247 1860 .frm-modal .postbox .frm-modal-title,
2248 1861 .frm-dialog .frm_common_modal .postbox > div:first-child > div:first-child {
2249 1862 display: inline-block;
2250 - font-size: var(--text-xl);
2251 - color: var(--grey-900);
1863 + font-size: 24px;
1864 + color: #282F36;
2252 1865 }
2253 1866
2254 1867 .frm-inline-modal > a.dismiss,
2255 1868 .frm-modal .postbox > a.dismiss,
@@ -2260,16 +1873,8 @@
2260 1873 top: 25px;
2261 1874 z-index: 2;
2262 1875 }
2263 1876
2264 -body.rtl .frm-inline-modal > a.dismiss,
2265 -body.rtl .frm-modal .postbox > a.dismiss,
2266 -body.rtl .frm-modal .postbox .frm-modal-title + div:last-child,
2267 -body.rtl .frm-dialog .frm_common_modal .postbox > div:first-child > div:last-child {
2268 - right: unset;
2269 - left: 30px;
2270 -}
2271 -
2272 1877 .frm-info-modal .postbox > a.dismiss,
2273 1878 .frm-inline-modal > a.dismiss {
2274 1879 right: 13px;
2275 1880 top: 13px;
@@ -2277,17 +1882,15 @@
2277 1882
2278 1883 .frm-modal .postbox .frm-modal-title + div:last-child a,
2279 1884 .frm-modal a.dismiss .frmsvg,
2280 1885 .frm_common_modal .frm_modal_top a .frmsvg {
2281 - color: var(--grey-900);
1886 + color: var(--grey);
2282 1887 }
2283 1888
2284 1889 .frm-modal .frm_modal_content > div.inside,
2285 1890 .frm_common_modal .frm_modal_content > div.inside {
2286 - padding: var(--gap-md);
1891 + padding: 10px 30px;
2287 1892 margin: 0;
2288 - font-size: var(--text-sm);
2289 - color: var(--grey-700);
2290 1893 }
2291 1894
2292 1895 .frm_common_modal .postbox {
2293 1896 display: flex;
@@ -2296,20 +1899,17 @@
2296 1899
2297 1900 .frm-modal .postbox > div.inside .cta-inside {
2298 1901 overflow-y: auto;
2299 1902 height: auto;
2300 - padding: 0 var(--gap-sm);
1903 + padding: 0 15px;
2301 1904 }
2302 1905
2303 1906 .frm_modal_footer {
2304 - padding: 0 var(--gap-md) var(--gap-sm);
1907 + padding: 15px 30px;
2305 1908 text-align: right;
1909 + border-top: 1px solid var(--sidebar-hover);
2306 1910 }
2307 1911
2308 -body.frm-body-with-open-modal {
2309 - overflow-y: hidden;
2310 -}
2311 -
2312 1912 #frm_new_form_modal .postbox > div.inside {
2313 1913 max-height: 490px;
2314 1914 overflow-y: auto;
2315 1915 overflow-x: hidden;
@@ -2319,9 +1919,9 @@
2319 1919
2320 1920 #frm_new_form_modal .postbox > div.inside .cta-inside {
2321 1921 overflow-y: auto;
2322 1922 height: auto;
2323 - padding: 0 var(--gap-md);
1923 + padding: 0 20px;
2324 1924 }
2325 1925
2326 1926 #frm_new_form_modal .accordion-container {
2327 1927 width: 100%;
@@ -2327,16 +1927,13 @@
2327 1927 width: 100%;
2328 1928 }
2329 1929
2330 1930 .frm-templates-list {
2331 - margin-top: 0;
1931 + margin-top: 0px;
2332 1932 }
2333 1933
2334 -.frm-templates-list.frm_grid_container li {
2335 - margin-bottom: 0;
2336 -}
2337 -
2338 1934 .frm-templates-list li {
1935 + width: 50%;
2339 1936 vertical-align: top;
2340 1937 position: relative;
2341 1938 box-sizing: border-box;
2342 1939 border-radius: 6px;
@@ -2365,17 +1962,14 @@
2365 1962 .frm-templates-list li.frm-selectable:hover p {
2366 1963 max-width: calc( 100% - 65px );
2367 1964 }
2368 1965
2369 -.frm-templates-list .frm-featured-form {
2370 - display: flex;
1966 +.frm-templates-list li > div:not(.frm-hover-icons) {
1967 + display: inline-block;
2371 1968 width: 100%;
1969 + padding: 5px;
2372 1970 }
2373 1971
2374 -.frm-templates-list li .frm-featured-form {
2375 - padding: 7px 5px;
2376 -}
2377 -
2378 1972 .frm-templates-list li li > div {
2379 1973 padding-left: 0;
2380 1974 }
2381 1975
@@ -2382,38 +1976,23 @@
2382 1976 .frm-templates-list li > div > div {
2383 1977 vertical-align: middle;
2384 1978 }
2385 1979
2386 -.frm-templates-list .frm-inner-circle,
2387 -.frm-category-icon, /* Deprecated */
2388 -.frm-icon-wrapper {
2389 - background: var(--primary-500);
2390 - border-radius: var(--small-radius);
2391 - color: #fff;
1980 +.frm-templates-list li .frm-category-icon {
2392 1981 width: 40px;
2393 1982 height: 40px;
2394 - font-size: 18px;
2395 - box-sizing: border-box;
2396 - align-self: center;
2397 - justify-content: center;
2398 - align-items: center;
2399 - display: inline-flex;
2400 -}
2401 -
2402 -.frm-templates-list .frm-inner-circle .frmsvg {
1983 + overflow: hidden;
1984 + display: inline-block;
1985 + border-radius: 4px;
1986 + text-align: center;
2403 1987 vertical-align: top;
2404 1988 }
2405 1989
2406 -.frm-templates-list li .frm-category-icon {
2407 - overflow: hidden;
2408 - align-self: flex-start;
2409 -}
2410 -
2411 -.frm-templates-list .frm-template-details {
1990 +.frm-templates-list li > div > div:last-child:not(.frm-dropdown-menu) {
2412 1991 /* the content container to the right of the icon in Create new form modal */
2413 1992 display: inline-block;
2414 1993 width: calc( 100% - 40px );
2415 - padding-left: var(--gap-sm);
1994 + padding-left: 13px;
2416 1995 box-sizing: border-box;
2417 1996 transform: translateY(-2px);
2418 1997 }
2419 1998
@@ -2427,18 +2006,54 @@
2427 2006 }
2428 2007
2429 2008 .frm-templates-list li h3,
2430 2009 .frm-templates-list .frm-install-template h3 {
2431 - font-size: var(--text-sm) !important;
2010 + font-size: 14px !important;
2011 + line-height: 24px;
2012 + height: 24px;
2432 2013 }
2433 2014
2015 +.frm-templates-list li p {
2016 + font-size: 13px;
2017 + color: rgba(40, 47, 54, 0.6);
2018 +}
2019 +
2434 2020 .frm-templates-list .frm-install-template div {
2435 2021 text-align: left;
2436 2022 }
2437 2023
2024 +.frm-templates-list .frm-add-blank-form .frm-category-icon .frmsvg,
2025 +.frm-templates-list li:last-child div:not(.frm-hover-icons) > .frmsvg {
2026 + color: #fff;
2027 + transform: translateY(10px);
2028 +}
2029 +
2030 +.frm-templates-list .frm-inner-circle {
2031 + border-radius: 4px;
2032 + width: 40px;
2033 + height: 40px;
2034 + padding: 0;
2035 + box-sizing: border-box;
2036 + display: flex;
2037 + flex-direction: row;
2038 + align-items: center;
2039 + justify-content: center;
2040 + position: relative;
2041 +}
2042 +
2043 +.frm-templates-list .frm-inner-circle .frmsvg {
2044 + position: absolute;
2045 + top: 0;
2046 + left: 0;
2047 + width: 100%;
2048 + height: 100%;
2049 + box-sizing: border-box;
2050 + padding: 10px;
2051 +}
2052 +
2438 2053 #frm_new_form_modal .frm-search {
2439 - width: 100%;
2440 - margin: var(--gap-sm) 0 var(--gap-md);
2054 + width: calc( 100% - 20px );
2055 + margin: 15px 10px 30px;
2441 2056 }
2442 2057
2443 2058 #frm_leave_email,
2444 2059 #frm_code_from_email
@@ -2445,10 +2060,13 @@
2445 2060 {
2446 2061 width: 480px;
2447 2062 }
2448 2063
2449 -#frm_new_form_modal #template-search-input {
2450 - width: 100%;
2064 +#frm_new_form_modal #template-search-input,
2065 +#frm_new_form_modal #frm_leave_email,
2066 +#frm_new_form_modal #frm_code_from_email
2067 +{
2068 + border-radius: 4px !important;
2451 2069 }
2452 2070
2453 2071 #frm-email-block .frm-with-left-icon .frmsvg {
2454 2072 padding: 0;
@@ -2458,12 +2076,12 @@
2458 2076
2459 2077 #frm_new_form_modal .accordion-container {
2460 2078 display: inline-block;
2461 2079 padding: 0;
2462 - border-top: 1px solid var(--grey-300);
2080 + border-top: 1px solid var(--grey-border);
2463 2081 box-sizing: border-box;
2464 - margin: 0 5px;
2465 - width: calc( 100% - 10px );
2082 + margin: 0 10px;
2083 + width: calc( 100% - 20px );
2466 2084 }
2467 2085
2468 2086 #frm_new_form_modal .accordion-section-title {
2469 2087 padding: 0;
@@ -2473,13 +2091,13 @@
2473 2091 .control-section:hover .accordion-section-title,
2474 2092 #frm_new_form_modal .accordion-section.open .accordion-section-title
2475 2093 {
2476 2094 background: #fff !important;
2477 - border-bottom-color: transparent;
2095 + border-bottom: none;
2478 2096 }
2479 2097
2480 2098 #frm_new_form_modal .accordion-section.open:hover {
2481 - border-bottom-color: transparent;
2099 + border-bottom: none;
2482 2100 }
2483 2101
2484 2102 #frm_new_form_modal .accordion-section {
2485 2103 padding: 8px 0 4px;
@@ -2485,9 +2103,9 @@
2485 2103 padding: 8px 0 4px;
2486 2104 }
2487 2105
2488 2106 #frm_new_form_modal .accordion-section + .accordion-section {
2489 - border-top: 1px solid var(--grey-300);
2107 + border-top: 1px solid var(--grey-border);
2490 2108 border-radius: 0;
2491 2109 }
2492 2110
2493 2111 .frm-templates-list.frm-categories-list li > div > div:last-child,
@@ -2496,9 +2114,9 @@
2496 2114 padding-left: 0;
2497 2115 }
2498 2116
2499 2117 #frm_new_form_modal .frm-templates-list.frm-categories-list .accordion-section-title {
2500 - padding-left: var(--gap-sm);
2118 + padding-left: 10px;
2501 2119 }
2502 2120
2503 2121 #frm_new_form_modal .frm-templates-list.frm-categories-list li.frm-selectable {
2504 2122 padding: 0 10px;
@@ -2505,75 +2123,74 @@
2505 2123 overflow: hidden;
2506 2124 }
2507 2125
2508 2126 #frm_new_form_modal .accordion-section-content {
2509 - padding: var(--gap-sm);
2127 + padding: 10px 0;
2510 2128 }
2511 2129
2512 2130 .frm-hover-icons {
2513 2131 position: absolute;
2514 2132 right: 0;
2515 - top: calc( ( 58px - 2px - 22px ) / 2 ); /* Template item height - borders - icon height */
2516 - max-width: 91px;
2133 + top: 0;
2134 + height: 20px;
2135 + width: 65px;
2517 2136 height: 100%;
2518 2137 box-sizing: border-box;
2519 - padding: 0 10px 0 5px !important;
2520 - border-radius: var(--small-radius);
2138 + padding: 14px 10px 0 5px !important;
2139 + border-radius: 6px;
2521 2140 text-align: right;
2522 - display: flex;
2523 - gap: 5px;
2524 2141 }
2525 2142
2526 -.frm-ready-made-solution .frm-hover-icons {
2527 - visibility: hidden;
2143 +#frm_new_form_modal .frm-selectable[data-custom="1"] .frm-hover-icons {
2144 + width: 91px;
2528 2145 }
2529 2146
2530 -.frm-ready-made-solution:hover .frm-hover-icons {
2531 - visibility: visible;
2532 -}
2533 -
2534 2147 .frm-hover-icons a {
2535 2148 width: 22px;
2536 2149 height: 22px;
2537 - font-size: var(--text-md);
2538 - display: inline-flex;
2539 - align-items: center;
2540 - justify-content: center;
2150 + display: inline-block;
2541 2151 border-radius: 50%;
2542 2152 box-sizing: border-box;
2543 - line-height: var(--leading);
2153 + line-height: 20px;
2544 2154 text-align: center;
2545 2155 }
2546 2156
2547 2157 .frm-hover-icons > .frm-preview-form,
2548 2158 .frm-hover-icons > .frm-delete-form {
2549 - border: 1px solid var(--primary-500);
2159 + border: 1px solid var(--primary-color);
2160 + margin-right: 5px;
2550 2161 }
2551 2162
2552 2163 .frm-hover-icons > .frm-create-form,
2553 2164 .frm-ready-made-solution .frm-hover-icons a {
2554 - background-color: var(--primary-500);
2165 + background-color: var(--primary-color);
2555 2166 }
2556 2167
2557 -.frm-hover-icons > a .frmsvg {
2558 - width: 14px;
2559 - height: 14px;
2560 - vertical-align: baseline;
2168 +.frm-hover-icons > .frm-preview-form .frmsvg {
2169 + width: 16px;
2170 + height: 16px;
2171 + color: var(--primary-color);
2561 2172 }
2562 2173
2563 -.frm-hover-icons > .frm-preview-form .frmsvg,
2564 2174 .frm-hover-icons > .frm-delete-form .frmsvg {
2565 - color: var(--primary-500);
2175 + width: 14px;
2176 + height: 14px;
2177 + color: var(--primary-color);
2178 + transform: translateY(-1px);
2566 2179 }
2567 2180
2568 2181 .frm-hover-icons > .frm-unlock-form {
2569 - background-color: var(--primary-500);
2182 + background-color: var(--primary-color);
2570 2183 }
2571 2184
2572 2185 .frm-hover-icons > .frm-unlock-form .frmsvg {
2573 - background-color: var(--primary-500);
2186 + width: 12px;
2187 + height: 12px;
2188 + background-color: var(--primary-color);
2189 + transform: translateY(-2px);
2574 2190 }
2575 2191
2192 +.frm-hover-icons > .frm-create-form .frmsvg,
2576 2193 .frm-ready-made-solution .frmsvg {
2577 2194 width: 14px;
2578 2195 height: 14px;
2579 2196 }
@@ -2587,28 +2204,27 @@
2587 2204 .frm-ready-made-solution .frm-hover-icons a:hover,
2588 2205 .frm-hover-icons > .frm-unlock-form:hover,
2589 2206 .frm-hover-icons > .frm-unlock-form:hover .frmsvg
2590 2207 {
2591 - background-color: var(--primary-700) !important;
2208 + background-color: var(--primary-hover) !important;
2592 2209 }
2593 2210
2594 2211 .frm-hover-icons .frm-preview-form:hover,
2595 2212 .frm-hover-icons .frm-delete-form:hover
2596 2213 {
2597 - border: 1px solid var(--primary-700) !important;
2214 + border: 1px solid var(--primary-hover) !important;
2598 2215 }
2599 2216
2600 2217 .frm-hover-icons .frm-preview-form:hover .frmsvg,
2601 2218 .frm-hover-icons .frm-delete-form:hover .frmsvg {
2602 - color: var(--primary-700) !important;
2219 + color: var(--primary-hover) !important;
2603 2220 }
2604 2221
2605 -.frm-application-card h4 .frmsvg,
2606 2222 .frm-locked-template h3 .frmsvg {
2607 - height: var(--text-sm);
2608 - width: var(--text-sm);
2609 - vertical-align: text-top;
2610 - color: var(--grey-500);
2223 + height: 12px;
2224 + width: 14px;
2225 + vertical-align: top;
2226 + padding-top: 6px;
2611 2227 }
2612 2228
2613 2229 #frm_new_form_modal .frm-use-this-template {
2614 2230 margin-left: 10px;
@@ -2614,18 +2230,21 @@
2614 2230 margin-left: 10px;
2615 2231 }
2616 2232
2617 2233 #frm_new_form_modal #frm-preview-block {
2618 - padding: var(--gap-md) var(--gap-lg);
2234 + padding: 20px 30px;
2619 2235 overflow-x: hidden;
2620 2236 }
2621 2237
2622 2238 #frm_new_form_modal #frm-details-block {
2623 - padding: var(--gap-md) var(--gap-lg);
2239 + padding: 20px 30px;
2624 2240 }
2625 2241
2626 2242 .frm-modal-back {
2627 2243 cursor: pointer;
2244 + font-size: 17px;
2245 + vertical-align: top;
2246 + margin-top: 4px;
2628 2247 margin-right: 4px;
2629 2248 }
2630 2249
2631 2250 .frm-modal-cancel {
@@ -2632,28 +2251,19 @@
2632 2251 float: left;
2633 2252 }
2634 2253
2635 2254 .frm-plan-required-tag {
2636 - margin-left: 5px;
2637 - transform: translateY(-1px);
2638 2255 background: #FDE6DE;
2639 2256 color: #F15A24;
2640 -}
2641 -
2642 -.frm-ready-made-solution .frm-meta-tag {
2643 - width: fit-content;
2644 - background: #FDE6DE;
2645 - color: #F15A24;
2646 -}
2647 -
2648 -.frm-meta-tag {
2649 2257 font-size: 10px;
2650 - padding: 4px 6px;
2258 + padding: 4px 8px;
2651 2259 border-radius: 4px;
2652 2260 text-transform: uppercase;
2653 2261 font-weight: normal;
2654 2262 display: inline-block;
2655 2263 line-height: 12px;
2264 + transform: translateY(-1px);
2265 + margin-left: 5px;
2656 2266 }
2657 2267
2658 2268 #frm_new_form_modal.frm-expired #frm-create-block,
2659 2269 #frm_new_form_modal.frm-expiring #frm-create-block {
@@ -2663,14 +2273,18 @@
2663 2273 #frm-create-footer {
2664 2274 padding: 15px 20px;
2665 2275 }
2666 2276
2277 +#frm-create-footer .frm_error_style {
2278 + border-radius: 6px;
2279 +}
2280 +
2667 2281 #frm_code_from_email_options {
2668 2282 margin-top: 20px;
2669 2283 }
2670 2284
2671 2285 #frm_code_from_email_options * {
2672 - color: var(--primary-500);
2286 + color: var(--primary-color);
2673 2287 }
2674 2288
2675 2289 #frm-email-block p,
2676 2290 #frm-code-block p,
@@ -2706,23 +2320,20 @@
2706 2320 #frm_new_form_modal[frm-page="upgrade"] #frm-upgrade-title,
2707 2321 #frm_new_form_modal[frm-page="email"] #frm-email-title,
2708 2322 #frm_new_form_modal[frm-page="code"] #frm-email-title,
2709 2323 #frm_new_form_modal[frm-page="renew"] #frm-renew-title,
2324 +.frm-locked-template .frm-hover-icons .frm-unlock-form,
2325 +li[data-preview] .frm-hover-icons .frm-preview-form,
2710 2326 #frm_code_from_email_error[frm-error="wrong-code"] span[frm-error="wrong-code"],
2711 2327 #frm_code_from_email_error[frm-error="empty"] span[frm-error="empty"],
2712 2328 #frm_code_from_email_error[frm-error="custom"] span[frm-error="custom"],
2713 2329 #frm_leave_email_error[frm-error="invalid"] span[frm-error="invalid"],
2714 -#frm_leave_email_error[frm-error="empty"] span[frm-error="empty"]
2330 +#frm_leave_email_error[frm-error="empty"] span[frm-error="empty"],
2331 +#frm_new_form_modal .frm-selectable[data-custom="1"] .frm-hover-icons .frm-delete-form
2715 2332 {
2716 2333 display: inline-block;
2717 2334 }
2718 2335
2719 -.frm-locked-template .frm-hover-icons .frm-unlock-form,
2720 -li[data-preview] .frm-hover-icons .frm-preview-form,
2721 -#frm_new_form_modal .frm-selectable[data-custom="1"] .frm-hover-icons .frm-delete-form {
2722 - display: inline-flex;
2723 -}
2724 -
2725 2336 #frm_new_form_modal[frm-page="create"] #frm-create-block,
2726 2337 #frm_new_form_modal[frm-page="preview"] #frm-preview-block,
2727 2338 #frm_new_form_modal[frm-page="details"] #frm-details-block,
2728 2339 #frm_new_form_modal[frm-page="upgrade"] #frm-upgrade-block,
@@ -2757,9 +2368,9 @@
2757 2368 }
2758 2369
2759 2370 #frm-upgrade-body-list-wrapper ul li:before {
2760 2371 content: "\2022";
2761 - color: var(--primary-500);
2372 + color: var(--primary-color);
2762 2373 display: inline-block;
2763 2374 width: 1em;
2764 2375 margin-left: -1em;
2765 2376 }
@@ -2765,10 +2376,17 @@
2765 2376 }
2766 2377
2767 2378 /* Embed Form Modal */
2768 2379
2380 +#frm_embed_modal label {
2381 + font-size: 14px;
2382 + line-height: 25px;
2383 + color: rgba(40, 47, 54, 0.8);
2384 + font-weight: 600;
2385 +}
2386 +
2769 2387 .frm-embed-modal-content {
2770 - padding: var(--gap-md);
2388 + padding: 20px;
2771 2389 }
2772 2390
2773 2391 .frm-embed-modal-content.frm-loading-page-options {
2774 2392 display: flex;
@@ -2775,15 +2393,16 @@
2775 2393 justify-content: center;
2776 2394 }
2777 2395
2778 2396 #frm_embed_modal .frm_embed_example {
2779 - background: var(--sidebar-color);
2780 - border: 1px solid var(--sidebar-hover);
2781 - border-radius: var(--small-radius);
2782 - color: var(--grey-900);
2783 - font-size: var(--text-sm);
2784 - padding-right: var(--gap-lg);
2397 + background: #F6F7FB;
2398 + border: 1px solid #E3E8EB;
2399 + border-radius: 6px;
2400 + color: rgba(40, 47, 54, 0.85);
2401 + font-size: 14px;
2402 + padding: 10px 30px 10px 10px;
2785 2403 width: 100%;
2404 + margin-bottom: 15px;
2786 2405 height: auto !important;
2787 2406 resize: none;
2788 2407 }
2789 2408
@@ -2793,59 +2412,67 @@
2793 2412
2794 2413 .frm-embed-modal-content > div a {
2795 2414 position: absolute;
2796 2415 right: 0;
2797 - top: 0;
2416 + top: 8px;
2798 2417 }
2799 2418
2800 2419 .frm-embed-modal-content > div {
2801 2420 position: relative;
2802 - margin-bottom: var(--gap-sm);
2803 2421 }
2804 2422
2805 -.frm-embed-modal-content > div:last-child {
2806 - margin-bottom: 0;
2807 -}
2808 -
2809 2423 .frm-embed-modal-content svg[id^="frm_copy_embed_"] {
2810 2424 position: absolute;
2811 - bottom: calc( ( 38px - 18px ) / 2 ); /* Input height - SVG height */
2425 + top: 35px;
2812 2426 right: 10px;
2813 2427 cursor: pointer;
2814 2428 opacity: 0.5;
2815 2429 }
2816 2430
2817 -.frm-border-info-box,
2818 2431 .frm-embed-modal-option {
2819 - border-radius: var(--small-radius);
2820 - border: 1px solid var(--grey-300);
2821 - padding: var(--gap-sm);
2432 + border-radius: 6px;
2433 + border: 1px solid #E3E8EB;
2434 + padding: 20px;
2822 2435 cursor: pointer;
2823 - display: flex;
2824 - gap: var(--gap-sm);
2825 - font-size: var(--text-sm);
2826 2436 }
2827 2437
2828 2438 .frm-embed-modal-option + .frm-embed-modal-option {
2829 - margin-top: var(--gap-sm);
2439 + margin-top: 10px;
2830 2440 }
2831 2441
2832 -.frm-collapsed .frmsvg,
2833 -.caret.rotate-270,
2834 -.frm-embed-modal-option .caret {
2835 - align-self: center;
2836 - margin-left: auto;
2837 - transform: rotate(-90deg);
2442 +#frm_embed_modal .frm-modal-cancel {
2443 + display: none;
2838 2444 }
2839 2445
2840 -#frm_embed_modal .frm_modal_footer {
2841 - display: none;
2446 +#frm_embed_modal.frm-on-page-2 .frm-modal-cancel {
2447 + display: inline;
2842 2448 }
2843 2449
2844 -#frm_embed_modal.frm-on-page-2 .frm_modal_footer {
2845 - display: block;
2450 +.frm-embed-modal-icon-wrapper {
2451 + background: var(--primary-color);
2452 + border-radius: 4px;
2453 + padding: 10px;
2454 + color: #fff;
2455 + display: inline-block;
2456 + vertical-align: top;
2846 2457 }
2847 2458
2459 +.frm-embed-modal-icon-wrapper + div {
2460 + display: inline-block;
2461 + padding-left: 13px;
2462 + transform: translateY(-4px);
2463 +}
2464 +
2465 +.frm-embed-modal-option:after {
2466 + content: "\e913" !important;
2467 + font-family: "s11-fp" !important;
2468 + font-size: 18px;
2469 + position: absolute;
2470 + right: 10px;
2471 + top: 50%;
2472 + transform: translateY(-50%);
2473 +}
2474 +
2848 2475 .frm-embed-modal-content ul {
2849 2476 max-height: 300px;
2850 2477 overflow-y: scroll;
2851 2478 }
@@ -2860,10 +2487,10 @@
2860 2487 grid-gap: 0;
2861 2488 }
2862 2489
2863 2490 #frm-bulk-modal .frm8 {
2864 - border-right: 1px solid var(--grey-300);
2865 - padding: 10px 20px 10px var(--gap-lg);
2491 + border-right: 1px solid var(--grey-border);
2492 + padding: 10px 20px 10px 30px;
2866 2493 }
2867 2494
2868 2495 #frm-bulk-modal .frm4 {
2869 2496 padding: 10px 0;
@@ -2887,18 +2514,18 @@
2887 2514 }
2888 2515
2889 2516 .frm-bulk-edit-link {
2890 2517 text-align: right;
2891 - font-size: var(--text-sm);
2518 + font-size: 14px;
2892 2519 padding: 0 5px 10px;
2893 2520 }
2894 2521
2895 2522 .frm-small-add {
2896 - font-size: var(--text-sm) !important;
2523 + font-size: 14px !important;
2897 2524 }
2898 2525
2899 2526 .frm-small-add span {
2900 - color: var(--primary-500);
2527 + color: var(--primary-color);
2901 2528 font-size: 12px;
2902 2529 height: 12px;
2903 2530 width: 12px;
2904 2531 }
@@ -2913,30 +2540,32 @@
2913 2540 }
2914 2541
2915 2542 .frm-right-panel .inside a.frm_pro_tip,
2916 2543 a.frm_pro_tip {
2917 - font-size: var(--text-sm);
2544 + font-size: 14px;
2918 2545 display: inline-block;
2919 - color: var(--grey-700);
2546 + color: var(--dark-grey);
2920 2547 background: #FFE7DE;
2921 2548 border-radius: var(--small-radius);
2922 2549 padding: 5px 15px;
2923 2550 margin: 0 auto;
2551 + line-height: 1.4;
2924 2552 display: flex;
2925 2553 align-items: center;
2926 2554 }
2927 2555
2928 2556 a.frm_pro_tip:hover {
2929 - color: var(--grey-700);
2930 - border-color: var(--primary-500);
2557 + color: var(--dark-grey);
2558 + border-color: var(--primary-color);
2931 2559 }
2932 2560
2933 2561 a.frm_pro_tip:hover .frmsvg {
2934 - fill: var(--primary-500);
2562 + fill: var(--primary-color);
2935 2563 }
2936 2564
2937 2565 .frm_field_list .frm_pro_tip {
2938 2566 margin: 10px 15px;
2567 + padding-left: 40px;
2939 2568 position: relative;
2940 2569 width: calc(100% - 30px);
2941 2570 box-sizing: border-box;
2942 2571 }
@@ -2950,18 +2579,8 @@
2950 2579 a.frm_pro_tip .frmsvg {
2951 2580 margin-right: 10px;
2952 2581 }
2953 2582
2954 -.frm-light-tip a.frm_pro_tip {
2955 - background: rgba(188, 224, 253, 0.23);
2956 -}
2957 -
2958 -.frm-light-tip a.frm_pro_tip .frmsvg,
2959 -.frm-light-tip a.frm_pro_tip i,
2960 -.frm-light-tip .frm-tip-cta {
2961 - color: var(--primary-500);
2962 -}
2963 -
2964 2583 .frm-tip-info {
2965 2584 flex: 1;
2966 2585 text-align: left;
2967 2586 }
@@ -2974,9 +2593,9 @@
2974 2593 float: right;
2975 2594 }
2976 2595
2977 2596 .frm_pro_tip:hover .frm-tip-cta {
2978 - color: var(--primary-500);
2597 + color: var(--primary-color);
2979 2598 }
2980 2599
2981 2600 /*Switch form dropdown*/
2982 2601 h1 .fa-caret-down {
@@ -2991,23 +2610,16 @@
2991 2610 vertical-align: middle;
2992 2611 }
2993 2612
2994 2613 .caret,
2995 -.wp-admin .frm_wrap select,
2996 -.frm_wrap .frm_form_builder select,
2997 2614 .frm_wrap .ui-autocomplete-input {
2998 - background: transparent url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23667085%22%2F%3E%3C%2Fsvg%3E') no-repeat right 5px top 55%;
2999 - background-size: var(--text-md) var(--text-md);
3000 - padding-right: var(--gap-lg) !important;
2615 + background:#fff url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E') no-repeat right 5px top 55%;
2616 + background-size: 16px 16px;
3001 2617 }
3002 2618
3003 -.caret {
3004 - padding-right: var(--gap-xs) !important;
3005 -}
3006 -
3007 2619 .frm-btn-group .caret {
3008 2620 float: right;
3009 - margin-top: calc( var(--text-md) / 2 );
2621 + margin-top: 6px;
3010 2622 }
3011 2623
3012 2624 .dropdown {
3013 2625 position: relative;
@@ -3016,10 +2628,8 @@
3016 2628 .dropdown-toggle:focus {
3017 2629 outline: 0;
3018 2630 }
3019 2631
3020 -.frm_wrap .ui-autocomplete,
3021 -#frm_adv_info.frm-dropdown-menu,
3022 2632 .frm-dropdown-menu {
3023 2633 /* Copied from .dropdown-menu rules from Bootstrap */
3024 2634 position: absolute;
3025 2635 top: 100%;
@@ -3026,25 +2636,22 @@
3026 2636 left: 0;
3027 2637 z-index: 1000;
3028 2638 display: none;
3029 2639 float: left;
3030 - padding-left: 4px;
3031 - padding-right: 4px;
3032 - margin: var(--gap-xs) 0 0;
2640 + padding: 0.5rem 0;
2641 + margin: 0;
3033 2642 text-align: left;
3034 2643 list-style: none;
3035 - background: none;
3036 2644 background-color: #fff;
3037 2645 background-clip: padding-box;
3038 - border: 1px solid var(--grey-100);
2646 + border: 1px solid rgba(0, 0, 0, 0.15);
3039 2647 border-radius: 0.25rem;
3040 - box-shadow: var(--box-shadow-lg);
3041 2648
3042 2649 /* Custom rules */
3043 2650 max-height: 200px;
3044 2651 overflow-y: auto;
3045 2652 overflow-x: hidden;
3046 - font-size: var(--text-md);
2653 + font-size: 0.9rem;
3047 2654 width: auto;
3048 2655 min-width: 160px;
3049 2656 }
3050 2657
@@ -3052,8 +2659,12 @@
3052 2659 min-width: 100px;
3053 2660 max-width: 99%;
3054 2661 }
3055 2662
2663 +#frm_bs_dropdown > a {
2664 + font-size: 1em;
2665 +}
2666 +
3056 2667 #frm_bs_dropdown .frm-dropdown-menu {
3057 2668 max-width: 400px;
3058 2669 }
3059 2670
@@ -3062,15 +2673,11 @@
3062 2673 }
3063 2674
3064 2675 #frm_field_group_controls .frm-dropdown-menu,
3065 2676 .frm-field-action-icons .frm-dropdown-menu {
3066 - min-width: 180px !important;
2677 + min-width: 160px !important;
3067 2678 }
3068 2679
3069 -.frm-field-action-icons .frm-dropdown-toggle svg {
3070 - color: #9EA9B8;
3071 -}
3072 -
3073 2680 .multiselect-container.frm-dropdown-menu,
3074 2681 #search-submit .frm-dropdown-menu {
3075 2682 min-width: 200px !important;
3076 2683 }
@@ -3078,9 +2685,9 @@
3078 2685 .preview .frm-dropdown-menu {
3079 2686 min-width: 230px !important;
3080 2687 }
3081 2688
3082 -.frm-dropdown-menu.dropdown-menu-right {
2689 +.frm-dropdown-menu.pull-right {
3083 2690 right: 0;
3084 2691 left: auto;
3085 2692 }
3086 2693
@@ -3094,11 +2701,8 @@
3094 2701 .frm-dropdown-menu > .dropdown-item {
3095 2702 margin: 0;
3096 2703 }
3097 2704
3098 -.frm-select-list-item,
3099 -.frm_wrap .ui-autocomplete li > div,
3100 -.multiselect-container button.multiselect-option,
3101 2705 .frm-dropdown-menu > .dropdown-item > a,
3102 2706 .frm-dropdown-menu .frm_dropdown_li {
3103 2707 clear: both;
3104 2708 font-weight: normal;
@@ -3103,24 +2707,19 @@
3103 2707 clear: both;
3104 2708 font-weight: normal;
3105 2709 white-space: nowrap;
3106 2710 text-decoration: none;
3107 - border-radius: var(--small-radius);
3108 2711 }
3109 2712
3110 -.frm-dropdown-menu > .active > a,
3111 -.frm-dropdown-menu > .active > a:hover,
3112 -.frm-dropdown-menu > .active > a:focus {
2713 +.frm-dropdown-menu > .active > a, .frm-dropdown-menu > .active > a:hover, .frm-dropdown-menu > .active > a:focus {
3113 2714 text-decoration: none;
3114 2715 outline: 0;
3115 2716 }
3116 2717
3117 -.frm-select-list-item.disabled,
3118 2718 .frm-dropdown-menu > .disabled > a, .frm-dropdown-menu > .disabled > a:hover, .frm-dropdown-menu > .disabled > a:focus {
3119 2719 color: #999999;
3120 2720 }
3121 2721
3122 -.frm-select-list-item.disabled:hover,
3123 2722 .frm-dropdown-menu > .disabled > a:hover,
3124 2723 .frm-dropdown-menu > .disabled > a:focus {
3125 2724 text-decoration: none;
3126 2725 background-color: transparent;
@@ -3137,11 +2736,12 @@
3137 2736 }
3138 2737
3139 2738 .dropdown-header {
3140 2739 display: block;
3141 - padding: 3px 10px;
3142 - font-size: var(--text-xs);
3143 - color: var(--grey-400);
2740 + padding: 3px 20px;
2741 + font-size: 12px;
2742 + line-height: 1.428571429;
2743 + color: #999999;
3144 2744 }
3145 2745
3146 2746 .dropdown-backdrop {
3147 2747 position: fixed;
@@ -3151,9 +2751,8 @@
3151 2751 top: 0;
3152 2752 z-index: 990;
3153 2753 }
3154 2754
3155 -.dropdown-menu-right > .frm-dropdown-menu,
3156 2755 .pull-right > .frm-dropdown-menu {
3157 2756 right: 0;
3158 2757 left: auto;
3159 2758 }
@@ -3173,13 +2772,13 @@
3173 2772 .btn {
3174 2773 border: 1px solid #ddd;
3175 2774 background: #fff;
3176 2775 height: 28px;
3177 - line-height: var(--leading);
2776 + line-height: 1.5;
3178 2777 }
3179 2778
3180 2779 a.frm_option_icon:before {
3181 - color: var(--primary-500);
2780 + color: var(--primary-color);
3182 2781 font-size: 22px;
3183 2782 width: 22px;
3184 2783 height: 22px;
3185 2784 }
@@ -3185,9 +2784,9 @@
3185 2784 }
3186 2785
3187 2786 a.frm_option_icon:focus::before,
3188 2787 a.frm_option_icon:hover::before {
3189 - color: var(--primary-700);
2788 + color: var(--primary-hover);
3190 2789 }
3191 2790
3192 2791 .frm_top_left .frm-dropdown-toggle {
3193 2792 color: #999;
@@ -3201,17 +2800,17 @@
3201 2800 text-decoration: none;
3202 2801 }
3203 2802
3204 2803 .frm-card .frm-dropdown-toggle {
3205 - border: 1px solid var(--grey-300);
2804 + border: 1px solid var(--grey-border);
3206 2805 border-radius: var(--small-radius);
3207 2806 font-size: 13px;
3208 - color: var(--grey-700);
2807 + color: var(--dark-grey);
3209 2808 padding: 7px 20px;
3210 2809 }
3211 2810
3212 2811 .frm_actions_dropdown .frm-dropdown-menu {
3213 - font-size: var(--text-sm);
2812 + font-size: 14px;
3214 2813 color: #5F6C72;
3215 2814 }
3216 2815
3217 2816 .frm-dropdown-menu .frm_icon_font {
@@ -3223,21 +2822,20 @@
3223 2822 /* BS Multiselect */
3224 2823 .multiselect-container.frm-dropdown-menu {
3225 2824 top: auto;
3226 2825 left: auto;
3227 - font-size: var(--text-sm);
3228 - padding: 4px;
2826 + font-size: 14px;
2827 + padding-top: 3px;
3229 2828 margin-bottom: 3px;
3230 2829 }
3231 2830
3232 2831 .frm-right-panel .accordion-section-content {
3233 2832 background: transparent;
3234 - padding: 0;
3235 - overflow: initial;
2833 + padding-top: 0
3236 2834 }
3237 2835
3238 -.frm-right-panel .accordion-section-content > .inside {
3239 - padding: 0 0 var(--gap-xs);
2836 +.frm-right-panel .accordion-section-content > .inside {
2837 + padding: 0;
3240 2838 }
3241 2839
3242 2840 .frm-right-panel .accordion-section-content .inside a {
3243 2841 font-size: inherit;
@@ -3244,10 +2842,10 @@
3244 2842 }
3245 2843
3246 2844 #post-body-content + .frm-right-panel h3.accordion-section-title {
3247 2845 padding: 7px 10px 8px 14px;
3248 - font-size: var(--text-md);
3249 - color: var(--grey-700);
2846 + font-size: 16px;
2847 + color: var(--dark-grey);
3250 2848 }
3251 2849
3252 2850 .frm-right-panel .control-section.open h3 {
3253 2851 border-bottom: none;
@@ -3256,22 +2854,22 @@
3256 2854 .js .frm-right-panel .control-section.open .accordion-section-title,
3257 2855 .js .frm-right-panel .control-section .accordion-section-title:focus,
3258 2856 .js .frm-right-panel .control-section .accordion-section-title:hover {
3259 2857 background: transparent;
3260 - color: var(--grey-900);
2858 + color: var(--dark-grey);
3261 2859 }
3262 2860
3263 2861 .js .frm-right-panel .control-section .accordion-section-title:hover:before {
3264 - color: var(--grey-700);
2862 + color: var(--dark-grey);
3265 2863 }
3266 2864
3267 2865 .frm-with-line,
3268 2866 .accordion-section-content h4 {
3269 - font-size: var(--text-md);
2867 + font-size: 16px;
3270 2868 font-weight: 400;
3271 2869 margin: 20px -20px 10px;
3272 2870 padding: 0 20px;
3273 - color: var(--grey-700);
2871 + color: var(--dark-grey);
3274 2872 position: relative;
3275 2873 border: none !important;
3276 2874 }
3277 2875
@@ -3301,9 +2899,9 @@
3301 2899 .accordion-section-content h4:before {
3302 2900 content: '';
3303 2901 display: block;
3304 2902 position: absolute;
3305 - border-bottom: 1px solid var(--grey-300);
2903 + border-bottom: 1px solid var(--grey-border);
3306 2904 left: 0;
3307 2905 width: 100%;
3308 2906 top: 50%;
3309 2907 }
@@ -3321,9 +2919,8 @@
3321 2919 font-family: "s11-fp" !important;
3322 2920 font-size: 18px;
3323 2921 font-variant: normal;
3324 2922 text-rendering: auto;
3325 - vertical-align: text-top;
3326 2923 }
3327 2924
3328 2925 #frm_new_form_modal .accordion-section.open .accordion-section-title:after {
3329 2926 transform: rotate(90deg);
@@ -3329,9 +2926,9 @@
3329 2926 transform: rotate(90deg);
3330 2927 }
3331 2928
3332 2929 .frm-right-panel .accordion-section-title:after {
3333 - top: calc(50% - 10px) !important;
2930 + right: 20px;
3334 2931 }
3335 2932
3336 2933 .frm-right-panel .open .accordion-section-title:after {
3337 2934 content: "\e62a" !important;
@@ -3340,9 +2937,9 @@
3340 2937 .frm-right-panel .accordion-section-title:before {
3341 2938 content: "\f1de" !important;
3342 2939 color: var(--grey);
3343 2940 font-size: 17px !important;
3344 - margin: 0 10px 0 0;
2941 + margin: 0 10px;
3345 2942 }
3346 2943
3347 2944 .form-title-style .accordion-section-title:before,
3348 2945 .section-fields-style .accordion-section-title:before {
@@ -3400,16 +2997,12 @@
3400 2997 .progress-bars-style .accordion-section-title:before{
3401 2998 content: "\e939" !important;
3402 2999 }
3403 3000
3404 -#frm_view_editor_left.frm-right-panel .accordion-section-title,
3405 3001 .frm-right-panel h3.accordion-section-title {
3406 3002 padding: 15px 20px;
3407 3003 background: var(--sidebar-color);
3408 - line-height: var(--leading);
3409 - color: var(--grey-700);
3410 - font-size: var(--text-lg);
3411 - font-weight: 400;
3004 + line-height: 1;
3412 3005 }
3413 3006
3414 3007 .control-section .accordion-section-title:after, /** Form template list */
3415 3008 .customize-pane-child .accordion-section-title:after {
@@ -3439,12 +3032,14 @@
3439 3032 max-width: 250px;
3440 3033 }
3441 3034
3442 3035 .multiselect-container button.multiselect-option {
3036 + display: block;
3443 3037 width: 100%;
3444 3038 text-align: left;
3039 + background: none;
3445 3040 border: none;
3446 - margin-bottom: 4px;
3041 + padding: 5px 0 5px 15px;
3447 3042 }
3448 3043
3449 3044 .multiselect-container button.multiselect-option label {
3450 3045 margin-left: 5px;
@@ -3492,13 +3087,8 @@
3492 3087 width: 100%;
3493 3088 height: auto;
3494 3089 }
3495 3090
3496 -.frm_form_builder .frm_time_wrap .frm_time_sep {
3497 - vertical-align: sub;
3498 - vertical-align: -webkit-baseline-middle;
3499 -}
3500 -
3501 3091 .frm_form_builder input[type=range]::-webkit-slider-runnable-track {
3502 3092 background-color: var(--blue-border);
3503 3093 }
3504 3094
@@ -3525,9 +3115,9 @@
3525 3115 .frm-fake-field {
3526 3116 display: block;
3527 3117 height: 25px;
3528 3118 background-color: var(--light-blue);
3529 - border: 1px solid var(--grey-300);
3119 + border: 1px solid var(--grey-border);
3530 3120 margin: 10px 0;
3531 3121 border-radius: var(--small-radius);
3532 3122 }
3533 3123
@@ -3533,15 +3123,15 @@
3533 3123
3534 3124 .frm-embed-message {
3535 3125 position: absolute;
3536 3126 background: #fff;
3537 - border: 1px solid var(--grey-300);
3538 - color: var(--grey-700);
3539 - padding: var(--gap-md);
3540 - font-size: var(--text-lg);
3127 + border: 1px solid var(--grey-border);
3128 + color: var(--dark-grey);
3129 + padding: 37px 0;
3130 + font-size: 18px;
3541 3131 max-width: 200px;
3542 3132 min-width: 50%;
3543 - margin: 0 var(--gap-md);
3133 + margin: 0 25px;
3544 3134 overflow: hidden;
3545 3135 text-overflow: ellipsis;
3546 3136 }
3547 3137
@@ -3548,9 +3138,9 @@
3548 3138 .frm-summary-message {
3549 3139 top: 50%;
3550 3140 left: 50%;
3551 3141 padding: 15px 0;
3552 - font-size: var(--text-md);
3142 + font-size: 16px;
3553 3143 transform: translate(-50%, -50%);
3554 3144 }
3555 3145
3556 3146 .frm-summary-learn-more {
@@ -3559,9 +3149,8 @@
3559 3149
3560 3150 .frm-single-settings .frm-embed-message {
3561 3151 width: 100%;
3562 3152 position: static;
3563 - border-radius: var(--small-radius);
3564 3153 }
3565 3154
3566 3155 #new_fields input[type=text],
3567 3156 #new_fields input[type=number],
@@ -3598,8 +3187,19 @@
3598 3187 width: 16px;
3599 3188 padding: 0;
3600 3189 }
3601 3190
3191 +.frm-star-group:not(.frm-star-hovered) input[type=radio]:checked + label:before,
3192 +.frm-star-group input + label:hover:before,
3193 +.frm-star-group:hover input + label:hover:before,
3194 +.frm-star-group .star-rating-on:before,
3195 +.frm-star-group .star-rating-hover:before,
3196 +.frm-star-group input[type=radio]:checked + label:before,
3197 +.frm-star-group input + label:before,
3198 +.frm-star-group .star-rating:before {
3199 + color: var( --blue-border);
3200 +}
3201 +
3602 3202 .frm_wrap .frm-number-range + .frm_last input,
3603 3203 .frm_wrap .frm-number-range input {
3604 3204 text-align: center;
3605 3205 font-weight: 600;
@@ -3606,9 +3206,9 @@
3606 3206 }
3607 3207
3608 3208 .frm_wrap .frm-number-range input[type=number],
3609 3209 .frm_wrap .frm-number-range input[type=text] {
3610 - color: var(--primary-700);
3210 + color: var(--primary-hover);
3611 3211 }
3612 3212
3613 3213 .frm-range-min {
3614 3214 position: relative;
@@ -3618,25 +3218,24 @@
3618 3218 content: '';
3619 3219 height: 3px;
3620 3220 width: 10px;
3621 3221 border-radius: 30%;
3622 - background: var(--primary-700);
3222 + background: var(--primary-hover);
3623 3223 position: absolute;
3624 3224 top: 17px;
3625 3225 right: -28%;
3626 3226 }
3627 3227
3628 -.frm_grid_container > p,
3629 3228 .frm_grid_container > p.frm_form_field,
3630 3229 .frm_grid_container > div.frm_form_field,
3631 3230 #new_fields .frm_grid_container > p {
3632 - margin-top: 8px;
3633 - margin-bottom: 8px;
3231 + margin-top: 7px;
3232 + margin-bottom: 7px;
3634 3233 margin-right: 0;
3635 3234 }
3636 3235
3637 3236 #new_fields div.frm_grid_container > .frm_primary_label {
3638 - margin-top: 8px;
3237 + margin-top: 7px;
3639 3238 }
3640 3239
3641 3240 #new_fields .frm_primary_label + p,
3642 3241 #new_fields .frm_primary_label + .frm6 + .frm6,
@@ -3670,9 +3269,9 @@
3670 3269 }
3671 3270
3672 3271 .frm_form_builder .frm_radio label,
3673 3272 .frm_form_builder .frm_checkbox label {
3674 - font-size: var(--text-sm);
3273 + font-size: 14px;
3675 3274 }
3676 3275
3677 3276 /* Start copied front-end CSS */
3678 3277 .horizontal_radio .frm_radio,
@@ -3710,64 +3309,22 @@
3710 3309
3711 3310 .frm_wrap .with_frm_style .frm_checkbox input[type=checkbox],
3712 3311 .frm_wrap .with_frm_style .frm_radio input[type=radio],
3713 3312 .frm_wrap input[type=checkbox],
3714 -.frm-white-body input[type=checkbox],
3715 3313 .field-group input[type=checkbox],
3716 3314 .frm_scale input[type=radio],
3717 3315 .frm_radio input[type=radio],
3718 3316 .frm_checkbox input[type=checkbox] {
3719 - border: 1px solid var(--grey-300);
3317 + border: 1px solid var(--grey-border);
3720 3318 box-shadow: none;
3721 3319 -webkit-appearance: none;
3722 3320 }
3723 3321
3724 -
3725 -.frm_wrap .with_frm_style .frm_checkbox input[type=checkbox],
3726 -.frm_wrap input[type=checkbox],
3727 -.frm-white-body input[type=checkbox],
3728 -.field-group input[type=checkbox],
3729 -.frm_checkbox input[type=checkbox] {
3730 - border-radius: 4px;
3731 -}
3732 -
3733 -.frm-white-body input[type="checkbox"]:checked,
3734 -.frm_wrap input[type="checkbox"]:checked {
3735 - background-color: var(--primary-500);
3736 - border-color: var(--primary-500) !important;
3737 -}
3738 -
3739 -.frm-white-body input[type="checkbox"]:checked:focus,
3740 -.frm_wrap input[type="checkbox"]:checked:focus {
3741 - border-color: var(--primary-500);
3742 -}
3743 -
3744 -.frm-white-body input[type="checkbox"]:checked::before,
3745 -.frm_wrap input[type="checkbox"]:checked::before {
3746 - 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");
3747 - height: 12px;
3748 - width: 12px;
3749 - margin: 1px;
3750 -}
3751 -
3752 3322 .frm_radio input[type="radio"],
3753 3323 .frm_checkbox input[type="checkbox"] {
3754 3324 margin-right: 5px;
3755 3325 }
3756 3326
3757 -.frm_single_entry_page .with_frm_style .frm_radio input[type=radio] {
3758 - margin: 5px 0;
3759 - width: 18px;
3760 - position: relative; /* override Bootstrap */
3761 -}
3762 -
3763 -.frm_single_entry_page .with_frm_style .frm_radio input[type=radio]:before {
3764 - position: relative !important;
3765 - left: calc(50% - 6px);
3766 - top: calc(50% - 6px);
3767 - margin: 0 !important;
3768 -}
3769 -
3770 3327 .frm_inner_field_container {
3771 3328 margin-bottom: 10px;
3772 3329 }
3773 3330
@@ -3793,22 +3350,8 @@
3793 3350 li.ui-state-default.selected > .frm_inner_field_container > label {
3794 3351 max-width: calc(100% - 100px);
3795 3352 }
3796 3353
3797 -.frm-drag-fade {
3798 - background-color: var(--lightest-grey) !important;
3799 - border-radius: 4px;
3800 -}
3801 -
3802 -.frm-drag-fade * {
3803 - opacity: 0;
3804 -}
3805 -
3806 -.frm-dragging .divider_section_only,
3807 -.frm-dragging .frm_field_box {
3808 - pointer-events: none;
3809 -}
3810 -
3811 3354 .frm_form_settings #op-popup, /* 1Password */
3812 3355 .frm_form_settings com-1password-op-button,
3813 3356 .frm_conf_below .frm_conf_field_container .frm_primary_label,
3814 3357 .frm_conf_inline .frm_inner_field_container .frm-show-click a,
@@ -3943,15 +3486,15 @@
3943 3486 animation: spin 2s linear infinite;
3944 3487 }
3945 3488
3946 3489 .frm-wait:before {
3947 - border-bottom-color: var(--primary-700);
3948 - border-right-color: var(--primary-700);
3490 + border-bottom-color: var(--primary-hover);
3491 + border-right-color: var(--primary-hover);
3949 3492 }
3950 3493
3951 3494 .frm_loading_button.frm-button-secondary:before {
3952 - border-bottom-color: var(--primary-500);
3953 - border-right-color: var(--primary-500);
3495 + border-bottom-color: var(--primary-color);
3496 + border-right-color: var(--primary-color);
3954 3497 }
3955 3498
3956 3499 input[type=submit]:focus {
3957 3500 outline: none !important;
@@ -3975,9 +3518,9 @@
3975 3518 #editorcontainer #dyncontent {
3976 3519 margin: 0;
3977 3520 width: 100%;
3978 3521 padding: 6px;
3979 - line-height: var(--leading);
3522 + line-height: 1.5;
3980 3523 border: 0 none;
3981 3524 outline: none;
3982 3525 -moz-box-sizing: border-box;
3983 3526 -webkit-box-sizing: border-box;
@@ -4023,9 +3566,9 @@
4023 3566 font-size: 12px;
4024 3567 }
4025 3568
4026 3569 .frm_border_bottom {
4027 - border-bottom: 1px solid var(--grey-300);
3570 + border-bottom: 1px solid var(--grey-border);
4028 3571 margin-bottom: 10px;
4029 3572 padding-bottom: 10px;
4030 3573 }
4031 3574
@@ -4036,8 +3579,9 @@
4036 3579 .frm_posttax_opt_list .frm_border_bottom input {
4037 3580 margin-right: 1px;
4038 3581 }
4039 3582
3583 +.frm_logic_row,
4040 3584 .frm_add_remove div.frm_form_field {
4041 3585 padding-bottom: 5px;
4042 3586 }
4043 3587
@@ -4094,47 +3638,18 @@
4094 3638 max-width: 100%;
4095 3639 font-size: inherit;
4096 3640 }
4097 3641
4098 -/* Start entry statuses */
4099 -.frm-entry-status {
4100 - padding: var(--gap-2xs) var(--gap-xs);
4101 - align-items: center;
4102 - border-radius: var(--small-radius);
4103 - text-transform: uppercase;
4104 -}
4105 -
4106 -.frm-entry-status-0 {
4107 - color: #1E561F;
4108 - background: #D5F2DC;
4109 -}
4110 -
4111 -.frm-entry-status-1 {
4112 - color: #7A4D05;
4113 - background: #FFF2D2;
4114 -}
4115 -/* End entry statuses */
4116 -
4117 3642 #frm-options-panel {
4118 - padding: 0 var(--gap-sm);
4119 - color: var(--grey-900);
3643 + padding: 0 15px;
3644 + color: var(--darkest-grey);
4120 3645 }
4121 3646
4122 -.frm-right-panel a.frm_add_logic_link,
4123 3647 #frm-options-panel h3 {
4124 3648 padding: 15px 0;
4125 3649 margin-top: -2px;
4126 3650 }
4127 3651
4128 -.frm-right-panel a.frm_add_logic_link:focus {
4129 - outline: auto;
4130 -}
4131 -
4132 -#frm_style_sidebar h3,
4133 -#frm_view_editor_left.frm-right-panel .accordion-section-title {
4134 - padding: 15px 0;
4135 -}
4136 -
4137 3652 .frm_field_key {
4138 3653 background-color: #F7F7F7;
4139 3654 }
4140 3655
@@ -4278,9 +3793,9 @@
4278 3793 li.sortable-placeholder {
4279 3794 border: none;
4280 3795 margin: 0;
4281 3796 visibility: visible !important;
4282 - box-shadow: 2px -10px 0 2px var(--primary-500);
3797 + box-shadow: 2px -10px 0 1px var(--primary-color);
4283 3798 }
4284 3799
4285 3800 #frm_form_editor_container > ul > .frm_single_option.ui-sortable-placeholder,
4286 3801 #frm_form_editor_container > ul > li.sortable-placeholder {
@@ -4291,8 +3806,9 @@
4291 3806 #frm_form_editor_container > ul > li > ul {
4292 3807 position: relative;
4293 3808 }
4294 3809
3810 +#frm_form_editor_container > ul > li > ul > .frm_single_option.ui-sortable-placeholder,
4295 3811 #frm_form_editor_container > ul > li > ul > li.sortable-placeholder,
4296 3812 #frm_form_editor_container ul.start_divider > li > ul > li.sortable-placeholder {
4297 3813 position: absolute;
4298 3814 top: 20px;
@@ -4299,29 +3815,38 @@
4299 3815 bottom: 0;
4300 3816 }
4301 3817
4302 3818 .edit_field_type_divider + li.sortable-placeholder {
4303 - box-shadow: 2px 5px 0 2px var(--primary-500);
3819 + box-shadow: 2px 5px 0 1px var(--primary-color);
4304 3820 }
4305 3821
4306 3822 .start_divider li.sortable-placeholder {
4307 - box-shadow: 2px -5px 0 2px var(--primary-500);
3823 + box-shadow: 2px -5px 0 1px var(--primary-color);
4308 3824 }
4309 3825
4310 -.frm-is-collapsed + .sortable-placeholder {
4311 - box-shadow: 2px 15px 0 2px var(--primary-500);
3826 +.frm_single_option.ui-sortable-placeholder {
3827 + box-shadow: 0 0 1px 1px var(--primary-color);
4312 3828 }
4313 3829
4314 -.frm_single_option.ui-sortable-placeholder {
4315 - box-shadow: 0 0 1px 1px var(--primary-500);
3830 +.frm-is-collapsed + .sortable-placeholder {
3831 + box-shadow: 2px 15px 0 1px var(--primary-color);
4316 3832 }
4317 3833
4318 3834 .frm_sorting > li.edit_field_type_end_divider:first-child,
3835 +.frm_sorting > .frmbutton + .sortable-placeholder, /* hide for first field */
3836 +.no-drop-placeholder,
4319 3837 .frm-show-click,
4320 3838 li.ui-state-default.edit_field_type_divider .frm-show-click {
4321 3839 display: none;
4322 3840 }
4323 3841
3842 +.frm_form_field.ui-sortable-helper {
3843 + height: 30px !important;
3844 + background-color: #fff !important;
3845 + overflow: hidden !important;
3846 + box-sizing: border-box;
3847 +}
3848 +
4324 3849 .frm_form_field.ui-sortable-helper .frm-field-action-icons,
4325 3850 .frm_form_field.ui-sortable-helper .frm_form_fields,
4326 3851 .frm_form_field.ui-sortable-helper .frm_description,
4327 3852 .frm_form_field.ui-sortable-helper .description {
@@ -4364,8 +3889,16 @@
4364 3889 #new_fields .frm_single_option input[type=text] {
4365 3890 width: calc(100% - 73px);
4366 3891 }
4367 3892
3893 +.frm-right-panel.styling_settings .frm_image_preview_wrapper {
3894 + width: 100%;
3895 +}
3896 +
3897 +.frm-right-panel.styling_settings .frm_image_preview_wrapper .frm_choose_image_box {
3898 + margin-left: 0;
3899 +}
3900 +
4368 3901 .frm-right-panel .frm_single_option a.frm_remove_tag,
4369 3902 .frm_single_option a {
4370 3903 padding-left: 7px;
4371 3904 }
@@ -4423,10 +3956,10 @@
4423 3956 /* Image options for Radio and Checkbox */
4424 3957
4425 3958 .frm_image_options .frm_image_option_container {
4426 3959 --field-border-width: 1px;
4427 - --border-color: var(--grey-300);
4428 - --border-color-active: var(--primary-500);
3960 + --border-color: var(--grey-border);
3961 + --border-color-active: var(--primary-color);
4429 3962 --border-radius: var(--small-radius);
4430 3963 }
4431 3964
4432 3965 .frm_image_option_container svg {
@@ -4527,13 +4060,13 @@
4527 4060 margin-top: 17px;
4528 4061 }
4529 4062
4530 4063 .frm_image_data {
4531 - margin-left: var(--gap-xs);
4064 + margin-left: 10px;
4532 4065 display: flex;
4533 4066 flex-direction: column;
4534 - font-size: var(--text-sm);
4535 - justify-content: space-around;
4067 + font-size: 14px;
4068 + line-height: 17px;
4536 4069 }
4537 4070
4538 4071 .frm_image_styling_frame {
4539 4072 display: flex;
@@ -4557,9 +4090,10 @@
4557 4090 max-width: 54px;
4558 4091 }
4559 4092
4560 4093 .frm_image_preview_title{
4561 - color: var(--grey-500);
4094 + margin-top: 6px;
4095 + color: rgba(40, 47, 54, 0.65);
4562 4096 overflow: hidden;
4563 4097 white-space: nowrap;
4564 4098 text-overflow: ellipsis;
4565 4099 }
@@ -4565,9 +4099,9 @@
4565 4099 }
4566 4100
4567 4101 .frm_wrap .frm_choose_image_box {
4568 4102 cursor: pointer;
4569 - color: var(--grey-700);
4103 + color: var(--dark-grey);
4570 4104 background-color: #F2F2F2;
4571 4105 margin-left: 24px;
4572 4106 text-align: center;
4573 4107 width: 100%;
@@ -4576,11 +4110,13 @@
4576 4110 .frm_wrap .frm_choose_image_box:hover {
4577 4111 background: #fff;
4578 4112 }
4579 4113
4114 +a.frm_remove_image_option .frmsvg,
4580 4115 a.frm_remove_image_option,
4581 4116 .frm_remove_image_option {
4582 - color: var(--grey-400);
4117 + margin-top: 9px;
4118 + color: rgba(40, 47, 54, 0.4);
4583 4119 cursor: pointer;
4584 4120 }
4585 4121
4586 4122 a.frm_remove_image_option:hover .frmsvg,
@@ -4590,10 +4126,17 @@
4590 4126 }
4591 4127
4592 4128 /* Form settings */
4593 4129
4130 +#form_settings_page label,
4131 +.frm_form_builder label {
4132 + font-weight: normal;
4133 + font-size: 15px;
4134 + color: var(--dark-grey);
4135 +}
4136 +
4594 4137 .frm-form-setting-tabs {
4595 - margin-top: var(--gap-sm) !important;
4138 + margin-top: 20px !important;
4596 4139 }
4597 4140
4598 4141 .frm-right-panel > .postbox {
4599 4142 background-color: transparent;
@@ -4604,44 +4147,40 @@
4604 4147
4605 4148 .frm-right-panel .postbox.frm_with_icons .inside,
4606 4149 .frm-right-panel .postbox .inside,
4607 4150 .frm-right-panel .inside {
4608 - font-size: var(--text-md);
4151 + font-size: 16px;
4609 4152 padding: 15px 20px 20px;
4610 - color: var(--grey-700);
4153 + color: var(--dark-grey);
4611 4154 }
4612 4155
4613 4156 .frm-right-panel .misc-pub-section {
4614 - padding: var(--gap-xs) 0;
4157 + padding: 10px 0;
4158 + line-height: 1.4em;
4615 4159 position: relative;
4616 4160 }
4617 4161
4618 4162 .frm-right-panel .inside a,
4619 4163 .frm-form-setting-tabs a {
4620 - font-size: var(--text-md);
4621 - color: var(--grey-700);
4622 - padding: var(--gap-sm);
4164 + font-size: 16px;
4165 + color: var(--dark-grey);
4166 + padding: 15px 15px 15px 20px;
4623 4167 display: block;
4624 4168 }
4625 4169
4626 -.frm-form-setting-tabs a {
4627 - color: var(--grey-900);
4628 - padding: var(--gap-sm) var(--gap-md);
4629 -}
4630 -
4631 4170 .frm-right-panel .inside a {
4632 4171 padding: 0;
4633 - color: var(--primary-500);
4172 + color: var(--primary-color);
4634 4173 display: inline-block;
4635 4174 }
4636 4175
4637 4176 .frm-right-panel .inside a:hover {
4638 - color: var(--primary-700);
4177 + color: var(--primary-hover);
4639 4178 }
4640 4179
4641 4180 .frm-form-setting-tabs a:hover {
4642 4181 background: var(--sidebar-hover);
4643 - color: var(--grey-900);
4182 + color: var(--dark-grey);
4644 4183 }
4645 4184
4646 4185 .frm-right-panel .inside i,
4647 4186 .frm-right-panel .inside .frmsvg,
@@ -4650,20 +4189,16 @@
4650 4189 margin: 0 5px;
4651 4190 display: inline-block;
4652 4191 width: 20px;
4653 4192 height: 20px;
4654 - color: var(--grey-500);
4193 + color: var(--grey);
4655 4194 }
4656 4195
4657 -.frm-form-setting-tabs a .frmsvg {
4658 - margin: 0;
4659 -}
4660 -
4661 4196 .frm-right-panel .inside a:hover i,
4662 4197 .frm-right-panel .inside a:hover .frmsvg,
4663 4198 .frm-form-setting-tabs a:hover .frmsvg,
4664 4199 .frm-form-setting-tabs a:hover span {
4665 - color: var(--grey-700);
4200 + color: var(--dark-grey);
4666 4201 }
4667 4202
4668 4203 .frm_settings_form .tabs-panel {
4669 4204 padding: 0 25px;
@@ -4677,9 +4212,9 @@
4677 4212
4678 4213 #frm_adv_info .tabs-panel {
4679 4214 min-height: 0 !important;
4680 4215 overflow-x: hidden;
4681 - padding: 0;
4216 + padding: 0 20px;
4682 4217 border: none;
4683 4218 background: transparent;
4684 4219 }
4685 4220
@@ -4688,130 +4223,48 @@
4688 4223 }
4689 4224
4690 4225 .frm_posttax_opt_list,
4691 4226 .frm_submit_logic_rows {
4692 - border: 1px solid var(--grey-300);
4693 - padding: var(--gap-md);
4227 + border: 1px solid var(--grey-border);
4228 + padding: 25px;
4694 4229 border-radius: var(--small-radius);
4695 - margin: 5px 0 5px var(--gap-md);
4230 + margin: 5px 0 5px 25px;
4696 4231 }
4697 4232
4698 -.frm_submit_logic_rows .frm_grid_container > p.frm_form_field {
4699 - margin: 0;
4700 -}
4701 -
4702 -/* Color picker CSS */
4703 -.frm-right-panel .wp-picker-open + .wp-picker-input-wrap {
4233 +/* Admin toggle */
4234 +.frm_toggle_off,
4235 +.frm_toggle_on {
4236 + display: none;
4237 + color: #fff;
4238 + z-index: 999;
4704 4239 position: absolute;
4705 - margin-left: calc( ( 100% - 35px ) * -1 );
4706 - margin-top: 1px;
4707 - width: calc( 100% - 36px );
4240 + font-size: 10px;
4241 + line-height: 20px;
4242 + left: 6px;
4708 4243 }
4709 4244
4710 -.frm-right-panel .wp-picker-container input[type="text"].wp-color-picker {
4711 - border: none;
4712 - padding: 5px 8px;
4713 - font-family: inherit;
4714 - color: var(--grey-700);
4715 - font-size: var(--text-md);
4716 - width: 100%;
4717 - line-height: var(--leading);
4718 -}
4719 -
4720 -.frm-right-panel .wp-picker-input-wrap .wp-picker-clear {
4721 - display: none !important;
4722 -}
4723 -
4724 -.frm-right-panel .wp-picker-holder {
4725 - position: absolute;
4726 - z-index: 999;
4727 -}
4728 -
4729 -.frm-right-panel .wp-picker-input-wrap label {
4730 - margin-bottom: 0;
4731 -}
4732 -
4733 -.frm-right-panel .wp-picker-container .wp-color-result.button {
4734 - width: 100%;
4735 - overflow: hidden;
4736 - margin: 0 !important;
4737 - height: var(--h-md) !important;
4738 - padding: 0 0 0 var(--gap-lg) !important;
4739 - border-radius: var(--small-radius);
4740 - border-color: var(--grey-300);
4741 -}
4742 -
4743 -.frm-right-panel .wp-color-result-text {
4744 - line-height: var(--leading) !important;
4745 - font-size: var(--text-md);
4746 - background: #fff !important;
4747 - color: var(--grey-900);
4748 - padding: 5px 8px;
4749 - border-color: var(--grey-300);
4750 - text-align: left;
4751 -}
4752 -
4753 -.frm-right-panel .color-alpha {
4754 - width: var(--gap-lg) !important;
4755 -}
4756 -
4757 -.frm_grid_container .wp-picker-container {
4758 - width: 100%;
4759 - position: relative;
4760 -}
4761 -
4762 -.wp-picker-container button.wp-color-result {
4763 - border: 1px solid var(--grey-300) !important;
4764 -}
4765 -
4766 -.wp-picker-container .wp-picker-input-wrap input.hex.wp-color-picker {
4767 - max-width: 100%;
4768 - position: relative;
4769 -}
4770 -
4771 -.frm_end .wp-picker-holder {
4772 - margin-left: -145px;
4773 -}
4774 -
4775 -.frm_end.frm6 .wp-picker-holder {
4776 - margin-left: -86px;
4777 -}
4778 -/* End of color picker CSS */
4779 -
4780 -/*
4781 -These are the styles for the "Enable Formidable styling" toggle in the visual styler.
4782 -To use this element, you can call the FrmHtmlHelper::toggle function.
4783 -*/
4784 -.frm_toggle_opt {
4785 - padding: 0;
4786 - white-space: normal;
4245 +.frm_toggle_off {
4787 4246 display: inline;
4788 - vertical-align: middle;
4789 - font-weight: normal;
4247 + left: auto;
4248 + right: 5px;
4249 + color: var(--dark-grey);
4790 4250 }
4791 4251
4792 -.frm_on_label,
4793 -.frm_off_label {
4794 - color: #444444;
4795 -}
4796 -
4797 4252 .frm_toggle {
4798 4253 position: relative;
4799 4254 display: inline-block;
4800 - width: 40px;
4801 - height: var(--h-xs);
4255 + width: 45px;
4256 + height: 20px;
4802 4257 vertical-align: middle;
4258 + margin: 2px;
4803 4259 }
4804 4260
4805 -.frm_toggle_block {
4806 - display: inline-flex;
4807 - gap: var(--gap-sm);
4808 - align-items: center;
4261 +label > span.frm_toggle {
4262 + margin-right: 15px;
4809 4263 }
4810 4264
4811 -.frm_toggle input, /* Reverse compatibility */
4812 -.frm_toggle_block input {
4813 - display:none !important;
4265 +.frm_toggle input {
4266 + display: none !important;
4814 4267 }
4815 4268
4816 4269 .frm_toggle_slider {
4817 4270 position: absolute;
@@ -4819,44 +4272,26 @@
4819 4272 top: 0;
4820 4273 left: 0;
4821 4274 right: 0;
4822 4275 bottom: 0;
4823 - background-color: var(--grey-border);
4824 4276 transition: .4s;
4825 4277 border-radius: 30px;
4278 + background-color: #fff;
4279 + box-shadow: 0 0 0 2px var(--grey);
4826 4280 }
4827 4281
4828 4282 .frm_toggle_slider:before {
4829 4283 border-radius: 50%;
4830 4284 position: absolute;
4831 - content: url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 height=%2711px%27 width=%2711px%27 viewBox=%270 0 20 20%27><path d=%27M16.8 4.5l-1.3-1.3L10 8.6 4.5 3.2 3.2 4.5 8.6 10l-5.4 5.5 1.3 1.3 5.5-5.4 5.5 5.4 1.3-1.3-5.4-5.5 5.4-5.5z%27 fill=%27%2398A2B3%27/%3E</svg>");
4832 - height: 22px;
4833 - width: 22px;
4834 - padding: 0 5.5px;
4835 - left: 1px;
4836 - bottom: 1px;
4837 - background-color: white;
4838 - transition: .4s;
4839 - box-sizing: border-box;
4840 - box-shadow: var(--box-shadow-md);
4841 - font-size: 21px;
4842 - line-height: 18px;
4285 + content: "";
4286 + height: 16px;
4287 + width: 16px;
4288 + left: 2px;
4289 + top: 2px;
4290 + transition: .3s;
4291 + background-color: var(--grey);
4843 4292 }
4844 4293
4845 -input:checked + .frm_toggle .frm_toggle_slider {
4846 - background-color: var(--primary-500);
4847 -}
4848 -
4849 -input:focus + .frm_toggle .frm_toggle_slider {
4850 - box-shadow: var(--box-shadow-md);
4851 -}
4852 -
4853 -input:checked + .frm_toggle .frm_toggle_slider:before {
4854 - padding: 0 6px;
4855 - transform: translateX(16px);
4856 - content: url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 height=%2711px%27 width=%2711px%27 viewBox=%270 0 10 10%27><path d=%27M9.2 2c.2.3.2.7 0 1l-5 5c-.3.2-.6.2-.9 0L.8 5.3a.6.6 0 0 1 .9-.8l2 2 4.6-4.5c.3-.3.6-.3.9 0Z%27 fill=%27%234199FD%27/%3E</svg>");
4857 -}
4858 -
4859 4294 input[disabled] + .frm_toggle_slider {
4860 4295 pointer-events: none;
4861 4296 cursor: text;
4862 4297 opacity: .5;
@@ -4861,53 +4296,16 @@
4861 4296 cursor: text;
4862 4297 opacity: .5;
4863 4298 }
4864 4299
4865 -.frm_toggle_opt ~ .frm_toggle .frm_toggle_slider:before {
4866 - content: '' !important; /* Don't show x/check if off label included or on builder page */
4867 -}
4868 -
4869 -.rtl .frm_toggle_opt {
4870 - padding: 0 8px;
4871 -}
4872 -
4873 -.rtl .frm_toggle_slider:before {
4874 - left: 17px;
4875 -}
4876 -
4877 -.rtl input:checked + .frm_toggle .frm_toggle_slider:before {
4878 - transform: none!important;
4879 - left: 1px;
4880 -}
4881 -
4882 -/* Deprecated admin toggle */
4883 -.frm_toggle_off,
4884 -.frm_toggle_on {
4885 - display: none;
4886 - color: #fff;
4887 - z-index: 999;
4888 - position: absolute;
4889 - font-size: 10px;
4890 - line-height: 20px;
4891 - left: 6px;
4892 -}
4893 -
4894 -.frm_toggle_off {
4895 - display: inline;
4896 - left: auto;
4897 - right: 5px;
4898 - color: var(--dark-grey);
4899 -}
4900 -
4901 4300 .frm_toggle_long {
4902 - width: 80% !important;
4301 + width: 80%;
4903 4302 height: 28px;
4904 - display: inline-block !important;
4905 4303 }
4906 4304
4907 4305 .frm_toggle_long .frm_toggle_slider {
4908 - background: var(--primary-700);
4909 - box-shadow: 0 0 0 2px var(--primary-700);
4306 + background: var(--primary-hover);
4307 + box-shadow: 0 0 0 2px var(--primary-hover);
4910 4308 }
4911 4309
4912 4310 .frm_toggle_long .frm_toggle_off,
4913 4311 .frm_toggle_long .frm_toggle_on {
@@ -4932,11 +4330,20 @@
4932 4330 border-radius: var(--border-radius) 0 0 var(--border-radius);
4933 4331 height: 100%;
4934 4332 background-color: #fff;
4935 4333 color: var(--primary-color);
4936 - content: '' !important;
4937 4334 }
4938 4335
4336 +input:checked + .frm_toggle_slider {
4337 + background-color: var(--primary-hover);
4338 + box-shadow: 0 0 0 2px var(--primary-hover);
4339 +}
4340 +
4341 +input:checked + .frm_toggle_slider:before {
4342 + transform: translateX(25px);
4343 + background-color: #fff;
4344 +}
4345 +
4939 4346 .frm_toggle_long input:checked + .frm_toggle_slider:before {
4940 4347 transform: translateX(101%);
4941 4348 border-radius: 0 var(--border-radius) var(--border-radius) 0;
4942 4349 }
@@ -4951,9 +4358,9 @@
4951 4358
4952 4359 .frm_toggle_long .frm_toggle_on,
4953 4360 .frm_toggle_long input:checked + .frm_toggle_slider + .frm_toggle_on + .frm_toggle_off {
4954 4361 display: inline;
4955 - color: var(--primary-500);
4362 + color: var(--primary-color);
4956 4363 font-weight: normal;
4957 4364 }
4958 4365
4959 4366 .frm_toggle_long .frm_toggle_off,
@@ -4961,9 +4368,11 @@
4961 4368 color: #fff;
4962 4369 font-weight: bold;
4963 4370 }
4964 4371
4965 -/* End toggle styling */
4372 +input:focus + .frm_toggle_slider {
4373 + box-shadow: 0 0 1px #008ec2;
4374 +}
4966 4375
4967 4376 /* Global Settings */
4968 4377
4969 4378 .tabs-panel {
@@ -4981,59 +4390,21 @@
4981 4390 margin-right: 20px !important;
4982 4391 display: inline-block !important;
4983 4392 }
4984 4393
4985 -#frm_stripe_icon {
4986 - border-radius: 5px;
4987 -}
4988 -
4989 -#captcha_settings .frm_primary_label {
4990 - margin-top: var(--gap-sm);
4991 -}
4992 -
4993 -.frm-long-icon-buttons {
4994 - display: flex;
4995 - gap: var(--gap-md);
4996 -}
4997 -
4998 -.frm-long-icon-buttons > label {
4999 - border: 1px solid var(--grey-300);
5000 - color: var(--grey-700);
5001 - border-radius: var(--small-radius);
5002 - display: flex;
5003 - padding: var(--gap-sm);
5004 - gap: var(--gap-sm);
5005 - justify-content: center;
5006 - align-items: center;
5007 - width: calc( 33% - var(--gap-sm) );
5008 - box-sizing: border-box;
5009 -}
5010 -
5011 -.frm-long-icon-buttons > label:hover {
5012 - color: var(--primary-500);
5013 -}
5014 -
5015 -.frm-long-icon-buttons input[type=radio] {
5016 - display: none;
5017 -}
5018 -
5019 -.frm-long-icon-buttons input[type=radio]:checked + label {
5020 - border-color: var(--primary-500);
5021 - box-shadow: 0 0 0 1px var(--primary-color);
5022 -}
5023 -
5024 -.frm-long-icon-buttons label > svg {
5025 - height: 21px;
5026 -}
5027 -
5028 4394 .frm-example-icon .frmsvg,
5029 4395 .frm-example-icon i {
5030 4396 height: 20px;
5031 4397 width: 20px;
5032 4398 font-size: 20px;
5033 - color: var(--grey-700);
4399 + color: var(--dark-grey);
5034 4400 }
5035 4401
4402 +.edd_frm_license_row {
4403 + clear: both;
4404 + line-height: 2em;
4405 +}
4406 +
5036 4407 .frm_license_msg {
5037 4408 margin-top: 0;
5038 4409 }
5039 4410
@@ -5060,14 +4431,23 @@
5060 4431
5061 4432 .frm_no_items {
5062 4433 margin: 0 auto 50px;
5063 4434 text-align: center;
5064 - color: var(--grey-700);
4435 + color: var(--dark-grey);
5065 4436 max-width: 500px;
5066 4437 }
5067 4438
4439 +.frm_no_items h2 {
4440 + font-size: 25px;
4441 + margin-bottom: 30px !important;
4442 +}
4443 +
4444 +.frm_no_items p {
4445 + font-size: 14px;
4446 +}
4447 +
5068 4448 .frm-subscribe {
5069 - margin: var(--gap-lg) 0;
4449 + margin: 30px 0;
5070 4450 }
5071 4451
5072 4452 /* Inbox */
5073 4453
@@ -5077,16 +4457,16 @@
5077 4457
5078 4458 .frm_inbox_card {
5079 4459 display: grid;
5080 4460 grid-template-columns: 72px 1fr;
5081 - grid-gap: var(--gap-xs);
5082 - border-bottom: 1px solid var(--grey-300);
5083 - padding: var(--gap-md);
4461 + grid-gap: 15px;
4462 + border-bottom: 1px solid var(--grey-border);
4463 + padding: 25px;
5084 4464 }
5085 4465
5086 4466 .frm_inbox_card_icon {
5087 4467 grid-row: span 3 / span 3;
5088 - padding-top: var(--gap-xs);
4468 + padding-top: 20px;
5089 4469 text-align: center
5090 4470 }
5091 4471
5092 4472 .frm_inbox_card_icon svg {
@@ -5105,8 +4485,11 @@
5105 4485 border: none;
5106 4486 text-transform: none;
5107 4487 margin: 0;
5108 4488 padding: 0;
4489 + font-weight: 600;
4490 + color: var(--medium-grey);
4491 + font-size: 16px;
5109 4492 }
5110 4493
5111 4494 .frm_inbox_date {
5112 4495 text-align: right;
@@ -5134,8 +4517,37 @@
5134 4517 margin-left: 2px;
5135 4518 vertical-align: text-bottom;
5136 4519 }
5137 4520
4521 +/* Styles tabs */
4522 +
4523 +#frm_styling_form #frm_delete_style {
4524 + padding-right: 10px;
4525 +}
4526 +
4527 +#frm_styling_form #frm_delete_style .frmsvg {
4528 + vertical-align: -webkit-baseline-middle;
4529 +}
4530 +
4531 +.frm_pro_form .frm_form_field.frm_lite_style,
4532 +.frm_pro_form .frm_lite_style {
4533 + display: none !important;
4534 +}
4535 +
4536 +label.default-style-box input[type="checkbox"] {
4537 + vertical-align: middle;
4538 +}
4539 +
4540 +#frm_styling_form .frm_form_field input[type="checkbox"],
4541 +#frm_styling_form .frm_form_field input[type="radio"] {
4542 + vertical-align: bottom;
4543 +}
4544 +
4545 +#frm_styling_form .howto span {
4546 + float: none;
4547 + margin-top: 0;
4548 +}
4549 +
5138 4550 /* Import/Export */
5139 4551 .csv_opts #frm_csv_col_sep {
5140 4552 width: 45px;
5141 4553 }
@@ -5186,9 +4598,9 @@
5186 4598 padding: 0;
5187 4599 }
5188 4600
5189 4601 .frm-feature-banner {
5190 - background: var(--grey-700);
4602 + background: var(--dark-grey);
5191 4603 color: #fff;
5192 4604 border-radius: var(--small-radius);
5193 4605 padding: 20px;
5194 4606 margin: 10px 0;
@@ -5194,9 +4606,9 @@
5194 4606 margin: 10px 0;
5195 4607 }
5196 4608
5197 4609 .frm-feature-banner p {
5198 - font-size: var(--text-sm);
4610 + font-size: 14px;
5199 4611 }
5200 4612
5201 4613 .frm-feature-banner .dismiss {
5202 4614 margin-top: -10px;
@@ -5231,31 +4643,29 @@
5231 4643 /*Form Settings Tab*/
5232 4644
5233 4645 h2.frm-h2,
5234 4646 .frm_form_settings h2 {
5235 - border-bottom: 1px solid var(--grey-300);
5236 - color: var(--grey-900);
5237 - font-weight: 400 !important;
4647 + border-bottom: 1px solid var(--grey-border);
4648 + color: var(--dark-grey);
4649 + font-size: 20px !important;
4650 + font-weight: 500 !important;
5238 4651 padding: 9px 0 5px;
5239 4652 margin: 0;
5240 4653 }
5241 4654
5242 4655 .frm_settings_form h3,
5243 -.frm_form_settings h3,
5244 -.frm_form_settings span.frm_add_logic_link {
5245 - font-size: var(--text-md);
5246 - border-top: 1px solid var(--grey-300);
5247 - padding-top: var(--gap-sm);
5248 - margin: var(--gap-sm) 0;
4656 +.frm_form_settings h3 {
4657 + font-size: 16px;
4658 + border-top: 1px solid var(--grey-border);
4659 + padding-top: 10px;
5249 4660 font-weight: normal;
5250 4661 text-transform: uppercase;
5251 4662 color: var(--medium-grey);
5252 - display: block;
5253 4663 }
5254 4664
5255 4665 .frm_form_settings .howto {
5256 - color: var(--grey-500);
5257 - font-size: var(--text-sm);
4666 + color: var(--medium-grey);
4667 + font-size: 15px;
5258 4668 margin-top: 8px;
5259 4669 }
5260 4670
5261 4671 .frm_form_settings .advanced_settings .form-table {
@@ -5270,10 +4680,18 @@
5270 4680 width: 95%;
5271 4681 }
5272 4682
5273 4683 .frm_wrap .ui-autocomplete {
4684 + box-shadow: none;
4685 + border: 1px solid var(--grey-border);
4686 + border-radius: var(--small-radius);
4687 + background: var(--lightest-grey);
4688 + position: absolute;
5274 4689 padding: 3px 0;
4690 + font-size: 15px;
5275 4691 max-height: 310px;
4692 + overflow-y: auto;
4693 + overflow-x: hidden;
5276 4694 }
5277 4695
5278 4696 .frm_wrap .ui-widget {
5279 4697 font-family: inherit;
@@ -5279,15 +4697,26 @@
5279 4697 font-family: inherit;
5280 4698 }
5281 4699
5282 4700 .frm_wrap .ui-autocomplete li {
5283 - padding: 2px 4px;
4701 + padding: 2px 10px;
5284 4702 background: none;
5285 - color: var(--grey-700);
4703 + color: var(--dark-grey);
5286 4704 border: none;
5287 4705 font-weight: normal;
5288 4706 }
5289 4707
4708 +.frm_wrap .ui-autocomplete li div.ui-state-active,
4709 +.frm_wrap .ui-autocomplete li.ui-state-focus {
4710 + background: rgb(65, 153, 253);
4711 + color: #fff;
4712 +}
4713 +
4714 +.frm_wrap .ui-autocomplete .ui-menu-item-wrapper {
4715 + padding: 2px 10px;
4716 + border-radius: var(--small-radius);
4717 +}
4718 +
5290 4719 .frm_wrap .ui-autocomplete .ui-menu-item-wrapper.ui-state-active {
5291 4720 border: none;
5292 4721 font-weight: inherit;
5293 4722 }
@@ -5326,9 +4755,9 @@
5326 4755 #frm-insert-fields-box ul.frm_code_list li.clear.frm_block {
5327 4756 height: 10px;
5328 4757 }
5329 4758
5330 -#frm_adv_info .frm_noallow {
4759 +.frm_page_container #frm_adv_info .frm_noallow {
5331 4760 display: none;
5332 4761 }
5333 4762
5334 4763 #frm_adv_info #frm-conditionals .frm_noallow {
@@ -5363,9 +4792,9 @@
5363 4792 #frm_notification_settings .widget-top .widget-action,
5364 4793 #frm_form_editor_container .widget-top .widget-action {
5365 4794 border: 0;
5366 4795 margin: 0;
5367 - padding: 8px;
4796 + padding: 10px;
5368 4797 background: 0 0;
5369 4798 cursor: pointer;
5370 4799 outline: 0;
5371 4800 }
@@ -5370,12 +4799,12 @@
5370 4799 outline: 0;
5371 4800 }
5372 4801
5373 4802 #frm_email_addon_menu {
5374 - border: 1px solid var(--grey-300);
5375 - padding: var(--gap-sm);
4803 + border: 1px solid var(--grey-border);
4804 + padding: 15px;
5376 4805 border-radius: 4px;
5377 - margin: var(--gap-md) 0 var(--gap-sm);
4806 + margin: 25px 0 15px;
5378 4807 }
5379 4808
5380 4809 #frm_email_addon_menu .frm-search {
5381 4810 float: right;
@@ -5386,12 +4815,8 @@
5386 4815 clear: none;
5387 4816 padding-top: 7px;
5388 4817 }
5389 4818
5390 -.frm_email_settings .widget .widget-top {
5391 - background-color: var(--sidebar-color);
5392 -}
5393 -
5394 4819 .frm_email_settings .widget .widget-top,
5395 4820 .frm_email_settings .widget .widget-top h3 {
5396 4821 cursor: pointer !important;
5397 4822 }
@@ -5396,17 +4821,23 @@
5396 4821 cursor: pointer !important;
5397 4822 }
5398 4823
5399 4824 .frm_email_settings .widget {
5400 - margin-bottom: var(--gap-sm);
4825 + margin-bottom: 15px;
4826 + line-height: 1.4em;
4827 + padding: 0;
5401 4828 }
5402 4829
4830 +.frm_email_settings .widget:last-of-type {
4831 + margin-bottom: 20px;
4832 +}
4833 +
5403 4834 .frm_form_action_settings .widget-top {
5404 4835 box-shadow: none;
5405 - border-color: var(--grey-300);
5406 - border-radius: var(--small-radius);
4836 + border-color: var(--grey-border);
4837 + border-radius: 4px;
5407 4838 background: var(--lightest-grey);
5408 - color: var(--grey-700);
4839 + color: var(--dark-grey);
5409 4840 }
5410 4841
5411 4842 .frm_form_action_settings:hover .widget-top {
5412 4843 border-color: var(--grey);
@@ -5418,9 +4849,9 @@
5418 4849 border-bottom: none;
5419 4850 }
5420 4851
5421 4852 .frm_form_action_settings.open:hover .widget-top {
5422 - border-color: var(--grey-300);
4853 + border-color: var(--grey-border);
5423 4854 }
5424 4855
5425 4856 .frm_form_action_settings > .widget-inside {
5426 4857 display: none;
@@ -5432,9 +4863,9 @@
5432 4863
5433 4864 .frm_form_action_settings .widget-inside {
5434 4865 min-height: 25px;
5435 4866 padding: 15px;
5436 - border-color: var(--grey-300);
4867 + border-color: var(--grey-border);
5437 4868 border-bottom-left-radius: 4px;
5438 4869 border-bottom-right-radius: 4px;
5439 4870 }
5440 4871
@@ -5442,14 +4873,14 @@
5442 4873 .frm_form_action_settings .widget-title h3 {
5443 4874 display: inline-block;
5444 4875 border-bottom: none;
5445 4876 padding: 10px 10px 5px;
5446 - font-size: var(--text-md);
4877 + font-size: 16px;
5447 4878 font-weight: 500;
5448 4879 }
5449 4880
5450 4881 #frm_email_addon_menu h3 {
5451 - margin: 0 0 var(--gap-sm);
4882 + margin: 0 0 15px;
5452 4883 clear: both;
5453 4884 }
5454 4885
5455 4886 .frm_single_api_settings p > label {
@@ -5485,9 +4916,9 @@
5485 4916 }
5486 4917
5487 4918 #frm-hide-groups,
5488 4919 #frm-show-groups {
5489 - font-size: var(--text-md);
4920 + font-size: 16px;
5490 4921 float: right;
5491 4922 }
5492 4923
5493 4924 .frm_actions_list a:active, .frm_actions_list a:focus {
@@ -5494,16 +4925,16 @@
5494 4925 outline: none;
5495 4926 }
5496 4927
5497 4928 .frm_actions_list a {
5498 - font-size: var(--text-sm);
5499 - color: var(--grey-700);
4929 + font-size: 14px;
4930 + color: var(--dark-grey);
5500 4931 word-break: break-word;
5501 4932 }
5502 4933
5503 4934 .frm_actions_list span.frm-outer-circle {
5504 4935 /* 50px total with 30px content */
5505 - background-color: var(--grey-100);
4936 + background-color: var(--sidebar-color);
5506 4937 padding: 10px;
5507 4938 text-align: center;
5508 4939 border-radius: 50%;
5509 4940 display: block;
@@ -5509,13 +4940,12 @@
5509 4940 display: block;
5510 4941 width: 30px;
5511 4942 height: 30px;
5512 4943 margin: 0 auto 15px;
5513 - line-height: 1;
5514 4944 }
5515 4945
5516 4946 .frm_email_settings .widget-title h4 {
5517 - color: var(--grey-700);
4947 + color: var(--dark-grey);
5518 4948 }
5519 4949
5520 4950 .frm_disabled_action .widget-title h4 {
5521 4951 color: var(--grey);
@@ -5531,17 +4961,16 @@
5531 4961 }
5532 4962
5533 4963 span.frm-inner-circle,
5534 4964 .frm_email_settings .widget-title .frm_form_action_icon {
5535 - background-color: var(--grey-400);
4965 + background-color: var(--grey-border);
5536 4966 border-radius: 50%;
5537 4967 display: inline-block;
5538 4968 text-align: center;
5539 - line-height: 1;
5540 4969 }
5541 4970
5542 4971 span.frm-inner-circle {
5543 - background-color: var(--primary-700);
4972 + background-color: var(--primary-hover);
5544 4973 height: 22px;
5545 4974 width: 22px;
5546 4975 padding: 4px;
5547 4976 color: #fff;
@@ -5554,9 +4983,9 @@
5554 4983 .frm_email_settings .widget-title .frm_form_action_icon {
5555 4984 height: 15px;
5556 4985 width: 15px;
5557 4986 padding: 5px;
5558 - color: #fff;
4987 + color: var(--lightest-grey);
5559 4988 vertical-align: middle;
5560 4989 }
5561 4990
5562 4991 .frm_actions_list .frmsvg,
@@ -5577,9 +5006,9 @@
5577 5006 }
5578 5007
5579 5008 span.frm-inner-circle.frm-inverse {
5580 5009 background-color: transparent;
5581 - color: var(--primary-700);
5010 + color: var(--primary-hover);
5582 5011 padding: 0;
5583 5012 height: 30px;
5584 5013 width: 100%;
5585 5014 }
@@ -5585,9 +5014,9 @@
5585 5014 }
5586 5015
5587 5016 .frm_actions_list span.frm-inverse i,
5588 5017 .frm_actions_list span.frm-inverse .frmsvg {
5589 - color: var(--primary-700);
5018 + color: var(--primary-hover);
5590 5019 height: 30px;
5591 5020 width: 30px;
5592 5021 font-size: 30px;
5593 5022 padding: 0;
@@ -5599,9 +5028,9 @@
5599 5028 font-size: 30px;
5600 5029 }
5601 5030
5602 5031 .frm_email_settings .widget-title .frm_form_action_icon.frm-inverse {
5603 - background: #fff;
5032 + background: transparent;
5604 5033 padding: 0;
5605 5034 height: 24px;
5606 5035 width: 24px;
5607 5036 }
@@ -5607,17 +5036,18 @@
5607 5036 }
5608 5037
5609 5038 .frm_email_settings .widget-title .frm_form_action_icon.frm-inverse .frmsvg,
5610 5039 .frm_email_settings .widget-title .frm_form_action_icon.frm-inverse i:before {
5611 - color: var(--grey-400);
5040 + color: var(--grey-border);
5612 5041 height: 24px;
5613 5042 width: 24px;
5614 5043 font-size: 24px;
5044 + line-height: 1em;
5615 5045 }
5616 5046
5617 5047 .frm_email_settings .widget-title:hover .frm_form_action_icon.frm-inverse .frmsvg,
5618 5048 .frm_email_settings .widget-title:hover .frm_form_action_icon.frm-inverse i:before {
5619 - color: var(--grey-500);
5049 + color: var(--grey);
5620 5050 }
5621 5051
5622 5052 .frm_email_icons {
5623 5053 padding: 10px 0 5px 6px;
@@ -5628,8 +5058,9 @@
5628 5058 margin-left: 8px;
5629 5059 color: var(--grey);
5630 5060 opacity: 0;
5631 5061 transition: all .2s ease;
5062 + vertical-align: middle;
5632 5063 }
5633 5064
5634 5065 .frm_email_icons a .frmsvg {
5635 5066 color: var(--grey);
@@ -5648,8 +5079,16 @@
5648 5079 .frm_actions_list .frm_inactive_action i {
5649 5080 opacity: .4;
5650 5081 }
5651 5082
5083 +.frm-no-margin {
5084 + margin: 0;
5085 +}
5086 +
5087 +.frm-no-border {
5088 + border: none !important;
5089 +}
5090 +
5652 5091 table td, .form-table tr td {
5653 5092 vertical-align: top;
5654 5093 }
5655 5094
@@ -5676,12 +5115,8 @@
5676 5115 #frm_notification_settings .frm_form_action_settings td p {
5677 5116 padding: 7px 0;
5678 5117 }
5679 5118
5680 -#permissions_settings_settings .frm_grid_container {
5681 - align-items: center;
5682 -}
5683 -
5684 5119 #frm_notification_settings .form-table > tbody > tr > th {
5685 5120 width: 150px;
5686 5121 font-weight: normal;
5687 5122 padding-right: 10px;
@@ -5703,8 +5138,9 @@
5703 5138 #frm_notification_settings .frm_left_label {
5704 5139 /* For add-ons that haven't been updated for 4.0 */
5705 5140 float: none;
5706 5141 width: auto !important;
5142 + line-height: 1;
5707 5143 }
5708 5144
5709 5145 .frm-fields .frm_autoresponder_rows select {
5710 5146 width: auto;
@@ -5717,17 +5153,16 @@
5717 5153 width: 100%;
5718 5154 }
5719 5155
5720 5156 #frm_notification_settings .frm_email_buttons {
5721 - padding: var(--gap-2xs);
5157 + padding: 7px;
5722 5158 background: var(--light-blue);
5723 - color: var(--primary-700);
5724 - border-radius: var(--small-radius);
5159 + color: var(--primary-hover);
5160 + border-radius: 4px;
5725 5161 border-color: var(--blue-border);
5726 - line-height: 1;
5162 + line-height: 1em;
5727 5163 height: auto;
5728 - min-height: 12px;
5729 - font-size: var(--text-xs);
5164 + font-size: 12px;
5730 5165 box-shadow: none;
5731 5166 }
5732 5167
5733 5168 .frm_reply_to_container,
@@ -5732,31 +5167,34 @@
5732 5167
5733 5168 .frm_reply_to_container,
5734 5169 .frm_bcc_cc_container {
5735 5170 float: right;
5736 - margin: -4px 0 0;
5171 + margin: -8px 0 0;
5737 5172 z-index: 1;
5738 5173 position: relative;
5739 5174 }
5740 5175
5741 5176 .frm_email_row .frm_cancel1_icon:before {
5177 + line-height: 1;
5742 5178 vertical-align: bottom;
5743 5179 }
5744 5180
5181 +.frm_action_id {
5182 + padding-top: 10px;
5183 +}
5184 +
5745 5185 .frm_logic_field_opts {
5746 5186 max-width: 35%;
5747 5187 }
5748 5188
5749 5189 .frm-inline-select,
5750 -p.frm-inline-select,
5751 5190 #frm_submit_logic_row,
5752 5191 .frm_logic_rows .frm-collapse-me {
5753 - line-height: var(--h-md) !important;
5192 + line-height: 30px;
5754 5193 }
5755 5194
5756 -.frm_logic_row {
5757 - padding: var(--gap-xs) 0 0;
5758 - align-items: center;
5195 +.frm_logic_row:first-of-type {
5196 + padding-top: 8px;
5759 5197 }
5760 5198
5761 5199 .frm-single-settings .frm_logic_row > select {
5762 5200 max-width: 32.5% !important;
@@ -5793,8 +5231,13 @@
5793 5231 margin-bottom: 0;
5794 5232 padding: 0;
5795 5233 }
5796 5234
5235 +.frm_form_settings input[type="text"] {
5236 + line-height: normal;
5237 + height: auto;
5238 +}
5239 +
5797 5240 #poststuff .widgets-holder-wrap .frm_form_action_settings .widget-inside {
5798 5241 padding-bottom: 0;
5799 5242 }
5800 5243
@@ -5803,9 +5246,9 @@
5803 5246 padding-right: 15px;
5804 5247 }
5805 5248
5806 5249 #form_global_settings h3 {
5807 - font-size: var(--text-sm);
5250 + font-size: 14px;
5808 5251 margin-top: 25px;
5809 5252 }
5810 5253
5811 5254 #form_global_settings .tabs-panel + h3 {
@@ -5820,9 +5263,9 @@
5820 5263 border-top: 1px solid #eee;
5821 5264 border-bottom: none;
5822 5265 margin: 15px -15px 0;
5823 5266 padding: 8px 15px;
5824 - font-size: var(--text-sm);
5267 + font-size: 14px;
5825 5268 }
5826 5269
5827 5270 #poststuff .frm_form_settings h3.frm_first_h3,
5828 5271 #poststuff h3.frm_first_h3 {
@@ -5833,8 +5276,20 @@
5833 5276 h3.frm_add_logic_link {
5834 5277 margin-bottom: 0 !important;
5835 5278 }
5836 5279
5280 +a.frm_add_logic_link {
5281 + display: block;
5282 + text-align: center;
5283 + margin: 10px auto;
5284 + padding: 10px;
5285 + width: 80%;
5286 + max-width: 290px;
5287 + font-size: 19px;
5288 + border: 1px solid var(--primary-color);
5289 + border-radius: var(--border-radius);
5290 +}
5291 +
5837 5292 a.frm_add_logic_link.frm_hidden {
5838 5293 display: none;
5839 5294 }
5840 5295
@@ -5854,9 +5309,9 @@
5854 5309 bottom: 0;
5855 5310 }
5856 5311
5857 5312 .frm_right_addon input {
5858 - padding-right: var(--gap-lg);
5313 + padding-right: 30px;
5859 5314 }
5860 5315
5861 5316 .frm_icon_font {
5862 5317 color: #A0A0A0;
@@ -5862,12 +5317,8 @@
5862 5317 color: #A0A0A0;
5863 5318 color: var(--grey);
5864 5319 }
5865 5320
5866 -.frm-fields label .frm_icon_font {
5867 - font-size: inherit;
5868 -}
5869 -
5870 5321 .misc-pub-revisions.frm_icon_font,
5871 5322 .misc-pub-revisions.frm_icon_font:hover {
5872 5323 color: inherit;
5873 5324 }
@@ -5954,10 +5405,10 @@
5954 5405 position: relative;
5955 5406 top: 2px;
5956 5407 }
5957 5408
5958 -.frm-field-action-icons > a {
5959 - font-size: var(--text-md);
5409 +.frm-field-action-icons a {
5410 + font-size: 16px;
5960 5411 width: 17px;
5961 5412 }
5962 5413
5963 5414 .frm-field-action-icons a:hover {
@@ -5967,26 +5418,21 @@
5967 5418 .frm-field-action-icons .dropdown {
5968 5419 display: inline-block;
5969 5420 }
5970 5421
5971 -.frm-field-action-icons > a .frmsvg {
5972 - color: var(--grey-500) !important;
5422 +.frm-field-action-icons a .frmsvg {
5423 + color: #9EA9B8 !important;
5973 5424 font-size: 17px;
5974 5425 width: 17px;
5975 5426 height: 17px;
5976 5427 }
5977 5428
5978 -.frm-field-action-icons > a .frmsvg,
5979 -.frm-field-action-icons > div > a .frmsvg {
5980 - vertical-align: baseline;
5981 -}
5982 -
5983 5429 .edit_field_type_end_divider .frm-field-action-icons {
5984 5430 display: none !important;
5985 5431 }
5986 5432
5987 5433 .frm-move {
5988 - cursor: grab;
5434 + cursor: move;
5989 5435 }
5990 5436
5991 5437 span.howto {
5992 5438 display: inline;
@@ -6032,9 +5478,9 @@
6032 5478 margin-bottom: 10px;
6033 5479 }
6034 5480
6035 5481 .frm_no_entries_form .frm_no_entries_text {
6036 - line-height: var(--leading);
5482 + line-height: 200%;
6037 5483 }
6038 5484
6039 5485 #form_entries_page #the-list .no-items {
6040 5486 height: 240px; /* Equals to the max height of search dropdown */
@@ -6063,10 +5509,9 @@
6063 5509 }
6064 5510
6065 5511 .frm_wrap .google-visualization-table-tr-head,
6066 5512 .frm_wrap .google-visualization-table-tr-head th {
6067 - white-space: pre-wrap;
6068 - font-size: var(--text-md);
5513 + font-size: 16px;
6069 5514 font-weight: 400 !important;
6070 5515 text-align: left;
6071 5516 }
6072 5517
@@ -6082,8 +5527,12 @@
6082 5527 width: 20%;
6083 5528 min-width: 175px;
6084 5529 }
6085 5530
5531 +#form_reports_page h2 {
5532 + margin-top: 2em !important;
5533 +}
5534 +
6086 5535 /* Views Page */
6087 5536 #form_views_page img.frm_no_views {
6088 5537 max-width: 100%;
6089 5538 }
@@ -6193,9 +5642,9 @@
6193 5642 }
6194 5643
6195 5644 #frm-show-fields {
6196 5645 min-height: 350px;
6197 - padding: 0 0 35px;
5646 + padding: 10px 0 35px;
6198 5647 margin: 0;
6199 5648 position: relative;
6200 5649 }
6201 5650
@@ -6202,22 +5651,8 @@
6202 5651 .frm-has-fields #frm-show-fields {
6203 5652 min-height: 50px;
6204 5653 }
6205 5654
6206 -#frm_builder_page .frm-lite-credit-card-element,
6207 -body.frm-admin-page-styles .frm-lite-credit-card-element {
6208 - position: relative;
6209 -}
6210 -
6211 -#frm_builder_page .frm-lite-credit-card-element > div,
6212 -body.frm-admin-page-styles .frm-lite-credit-card-element > div {
6213 - position: absolute;
6214 - top: calc( 50% - 1px);
6215 - transform: translateY(-50%);
6216 - right: 10px;
6217 - color: #d0d4dd;
6218 -}
6219 -
6220 5655 #frm_builder_page #frm_field_group_controls {
6221 5656 position: absolute;
6222 5657 padding: 5px;
6223 5658 border-radius: 4px 4px 0 0;
@@ -6255,10 +5690,11 @@
6255 5690 .frm-field-group-hover-target #frm_field_group_controls {
6256 5691 visibility: visible;
6257 5692 }
6258 5693
6259 -#frm_field_group_controls .dropdown-item a span {
6260 - color: var(--grey-700);
5694 +#frm_field_group_controls .dropdown-item a span,
5695 +.frm-field-action-icons .dropdown-item a span {
5696 + color: var(--dark-grey);
6261 5697 }
6262 5698
6263 5699 #frm_field_group_controls .dropdown-item a:hover {
6264 5700 text-decoration: none;
@@ -6374,10 +5810,10 @@
6374 5810 }
6375 5811
6376 5812 .frm-page-collapsed .frm_clone_icon,
6377 5813 .frm-page-collapsed .frm_delete_field,
6378 -.frm-page-collapsed .frm_clone_field,
6379 -.frm-section-collapsed .frm_clone_icon {
5814 +.frm-section-collapsed .frm_clone_icon,
5815 +.frm-section-collapsed .frm_delete_field {
6380 5816 opacity: .5;
6381 5817 cursor: not-allowed;
6382 5818 }
6383 5819
@@ -6415,9 +5851,9 @@
6415 5851 content: '';
6416 5852 display: block;
6417 5853 padding: 2px 0;
6418 5854 line-height: 1px;
6419 - border-top: 2px solid var(--grey-300);
5855 + border-top: 2px solid var(--grey-border);
6420 5856 top: -2px;
6421 5857 position: absolute;
6422 5858 width: 100%;
6423 5859 transition: .5s border-color ease-in-out;
@@ -6429,9 +5865,8 @@
6429 5865 }
6430 5866
6431 5867 .frm-section-collapsed .divider_section_only:hover:after,
6432 5868 li.selected.frm-section-collapsed .divider_section_only:before,
6433 -li.selected.frm-section-collapsed .divider_section_only:after,
6434 5869 .divider_section_only:hover:before,
6435 5870 li.selected .divider_section_only:before {
6436 5871 border-color: transparent;
6437 5872 }
@@ -6439,10 +5874,10 @@
6439 5874 .frm_sorting li.ui-state-default.edit_field_type_divider {
6440 5875 overflow: visible;
6441 5876 position: relative;
6442 5877 padding: 0 0 0 20px;
6443 - margin: 25px 0 0 -5px;
6444 - border-left: 1px solid var(--primary-700);
5878 + margin: 25px 0 0 -20px;
5879 + border-left: 1px solid var(--primary-hover);
6445 5880 transition: border 0.7s ease-out;
6446 5881 }
6447 5882
6448 5883 .frm-section-collapsed {
@@ -6450,9 +5885,9 @@
6450 5885 }
6451 5886
6452 5887 .frm_sorting li.edit_field_type_end_divider,
6453 5888 .frm_sorting .no_repeat_section li.ui-state-default.edit_field_type_end_divider:hover {
6454 - margin: 0 0 var(--gap-sm);
5889 + margin: 0 0 15px;
6455 5890 }
6456 5891
6457 5892 .frm-first-page .frm_prev_page {
6458 5893 display: none;
@@ -6457,19 +5892,22 @@
6457 5892 .frm-first-page .frm_prev_page {
6458 5893 display: none;
6459 5894 }
6460 5895
6461 -#frm_builder_page .frm_remove_form_row.frm_button,
6462 -#frm_builder_page .frm_add_form_row.frm_button {
5896 +#frm-form-button button,
5897 +.frm_remove_form_row.frm_button,
5898 +.frm_add_form_row.frm_button,
5899 +.frm-white-body .frm-preview-buttons button {
6463 5900 border-radius: var(--small-radius);
6464 5901 border: 1px solid var(--blue-border);
5902 + color: var(--primary-color);
6465 5903 }
6466 5904
6467 -#frm_builder_page .frm_remove_form_row .frmsvg,
6468 -#frm_builder_page .frm_remove_form_row i:before,
6469 -#frm_builder_page .frm_add_form_row .frmsvg,
6470 -#frm_builder_page .frm_add_form_row i:before {
6471 - color: var(--primary-700);
5905 +.frm_wrap .frm_remove_form_row .frmsvg,
5906 +.frm_remove_form_row i:before,
5907 +.frm_wrap .frm_add_form_row .frmsvg,
5908 +.frm_add_form_row i:before {
5909 + color: var(--primary-hover);
6472 5910 }
6473 5911
6474 5912 .frm-preview-buttons .frm_button_submit {
6475 5913 margin: 0 5px;
@@ -6475,10 +5913,10 @@
6475 5913 margin: 0 5px;
6476 5914 }
6477 5915
6478 5916 .frm-page-break {
6479 - border-top: 1px dashed var(--primary-700);
6480 - margin-top: var(--gap-lg);
5917 + border-top: 1px dashed var(--primary-hover);
5918 + margin-top: 30px;
6481 5919 position: relative;
6482 5920 }
6483 5921
6484 5922 .edit_field_type_divider:before,
@@ -6491,9 +5929,9 @@
6491 5929 width: 4px;
6492 5930 height: 4px;
6493 5931 background-color: #fff;
6494 5932 border-radius: 50%;
6495 - border: 1px solid var(--primary-700);
5933 + border: 1px solid var(--primary-hover);
6496 5934 text-rendering: auto;
6497 5935 -webkit-font-smoothing: antialiased;
6498 5936 }
6499 5937
@@ -6515,12 +5953,13 @@
6515 5953 width: 20px;
6516 5954 height: 20px;
6517 5955 left: -11px;
6518 5956 top: 0;
6519 - background: var(--primary-700);
5957 + background: var(--primary-hover);
6520 5958 text-align: center;
6521 5959 color: #fff;
6522 5960 font-size: 13px;
5961 + line-height: 22px;
6523 5962 }
6524 5963
6525 5964 .edit_field_type_divider:before{
6526 5965 font-family: 's11-fp';
@@ -6541,20 +5980,20 @@
6541 5980
6542 5981
6543 5982 .frm_sorting li.edit_field_type_divider:hover,
6544 5983 .frm_sorting li.edit_field_type_divider.selected {
6545 - border-left-color: var(--primary-500);
5984 + border-left-color: var(--primary-color);
6546 5985 }
6547 5986
6548 5987 .edit_field_type_divider.selected:before,
6549 5988 .edit_field_type_divider:hover:before {
6550 - border-color: var(--primary-500);
6551 - background: var(--primary-500);
5989 + border-color: var(--primary-color);
5990 + background: var(--primary-color);
6552 5991 }
6553 5992
6554 5993 .edit_field_type_divider.selected:after,
6555 5994 .edit_field_type_divider:hover:after {
6556 - border-color: var(--primary-500);
5995 + border-color: var(--primary-color);
6557 5996 }
6558 5997
6559 5998 .frm-section-collapsed:after {
6560 5999 border-color: transparent !important;
@@ -6562,11 +6001,19 @@
6562 6001 }
6563 6002
6564 6003 .frm-page-break .frm-collapse-page.button {
6565 6004 margin-left: 46%;
6566 - margin-top: calc( -28px / 2 );
6005 + margin-top: -15px;
6006 + background-color: #fff;
6007 + border-color: var(--primary-hover) !important;
6008 + color: var(--primary-hover);
6567 6009 }
6568 6010
6011 +#frm-fake-page .frm-collapse-page.button {
6012 + border-color: var(--grey) !important;
6013 + color: var(--grey);
6014 +}
6015 +
6569 6016 #frm-fake-page.frm-page-collapsed {
6570 6017 margin-bottom: 0;
6571 6018 }
6572 6019
@@ -6572,15 +6019,15 @@
6572 6019
6573 6020 .frm-page-collapsed {
6574 6021 position: relative;
6575 6022 overflow: visible !important;
6576 - margin-bottom: var(--gap-lg);
6023 + margin-bottom: 30px;
6577 6024 }
6578 6025
6579 6026 .frm-page-collapsed:after {
6580 6027 content: '';
6581 6028 display: block;
6582 - border: 1px dashed var(--grey-300);
6029 + border: 1px dashed var(--grey-border);
6583 6030 border-left: none;
6584 6031 border-right: none;
6585 6032 height: 6px;
6586 6033 position: absolute;
@@ -6587,40 +6034,31 @@
6587 6034 width: calc( 100% - 10px );
6588 6035 bottom: -15px;
6589 6036 }
6590 6037
6591 -.frm-collapse-page .frmsvg,
6592 6038 .frm-collapse-page .frm_arrowdown6_icon {
6593 - width: var(--text-sm);
6594 - height: var(--text-sm);
6595 - font-size: var(--text-sm);
6039 + width: 16px;
6596 6040 text-align: center;
6597 6041 margin-left: 2px;
6598 - color: currentColor;
6042 + color: var(--primary-hover);
6599 6043 }
6600 6044
6601 6045 #frm-fake-page .frm_arrowdown6_icon {
6602 - color: currentColor;
6046 + color: var(--grey);
6603 6047 }
6604 6048
6049 +#frm-fake-page .frm-collapse-page:hover,
6050 +#frm-fake-page .frm-collapse-page:hover .frm_arrowdown6_icon,
6051 +.frm-collapse-page:hover .frm_arrowdown6_icon {
6052 + color: #fff;
6053 +}
6054 +
6605 6055 .frm-collapsed i:before,
6056 +.frm-section-collapsed .frm_arrowdown6_icon:before,
6606 6057 .frm-page-collapsed .frm_arrowdown6_icon:before {
6607 6058 content: '\e913';
6608 6059 }
6609 6060
6610 -.frm-collapse-section svg {
6611 - fill: var(--primary-color);
6612 - transition: transform 0.2s ease-out, fill 0.2s ease-out;
6613 -}
6614 -
6615 -.frm-collapse-section:hover svg {
6616 - fill: var(--primary-700);
6617 -}
6618 -
6619 -.frm-section-collapsed .frm-collapse-section svg {
6620 - transform: rotate(-90deg);
6621 -}
6622 -
6623 6061 .open .widget-top .frm_arrow_right_icon:before {
6624 6062 content: '\e62a';
6625 6063 }
6626 6064
@@ -6662,14 +6100,14 @@
6662 6100 .frm_no_section_fields {
6663 6101 text-align: center;
6664 6102 position: absolute;
6665 6103 color: var(--medium-grey);
6666 - font-size: var(--text-md);
6104 + font-size: 16px;
6667 6105 box-sizing: border-box;
6668 - border: 1px dashed var(--grey-300);
6106 + border: 1px dashed var(--grey-border);
6669 6107 }
6670 6108
6671 -.ui-droppable-active ~ .frm_no_fields {
6109 +.drop-me + .frm_no_fields {
6672 6110 border-style: solid;
6673 6111 }
6674 6112
6675 6113 .frm_no_section_fields {
@@ -6701,9 +6139,9 @@
6701 6139 display: block;
6702 6140 }
6703 6141
6704 6142 .frm-large-plus.frmsvg {
6705 - color: var(--primary-700);
6143 + color: var(--primary-hover);
6706 6144 height: 45px;
6707 6145 width: 45px;
6708 6146 }
6709 6147
@@ -6823,12 +6261,10 @@
6823 6261
6824 6262 .frm-category-tabs > li a,
6825 6263 .frm-category-tabs > li a:active {
6826 6264 outline: none;
6265 + -webkit-box-shadow: none;
6827 6266 box-shadow: none;
6828 - display: flex;
6829 - gap: var(--gap-xs);
6830 - align-items: center;
6831 6267 }
6832 6268
6833 6269 .frm-category-tabs > li.active .frmsvg,
6834 6270 .frm-category-tabs > li.active i,
@@ -6833,15 +6269,15 @@
6833 6269 .frm-category-tabs > li.active .frmsvg,
6834 6270 .frm-category-tabs > li.active i,
6835 6271 .frm-category-tabs > li.active span,
6836 6272 .frm-category-tabs > li.active a {
6837 - color: var(--primary-500);
6273 + color: var(--primary-color);
6838 6274 }
6839 6275
6840 6276 .frm_wrap .manage-menus {
6841 6277 margin-top: 0;
6842 6278 border: none;
6843 - border-bottom: 1px solid var(--grey-300);
6279 + border-bottom: 1px solid var(--grey-border);
6844 6280 background: var(--lightest-grey);
6845 6281 }
6846 6282
6847 6283 .general_settings .postbox .manage-menus {
@@ -6877,9 +6313,9 @@
6877 6313 padding-top: 10px;
6878 6314 }
6879 6315
6880 6316 .frm-right-panel .ui-state-default, #postbox-container-1 .ui-state-default {
6881 - color: var(--grey-900);
6317 + color: var(--darkest-grey);
6882 6318 }
6883 6319
6884 6320 .no_repeat_section .frm_sorting > li.ui-state-default.edit_field_type_end_divider:hover {
6885 6321 box-shadow: none;
@@ -6895,14 +6331,14 @@
6895 6331 .frm_sorting li.ui-state-default.selected.edit_field_type_divider .divider_section_only,
6896 6332 .frm_update_msg,
6897 6333 .frm_sorting li.ui-state-default.frm_not_divider.selected,
6898 6334 .frm_sorting li.ui-state-default.selected.edit_field_type_divider .divider_section_only {
6899 - border-color: var(--primary-500);
6335 + border-color: var(--primary-color);
6900 6336 transition: .5s border-color ease-in-out;
6901 6337 }
6902 6338
6903 6339 .frm_sorting li.ui-state-default.frm_not_divider.selected {
6904 - box-shadow: 0 0 1px 0 var(--primary-500);
6340 + box-shadow: 0 0 1px 0 var(--primary-color);
6905 6341 }
6906 6342
6907 6343 .frm_sorting li.ui-state-default {
6908 6344 transition: .7s box-shadow ease-in-out, .7s height linear;
@@ -6925,9 +6361,9 @@
6925 6361 font-weight: bold;
6926 6362 border: 1px solid #DFDFDF;
6927 6363 background-color: #EEEEEE;
6928 6364 padding: 3px 5px 2px;
6929 - font-size: var(--text-md);
6365 + font-size: 16px;
6930 6366 line-height: 20px;
6931 6367 }
6932 6368
6933 6369 .frm_update_msg {
@@ -6965,13 +6401,8 @@
6965 6401 .widefat .column-shortcode {
6966 6402 width: 9em;
6967 6403 }
6968 6404
6969 -.toplevel_page_formidable .column-shortcode div {
6970 - display: flex;
6971 - gap: var(--gap-xs);
6972 -}
6973 -
6974 6405 .widefat .column-entries, .widefat .column-link {
6975 6406 width: 10%;
6976 6407 text-align: center;
6977 6408 }
@@ -6979,22 +6410,23 @@
6979 6410 .widefat .column-form_key, .widefat .column-created_at {
6980 6411 width: 10%;
6981 6412 }
6982 6413
6983 -.frm-white-body .search-box,
6414 +.post-type-frm_display .search-box,
6984 6415 .frm_wrap .frm-search {
6985 6416 float: right;
6986 - margin: 0;
6417 + margin-bottom: 15px;
6987 6418 clear: right;
6988 6419 }
6989 6420
6990 -.frm-white-body .search-box,
6421 +#form_entries_page form .frm-search {
6422 + margin-top: 15px;
6423 +}
6424 +
6991 6425 .frm-search {
6992 - min-width: 32%;
6426 + width: 32%;
6427 + float: right;
6993 6428 position: relative;
6994 - display: flex;
6995 - gap: var(--gap-sm);
6996 - align-items: center;
6997 6429 }
6998 6430
6999 6431 .frm-inline-modal .frm-search,
7000 6432 #frm_adv_info .frm-search {
@@ -7000,9 +6432,9 @@
7000 6432 #frm_adv_info .frm-search {
7001 6433 float: none;
7002 6434 width: 100%;
7003 6435 clear: both;
7004 - margin: var(--gap-xs) 0;
6436 + margin: 5px 0 10px;
7005 6437 }
7006 6438
7007 6439 .frm-button-group a {
7008 6440 margin: 0 7px !important;
@@ -7019,9 +6451,9 @@
7019 6451
7020 6452 i.frm-show-box,
7021 6453 i.frm-show-inline-modal,
7022 6454 .frm-with-left-icon i,
7023 -.frm-with-right-icon i:not([class*=mce-]),
6455 +.frm-with-right-icon i,
7024 6456 .frmsvg.frm-show-box,
7025 6457 .frmsvg.frm-show-inline-modal,
7026 6458 .frm-with-left-icon .frmsvg,
7027 6459 .frm-with-right-icon .frmsvg,
@@ -7027,17 +6459,18 @@
7027 6459 .frm-with-right-icon .frmsvg,
7028 6460 .frm-search > .frmsvg,
7029 6461 .frm-search span:not(.multiselect-selected-text):not(.multiselect-native-select) {
7030 6462 position: absolute;
7031 - padding: 0 14px;
6463 + padding: 7px 10px;
7032 6464 pointer-events: none;
7033 6465 left: 0;
7034 - color: var(--grey-400);
7035 - font-size: var(--text-xs);
6466 + color: var(--grey);
6467 + opacity: .5;
6468 + font-size: 18px;
7036 6469 }
7037 6470
7038 6471 .frm-with-right-icon .frmsvg,
7039 -.frm-with-right-icon i:not([class*=mce-]) {
6472 +.frm-with-right-icon i {
7040 6473 right: 0;
7041 6474 top: -3px;
7042 6475 left: auto;
7043 6476 padding: 0 10px 0 5px;
@@ -7042,35 +6475,20 @@
7042 6475 left: auto;
7043 6476 padding: 0 10px 0 5px;
7044 6477 }
7045 6478
7046 -.frm_form_settings .frm-with-right-icon .frmsvg {
7047 - top: 0;
7048 -}
7049 -
7050 -.frm_form_settings .wp-editor-container .frm-with-right-icon .frmsvg {
7051 - top: auto;
7052 - bottom: 0;
7053 -}
7054 -
7055 -.frm_form_settings .frm_has_textarea .frm-with-right-icon .frmsvg {
7056 - top: auto;
7057 - bottom: 6px;
7058 -}
7059 -
7060 6479 .frmsvg.frm-show-box,
7061 6480 .frmsvg.frm-show-inline-modal,
7062 6481 i.frm-show-box,
7063 6482 i.frm-show-inline-modal {
7064 - color: var(--primary-500);
6483 + color: var(--primary-color);
7065 6484 pointer-events: initial;
7066 6485 cursor: pointer;
7067 6486 z-index: 1;
7068 6487 opacity: 1;
6488 + right: 2px;
7069 6489 top: auto;
7070 - margin: calc( ( 36px - 18px ) / 2 ); /* input height - svg / 2 */
7071 - margin-bottom: 0;
7072 - padding: 0;
6490 + padding: 7px 10px;
7073 6491 }
7074 6492
7075 6493 .frm-open .frmsvg.frm-show-inline-modal,
7076 6494 .frm-open i.frm-show-inline-modal {
@@ -7093,9 +6511,9 @@
7093 6511
7094 6512 .frm_wrap .frm-with-right-icon textarea,
7095 6513 .frm_wrap .frm-with-right-icon input,
7096 6514 .frm_wrap .frm-with-right-icon input[type=text] {
7097 - padding-right: var(--gap-md);
6515 + padding-right: 35px;
7098 6516 }
7099 6517
7100 6518 #frm-show-fields .frm-with-left-icon .frmsvg,
7101 6519 #frm-show-fields .frm-with-left-icon i {
@@ -7101,29 +6519,43 @@
7101 6519 #frm-show-fields .frm-with-left-icon i {
7102 6520 padding-top: 10px;
7103 6521 }
7104 6522
6523 +.frm-search input.frm-search-input,
7105 6524 .frm-search input[name="s"],
6525 +.frm-search #search-submit {
6526 + border-color: var(--grey-border);
6527 + box-shadow: none;
6528 + margin: 0;
6529 + padding: 7px;
6530 + height: auto;
6531 + font-size: 13px;
6532 + line-height: normal;
6533 +}
6534 +
7106 6535 .frm-search .dropdown-toggle,
7107 6536 .frm-search input.frm-search-input {
7108 - border-radius: var(--small-radius);
6537 + border-radius: var(--border-radius);
7109 6538 padding-left: 33px !important;
7110 - border-color: var(--grey-300);
7111 6539 }
7112 6540
7113 -.frm_wrap .frm-search .frm-search-input,
7114 -.frm-modal .frm-search .frm-search-input,
7115 -.frm-white-body .search-box input[name="s"], /* Views search */
7116 -.frm_wrap .frm-search input[name="s"] {
7117 - padding-top: 3px;
7118 - padding-bottom: 3px;
7119 - flex: 1;
7120 - font-size: var(--text-sm);
6541 +.frm-search input[name="s"] {
6542 + width: 70%;
6543 + float: left;
6544 + border-radius: var(--border-radius) 0 0 var(--border-radius) !important;
6545 + border-right-width: 0;
6546 + padding-left: 33px;
7121 6547 }
7122 6548
7123 -.frm-search .dropdown-toggle {
6549 +.frm-search .dropdown-toggle,
6550 +.frm-search input.frm-auto-search {
7124 6551 width: 100%;
6552 + border-right-width: 1px;
6553 + border-radius: var(--border-radius) !important;
7125 6554 float: none;
6555 +}
6556 +
6557 +.frm-search .dropdown-toggle {
7126 6558 max-width: 200px;
7127 6559 background: transparent;
7128 6560 padding: 7px;
7129 6561 min-height: 32px;
@@ -7131,18 +6563,22 @@
7131 6563 overflow: hidden;
7132 6564 text-overflow: ellipsis;
7133 6565 }
7134 6566
7135 -span.multiselect-selected-text {
6567 +.frm-search span.multiselect-selected-text {
7136 6568 white-space: nowrap;
7137 - display: inline-block;
7138 - max-width: 90%;
7139 - text-overflow: ellipsis;
7140 - overflow: hidden;
6569 + display: inline-block;
7141 6570 }
7142 6571
6572 +.frm-search #search-submit {
6573 + width: 30%;
6574 + border-radius: 0 var(--border-radius) var(--border-radius) 0;
6575 + text-align: center;
6576 + background-color: var(--lightest-grey);
6577 +}
6578 +
7143 6579 .frm-search #search-submit a {
7144 - color: var(--grey-800);
6580 + color: var(--primary-color);
7145 6581 }
7146 6582
7147 6583 .frm-search #search-submit .caret {
7148 6584 opacity:.7;
@@ -7148,15 +6584,15 @@
7148 6584 opacity:.7;
7149 6585 }
7150 6586
7151 6587 .frm-not-set input {
7152 - color: var(--primary-500) !important;
6588 + color: var(--primary-color) !important;
7153 6589 font-size: 13px;
7154 6590 }
7155 6591
7156 6592 .frm-not-set .frmsvg,
7157 6593 .frm-not-set i {
7158 - color: var(--primary-700);
6594 + color: var(--primary-hover);
7159 6595 opacity: 1;
7160 6596 }
7161 6597
7162 6598 .post-type-frm_display select[name="m"] + #post-query-submit,
@@ -7224,9 +6660,9 @@
7224 6660
7225 6661 .post-type-frm_display #advanced-sortables h2.hndle,
7226 6662 .post-type-frm_display #side-sortables h2.hndle,
7227 6663 .post-type-frm_display #normal-sortables h2.hndle {
7228 - border-bottom: 1px solid var(--grey-300);
6664 + border-bottom: 1px solid var(--grey-border);
7229 6665 margin: 10px 0 0 !important;
7230 6666 padding: 0 25px 8px;
7231 6667 }
7232 6668
@@ -7235,9 +6671,9 @@
7235 6671 padding-top: 10px;
7236 6672 }
7237 6673
7238 6674 .post-type-frm_display #post-body-content {
7239 - margin-top: var(--gap-lg);
6675 + margin-top: 30px;
7240 6676 }
7241 6677
7242 6678 .post-type-frm_display.edit-php #wpbody-content > .wrap {
7243 6679 margin: 0;
@@ -7244,15 +6680,15 @@
7244 6680 }
7245 6681
7246 6682 .post-type-frm_display .postbox .hndle,
7247 6683 .post-type-frm_display .postbox {
7248 - border-color: var(--grey-300);
6684 + border-color: var(--grey-border);
7249 6685 }
7250 6686
7251 6687 .post-type-frm_display #postbox-container-1 .postbox,
7252 6688 .post-type-frm_display #postbox-container-2 .postbox {
7253 6689 border-radius: var(--small-radius);
7254 - border-color: var(--grey-300);
6690 + border-color: var(--grey-border);
7255 6691 box-shadow: none;
7256 6692 }
7257 6693
7258 6694 .post-type-frm_display #side-sortables .postbox {
@@ -7331,9 +6767,9 @@
7331 6767 background-color: transparent;
7332 6768 }
7333 6769
7334 6770 .post-type-frm_display #major-publishing-actions {
7335 - border-color: var(--grey-300);
6771 + border-color: var(--grey-border);
7336 6772 background: var(--sidebar-color);
7337 6773 }
7338 6774
7339 6775 .post-type-frm_display #frm_adv_info {
@@ -7387,9 +6823,9 @@
7387 6823 .settings-lite-cta ul,
7388 6824 .settings-lite-cta p,
7389 6825 .settings-lite-cta {
7390 6826 color: #666;
7391 - font-size: var(--text-md);
6827 + font-size: 16px;
7392 6828 box-shadow: none !important;
7393 6829 }
7394 6830
7395 6831 .frm-info-modal h3,
@@ -7396,8 +6832,14 @@
7396 6832 .settings-lite-cta h3 {
7397 6833 font-size: 17px !important;
7398 6834 }
7399 6835
6836 +.frm_placeholder_block h3 {
6837 + font-size: 22px;
6838 + font-weight: 400;
6839 + color: var(--medium-grey);
6840 +}
6841 +
7400 6842 .frm-green-icons .frmsvg {
7401 6843 color: var(--green);
7402 6844 }
7403 6845
@@ -7411,15 +6853,21 @@
7411 6853 color: var(--orange)
7412 6854 }
7413 6855
7414 6856 .info-modal-inside a.frm-standard-link {
7415 - color: var(--primary-500);
6857 + color: var(--primary-color);
7416 6858 }
7417 6859
7418 6860 .info-modal-inside a.frm-standard-link:hover {
7419 - color: var(--primary-700);
6861 + color: var(--primary-hover);
7420 6862 }
7421 6863
6864 +.frm-caution {
6865 + text-transform: uppercase;
6866 + font-weight: bold;
6867 + color: var(--dark-grey);
6868 +}
6869 +
7422 6870 .frm_no_p_margin > p {
7423 6871 margin: 0;
7424 6872 }
7425 6873
@@ -7429,12 +6877,14 @@
7429 6877 font-size: 11px;
7430 6878 overflow: hidden;
7431 6879 }
7432 6880
6881 +.frm_code_list.frm-full-hover {
6882 + margin: 0 -20px;
6883 +}
6884 +
7433 6885 #frm-navbarDrop + .frm_code_list.frm-full-hover {
7434 - margin: var(--gap-xs) 0 0;
7435 - min-width: 300px;
7436 - max-height: calc( ( 40px * 5 ) + 56px );
6886 + margin: 4px 0 0;
7437 6887 }
7438 6888
7439 6889 .frm_code_list.frm-full-hover li {
7440 6890 margin: 0;
@@ -7439,28 +6889,55 @@
7439 6889 .frm_code_list.frm-full-hover li {
7440 6890 margin: 0;
7441 6891 }
7442 6892
7443 -.frm-select-list-item,
7444 -.frm_wrap .ui-autocomplete li > div,
7445 -.multiselect-container button.multiselect-option,
7446 6893 .frm-dropdown-menu > .dropdown-item > a,
7447 -.frm-dropdown-menu > .dropdown-item > a:visited,
7448 -.frm-dropdown-menu > .dropdown-item > a:link, /* Override jQuery UI */
7449 6894 .frm-dropdown-menu .frm_dropdown_li,
7450 6895 .frm_code_list.frm-full-hover a {
7451 - display: flex;
7452 - color: var(--grey-700);
7453 - padding: 5px 10px;
7454 - font-size: var(--text-md);
7455 - gap: var(--gap-xs);
7456 - align-items: center;
6896 + display: block;
6897 + color: var(--dark-grey);
6898 + padding: 3px 25px;
6899 + font-size: 15px;
7457 6900 }
7458 6901
6902 +#frm_field_group_controls .frm-dropdown-menu,
6903 +.frm-field-action-icons .frm-dropdown-menu {
6904 + padding: 0;
6905 + margin: 0;
6906 +}
6907 +
6908 +#frm_builder_page .frm-dropdown-menu .frm_dropdown_li.frm_more_options_li {
6909 + padding: 0;
6910 + color: rgba(40, 47, 54, 0.85);
6911 + cursor: pointer;
6912 + position: relative;
6913 + height: 32px;
6914 +}
6915 +
6916 +#frm_builder_page .frm-dropdown-menu .frm_dropdown_li.frm_more_options_li .frmsvg {
6917 + color: rgba(40, 47, 54, 0.85) !important;
6918 +}
6919 +
6920 +#frm_builder_page .frm-dropdown-menu .frm_dropdown_li.frm_more_options_li a {
6921 + padding: 6px 10px;
6922 + position: absolute;
6923 + top: 0;
6924 + left: 0;
6925 + bottom: 0;
6926 + width: 100%;
6927 + box-sizing: border-box;
6928 +}
6929 +
6930 +#frm_builder_page .frm-dropdown-menu .frm_dropdown_li.frm_more_options_li:hover {
6931 + background: #F6F7FB;
6932 +}
6933 +
7459 6934 .frm_code_list.frm-full-hover a span {
6935 + color: var(--grey);
6936 + float: right;
6937 + font-size: 14px;
7460 6938 max-width: 83px;
7461 6939 text-align: right;
7462 - margin-left: auto;
7463 6940 }
7464 6941
7465 6942 .frm_code_list.frm-full-hover a,
7466 6943 .frm_code_list.frm-full-hover a span {
@@ -7468,54 +6945,24 @@
7468 6945 overflow: hidden;
7469 6946 text-overflow: ellipsis;
7470 6947 }
7471 6948
7472 -.frm_code_list.frm-full-hover.frmcenter a {
7473 - display: block;
7474 -}
7475 -
7476 -#frm-layout-classes frm-full-hover a span {
7477 - max-width: 45%;
7478 -}
7479 -
7480 -.frm-select-list-item.active,
7481 -.frm-select-list-item:hover,
7482 -.frm_wrap .ui-autocomplete li div.ui-state-active,
7483 -.frm_wrap .ui-autocomplete li.ui-state-focus,
7484 -.multiselect-container button.multiselect-option.active,
7485 -.multiselect-container button.multiselect-option:hover,
7486 6949 .frm-dropdown-menu > .dropdown-item > a:hover,
7487 6950 .frm_code_list.frm-full-hover a:hover span,
7488 6951 .frm_code_list.frm-full-hover a:hover {
7489 - background: var(--primary-25);
7490 - color: var(--primary-500);
7491 - border-radius: var(--small-radius);
6952 + background: var(--sidebar-color);
6953 + color: var(--primary-color);
7492 6954 }
7493 6955
7494 -.frm-select-list-item .frmsvg,
7495 -.frm-dropdown-menu > .dropdown-item > a .frmsvg {
7496 - opacity: .8;
7497 -}
7498 -
7499 -.frm-select-list-item:hover .frmsvg,
7500 -.frm-dropdown-menu > .dropdown-item > a:hover .frmsvg {
7501 - opacity: 1;
7502 -}
7503 -
7504 6956 .frm-dropdown-menu.frm_code_list > li > a {
7505 6957 padding: 3px 15px;
7506 6958 width: 300px;
7507 6959 }
7508 6960
7509 -#frm_edit_box_content_modal .frm-with-search, /* Temp. Add .frm-dropdown-menu in Views */
7510 -.frm-dropdown-menu .frm-with-search {
7511 - padding: var(--gap-xs) 10px 0;
6961 +.frm-dropdown-menu.frm_code_list .frm-with-search {
6962 + padding: 3px 10px;
7512 6963 }
7513 6964
7514 -.frm-dropdown-menu .subsubsub {
7515 - padding: 0 10px;
7516 -}
7517 -
7518 6965 .frm_grid_container {
7519 6966 overflow: visible;
7520 6967 }
7521 6968
@@ -7531,16 +6978,16 @@
7531 6978 .frm_code_list.frm_grid_container a {
7532 6979 padding: 5px 0;
7533 6980 text-align: center;
7534 6981 background-color: var(--light-blue);
7535 - border: 1px solid var(--primary-500);
7536 - color: var(--primary-500);
6982 + border: 1px solid var(--primary-color);
6983 + color: var(--primary-color);
7537 6984 display: block;
7538 6985 border-radius: var(--small-radius);
7539 6986 }
7540 6987
7541 6988 .frm_code_list.frm_grid_container a:hover {
7542 - background-color: var(--primary-700);
6989 + background-color: var(--primary-hover);
7543 6990 color: #fff;
7544 6991 }
7545 6992
7546 6993 .frm_field_list #frm-insert-fields .button a {
@@ -7548,15 +6995,10 @@
7548 6995 max-width: 95%;
7549 6996 overflow: hidden;
7550 6997 }
7551 6998
7552 -.field_type_list.frm_grid_container {
7553 - gap: var(--gap-xs) var(--gap-sm);
7554 - margin: var(--gap-xs);
7555 -}
7556 -
7557 6999 .field_type_list li {
7558 - margin: 0;
7000 + margin: 0 0 10px;
7559 7001 padding: 0;
7560 7002 }
7561 7003
7562 7004 #frm-insert-fields .frm-search {
@@ -7568,13 +7010,22 @@
7568 7010 #frm-insert-fields li,
7569 7011 #frm-insert-fields li a {
7570 7012 text-decoration: none;
7571 7013 font-weight: normal;
7572 - font-size: var(--text-md) !important;
7573 - color: var(--grey-900);
7014 + font-size: 15px !important;
7015 + color: var(--dark-grey);
7574 7016 }
7575 7017
7018 +#frm-insert-fields li a {
7019 + padding: 5px 20px;
7020 + display: block;
7021 + border-radius: 0 var(--border-radius) var(--border-radius) 0;
7022 +}
7023 +
7576 7024 #frm-insert-fields li.frm_show_upgrade {
7025 + margin: 0 0 10px;
7026 + padding: 5px 20px;
7027 + box-sizing: border-box;
7577 7028 cursor: pointer;
7578 7029 opacity: .5;
7579 7030 }
7580 7031
@@ -7581,11 +7032,14 @@
7581 7032 #frm-insert-fields li a span {
7582 7033 vertical-align: middle;
7583 7034 }
7584 7035
7585 -.frmbutton.ui-draggable-dragging a,
7036 +#frm-insert-fields li:nth-child(2n) a {
7037 + border-radius: var(--border-radius) 0 0 var(--border-radius);
7038 +}
7039 +
7586 7040 #frm-insert-fields li a:not(.disabled):hover {
7587 - background: var(--grey-100);
7041 + background: var(--sidebar-hover);
7588 7042 }
7589 7043
7590 7044 #frm-insert-fields li a.disabled:hover {
7591 7045 cursor: not-allowed;
@@ -7607,9 +7061,9 @@
7607 7061 .frmsvg {
7608 7062 fill: currentColor;
7609 7063 width: 18px;
7610 7064 height: 18px;
7611 - vertical-align: middle;
7065 + vertical-align: text-bottom;
7612 7066 }
7613 7067
7614 7068 input[disabled],
7615 7069 .frmsvg svg {
@@ -7635,27 +7089,40 @@
7635 7089 width: 13px;
7636 7090 height: 13px;
7637 7091 }
7638 7092
7093 +.frm_code_list a .frmsvg,
7639 7094 .frmbutton.ui-sortable-helper .frmsvg,
7640 7095 .field_type_list li.frmbutton .frmsvg,
7096 +.frm_code_list a i,
7641 7097 .frmbutton.ui-sortable-helper i,
7642 -.field_type_list li.frmbutton i,
7643 -.frm_code_list a .frmsvg,
7644 -.frm_code_list a i {
7645 - color: var(--grey-500);
7098 +.field_type_list li.frmbutton i {
7099 + margin: .15em .2em;
7100 + color: var(--grey);
7646 7101 display: inline-block;
7647 7102 vertical-align: middle;
7648 - width: var(--text-md);
7649 - font-size: var(--text-md);
7103 + width: 20px;
7104 + height: 20px;
7105 + padding-right: 15px;
7106 + text-align: left;
7107 + font-size: 18px;
7650 7108 }
7651 7109
7652 -/* Standardize icon size for field buttons in the builder */
7653 -.field_type_list li.frmbutton .frmsvg {
7654 - width: var(--text-xl);
7655 - font-size: var(--text-xl);
7110 +/* Icon for Name field is larger */
7111 +.field_type_list li.frm_tname.frmbutton .frmsvg {
7112 + width: 24px;
7113 + height: 24px;
7114 + padding-right: 11px;
7656 7115 }
7657 7116
7117 +.frm_code_list a .frmsvg,
7118 +.frm_code_list a i {
7119 + margin: 0 5px 0 0;
7120 + padding: 0;
7121 + width: 15px;
7122 + font-size: 15px;
7123 +}
7124 +
7658 7125 .frm_code_list i:before {
7659 7126 font-size: inherit;
7660 7127 }
7661 7128
@@ -7660,58 +7127,62 @@
7660 7127 }
7661 7128
7662 7129 #frm-insert-fields li a:not(.disabled):hover .frmsvg,
7663 7130 #frm-insert-fields li a:not(.disabled):hover i {
7664 - color: var(--grey-600);
7131 + color: var(--dark-grey);
7665 7132 }
7666 7133
7667 -/* Icon while dragging */
7668 7134 .frmbutton.ui-draggable-dragging {
7669 - pointer-events: none;
7135 + width: auto !important;
7670 7136 }
7671 7137
7672 -#frm-insert-fields li.frm_show_upgrade,
7673 -#frm-insert-fields li a,
7138 +/* Icon while dragging */
7139 +.frmbutton.ui-draggable-dragging,
7674 7140 .frmbutton.ui-draggable-dragging a {
7675 - text-decoration: none;
7676 - display: inline-flex !important;
7677 - gap: var(--gap-xs);
7678 - align-items: center;
7679 - border-radius: var(--border-radius) !important;
7680 - padding: var(--gap-xs) var(--gap-sm) !important;
7681 - color: var(--grey-900) !important;
7141 + cursor: move;
7682 7142 }
7683 7143
7684 -/* Adjust field button size to full width in builder */
7685 -#frm-insert-fields li a {
7686 - display: flex !important;
7144 +.frmbutton.ui-sortable-helper a,
7145 +.frmbutton.ui-draggable-dragging a:hover,
7146 +.frmbutton.ui-draggable-dragging a {
7147 + text-decoration: none;
7148 + height: 25px !important;
7149 + width: 180px;
7150 + text-align: center;
7151 + display: block !important;
7152 + background-color: var(--primary-hover) !important;
7153 + border-radius: 35px !important;
7154 + padding: 5px 20px !important;
7155 + color: #fff !important;
7687 7156 }
7688 7157
7689 -/* Prevents advanced fields from always appearing in search results */
7690 -#frm-insert-fields li.frm_show_upgrade.frm_hidden {
7691 - display: none !important;
7158 +.frmbutton.ui-draggable-dragging:not(.ui-sortable-helper) a {
7159 + /* When the new field is held outside of a dropzone */
7160 + cursor: not-allowed;
7161 + background: var(--sidebar-color) !important;
7162 + color: var(--dark-grey) !important;
7692 7163 }
7693 7164
7694 -.frmbutton.ui-draggable-dragging a {
7695 - border: 1px solid var(--grey-300);
7696 - box-shadow: var(--box-shadow-md);
7697 -}
7698 -
7699 7165 .frmbutton.ui-draggable-dragging span {
7700 7166 font-size: 15px;
7701 7167 }
7702 7168
7703 7169 #frm-show-fields .frmbutton.ui-sortable-helper i,
7170 +.frmbutton.ui-sortable-helper span,
7704 7171 .frmbutton.ui-draggable-dragging i,
7705 7172 .frmbutton.ui-draggable-dragging .frmsvg {
7706 7173 color: #fff !important;
7707 7174 }
7708 7175
7709 -.frmbutton.ui-draggable-dragging i,
7710 -.frmbutton.ui-draggable-dragging .frmsvg {
7711 - color: var(--grey-700) !important;
7176 +.frmbutton.ui-draggable-dragging:not(.ui-sortable-helper) i,
7177 +.frmbutton.ui-draggable-dragging:not(.ui-sortable-helper) .frmsvg {
7178 + color: var(--dark-grey) !important;
7712 7179 }
7713 7180
7181 +.frmbutton.ui-draggable-dragging .frm-dropdown-menu {
7182 + display: none;
7183 +}
7184 +
7714 7185 .frm_sorting li.ui-state-default.ui-sortable-helper,
7715 7186 .frmbutton.ui-sortable-helper {
7716 7187 transition: opacity .2s;
7717 7188 opacity: 1;
@@ -7716,13 +7187,10 @@
7716 7187 transition: opacity .2s;
7717 7188 opacity: 1;
7718 7189 }
7719 7190
7720 -.frm-field-group-count {
7721 - background-color: var(--sidebar-hover);
7722 - padding: 5px;
7723 - color: #fff !important;
7724 - border-radius: 10px;
7191 +.frmbutton.ui-sortable-helper:not(.ui-draggable-dragging) {
7192 + opacity: 0;
7725 7193 }
7726 7194
7727 7195 /* End dragging */
7728 7196
@@ -7802,10 +7270,10 @@
7802 7270
7803 7271 .frm-dialog {
7804 7272 z-index: 100;
7805 7273 padding: 0 !important;
7806 - border-radius: 16px;
7807 - border: none;
7274 + border-radius: 10px;
7275 + border: 1px solid var(--grey);
7808 7276 background-color: #fff;
7809 7277 max-width: 100% !important;
7810 7278 }
7811 7279
@@ -7812,14 +7280,21 @@
7812 7280 .frm-dialog .postbox {
7813 7281 background: transparent;
7814 7282 box-shadow: none;
7815 7283 border: none;
7816 - line-height: var(--leading);
7284 + line-height: 1.4em;
7817 7285 }
7818 7286
7287 +.frm-dialog .frm-sub-label,
7288 +.frm-dialog label {
7289 + color: var(--dark-grey);
7290 + font-size: 17px;
7291 + font-weight: 300;
7292 +}
7293 +
7819 7294 .frm-dialog input[type=text],
7820 7295 .frm-dialog textarea {
7821 - font-size: var(--text-md);
7296 + font-size: 16px;
7822 7297 }
7823 7298
7824 7299 .frm-dialog textarea {
7825 7300 height: 75px;
@@ -7832,19 +7307,16 @@
7832 7307 .frm-dialog .frm-sub-label,
7833 7308 .frm-sub-label {
7834 7309 color: var(--grey);
7835 7310 text-transform: none;
7836 - padding-left: 8px;
7837 7311 }
7838 7312
7839 7313 h2 .frm-sub-label {
7840 - font-size: var(--text-md);
7314 + font-size: 16px;
7841 7315 }
7842 7316
7843 -.frm-views-editor-body .ui-widget-overlay,
7844 7317 .frm-white-body .ui-widget-overlay,
7845 -.toplevel_page_formidable .ui-widget-overlay,
7846 -body[class*=formidable-payments] .ui-widget-overlay {
7318 +.toplevel_page_formidable .ui-widget-overlay {
7847 7319 position: fixed;
7848 7320 width: 100%;
7849 7321 height: 100%;
7850 7322 top: 0;
@@ -7850,10 +7322,9 @@
7850 7322 top: 0;
7851 7323 left: 0;
7852 7324 right: 0;
7853 7325 bottom: 0;
7854 - background: var(--grey-500);
7855 - opacity: .5;
7326 + background: var(--grey-border);
7856 7327 z-index: 2;
7857 7328 }
7858 7329
7859 7330 #frm_upgrade_modal {
@@ -7874,9 +7345,9 @@
7874 7345 }
7875 7346
7876 7347 a.frm-link-secondary {
7877 7348 color: #c4c4c4;
7878 - font-size: var(--text-sm);
7349 + font-size: 14px;
7879 7350 text-decoration: underline;
7880 7351 }
7881 7352
7882 7353 .field_type_list li.button.frm_noallow,
@@ -7919,9 +7390,8 @@
7919 7390 opacity: 0;
7920 7391
7921 7392 /* Custom rules */
7922 7393 z-index: 9999999;
7923 - pointer-events: none;
7924 7394 }
7925 7395
7926 7396 .tooltip.show {
7927 7397 opacity: 0.9;
@@ -8081,25 +7551,93 @@
8081 7551 box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.5);
8082 7552 padding: 10px 40px;
8083 7553 border-top-color: #ccc;
8084 7554 background: var(--sidebar-color);
8085 - color: var(--grey-700);
7555 + color: var(--dark-grey);
8086 7556 border-radius: 0;
8087 7557 opacity: 1;
8088 - font-size: var(--text-sm);
7558 + font-size: 14px;
8089 7559 }
8090 7560
7561 +#frm_styling_form #post-body {
7562 + padding: 20px;
7563 +}
7564 +
7565 +.ui-datepicker-inline.ui-datepicker {
7566 + max-width: 19em;
7567 +}
7568 +
7569 +.default-style-box.howto {
7570 + margin-left: 20px;
7571 + font-style: normal;
7572 +}
7573 +
8091 7574 #frm_custom_css_box {
8092 7575 width: 100%;
8093 7576 }
8094 7577
7578 +#frm_styling_form .wp-picker-container .wp-color-result.button {
7579 + width: 100%;
7580 + overflow: hidden;
7581 + margin: 0 !important;
7582 + height: 32px !important;
7583 + padding: 0 0 0 30px !important;
7584 + border-radius: var(--small-radius);
7585 + border-color: var(--grey-border);
7586 +}
7587 +
7588 +#frm_styling_form .wp-color-result-text {
7589 + line-height: 30px !important;
7590 + font-size: 15px;
7591 + background: #fff !important;
7592 +}
7593 +
7594 +.wp-picker-open + .wp-picker-input-wrap {
7595 + position: absolute;
7596 + margin-left: -87px;
7597 + margin-top: 1px;
7598 + width: 86px;
7599 +}
7600 +
7601 +.wp-picker-container input[type="text"].wp-color-picker {
7602 + border: none;
7603 + padding: 3px;
7604 + font-family: inherit;
7605 + color: var(--dark-grey);
7606 + font-size: 15px;
7607 + width: 100%;
7608 + line-height: 1;
7609 + text-align: center;
7610 +}
7611 +
7612 +.wp-picker-input-wrap .wp-picker-clear {
7613 + display: none !important;
7614 +}
7615 +
7616 +.wp-picker-holder {
7617 + position: absolute;
7618 + z-index: 999;
7619 +}
7620 +
7621 +.frm_end .wp-picker-holder {
7622 + margin-left: -145px;
7623 +}
7624 +
7625 +.frm_end.frm6 .wp-picker-holder {
7626 + margin-left: -86px;
7627 +}
7628 +
7629 +#frm_styling_form div.tabs-panel {
7630 + padding-left: 5px;
7631 + padding-right: 5px;
7632 +}
7633 +
8095 7634 /*form inputs/selects */
8096 7635 .frm_form_field.frm_scroll_box .frm_opt_container,
8097 -.frm-white-body .wrap input[type="text"], /* Cover Views pages */
8098 -.frm-white-body .wrap input[type="search"],
8099 -.frm-white-body .wrap input[type="number"],
8100 -.frm-white-body .wrap select,
8101 -.frm-white-body .wrap textarea,
7636 +#postbox-container-2 input[type="text"],
7637 +#postbox-container-2 input[type="number"],
7638 +#postbox-container-2 select,
7639 +#postbox-container-2 textarea,
8102 7640 button.frm_choose_image_box,
8103 7641 #titlediv input[type="text"],
8104 7642 .frm-fields button.btn,
8105 7643 .frm_wrap textarea,
@@ -8104,11 +7642,9 @@
8104 7642 .frm-fields button.btn,
8105 7643 .frm_wrap textarea,
8106 7644 .frm_wrap input[type="tel"],
8107 7645 .frm_wrap input[type="text"],
8108 -.frm_wrap input[type=search],
8109 7646 .frm_wrap input[type="number"],
8110 -.frm_wrap input[type="date"],
8111 7647 .frm_wrap select,
8112 7648 .wp-admin .frm_wrap select,
8113 7649 .field-group textarea,
8114 7650 .field-group input[type="text"],
@@ -8115,33 +7651,17 @@
8115 7651 .field-group select {
8116 7652 outline: 0;
8117 7653 box-shadow: none;
8118 7654 border-radius: var(--small-radius);
8119 - padding: 5px 14px;
8120 - border-color: var(--grey-300);
8121 - color: var(--grey-800);
8122 - font-size: var(--text-md);
7655 + padding: 6px 9px;
7656 + border-color: var(--grey-border);
7657 + color: var(--dark-grey);
7658 + font-size: 15px;
8123 7659 margin: 0;
8124 7660 background-color: #fff;
8125 - line-height: var(--leading);
7661 + line-height: 1;
8126 7662 }
8127 7663
8128 -.frm_wrap ::-webkit-datetime-edit {
8129 - line-height: var(--leading);
8130 -}
8131 -
8132 -.frm-white-body textarea:focus,
8133 -.frm-white-body input:focus,
8134 -.frm-white-body select:focus,
8135 -.frm_wrap input:focus,
8136 -.frm_wrap select:focus,
8137 -.wp-core-ui .frm_wrap select:focus,
8138 -.frm-btn-group .multiselect.dropdown-toggle:focus,
8139 -.frm_wrap textarea:focus {
8140 - border-color: var(--primary-500) !important;
8141 - box-shadow: none !important;
8142 -}
8143 -
8144 7664 #postbox-container-2 textarea,
8145 7665 .frm_wrap textarea,
8146 7666 .field-group textarea {
8147 7667 line-height: 2;
@@ -8158,12 +7678,19 @@
8158 7678 .wp-admin .frm_wrap select {
8159 7679 max-width: 100%;
8160 7680 }
8161 7681
8162 -.frm_form_field.frm_scroll_box .frm_opt_container {
7682 +.frm_form_field.frm_scroll_box .frm_opt_container,
7683 +.frm_wrap .frm_form_builder textarea,
7684 +.frm_wrap .frm_form_builder input[type="tel"],
7685 +.frm_wrap .frm_form_builder input[type="text"] {
8163 7686 padding: 10px 12px;
8164 7687 }
8165 7688
7689 +.frm_wrap .frm_form_builder input[type="text"].frm_other_input {
7690 + padding: 6px 9px;
7691 +}
7692 +
8166 7693 .frm_wrap input[disabled],
8167 7694 .frm_wrap select[disabled],
8168 7695 .frm_wrap textarea[disabled],
8169 7696 .frm_wrap input[readonly],
@@ -8169,23 +7696,37 @@
8169 7696 .frm_wrap input[readonly],
8170 7697 .frm_wrap select[readonly],
8171 7698 .frm_wrap textarea[readonly],
8172 7699 .frm_wrap input::placeholder {
8173 - color: var(--grey-500);
7700 + color: var(--grey);
8174 7701 }
8175 7702
7703 +#postcustomstuff table input {
7704 + width: 100% !important;
7705 + margin: 0 !important;
7706 +}
7707 +
7708 +#postcustomstuff table td {
7709 + padding: 7px 0 7px 7px !important;
7710 + line-height: 30px;
7711 +}
7712 +
8176 7713 #postcustomstuff table td > div {
8177 7714 /* To override some inline css in add-on */
8178 7715 padding-top: 0 !important;
8179 7716 }
8180 7717
8181 -.wp-admin .frm_wrap .form-table select {
7718 +.wp-admin .frm_wrap .form-table select,
7719 +#postbox-container-2 select,
7720 +.wp-admin .frm_wrap select {
7721 + line-height: 32px;
7722 + height: 32px;
8182 7723 vertical-align: top;
8183 7724 }
8184 7725
8185 7726 .frm_wrap .frm_form_builder select {
8186 - line-height: var(--leading);
8187 - height: var(--text-md);
7727 + line-height: 40px;
7728 + height: 40px;
8188 7729 width: 100%;
8189 7730 }
8190 7731
8191 7732 #postbox-container-2 select,
@@ -8191,25 +7732,11 @@
8191 7732 #postbox-container-2 select,
8192 7733 .wp-admin .frm_wrap select,
8193 7734 .frm_wrap .frm_form_builder select {
8194 7735 height: auto;
8195 - background-position: right 11px top 55%;
7736 + padding: 0 24px 0 12px;
8196 7737 }
8197 7738
8198 -.frm-white-body .tablenav select,
8199 -.frm-white-body .tablenav input[type="text"],
8200 -.wp-admin .frm_wrap .tablenav select,
8201 -.frm_wrap .tablenav input[type="date"],
8202 -.frm_wrap .tablenav input[type="text"] {
8203 - padding-top: 0;
8204 - padding-bottom: 0;
8205 - line-height: 1;
8206 -}
8207 -
8208 -.frm_wrap .tablenav ::-webkit-datetime-edit {
8209 - line-height: 1;
8210 -}
8211 -
8212 7739 .frm-fields button.btn,
8213 7740 .frm-fields textarea,
8214 7741 .frm-fields input[type="text"],
8215 7742 .frm-fields select,
@@ -8221,9 +7748,10 @@
8221 7748 outline: 0;
8222 7749 }
8223 7750
8224 7751 .frm-fields button.btn {
8225 - height: var(--h-md);
7752 + line-height: normal;
7753 + height: auto;
8226 7754 text-align: inherit;
8227 7755 }
8228 7756
8229 7757 .global-font .field-group input[type="text"] {
@@ -8264,9 +7792,9 @@
8264 7792 }
8265 7793
8266 7794 .frm_images_dropdown input[type="radio"]:checked + .frm_image_option_container {
8267 7795 background: #fff !important;
8268 - border-color: var(--primary-500);
7796 + border-color: var(--primary-color);
8269 7797 }
8270 7798
8271 7799 .frm_images_dropdown .frm_text_label_for_image {
8272 7800 padding: 0;
@@ -8294,9 +7822,9 @@
8294 7822 }
8295 7823
8296 7824 .windows::-webkit-scrollbar-thumb,
8297 7825 .windows ::-webkit-scrollbar-thumb {
8298 - background: var(--grey-300);
7826 + background: var(--grey-border);
8299 7827 -webkit-border-radius: var(--border-radius);
8300 7828 -webkit-box-shadow: none;
8301 7829 }
8302 7830
@@ -8318,9 +7846,8 @@
8318 7846 .rtl #frm_top_bar #frm_bs_dropdown {
8319 7847 padding-left: 15px;
8320 7848 }
8321 7849
8322 -.rtl .frm-full-close,
8323 7850 .rtl .frm_wrap .columns-2 .frm-right-panel,
8324 7851 .rtl .frm-right-panel {
8325 7852 border-right-width: 1px;
8326 7853 border-left-width: 0;
@@ -8325,14 +7852,9 @@
8325 7852 border-right-width: 1px;
8326 7853 border-left-width: 0;
8327 7854 }
8328 7855
8329 -.rtl .frm-full-close {
8330 - padding-left: 0;
8331 - padding-right: var(--gap-md);
8332 -}
8333 -
8334 -.rtl .frm-text-right {
7856 +.rtl .frm_right_text {
8335 7857 text-align: left;
8336 7858 }
8337 7859
8338 7860 .rtl .frm_wrap #frm_adv_info ul.category-tabs li:first-child {
@@ -8382,34 +7904,14 @@
8382 7904 right: auto;
8383 7905 left: 5px;
8384 7906 }
8385 7907
7908 +.rtl .frm_code_list.frm-full-hover a span,
8386 7909 .rtl .frm_reply_to_container,
8387 7910 .rtl .frm_bcc_cc_container {
8388 7911 float: left;
8389 7912 }
8390 7913
8391 -.rtl .frm-default-switcher {
8392 - float: left;
8393 - position: relative;
8394 -}
8395 -
8396 -.rtl .frm-with-right-icon .frmsvg {
8397 - right: auto;
8398 - left: 0;
8399 -}
8400 -
8401 -.rtl .frm-inline-modal > a.dismiss {
8402 - left: 13px;
8403 - right: auto;
8404 -}
8405 -
8406 -.rtl.wp-admin .frm_wrap select {
8407 - padding-left: var(--gap-lg) !important;
8408 - padding-right: 5px !important;
8409 - background-position: left 11px top 55%;
8410 -}
8411 -
8412 7914 /* ---------------------------------------------------------------
8413 7915 Clearfix
8414 7916 --------------------------------------------------------------- */
8415 7917 span.clear {
@@ -8451,12 +7953,15 @@
8451 7953 @media only screen and (max-width: 1200px) {
8452 7954 .frm-addons {
8453 7955 grid-template-columns: 1fr 1fr;
8454 7956 }
7957 +
7958 + ul.frm_form_nav > li {
7959 + margin-right: 2.5%;
7960 + }
8455 7961 }
8456 7962
8457 7963 @media only screen and (max-width: 1050px) {
8458 - .frm-white-body,
8459 7964 .frm_wrap {
8460 7965 --biggest-sidebar: 390px;
8461 7966 }
8462 7967
@@ -8466,18 +7971,15 @@
8466 7971
8467 7972 .frm_actions_list {
8468 7973 margin-left: 0;
8469 7974 }
7975 +
7976 + ul.frm_form_nav > li {
7977 + margin-right: 1.5%;
7978 + }
8470 7979 }
8471 7980
8472 7981 @media only screen and (max-width: 960px) {
8473 - .frm-white-body,
8474 - .frm_wrap {
8475 - --gap-sm: 8px;
8476 - --gap-md: 16px;
8477 - --gap-2xl: 24px;
8478 - }
8479 -
8480 7982 .auto-fold #adminmenuwrap {
8481 7983 width: 36px;
8482 7984 }
8483 7985
@@ -8488,40 +7990,48 @@
8488 7990 p.howto {
8489 7991 display: inline-block;
8490 7992 }
8491 7993
8492 - /* Fix: Issue where the admin page content had extra white space to the left on small screens */
8493 - .auto-fold.frm-admin-page-styles:not(.frm-full-screen) .frm_page_container,
8494 - .auto-fold:not(.frm-full-screen) .frm_wrap .frm_page_container {
8495 - left: 36px;
7994 + ul.frm_form_nav {
7995 + clear: left;
7996 + padding-top: 0;
8496 7997 }
8497 7998
8498 - .frm-admin-footer-links {
8499 - padding-left: 36px;
7999 + ul.frm_form_nav > li {
8000 + margin-right: 3.5%;
8500 8001 }
8501 8002
8502 - body.rtl .frm-admin-footer-links {
8503 - padding-right: 36px;
8003 + .frm-full-screen #frm_top_bar {
8004 + padding: 0 10px !important;
8504 8005 }
8006 +
8007 + .frm-full-close {
8008 + padding: 15px 0 10px 10px;
8009 + }
8010 +
8011 + .frm-full-close .frmsvg {
8012 + padding: 0;
8013 + }
8014 +
8015 + .frm-full-screen .frm_top_left {
8016 + padding-top: 10px
8017 + }
8018 +
8019 + .frm-full-screen .frm_top_left h1 {
8020 + padding-top: 0 !important;
8021 + }
8022 +
8023 + .frm-full-screen .frm-header-logo {
8024 + margin-top: 6px !important;
8025 + }
8505 8026 }
8506 8027
8507 8028 @media only screen and (max-width: 850px) {
8508 - #frm_bs_dropdown {
8509 - /* There isn't enough room for the title on a screen this size so just hide it. */
8510 - display: none;
8511 - }
8512 -
8513 - .frm-white-body,
8514 8029 .frm_wrap {
8515 8030 --biggest-sidebar: 350px;
8516 8031 --big-sidebar: 350px;
8517 8032 }
8518 8033
8519 - #frm_bs_dropdown .frm_bstooltip {
8520 - /* There isn't enough room for the title on a screen this size so just hide it. */
8521 - display: none !important;
8522 - }
8523 -
8524 8034 .frm_col_one {
8525 8035 clear: none;
8526 8036 }
8527 8037
@@ -8530,9 +8040,10 @@
8530 8040 display: block;
8531 8041 margin: 5px 0;
8532 8042 }
8533 8043
8534 - #frm_top_bar h1 {
8044 + .post-type-frm_display #frm_top_bar h1,
8045 + .frm_page_container #frm_top_bar h1 {
8535 8046 width: auto;
8536 8047 max-width: 200px;
8537 8048 }
8538 8049
@@ -8602,9 +8113,8 @@
8602 8113 }
8603 8114 }
8604 8115
8605 8116 @media only screen and (max-width: 782px) {
8606 - .frm-white-body,
8607 8117 .frm_wrap {
8608 8118 --small-sidebar: 20%;
8609 8119 --medium-sidebar: 35%
8610 8120 }
@@ -8618,9 +8128,9 @@
8618 8128 .frm_wrap #publishing-action {
8619 8129 line-height: normal;
8620 8130 }
8621 8131
8622 - .frm-white-body #screen-meta-links {
8132 + .frm-full-screen #screen-meta-links {
8623 8133 display: none;
8624 8134 }
8625 8135
8626 8136 .frm_wrap .misc-pub-section {
@@ -8679,13 +8189,8 @@
8679 8189 .with_frm_style .frm_checkbox input[type=checkbox] {
8680 8190 width: 25px !important;
8681 8191 }
8682 8192
8683 - .frm_single_entry_page .with_frm_style .frm_radio input[type=radio],
8684 - .frm_single_entry_page .with_frm_style .frm_checkbox input[type=checkbox] {
8685 - width: 18px !important;
8686 - }
8687 -
8688 8193 .wp-list-table.toplevel_page_formidable .column-entries,
8689 8194 .wp-list-table.toplevel_page_formidable .column-form_key,
8690 8195 .wp-list-table.toplevel_page_formidable .column-shortcode,
8691 8196 .wp-list-table.toplevel_page_formidable .column-created_at {
@@ -8699,13 +8204,27 @@
8699 8204 padding: 3px 8px 3px 35%;
8700 8205 text-align: left;
8701 8206 }
8702 8207
8208 + .wp-list-table.toplevel_page_formidable td.column-title:before,
8209 + .wp-list-table.toplevel_page_formidable td.column-id:before {
8210 + display: none !important;
8211 + }
8212 +
8213 + .wp-list-table.toplevel_page_formidable td.column-title,
8214 + .wp-list-table.toplevel_page_formidable td.column-id {
8215 + display: table-cell !important;
8216 + }
8217 +
8703 8218 #form_entries_page .wp-list-table th.frm_hidden,
8704 8219 #form_entries_page .wp-list-table td.frm_hidden {
8705 8220 display: none !important;
8706 8221 }
8707 8222
8223 + ul.frm_form_nav > li {
8224 + margin-right: 15px;
8225 + }
8226 +
8708 8227 .frm-white-body.auto-fold #wpcontent {
8709 8228 padding-left: 0;
8710 8229 }
8711 8230
@@ -8716,13 +8235,11 @@
8716 8235 .frm-addons {
8717 8236 grid-template-columns: 1fr;
8718 8237 }
8719 8238
8720 - .frm-admin-page-styles .frm_page_container,
8721 - .frm_wrap .frm_page_container {
8722 - left: 0 !important;
8723 - top: 46px !important;
8724 - height: calc( 100vh - 46px ) !important;
8239 + .frm_single_entry_page.frm_wrap .frm_page_container {
8240 + height: auto;
8241 + display: block;
8725 8242 }
8726 8243
8727 8244 .frm_single_entry_page.frm_wrap .columns-2 {
8728 8245 display: block;
@@ -8740,22 +8257,13 @@
8740 8257 border-radius: 6px;
8741 8258 }
8742 8259
8743 8260 #wp-content-media-buttons a.frm_insert_form {
8744 - padding: 0 var(--gap-sm);
8261 + padding: 0 15px;
8745 8262 }
8746 -
8747 - .frm-admin-footer-links {
8748 - padding-left: 0;
8749 - }
8750 -
8751 - body.rtl .frm-admin-footer-links {
8752 - padding-right: 0;
8753 - }
8754 8263 }
8755 8264
8756 8265 @media only screen and (max-width: 700px) {
8757 - .frm-white-body,
8758 8266 .frm_wrap {
8759 8267 --biggest-sidebar: 50%;
8760 8268 --big-sidebar: 50%;
8761 8269 }
@@ -8761,9 +8269,8 @@
8761 8269 }
8762 8270 }
8763 8271
8764 8272 @media only screen and (max-width: 600px) {
8765 - .frm-white-body,
8766 8273 .frm_wrap {
8767 8274 --small-sidebar: 45px;
8768 8275 }
8769 8276
@@ -8769,9 +8276,9 @@
8769 8276
8770 8277 .frm-form-setting-tabs a {
8771 8278 visibility: collapse;
8772 8279 font-size: 0;
8773 - padding: 0 var(--gap-sm);
8280 + padding: 0 15px;
8774 8281 }
8775 8282
8776 8283 .frm-form-setting-tabs a .frmsvg,
8777 8284 .frm-form-setting-tabs a i {
@@ -8843,12 +8350,8 @@
8843 8350 .rtl #frm_builder_page .frm_actions_dropdown > .frm-dropdown-menu {
8844 8351 right: auto;
8845 8352 left: 0;
8846 8353 }
8847 -
8848 - .frm_on_submit_type svg {
8849 - display: none;
8850 - }
8851 8354 }
8852 8355
8853 8356 @media only screen and (max-width: 475px) {
8854 8357 #frm_bs_dropdown {
@@ -8864,18 +8367,8 @@
8864 8367 margin-right: 0;
8865 8368 }
8866 8369 }
8867 8370
8868 -/* Firefox */
8869 -@-moz-document url-prefix() {
8870 - .frm-white-body .tablenav select,
8871 - .frm-white-body .tablenav input[type="text"],
8872 - .wp-admin .frm_wrap .tablenav select,
8873 - .frm_wrap .tablenav input[type="text"] {
8874 - padding-top: 5px;
8875 - }
8876 -}
8877 -
8878 8371 /* PRINT */
8879 8372 @media print {
8880 8373 a, .misc-pub-section a {
8881 8374 color: #000 !important;
@@ -8926,9 +8419,9 @@
8926 8419 display: block;
8927 8420 padding: 20px;
8928 8421 }
8929 8422
8930 - .frm_wrap .columns-2,
8423 + .frm_page_container .columns-2,
8931 8424 .frm_wrap .frm_page_container {
8932 8425 height: auto;
8933 8426 display: block;
8934 8427 }
@@ -8965,10 +8458,9 @@
8965 8458 width: 100%;
8966 8459 }
8967 8460 }
8968 8461
8969 -.frm-admin-page-styles #frm-publishing #save_menu_header,
8970 -.frm-admin-page-styles2 #frm-publishing #save_menu_header {
8462 +.frm-admin-page-styles #frm-publishing #save_menu_header {
8971 8463 display: inline-block;
8972 8464 }
8973 8465
8974 8466 /* Change the order of subfields of the Name field in the backend */
@@ -8975,12 +8467,16 @@
8975 8467 .edit_form_item .frm_combo_inputs_container[data-name-layout="last_first"] .frm_form_subfield-first {
8976 8468 order: 2;
8977 8469 }
8978 8470
8471 +.frm-video-wrapper {
8472 + padding: 0 20px;
8473 +}
8474 +
8979 8475 .frm-video-wrapper iframe {
8980 8476 width: 100%;
8981 8477 max-width: 843px;
8982 - border-radius: var(--border-radius);
8478 + border-radius: 10px;
8983 8479 }
8984 8480
8985 8481 #frm_field_group_popup {
8986 8482 position: absolute;
@@ -8986,9 +8482,9 @@
8986 8482 position: absolute;
8987 8483 top: 0;
8988 8484 right: 0;
8989 8485 width: 366px;
8990 - max-height: 231px;
8486 + height: 231px;
8991 8487 border-radius: 8px;
8992 8488 background: #fff;
8993 8489 box-shadow: 0px 20px 48px rgba(40, 47, 54, 0.15);
8994 8490 z-index: 3;
@@ -9006,23 +8502,8 @@
9006 8502 bottom: 50px;
9007 8503 height: 196px;
9008 8504 }
9009 8505
9010 -#frm_field_group_popup > hr {
9011 - margin: 12px 0;
9012 -}
9013 -
9014 -#frm_field_group_popup .frm-cancel-custom-field-group-layout,
9015 -#frm_field_group_popup .frm-save-custom-field-group-layout {
9016 - padding: 4px 18px;
9017 -}
9018 -
9019 -#frm_field_group_popup .frm-cancel-custom-field-group-layout:hover {
9020 - border-color: var(--primary-500) !important;
9021 - color: var(--primary-500);
9022 - background-color: transparent !important;
9023 -}
9024 -
9025 8506 .frm-merge-fields-into-row #frm_field_group_popup .frm-break-field-group {
9026 8507 display: none;
9027 8508 }
9028 8509
@@ -9037,9 +8518,9 @@
9037 8518 font-size: 11px;
9038 8519 line-height: 15px;
9039 8520 text-transform: uppercase;
9040 8521 color: rgba(40, 47, 54, 0.45);
9041 - margin-bottom: 27px;
8522 + margin-bottom: 40px;
9042 8523 }
9043 8524
9044 8525 .frm-row-layout-option {
9045 8526 background: #F6F7FB;
@@ -9044,9 +8525,9 @@
9044 8525 .frm-row-layout-option {
9045 8526 background: #F6F7FB;
9046 8527 box-sizing: border-box;
9047 8528 border-radius: 2px;
9048 - padding: 15px 10px;
8529 + padding: 18px 11px;
9049 8530 }
9050 8531
9051 8532 #frm_field_group_popup .frm-row-layout-option .frm_grid_container {
9052 8533 grid-gap: 0 5%;
@@ -9054,23 +8535,22 @@
9054 8535 }
9055 8536
9056 8537 #frm_field_group_popup .frm-row-layout-option {
9057 8538 cursor: pointer;
9058 - border: 2px solid transparent;
9059 8539 }
9060 8540
9061 8541 #frm_field_group_popup .frm-row-layout-option.frm-active-row-layout,
9062 8542 #frm_field_group_popup .frm-row-layout-option:hover {
9063 - border-color: var(--primary-500);
8543 + outline: 1px solid var(--primary-color);
9064 8544 }
9065 8545
9066 8546 .frm-custom-field-group-layout,
9067 8547 .frm-break-field-group {
9068 - padding: 4px 24px;
8548 + padding: 5px 15px;
9069 8549 cursor: pointer;
9070 - font-size: var(--text-sm);
8550 + font-size: 14px;
9071 8551 line-height: 19px;
9072 - color: rgba(72, 78, 84, 1);
8552 + color: rgba(40, 47, 54, 0.85);
9073 8553 }
9074 8554
9075 8555 .frm-custom-field-group-layout:hover,
9076 8556 .frm-break-field-group:hover {
@@ -9115,13 +8595,12 @@
9115 8595 }
9116 8596
9117 8597 .frm-builder-popup-heading {
9118 8598 font-weight: 600;
9119 - font-size: 11px;
8599 + font-size: 12px;
9120 8600 line-height: 15px;
9121 8601 text-transform: uppercase;
9122 8602 color: rgba(40, 47, 54, 0.45);
9123 - margin-bottom: 7px;
9124 8603 }
9125 8604
9126 8605 .frm-builder-popup-subheading {
9127 8606 font-size: 12px;
@@ -9128,17 +8607,8 @@
9128 8607 line-height: 16px;
9129 8608 color: rgba(40, 47, 54, 0.45);
9130 8609 }
9131 8610
9132 -#frm_field_group_popup input[type="text"] {
9133 - height: 30px;
9134 - border-radius: 3px;
9135 - font-size: 14px;
9136 - padding: 8px;
9137 - color: rgba(84, 95, 110, 1);
9138 - border-color: rgba(40, 47, 54, 0.2);
9139 -}
9140 -
9141 8611 .frm-multiselect-popup-separator {
9142 8612 height: 36px;
9143 8613 width: 1px;
9144 8614 position: relative;
@@ -9150,17 +8620,12 @@
9150 8620 .frm-multiselect-key-is-down li.form-field:not(.edit_field_type_divider) {
9151 8621 pointer-events: none;
9152 8622 }
9153 8623
9154 -.frm-sortable-helper {
9155 - /* Make sure the item being dragged appears above other form builder fields */
9156 - z-index: 99;
9157 -}
9158 -
9159 8624 #frm_banner {
9160 8625 width: 100%;
9161 8626 color: #fff;
9162 - background: var(--primary-500);
8627 + background: var(--primary-color);
9163 8628 height: 40px;
9164 8629 line-height: 40px;
9165 8630 text-align: center;
9166 8631 position: relative;
@@ -9196,103 +8661,35 @@
9196 8661 display: none !important;
9197 8662 }
9198 8663
9199 8664 #frm_new_form_modal .frm-ready-made-solution {
9200 - padding: var(--gap-xs) !important;
9201 - margin: var(--gap-xs) 0 var(--gap-sm);
8665 + padding: 20px 5px;
9202 8666 display: flex;
9203 - gap: var(--gap-sm);
9204 - position: relative;
9205 - overflow: visible !important;
9206 8667 }
9207 8668
9208 -#frm_new_form_modal .frm-ready-made-solution:after {
9209 - width: 100%;
9210 - height: 1px;
9211 - background: var(--grey-300);
9212 - content: '';
9213 - position: absolute;
9214 - bottom: -10px;
9215 - left: 0;
8669 +.frm-ready-made-solution .frm-hover-icons {
8670 + padding: 5px;
8671 + position: static;
9216 8672 }
9217 8673
9218 -#frm_new_form_modal .frm-ready-made-solution.frm-search-result:last-of-type::after {
9219 - content: none;
9220 -}
9221 -
9222 -#frm_new_form_modal .frm-solution-details {
9223 - flex: 1;
9224 - display: flex;
9225 - gap: var(--gap-2xs);
9226 - flex-direction: column;
9227 -}
9228 -
9229 8674 #frm_new_form_modal .frm-ready-made-solution > div:first-child {
9230 - width: 30%;
9231 - text-align: center;
8675 + width: 300px;
9232 8676 }
9233 8677
9234 -#frm_leave_email_wrapper {
9235 - position: relative;
9236 - margin: 0 auto;
8678 +.frm-ready-made-solution span {
8679 + background-color: #fde6de;
8680 + color: #f25a24;
8681 + padding: 10px;
8682 + text-transform: uppercase;
8683 + font-size: 11px;
8684 + margin-bottom: 10px;
8685 + display: inline-block;
8686 + border-radius: 4px;
9237 8687 }
9238 8688
9239 -#frm_new_form_modal #frm_leave_email_wrapper {
9240 - width: 600px;
9241 -}
9242 -
9243 -#frm_leave_email_wrapper .frmsvg {
9244 - top: 0;
9245 -}
9246 -
9247 -#frm_leave_email_error {
9248 - position: absolute;
9249 - right: 71px;
9250 - top: 7px;
9251 - color: #973937;
9252 -}
9253 -
9254 8689 .frm-ready-made-solution h3 ~ a {
9255 - color: var(--primary-500);
8690 + color: var(--primary-color);
9256 8691 }
9257 8692
9258 8693 .frm-ready-made-solution img {
9259 8694 max-width: 100%;
9260 - display: block;
9261 - box-shadow: var(--box-shadow-lg);
9262 8695 }
9263 -
9264 -/* On Submit action */
9265 -.frm_single_on_submit_settings .frm_form_field {
9266 - margin: 8px 0;
9267 -}
9268 -
9269 -.frm_on_submit_type_setting {
9270 - padding: 8px 0;
9271 -}
9272 -
9273 -.frm_on_submit_type label {
9274 - display: flex;
9275 - border: 1px solid var(--grey-border);
9276 - border-radius: var(--small-radius);
9277 - gap: 16px;
9278 - padding: 16px;
9279 - align-items: center;
9280 - justify-content: center;
9281 -}
9282 -
9283 -.frm_on_submit_type input {
9284 - opacity: 0 !important;
9285 - position: absolute;
9286 - z-index: -1;
9287 -}
9288 -
9289 -.frm_on_submit_type input[type="radio"]:checked + label {
9290 - border-color: var(--primary-color);
9291 - box-shadow: 0 0 0 1px var(--primary-color);
9292 -}
9293 -
9294 -#form_settings_page .frm_on_submit_type label:hover,
9295 -.frm_on_submit_type input[type="radio"]:checked + label svg {
9296 - color: var(--primary-color);
9297 -}
9298 -/* End On Submit action */