PluginProbe
Formidable Forms – WordPress Form Builder for Contact Forms, Calculators, Quizzes & More / 5.0.01
Formidable Forms – WordPress Form Builder for Contact Forms, Calculators, Quizzes & More v5.0.01
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 +1526 -2484 6.5.25.0.01 View file →
@@ -1,116 +1,41 @@
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 {
100 - --fieldset-padding: 15px 0;
101 -}
102 -
103 29 a, .widget .widget-top, .stuffbox h3, .frm-collapsed {
104 30 cursor: pointer;
105 31 text-decoration: none;
106 32 }
107 33
108 -.post-type-frm_display .wrap > #posts-filter,
109 34 .wrap.frm-with-margin,
110 35 #frm_top_bar + .wrap,
111 36 .frm_wrap > .wrap {
112 - margin: var(--gap-sm) var(--gap-md) var(--gap-md);
37 + margin: 10px 40px 30px;
113 38 }
114 39
115 40 .frm-full-screen #wpbody-content > .wrap {
116 41 margin: 0;
@@ -119,12 +44,23 @@
119 44 .post-type-frm_display .wrap {
120 45 margin: 0;
121 46 }
122 47
48 +.columns-2 .frm-right-panel + #post-body-content {
49 + padding-bottom: 26px;
50 + border-left: 1px solid var(--sidebar-hover);
51 +}
52 +
123 53 .toplevel_page_formidable #post-body-content {
124 54 overflow-x: visible;
125 55 }
126 56
57 +.formidable_page_formidable-pro-upgrade #wpfooter,
58 +.toplevel_page_formidable #wpfooter {
59 + border-top: 1px solid #ddd;
60 + background: #fff;
61 +}
62 +
127 63 .frm-full-screen {
128 64 height: 100%;
129 65 overflow: hidden;
130 66 }
@@ -134,57 +70,37 @@
134 70 .frm-full-screen.post-type-frm_display {
135 71 overflow: auto;
136 72 }
137 73
138 -.frm-full-screen #wpadminbar,
139 -.frm-full-screen #adminmenumain,
140 74 .frm-full-screen .wp-header-end {
141 75 display: none;
142 76 }
143 77
144 -body.frm-white-body:not(.frm-full-screen) .mce-fullscreen {
145 - top: 32px;
146 - left: 160px;
147 -}
148 -
149 78 .frm-full-screen #wpbody-content,
150 79 .frm-full-screen #wpbody,
151 80 .frm-full-screen #wpcontent {
152 - padding: 0;
81 + padding-bottom: 0;
153 82 overflow: hidden;
154 - margin: 0 !important;
155 83 }
156 84
157 -.frm-white-body #wpbody-content {
158 - position: relative; /* For screen meta links */
159 - padding-bottom: 0;
160 -}
161 -
162 85 .post-new-php.post-type-frm_display #screen-meta-links,
163 -.post-php.post-type-frm_display #screen-meta-links {
86 +.post-php.post-type-frm_display #screen-meta-links,
87 +.frm-full-screen #wpfooter {
164 88 display: none;
165 89 }
166 90
167 -.frm-white-body #screen-meta-links {
168 - position: fixed;
169 - bottom: 0;
170 - right: 20px;
91 +.frm-white-body #screen-meta-links .screen-meta-toggle {
92 + position: absolute;
93 + right: 160px;
94 + box-shadow: none;
95 + border-bottom-left-radius: var(--small-radius);
96 + border-bottom-right-radius: var(--small-radius);
171 97 }
172 98
173 -.frm-full-screen #screen-meta-links .screen-meta-toggle {
174 - right: 55px;
175 -}
176 -
177 99 .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;
100 + box-shadow: none;
181 101 }
182 102
183 -.frm-white-body.frm-lite #screen-meta-links .screen-meta-toggle {
184 - right: 125px; /* Don't cover the lite upgrade button */
185 -}
186 -
187 103 .frm-white-body #screen-meta {
188 104 margin: 0;
189 105 }
190 106
@@ -192,9 +108,9 @@
192 108 color: var(--grey);
193 109 }
194 110
195 111 .frm-white-body .columns-2 {
196 - border-bottom: 1px solid var(--grey-300);
112 + border-bottom: 1px solid var(--grey-border);
197 113 }
198 114
199 115 .frm-full-screen .columns-2 {
200 116 border: none;
@@ -224,13 +140,8 @@
224 140 .frm_wrap .tablenav {
225 141 margin-bottom: 10px;
226 142 }
227 143
228 -.frm-white-body .tablenav .actions select,
229 -.wp-admin .frm_wrap .tablenav select {
230 - margin-right: var(--gap-xs);
231 -}
232 -
233 144 .tablenav .actions .button {
234 145 margin-top: 1px;
235 146 }
236 147
@@ -246,17 +157,17 @@
246 157 background: #fff;
247 158 }
248 159
249 160 .frm-white-body table.widefat th {
250 - font-size: var(--text-md);
161 + font-size: 16px;
251 162 }
252 163
253 164 .frm-white-body table.widefat th a {
254 - color: var(--grey-700);
165 + color: var(--dark-grey);
255 166 }
256 167
257 168 .frm-white-body table.widefat strong a {
258 - color: var(--primary-700);
169 + color: var(--primary-hover);
259 170 }
260 171
261 172 .frm-scroll-box {
262 173 clear: both;
@@ -261,9 +172,9 @@
261 172 .frm-scroll-box {
262 173 clear: both;
263 174 overflow: auto;
264 175 max-height: 405px;
265 - border: 1px solid var(--grey-300);
176 + border: 1px solid var(--grey-border);
266 177 border-radius: var(--small-radius);
267 178 }
268 179
269 180 .frm_form_field.frm_scroll_box .frm_opt_container {
@@ -268,9 +179,9 @@
268 179
269 180 .frm_form_field.frm_scroll_box .frm_opt_container {
270 181 height: 100px;
271 182 overflow: auto;
272 - border: 1px solid var(--grey-300);
183 + border: 1px solid var(--grey-border);
273 184 }
274 185
275 186 .frm-short-list {
276 187 overflow: auto;
@@ -277,9 +188,9 @@
277 188 max-height: 190px;
278 189 }
279 190
280 191 .frm-white-body table.frm-border td {
281 - font-size: var(--text-sm);
192 + font-size: 14px;
282 193 }
283 194
284 195 .frm-white-body .striped > tbody > :nth-child(odd) {
285 196 background-color: #fff;
@@ -293,149 +204,56 @@
293 204 float: right;
294 205 }
295 206
296 207 #frm_top_bar {
297 - display: flex;
298 - gap: var(--gap-sm);
208 + display: block;
299 209 width: 100%;
300 - height: 72px;
210 + max-height: 100px;
211 + padding: 25px 40px 25px;
301 212 margin: 0;
302 213 box-sizing: border-box;
303 214 text-align: center;
304 - padding: 0 var(--gap-md);
305 215 }
306 216
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);
217 +.post-type-frm_display:not(.edit-php) #frm_top_bar,
218 +.frm-full-screen.post-type-frm_display #frm_top_bar,
219 +.frm_page_container #frm_top_bar {
220 + border-bottom: 1px solid var(--grey-border);
221 + padding: 0 20px;
315 222 overflow: visible;
316 223 }
317 224
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;
225 +.frm-full-screen #frm_top_bar {
226 + padding: 0 15px !important;
325 227 }
326 228
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 229 .frm-upgrade-bar {
408 - background: rgba(188, 224, 253, 0.23);
230 + text-align: center;
231 + background: var(--sidebar-color);
409 232 border-bottom: 1px solid var(--sidebar-hover);
410 - padding: 3px 0 3px 40px;
233 + padding: 3px 0;
411 234 font-size: 95%;
412 235 }
413 236
414 237 .frm-upgrade-bar span {
415 - opacity: .9;
238 + opacity: .5;
416 239 }
417 240
418 241 a h1 .frmsvg {
419 - color: var(--grey-400);
420 - vertical-align: middle;
421 - min-width: var(--text-sm);
242 + color: var(--medium-grey);
243 + vertical-align: baseline;
422 244 }
423 245
424 -a .frmsvg {
425 - color: currentColor;
426 -}
427 -
428 246 .frm_wrap .view-switch a.current:before,
429 -.frm-white-body a,
430 -.frm_wrap a,
431 -.frm_wrap a i {
247 +a .frmsvg,
248 +.frm_wrap a i,
249 +.frm_wrap a {
432 250 color: var(--primary-color);
433 251 }
434 252
435 253 .frm_wrap a:active,
436 254 .frm_wrap a:hover {
437 - color: var(--primary-700);
255 + color: var(--primary-hover);
438 256 box-shadow: none;
439 257 }
440 258
441 259 .post-type-frm_display a:focus,
@@ -449,30 +267,34 @@
449 267 white-space: nowrap;
450 268 max-width: 250px;
451 269 overflow: hidden;
452 270 text-overflow: ellipsis;
453 - align-self: center;
454 271 }
455 272
456 -.post-type-frm_display .frm_top_left,
457 273 .frm_top_left.frm_top_wide {
458 274 max-width: 100%;
459 275 }
460 276
461 -.post-type-frm_display .frm_nav_bar .frm-header-logo,
462 -.frm_nav_bar .frm-header-logo {
463 - margin: 18px 0 10px;
277 +.frm-header-logo,
278 +.edit-php.post-type-frm_display .frm-header-logo {
279 + float: left;
280 + margin: 0 15px 0 0;
464 281 }
465 282
466 -#frm_top_bar .frm_form_nav {
467 - flex: 1;
283 +.frm-full-screen.post-type-frm_display .frm-header-logo,
284 +.post-type-frm_display .frm-header-logo,
285 +.frm_page_container .frm-header-logo {
286 + margin: 13px 0 0;
468 287 }
469 288
289 +.frm_page_container .frm-header-logo {
290 + margin-bottom: 6px;
291 +}
292 +
470 293 ul.frm_form_nav {
471 294 margin: 0 auto;
472 - padding-top: 18px;
295 + padding-top: 19px;
473 296 display: block;
474 - min-width: 240px;
475 297 }
476 298
477 299 .nav-tab-wrapper.frm_form_nav {
478 300 padding: 0 25px;
@@ -478,9 +300,9 @@
478 300 padding: 0 25px;
479 301 }
480 302
481 303 ul.frm_form_nav > li {
482 - margin: 0 min(3.5%, 32px) 0 0;
304 + margin: 0 3.5% 0 0;
483 305 display: inline-block;
484 306 }
485 307
486 308 .post-type-frm_display #advanced-sortables h2.hndle,
@@ -490,12 +312,13 @@
490 312 .frm_form_nav > li > a {
491 313 font-size: 1.3em;
492 314 text-decoration: none;
493 315 display: block;
494 - padding: 6px 2px 4px;
316 + padding: 5px 2px 15px;
495 317 font-weight: 500;
496 - color: var(--grey-700);
497 - border-bottom: 2px solid transparent;
318 + color: var(--dark-grey);
319 + border-bottom: 3px solid transparent;
320 + letter-spacing: 1px;
498 321 }
499 322
500 323 .post-type-frm_display.js .postbox .handlediv .toggle-indicator:before {
501 324 margin-top: 10px;
@@ -510,15 +333,15 @@
510 333 box-shadow: none;
511 334 }
512 335
513 336 .frm_form_nav > li > a {
514 - font-size: var(--text-md);
515 - font-weight: 400;
516 - color: var(--grey-500);
337 + font-size: 13px;
338 + text-transform: uppercase;
339 + opacity: .8;
517 340 }
518 341
519 342 .frm_form_nav > li > a:hover {
520 - border-color: var(--primary-700);
343 + border-color: var(--primary-hover);
521 344 }
522 345
523 346 .frm_form_nav .frm-dropdown-menu a:hover {
524 347 background-color: #eaf2fa;
@@ -526,27 +349,25 @@
526 349
527 350 .post-type-frm_display .frm_form_nav .nav-tab-active,
528 351 .post-type-frm_display .frm_form_nav .nav-tab-active:hover,
529 352 .frm_form_nav > li a.current_page {
530 - color: var(--primary-500);
531 - border-color: var(--primary-500);
353 + color: var(--primary-color);
354 + border-color: var(--primary-color);
532 355 background: transparent;
533 356 opacity: 1;
534 - font-weight: 600;
535 357 }
536 358
537 359 .frm-full-close {
538 360 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 */
361 + float: right;
362 + padding: 15px 0 14px 12px;
363 + border-left: 1px solid var(--grey-border);
542 364 height: 100%;
543 365 box-sizing: border-box;
544 366 }
545 367
546 368 .frm-full-screen .frm-full-close {
547 - display: flex;
548 - align-items: center;
369 + display: block;
549 370 }
550 371
551 372 .frm-full-close a {
552 373 display: block;
@@ -555,49 +376,57 @@
555 376 .frm-full-close .frmsvg {
556 377 font-size: 20px;
557 378 width: 20px;
558 379 height: 20px;
559 - color: var(--grey-500);
380 + padding: 5px;
381 + color: var(--grey);
560 382 }
561 383
562 -#frm_top_bar h1 {
384 +.edit-php.post-type-frm_display #frm_top_bar h1,
385 +.frm_wrap #frm_top_bar h1 {
386 + font-size: 22px;
563 387 font-weight: 400;
564 388 padding: 0;
565 389 margin: 0;
566 - color: var(--grey-900);
567 - display: inline-flex;
568 - gap: var(--gap-sm);
569 - align-items: center;
390 + color: var(--medium-grey);
391 + display: inline-block;
392 + line-height: 1.4;
393 +}
394 +
395 +.frm-full-screen.post-type-frm_display #frm_top_bar h1,
396 +.post-type-frm_display #frm_top_bar h1,
397 +.frm_page_container #frm_top_bar h1 {
398 + margin: 0 15px;
399 + padding: 20px 0 0;
570 400 text-align: left;
571 401 width: 200px;
402 + line-height: 1.16;
572 403 }
573 404
574 -#frm_top_bar h1 span {
405 +.frm-full-screen.post-type-frm_display #frm_top_bar h1 span,
406 +.post-type-frm_display #frm_top_bar h1 span,
407 +.frm_page_container #frm_top_bar h1 span {
408 + font-size: 19px;
575 409 max-width: 175px;
576 410 text-overflow: ellipsis;
577 411 overflow: hidden;
578 412 white-space: nowrap;
579 413 display: inline-block;
580 - vertical-align: bottom;
581 414 }
582 415
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;
416 +#frm_top_bar h1,
417 +#frm_top_bar h2 {
418 + color: var(--medium-grey);
590 419 }
591 420
592 -#frm_top_bar .frm-header-logo {
593 - display: flex; /* Get rid of extra padding below logo */
421 +#frm_top_bar #frm_bs_dropdown {
422 + float: left;
594 423 }
595 424
596 425 #frm_top_bar h2 {
597 426 float: left;
598 - margin: 0 0 0 var(--gap-sm);
599 - padding: 2px 0 2px var(--gap-sm);
427 + margin: 0 0 0 15px;
428 + padding: 2px 0 2px 15px;
600 429 font-weight: normal;
601 430 border-left: 2px solid var(--grey);
602 431 }
603 432
@@ -605,19 +434,27 @@
605 434 margin-top: 0;
606 435 }
607 436
608 437 #frm-publishing {
438 + float: right;
439 + margin-top: 15px;
609 440 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;
441 + max-width: 325px;
442 + min-height: 10px;
616 443 }
617 444
445 +#frm-publishing #publishing-action,
446 +#frm-publishing #preview-action,
447 +#frm-preview-action,
448 +#frm-publishing > input[type=submit],
449 +#frm-publishing > .button,
450 +#frm-publishing > button {
451 + float: right;
452 + margin: 0 10px 0 0;
453 +}
454 +
618 455 .frm_wrap .postbox {
619 - border-color: var(--grey-300);
456 + border-color: var(--grey-border);
620 457 border-radius: 6px;
621 458 box-shadow: none;
622 459 }
623 460
@@ -625,9 +462,9 @@
625 462 cursor: default;
626 463 padding: 10px 20px;
627 464 margin: 0;
628 465 line-height: 1.4em;
629 - border-color: var(--grey-300);
466 + border-color: var(--grey-border);
630 467 }
631 468
632 469 .frm-pre-hndle {
633 470 font-size: 15px;
@@ -638,12 +475,8 @@
638 475 .frm-empty-row {
639 476 display: none;
640 477 }
641 478
642 -.frm-child-row {
643 - box-shadow: 5px 0px 0px 0px inset var(--sidebar-hover);
644 -}
645 -
646 479 .frm_animate_bg {
647 480 transition: background 200ms linear, color 200ms linear;
648 481 }
649 482
@@ -651,48 +484,16 @@
651 484 clear: both;
652 485 margin: 0;
653 486 }
654 487
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 */
488 +.frm_wrap .frm_page_container {
662 489 height: calc( 100vh - 32px );
663 490 display: flex;
664 491 flex-direction: column;
665 492 overflow: hidden;
666 493 padding-top: 0;
667 - position: fixed;
668 - top: 32px;
669 - bottom: 0;
670 - left: 0;
671 - right: 0;
672 494 }
673 495
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 496 .frm-full-screen.frm-admin-page-entries .frm_page_container,
696 497 .frm-new-entry .frm_page_container,
697 498 .frm-admin-page-reports .frm_page_container,
698 499 .frm_list_entry_page .frm_page_container {
@@ -703,22 +504,16 @@
703 504 .frm-new-entry .columns-2 {
704 505 border: none;
705 506 }
706 507
707 -.frm-white-body #frm_top_bar,
708 -.frm-white-body .columns-2 {
508 +.frm_wrap #frm_top_bar,
509 +.frm_wrap .columns-2 {
709 510 flex: 0 0 auto;
710 511 }
711 512
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 513 .frm_wrap #post-body-content {
719 514 padding-bottom: 0;
720 - padding-top: var(--gap-sm);
515 + padding-top: 20px;
721 516 margin-bottom: 0;
722 517 background: #fff;
723 518 width: auto;
724 519 float: none;
@@ -724,17 +519,16 @@
724 519 float: none;
725 520 flex: 2;
726 521 }
727 522
728 -.frm-white-body .columns-2 {
523 +.frm_wrap .columns-2 {
729 524 flex: 1;
730 525 display: flex;
731 526 overflow: hidden;
732 527 }
733 528
734 -.frm-white-body .columns-2 > div {
529 +.frm_wrap .columns-2 > div {
735 530 overflow-y: auto;
736 - box-sizing: border-box;
737 531 }
738 532
739 533 .frm_wrap .columns-2 .frm-right-panel,
740 534 .frm-right-panel {
@@ -781,9 +575,9 @@
781 575
782 576 .frm-default-switcher a.current,
783 577 .frm-default-switcher a.current .frmsvg,
784 578 .frm-default-switcher a.current i {
785 - color: var( --primary-500);
579 + color: var( --primary-color);
786 580 }
787 581
788 582 #new_fields,
789 583 .frm-has-modal,
@@ -791,15 +585,41 @@
791 585 position: relative;
792 586 }
793 587
794 588 .frm-inline-modal.postbox {
589 + border-color: var(--blue-border);
795 590 background: #fff;
796 591 }
797 592
593 +#frm_upgrade_modal .dismiss .frmsvg,
594 +.frm-inline-modal .frmsvg,
595 +#frm-bulk-modal .frmsvg,
596 +.frm_has_shortcodes > .frmsvg,
597 +#frm_upgrade_modal .dismiss i,
598 +.frm-inline-modal i,
599 +#frm-bulk-modal i,
600 +.frm_has_shortcodes > i {
601 + top: 37px;
602 + right: 5px;
603 + margin-top: -9px;
604 + padding: 5px;
605 + font-size: 10px;
606 + height: 10px;
607 + width: 10px;
608 + line-height: 9px;
609 + font-weight: bold;
610 +}
611 +
612 +#frm_upgrade_modal .dismiss .frmsvg,
613 +.frm-inline-modal .frmsvg,
614 +#frm-bulk-modal .frmsvg,
798 615 .frm_has_shortcodes .frmsvg,
799 -.frm_has_shortcodes i:not([class*=mce-]) {
616 +#frm_upgrade_modal .dismiss i,
617 +.frm-inline-modal i,
618 +#frm-bulk-modal i,
619 +.frm_has_shortcodes i {
800 620 position: absolute;
801 - color: var(--primary-500);
621 + color: var(--primary-color);
802 622 border-radius: 50%;
803 623 border: 1px solid transparent;
804 624 z-index: 100;
805 625 text-align: center;
@@ -804,8 +624,51 @@
804 624 z-index: 100;
805 625 text-align: center;
806 626 }
807 627
628 +#frm_info_modal .dismiss .frmsvg,
629 +#frm_confirm_modal .dismiss .frmsvg,
630 +#frm_upgrade_modal .dismiss .frmsvg,
631 +#frm_info_modal .dismiss i,
632 +#frm_confirm_modal .dismiss i,
633 +#frm_upgrade_modal .dismiss i {
634 + top: 7px;
635 + right: 7px;
636 +}
637 +
638 +#frm-bulk-modal .frmsvg,
639 +#frm-bulk-modal i {
640 + top: 15px;
641 + right: 7px;
642 +}
643 +
644 +.frm-inline-modal .frmsvg,
645 +.frm-inline-modal i {
646 + top: 18px;
647 + right: 7px;
648 + font-size: 11px;
649 + height: 11px;
650 + width: 11px;
651 +}
652 +
653 +#frm_upgrade_modal .dismiss:hover .frmsvg,
654 +.frm-inline-modal .dismiss:hover .frmsvg,
655 +#frm-bulk-modal .dismiss:hover .frmsvg,
656 +#frm_upgrade_modal .dismiss i:hover,
657 +.frm-inline-modal i:hover,
658 +#frm-bulk-modal i:hover {
659 + background: var(--sidebar-color);
660 +}
661 +
662 +#frm_upgrade_modal .dismiss .frmsvg,
663 +.frm-inline-modal .dismiss .frmsvg,
664 +#frm-bulk-modal .dismiss .frmsvg,
665 +#frm_upgrade_modal .dismiss .frm_close_icon,
666 +.frm-inline-modal .frm_close_icon,
667 +#frm-bulk-modal .frm_close_icon {
668 + border-color: var(--primary-color);
669 +}
670 +
808 671 .frm_has_shortcodes input,
809 672 .frm_has_shortcodes textarea {
810 673 padding-left: 18px;
811 674 box-sizing: border-box;
@@ -812,11 +675,13 @@
812 675 }
813 676
814 677 #form_settings_page #frm_adv_info {
815 678 display: none;
679 + position: absolute;
816 680 top: 0;
817 - width: 310px;
818 - max-height: 315px;
681 + left: 0;
682 + width: 300px;
683 + max-height: 350px;
819 684 min-height: 200px;
820 685 overflow-y: scroll;
821 686 z-index: 100;
822 687 }
@@ -827,14 +692,10 @@
827 692 width: var(--small-sidebar);
828 693 min-width: var(--small-sidebar);
829 694 }
830 695
831 -#form_global_settings .frm_grid_container {
832 - gap: 0 var(--gap-md);
833 -}
834 -
835 696 .frm-inner-content {
836 - padding: var(--gap-md);
697 + padding: 10px 25px;
837 698 }
838 699
839 700 .post-type-frm_display #poststuff {
840 701 padding: 0 0 10px 40px;
@@ -900,17 +761,18 @@
900 761 }
901 762
902 763 .frm-right-panel .frm_field_list #frm-insert-fields {
903 764 max-height: none;
904 - font-size: var(--text-sm);
765 + font-size: 14px;
905 766 padding: 0;
906 767 }
907 768
908 -.frm-nav-tabs {
769 +.frm-nav-tabs,
770 +#frm-bulk-modal h2 {
909 771 margin: 10px 0 20px;
910 - padding: 0 var(--gap-sm);
772 + padding: 0 15px;
911 773 display: block;
912 - border-bottom: 1px solid var(--grey-300);
774 + border-bottom: 2px solid var(--sidebar-hover);
913 775 }
914 776
915 777 #frm-nav-tabs {
916 778 position: -webkit-sticky;
@@ -921,20 +783,11 @@
921 783 margin-top: 0;
922 784 padding-top: 5px;
923 785 }
924 786
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 787 .frm-inline-modal .frm-nav-tabs,
935 788 #frm_adv_info .frm-nav-tabs {
936 - margin: 5px 0 0;
789 + margin: 5px 0 10px;
937 790 }
938 791
939 792 #frm_adv_info .frm-nav-tabs.frm-compact-nav {
940 793 padding-right: 0;
@@ -940,25 +793,23 @@
940 793 padding-right: 0;
941 794 padding-left: 20px;
942 795 }
943 796
797 +#frm-bulk-modal h2,
944 798 .frm-nav-tabs li {
945 799 display: inline-block;
800 + font-size: 15px;
946 801 margin: 0;
947 802 }
948 803
804 +#frm-bulk-modal h2,
949 805 .frm-nav-tabs a {
950 - color: var(--grey-700);
806 + color: var(--dark-grey);
951 807 padding: 10px 1px;
952 808 margin: 0 9px;
953 809 border-bottom: 2px solid transparent;
954 810 }
955 811
956 -.frm_form_settings #frm_adv_info .frm-nav-tabs a {
957 - padding: 5px 1px;
958 - color: var(--grey-500);
959 -}
960 -
961 812 .frm-nav-tabs.frm-compact-nav a {
962 813 margin: 0 5px;
963 814 }
964 815
@@ -967,37 +818,33 @@
967 818 opacity: .9;
968 819 }
969 820
970 821 #frm_adv_info .frm-nav-tabs a {
971 - color: var(--grey-700);
822 + color: var(--dark-grey);
972 823 }
973 824
825 +#frm-bulk-modal h2,
974 826 .frm-nav-tabs a:hover,
975 827 .frm-nav-tabs .frm-tabs a {
976 - color: var(--primary-500) !important;
977 - border-color: var(--primary-500);
828 + color: var(--primary-color) !important;
829 + border-color: var(--primary-color);
978 830 }
979 831
980 -.frm_form_settings #frm_adv_info .frm-nav-tabs .frm-tabs a {
981 - font-weight: 500;
832 +#frm-bulk-modal h3,
833 +#frm-bulk-modal h2 {
834 + font-size: 16px;
835 + margin-left: 20px;
836 + font-weight: 400;
982 837 }
983 838
984 -#frm-bulk-modal .howto,
985 839 #frm-bulk-modal h3 {
986 - font-size: var(--text-sm);
987 - font-weight: 400;
988 - margin: 5px 0 10px;
840 + margin: 5px 20px 10px;
989 841 color: var(--grey);
990 842 }
991 843
992 -#frm-bulk-modal h3 {
993 - margin-left: 20px;
994 -}
995 -
996 -.frm-right-panel a.frm_add_logic_link,
997 844 .frm-right-panel h3 {
998 - color: var(--grey-700);
999 - font-size: var(--text-lg);
845 + color: var(--dark-grey);
846 + font-size: 20px;
1000 847 font-weight: 400;
1001 848 border-top: 2px solid var(--sidebar-hover);
1002 849 margin: 0;
1003 850 }
@@ -1007,17 +854,10 @@
1007 854 border-top: none;
1008 855 padding-top: 0 !important;
1009 856 }
1010 857
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 858 .frm-right-panel h3 i {
1019 - color: var(--grey-700);
859 + color: var(--dark-grey);
1020 860 float: right;
1021 861 width: 16px;
1022 862 cursor: pointer;
1023 863 }
@@ -1079,12 +919,8 @@
1079 919 .frm_wrap #frm-categorydiv {
1080 920 border-right: none;
1081 921 }
1082 922
1083 -#frm_adv_info #frm-conditionals {
1084 - padding-top: var(--gap-sm);
1085 -}
1086 -
1087 923 #postbox-container-1 #taxonomy-linkcategory #frm-html-tags {
1088 924 display: none;
1089 925 max-height: none;
1090 926 }
@@ -1092,53 +928,12 @@
1092 928 #postbox-container-1 .frm_field_list #frm-insert-fields .frmbutton.dropdown {
1093 929 position: relative;
1094 930 }
1095 931
1096 -/* Admin footer */
1097 -.frm-white-body #footer-upgrade {
932 +.toplevel_page_formidable #footer-upgrade {
1098 933 display: none;
1099 934 }
1100 935
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 936 .frm_list_entry_page h2 {
1142 937 float: left;
1143 938 }
1144 939
@@ -1145,8 +940,13 @@
1145 940 .frm_list_entry_page h2 + .error {
1146 941 clear: both;
1147 942 }
1148 943
944 +#titlediv #title {
945 + line-height: 1.5;
946 + height: auto;
947 +}
948 +
1149 949 .frm_sidebar select {
1150 950 width: 100%;
1151 951 margin-left: 0;
1152 952 margin-right: 0;
@@ -1183,12 +983,14 @@
1183 983
1184 984 /* Buttons */
1185 985
1186 986 .frm_orange_button,
1187 -.frm_reverse_button {
987 +.frm_reverse_button,
988 +.post-type-frm_display .wrap .add-new-h2 {
1188 989 font-size: 12px;
1189 990 border: 1px solid var(--orange);
1190 991 color: var(--orange);
992 + line-height: 1.4;
1191 993 font-weight: 600;
1192 994 padding: 1px 4px;
1193 995 border-radius: 4px;
1194 996 background: transparent;
@@ -1193,11 +995,33 @@
1193 995 border-radius: 4px;
1194 996 background: transparent;
1195 997 }
1196 998
999 +.post-type-frm_display .wrap .add-new-h2 {
1000 + margin: 1px 0 0 10px;
1001 + text-transform: lowercase;
1002 + position: initial;
1003 + vertical-align: middle;
1004 +}
1005 +
1006 +h1 .frm-button-secondary,
1007 +h1 .frm-button-primary,
1008 +h2 .frm-button-secondary,
1009 +h2 .frm-button-primary {
1010 + font-size: 14px !important;
1011 + font-weight: normal;
1012 + margin: 0 5px !important;
1013 + line-height: 23px !important;
1014 + vertical-align: text-bottom !important;
1015 + height: auto !important;
1016 +}
1017 +
1197 1018 .frm_reverse_button:hover,
1198 1019 .frm_reverse_button:active,
1199 -.frm_reverse_button:focus {
1020 +.frm_reverse_button:focus,
1021 +.post-type-frm_display .wrap .add-new-h2:hover,
1022 +.post-type-frm_display .wrap .add-new-h2:active,
1023 +.post-type-frm_display .wrap .add-new-h2:focus {
1200 1024 color: #fff;
1201 1025 background: var(--orange);
1202 1026 border: 1px solid var(--orange);
1203 1027 }
@@ -1208,108 +1032,42 @@
1208 1032 }
1209 1033
1210 1034 .frm-button-primary,
1211 1035 .wp-core-ui .button-primary.frm-button-primary,
1212 -.wp-core-ui .button.frm-button-primary,
1213 1036 .frm-button-secondary,
1214 1037 .wp-core-ui .button-secondary.frm-button-secondary,
1215 1038 .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 1039 .frm_orange_button,
1220 1040 .toplevel_page_formidable #frm_upgrade_modal .button-primary,
1041 +#form_global_settings .button-secondary,
1221 1042 .wp-core-ui.frm-white-body .button-primary,
1222 1043 .wp-core-ui.frm-white-body .button-secondary,
1223 1044 .frm-white-body .button-primary,
1224 1045 .frm-white-body .button-secondary,
1225 -#frm-form-button button,
1226 -.frm-preview-buttons button,
1227 -.frm-button-red,
1228 -.frm-button-tertiary {
1046 +.wp-core-ui.frm-white-body .button:not(.button-small),
1047 +.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 1048 text-shadow: none;
1230 1049 box-shadow: none;
1231 1050 border-radius: 30px;
1232 - border: 1px solid var(--primary-500);
1233 - font-size: var(--text-sm);
1051 + border-color: var(--primary-color);
1052 + font-size: 1em;
1234 1053 transition: all .2s ease;
1235 - padding: 7px 16px;
1236 - height: auto;
1054 + padding: 0 15px;
1055 + height: 28px;
1237 1056 min-height: 28px;
1238 1057 outline: none;
1239 - line-height: var(--leading);
1240 - box-sizing: border-box;
1241 - font-weight: 500;
1242 - margin-bottom: 0;
1243 - display: inline-block;
1058 + line-height: 26px;
1244 1059 }
1245 1060
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 1061 .wp-core-ui.frm-white-body #post-query-submit.button,
1302 -.wp-core-ui.frm-white-body .button.tablenav-pages-navspan,
1303 1062 .wp-core-ui.frm-white-body .button.first-page,
1304 1063 .wp-core-ui.frm-white-body .button.prev-page,
1305 1064 .wp-core-ui.frm-white-body .button.next-page,
1306 1065 .wp-core-ui.frm-white-body .button.last-page,
1307 1066 .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);
1067 + background-color: var(--lightest-grey);
1068 + border-color: var(--grey-border);
1069 + color: var(--dark-grey);
1312 1070 }
1313 1071
1314 1072 .post-type-frm_display.wp-core-ui .button-primary,
1315 1073 .frm-button-primary,
@@ -1314,16 +1072,16 @@
1314 1072 .post-type-frm_display.wp-core-ui .button-primary,
1315 1073 .frm-button-primary,
1316 1074 .wp-core-ui .button-primary.frm-button-primary,
1317 1075 .frm_single_entry_page .button-primary {
1318 - background-color: var(--primary-500) !important;
1076 + background-color: var(--primary-color) !important;
1319 1077 color: #fff !important;
1320 1078 }
1321 1079
1322 1080 .frm-button-primary.frm_large{
1323 - font-size: var(--text-md) !important;
1081 + font-size: 22px !important;
1324 1082 height: auto !important;
1325 - padding: 9px 18px !important;
1083 + padding: 16px 32px !important;
1326 1084 }
1327 1085
1328 1086 .frm-button-primary i:before {
1329 1087 color: #fff;
@@ -1330,10 +1088,10 @@
1330 1088 }
1331 1089
1332 1090 .wp-core-ui .button-primary.frm-button-primary:hover,
1333 1091 .frm-button-primary:hover {
1334 - background: var(--primary-700) !important;
1335 - border-color: var(--primary-700) !important;
1092 + background: var(--primary-hover) !important;
1093 + border-color: var(--primary-hover) !important;
1336 1094 }
1337 1095
1338 1096 .wp-core-ui .button-primary.frm-button-primary:active {
1339 1097 vertical-align: inherit;
@@ -1338,25 +1096,20 @@
1338 1096 .wp-core-ui .button-primary.frm-button-primary:active {
1339 1097 vertical-align: inherit;
1340 1098 }
1341 1099
1342 -.frm-white-body #search-submit,
1343 1100 #frm-form-button .frm_button_submit,
1344 -.frm-white-body .frm-preview-buttons button,
1345 -.frm-white-body .button:not(.frm-button-primary),
1346 1101 .wp-core-ui.frm-white-body .button-secondary,
1347 1102 .wp-core-ui .button-secondary.frm-button-secondary,
1348 1103 .wp-core-ui .button.frm-button-secondary,
1349 -.frm-white-body .frm-button-secondary,
1350 1104 .frm-button-secondary {
1351 - color: var(--grey-800);
1352 - border-color: var(--grey-300);
1353 - background-color: #fff;
1105 + color: var(--primary-color);
1106 + background-color: transparent;
1354 1107 }
1355 1108
1356 1109 #wp-content-media-buttons button,
1357 1110 #wp-content-media-buttons a.button {
1358 - border-color: var(--grey-300);
1111 + border-color: var(--grey-border);
1359 1112 }
1360 1113
1361 1114 .frm_orange_button {
1362 1115 border-color: #da791d !important;
@@ -1363,23 +1116,26 @@
1363 1116 background: var(--orange);
1364 1117 color: #fff;
1365 1118 }
1366 1119
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 1120 .wp-core-ui.frm-white-body .frm-button-secondary:hover,
1371 1121 .wp-core-ui.frm-white-body .button-secondary:hover,
1372 1122 .wp-core-ui.frm-white-body .button-secondary:focus,
1373 -.wp-core-ui.frm-white-body .tablenav .button:hover,
1374 1123 .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;
1124 + border-color: var(--primary-hover) !important;
1125 + background: var(--primary-hover) !important;
1126 + color: #fff;
1127 + box-shadow: none;
1380 1128 }
1381 1129
1130 +.frm-with-plus {
1131 + padding-left: 10px !important;
1132 +}
1133 +
1134 +.frm-with-plus .frmsvg {
1135 + margin-right: 5px;
1136 +}
1137 +
1382 1138 .frm-button-primary .frmsvg {
1383 1139 color: #fff;
1384 1140 }
1385 1141
@@ -1386,20 +1142,23 @@
1386 1142 .frm_wrap .preview i {
1387 1143 font-size: inherit;
1388 1144 }
1389 1145
1390 -.frm-white-body .frm-button-primary:focus,
1391 -.frm-white-body .frm-button-primary:active,
1146 +.wp-core-ui.frm-white-body .frm-button-secondary:hover .frmsvg,
1147 +.frm_wrap .preview > .button:hover .frmsvg,
1148 +.wp-core-ui.frm-white-body .frm-button-secondary:hover i,
1149 +.frm_wrap .preview > .button:hover i {
1150 + color: #fff;
1151 +}
1152 +
1392 1153 #frm-addons-page .button-primary:focus,
1393 1154 #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;
1155 +#frm_upgrade_modal .button:focus,
1156 +.frm_wrap .preview > .button:focus {
1157 + border-color: var(--primary-hover) !important;
1158 + outline: none;
1399 1159 }
1400 1160
1401 -.frm_wrap .preview > .button:focus,
1402 1161 .frm_orange_button:hover,
1403 1162 .frm_orange_button:focus,
1404 1163 .toplevel_page_formidable #frm_upgrade_modal .button-primary:hover,
1405 1164 .toplevel_page_formidable #frm_upgrade_modal .button-primary:focus,
@@ -1447,9 +1206,9 @@
1447 1206 }
1448 1207
1449 1208 .frm-review-notice.notice form,
1450 1209 .frm-review-notice.notice p {
1451 - font-size: var(--text-sm);
1210 + font-size: 14px;
1452 1211 max-width: 600px;
1453 1212 margin-left: auto;
1454 1213 margin-right: auto;
1455 1214 }
@@ -1454,14 +1213,17 @@
1454 1213 margin-right: auto;
1455 1214 }
1456 1215
1457 1216 .frm-review-notice a {
1458 - margin: 0 var(--gap-xs) !important;
1217 + margin: 5px;
1459 1218 }
1460 1219
1461 1220 .frm-review-notice .frm-button-primary,
1462 1221 .frm-review-notice .frm-button-secondary {
1463 1222 min-width: 100px;
1223 + display: inline-block;
1224 + text-align: center;
1225 + padding: 2px 10px;
1464 1226 }
1465 1227
1466 1228 .frm-review-notice p > span {
1467 1229 font-size: 13px;
@@ -1468,9 +1230,9 @@
1468 1230 opacity: 0.75;
1469 1231 }
1470 1232
1471 1233 #frmapi-feedback {
1472 - margin-top: var(--gap-lg);
1234 + margin-top: 30px;
1473 1235 }
1474 1236
1475 1237 .frm-review-notice .frm_error,
1476 1238 .frm-review-notice label {
@@ -1478,112 +1240,12 @@
1478 1240 text-align: left;
1479 1241 }
1480 1242
1481 1243 .frm-review-notice label {
1482 - font-size: var(--text-sm);
1244 + font-size: 14px;
1483 1245 }
1484 1246
1485 -.frm-floating-success-message {
1486 - border-radius: 4px;
1487 - right: 10px !important;
1488 - bottom: 10px !important;
1489 -}
1490 -
1491 1247 /* 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 1248 .frm_invisible {
1587 1249 visibility: hidden;
1588 1250 transition: all .2s ease;
1589 1251 }
@@ -1591,10 +1253,10 @@
1591 1253 .frm_no_float {
1592 1254 float: none;
1593 1255 }
1594 1256
1595 -.frm_block, /* deprecated */
1596 -.frm-block {
1257 +.frm_block,
1258 +.frm_no_section_fields.frm_block {
1597 1259 display: block;
1598 1260 }
1599 1261
1600 1262 .frm_inline {
@@ -1604,81 +1266,81 @@
1604 1266 .frm_inline_block {
1605 1267 display: inline-block !important;
1606 1268 }
1607 1269
1270 +.frm-lookup-modal .dismiss,
1271 +.frm-right-panel .inside a.frm_hidden,
1272 +ul.frm_form_nav > li.frm_hidden,
1273 +a.frm_hidden,
1274 +.button.frm_hidden,
1275 +.wp-core-ui .button.frm_hidden,
1608 1276 .frm_hidden {
1609 1277 display: none;
1610 1278 }
1611 1279
1612 -.frm-text-right {
1613 - text-align: right;
1280 +.frm_no_margin {
1281 + margin: 0;
1614 1282 }
1615 1283
1616 -.frm-border-b {
1617 - border-bottom: 1px solid var(--grey-300);
1284 +.frm_no_top_margin {
1285 + margin-top: 0 !important;
1618 1286 }
1619 1287
1620 -.frm-no-border {
1621 - border: none !important;
1288 +.postbox .inside > p.frm_no_bottom_margin:last-child,
1289 +.frm_no_bottom_margin {
1290 + margin-bottom: 0 !important;
1622 1291 }
1623 1292
1624 -.frm-opacity-100 {
1625 - opacity: 1;
1293 +.frm_tiny_top_margin {
1294 + margin-top: 1px;
1626 1295 }
1627 1296
1628 -.frm-on-bottom {
1629 - z-index: -1;
1297 +.frm_small_top_margin {
1298 + margin-top: 5px;
1630 1299 }
1631 -/* End Generic Classes, Start Forced Generic Classes */
1632 1300
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;
1301 +.frm_cursor_pointer {
1302 + cursor: pointer;
1642 1303 }
1643 1304
1644 -.postbox .inside > p.frm_no_bottom_margin:last-child {
1645 - margin-bottom: 0 !important;
1305 +.frm_right_text {
1306 + text-align: right;
1646 1307 }
1647 1308
1648 -.frm_no_section_fields.frm_block {
1649 - display: block;
1309 +.frm_submit .frm_full_opacity, .frm_full_opacity {
1310 + opacity: 1;
1650 1311 }
1651 1312
1313 +.frm_med_padding {
1314 + padding: 10px;
1315 +}
1316 +
1652 1317 .actions.frm_visible_overflow {
1653 1318 overflow: visible !important;
1654 1319 }
1655 1320
1656 -.frm_full_opacity, /* deprecated */
1657 -.frm_submit .frm_full_opacity,
1658 -.frm_submit .frm-opacity-100 {
1659 - opacity: 1;
1660 -}
1661 -
1662 1321 .frm-dropdown-menu.frm-on-top {
1663 1322 z-index: 99999;
1664 1323 }
1665 1324
1666 -/* End Forced Generic Classes */
1325 +.frm-on-bottom {
1326 + z-index: -1;
1327 +}
1667 1328
1668 1329 .frm_forms.with_frm_style {
1669 1330 max-width: 100%;
1670 1331 }
1671 1332
1333 +.post-type-frm_display .wrap > #posts-filter,
1672 1334 .post-type-frm_display .wrap > .subsubsub,
1673 1335 .post-type-frm_display .wrap > .icl_subsubsub,
1674 1336 .frm_form_settings > p {
1675 - margin: 6px var(--gap-md);
1337 + margin: 6px 40px;
1676 1338 padding: 0;
1677 1339 }
1678 1340
1679 1341 .frm-entry-container {
1680 - margin: 0 40px 40px;
1342 + margin: 20px 40px 40px;
1681 1343 padding: 0;
1682 1344 }
1683 1345
1684 1346 #form_reports_page .frm-inner-content {
@@ -1692,24 +1354,24 @@
1692 1354 clear: both;
1693 1355 }
1694 1356
1695 1357 .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);
1358 +.frm_page_container h2 {
1359 + margin: 10px 0 !important;
1360 + color: var(--medium-grey);
1361 + font-weight: 500;
1362 + font-size: 19px;
1700 1363 }
1701 1364
1702 1365 .post-type-frm_display .wrap > h2:first-child,
1703 -.frm_wrap .wrap > h2:first-child {
1704 - padding-top: 0;
1366 +.frm_page_container .wrap > h2:first-child {
1705 1367 margin-top: 0 !important;
1706 - font-size: var(--text-lg);
1368 + font-size: 22px;
1707 1369 }
1708 1370
1709 1371 #frm_form_editor_container {
1710 1372 position: relative;
1711 - margin-top: 28px;
1373 + margin: 25px 50px 50px;
1712 1374 }
1713 1375
1714 1376 .form-field p {
1715 1377 /* for conflicts */
@@ -1722,30 +1384,21 @@
1722 1384 float: none;
1723 1385 width: auto;
1724 1386 }
1725 1387
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 1388 .accordion-container label,
1732 1389 .frm-fields td > label,
1733 1390 .frm-fields td > div > label,
1734 -.frm_form_field > label:first-child,
1735 1391 .frm-fields p > label,
1736 -.frm_on_submit_type > label,
1737 1392 .post-type-frm_display .frm_form_field > label,
1738 1393 #new_fields .frm_primary_label,
1739 -#form_global_settings .frm_primary_label,
1740 1394 #frm_form_editor_container .frm_primary_label {
1741 - color: var(--grey-700);
1395 + color: var(--dark-grey);
1742 1396 margin: 0 0 3px;
1743 1397 padding: 0;
1744 1398 width: auto;
1745 - font-size: var(--text-sm);
1399 + font-size: 14px;
1746 1400 display: block;
1747 - line-height: var(--leading);
1748 1401 }
1749 1402
1750 1403 .frm-fields td input + label {
1751 1404 display: inline;
@@ -1763,12 +1416,8 @@
1763 1416 .with_frm_style form .form-field {
1764 1417 margin-bottom: 20px;
1765 1418 }
1766 1419
1767 -#frm_builder_page .with_frm_style form .frm_combo_inputs_container > .form-field {
1768 - margin-bottom: 0;
1769 -}
1770 -
1771 1420 .frm_description,
1772 1421 .with_frm_style form div.description,
1773 1422 .frm_error,
1774 1423 .with_frm_style form div.description textarea {
@@ -1780,18 +1429,11 @@
1780 1429 color: inherit;
1781 1430 }
1782 1431
1783 1432 #frm_form_editor_container .divider_section_only .frm_primary_label {
1784 - display: flex;
1785 - align-items: center;
1786 - gap: var(--gap-xs);
1787 1433 font-size: 20px;
1788 1434 }
1789 1435
1790 -#frm_form_editor_container .divider_section_only .frm_primary_label .frm-sub-label {
1791 - padding: 0;
1792 -}
1793 -
1794 1436 form .form-field.frm_field_loading {
1795 1437 margin-bottom: 0;
1796 1438 min-height: 0;
1797 1439 padding: 0;
@@ -1879,8 +1521,14 @@
1879 1521 max-width: 700px;
1880 1522 margin: 20px auto !important;
1881 1523 }
1882 1524
1525 +.upgrade_to_pro h1,
1526 +.upgrade_to_pro h3,
1527 +.upgrade_to_pro {
1528 + color: #444;
1529 +}
1530 +
1883 1531 .upgrade_to_pro .error {
1884 1532 display: none;
1885 1533 }
1886 1534
@@ -1890,19 +1538,19 @@
1890 1538 }
1891 1539
1892 1540 .frm_error_style,
1893 1541 .frm_warning_style,
1894 -.frm_note_style,
1895 1542 .frm_message,
1896 1543 #post-body-content .frm_updated_message,
1897 1544 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;
1545 + border-radius: var(--border-radius);
1546 + border: 1px solid #D6E9C6;
1547 + background-color: #DFF0D8;
1548 + color: #468847;
1549 + padding: 5px 25px;
1550 + font-size: 14px;
1551 + margin: 5px 0 15px;
1552 + text-align: center;
1905 1553 }
1906 1554
1907 1555 #frm_top_bar + .wrap > .frm_updated_message, #frm_top_bar + .wrap > .frm_warning_style {
1908 1556 display: inline-block;
@@ -1913,20 +1561,21 @@
1913 1561 #post-body-content > .frm_updated_message {
1914 1562 margin: 5px 65px;
1915 1563 }
1916 1564
1917 -#form_global_settings #post-body-content > .frm_updated_message,
1918 -#form_global_settings #post-body-content > .frm_warning_style {
1565 +#form_global_settings .frm_updated_message {
1919 1566 margin: 5px 25px;
1920 1567 }
1921 1568
1922 1569 .frm_error_style {
1923 1570 color: #973937;
1924 - background-color: #EBCCCC;
1571 + border-color: #F2DEDE;
1572 + background-color: #F2DEDE;
1925 1573 clear: both;
1926 1574 }
1927 1575
1928 1576 .frm_error_style a {
1577 + color: #973937;
1929 1578 text-decoration: underline;
1930 1579 font-weight: 600;
1931 1580 }
1932 1581
@@ -1934,10 +1583,14 @@
1934 1583 opacity: .7;
1935 1584 }
1936 1585
1937 1586 .frm_warning_style {
1938 - color: #7A4D05;
1939 - background-color: #FFF2D2;
1587 + color: #8B6E3C;
1588 + border-color: #FBECCD;
1589 + background-color: #FDF9E3;
1590 + border-radius: 10px;
1591 + text-align: left;
1592 + padding-top: 5px;
1940 1593 }
1941 1594
1942 1595 .frm_warning_heading{
1943 1596 font-weight: bold;
@@ -1943,61 +1596,8 @@
1943 1596 font-weight: bold;
1944 1597 margin-bottom:4px;
1945 1598 }
1946 1599
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 -.frm-banner-alert {
1988 - text-align: left;
1989 - margin: 0;
1990 - border-radius: 0;
1991 - padding: 10px 0 10px 40px;
1992 -}
1993 -
1994 -.frm-banner-alert a {
1995 - color: var(--primary-500);
1996 - font-weight: 400;
1997 - text-decoration: none;
1998 -}
1999 -
2000 1600 .frm_updated_message ul,
2001 1601 .frm_updated_message li,
2002 1602 .frm_warning_style ul,
2003 1603 .frm_warning_style li,
@@ -2006,24 +1606,57 @@
2006 1606 margin: 0;
2007 1607 }
2008 1608
2009 1609 .frm-inline-message {
2010 - border: 1px solid var(--primary-700);
1610 + border: 1px solid var(--primary-hover);
2011 1611 border-radius: var(--small-radius);
2012 - color: var(--primary-700);
1612 + color: var(--primary-hover);
2013 1613 background: #fff;
2014 1614 text-align: center;
2015 1615 padding: 20px;
2016 - font-size: var(--text-sm);
2017 - line-height: var(--leading);
1616 + font-size: 14px;
1617 + line-height: 1.4em;
2018 1618 }
2019 1619
2020 1620 .frm-inline-message a {
2021 - text-decoration: underline;
2022 1621 font-weight: 600;
2023 - color: var(--primary-700);
1622 + color: var(--primary-hover);
2024 1623 }
2025 1624
1625 +.frm_ribbon {
1626 + -webkit-transform: rotate(45deg);
1627 + -moz-transform: rotate(45deg);
1628 + -ms-transform: rotate(45deg);
1629 + -o-transform: rotate(45deg);
1630 + transform: rotate(45deg);
1631 + border: 25px solid transparent;
1632 + border-bottom: 25px solid var(--orange);
1633 + position: absolute;
1634 + top: -31px;
1635 + right: -74px;
1636 + padding: 0px 10px;
1637 + width: 30px;
1638 + color: white;
1639 + font-family: sans-serif;
1640 + size: 11px;
1641 +}
1642 +
1643 +.plugin-card-top .frm_ribbon {
1644 + right: -33px;
1645 + top: -28px;
1646 +}
1647 +
1648 +.frm_ribbon span {
1649 + position: absolute;
1650 + left: 25px;
1651 + font-size: 15px;
1652 + top: 4px;
1653 +}
1654 +
1655 +.accordion-section-content .frm-selectable:hover .frm_ribbon {
1656 + display: none;
1657 +}
1658 +
2026 1659 .frm_pro_heading span {
2027 1660 margin-top: 10px;
2028 1661 }
2029 1662
@@ -2032,14 +1665,15 @@
2032 1665 }
2033 1666
2034 1667 .frm-yes {
2035 1668 color: var(--green);
2036 - font-size: var(--text-xl);
1669 + font-size: 21px;
1670 + font-weight: 500;
2037 1671 }
2038 1672
2039 1673 .frm-nope {
2040 - color: var(--grey-400);
2041 - font-size: var(--text-xl);
1674 + color: #d2e0f2;
1675 + font-size: 21px;
2042 1676 }
2043 1677
2044 1678 .upgrade_to_pro a {
2045 1679 color: var(--orange);
@@ -2045,10 +1679,10 @@
2045 1679 color: var(--orange);
2046 1680 }
2047 1681
2048 1682 .upgrade_to_pro table .frmsvg {
2049 - height: var(--text-xl);
2050 - width: var(--text-xl);
1683 + height: 20px;
1684 + width: 20px;
2051 1685 }
2052 1686
2053 1687 .upgrade_to_pro table.widefat {
2054 1688 background-color: #fff;
@@ -2054,14 +1688,12 @@
2054 1688 background-color: #fff;
2055 1689 border-collapse: collapse;
2056 1690 }
2057 1691
2058 -.frm-white-body .upgrade_to_pro table th,
1692 +.upgrade_to_pro table th,
2059 1693 .upgrade_to_pro table td {
2060 1694 padding: 10px 15px;
2061 - border: 1px solid var(--grey-300);
2062 - line-height: var(--leading);
2063 - font-size: var(--text-sm);
1695 + border: 1px solid #d2e0f2;
2064 1696 }
2065 1697
2066 1698 .upgrade_to_pro table th.frmcenter {
2067 1699 text-align: center;
@@ -2067,9 +1699,9 @@
2067 1699 text-align: center;
2068 1700 }
2069 1701
2070 1702 .widefat th.frm_table_break {
2071 - background-color: var(--sidebar-color);
1703 + background-color: #f6f7fb;
2072 1704 }
2073 1705
2074 1706 h2.frm-h2 + .howto {
2075 1707 color: var(--medium-grey);
@@ -2085,18 +1717,18 @@
2085 1717 margin-top: 0;
2086 1718 }
2087 1719
2088 1720 .frm-addons {
2089 - margin-top: var(--gap-lg);
1721 + margin-top: 30px;
2090 1722 display: grid;
2091 1723 grid-template-columns: 1fr 1fr 1fr;
2092 - grid-gap: var(--gap-md);
1724 + grid-gap: 30px 2%;
2093 1725 }
2094 1726
2095 1727 .frm-addons,
2096 1728 .frm-addons h2,
2097 1729 .frm-addons h3 {
2098 - color: var(--grey-700);
1730 + color: var(--dark-grey);
2099 1731 }
2100 1732
2101 1733 .frm-addons h2 {
2102 1734 font-size: 17px;
@@ -2108,9 +1740,9 @@
2108 1740
2109 1741 .frm-card {
2110 1742 width: 100%;
2111 1743 border-radius: 10px;
2112 - border: 1px solid var(--grey-300);
1744 + border: 1px solid var(--grey-border);
2113 1745 opacity: 1;
2114 1746 transition: opacity 1s;
2115 1747 }
2116 1748
@@ -2124,10 +1756,10 @@
2124 1756 position: relative;
2125 1757 }
2126 1758
2127 1759 .frm-addons .plugin-card-top {
2128 - min-height: 155px;
2129 - padding-top: var(--gap-lg);
1760 + height: 140px;
1761 + padding-top: 30px;
2130 1762 overflow: hidden;
2131 1763 }
2132 1764
2133 1765 .frm-addons .plugin-card-top h2 {
@@ -2164,18 +1796,8 @@
2164 1796 .frm-addon-active .button {
2165 1797 visibility: hidden;
2166 1798 }
2167 1799
2168 -.frm-save-and-reload-options {
2169 - margin-top: 10px;
2170 - font-size: 13px;
2171 -}
2172 -
2173 -.frm-save-and-reload,
2174 -.frm-save-and-reload + .frm-button-secondary {
2175 - visibility: visible !important;
2176 -}
2177 -
2178 1800 .addon-status-label {
2179 1801 opacity: .7;
2180 1802 }
2181 1803
@@ -2202,13 +1824,9 @@
2202 1824 .frm-new-template.plugin-card-bottom {
2203 1825 overflow: visible;
2204 1826 }
2205 1827
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),
1828 +.frm-admin-page-formidableedit #wpbody-content > *:not(.frm-review-notice):not(.frm_previous_install),
2211 1829 #wpbody-content > .updated,
2212 1830 #wpbody-content > #update-nag,
2213 1831 #wpbody-content > .update-nag,
2214 1832 #wpbody-content > .notice:not(.frm-review-notice),
@@ -2230,86 +1848,35 @@
2230 1848 margin: 0;
2231 1849 padding: 10px 20px;
2232 1850 }
2233 1851
2234 -.frm-modal .postbox,
2235 1852 #frm_new_form_modal .postbox {
2236 1853 max-height: 600px;
2237 1854 overflow: hidden;
2238 - margin-bottom: 0;
2239 1855 }
2240 1856
2241 -.frm-modal .postbox .frm_modal_top,
2242 -.frm-dialog .frm_common_modal .postbox > div:first-child {
2243 - padding: var(--gap-md) var(--gap-md) 0;
1857 +#frm_new_form_modal .postbox > div:first-child {
1858 + padding: 30px 20px;
2244 1859 position: relative;
1860 + border-bottom: 1px solid var(--grey-border);
2245 1861 }
2246 1862
2247 -.frm-modal .postbox .frm-modal-title,
2248 -.frm-dialog .frm_common_modal .postbox > div:first-child > div:first-child {
1863 +#frm_new_form_modal .postbox > div:first-child > div:first-child {
2249 1864 display: inline-block;
2250 - font-size: var(--text-xl);
2251 - color: var(--grey-900);
1865 + font-size: 24px;
1866 + color: #282F36;
2252 1867 }
2253 1868
2254 -.frm-inline-modal > a.dismiss,
2255 -.frm-modal .postbox > a.dismiss,
2256 -.frm-modal .postbox .frm-modal-title + div:last-child,
2257 -.frm-dialog .frm_common_modal .postbox > div:first-child > div:last-child {
1869 +#frm_new_form_modal .postbox > div:first-child > div:last-child {
2258 1870 position: absolute;
2259 - right: 30px;
2260 - top: 25px;
2261 - z-index: 2;
1871 + right: 20px;
1872 + top: 37px;
2262 1873 }
2263 1874
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;
1875 +#frm_new_form_modal .postbox > div:first-child > div:last-child a {
1876 + color: var(--grey);
2270 1877 }
2271 1878
2272 -.frm-info-modal .postbox > a.dismiss,
2273 -.frm-inline-modal > a.dismiss {
2274 - right: 13px;
2275 - top: 13px;
2276 -}
2277 -
2278 -.frm-modal .postbox .frm-modal-title + div:last-child a,
2279 -.frm-modal a.dismiss .frmsvg,
2280 -.frm_common_modal .frm_modal_top a .frmsvg {
2281 - color: var(--grey-900);
2282 -}
2283 -
2284 -.frm-modal .frm_modal_content > div.inside,
2285 -.frm_common_modal .frm_modal_content > div.inside {
2286 - padding: var(--gap-md);
2287 - margin: 0;
2288 - font-size: var(--text-sm);
2289 - color: var(--grey-700);
2290 -}
2291 -
2292 -.frm_common_modal .postbox {
2293 - display: flex;
2294 - flex-direction: column;
2295 -}
2296 -
2297 -.frm-modal .postbox > div.inside .cta-inside {
2298 - overflow-y: auto;
2299 - height: auto;
2300 - padding: 0 var(--gap-sm);
2301 -}
2302 -
2303 -.frm_modal_footer {
2304 - padding: 0 var(--gap-md) var(--gap-sm);
2305 - text-align: right;
2306 -}
2307 -
2308 -body.frm-body-with-open-modal {
2309 - overflow-y: hidden;
2310 -}
2311 -
2312 1879 #frm_new_form_modal .postbox > div.inside {
2313 1880 max-height: 490px;
2314 1881 overflow-y: auto;
2315 1882 overflow-x: hidden;
@@ -2319,9 +1886,9 @@
2319 1886
2320 1887 #frm_new_form_modal .postbox > div.inside .cta-inside {
2321 1888 overflow-y: auto;
2322 1889 height: auto;
2323 - padding: 0 var(--gap-md);
1890 + padding: 0 15px;
2324 1891 }
2325 1892
2326 1893 #frm_new_form_modal .accordion-container {
2327 1894 width: 100%;
@@ -2327,16 +1894,13 @@
2327 1894 width: 100%;
2328 1895 }
2329 1896
2330 1897 .frm-templates-list {
2331 - margin-top: 0;
1898 + margin-top: 0px;
2332 1899 }
2333 1900
2334 -.frm-templates-list.frm_grid_container li {
2335 - margin-bottom: 0;
2336 -}
2337 -
2338 1901 .frm-templates-list li {
1902 + width: 50%;
2339 1903 vertical-align: top;
2340 1904 position: relative;
2341 1905 box-sizing: border-box;
2342 1906 border-radius: 6px;
@@ -2365,17 +1929,14 @@
2365 1929 .frm-templates-list li.frm-selectable:hover p {
2366 1930 max-width: calc( 100% - 65px );
2367 1931 }
2368 1932
2369 -.frm-templates-list .frm-featured-form {
2370 - display: flex;
1933 +.frm-templates-list li > div:not(.frm-hover-icons) {
1934 + display: inline-block;
2371 1935 width: 100%;
1936 + padding: 5px;
2372 1937 }
2373 1938
2374 -.frm-templates-list li .frm-featured-form {
2375 - padding: 7px 5px;
2376 -}
2377 -
2378 1939 .frm-templates-list li li > div {
2379 1940 padding-left: 0;
2380 1941 }
2381 1942
@@ -2382,38 +1943,23 @@
2382 1943 .frm-templates-list li > div > div {
2383 1944 vertical-align: middle;
2384 1945 }
2385 1946
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;
1947 +.frm-templates-list li .frm-category-icon {
2392 1948 width: 40px;
2393 1949 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 {
1950 + overflow: hidden;
1951 + display: inline-block;
1952 + border-radius: 4px;
1953 + text-align: center;
2403 1954 vertical-align: top;
2404 1955 }
2405 1956
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 {
1957 +.frm-templates-list li > div > div:last-child {
2412 1958 /* the content container to the right of the icon in Create new form modal */
2413 1959 display: inline-block;
2414 1960 width: calc( 100% - 40px );
2415 - padding-left: var(--gap-sm);
1961 + padding-left: 13px;
2416 1962 box-sizing: border-box;
2417 1963 transform: translateY(-2px);
2418 1964 }
2419 1965
@@ -2427,18 +1973,54 @@
2427 1973 }
2428 1974
2429 1975 .frm-templates-list li h3,
2430 1976 .frm-templates-list .frm-install-template h3 {
2431 - font-size: var(--text-sm) !important;
1977 + font-size: 14px !important;
1978 + line-height: 24px;
1979 + height: 24px;
2432 1980 }
2433 1981
1982 +.frm-templates-list li p {
1983 + font-size: 13px;
1984 + color: rgba(40, 47, 54, 0.6);
1985 +}
1986 +
2434 1987 .frm-templates-list .frm-install-template div {
2435 1988 text-align: left;
2436 1989 }
2437 1990
1991 +.frm-templates-list .frm-add-blank-form .frm-category-icon .frmsvg,
1992 +.frm-templates-list li:last-child div:not(.frm-hover-icons) > .frmsvg {
1993 + color: #fff;
1994 + transform: translateY(10px);
1995 +}
1996 +
1997 +.frm-templates-list .frm-inner-circle {
1998 + border-radius: 4px;
1999 + width: 40px;
2000 + height: 40px;
2001 + padding: 0;
2002 + box-sizing: border-box;
2003 + display: flex;
2004 + flex-direction: row;
2005 + align-items: center;
2006 + justify-content: center;
2007 + position: relative;
2008 +}
2009 +
2010 +.frm-templates-list .frm-inner-circle .frmsvg {
2011 + position: absolute;
2012 + top: 0;
2013 + left: 0;
2014 + width: 100%;
2015 + height: 100%;
2016 + box-sizing: border-box;
2017 + padding: 10px;
2018 +}
2019 +
2438 2020 #frm_new_form_modal .frm-search {
2439 - width: 100%;
2440 - margin: var(--gap-sm) 0 var(--gap-md);
2021 + width: calc( 100% - 20px );
2022 + margin: 40px 10px 30px;
2441 2023 }
2442 2024
2443 2025 #frm_leave_email,
2444 2026 #frm_code_from_email
@@ -2445,10 +2027,14 @@
2445 2027 {
2446 2028 width: 480px;
2447 2029 }
2448 2030
2449 -#frm_new_form_modal #template-search-input {
2450 - width: 100%;
2031 +#frm_new_form_modal #template-search-input,
2032 +#frm_new_form_modal #frm_leave_email,
2033 +#frm_new_form_modal #frm_code_from_email
2034 +{
2035 + border: 2px solid var(--grey-border);
2036 + border-radius: 4px !important;
2451 2037 }
2452 2038
2453 2039 #frm-email-block .frm-with-left-icon .frmsvg {
2454 2040 padding: 0;
@@ -2458,12 +2044,12 @@
2458 2044
2459 2045 #frm_new_form_modal .accordion-container {
2460 2046 display: inline-block;
2461 2047 padding: 0;
2462 - border-top: 1px solid var(--grey-300);
2048 + border-top: 1px solid var(--grey-border);
2463 2049 box-sizing: border-box;
2464 - margin: 0 5px;
2465 - width: calc( 100% - 10px );
2050 + margin: 0 10px;
2051 + width: calc( 100% - 20px );
2466 2052 }
2467 2053
2468 2054 #frm_new_form_modal .accordion-section-title {
2469 2055 padding: 0;
@@ -2473,13 +2059,13 @@
2473 2059 .control-section:hover .accordion-section-title,
2474 2060 #frm_new_form_modal .accordion-section.open .accordion-section-title
2475 2061 {
2476 2062 background: #fff !important;
2477 - border-bottom-color: transparent;
2063 + border-bottom: none;
2478 2064 }
2479 2065
2480 2066 #frm_new_form_modal .accordion-section.open:hover {
2481 - border-bottom-color: transparent;
2067 + border-bottom: none;
2482 2068 }
2483 2069
2484 2070 #frm_new_form_modal .accordion-section {
2485 2071 padding: 8px 0 4px;
@@ -2485,9 +2071,9 @@
2485 2071 padding: 8px 0 4px;
2486 2072 }
2487 2073
2488 2074 #frm_new_form_modal .accordion-section + .accordion-section {
2489 - border-top: 1px solid var(--grey-300);
2075 + border-top: 1px solid var(--grey-border);
2490 2076 border-radius: 0;
2491 2077 }
2492 2078
2493 2079 .frm-templates-list.frm-categories-list li > div > div:last-child,
@@ -2496,9 +2082,9 @@
2496 2082 padding-left: 0;
2497 2083 }
2498 2084
2499 2085 #frm_new_form_modal .frm-templates-list.frm-categories-list .accordion-section-title {
2500 - padding-left: var(--gap-sm);
2086 + padding-left: 10px;
2501 2087 }
2502 2088
2503 2089 #frm_new_form_modal .frm-templates-list.frm-categories-list li.frm-selectable {
2504 2090 padding: 0 10px;
@@ -2505,127 +2091,131 @@
2505 2091 overflow: hidden;
2506 2092 }
2507 2093
2508 2094 #frm_new_form_modal .accordion-section-content {
2509 - padding: var(--gap-sm);
2095 + padding: 10px 0;
2510 2096 }
2511 2097
2512 2098 .frm-hover-icons {
2513 2099 position: absolute;
2514 2100 right: 0;
2515 - top: calc( ( 58px - 2px - 22px ) / 2 ); /* Template item height - borders - icon height */
2516 - max-width: 91px;
2101 + top: 0;
2102 + height: 20px;
2103 + width: 65px;
2517 2104 height: 100%;
2518 2105 box-sizing: border-box;
2519 - padding: 0 10px 0 5px !important;
2520 - border-radius: var(--small-radius);
2106 + padding: 14px 10px 0 5px !important;
2107 + border-radius: 6px;
2521 2108 text-align: right;
2522 - display: flex;
2523 - gap: 5px;
2524 2109 }
2525 2110
2526 -.frm-ready-made-solution .frm-hover-icons {
2527 - visibility: hidden;
2111 +#frm_new_form_modal .frm-selectable[data-custom="1"] .frm-hover-icons {
2112 + width: 91px;
2528 2113 }
2529 2114
2530 -.frm-ready-made-solution:hover .frm-hover-icons {
2531 - visibility: visible;
2532 -}
2533 -
2534 2115 .frm-hover-icons a {
2535 2116 width: 22px;
2536 2117 height: 22px;
2537 - font-size: var(--text-md);
2538 - display: inline-flex;
2539 - align-items: center;
2540 - justify-content: center;
2118 + display: inline-block;
2541 2119 border-radius: 50%;
2542 2120 box-sizing: border-box;
2543 - line-height: var(--leading);
2121 + line-height: 20px;
2544 2122 text-align: center;
2545 2123 }
2546 2124
2547 2125 .frm-hover-icons > .frm-preview-form,
2548 2126 .frm-hover-icons > .frm-delete-form {
2549 - border: 1px solid var(--primary-500);
2127 + border: 1px solid var(--primary-color);
2128 + margin-right: 5px;
2550 2129 }
2551 2130
2552 -.frm-hover-icons > .frm-create-form,
2553 -.frm-ready-made-solution .frm-hover-icons a {
2554 - background-color: var(--primary-500);
2131 +.frm-hover-icons > .frm-create-form {
2132 + background-color: var(--primary-color);
2555 2133 }
2556 2134
2557 -.frm-hover-icons > a .frmsvg {
2558 - width: 14px;
2559 - height: 14px;
2560 - vertical-align: baseline;
2135 +.frm-hover-icons > .frm-preview-form .frmsvg {
2136 + width: 16px;
2137 + height: 16px;
2138 + color: var(--primary-color);
2561 2139 }
2562 2140
2563 -.frm-hover-icons > .frm-preview-form .frmsvg,
2564 2141 .frm-hover-icons > .frm-delete-form .frmsvg {
2565 - color: var(--primary-500);
2142 + width: 14px;
2143 + height: 14px;
2144 + color: var(--primary-color);
2145 + transform: translateY(-1px);
2566 2146 }
2567 2147
2568 2148 .frm-hover-icons > .frm-unlock-form {
2569 - background-color: var(--primary-500);
2149 + background-color: var(--primary-color);
2570 2150 }
2571 2151
2572 2152 .frm-hover-icons > .frm-unlock-form .frmsvg {
2573 - background-color: var(--primary-500);
2153 + width: 12px;
2154 + height: 12px;
2155 + background-color: var(--primary-color);
2156 + transform: translateY(-2px);
2574 2157 }
2575 2158
2576 -.frm-ready-made-solution .frmsvg {
2159 +.frm-hover-icons > .frm-create-form .frmsvg {
2577 2160 width: 14px;
2578 2161 height: 14px;
2579 2162 }
2580 2163
2581 -.frm-hover-icons .frm-create-form svg,
2582 -.frm-ready-made-solution .frm-hover-icons svg {
2164 +.frm-hover-icons .frm-create-form svg {
2583 2165 color: #fff;
2584 2166 }
2585 2167
2586 2168 .frm-hover-icons .frm-create-form:hover,
2587 -.frm-ready-made-solution .frm-hover-icons a:hover,
2588 2169 .frm-hover-icons > .frm-unlock-form:hover,
2589 2170 .frm-hover-icons > .frm-unlock-form:hover .frmsvg
2590 2171 {
2591 - background-color: var(--primary-700) !important;
2172 + background-color: var(--primary-hover) !important;
2592 2173 }
2593 2174
2594 2175 .frm-hover-icons .frm-preview-form:hover,
2595 2176 .frm-hover-icons .frm-delete-form:hover
2596 2177 {
2597 - border: 1px solid var(--primary-700) !important;
2178 + border: 1px solid var(--primary-hover) !important;
2598 2179 }
2599 2180
2600 2181 .frm-hover-icons .frm-preview-form:hover .frmsvg,
2601 2182 .frm-hover-icons .frm-delete-form:hover .frmsvg {
2602 - color: var(--primary-700) !important;
2183 + color: var(--primary-hover) !important;
2603 2184 }
2604 2185
2605 -.frm-application-card h4 .frmsvg,
2606 2186 .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);
2187 + height: 12px;
2188 + width: 14px;
2189 + vertical-align: top;
2190 + padding-top: 6px;
2611 2191 }
2612 2192
2193 +.frm_modal_footer {
2194 + background-color: #fff;
2195 + padding: 30px 20px 15px;
2196 + text-align: right;
2197 + border-top: 1px solid var(--grey-border);
2198 +}
2199 +
2613 2200 #frm_new_form_modal .frm-use-this-template {
2614 2201 margin-left: 10px;
2615 2202 }
2616 2203
2617 2204 #frm_new_form_modal #frm-preview-block {
2618 - padding: var(--gap-md) var(--gap-lg);
2205 + padding: 20px 40px;
2619 2206 overflow-x: hidden;
2620 2207 }
2621 2208
2622 2209 #frm_new_form_modal #frm-details-block {
2623 - padding: var(--gap-md) var(--gap-lg);
2210 + padding: 20px 40px;
2624 2211 }
2625 2212
2626 2213 .frm-modal-back {
2627 2214 cursor: pointer;
2215 + font-size: 17px;
2216 + vertical-align: top;
2217 + margin-top: 4px;
2628 2218 margin-right: 4px;
2629 2219 }
2630 2220
2631 2221 .frm-modal-cancel {
@@ -2632,28 +2222,19 @@
2632 2222 float: left;
2633 2223 }
2634 2224
2635 2225 .frm-plan-required-tag {
2636 - margin-left: 5px;
2637 - transform: translateY(-1px);
2638 2226 background: #FDE6DE;
2639 2227 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 2228 font-size: 10px;
2650 - padding: 4px 6px;
2229 + padding: 4px 8px;
2651 2230 border-radius: 4px;
2652 2231 text-transform: uppercase;
2653 2232 font-weight: normal;
2654 2233 display: inline-block;
2655 2234 line-height: 12px;
2235 + transform: translateY(-1px);
2236 + margin-left: 5px;
2656 2237 }
2657 2238
2658 2239 #frm_new_form_modal.frm-expired #frm-create-block,
2659 2240 #frm_new_form_modal.frm-expiring #frm-create-block {
@@ -2663,14 +2244,18 @@
2663 2244 #frm-create-footer {
2664 2245 padding: 15px 20px;
2665 2246 }
2666 2247
2248 +#frm-create-footer .frm_error_style {
2249 + border-radius: 6px;
2250 +}
2251 +
2667 2252 #frm_code_from_email_options {
2668 2253 margin-top: 20px;
2669 2254 }
2670 2255
2671 2256 #frm_code_from_email_options * {
2672 - color: var(--primary-500);
2257 + color: var(--primary-color);
2673 2258 }
2674 2259
2675 2260 #frm-email-block p,
2676 2261 #frm-code-block p,
@@ -2706,23 +2291,20 @@
2706 2291 #frm_new_form_modal[frm-page="upgrade"] #frm-upgrade-title,
2707 2292 #frm_new_form_modal[frm-page="email"] #frm-email-title,
2708 2293 #frm_new_form_modal[frm-page="code"] #frm-email-title,
2709 2294 #frm_new_form_modal[frm-page="renew"] #frm-renew-title,
2295 +.frm-locked-template .frm-hover-icons .frm-unlock-form,
2296 +li[data-preview] .frm-hover-icons .frm-preview-form,
2710 2297 #frm_code_from_email_error[frm-error="wrong-code"] span[frm-error="wrong-code"],
2711 2298 #frm_code_from_email_error[frm-error="empty"] span[frm-error="empty"],
2712 2299 #frm_code_from_email_error[frm-error="custom"] span[frm-error="custom"],
2713 2300 #frm_leave_email_error[frm-error="invalid"] span[frm-error="invalid"],
2714 -#frm_leave_email_error[frm-error="empty"] span[frm-error="empty"]
2301 +#frm_leave_email_error[frm-error="empty"] span[frm-error="empty"],
2302 +#frm_new_form_modal .frm-selectable[data-custom="1"] .frm-hover-icons .frm-delete-form
2715 2303 {
2716 2304 display: inline-block;
2717 2305 }
2718 2306
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 2307 #frm_new_form_modal[frm-page="create"] #frm-create-block,
2726 2308 #frm_new_form_modal[frm-page="preview"] #frm-preview-block,
2727 2309 #frm_new_form_modal[frm-page="details"] #frm-details-block,
2728 2310 #frm_new_form_modal[frm-page="upgrade"] #frm-upgrade-block,
@@ -2757,120 +2339,28 @@
2757 2339 }
2758 2340
2759 2341 #frm-upgrade-body-list-wrapper ul li:before {
2760 2342 content: "\2022";
2761 - color: var(--primary-500);
2343 + color: var(--primary-color);
2762 2344 display: inline-block;
2763 2345 width: 1em;
2764 2346 margin-left: -1em;
2765 2347 }
2766 2348
2767 -/* Embed Form Modal */
2768 -
2769 -.frm-embed-modal-content {
2770 - padding: var(--gap-md);
2771 -}
2772 -
2773 -.frm-embed-modal-content.frm-loading-page-options {
2774 - display: flex;
2775 - justify-content: center;
2776 -}
2777 -
2778 -#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);
2785 - width: 100%;
2786 - height: auto !important;
2787 - resize: none;
2788 -}
2789 -
2790 -#frm_embed_modal textarea.frm_embed_example {
2791 - padding-bottom: 0;
2792 -}
2793 -
2794 -.frm-embed-modal-content > div a {
2795 - position: absolute;
2796 - right: 0;
2797 - top: 0;
2798 -}
2799 -
2800 -.frm-embed-modal-content > div {
2801 - position: relative;
2802 - margin-bottom: var(--gap-sm);
2803 -}
2804 -
2805 -.frm-embed-modal-content > div:last-child {
2806 - margin-bottom: 0;
2807 -}
2808 -
2809 -.frm-embed-modal-content svg[id^="frm_copy_embed_"] {
2810 - position: absolute;
2811 - bottom: calc( ( 38px - 18px ) / 2 ); /* Input height - SVG height */
2812 - right: 10px;
2813 - cursor: pointer;
2814 - opacity: 0.5;
2815 -}
2816 -
2817 -.frm-border-info-box,
2818 -.frm-embed-modal-option {
2819 - border-radius: var(--small-radius);
2820 - border: 1px solid var(--grey-300);
2821 - padding: var(--gap-sm);
2822 - cursor: pointer;
2823 - display: flex;
2824 - gap: var(--gap-sm);
2825 - font-size: var(--text-sm);
2826 -}
2827 -
2828 -.frm-embed-modal-option + .frm-embed-modal-option {
2829 - margin-top: var(--gap-sm);
2830 -}
2831 -
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);
2838 -}
2839 -
2840 -#frm_embed_modal .frm_modal_footer {
2841 - display: none;
2842 -}
2843 -
2844 -#frm_embed_modal.frm-on-page-2 .frm_modal_footer {
2845 - display: block;
2846 -}
2847 -
2848 -.frm-embed-modal-content ul {
2849 - max-height: 300px;
2850 - overflow-y: scroll;
2851 -}
2852 -
2853 -.frm-embed-modal-wrapper.frm-dialog {
2854 - overflow: visible;
2855 -}
2856 -
2857 2349 /* Bulk Options */
2858 2350 #frm-bulk-modal .frm_grid_container {
2351 + border-top: 1px solid var(--grey-border);
2859 2352 grid-template-columns: repeat(12, 8.33%);
2860 2353 grid-gap: 0;
2861 2354 }
2862 2355
2863 2356 #frm-bulk-modal .frm8 {
2864 - border-right: 1px solid var(--grey-300);
2865 - padding: 10px 20px 10px var(--gap-lg);
2357 + border-right: 1px solid var(--grey-border);
2358 + padding: 0 20px 20px;
2866 2359 }
2867 2360
2868 -#frm-bulk-modal .frm4 {
2869 - padding: 10px 0;
2870 -}
2871 -
2872 -.frm-inline-modal .howto {
2361 +.frm-inline-modal .howto,
2362 +#frm-bulk-modal .howto {
2873 2363 margin: 5px 0 10px;
2874 2364 color: var(--grey);
2875 2365 }
2876 2366
@@ -2887,18 +2377,18 @@
2887 2377 }
2888 2378
2889 2379 .frm-bulk-edit-link {
2890 2380 text-align: right;
2891 - font-size: var(--text-sm);
2381 + font-size: 14px;
2892 2382 padding: 0 5px 10px;
2893 2383 }
2894 2384
2895 2385 .frm-small-add {
2896 - font-size: var(--text-sm) !important;
2386 + font-size: 14px !important;
2897 2387 }
2898 2388
2899 2389 .frm-small-add span {
2900 - color: var(--primary-500);
2390 + color: var(--primary-color);
2901 2391 font-size: 12px;
2902 2392 height: 12px;
2903 2393 width: 12px;
2904 2394 }
@@ -2913,33 +2403,34 @@
2913 2403 }
2914 2404
2915 2405 .frm-right-panel .inside a.frm_pro_tip,
2916 2406 a.frm_pro_tip {
2917 - font-size: var(--text-sm);
2407 + font-size: 14px;
2408 + border: 1px solid var(--orange);
2918 2409 display: inline-block;
2919 - color: var(--grey-700);
2920 - background: #FFE7DE;
2921 - border-radius: var(--small-radius);
2410 + color: var(--dark-grey);
2411 + background: var(--light-blue);
2412 + border-radius: var(--border-radius);
2413 + text-align: center;
2922 2414 padding: 5px 15px;
2923 2415 margin: 0 auto;
2924 - display: flex;
2925 - align-items: center;
2416 + line-height: 1.4;
2926 2417 }
2927 2418
2928 2419 a.frm_pro_tip:hover {
2929 - color: var(--grey-700);
2930 - border-color: var(--primary-500);
2420 + color: var(--dark-grey);
2421 + border-color: var(--primary-color);
2931 2422 }
2932 2423
2933 2424 a.frm_pro_tip:hover .frmsvg {
2934 - fill: var(--primary-500);
2425 + fill: var(--primary-color);
2935 2426 }
2936 2427
2937 2428 .frm_field_list .frm_pro_tip {
2938 2429 margin: 10px 15px;
2430 + padding-left: 40px;
2939 2431 position: relative;
2940 - width: calc(100% - 30px);
2941 - box-sizing: border-box;
2432 + background: #fff;
2942 2433 }
2943 2434
2944 2435 a.frm_pro_tip .frmsvg,
2945 2436 a.frm_pro_tip i {
@@ -2946,27 +2437,19 @@
2946 2437 color: var(--orange);
2947 2438 margin-right: 5px;
2948 2439 }
2949 2440
2950 -a.frm_pro_tip .frmsvg {
2951 - margin-right: 10px;
2441 +.frm_field_list a.frm_pro_tip .frmsvg {
2442 + position: absolute;
2443 + left: 15px;
2444 + top: calc(50% - 11px);
2952 2445 }
2953 2446
2954 -.frm-light-tip a.frm_pro_tip {
2955 - background: rgba(188, 224, 253, 0.23);
2447 +.pro-tip {
2448 + font-weight: 500;
2449 + color: var(--darkest-grey);
2956 2450 }
2957 2451
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 -.frm-tip-info {
2965 - flex: 1;
2966 - text-align: left;
2967 -}
2968 -
2969 2452 .frm-tip-cta {
2970 2453 color: var(--orange);
2971 2454 }
2972 2455
@@ -2974,9 +2457,9 @@
2974 2457 float: right;
2975 2458 }
2976 2459
2977 2460 .frm_pro_tip:hover .frm-tip-cta {
2978 - color: var(--primary-500);
2461 + color: var(--primary-color);
2979 2462 }
2980 2463
2981 2464 /*Switch form dropdown*/
2982 2465 h1 .fa-caret-down {
@@ -2991,23 +2474,16 @@
2991 2474 vertical-align: middle;
2992 2475 }
2993 2476
2994 2477 .caret,
2995 -.wp-admin .frm_wrap select,
2996 -.frm_wrap .frm_form_builder select,
2997 2478 .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;
2479 + 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%;
2480 + background-size: 16px 16px;
3001 2481 }
3002 2482
3003 -.caret {
3004 - padding-right: var(--gap-xs) !important;
3005 -}
3006 -
3007 2483 .frm-btn-group .caret {
3008 2484 float: right;
3009 - margin-top: calc( var(--text-md) / 2 );
2485 + margin-top: 6px;
3010 2486 }
3011 2487
3012 2488 .dropdown {
3013 2489 position: relative;
@@ -3016,12 +2492,12 @@
3016 2492 .dropdown-toggle:focus {
3017 2493 outline: 0;
3018 2494 }
3019 2495
3020 -.frm_wrap .ui-autocomplete,
3021 -#frm_adv_info.frm-dropdown-menu,
3022 2496 .frm-dropdown-menu {
3023 - /* Copied from .dropdown-menu rules from Bootstrap */
2497 + max-height: 200px;
2498 + overflow: auto;
2499 + overflow-x: hidden;
3024 2500 position: absolute;
3025 2501 top: 100%;
3026 2502 left: 0;
3027 2503 z-index: 1000;
@@ -3026,27 +2502,21 @@
3026 2502 left: 0;
3027 2503 z-index: 1000;
3028 2504 display: none;
3029 2505 float: left;
3030 - padding-left: 4px;
3031 - padding-right: 4px;
3032 - margin: var(--gap-xs) 0 0;
3033 2506 text-align: left;
2507 + min-width: 160px;
2508 + width: auto;
2509 + padding: 5px 0;
2510 + margin: 2px 0 0;
3034 2511 list-style: none;
3035 - background: none;
3036 - background-color: #fff;
2512 + font-size: 12px;
2513 + background-color: #ffffff;
2514 + border: 1px solid rgba(0, 0, 0, 0.15);
2515 + border-radius: 4px;
2516 + -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
2517 + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
3037 2518 background-clip: padding-box;
3038 - border: 1px solid var(--grey-100);
3039 - border-radius: 0.25rem;
3040 - box-shadow: var(--box-shadow-lg);
3041 -
3042 - /* Custom rules */
3043 - max-height: 200px;
3044 - overflow-y: auto;
3045 - overflow-x: hidden;
3046 - font-size: var(--text-md);
3047 - width: auto;
3048 - min-width: 160px;
3049 2519 }
3050 2520
3051 2521 .frm6 .frm-dropdown-menu {
3052 2522 min-width: 100px;
@@ -3052,35 +2522,25 @@
3052 2522 min-width: 100px;
3053 2523 max-width: 99%;
3054 2524 }
3055 2525
2526 +#frm_bs_dropdown > a {
2527 + font-size: 1em;
2528 +}
2529 +
3056 2530 #frm_bs_dropdown .frm-dropdown-menu {
3057 2531 max-width: 400px;
3058 2532 }
3059 2533
3060 -.field_type_list .frm-dropdown-menu {
3061 - min-width: 150px !important;
2534 +.preview .frm-dropdown-menu {
2535 + min-width: 60px;
3062 2536 }
3063 2537
3064 -#frm_field_group_controls .frm-dropdown-menu,
3065 -.frm-field-action-icons .frm-dropdown-menu {
3066 - min-width: 180px !important;
2538 +.field_type_list .frm-dropdown-menu {
2539 + min-width: 150px;
3067 2540 }
3068 2541
3069 -.frm-field-action-icons .frm-dropdown-toggle svg {
3070 - color: #9EA9B8;
3071 -}
3072 -
3073 -.multiselect-container.frm-dropdown-menu,
3074 -#search-submit .frm-dropdown-menu {
3075 - min-width: 200px !important;
3076 -}
3077 -
3078 -.preview .frm-dropdown-menu {
3079 - min-width: 230px !important;
3080 -}
3081 -
3082 -.frm-dropdown-menu.dropdown-menu-right {
2542 +.frm-dropdown-menu.pull-right {
3083 2543 right: 0;
3084 2544 left: auto;
3085 2545 }
3086 2546
@@ -3090,37 +2550,29 @@
3090 2550 overflow: hidden;
3091 2551 background-color: #e5e5e5;
3092 2552 }
3093 2553
3094 -.frm-dropdown-menu > .dropdown-item {
2554 +.frm-dropdown-menu > li {
3095 2555 margin: 0;
3096 2556 }
3097 2557
3098 -.frm-select-list-item,
3099 -.frm_wrap .ui-autocomplete li > div,
3100 -.multiselect-container button.multiselect-option,
3101 -.frm-dropdown-menu > .dropdown-item > a,
2558 +.frm-dropdown-menu > li > a,
3102 2559 .frm-dropdown-menu .frm_dropdown_li {
3103 2560 clear: both;
3104 2561 font-weight: normal;
3105 2562 white-space: nowrap;
3106 2563 text-decoration: none;
3107 - border-radius: var(--small-radius);
3108 2564 }
3109 2565
3110 -.frm-dropdown-menu > .active > a,
3111 -.frm-dropdown-menu > .active > a:hover,
3112 -.frm-dropdown-menu > .active > a:focus {
2566 +.frm-dropdown-menu > .active > a, .frm-dropdown-menu > .active > a:hover, .frm-dropdown-menu > .active > a:focus {
3113 2567 text-decoration: none;
3114 2568 outline: 0;
3115 2569 }
3116 2570
3117 -.frm-select-list-item.disabled,
3118 2571 .frm-dropdown-menu > .disabled > a, .frm-dropdown-menu > .disabled > a:hover, .frm-dropdown-menu > .disabled > a:focus {
3119 2572 color: #999999;
3120 2573 }
3121 2574
3122 -.frm-select-list-item.disabled:hover,
3123 2575 .frm-dropdown-menu > .disabled > a:hover,
3124 2576 .frm-dropdown-menu > .disabled > a:focus {
3125 2577 text-decoration: none;
3126 2578 background-color: transparent;
@@ -3137,11 +2589,12 @@
3137 2589 }
3138 2590
3139 2591 .dropdown-header {
3140 2592 display: block;
3141 - padding: 3px 10px;
3142 - font-size: var(--text-xs);
3143 - color: var(--grey-400);
2593 + padding: 3px 20px;
2594 + font-size: 12px;
2595 + line-height: 1.428571429;
2596 + color: #999999;
3144 2597 }
3145 2598
3146 2599 .dropdown-backdrop {
3147 2600 position: fixed;
@@ -3151,9 +2604,8 @@
3151 2604 top: 0;
3152 2605 z-index: 990;
3153 2606 }
3154 2607
3155 -.dropdown-menu-right > .frm-dropdown-menu,
3156 2608 .pull-right > .frm-dropdown-menu {
3157 2609 right: 0;
3158 2610 left: auto;
3159 2611 }
@@ -3173,13 +2625,13 @@
3173 2625 .btn {
3174 2626 border: 1px solid #ddd;
3175 2627 background: #fff;
3176 2628 height: 28px;
3177 - line-height: var(--leading);
2629 + line-height: 1.5;
3178 2630 }
3179 2631
3180 2632 a.frm_option_icon:before {
3181 - color: var(--primary-500);
2633 + color: var(--primary-color);
3182 2634 font-size: 22px;
3183 2635 width: 22px;
3184 2636 height: 22px;
3185 2637 }
@@ -3185,9 +2637,9 @@
3185 2637 }
3186 2638
3187 2639 a.frm_option_icon:focus::before,
3188 2640 a.frm_option_icon:hover::before {
3189 - color: var(--primary-700);
2641 + color: var(--primary-hover);
3190 2642 }
3191 2643
3192 2644 .frm_top_left .frm-dropdown-toggle {
3193 2645 color: #999;
@@ -3201,17 +2653,17 @@
3201 2653 text-decoration: none;
3202 2654 }
3203 2655
3204 2656 .frm-card .frm-dropdown-toggle {
3205 - border: 1px solid var(--grey-300);
2657 + border: 1px solid var(--grey-border);
3206 2658 border-radius: var(--small-radius);
3207 2659 font-size: 13px;
3208 - color: var(--grey-700);
2660 + color: var(--dark-grey);
3209 2661 padding: 7px 20px;
3210 2662 }
3211 2663
3212 2664 .frm_actions_dropdown .frm-dropdown-menu {
3213 - font-size: var(--text-sm);
2665 + font-size: 14px;
3214 2666 color: #5F6C72;
3215 2667 }
3216 2668
3217 2669 .frm-dropdown-menu .frm_icon_font {
@@ -3223,21 +2675,20 @@
3223 2675 /* BS Multiselect */
3224 2676 .multiselect-container.frm-dropdown-menu {
3225 2677 top: auto;
3226 2678 left: auto;
3227 - font-size: var(--text-sm);
3228 - padding: 4px;
2679 + font-size: 14px;
2680 + padding-top: 3px;
3229 2681 margin-bottom: 3px;
3230 2682 }
3231 2683
3232 2684 .frm-right-panel .accordion-section-content {
3233 2685 background: transparent;
3234 - padding: 0;
3235 - overflow: initial;
2686 + padding-top: 0
3236 2687 }
3237 2688
3238 -.frm-right-panel .accordion-section-content > .inside {
3239 - padding: 0 0 var(--gap-xs);
2689 +.frm-right-panel .accordion-section-content > .inside {
2690 + padding: 0;
3240 2691 }
3241 2692
3242 2693 .frm-right-panel .accordion-section-content .inside a {
3243 2694 font-size: inherit;
@@ -3244,10 +2695,10 @@
3244 2695 }
3245 2696
3246 2697 #post-body-content + .frm-right-panel h3.accordion-section-title {
3247 2698 padding: 7px 10px 8px 14px;
3248 - font-size: var(--text-md);
3249 - color: var(--grey-700);
2699 + font-size: 16px;
2700 + color: var(--dark-grey);
3250 2701 }
3251 2702
3252 2703 .frm-right-panel .control-section.open h3 {
3253 2704 border-bottom: none;
@@ -3256,22 +2707,22 @@
3256 2707 .js .frm-right-panel .control-section.open .accordion-section-title,
3257 2708 .js .frm-right-panel .control-section .accordion-section-title:focus,
3258 2709 .js .frm-right-panel .control-section .accordion-section-title:hover {
3259 2710 background: transparent;
3260 - color: var(--grey-900);
2711 + color: var(--dark-grey);
3261 2712 }
3262 2713
3263 2714 .js .frm-right-panel .control-section .accordion-section-title:hover:before {
3264 - color: var(--grey-700);
2715 + color: var(--dark-grey);
3265 2716 }
3266 2717
3267 2718 .frm-with-line,
3268 2719 .accordion-section-content h4 {
3269 - font-size: var(--text-md);
2720 + font-size: 16px;
3270 2721 font-weight: 400;
3271 2722 margin: 20px -20px 10px;
3272 2723 padding: 0 20px;
3273 - color: var(--grey-700);
2724 + color: var(--dark-grey);
3274 2725 position: relative;
3275 2726 border: none !important;
3276 2727 }
3277 2728
@@ -3301,9 +2752,9 @@
3301 2752 .accordion-section-content h4:before {
3302 2753 content: '';
3303 2754 display: block;
3304 2755 position: absolute;
3305 - border-bottom: 1px solid var(--grey-300);
2756 + border-bottom: 1px solid var(--grey-border);
3306 2757 left: 0;
3307 2758 width: 100%;
3308 2759 top: 50%;
3309 2760 }
@@ -3321,9 +2772,8 @@
3321 2772 font-family: "s11-fp" !important;
3322 2773 font-size: 18px;
3323 2774 font-variant: normal;
3324 2775 text-rendering: auto;
3325 - vertical-align: text-top;
3326 2776 }
3327 2777
3328 2778 #frm_new_form_modal .accordion-section.open .accordion-section-title:after {
3329 2779 transform: rotate(90deg);
@@ -3329,9 +2779,9 @@
3329 2779 transform: rotate(90deg);
3330 2780 }
3331 2781
3332 2782 .frm-right-panel .accordion-section-title:after {
3333 - top: calc(50% - 10px) !important;
2783 + right: 20px;
3334 2784 }
3335 2785
3336 2786 .frm-right-panel .open .accordion-section-title:after {
3337 2787 content: "\e62a" !important;
@@ -3340,9 +2790,9 @@
3340 2790 .frm-right-panel .accordion-section-title:before {
3341 2791 content: "\f1de" !important;
3342 2792 color: var(--grey);
3343 2793 font-size: 17px !important;
3344 - margin: 0 10px 0 0;
2794 + margin: 0 10px;
3345 2795 }
3346 2796
3347 2797 .form-title-style .accordion-section-title:before,
3348 2798 .section-fields-style .accordion-section-title:before {
@@ -3400,21 +2850,16 @@
3400 2850 .progress-bars-style .accordion-section-title:before{
3401 2851 content: "\e939" !important;
3402 2852 }
3403 2853
3404 -#frm_view_editor_left.frm-right-panel .accordion-section-title,
3405 2854 .frm-right-panel h3.accordion-section-title {
3406 2855 padding: 15px 20px;
3407 2856 background: var(--sidebar-color);
3408 - line-height: var(--leading);
3409 - color: var(--grey-700);
3410 - font-size: var(--text-lg);
3411 - font-weight: 400;
2857 + line-height: 1;
3412 2858 }
3413 2859
3414 -.control-section .accordion-section-title:after, /** Form template list */
3415 -.customize-pane-child .accordion-section-title:after {
3416 - top: 15px;
2860 +.control-section .accordion-section-title:after, .customize-pane-child .accordion-section-title:after {
2861 + top: 19px;
3417 2862 }
3418 2863
3419 2864 .accordion-container .frm-dropdown-menu {
3420 2865 min-width: 40px;
@@ -3419,39 +2864,58 @@
3419 2864 .accordion-container .frm-dropdown-menu {
3420 2865 min-width: 40px;
3421 2866 }
3422 2867
3423 -.frm-btn-group .multiselect.dropdown-toggle {
3424 - box-sizing: border-box;
3425 - min-height: unset;
3426 -}
3427 -
3428 2868 .accordion-container .frm-dropdown-menu:before,
3429 2869 .accordion-container .multiselect.dropdown-toggle:before {
3430 2870 font-family: "s11-fp" !important;
3431 2871 }
3432 2872
2873 +.multiselect-container.frm-dropdown-menu input[type=radio] {
2874 + display: none;
2875 +}
2876 +
3433 2877 .multiselect-container {
3434 2878 position: absolute;
3435 2879 list-style-type: none;
3436 2880 margin: 0;
2881 + padding: 0
2882 +}
2883 +
2884 +.multiselect-container .input-group {
2885 + margin: 5px
2886 +}
2887 +
2888 +.multiselect-container > li {
3437 2889 padding: 0;
3438 - width: 100%;
3439 - max-width: 250px;
2890 + margin: 0;
3440 2891 }
3441 2892
3442 -.multiselect-container button.multiselect-option {
3443 - width: 100%;
3444 - text-align: left;
3445 - border: none;
3446 - margin-bottom: 4px;
2893 +.multiselect-container > li > a.multiselect-all label {
2894 + font-weight: 700
3447 2895 }
3448 2896
3449 -.multiselect-container button.multiselect-option label {
3450 - margin-left: 5px;
2897 +.multiselect-container > li > label.multiselect-group {
2898 + margin: 0;
2899 + padding: 3px 20px;
2900 + height: 100%;
2901 + font-weight: 700
3451 2902 }
3452 2903
3453 -.accordion-container .multiselect-container label {
2904 +.frm-dropdown-menu.multiselect-container > li > a {
2905 + padding: 0
2906 +}
2907 +
2908 +.multiselect-container > li > a > label {
2909 + margin: 0;
2910 + padding: 3px 25px;
2911 + height: 100%;
2912 + cursor: pointer;
2913 + font-weight: 400;
2914 + display: block;
2915 +}
2916 +
2917 +.accordion-container .multiselect-container > li > a > label {
3454 2918 padding: 3px 19px 3px 7px;
3455 2919 }
3456 2920
3457 2921 .frm-btn-group.btn-group > .btn-group:nth-child(2) > .multiselect.btn {
@@ -3458,19 +2922,24 @@
3458 2922 border-top-left-radius: 4px;
3459 2923 border-bottom-left-radius: 4px
3460 2924 }
3461 2925
2926 +.form-inline .multiselect-container label.checkbox,
2927 +.form-inline .multiselect-container label.radio {
2928 + padding: 3px 20px;
2929 +}
2930 +
2931 +.form-inline .multiselect-container li a label.checkbox input[type=checkbox],
2932 +.form-inline .multiselect-container li a label.radio input[type=radio] {
2933 + margin-left: -20px;
2934 + margin-right: 0;
2935 +}
2936 +
3462 2937 .frm-btn-group.btn-group, .frm-btn-group.btn-group-vertical {
3463 2938 display: block;
2939 + vertical-align: middle;
3464 2940 }
3465 2941
3466 -.multiselect-option label {
3467 - max-width: calc(100% - 22px);
3468 - text-overflow: ellipsis;
3469 - overflow: hidden;
3470 - white-space: nowrap;
3471 -}
3472 -
3473 2942 .frm_scale {
3474 2943 text-align: center;
3475 2944 float: left;
3476 2945 margin-right: 10px;
@@ -3492,13 +2961,8 @@
3492 2961 width: 100%;
3493 2962 height: auto;
3494 2963 }
3495 2964
3496 -.frm_form_builder .frm_time_wrap .frm_time_sep {
3497 - vertical-align: sub;
3498 - vertical-align: -webkit-baseline-middle;
3499 -}
3500 -
3501 2965 .frm_form_builder input[type=range]::-webkit-slider-runnable-track {
3502 2966 background-color: var(--blue-border);
3503 2967 }
3504 2968
@@ -3525,9 +2989,9 @@
3525 2989 .frm-fake-field {
3526 2990 display: block;
3527 2991 height: 25px;
3528 2992 background-color: var(--light-blue);
3529 - border: 1px solid var(--grey-300);
2993 + border: 1px solid var(--grey-border);
3530 2994 margin: 10px 0;
3531 2995 border-radius: var(--small-radius);
3532 2996 }
3533 2997
@@ -3533,15 +2997,15 @@
3533 2997
3534 2998 .frm-embed-message {
3535 2999 position: absolute;
3536 3000 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);
3001 + border: 1px solid var(--grey-border);
3002 + color: var(--dark-grey);
3003 + padding: 37px 0;
3004 + font-size: 18px;
3541 3005 max-width: 200px;
3542 3006 min-width: 50%;
3543 - margin: 0 var(--gap-md);
3007 + margin: 0 25px;
3544 3008 overflow: hidden;
3545 3009 text-overflow: ellipsis;
3546 3010 }
3547 3011
@@ -3548,9 +3012,9 @@
3548 3012 .frm-summary-message {
3549 3013 top: 50%;
3550 3014 left: 50%;
3551 3015 padding: 15px 0;
3552 - font-size: var(--text-md);
3016 + font-size: 16px;
3553 3017 transform: translate(-50%, -50%);
3554 3018 }
3555 3019
3556 3020 .frm-summary-learn-more {
@@ -3559,9 +3023,8 @@
3559 3023
3560 3024 .frm-single-settings .frm-embed-message {
3561 3025 width: 100%;
3562 3026 position: static;
3563 - border-radius: var(--small-radius);
3564 3027 }
3565 3028
3566 3029 #new_fields input[type=text],
3567 3030 #new_fields input[type=number],
@@ -3598,8 +3061,19 @@
3598 3061 width: 16px;
3599 3062 padding: 0;
3600 3063 }
3601 3064
3065 +.frm-star-group:not(.frm-star-hovered) input[type=radio]:checked + label:before,
3066 +.frm-star-group input + label:hover:before,
3067 +.frm-star-group:hover input + label:hover:before,
3068 +.frm-star-group .star-rating-on:before,
3069 +.frm-star-group .star-rating-hover:before,
3070 +.frm-star-group input[type=radio]:checked + label:before,
3071 +.frm-star-group input + label:before,
3072 +.frm-star-group .star-rating:before {
3073 + color: var( --blue-border);
3074 +}
3075 +
3602 3076 .frm_wrap .frm-number-range + .frm_last input,
3603 3077 .frm_wrap .frm-number-range input {
3604 3078 text-align: center;
3605 3079 font-weight: 600;
@@ -3606,9 +3080,9 @@
3606 3080 }
3607 3081
3608 3082 .frm_wrap .frm-number-range input[type=number],
3609 3083 .frm_wrap .frm-number-range input[type=text] {
3610 - color: var(--primary-700);
3084 + color: var(--primary-hover);
3611 3085 }
3612 3086
3613 3087 .frm-range-min {
3614 3088 position: relative;
@@ -3618,25 +3092,24 @@
3618 3092 content: '';
3619 3093 height: 3px;
3620 3094 width: 10px;
3621 3095 border-radius: 30%;
3622 - background: var(--primary-700);
3096 + background: var(--primary-hover);
3623 3097 position: absolute;
3624 3098 top: 17px;
3625 3099 right: -28%;
3626 3100 }
3627 3101
3628 -.frm_grid_container > p,
3629 3102 .frm_grid_container > p.frm_form_field,
3630 3103 .frm_grid_container > div.frm_form_field,
3631 3104 #new_fields .frm_grid_container > p {
3632 - margin-top: 8px;
3633 - margin-bottom: 8px;
3105 + margin-top: 7px;
3106 + margin-bottom: 7px;
3634 3107 margin-right: 0;
3635 3108 }
3636 3109
3637 3110 #new_fields div.frm_grid_container > .frm_primary_label {
3638 - margin-top: 8px;
3111 + margin-top: 7px;
3639 3112 }
3640 3113
3641 3114 #new_fields .frm_primary_label + p,
3642 3115 #new_fields .frm_primary_label + .frm6 + .frm6,
@@ -3670,9 +3143,9 @@
3670 3143 }
3671 3144
3672 3145 .frm_form_builder .frm_radio label,
3673 3146 .frm_form_builder .frm_checkbox label {
3674 - font-size: var(--text-sm);
3147 + font-size: 14px;
3675 3148 }
3676 3149
3677 3150 /* Start copied front-end CSS */
3678 3151 .horizontal_radio .frm_radio,
@@ -3710,64 +3183,22 @@
3710 3183
3711 3184 .frm_wrap .with_frm_style .frm_checkbox input[type=checkbox],
3712 3185 .frm_wrap .with_frm_style .frm_radio input[type=radio],
3713 3186 .frm_wrap input[type=checkbox],
3714 -.frm-white-body input[type=checkbox],
3715 3187 .field-group input[type=checkbox],
3716 3188 .frm_scale input[type=radio],
3717 3189 .frm_radio input[type=radio],
3718 3190 .frm_checkbox input[type=checkbox] {
3719 - border: 1px solid var(--grey-300);
3191 + border: 1px solid var(--grey-border);
3720 3192 box-shadow: none;
3721 3193 -webkit-appearance: none;
3722 3194 }
3723 3195
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 3196 .frm_radio input[type="radio"],
3753 3197 .frm_checkbox input[type="checkbox"] {
3754 3198 margin-right: 5px;
3755 3199 }
3756 3200
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 3201 .frm_inner_field_container {
3771 3202 margin-bottom: 10px;
3772 3203 }
3773 3204
@@ -3793,22 +3224,8 @@
3793 3224 li.ui-state-default.selected > .frm_inner_field_container > label {
3794 3225 max-width: calc(100% - 100px);
3795 3226 }
3796 3227
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 3228 .frm_form_settings #op-popup, /* 1Password */
3812 3229 .frm_form_settings com-1password-op-button,
3813 3230 .frm_conf_below .frm_conf_field_container .frm_primary_label,
3814 3231 .frm_conf_inline .frm_inner_field_container .frm-show-click a,
@@ -3943,15 +3360,15 @@
3943 3360 animation: spin 2s linear infinite;
3944 3361 }
3945 3362
3946 3363 .frm-wait:before {
3947 - border-bottom-color: var(--primary-700);
3948 - border-right-color: var(--primary-700);
3364 + border-bottom-color: var(--primary-hover);
3365 + border-right-color: var(--primary-hover);
3949 3366 }
3950 3367
3951 3368 .frm_loading_button.frm-button-secondary:before {
3952 - border-bottom-color: var(--primary-500);
3953 - border-right-color: var(--primary-500);
3369 + border-bottom-color: var(--primary-color);
3370 + border-right-color: var(--primary-color);
3954 3371 }
3955 3372
3956 3373 input[type=submit]:focus {
3957 3374 outline: none !important;
@@ -3975,9 +3392,9 @@
3975 3392 #editorcontainer #dyncontent {
3976 3393 margin: 0;
3977 3394 width: 100%;
3978 3395 padding: 6px;
3979 - line-height: var(--leading);
3396 + line-height: 1.5;
3980 3397 border: 0 none;
3981 3398 outline: none;
3982 3399 -moz-box-sizing: border-box;
3983 3400 -webkit-box-sizing: border-box;
@@ -4023,9 +3440,9 @@
4023 3440 font-size: 12px;
4024 3441 }
4025 3442
4026 3443 .frm_border_bottom {
4027 - border-bottom: 1px solid var(--grey-300);
3444 + border-bottom: 1px solid var(--grey-border);
4028 3445 margin-bottom: 10px;
4029 3446 padding-bottom: 10px;
4030 3447 }
4031 3448
@@ -4036,8 +3453,9 @@
4036 3453 .frm_posttax_opt_list .frm_border_bottom input {
4037 3454 margin-right: 1px;
4038 3455 }
4039 3456
3457 +.frm_logic_row,
4040 3458 .frm_add_remove div.frm_form_field {
4041 3459 padding-bottom: 5px;
4042 3460 }
4043 3461
@@ -4094,47 +3512,18 @@
4094 3512 max-width: 100%;
4095 3513 font-size: inherit;
4096 3514 }
4097 3515
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 3516 #frm-options-panel {
4118 - padding: 0 var(--gap-sm);
4119 - color: var(--grey-900);
3517 + padding: 0 15px;
3518 + color: var(--darkest-grey);
4120 3519 }
4121 3520
4122 -.frm-right-panel a.frm_add_logic_link,
4123 3521 #frm-options-panel h3 {
4124 3522 padding: 15px 0;
4125 3523 margin-top: -2px;
4126 3524 }
4127 3525
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 3526 .frm_field_key {
4138 3527 background-color: #F7F7F7;
4139 3528 }
4140 3529
@@ -4168,12 +3557,8 @@
4168 3557 .frm-alt-table tr:nth-child(even) {
4169 3558 background-color: var(--sidebar-color);
4170 3559 }
4171 3560
4172 -.frm-alt-table h3 {
4173 - margin-bottom: 0;
4174 -}
4175 -
4176 3561 .form-field .frm_cb_button {
4177 3562 height: 22px;
4178 3563 line-height: 20px;
4179 3564 margin-bottom: 10px;
@@ -4278,9 +3663,9 @@
4278 3663 li.sortable-placeholder {
4279 3664 border: none;
4280 3665 margin: 0;
4281 3666 visibility: visible !important;
4282 - box-shadow: 2px -10px 0 2px var(--primary-500);
3667 + box-shadow: 2px -10px 0 1px var(--primary-color);
4283 3668 }
4284 3669
4285 3670 #frm_form_editor_container > ul > .frm_single_option.ui-sortable-placeholder,
4286 3671 #frm_form_editor_container > ul > li.sortable-placeholder {
@@ -4291,8 +3676,9 @@
4291 3676 #frm_form_editor_container > ul > li > ul {
4292 3677 position: relative;
4293 3678 }
4294 3679
3680 +#frm_form_editor_container > ul > li > ul > .frm_single_option.ui-sortable-placeholder,
4295 3681 #frm_form_editor_container > ul > li > ul > li.sortable-placeholder,
4296 3682 #frm_form_editor_container ul.start_divider > li > ul > li.sortable-placeholder {
4297 3683 position: absolute;
4298 3684 top: 20px;
@@ -4299,29 +3685,38 @@
4299 3685 bottom: 0;
4300 3686 }
4301 3687
4302 3688 .edit_field_type_divider + li.sortable-placeholder {
4303 - box-shadow: 2px 5px 0 2px var(--primary-500);
3689 + box-shadow: 2px 5px 0 1px var(--primary-color);
4304 3690 }
4305 3691
4306 3692 .start_divider li.sortable-placeholder {
4307 - box-shadow: 2px -5px 0 2px var(--primary-500);
3693 + box-shadow: 2px -5px 0 1px var(--primary-color);
4308 3694 }
4309 3695
4310 -.frm-is-collapsed + .sortable-placeholder {
4311 - box-shadow: 2px 15px 0 2px var(--primary-500);
3696 +.frm_single_option.ui-sortable-placeholder {
3697 + box-shadow: 20px -3px 0 1px var(--primary-color);
4312 3698 }
4313 3699
4314 -.frm_single_option.ui-sortable-placeholder {
4315 - box-shadow: 0 0 1px 1px var(--primary-500);
3700 +.frm-is-collapsed + .sortable-placeholder {
3701 + box-shadow: 2px 15px 0 1px var(--primary-color);
4316 3702 }
4317 3703
4318 3704 .frm_sorting > li.edit_field_type_end_divider:first-child,
3705 +.frm_sorting > .frmbutton + .sortable-placeholder, /* hide for first field */
3706 +.no-drop-placeholder,
4319 3707 .frm-show-click,
4320 3708 li.ui-state-default.edit_field_type_divider .frm-show-click {
4321 3709 display: none;
4322 3710 }
4323 3711
3712 +.frm_form_field.ui-sortable-helper {
3713 + height: 30px !important;
3714 + background-color: #fff !important;
3715 + overflow: hidden !important;
3716 + box-sizing: border-box;
3717 +}
3718 +
4324 3719 .frm_form_field.ui-sortable-helper .frm-field-action-icons,
4325 3720 .frm_form_field.ui-sortable-helper .frm_form_fields,
4326 3721 .frm_form_field.ui-sortable-helper .frm_description,
4327 3722 .frm_form_field.ui-sortable-helper .description {
@@ -4423,10 +3818,10 @@
4423 3818 /* Image options for Radio and Checkbox */
4424 3819
4425 3820 .frm_image_options .frm_image_option_container {
4426 3821 --field-border-width: 1px;
4427 - --border-color: var(--grey-300);
4428 - --border-color-active: var(--primary-500);
3822 + --border-color: var(--grey-border);
3823 + --border-color-active: var(--primary-color);
4429 3824 --border-radius: var(--small-radius);
4430 3825 }
4431 3826
4432 3827 .frm_image_option_container svg {
@@ -4480,10 +3875,10 @@
4480 3875 height: 75px;
4481 3876 object-fit: cover;
4482 3877 }
4483 3878
4484 -.frm_list_entry_page img {
4485 - max-width: 100%;
3879 +.frm_list_entry_page .frm_file_link img {
3880 + max-width: 75px;
4486 3881 height: auto;
4487 3882 }
4488 3883
4489 3884 .frm_image_option_container .frm_empty_url {
@@ -4527,13 +3922,13 @@
4527 3922 margin-top: 17px;
4528 3923 }
4529 3924
4530 3925 .frm_image_data {
4531 - margin-left: var(--gap-xs);
3926 + margin-left: 10px;
4532 3927 display: flex;
4533 3928 flex-direction: column;
4534 - font-size: var(--text-sm);
4535 - justify-content: space-around;
3929 + font-size: 14px;
3930 + line-height: 17px;
4536 3931 }
4537 3932
4538 3933 .frm_image_styling_frame {
4539 3934 display: flex;
@@ -4557,9 +3952,10 @@
4557 3952 max-width: 54px;
4558 3953 }
4559 3954
4560 3955 .frm_image_preview_title{
4561 - color: var(--grey-500);
3956 + margin-top: 6px;
3957 + color: rgba(40, 47, 54, 0.65);
4562 3958 overflow: hidden;
4563 3959 white-space: nowrap;
4564 3960 text-overflow: ellipsis;
4565 3961 }
@@ -4565,9 +3961,9 @@
4565 3961 }
4566 3962
4567 3963 .frm_wrap .frm_choose_image_box {
4568 3964 cursor: pointer;
4569 - color: var(--grey-700);
3965 + color: var(--dark-grey);
4570 3966 background-color: #F2F2F2;
4571 3967 margin-left: 24px;
4572 3968 text-align: center;
4573 3969 width: 100%;
@@ -4576,11 +3972,13 @@
4576 3972 .frm_wrap .frm_choose_image_box:hover {
4577 3973 background: #fff;
4578 3974 }
4579 3975
3976 +a.frm_remove_image_option .frmsvg,
4580 3977 a.frm_remove_image_option,
4581 3978 .frm_remove_image_option {
4582 - color: var(--grey-400);
3979 + margin-top: 9px;
3980 + color: rgba(40, 47, 54, 0.4);
4583 3981 cursor: pointer;
4584 3982 }
4585 3983
4586 3984 a.frm_remove_image_option:hover .frmsvg,
@@ -4590,10 +3988,17 @@
4590 3988 }
4591 3989
4592 3990 /* Form settings */
4593 3991
3992 +#form_settings_page label,
3993 +.frm_form_builder label {
3994 + font-weight: normal;
3995 + font-size: 15px;
3996 + color: var(--dark-grey);
3997 +}
3998 +
4594 3999 .frm-form-setting-tabs {
4595 - margin-top: var(--gap-sm) !important;
4000 + margin-top: 20px !important;
4596 4001 }
4597 4002
4598 4003 .frm-right-panel > .postbox {
4599 4004 background-color: transparent;
@@ -4604,44 +4009,40 @@
4604 4009
4605 4010 .frm-right-panel .postbox.frm_with_icons .inside,
4606 4011 .frm-right-panel .postbox .inside,
4607 4012 .frm-right-panel .inside {
4608 - font-size: var(--text-md);
4013 + font-size: 16px;
4609 4014 padding: 15px 20px 20px;
4610 - color: var(--grey-700);
4015 + color: var(--dark-grey);
4611 4016 }
4612 4017
4613 4018 .frm-right-panel .misc-pub-section {
4614 - padding: var(--gap-xs) 0;
4019 + padding: 10px 0;
4020 + line-height: 1.4em;
4615 4021 position: relative;
4616 4022 }
4617 4023
4618 4024 .frm-right-panel .inside a,
4619 4025 .frm-form-setting-tabs a {
4620 - font-size: var(--text-md);
4621 - color: var(--grey-700);
4622 - padding: var(--gap-sm);
4026 + font-size: 16px;
4027 + color: var(--dark-grey);
4028 + padding: 15px 15px 15px 20px;
4623 4029 display: block;
4624 4030 }
4625 4031
4626 -.frm-form-setting-tabs a {
4627 - color: var(--grey-900);
4628 - padding: var(--gap-sm) var(--gap-md);
4629 -}
4630 -
4631 4032 .frm-right-panel .inside a {
4632 4033 padding: 0;
4633 - color: var(--primary-500);
4034 + color: var(--primary-color);
4634 4035 display: inline-block;
4635 4036 }
4636 4037
4637 4038 .frm-right-panel .inside a:hover {
4638 - color: var(--primary-700);
4039 + color: var(--primary-hover);
4639 4040 }
4640 4041
4641 4042 .frm-form-setting-tabs a:hover {
4642 4043 background: var(--sidebar-hover);
4643 - color: var(--grey-900);
4044 + color: var(--dark-grey);
4644 4045 }
4645 4046
4646 4047 .frm-right-panel .inside i,
4647 4048 .frm-right-panel .inside .frmsvg,
@@ -4650,20 +4051,16 @@
4650 4051 margin: 0 5px;
4651 4052 display: inline-block;
4652 4053 width: 20px;
4653 4054 height: 20px;
4654 - color: var(--grey-500);
4055 + color: var(--grey);
4655 4056 }
4656 4057
4657 -.frm-form-setting-tabs a .frmsvg {
4658 - margin: 0;
4659 -}
4660 -
4661 4058 .frm-right-panel .inside a:hover i,
4662 4059 .frm-right-panel .inside a:hover .frmsvg,
4663 4060 .frm-form-setting-tabs a:hover .frmsvg,
4664 4061 .frm-form-setting-tabs a:hover span {
4665 - color: var(--grey-700);
4062 + color: var(--dark-grey);
4666 4063 }
4667 4064
4668 4065 .frm_settings_form .tabs-panel {
4669 4066 padding: 0 25px;
@@ -4677,9 +4074,9 @@
4677 4074
4678 4075 #frm_adv_info .tabs-panel {
4679 4076 min-height: 0 !important;
4680 4077 overflow-x: hidden;
4681 - padding: 0;
4078 + padding: 0 20px;
4682 4079 border: none;
4683 4080 background: transparent;
4684 4081 }
4685 4082
@@ -4688,130 +4085,48 @@
4688 4085 }
4689 4086
4690 4087 .frm_posttax_opt_list,
4691 4088 .frm_submit_logic_rows {
4692 - border: 1px solid var(--grey-300);
4693 - padding: var(--gap-md);
4089 + border: 1px solid var(--grey-border);
4090 + padding: 25px;
4694 4091 border-radius: var(--small-radius);
4695 - margin: 5px 0 5px var(--gap-md);
4092 + margin: 5px 0 5px 25px;
4696 4093 }
4697 4094
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 {
4095 +/* Admin toggle */
4096 +.frm_toggle_off,
4097 +.frm_toggle_on {
4098 + display: none;
4099 + color: #fff;
4100 + z-index: 999;
4704 4101 position: absolute;
4705 - margin-left: calc( ( 100% - 35px ) * -1 );
4706 - margin-top: 1px;
4707 - width: calc( 100% - 36px );
4102 + font-size: 10px;
4103 + line-height: 20px;
4104 + left: 6px;
4708 4105 }
4709 4106
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;
4107 +.frm_toggle_off {
4787 4108 display: inline;
4788 - vertical-align: middle;
4789 - font-weight: normal;
4109 + left: auto;
4110 + right: 5px;
4111 + color: var(--dark-grey);
4790 4112 }
4791 4113
4792 -.frm_on_label,
4793 -.frm_off_label {
4794 - color: #444444;
4795 -}
4796 -
4797 4114 .frm_toggle {
4798 4115 position: relative;
4799 4116 display: inline-block;
4800 - width: 40px;
4801 - height: var(--h-xs);
4117 + width: 45px;
4118 + height: 20px;
4802 4119 vertical-align: middle;
4120 + margin: 2px;
4803 4121 }
4804 4122
4805 -.frm_toggle_block {
4806 - display: inline-flex;
4807 - gap: var(--gap-sm);
4808 - align-items: center;
4123 +label > span.frm_toggle {
4124 + margin-right: 15px;
4809 4125 }
4810 4126
4811 -.frm_toggle input, /* Reverse compatibility */
4812 -.frm_toggle_block input {
4813 - display:none !important;
4127 +.frm_toggle input {
4128 + display: none !important;
4814 4129 }
4815 4130
4816 4131 .frm_toggle_slider {
4817 4132 position: absolute;
@@ -4819,44 +4134,26 @@
4819 4134 top: 0;
4820 4135 left: 0;
4821 4136 right: 0;
4822 4137 bottom: 0;
4823 - background-color: var(--grey-border);
4824 4138 transition: .4s;
4825 4139 border-radius: 30px;
4140 + background-color: #fff;
4141 + box-shadow: 0 0 0 2px var(--grey);
4826 4142 }
4827 4143
4828 4144 .frm_toggle_slider:before {
4829 4145 border-radius: 50%;
4830 4146 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;
4147 + content: "";
4148 + height: 16px;
4149 + width: 16px;
4150 + left: 2px;
4151 + top: 2px;
4152 + transition: .3s;
4153 + background-color: var(--grey);
4843 4154 }
4844 4155
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 4156 input[disabled] + .frm_toggle_slider {
4860 4157 pointer-events: none;
4861 4158 cursor: text;
4862 4159 opacity: .5;
@@ -4861,53 +4158,16 @@
4861 4158 cursor: text;
4862 4159 opacity: .5;
4863 4160 }
4864 4161
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 4162 .frm_toggle_long {
4902 - width: 80% !important;
4163 + width: 80%;
4903 4164 height: 28px;
4904 - display: inline-block !important;
4905 4165 }
4906 4166
4907 4167 .frm_toggle_long .frm_toggle_slider {
4908 - background: var(--primary-700);
4909 - box-shadow: 0 0 0 2px var(--primary-700);
4168 + background: var(--primary-hover);
4169 + box-shadow: 0 0 0 2px var(--primary-hover);
4910 4170 }
4911 4171
4912 4172 .frm_toggle_long .frm_toggle_off,
4913 4173 .frm_toggle_long .frm_toggle_on {
@@ -4932,11 +4192,20 @@
4932 4192 border-radius: var(--border-radius) 0 0 var(--border-radius);
4933 4193 height: 100%;
4934 4194 background-color: #fff;
4935 4195 color: var(--primary-color);
4936 - content: '' !important;
4937 4196 }
4938 4197
4198 +input:checked + .frm_toggle_slider {
4199 + background-color: var(--primary-hover);
4200 + box-shadow: 0 0 0 2px var(--primary-hover);
4201 +}
4202 +
4203 +input:checked + .frm_toggle_slider:before {
4204 + transform: translateX(25px);
4205 + background-color: #fff;
4206 +}
4207 +
4939 4208 .frm_toggle_long input:checked + .frm_toggle_slider:before {
4940 4209 transform: translateX(101%);
4941 4210 border-radius: 0 var(--border-radius) var(--border-radius) 0;
4942 4211 }
@@ -4951,9 +4220,9 @@
4951 4220
4952 4221 .frm_toggle_long .frm_toggle_on,
4953 4222 .frm_toggle_long input:checked + .frm_toggle_slider + .frm_toggle_on + .frm_toggle_off {
4954 4223 display: inline;
4955 - color: var(--primary-500);
4224 + color: var(--primary-color);
4956 4225 font-weight: normal;
4957 4226 }
4958 4227
4959 4228 .frm_toggle_long .frm_toggle_off,
@@ -4961,9 +4230,11 @@
4961 4230 color: #fff;
4962 4231 font-weight: bold;
4963 4232 }
4964 4233
4965 -/* End toggle styling */
4234 +input:focus + .frm_toggle_slider {
4235 + box-shadow: 0 0 1px #008ec2;
4236 +}
4966 4237
4967 4238 /* Global Settings */
4968 4239
4969 4240 .tabs-panel {
@@ -4981,59 +4252,21 @@
4981 4252 margin-right: 20px !important;
4982 4253 display: inline-block !important;
4983 4254 }
4984 4255
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 4256 .frm-example-icon .frmsvg,
5029 4257 .frm-example-icon i {
5030 4258 height: 20px;
5031 4259 width: 20px;
5032 4260 font-size: 20px;
5033 - color: var(--grey-700);
4261 + color: var(--dark-grey);
5034 4262 }
5035 4263
4264 +.edd_frm_license_row {
4265 + clear: both;
4266 + line-height: 2em;
4267 +}
4268 +
5036 4269 .frm_license_msg {
5037 4270 margin-top: 0;
5038 4271 }
5039 4272
@@ -5060,14 +4293,23 @@
5060 4293
5061 4294 .frm_no_items {
5062 4295 margin: 0 auto 50px;
5063 4296 text-align: center;
5064 - color: var(--grey-700);
4297 + color: var(--dark-grey);
5065 4298 max-width: 500px;
5066 4299 }
5067 4300
4301 +.frm_no_items h2 {
4302 + font-size: 25px;
4303 + margin-bottom: 30px !important;
4304 +}
4305 +
4306 +.frm_no_items p {
4307 + font-size: 14px;
4308 +}
4309 +
5068 4310 .frm-subscribe {
5069 - margin: var(--gap-lg) 0;
4311 + margin: 30px 0;
5070 4312 }
5071 4313
5072 4314 /* Inbox */
5073 4315
@@ -5077,16 +4319,16 @@
5077 4319
5078 4320 .frm_inbox_card {
5079 4321 display: grid;
5080 4322 grid-template-columns: 72px 1fr;
5081 - grid-gap: var(--gap-xs);
5082 - border-bottom: 1px solid var(--grey-300);
5083 - padding: var(--gap-md);
4323 + grid-gap: 15px;
4324 + border-bottom: 1px solid var(--grey-border);
4325 + padding: 25px;
5084 4326 }
5085 4327
5086 4328 .frm_inbox_card_icon {
5087 4329 grid-row: span 3 / span 3;
5088 - padding-top: var(--gap-xs);
4330 + padding-top: 20px;
5089 4331 text-align: center
5090 4332 }
5091 4333
5092 4334 .frm_inbox_card_icon svg {
@@ -5105,8 +4347,11 @@
5105 4347 border: none;
5106 4348 text-transform: none;
5107 4349 margin: 0;
5108 4350 padding: 0;
4351 + font-weight: 600;
4352 + color: var(--medium-grey);
4353 + font-size: 16px;
5109 4354 }
5110 4355
5111 4356 .frm_inbox_date {
5112 4357 text-align: right;
@@ -5134,8 +4379,37 @@
5134 4379 margin-left: 2px;
5135 4380 vertical-align: text-bottom;
5136 4381 }
5137 4382
4383 +/* Styles tabs */
4384 +
4385 +#frm_styling_form #frm_delete_style {
4386 + padding-right: 10px;
4387 +}
4388 +
4389 +#frm_styling_form #frm_delete_style .frmsvg {
4390 + vertical-align: -webkit-baseline-middle;
4391 +}
4392 +
4393 +.frm_pro_form .frm_form_field.frm_lite_style,
4394 +.frm_pro_form .frm_lite_style {
4395 + display: none !important;
4396 +}
4397 +
4398 +label.default-style-box input[type="checkbox"] {
4399 + vertical-align: middle;
4400 +}
4401 +
4402 +#frm_styling_form .frm_form_field input[type="checkbox"],
4403 +#frm_styling_form .frm_form_field input[type="radio"] {
4404 + vertical-align: bottom;
4405 +}
4406 +
4407 +#frm_styling_form .howto span {
4408 + float: none;
4409 + margin-top: 0;
4410 +}
4411 +
5138 4412 /* Import/Export */
5139 4413 .csv_opts #frm_csv_col_sep {
5140 4414 width: 45px;
5141 4415 }
@@ -5186,9 +4460,9 @@
5186 4460 padding: 0;
5187 4461 }
5188 4462
5189 4463 .frm-feature-banner {
5190 - background: var(--grey-700);
4464 + background: var(--dark-grey);
5191 4465 color: #fff;
5192 4466 border-radius: var(--small-radius);
5193 4467 padding: 20px;
5194 4468 margin: 10px 0;
@@ -5194,9 +4468,9 @@
5194 4468 margin: 10px 0;
5195 4469 }
5196 4470
5197 4471 .frm-feature-banner p {
5198 - font-size: var(--text-sm);
4472 + font-size: 14px;
5199 4473 }
5200 4474
5201 4475 .frm-feature-banner .dismiss {
5202 4476 margin-top: -10px;
@@ -5231,31 +4505,29 @@
5231 4505 /*Form Settings Tab*/
5232 4506
5233 4507 h2.frm-h2,
5234 4508 .frm_form_settings h2 {
5235 - border-bottom: 1px solid var(--grey-300);
5236 - color: var(--grey-900);
5237 - font-weight: 400 !important;
4509 + border-bottom: 1px solid var(--grey-border);
4510 + color: var(--dark-grey);
4511 + font-size: 20px !important;
4512 + font-weight: 500 !important;
5238 4513 padding: 9px 0 5px;
5239 4514 margin: 0;
5240 4515 }
5241 4516
5242 4517 .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;
4518 +.frm_form_settings h3 {
4519 + font-size: 16px;
4520 + border-top: 1px solid var(--grey-border);
4521 + padding-top: 10px;
5249 4522 font-weight: normal;
5250 4523 text-transform: uppercase;
5251 4524 color: var(--medium-grey);
5252 - display: block;
5253 4525 }
5254 4526
5255 4527 .frm_form_settings .howto {
5256 - color: var(--grey-500);
5257 - font-size: var(--text-sm);
4528 + color: var(--medium-grey);
4529 + font-size: 15px;
5258 4530 margin-top: 8px;
5259 4531 }
5260 4532
5261 4533 .frm_form_settings .advanced_settings .form-table {
@@ -5270,10 +4542,18 @@
5270 4542 width: 95%;
5271 4543 }
5272 4544
5273 4545 .frm_wrap .ui-autocomplete {
4546 + box-shadow: none;
4547 + border: 1px solid var(--grey-border);
4548 + border-radius: var(--small-radius);
4549 + background: var(--lightest-grey);
4550 + position: absolute;
5274 4551 padding: 3px 0;
4552 + font-size: 15px;
5275 4553 max-height: 310px;
4554 + overflow-y: auto;
4555 + overflow-x: hidden;
5276 4556 }
5277 4557
5278 4558 .frm_wrap .ui-widget {
5279 4559 font-family: inherit;
@@ -5279,15 +4559,26 @@
5279 4559 font-family: inherit;
5280 4560 }
5281 4561
5282 4562 .frm_wrap .ui-autocomplete li {
5283 - padding: 2px 4px;
4563 + padding: 2px 10px;
5284 4564 background: none;
5285 - color: var(--grey-700);
4565 + color: var(--dark-grey);
5286 4566 border: none;
5287 4567 font-weight: normal;
5288 4568 }
5289 4569
4570 +.frm_wrap .ui-autocomplete li div.ui-state-active,
4571 +.frm_wrap .ui-autocomplete li.ui-state-focus {
4572 + background: rgb(65, 153, 253);
4573 + color: #fff;
4574 +}
4575 +
4576 +.frm_wrap .ui-autocomplete .ui-menu-item-wrapper {
4577 + padding: 2px 10px;
4578 + border-radius: var(--small-radius);
4579 +}
4580 +
5290 4581 .frm_wrap .ui-autocomplete .ui-menu-item-wrapper.ui-state-active {
5291 4582 border: none;
5292 4583 font-weight: inherit;
5293 4584 }
@@ -5326,9 +4617,9 @@
5326 4617 #frm-insert-fields-box ul.frm_code_list li.clear.frm_block {
5327 4618 height: 10px;
5328 4619 }
5329 4620
5330 -#frm_adv_info .frm_noallow {
4621 +.frm_page_container #frm_adv_info .frm_noallow {
5331 4622 display: none;
5332 4623 }
5333 4624
5334 4625 #frm_adv_info #frm-conditionals .frm_noallow {
@@ -5363,9 +4654,9 @@
5363 4654 #frm_notification_settings .widget-top .widget-action,
5364 4655 #frm_form_editor_container .widget-top .widget-action {
5365 4656 border: 0;
5366 4657 margin: 0;
5367 - padding: 8px;
4658 + padding: 10px;
5368 4659 background: 0 0;
5369 4660 cursor: pointer;
5370 4661 outline: 0;
5371 4662 }
@@ -5370,12 +4661,12 @@
5370 4661 outline: 0;
5371 4662 }
5372 4663
5373 4664 #frm_email_addon_menu {
5374 - border: 1px solid var(--grey-300);
5375 - padding: var(--gap-sm);
4665 + border: 1px solid var(--grey-border);
4666 + padding: 15px;
5376 4667 border-radius: 4px;
5377 - margin: var(--gap-md) 0 var(--gap-sm);
4668 + margin: 25px 0 15px;
5378 4669 }
5379 4670
5380 4671 #frm_email_addon_menu .frm-search {
5381 4672 float: right;
@@ -5386,12 +4677,8 @@
5386 4677 clear: none;
5387 4678 padding-top: 7px;
5388 4679 }
5389 4680
5390 -.frm_email_settings .widget .widget-top {
5391 - background-color: var(--sidebar-color);
5392 -}
5393 -
5394 4681 .frm_email_settings .widget .widget-top,
5395 4682 .frm_email_settings .widget .widget-top h3 {
5396 4683 cursor: pointer !important;
5397 4684 }
@@ -5396,17 +4683,23 @@
5396 4683 cursor: pointer !important;
5397 4684 }
5398 4685
5399 4686 .frm_email_settings .widget {
5400 - margin-bottom: var(--gap-sm);
4687 + margin-bottom: 15px;
4688 + line-height: 1.4em;
4689 + padding: 0;
5401 4690 }
5402 4691
4692 +.frm_email_settings .widget:last-of-type {
4693 + margin-bottom: 20px;
4694 +}
4695 +
5403 4696 .frm_form_action_settings .widget-top {
5404 4697 box-shadow: none;
5405 - border-color: var(--grey-300);
5406 - border-radius: var(--small-radius);
4698 + border-color: var(--grey-border);
4699 + border-radius: 4px;
5407 4700 background: var(--lightest-grey);
5408 - color: var(--grey-700);
4701 + color: var(--dark-grey);
5409 4702 }
5410 4703
5411 4704 .frm_form_action_settings:hover .widget-top {
5412 4705 border-color: var(--grey);
@@ -5418,9 +4711,9 @@
5418 4711 border-bottom: none;
5419 4712 }
5420 4713
5421 4714 .frm_form_action_settings.open:hover .widget-top {
5422 - border-color: var(--grey-300);
4715 + border-color: var(--grey-border);
5423 4716 }
5424 4717
5425 4718 .frm_form_action_settings > .widget-inside {
5426 4719 display: none;
@@ -5432,9 +4725,9 @@
5432 4725
5433 4726 .frm_form_action_settings .widget-inside {
5434 4727 min-height: 25px;
5435 4728 padding: 15px;
5436 - border-color: var(--grey-300);
4729 + border-color: var(--grey-border);
5437 4730 border-bottom-left-radius: 4px;
5438 4731 border-bottom-right-radius: 4px;
5439 4732 }
5440 4733
@@ -5442,14 +4735,14 @@
5442 4735 .frm_form_action_settings .widget-title h3 {
5443 4736 display: inline-block;
5444 4737 border-bottom: none;
5445 4738 padding: 10px 10px 5px;
5446 - font-size: var(--text-md);
4739 + font-size: 16px;
5447 4740 font-weight: 500;
5448 4741 }
5449 4742
5450 4743 #frm_email_addon_menu h3 {
5451 - margin: 0 0 var(--gap-sm);
4744 + margin: 0 0 15px;
5452 4745 clear: both;
5453 4746 }
5454 4747
5455 4748 .frm_single_api_settings p > label {
@@ -5485,9 +4778,9 @@
5485 4778 }
5486 4779
5487 4780 #frm-hide-groups,
5488 4781 #frm-show-groups {
5489 - font-size: var(--text-md);
4782 + font-size: 16px;
5490 4783 float: right;
5491 4784 }
5492 4785
5493 4786 .frm_actions_list a:active, .frm_actions_list a:focus {
@@ -5494,16 +4787,16 @@
5494 4787 outline: none;
5495 4788 }
5496 4789
5497 4790 .frm_actions_list a {
5498 - font-size: var(--text-sm);
5499 - color: var(--grey-700);
4791 + font-size: 14px;
4792 + color: var(--dark-grey);
5500 4793 word-break: break-word;
5501 4794 }
5502 4795
5503 4796 .frm_actions_list span.frm-outer-circle {
5504 4797 /* 50px total with 30px content */
5505 - background-color: var(--grey-100);
4798 + background-color: var(--sidebar-color);
5506 4799 padding: 10px;
5507 4800 text-align: center;
5508 4801 border-radius: 50%;
5509 4802 display: block;
@@ -5509,13 +4802,12 @@
5509 4802 display: block;
5510 4803 width: 30px;
5511 4804 height: 30px;
5512 4805 margin: 0 auto 15px;
5513 - line-height: 1;
5514 4806 }
5515 4807
5516 4808 .frm_email_settings .widget-title h4 {
5517 - color: var(--grey-700);
4809 + color: var(--dark-grey);
5518 4810 }
5519 4811
5520 4812 .frm_disabled_action .widget-title h4 {
5521 4813 color: var(--grey);
@@ -5531,17 +4823,16 @@
5531 4823 }
5532 4824
5533 4825 span.frm-inner-circle,
5534 4826 .frm_email_settings .widget-title .frm_form_action_icon {
5535 - background-color: var(--grey-400);
4827 + background-color: var(--grey-border);
5536 4828 border-radius: 50%;
5537 4829 display: inline-block;
5538 4830 text-align: center;
5539 - line-height: 1;
5540 4831 }
5541 4832
5542 4833 span.frm-inner-circle {
5543 - background-color: var(--primary-700);
4834 + background-color: var(--primary-hover);
5544 4835 height: 22px;
5545 4836 width: 22px;
5546 4837 padding: 4px;
5547 4838 color: #fff;
@@ -5554,9 +4845,9 @@
5554 4845 .frm_email_settings .widget-title .frm_form_action_icon {
5555 4846 height: 15px;
5556 4847 width: 15px;
5557 4848 padding: 5px;
5558 - color: #fff;
4849 + color: var(--lightest-grey);
5559 4850 vertical-align: middle;
5560 4851 }
5561 4852
5562 4853 .frm_actions_list .frmsvg,
@@ -5577,9 +4868,9 @@
5577 4868 }
5578 4869
5579 4870 span.frm-inner-circle.frm-inverse {
5580 4871 background-color: transparent;
5581 - color: var(--primary-700);
4872 + color: var(--primary-hover);
5582 4873 padding: 0;
5583 4874 height: 30px;
5584 4875 width: 100%;
5585 4876 }
@@ -5585,9 +4876,9 @@
5585 4876 }
5586 4877
5587 4878 .frm_actions_list span.frm-inverse i,
5588 4879 .frm_actions_list span.frm-inverse .frmsvg {
5589 - color: var(--primary-700);
4880 + color: var(--primary-hover);
5590 4881 height: 30px;
5591 4882 width: 30px;
5592 4883 font-size: 30px;
5593 4884 padding: 0;
@@ -5599,9 +4890,9 @@
5599 4890 font-size: 30px;
5600 4891 }
5601 4892
5602 4893 .frm_email_settings .widget-title .frm_form_action_icon.frm-inverse {
5603 - background: #fff;
4894 + background: transparent;
5604 4895 padding: 0;
5605 4896 height: 24px;
5606 4897 width: 24px;
5607 4898 }
@@ -5607,17 +4898,18 @@
5607 4898 }
5608 4899
5609 4900 .frm_email_settings .widget-title .frm_form_action_icon.frm-inverse .frmsvg,
5610 4901 .frm_email_settings .widget-title .frm_form_action_icon.frm-inverse i:before {
5611 - color: var(--grey-400);
4902 + color: var(--grey-border);
5612 4903 height: 24px;
5613 4904 width: 24px;
5614 4905 font-size: 24px;
4906 + line-height: 1em;
5615 4907 }
5616 4908
5617 4909 .frm_email_settings .widget-title:hover .frm_form_action_icon.frm-inverse .frmsvg,
5618 4910 .frm_email_settings .widget-title:hover .frm_form_action_icon.frm-inverse i:before {
5619 - color: var(--grey-500);
4911 + color: var(--grey);
5620 4912 }
5621 4913
5622 4914 .frm_email_icons {
5623 4915 padding: 10px 0 5px 6px;
@@ -5628,8 +4920,9 @@
5628 4920 margin-left: 8px;
5629 4921 color: var(--grey);
5630 4922 opacity: 0;
5631 4923 transition: all .2s ease;
4924 + vertical-align: middle;
5632 4925 }
5633 4926
5634 4927 .frm_email_icons a .frmsvg {
5635 4928 color: var(--grey);
@@ -5648,8 +4941,16 @@
5648 4941 .frm_actions_list .frm_inactive_action i {
5649 4942 opacity: .4;
5650 4943 }
5651 4944
4945 +.frm-no-margin {
4946 + margin: 0;
4947 +}
4948 +
4949 +.frm-no-border {
4950 + border: none !important;
4951 +}
4952 +
5652 4953 table td, .form-table tr td {
5653 4954 vertical-align: top;
5654 4955 }
5655 4956
@@ -5676,12 +4977,8 @@
5676 4977 #frm_notification_settings .frm_form_action_settings td p {
5677 4978 padding: 7px 0;
5678 4979 }
5679 4980
5680 -#permissions_settings_settings .frm_grid_container {
5681 - align-items: center;
5682 -}
5683 -
5684 4981 #frm_notification_settings .form-table > tbody > tr > th {
5685 4982 width: 150px;
5686 4983 font-weight: normal;
5687 4984 padding-right: 10px;
@@ -5703,8 +5000,9 @@
5703 5000 #frm_notification_settings .frm_left_label {
5704 5001 /* For add-ons that haven't been updated for 4.0 */
5705 5002 float: none;
5706 5003 width: auto !important;
5004 + line-height: 1;
5707 5005 }
5708 5006
5709 5007 .frm-fields .frm_autoresponder_rows select {
5710 5008 width: auto;
@@ -5717,17 +5015,16 @@
5717 5015 width: 100%;
5718 5016 }
5719 5017
5720 5018 #frm_notification_settings .frm_email_buttons {
5721 - padding: var(--gap-2xs);
5019 + padding: 7px;
5722 5020 background: var(--light-blue);
5723 - color: var(--primary-700);
5724 - border-radius: var(--small-radius);
5021 + color: var(--primary-hover);
5022 + border-radius: 4px;
5725 5023 border-color: var(--blue-border);
5726 - line-height: 1;
5024 + line-height: 1em;
5727 5025 height: auto;
5728 - min-height: 12px;
5729 - font-size: var(--text-xs);
5026 + font-size: 12px;
5730 5027 box-shadow: none;
5731 5028 }
5732 5029
5733 5030 .frm_reply_to_container,
@@ -5732,31 +5029,34 @@
5732 5029
5733 5030 .frm_reply_to_container,
5734 5031 .frm_bcc_cc_container {
5735 5032 float: right;
5736 - margin: -4px 0 0;
5033 + margin: -8px 0 0;
5737 5034 z-index: 1;
5738 5035 position: relative;
5739 5036 }
5740 5037
5741 5038 .frm_email_row .frm_cancel1_icon:before {
5039 + line-height: 1;
5742 5040 vertical-align: bottom;
5743 5041 }
5744 5042
5043 +.frm_action_id {
5044 + padding-top: 10px;
5045 +}
5046 +
5745 5047 .frm_logic_field_opts {
5746 5048 max-width: 35%;
5747 5049 }
5748 5050
5749 5051 .frm-inline-select,
5750 -p.frm-inline-select,
5751 5052 #frm_submit_logic_row,
5752 5053 .frm_logic_rows .frm-collapse-me {
5753 - line-height: var(--h-md) !important;
5054 + line-height: 30px;
5754 5055 }
5755 5056
5756 -.frm_logic_row {
5757 - padding: var(--gap-xs) 0 0;
5758 - align-items: center;
5057 +.frm_logic_row:first-of-type {
5058 + padding-top: 8px;
5759 5059 }
5760 5060
5761 5061 .frm-single-settings .frm_logic_row > select {
5762 5062 max-width: 32.5% !important;
@@ -5793,8 +5093,13 @@
5793 5093 margin-bottom: 0;
5794 5094 padding: 0;
5795 5095 }
5796 5096
5097 +.frm_form_settings input[type="text"] {
5098 + line-height: normal;
5099 + height: auto;
5100 +}
5101 +
5797 5102 #poststuff .widgets-holder-wrap .frm_form_action_settings .widget-inside {
5798 5103 padding-bottom: 0;
5799 5104 }
5800 5105
@@ -5803,9 +5108,9 @@
5803 5108 padding-right: 15px;
5804 5109 }
5805 5110
5806 5111 #form_global_settings h3 {
5807 - font-size: var(--text-sm);
5112 + font-size: 14px;
5808 5113 margin-top: 25px;
5809 5114 }
5810 5115
5811 5116 #form_global_settings .tabs-panel + h3 {
@@ -5820,9 +5125,9 @@
5820 5125 border-top: 1px solid #eee;
5821 5126 border-bottom: none;
5822 5127 margin: 15px -15px 0;
5823 5128 padding: 8px 15px;
5824 - font-size: var(--text-sm);
5129 + font-size: 14px;
5825 5130 }
5826 5131
5827 5132 #poststuff .frm_form_settings h3.frm_first_h3,
5828 5133 #poststuff h3.frm_first_h3 {
@@ -5833,8 +5138,20 @@
5833 5138 h3.frm_add_logic_link {
5834 5139 margin-bottom: 0 !important;
5835 5140 }
5836 5141
5142 +a.frm_add_logic_link {
5143 + display: block;
5144 + text-align: center;
5145 + margin: 10px auto;
5146 + padding: 10px;
5147 + width: 80%;
5148 + max-width: 290px;
5149 + font-size: 19px;
5150 + border: 1px solid var(--primary-color);
5151 + border-radius: var(--border-radius);
5152 +}
5153 +
5837 5154 a.frm_add_logic_link.frm_hidden {
5838 5155 display: none;
5839 5156 }
5840 5157
@@ -5854,9 +5171,9 @@
5854 5171 bottom: 0;
5855 5172 }
5856 5173
5857 5174 .frm_right_addon input {
5858 - padding-right: var(--gap-lg);
5175 + padding-right: 30px;
5859 5176 }
5860 5177
5861 5178 .frm_icon_font {
5862 5179 color: #A0A0A0;
@@ -5862,12 +5179,8 @@
5862 5179 color: #A0A0A0;
5863 5180 color: var(--grey);
5864 5181 }
5865 5182
5866 -.frm-fields label .frm_icon_font {
5867 - font-size: inherit;
5868 -}
5869 -
5870 5183 .misc-pub-revisions.frm_icon_font,
5871 5184 .misc-pub-revisions.frm_icon_font:hover {
5872 5185 color: inherit;
5873 5186 }
@@ -5954,10 +5267,10 @@
5954 5267 position: relative;
5955 5268 top: 2px;
5956 5269 }
5957 5270
5958 -.frm-field-action-icons > a {
5959 - font-size: var(--text-md);
5271 +.frm-field-action-icons a {
5272 + font-size: 16px;
5960 5273 width: 17px;
5961 5274 }
5962 5275
5963 5276 .frm-field-action-icons a:hover {
@@ -5967,26 +5280,21 @@
5967 5280 .frm-field-action-icons .dropdown {
5968 5281 display: inline-block;
5969 5282 }
5970 5283
5971 -.frm-field-action-icons > a .frmsvg {
5972 - color: var(--grey-500) !important;
5284 +.frm-field-action-icons a .frmsvg {
5285 + color: #9EA9B8 !important;
5973 5286 font-size: 17px;
5974 5287 width: 17px;
5975 5288 height: 17px;
5976 5289 }
5977 5290
5978 -.frm-field-action-icons > a .frmsvg,
5979 -.frm-field-action-icons > div > a .frmsvg {
5980 - vertical-align: baseline;
5981 -}
5982 -
5983 5291 .edit_field_type_end_divider .frm-field-action-icons {
5984 5292 display: none !important;
5985 5293 }
5986 5294
5987 5295 .frm-move {
5988 - cursor: grab;
5296 + cursor: move;
5989 5297 }
5990 5298
5991 5299 span.howto {
5992 5300 display: inline;
@@ -6032,15 +5340,11 @@
6032 5340 margin-bottom: 10px;
6033 5341 }
6034 5342
6035 5343 .frm_no_entries_form .frm_no_entries_text {
6036 - line-height: var(--leading);
5344 + line-height: 200%;
6037 5345 }
6038 5346
6039 -#form_entries_page #the-list .no-items {
6040 - height: 240px; /* Equals to the max height of search dropdown */
6041 -}
6042 -
6043 5347 /* Reports Page */
6044 5348 #form_reports_page img.frm_no_reports {
6045 5349 max-width: 100%;
6046 5350 }
@@ -6063,10 +5367,9 @@
6063 5367 }
6064 5368
6065 5369 .frm_wrap .google-visualization-table-tr-head,
6066 5370 .frm_wrap .google-visualization-table-tr-head th {
6067 - white-space: pre-wrap;
6068 - font-size: var(--text-md);
5371 + font-size: 16px;
6069 5372 font-weight: 400 !important;
6070 5373 text-align: left;
6071 5374 }
6072 5375
@@ -6082,8 +5385,12 @@
6082 5385 width: 20%;
6083 5386 min-width: 175px;
6084 5387 }
6085 5388
5389 +#form_reports_page h2 {
5390 + margin-top: 2em !important;
5391 +}
5392 +
6086 5393 /* Views Page */
6087 5394 #form_views_page img.frm_no_views {
6088 5395 max-width: 100%;
6089 5396 }
@@ -6193,9 +5500,9 @@
6193 5500 }
6194 5501
6195 5502 #frm-show-fields {
6196 5503 min-height: 350px;
6197 - padding: 0 0 35px;
5504 + padding: 10px 0 35px;
6198 5505 margin: 0;
6199 5506 position: relative;
6200 5507 }
6201 5508
@@ -6202,22 +5509,13 @@
6202 5509 .frm-has-fields #frm-show-fields {
6203 5510 min-height: 50px;
6204 5511 }
6205 5512
6206 -#frm_builder_page .frm-lite-credit-card-element,
6207 -body.frm-admin-page-styles .frm-lite-credit-card-element {
6208 - position: relative;
5513 +#frm-show-fields .frm6 .frm-dropdown-menu {
5514 + max-width: unset;
5515 + min-width: 160px;
6209 5516 }
6210 5517
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 5518 #frm_builder_page #frm_field_group_controls {
6221 5519 position: absolute;
6222 5520 padding: 5px;
6223 5521 border-radius: 4px 4px 0 0;
@@ -6255,16 +5553,8 @@
6255 5553 .frm-field-group-hover-target #frm_field_group_controls {
6256 5554 visibility: visible;
6257 5555 }
6258 5556
6259 -#frm_field_group_controls .dropdown-item a span {
6260 - color: var(--grey-700);
6261 -}
6262 -
6263 -#frm_field_group_controls .dropdown-item a:hover {
6264 - text-decoration: none;
6265 -}
6266 -
6267 5557 .frm_sorting .no_repeat_section li.ui-state-default.edit_field_type_end_divider {
6268 5558 display: none !important;
6269 5559 }
6270 5560
@@ -6374,16 +5664,15 @@
6374 5664 }
6375 5665
6376 5666 .frm-page-collapsed .frm_clone_icon,
6377 5667 .frm-page-collapsed .frm_delete_field,
6378 -.frm-page-collapsed .frm_clone_field,
6379 -.frm-section-collapsed .frm_clone_icon {
5668 +.frm-section-collapsed .frm_clone_icon,
5669 +.frm-section-collapsed .frm_delete_field {
6380 5670 opacity: .5;
6381 5671 cursor: not-allowed;
6382 5672 }
6383 5673
6384 -/* Hide the Duplicate summary option because we are missing the logic that also adds a new page */
6385 -.edit_field_type_summary .frm_more_options_li:nth-child(2) {
5674 +.edit_field_type_summary .frm_clone_field {
6386 5675 display: none !important;
6387 5676 }
6388 5677
6389 5678 .frm_no_section_fields:not(.frm_block) + ul.start_divider {
@@ -6415,9 +5704,9 @@
6415 5704 content: '';
6416 5705 display: block;
6417 5706 padding: 2px 0;
6418 5707 line-height: 1px;
6419 - border-top: 2px solid var(--grey-300);
5708 + border-top: 2px solid var(--grey-border);
6420 5709 top: -2px;
6421 5710 position: absolute;
6422 5711 width: 100%;
6423 5712 transition: .5s border-color ease-in-out;
@@ -6429,9 +5718,8 @@
6429 5718 }
6430 5719
6431 5720 .frm-section-collapsed .divider_section_only:hover:after,
6432 5721 li.selected.frm-section-collapsed .divider_section_only:before,
6433 -li.selected.frm-section-collapsed .divider_section_only:after,
6434 5722 .divider_section_only:hover:before,
6435 5723 li.selected .divider_section_only:before {
6436 5724 border-color: transparent;
6437 5725 }
@@ -6439,10 +5727,10 @@
6439 5727 .frm_sorting li.ui-state-default.edit_field_type_divider {
6440 5728 overflow: visible;
6441 5729 position: relative;
6442 5730 padding: 0 0 0 20px;
6443 - margin: 25px 0 0 -5px;
6444 - border-left: 1px solid var(--primary-700);
5731 + margin: 25px 0 0 -20px;
5732 + border-left: 1px solid var(--primary-hover);
6445 5733 transition: border 0.7s ease-out;
6446 5734 }
6447 5735
6448 5736 .frm-section-collapsed {
@@ -6450,9 +5738,9 @@
6450 5738 }
6451 5739
6452 5740 .frm_sorting li.edit_field_type_end_divider,
6453 5741 .frm_sorting .no_repeat_section li.ui-state-default.edit_field_type_end_divider:hover {
6454 - margin: 0 0 var(--gap-sm);
5742 + margin: 0 0 15px;
6455 5743 }
6456 5744
6457 5745 .frm-first-page .frm_prev_page {
6458 5746 display: none;
@@ -6457,19 +5745,22 @@
6457 5745 .frm-first-page .frm_prev_page {
6458 5746 display: none;
6459 5747 }
6460 5748
6461 -#frm_builder_page .frm_remove_form_row.frm_button,
6462 -#frm_builder_page .frm_add_form_row.frm_button {
5749 +#frm-form-button button,
5750 +.frm_remove_form_row.frm_button,
5751 +.frm_add_form_row.frm_button,
5752 +.frm-white-body .frm-preview-buttons button {
6463 5753 border-radius: var(--small-radius);
6464 5754 border: 1px solid var(--blue-border);
5755 + color: var(--primary-color);
6465 5756 }
6466 5757
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);
5758 +.frm_wrap .frm_remove_form_row .frmsvg,
5759 +.frm_remove_form_row i:before,
5760 +.frm_wrap .frm_add_form_row .frmsvg,
5761 +.frm_add_form_row i:before {
5762 + color: var(--primary-hover);
6472 5763 }
6473 5764
6474 5765 .frm-preview-buttons .frm_button_submit {
6475 5766 margin: 0 5px;
@@ -6475,10 +5766,10 @@
6475 5766 margin: 0 5px;
6476 5767 }
6477 5768
6478 5769 .frm-page-break {
6479 - border-top: 1px dashed var(--primary-700);
6480 - margin-top: var(--gap-lg);
5770 + border-top: 1px dashed var(--primary-hover);
5771 + margin-top: 30px;
6481 5772 position: relative;
6482 5773 }
6483 5774
6484 5775 .edit_field_type_divider:before,
@@ -6491,9 +5782,9 @@
6491 5782 width: 4px;
6492 5783 height: 4px;
6493 5784 background-color: #fff;
6494 5785 border-radius: 50%;
6495 - border: 1px solid var(--primary-700);
5786 + border: 1px solid var(--primary-hover);
6496 5787 text-rendering: auto;
6497 5788 -webkit-font-smoothing: antialiased;
6498 5789 }
6499 5790
@@ -6515,12 +5806,13 @@
6515 5806 width: 20px;
6516 5807 height: 20px;
6517 5808 left: -11px;
6518 5809 top: 0;
6519 - background: var(--primary-700);
5810 + background: var(--primary-hover);
6520 5811 text-align: center;
6521 5812 color: #fff;
6522 5813 font-size: 13px;
5814 + line-height: 22px;
6523 5815 }
6524 5816
6525 5817 .edit_field_type_divider:before{
6526 5818 font-family: 's11-fp';
@@ -6541,20 +5833,20 @@
6541 5833
6542 5834
6543 5835 .frm_sorting li.edit_field_type_divider:hover,
6544 5836 .frm_sorting li.edit_field_type_divider.selected {
6545 - border-left-color: var(--primary-500);
5837 + border-left-color: var(--primary-color);
6546 5838 }
6547 5839
6548 5840 .edit_field_type_divider.selected:before,
6549 5841 .edit_field_type_divider:hover:before {
6550 - border-color: var(--primary-500);
6551 - background: var(--primary-500);
5842 + border-color: var(--primary-color);
5843 + background: var(--primary-color);
6552 5844 }
6553 5845
6554 5846 .edit_field_type_divider.selected:after,
6555 5847 .edit_field_type_divider:hover:after {
6556 - border-color: var(--primary-500);
5848 + border-color: var(--primary-color);
6557 5849 }
6558 5850
6559 5851 .frm-section-collapsed:after {
6560 5852 border-color: transparent !important;
@@ -6562,11 +5854,19 @@
6562 5854 }
6563 5855
6564 5856 .frm-page-break .frm-collapse-page.button {
6565 5857 margin-left: 46%;
6566 - margin-top: calc( -28px / 2 );
5858 + margin-top: -15px;
5859 + background-color: #fff;
5860 + border-color: var(--primary-hover) !important;
5861 + color: var(--primary-hover);
6567 5862 }
6568 5863
5864 +#frm-fake-page .frm-collapse-page.button {
5865 + border-color: var(--grey) !important;
5866 + color: var(--grey);
5867 +}
5868 +
6569 5869 #frm-fake-page.frm-page-collapsed {
6570 5870 margin-bottom: 0;
6571 5871 }
6572 5872
@@ -6572,15 +5872,15 @@
6572 5872
6573 5873 .frm-page-collapsed {
6574 5874 position: relative;
6575 5875 overflow: visible !important;
6576 - margin-bottom: var(--gap-lg);
5876 + margin-bottom: 30px;
6577 5877 }
6578 5878
6579 5879 .frm-page-collapsed:after {
6580 5880 content: '';
6581 5881 display: block;
6582 - border: 1px dashed var(--grey-300);
5882 + border: 1px dashed var(--grey-border);
6583 5883 border-left: none;
6584 5884 border-right: none;
6585 5885 height: 6px;
6586 5886 position: absolute;
@@ -6587,40 +5887,31 @@
6587 5887 width: calc( 100% - 10px );
6588 5888 bottom: -15px;
6589 5889 }
6590 5890
6591 -.frm-collapse-page .frmsvg,
6592 5891 .frm-collapse-page .frm_arrowdown6_icon {
6593 - width: var(--text-sm);
6594 - height: var(--text-sm);
6595 - font-size: var(--text-sm);
5892 + width: 16px;
6596 5893 text-align: center;
6597 5894 margin-left: 2px;
6598 - color: currentColor;
5895 + color: var(--primary-hover);
6599 5896 }
6600 5897
6601 5898 #frm-fake-page .frm_arrowdown6_icon {
6602 - color: currentColor;
5899 + color: var(--grey);
6603 5900 }
6604 5901
5902 +#frm-fake-page .frm-collapse-page:hover,
5903 +#frm-fake-page .frm-collapse-page:hover .frm_arrowdown6_icon,
5904 +.frm-collapse-page:hover .frm_arrowdown6_icon {
5905 + color: #fff;
5906 +}
5907 +
6605 5908 .frm-collapsed i:before,
5909 +.frm-section-collapsed .frm_arrowdown6_icon:before,
6606 5910 .frm-page-collapsed .frm_arrowdown6_icon:before {
6607 5911 content: '\e913';
6608 5912 }
6609 5913
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 5914 .open .widget-top .frm_arrow_right_icon:before {
6624 5915 content: '\e62a';
6625 5916 }
6626 5917
@@ -6662,14 +5953,14 @@
6662 5953 .frm_no_section_fields {
6663 5954 text-align: center;
6664 5955 position: absolute;
6665 5956 color: var(--medium-grey);
6666 - font-size: var(--text-md);
5957 + font-size: 16px;
6667 5958 box-sizing: border-box;
6668 - border: 1px dashed var(--grey-300);
5959 + border: 2px dashed var(--primary-color);
6669 5960 }
6670 5961
6671 -.ui-droppable-active ~ .frm_no_fields {
5962 +.drop-me + .frm_no_fields {
6672 5963 border-style: solid;
6673 5964 }
6674 5965
6675 5966 .frm_no_section_fields {
@@ -6701,9 +5992,9 @@
6701 5992 display: block;
6702 5993 }
6703 5994
6704 5995 .frm-large-plus.frmsvg {
6705 - color: var(--primary-700);
5996 + color: var(--primary-hover);
6706 5997 height: 45px;
6707 5998 width: 45px;
6708 5999 }
6709 6000
@@ -6823,12 +6114,10 @@
6823 6114
6824 6115 .frm-category-tabs > li a,
6825 6116 .frm-category-tabs > li a:active {
6826 6117 outline: none;
6118 + -webkit-box-shadow: none;
6827 6119 box-shadow: none;
6828 - display: flex;
6829 - gap: var(--gap-xs);
6830 - align-items: center;
6831 6120 }
6832 6121
6833 6122 .frm-category-tabs > li.active .frmsvg,
6834 6123 .frm-category-tabs > li.active i,
@@ -6833,15 +6122,15 @@
6833 6122 .frm-category-tabs > li.active .frmsvg,
6834 6123 .frm-category-tabs > li.active i,
6835 6124 .frm-category-tabs > li.active span,
6836 6125 .frm-category-tabs > li.active a {
6837 - color: var(--primary-500);
6126 + color: var(--primary-color);
6838 6127 }
6839 6128
6840 6129 .frm_wrap .manage-menus {
6841 6130 margin-top: 0;
6842 6131 border: none;
6843 - border-bottom: 1px solid var(--grey-300);
6132 + border-bottom: 1px solid var(--grey-border);
6844 6133 background: var(--lightest-grey);
6845 6134 }
6846 6135
6847 6136 .general_settings .postbox .manage-menus {
@@ -6877,9 +6166,9 @@
6877 6166 padding-top: 10px;
6878 6167 }
6879 6168
6880 6169 .frm-right-panel .ui-state-default, #postbox-container-1 .ui-state-default {
6881 - color: var(--grey-900);
6170 + color: var(--darkest-grey);
6882 6171 }
6883 6172
6884 6173 .no_repeat_section .frm_sorting > li.ui-state-default.edit_field_type_end_divider:hover {
6885 6174 box-shadow: none;
@@ -6895,14 +6184,14 @@
6895 6184 .frm_sorting li.ui-state-default.selected.edit_field_type_divider .divider_section_only,
6896 6185 .frm_update_msg,
6897 6186 .frm_sorting li.ui-state-default.frm_not_divider.selected,
6898 6187 .frm_sorting li.ui-state-default.selected.edit_field_type_divider .divider_section_only {
6899 - border-color: var(--primary-500);
6188 + border-color: var(--primary-color);
6900 6189 transition: .5s border-color ease-in-out;
6901 6190 }
6902 6191
6903 6192 .frm_sorting li.ui-state-default.frm_not_divider.selected {
6904 - box-shadow: 0 0 1px 0 var(--primary-500);
6193 + box-shadow: 0 0 1px 0 var(--primary-color);
6905 6194 }
6906 6195
6907 6196 .frm_sorting li.ui-state-default {
6908 6197 transition: .7s box-shadow ease-in-out, .7s height linear;
@@ -6925,9 +6214,9 @@
6925 6214 font-weight: bold;
6926 6215 border: 1px solid #DFDFDF;
6927 6216 background-color: #EEEEEE;
6928 6217 padding: 3px 5px 2px;
6929 - font-size: var(--text-md);
6218 + font-size: 16px;
6930 6219 line-height: 20px;
6931 6220 }
6932 6221
6933 6222 .frm_update_msg {
@@ -6965,13 +6254,8 @@
6965 6254 .widefat .column-shortcode {
6966 6255 width: 9em;
6967 6256 }
6968 6257
6969 -.toplevel_page_formidable .column-shortcode div {
6970 - display: flex;
6971 - gap: var(--gap-xs);
6972 -}
6973 -
6974 6258 .widefat .column-entries, .widefat .column-link {
6975 6259 width: 10%;
6976 6260 text-align: center;
6977 6261 }
@@ -6979,22 +6263,23 @@
6979 6263 .widefat .column-form_key, .widefat .column-created_at {
6980 6264 width: 10%;
6981 6265 }
6982 6266
6983 -.frm-white-body .search-box,
6267 +.post-type-frm_display .search-box,
6984 6268 .frm_wrap .frm-search {
6985 6269 float: right;
6986 - margin: 0;
6270 + margin-bottom: 15px;
6987 6271 clear: right;
6988 6272 }
6989 6273
6990 -.frm-white-body .search-box,
6274 +#form_entries_page form .frm-search {
6275 + margin-top: 15px;
6276 +}
6277 +
6991 6278 .frm-search {
6992 - min-width: 32%;
6279 + width: 32%;
6280 + float: right;
6993 6281 position: relative;
6994 - display: flex;
6995 - gap: var(--gap-sm);
6996 - align-items: center;
6997 6282 }
6998 6283
6999 6284 .frm-inline-modal .frm-search,
7000 6285 #frm_adv_info .frm-search {
@@ -7000,9 +6285,9 @@
7000 6285 #frm_adv_info .frm-search {
7001 6286 float: none;
7002 6287 width: 100%;
7003 6288 clear: both;
7004 - margin: var(--gap-xs) 0;
6289 + margin: 5px 0 10px;
7005 6290 }
7006 6291
7007 6292 .frm-button-group a {
7008 6293 margin: 0 7px !important;
@@ -7019,9 +6304,9 @@
7019 6304
7020 6305 i.frm-show-box,
7021 6306 i.frm-show-inline-modal,
7022 6307 .frm-with-left-icon i,
7023 -.frm-with-right-icon i:not([class*=mce-]),
6308 +.frm-with-right-icon i,
7024 6309 .frmsvg.frm-show-box,
7025 6310 .frmsvg.frm-show-inline-modal,
7026 6311 .frm-with-left-icon .frmsvg,
7027 6312 .frm-with-right-icon .frmsvg,
@@ -7027,17 +6312,18 @@
7027 6312 .frm-with-right-icon .frmsvg,
7028 6313 .frm-search > .frmsvg,
7029 6314 .frm-search span:not(.multiselect-selected-text):not(.multiselect-native-select) {
7030 6315 position: absolute;
7031 - padding: 0 14px;
6316 + padding: 7px 10px;
7032 6317 pointer-events: none;
7033 6318 left: 0;
7034 - color: var(--grey-400);
7035 - font-size: var(--text-xs);
6319 + color: var(--grey);
6320 + opacity: .5;
6321 + font-size: 18px;
7036 6322 }
7037 6323
7038 6324 .frm-with-right-icon .frmsvg,
7039 -.frm-with-right-icon i:not([class*=mce-]) {
6325 +.frm-with-right-icon i {
7040 6326 right: 0;
7041 6327 top: -3px;
7042 6328 left: auto;
7043 6329 padding: 0 10px 0 5px;
@@ -7042,35 +6328,20 @@
7042 6328 left: auto;
7043 6329 padding: 0 10px 0 5px;
7044 6330 }
7045 6331
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 6332 .frmsvg.frm-show-box,
7061 6333 .frmsvg.frm-show-inline-modal,
7062 6334 i.frm-show-box,
7063 6335 i.frm-show-inline-modal {
7064 - color: var(--primary-500);
6336 + color: var(--primary-color);
7065 6337 pointer-events: initial;
7066 6338 cursor: pointer;
7067 6339 z-index: 1;
7068 6340 opacity: 1;
6341 + right: 2px;
7069 6342 top: auto;
7070 - margin: calc( ( 36px - 18px ) / 2 ); /* input height - svg / 2 */
7071 - margin-bottom: 0;
7072 - padding: 0;
6343 + padding: 7px 10px;
7073 6344 }
7074 6345
7075 6346 .frm-open .frmsvg.frm-show-inline-modal,
7076 6347 .frm-open i.frm-show-inline-modal {
@@ -7093,9 +6364,9 @@
7093 6364
7094 6365 .frm_wrap .frm-with-right-icon textarea,
7095 6366 .frm_wrap .frm-with-right-icon input,
7096 6367 .frm_wrap .frm-with-right-icon input[type=text] {
7097 - padding-right: var(--gap-md);
6368 + padding-right: 35px;
7098 6369 }
7099 6370
7100 6371 #frm-show-fields .frm-with-left-icon .frmsvg,
7101 6372 #frm-show-fields .frm-with-left-icon i {
@@ -7101,29 +6372,43 @@
7101 6372 #frm-show-fields .frm-with-left-icon i {
7102 6373 padding-top: 10px;
7103 6374 }
7104 6375
6376 +.frm-search input.frm-search-input,
7105 6377 .frm-search input[name="s"],
6378 +.frm-search #search-submit {
6379 + border-color: var(--grey-border);
6380 + box-shadow: none;
6381 + margin: 0;
6382 + padding: 7px;
6383 + height: auto;
6384 + font-size: 13px;
6385 + line-height: normal;
6386 +}
6387 +
7106 6388 .frm-search .dropdown-toggle,
7107 6389 .frm-search input.frm-search-input {
7108 - border-radius: var(--small-radius);
6390 + border-radius: var(--border-radius);
7109 6391 padding-left: 33px !important;
7110 - border-color: var(--grey-300);
7111 6392 }
7112 6393
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);
6394 +.frm-search input[name="s"] {
6395 + width: 70%;
6396 + float: left;
6397 + border-radius: var(--border-radius) 0 0 var(--border-radius) !important;
6398 + border-right-width: 0;
6399 + padding-left: 33px;
7121 6400 }
7122 6401
7123 -.frm-search .dropdown-toggle {
6402 +.frm-search .dropdown-toggle,
6403 +.frm-search input.frm-auto-search {
7124 6404 width: 100%;
6405 + border-right-width: 1px;
6406 + border-radius: var(--border-radius) !important;
7125 6407 float: none;
6408 +}
6409 +
6410 +.frm-search .dropdown-toggle {
7126 6411 max-width: 200px;
7127 6412 background: transparent;
7128 6413 padding: 7px;
7129 6414 min-height: 32px;
@@ -7131,18 +6416,22 @@
7131 6416 overflow: hidden;
7132 6417 text-overflow: ellipsis;
7133 6418 }
7134 6419
7135 -span.multiselect-selected-text {
6420 +.frm-search span.multiselect-selected-text {
7136 6421 white-space: nowrap;
7137 - display: inline-block;
7138 - max-width: 90%;
7139 - text-overflow: ellipsis;
7140 - overflow: hidden;
6422 + display: inline-block;
7141 6423 }
7142 6424
6425 +.frm-search #search-submit {
6426 + width: 30%;
6427 + border-radius: 0 var(--border-radius) var(--border-radius) 0;
6428 + text-align: center;
6429 + background-color: var(--lightest-grey);
6430 +}
6431 +
7143 6432 .frm-search #search-submit a {
7144 - color: var(--grey-800);
6433 + color: var(--primary-color);
7145 6434 }
7146 6435
7147 6436 .frm-search #search-submit .caret {
7148 6437 opacity:.7;
@@ -7148,15 +6437,15 @@
7148 6437 opacity:.7;
7149 6438 }
7150 6439
7151 6440 .frm-not-set input {
7152 - color: var(--primary-500) !important;
6441 + color: var(--primary-color) !important;
7153 6442 font-size: 13px;
7154 6443 }
7155 6444
7156 6445 .frm-not-set .frmsvg,
7157 6446 .frm-not-set i {
7158 - color: var(--primary-700);
6447 + color: var(--primary-hover);
7159 6448 opacity: 1;
7160 6449 }
7161 6450
7162 6451 .post-type-frm_display select[name="m"] + #post-query-submit,
@@ -7224,9 +6513,9 @@
7224 6513
7225 6514 .post-type-frm_display #advanced-sortables h2.hndle,
7226 6515 .post-type-frm_display #side-sortables h2.hndle,
7227 6516 .post-type-frm_display #normal-sortables h2.hndle {
7228 - border-bottom: 1px solid var(--grey-300);
6517 + border-bottom: 1px solid var(--grey-border);
7229 6518 margin: 10px 0 0 !important;
7230 6519 padding: 0 25px 8px;
7231 6520 }
7232 6521
@@ -7235,9 +6524,9 @@
7235 6524 padding-top: 10px;
7236 6525 }
7237 6526
7238 6527 .post-type-frm_display #post-body-content {
7239 - margin-top: var(--gap-lg);
6528 + margin-top: 30px;
7240 6529 }
7241 6530
7242 6531 .post-type-frm_display.edit-php #wpbody-content > .wrap {
7243 6532 margin: 0;
@@ -7244,15 +6533,15 @@
7244 6533 }
7245 6534
7246 6535 .post-type-frm_display .postbox .hndle,
7247 6536 .post-type-frm_display .postbox {
7248 - border-color: var(--grey-300);
6537 + border-color: var(--grey-border);
7249 6538 }
7250 6539
7251 6540 .post-type-frm_display #postbox-container-1 .postbox,
7252 6541 .post-type-frm_display #postbox-container-2 .postbox {
7253 6542 border-radius: var(--small-radius);
7254 - border-color: var(--grey-300);
6543 + border-color: var(--grey-border);
7255 6544 box-shadow: none;
7256 6545 }
7257 6546
7258 6547 .post-type-frm_display #side-sortables .postbox {
@@ -7331,9 +6620,9 @@
7331 6620 background-color: transparent;
7332 6621 }
7333 6622
7334 6623 .post-type-frm_display #major-publishing-actions {
7335 - border-color: var(--grey-300);
6624 + border-color: var(--grey-border);
7336 6625 background: var(--sidebar-color);
7337 6626 }
7338 6627
7339 6628 .post-type-frm_display #frm_adv_info {
@@ -7387,9 +6676,9 @@
7387 6676 .settings-lite-cta ul,
7388 6677 .settings-lite-cta p,
7389 6678 .settings-lite-cta {
7390 6679 color: #666;
7391 - font-size: var(--text-md);
6680 + font-size: 16px;
7392 6681 box-shadow: none !important;
7393 6682 }
7394 6683
7395 6684 .frm-info-modal h3,
@@ -7403,9 +6692,8 @@
7403 6692
7404 6693 .frm-info-modal .postbox .inside,
7405 6694 .settings-lite-cta .postbox .inside {
7406 6695 padding: 20px 40px;
7407 - margin: 0;
7408 6696 }
7409 6697
7410 6698 .cta-inside a {
7411 6699 color: var(--orange)
@@ -7411,15 +6699,21 @@
7411 6699 color: var(--orange)
7412 6700 }
7413 6701
7414 6702 .info-modal-inside a.frm-standard-link {
7415 - color: var(--primary-500);
6703 + color: var(--primary-color);
7416 6704 }
7417 6705
7418 6706 .info-modal-inside a.frm-standard-link:hover {
7419 - color: var(--primary-700);
6707 + color: var(--primary-hover);
7420 6708 }
7421 6709
6710 +.frm-caution {
6711 + text-transform: uppercase;
6712 + font-weight: bold;
6713 + color: var(--dark-grey);
6714 +}
6715 +
7422 6716 .frm_no_p_margin > p {
7423 6717 margin: 0;
7424 6718 }
7425 6719
@@ -7429,12 +6723,14 @@
7429 6723 font-size: 11px;
7430 6724 overflow: hidden;
7431 6725 }
7432 6726
6727 +.frm_code_list.frm-full-hover {
6728 + margin: 0 -20px;
6729 +}
6730 +
7433 6731 #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 );
6732 + margin: 4px 0 0;
7437 6733 }
7438 6734
7439 6735 .frm_code_list.frm-full-hover li {
7440 6736 margin: 0;
@@ -7439,28 +6735,33 @@
7439 6735 .frm_code_list.frm-full-hover li {
7440 6736 margin: 0;
7441 6737 }
7442 6738
7443 -.frm-select-list-item,
7444 -.frm_wrap .ui-autocomplete li > div,
7445 -.multiselect-container button.multiselect-option,
7446 -.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 */
6739 +.frm-dropdown-menu > li > a,
7449 6740 .frm-dropdown-menu .frm_dropdown_li,
7450 6741 .frm_code_list.frm-full-hover a {
7451 - display: flex;
7452 - color: var(--grey-700);
6742 + display: block;
6743 + color: var(--dark-grey);
6744 + padding: 3px 25px;
6745 + font-size: 15px;
6746 +}
6747 +
6748 +.frm-field-action-icons .frm-dropdown-menu .frm_dropdown_li {
7453 6749 padding: 5px 10px;
7454 - font-size: var(--text-md);
7455 - gap: var(--gap-xs);
7456 - align-items: center;
6750 + color: rgba(40, 47, 54, 0.85);
6751 + cursor: pointer;
7457 6752 }
7458 6753
6754 +.frm-field-action-icons .frm-dropdown-menu .frm_dropdown_li:hover {
6755 + background: #F6F7FB;
6756 +}
6757 +
7459 6758 .frm_code_list.frm-full-hover a span {
6759 + color: var(--grey);
6760 + float: right;
6761 + font-size: 14px;
7460 6762 max-width: 83px;
7461 6763 text-align: right;
7462 - margin-left: auto;
7463 6764 }
7464 6765
7465 6766 .frm_code_list.frm-full-hover a,
7466 6767 .frm_code_list.frm-full-hover a span {
@@ -7468,54 +6769,24 @@
7468 6769 overflow: hidden;
7469 6770 text-overflow: ellipsis;
7470 6771 }
7471 6772
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 -.frm-dropdown-menu > .dropdown-item > a:hover,
6773 +.frm-dropdown-menu > li > a:hover,
7487 6774 .frm_code_list.frm-full-hover a:hover span,
7488 6775 .frm_code_list.frm-full-hover a:hover {
7489 - background: var(--primary-25);
7490 - color: var(--primary-500);
7491 - border-radius: var(--small-radius);
6776 + background: var(--sidebar-color);
6777 + color: var(--primary-color);
7492 6778 }
7493 6779
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 6780 .frm-dropdown-menu.frm_code_list > li > a {
7505 6781 padding: 3px 15px;
7506 6782 width: 300px;
7507 6783 }
7508 6784
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;
6785 +.frm-dropdown-menu.frm_code_list .frm-with-search {
6786 + padding: 3px 10px;
7512 6787 }
7513 6788
7514 -.frm-dropdown-menu .subsubsub {
7515 - padding: 0 10px;
7516 -}
7517 -
7518 6789 .frm_grid_container {
7519 6790 overflow: visible;
7520 6791 }
7521 6792
@@ -7531,16 +6802,16 @@
7531 6802 .frm_code_list.frm_grid_container a {
7532 6803 padding: 5px 0;
7533 6804 text-align: center;
7534 6805 background-color: var(--light-blue);
7535 - border: 1px solid var(--primary-500);
7536 - color: var(--primary-500);
6806 + border: 1px solid var(--primary-color);
6807 + color: var(--primary-color);
7537 6808 display: block;
7538 6809 border-radius: var(--small-radius);
7539 6810 }
7540 6811
7541 6812 .frm_code_list.frm_grid_container a:hover {
7542 - background-color: var(--primary-700);
6813 + background-color: var(--primary-hover);
7543 6814 color: #fff;
7544 6815 }
7545 6816
7546 6817 .frm_field_list #frm-insert-fields .button a {
@@ -7548,15 +6819,10 @@
7548 6819 max-width: 95%;
7549 6820 overflow: hidden;
7550 6821 }
7551 6822
7552 -.field_type_list.frm_grid_container {
7553 - gap: var(--gap-xs) var(--gap-sm);
7554 - margin: var(--gap-xs);
7555 -}
7556 -
7557 6823 .field_type_list li {
7558 - margin: 0;
6824 + margin: 0 0 10px;
7559 6825 padding: 0;
7560 6826 }
7561 6827
7562 6828 #frm-insert-fields .frm-search {
@@ -7568,13 +6834,22 @@
7568 6834 #frm-insert-fields li,
7569 6835 #frm-insert-fields li a {
7570 6836 text-decoration: none;
7571 6837 font-weight: normal;
7572 - font-size: var(--text-md) !important;
7573 - color: var(--grey-900);
6838 + font-size: 15px !important;
6839 + color: var(--dark-grey);
7574 6840 }
7575 6841
6842 +#frm-insert-fields li a {
6843 + padding: 5px 20px;
6844 + display: block;
6845 + border-radius: 0 var(--border-radius) var(--border-radius) 0;
6846 +}
6847 +
7576 6848 #frm-insert-fields li.frm_show_upgrade {
6849 + margin: 0 0 10px;
6850 + padding: 5px 20px;
6851 + box-sizing: border-box;
7577 6852 cursor: pointer;
7578 6853 opacity: .5;
7579 6854 }
7580 6855
@@ -7581,11 +6856,14 @@
7581 6856 #frm-insert-fields li a span {
7582 6857 vertical-align: middle;
7583 6858 }
7584 6859
7585 -.frmbutton.ui-draggable-dragging a,
6860 +#frm-insert-fields li:nth-child(2n) a {
6861 + border-radius: var(--border-radius) 0 0 var(--border-radius);
6862 +}
6863 +
7586 6864 #frm-insert-fields li a:not(.disabled):hover {
7587 - background: var(--grey-100);
6865 + background: var(--sidebar-hover);
7588 6866 }
7589 6867
7590 6868 #frm-insert-fields li a.disabled:hover {
7591 6869 cursor: not-allowed;
@@ -7607,9 +6885,9 @@
7607 6885 .frmsvg {
7608 6886 fill: currentColor;
7609 6887 width: 18px;
7610 6888 height: 18px;
7611 - vertical-align: middle;
6889 + vertical-align: text-bottom;
7612 6890 }
7613 6891
7614 6892 input[disabled],
7615 6893 .frmsvg svg {
@@ -7635,27 +6913,40 @@
7635 6913 width: 13px;
7636 6914 height: 13px;
7637 6915 }
7638 6916
6917 +.frm_code_list a .frmsvg,
7639 6918 .frmbutton.ui-sortable-helper .frmsvg,
7640 6919 .field_type_list li.frmbutton .frmsvg,
6920 +.frm_code_list a i,
7641 6921 .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);
6922 +.field_type_list li.frmbutton i {
6923 + margin: .15em .2em;
6924 + color: var(--grey);
7646 6925 display: inline-block;
7647 6926 vertical-align: middle;
7648 - width: var(--text-md);
7649 - font-size: var(--text-md);
6927 + width: 20px;
6928 + height: 20px;
6929 + padding-right: 15px;
6930 + text-align: left;
6931 + font-size: 18px;
7650 6932 }
7651 6933
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);
6934 +/* Icon for Name field is larger */
6935 +.field_type_list li.frm_tname.frmbutton .frmsvg {
6936 + width: 24px;
6937 + height: 24px;
6938 + padding-right: 11px;
7656 6939 }
7657 6940
6941 +.frm_code_list a .frmsvg,
6942 +.frm_code_list a i {
6943 + margin: 0 5px 0 0;
6944 + padding: 0;
6945 + width: 15px;
6946 + font-size: 15px;
6947 +}
6948 +
7658 6949 .frm_code_list i:before {
7659 6950 font-size: inherit;
7660 6951 }
7661 6952
@@ -7660,58 +6951,62 @@
7660 6951 }
7661 6952
7662 6953 #frm-insert-fields li a:not(.disabled):hover .frmsvg,
7663 6954 #frm-insert-fields li a:not(.disabled):hover i {
7664 - color: var(--grey-600);
6955 + color: var(--dark-grey);
7665 6956 }
7666 6957
7667 -/* Icon while dragging */
7668 6958 .frmbutton.ui-draggable-dragging {
7669 - pointer-events: none;
6959 + width: auto !important;
7670 6960 }
7671 6961
7672 -#frm-insert-fields li.frm_show_upgrade,
7673 -#frm-insert-fields li a,
6962 +/* Icon while dragging */
6963 +.frmbutton.ui-draggable-dragging,
7674 6964 .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;
6965 + cursor: move;
7682 6966 }
7683 6967
7684 -/* Adjust field button size to full width in builder */
7685 -#frm-insert-fields li a {
7686 - display: flex !important;
6968 +.frmbutton.ui-sortable-helper a,
6969 +.frmbutton.ui-draggable-dragging a:hover,
6970 +.frmbutton.ui-draggable-dragging a {
6971 + text-decoration: none;
6972 + height: 25px !important;
6973 + width: 180px;
6974 + text-align: center;
6975 + display: block !important;
6976 + background-color: var(--primary-hover) !important;
6977 + border-radius: 35px !important;
6978 + padding: 5px 20px !important;
6979 + color: #fff !important;
7687 6980 }
7688 6981
7689 -/* Prevents advanced fields from always appearing in search results */
7690 -#frm-insert-fields li.frm_show_upgrade.frm_hidden {
7691 - display: none !important;
6982 +.frmbutton.ui-draggable-dragging:not(.ui-sortable-helper) a {
6983 + /* When the new field is held outside of a dropzone */
6984 + cursor: not-allowed;
6985 + background: var(--sidebar-color) !important;
6986 + color: var(--dark-grey) !important;
7692 6987 }
7693 6988
7694 -.frmbutton.ui-draggable-dragging a {
7695 - border: 1px solid var(--grey-300);
7696 - box-shadow: var(--box-shadow-md);
7697 -}
7698 -
7699 6989 .frmbutton.ui-draggable-dragging span {
7700 6990 font-size: 15px;
7701 6991 }
7702 6992
7703 6993 #frm-show-fields .frmbutton.ui-sortable-helper i,
6994 +.frmbutton.ui-sortable-helper span,
7704 6995 .frmbutton.ui-draggable-dragging i,
7705 6996 .frmbutton.ui-draggable-dragging .frmsvg {
7706 6997 color: #fff !important;
7707 6998 }
7708 6999
7709 -.frmbutton.ui-draggable-dragging i,
7710 -.frmbutton.ui-draggable-dragging .frmsvg {
7711 - color: var(--grey-700) !important;
7000 +.frmbutton.ui-draggable-dragging:not(.ui-sortable-helper) i,
7001 +.frmbutton.ui-draggable-dragging:not(.ui-sortable-helper) .frmsvg {
7002 + color: var(--dark-grey) !important;
7712 7003 }
7713 7004
7005 +.frmbutton.ui-draggable-dragging .frm-dropdown-menu {
7006 + display: none;
7007 +}
7008 +
7714 7009 .frm_sorting li.ui-state-default.ui-sortable-helper,
7715 7010 .frmbutton.ui-sortable-helper {
7716 7011 transition: opacity .2s;
7717 7012 opacity: 1;
@@ -7716,13 +7011,10 @@
7716 7011 transition: opacity .2s;
7717 7012 opacity: 1;
7718 7013 }
7719 7014
7720 -.frm-field-group-count {
7721 - background-color: var(--sidebar-hover);
7722 - padding: 5px;
7723 - color: #fff !important;
7724 - border-radius: 10px;
7015 +.frmbutton.ui-sortable-helper:not(.ui-draggable-dragging) {
7016 + opacity: 0;
7725 7017 }
7726 7018
7727 7019 /* End dragging */
7728 7020
@@ -7748,64 +7040,13 @@
7748 7040 .frm_noallow a {
7749 7041 color: inherit;
7750 7042 }
7751 7043
7752 -#frm_upgrade_modal_image {
7753 - max-width: 200px;
7754 -}
7755 -
7756 -.frm-tab-message {
7757 - max-width: 600px;
7758 - margin: 20px auto;
7759 - color: rgba(63, 75, 91, 0.8);
7760 -}
7761 -
7762 -.frm-settings-screenshot-toolbar {
7763 - min-height: 39px;
7764 - display: flex;
7765 -}
7766 -
7767 -.frm-settings-screenshot-toolbar .frm-minmax-icon {
7768 - height: 8px;
7769 - width: 8px;
7770 - border-radius: 50%;
7771 - align-self: center;
7772 - margin-left: 10px;
7773 -}
7774 -
7775 -.frm-settings-screenshot-toolbar .frm-minmax-icon:first-of-type {
7776 - margin-left: 20px;
7777 -}
7778 -
7779 -.frm-settings-screenshot-toolbar img {
7780 - object-fit: contain;
7781 - align-self: flex-end;
7782 - margin-left: 25px;
7783 -}
7784 -
7785 -.frm-settings-screenshot-toolbar + div {
7786 - background: #fff;
7787 - padding-top: 25px;
7788 - border-radius: 0 0 16px 16px;
7789 -}
7790 -
7791 -.frm-settings-screenshot-toolbar + div img {
7792 - max-width: calc( 100% - 40px );
7793 -}
7794 -
7795 -.frm-settings-screenshot-wrapper {
7796 - max-width: 700px;
7797 - margin: 50px auto 0;
7798 - box-shadow: 0px 4px 4px rgba(189, 196, 205, 0.25), 0px 12px 56px rgba(42, 57, 75, 0.25);
7799 - border-radius: 16px;
7800 - background: #EBECF1;
7801 -}
7802 -
7803 7044 .frm-dialog {
7804 7045 z-index: 100;
7805 7046 padding: 0 !important;
7806 - border-radius: 16px;
7807 - border: none;
7047 + border-radius: 10px;
7048 + border: 1px solid var(--grey);
7808 7049 background-color: #fff;
7809 7050 max-width: 100% !important;
7810 7051 }
7811 7052
@@ -7812,14 +7053,20 @@
7812 7053 .frm-dialog .postbox {
7813 7054 background: transparent;
7814 7055 box-shadow: none;
7815 7056 border: none;
7816 - line-height: var(--leading);
7817 7057 }
7818 7058
7059 +.frm-dialog .frm-sub-label,
7060 +.frm-dialog label {
7061 + color: var(--dark-grey);
7062 + font-size: 17px;
7063 + font-weight: 300;
7064 +}
7065 +
7819 7066 .frm-dialog input[type=text],
7820 7067 .frm-dialog textarea {
7821 - font-size: var(--text-md);
7068 + font-size: 16px;
7822 7069 }
7823 7070
7824 7071 .frm-dialog textarea {
7825 7072 height: 75px;
@@ -7832,19 +7079,16 @@
7832 7079 .frm-dialog .frm-sub-label,
7833 7080 .frm-sub-label {
7834 7081 color: var(--grey);
7835 7082 text-transform: none;
7836 - padding-left: 8px;
7837 7083 }
7838 7084
7839 7085 h2 .frm-sub-label {
7840 - font-size: var(--text-md);
7086 + font-size: 16px;
7841 7087 }
7842 7088
7843 -.frm-views-editor-body .ui-widget-overlay,
7844 7089 .frm-white-body .ui-widget-overlay,
7845 -.toplevel_page_formidable .ui-widget-overlay,
7846 -body[class*=formidable-payments] .ui-widget-overlay {
7090 +.toplevel_page_formidable .ui-widget-overlay {
7847 7091 position: fixed;
7848 7092 width: 100%;
7849 7093 height: 100%;
7850 7094 top: 0;
@@ -7850,10 +7094,9 @@
7850 7094 top: 0;
7851 7095 left: 0;
7852 7096 right: 0;
7853 7097 bottom: 0;
7854 - background: var(--grey-500);
7855 - opacity: .5;
7098 + background: var(--grey-border);
7856 7099 z-index: 2;
7857 7100 }
7858 7101
7859 7102 #frm_upgrade_modal {
@@ -7868,15 +7111,15 @@
7868 7111 color: #c4c4c4;
7869 7112 padding-bottom: 20px;
7870 7113 }
7871 7114
7872 -.frm-upgrade-message img {
7115 +#frm-upgrade-message img {
7873 7116 max-width: 100%;
7874 7117 }
7875 7118
7876 7119 a.frm-link-secondary {
7877 7120 color: #c4c4c4;
7878 - font-size: var(--text-sm);
7121 + font-size: 14px;
7879 7122 text-decoration: underline;
7880 7123 }
7881 7124
7882 7125 .field_type_list li.button.frm_noallow,
@@ -7892,136 +7135,132 @@
7892 7135 min-height: 150px;
7893 7136 }
7894 7137
7895 7138 /*!
7896 - * Bootstrap v4.6.1
7139 + * Bootstrap v3.0.2
7897 7140 */
7898 7141
7899 7142 .tooltip {
7900 - /* Copied from Bootstrap */
7901 7143 position: absolute;
7144 + z-index: 9999999;
7902 7145 display: block;
7903 - margin: 0;
7904 - font-style: normal;
7905 - font-weight: 400;
7906 - line-height: 1.5;
7907 - text-align: left;
7908 - text-align: start;
7909 - text-decoration: none;
7910 - text-shadow: none;
7911 - text-transform: none;
7912 - letter-spacing: normal;
7913 - word-break: normal;
7914 - word-spacing: normal;
7915 - white-space: normal;
7916 - line-break: auto;
7917 - font-size: 0.875rem;
7918 - word-wrap: break-word;
7146 + visibility: visible;
7147 + font-size: 14px;
7148 + line-height: 1.4;
7919 7149 opacity: 0;
7920 -
7921 - /* Custom rules */
7922 - z-index: 9999999;
7923 - pointer-events: none;
7150 + filter: alpha(opacity=0);
7924 7151 }
7925 7152
7926 -.tooltip.show {
7927 - opacity: 0.9;
7153 +.tooltip.in {
7154 + opacity: 1;
7155 + filter: alpha(opacity=100);
7928 7156 }
7929 7157
7930 -.tooltip .arrow {
7931 - position: absolute;
7932 - display: block;
7933 - width: 0.8rem;
7934 - height: 0.4rem;
7935 - margin-left: 0 !important;
7158 +.tooltip.top {
7159 + margin-top: -3px;
7160 + padding: 5px 0;
7936 7161 }
7937 7162
7938 -.tooltip .arrow::before {
7939 - position: absolute;
7940 - content: "";
7941 - border-color: transparent;
7942 - border-style: solid;
7163 +.tooltip.right {
7164 + margin-left: 3px;
7165 + padding: 0 5px;
7943 7166 }
7944 7167
7945 -.bs-tooltip-top, .bs-tooltip-auto[x-placement^="top"] {
7946 - padding: 0.4rem 0;
7168 +.tooltip.bottom {
7169 + margin-top: 3px;
7170 + padding: 5px 0;
7947 7171 }
7948 7172
7949 -.bs-tooltip-top .arrow, .bs-tooltip-auto[x-placement^="top"] .arrow {
7950 - bottom: 0;
7173 +.tooltip.left {
7174 + margin-left: -3px;
7175 + padding: 0 5px;
7951 7176 }
7952 7177
7953 -.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before {
7954 - top: 0;
7955 - border-width: 0.4rem 0.4rem 0;
7956 - border-top-color: #000;
7178 +.tooltip-inner {
7179 + max-width: 200px;
7180 + padding: 10px;
7181 + color: #fff;
7182 + text-align: left;
7183 + text-decoration: none;
7184 + background-color: var(--dark-grey);
7185 + border-radius: 4px;
7186 + z-index: 99999999;
7187 + text-transform: none;
7957 7188 }
7958 7189
7959 -.bs-tooltip-right, .bs-tooltip-auto[x-placement^="right"] {
7960 - padding: 0 0.4rem;
7190 +.tooltip.right .tooltip-inner {
7191 + min-width: 150px;
7192 + max-width: 300px;
7961 7193 }
7962 7194
7963 -.bs-tooltip-right .arrow, .bs-tooltip-auto[x-placement^="right"] .arrow {
7964 - left: 0;
7965 - width: 0.4rem;
7966 - height: 0.8rem;
7195 +.tooltip-arrow {
7196 + position: absolute;
7197 + width: 0;
7198 + height: 0;
7199 + border-color: transparent;
7200 + border-style: solid;
7967 7201 }
7968 7202
7969 -.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before {
7970 - right: 0;
7971 - border-width: 0.4rem 0.4rem 0.4rem 0;
7972 - border-right-color: #000;
7203 +.tooltip.top .tooltip-arrow {
7204 + bottom: 0;
7205 + left: 50%;
7206 + margin-left: -5px;
7207 + border-width: 5px 5px 0;
7208 + border-top-color: var(--dark-grey);
7973 7209 }
7974 7210
7975 -.bs-tooltip-bottom, .bs-tooltip-auto[x-placement^="bottom"] {
7976 - padding: 0.4rem 0;
7211 +.tooltip.top-left .tooltip-arrow {
7212 + bottom: 0;
7213 + left: 5px;
7214 + border-width: 5px 5px 0;
7215 + border-top-color: var(--dark-grey);
7977 7216 }
7978 7217
7979 -.bs-tooltip-bottom .arrow, .bs-tooltip-auto[x-placement^="bottom"] .arrow {
7980 - top: 0;
7981 -}
7982 -
7983 -.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
7218 +.tooltip.top-right .tooltip-arrow {
7984 7219 bottom: 0;
7985 - border-width: 0 0.4rem 0.4rem;
7986 - border-bottom-color: #000;
7220 + right: 5px;
7221 + border-width: 5px 5px 0;
7222 + border-top-color: var(--dark-grey);
7987 7223 }
7988 7224
7989 -.bs-tooltip-left, .bs-tooltip-auto[x-placement^="left"] {
7990 - padding: 0 0.4rem;
7225 +.tooltip.right .tooltip-arrow {
7226 + top: 50%;
7227 + left: 0;
7228 + margin-top: -5px;
7229 + border-width: 5px 5px 5px 0;
7230 + border-right-color: var(--dark-grey);
7991 7231 }
7992 7232
7993 -.bs-tooltip-left .arrow, .bs-tooltip-auto[x-placement^="left"] .arrow {
7233 +.tooltip.left .tooltip-arrow {
7234 + top: 50%;
7994 7235 right: 0;
7995 - width: 0.4rem;
7996 - height: 0.8rem;
7236 + margin-top: -5px;
7237 + border-width: 5px 0 5px 5px;
7238 + border-left-color: var(--dark-grey);
7997 7239 }
7998 7240
7999 -.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before {
8000 - left: 0;
8001 - border-width: 0.4rem 0 0.4rem 0.4rem;
8002 - border-left-color: #000;
7241 +.tooltip.bottom .tooltip-arrow {
7242 + top: 0;
7243 + left: 50%;
7244 + margin-left: -5px;
7245 + border-width: 0 5px 5px;
7246 + border-bottom-color: var(--dark-grey);
8003 7247 }
8004 7248
8005 -.tooltip-inner {
8006 - max-width: 200px;
8007 - padding: 0.25rem 0.5rem;
8008 - color: #fff;
8009 - text-align: center;
8010 - background-color: #000;
8011 - border-radius: 0.25rem;
7249 +.tooltip.bottom-left .tooltip-arrow {
7250 + top: 0;
7251 + left: 5px;
7252 + border-width: 0 5px 5px;
7253 + border-bottom-color: var(--dark-grey);
8012 7254 }
8013 7255
8014 -.frm-dropdown-menu.show {
8015 - display: block;
7256 +.tooltip.bottom-right .tooltip-arrow {
7257 + top: 0;
7258 + right: 5px;
7259 + border-width: 0 5px 5px;
7260 + border-bottom-color: var(--dark-grey);
8016 7261 }
8017 7262
8018 -/* End Bootstrap */
8019 -
8020 -.preview.dropdown .dropdown-menu {
8021 - min-width: 205px;
8022 -}
8023 -
8024 7263 .frm_clear {
8025 7264 clear: both;
8026 7265 }
8027 7266
@@ -8059,8 +7298,10 @@
8059 7298 transition: width 0.6s ease;
8060 7299 background-color: #04A4CC;
8061 7300 }
8062 7301
7302 +/* End Bootstrap */
7303 +
8063 7304 .tooltip.frm_tooltip {
8064 7305 position: fixed;
8065 7306 top: auto !important;
8066 7307 bottom: 0 !important;
@@ -8081,25 +7322,93 @@
8081 7322 box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.5);
8082 7323 padding: 10px 40px;
8083 7324 border-top-color: #ccc;
8084 7325 background: var(--sidebar-color);
8085 - color: var(--grey-700);
7326 + color: var(--dark-grey);
8086 7327 border-radius: 0;
8087 7328 opacity: 1;
8088 - font-size: var(--text-sm);
7329 + font-size: 14px;
8089 7330 }
8090 7331
7332 +#frm_styling_form #post-body {
7333 + padding: 20px;
7334 +}
7335 +
7336 +.ui-datepicker-inline.ui-datepicker {
7337 + max-width: 19em;
7338 +}
7339 +
7340 +.default-style-box.howto {
7341 + margin-left: 20px;
7342 + font-style: normal;
7343 +}
7344 +
8091 7345 #frm_custom_css_box {
8092 7346 width: 100%;
8093 7347 }
8094 7348
7349 +#frm_styling_form .wp-picker-container .wp-color-result.button {
7350 + width: 100%;
7351 + overflow: hidden;
7352 + margin: 0 !important;
7353 + height: 32px !important;
7354 + padding: 0 0 0 30px !important;
7355 + border-radius: var(--small-radius);
7356 + border-color: var(--grey-border);
7357 +}
7358 +
7359 +#frm_styling_form .wp-color-result-text {
7360 + line-height: 30px !important;
7361 + font-size: 15px;
7362 + background: #fff !important;
7363 +}
7364 +
7365 +.wp-picker-open + .wp-picker-input-wrap {
7366 + position: absolute;
7367 + margin-left: -87px;
7368 + margin-top: 1px;
7369 + width: 86px;
7370 +}
7371 +
7372 +.wp-picker-container input[type="text"].wp-color-picker {
7373 + border: none;
7374 + padding: 3px;
7375 + font-family: inherit;
7376 + color: var(--dark-grey);
7377 + font-size: 15px;
7378 + width: 100%;
7379 + line-height: 1;
7380 + text-align: center;
7381 +}
7382 +
7383 +.wp-picker-input-wrap .wp-picker-clear {
7384 + display: none !important;
7385 +}
7386 +
7387 +.wp-picker-holder {
7388 + position: absolute;
7389 + z-index: 999;
7390 +}
7391 +
7392 +.frm_end .wp-picker-holder {
7393 + margin-left: -145px;
7394 +}
7395 +
7396 +.frm_end.frm6 .wp-picker-holder {
7397 + margin-left: -86px;
7398 +}
7399 +
7400 +#frm_styling_form div.tabs-panel {
7401 + padding-left: 5px;
7402 + padding-right: 5px;
7403 +}
7404 +
8095 7405 /*form inputs/selects */
8096 7406 .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,
7407 +#postbox-container-2 input[type="text"],
7408 +#postbox-container-2 input[type="number"],
7409 +#postbox-container-2 select,
7410 +#postbox-container-2 textarea,
8102 7411 button.frm_choose_image_box,
8103 7412 #titlediv input[type="text"],
8104 7413 .frm-fields button.btn,
8105 7414 .frm_wrap textarea,
@@ -8104,11 +7413,9 @@
8104 7413 .frm-fields button.btn,
8105 7414 .frm_wrap textarea,
8106 7415 .frm_wrap input[type="tel"],
8107 7416 .frm_wrap input[type="text"],
8108 -.frm_wrap input[type=search],
8109 7417 .frm_wrap input[type="number"],
8110 -.frm_wrap input[type="date"],
8111 7418 .frm_wrap select,
8112 7419 .wp-admin .frm_wrap select,
8113 7420 .field-group textarea,
8114 7421 .field-group input[type="text"],
@@ -8115,33 +7422,17 @@
8115 7422 .field-group select {
8116 7423 outline: 0;
8117 7424 box-shadow: none;
8118 7425 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);
7426 + padding: 6px 9px;
7427 + border-color: var(--grey-border);
7428 + color: var(--dark-grey);
7429 + font-size: 15px;
8123 7430 margin: 0;
8124 7431 background-color: #fff;
8125 - line-height: var(--leading);
7432 + line-height: 1;
8126 7433 }
8127 7434
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 7435 #postbox-container-2 textarea,
8145 7436 .frm_wrap textarea,
8146 7437 .field-group textarea {
8147 7438 line-height: 2;
@@ -8158,12 +7449,19 @@
8158 7449 .wp-admin .frm_wrap select {
8159 7450 max-width: 100%;
8160 7451 }
8161 7452
8162 -.frm_form_field.frm_scroll_box .frm_opt_container {
7453 +.frm_form_field.frm_scroll_box .frm_opt_container,
7454 +.frm_wrap .frm_form_builder textarea,
7455 +.frm_wrap .frm_form_builder input[type="tel"],
7456 +.frm_wrap .frm_form_builder input[type="text"] {
8163 7457 padding: 10px 12px;
8164 7458 }
8165 7459
7460 +.frm_wrap .frm_form_builder input[type="text"].frm_other_input {
7461 + padding: 6px 9px;
7462 +}
7463 +
8166 7464 .frm_wrap input[disabled],
8167 7465 .frm_wrap select[disabled],
8168 7466 .frm_wrap textarea[disabled],
8169 7467 .frm_wrap input[readonly],
@@ -8169,23 +7467,37 @@
8169 7467 .frm_wrap input[readonly],
8170 7468 .frm_wrap select[readonly],
8171 7469 .frm_wrap textarea[readonly],
8172 7470 .frm_wrap input::placeholder {
8173 - color: var(--grey-500);
7471 + color: var(--grey);
8174 7472 }
8175 7473
7474 +#postcustomstuff table input {
7475 + width: 100% !important;
7476 + margin: 0 !important;
7477 +}
7478 +
7479 +#postcustomstuff table td {
7480 + padding: 7px 0 7px 7px !important;
7481 + line-height: 30px;
7482 +}
7483 +
8176 7484 #postcustomstuff table td > div {
8177 7485 /* To override some inline css in add-on */
8178 7486 padding-top: 0 !important;
8179 7487 }
8180 7488
8181 -.wp-admin .frm_wrap .form-table select {
7489 +.wp-admin .frm_wrap .form-table select,
7490 +#postbox-container-2 select,
7491 +.wp-admin .frm_wrap select {
7492 + line-height: 32px;
7493 + height: 32px;
8182 7494 vertical-align: top;
8183 7495 }
8184 7496
8185 7497 .frm_wrap .frm_form_builder select {
8186 - line-height: var(--leading);
8187 - height: var(--text-md);
7498 + line-height: 40px;
7499 + height: 40px;
8188 7500 width: 100%;
8189 7501 }
8190 7502
8191 7503 #postbox-container-2 select,
@@ -8191,25 +7503,11 @@
8191 7503 #postbox-container-2 select,
8192 7504 .wp-admin .frm_wrap select,
8193 7505 .frm_wrap .frm_form_builder select {
8194 7506 height: auto;
8195 - background-position: right 11px top 55%;
7507 + padding: 0 24px 0 12px;
8196 7508 }
8197 7509
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 7510 .frm-fields button.btn,
8213 7511 .frm-fields textarea,
8214 7512 .frm-fields input[type="text"],
8215 7513 .frm-fields select,
@@ -8221,9 +7519,10 @@
8221 7519 outline: 0;
8222 7520 }
8223 7521
8224 7522 .frm-fields button.btn {
8225 - height: var(--h-md);
7523 + line-height: normal;
7524 + height: auto;
8226 7525 text-align: inherit;
8227 7526 }
8228 7527
8229 7528 .global-font .field-group input[type="text"] {
@@ -8229,53 +7528,8 @@
8229 7528 .global-font .field-group input[type="text"] {
8230 7529 width: auto;
8231 7530 }
8232 7531
8233 -/* Image Options */
8234 -
8235 -.frm_images_dropdown .frm_image_option {
8236 - margin: 0 !important;
8237 -}
8238 -
8239 -.frm_images_dropdown .frm_radio input[type=radio] {
8240 - opacity: 0;
8241 - position: absolute;
8242 - z-index: -1;
8243 -}
8244 -
8245 -.frm_images_dropdown__image .frmsvg {
8246 - width: 100%;
8247 - max-width: 102px;
8248 - fill: none;
8249 - margin: 0;
8250 -}
8251 -
8252 -.frm_images_dropdown .frm_noallow .frm_image_option_container {
8253 - opacity: .5;
8254 -}
8255 -
8256 -.frm_images_dropdown .frm_image_option_container {
8257 - border-radius: var(--small-radius);
8258 - border: 2px solid transparent;
8259 - align-items: center;
8260 -}
8261 -
8262 -.frm_images_dropdown .frm_image_option_container:hover {
8263 - background: #fff !important;
8264 -}
8265 -
8266 -.frm_images_dropdown input[type="radio"]:checked + .frm_image_option_container {
8267 - background: #fff !important;
8268 - border-color: var(--primary-500);
8269 -}
8270 -
8271 -.frm_images_dropdown .frm_text_label_for_image {
8272 - padding: 0;
8273 - text-align: left;
8274 -}
8275 -
8276 -/* End Image Options */
8277 -
8278 7532 /* Welcome page */
8279 7533
8280 7534 .wp-core-ui .frm_grey.frm-button-primary.disabled,
8281 7535 .wp-core-ui .frm_grey.frm-button-primary,
@@ -8294,9 +7548,9 @@
8294 7548 }
8295 7549
8296 7550 .windows::-webkit-scrollbar-thumb,
8297 7551 .windows ::-webkit-scrollbar-thumb {
8298 - background: var(--grey-300);
7552 + background: var(--grey-border);
8299 7553 -webkit-border-radius: var(--border-radius);
8300 7554 -webkit-box-shadow: none;
8301 7555 }
8302 7556
@@ -8318,9 +7572,8 @@
8318 7572 .rtl #frm_top_bar #frm_bs_dropdown {
8319 7573 padding-left: 15px;
8320 7574 }
8321 7575
8322 -.rtl .frm-full-close,
8323 7576 .rtl .frm_wrap .columns-2 .frm-right-panel,
8324 7577 .rtl .frm-right-panel {
8325 7578 border-right-width: 1px;
8326 7579 border-left-width: 0;
@@ -8325,14 +7578,9 @@
8325 7578 border-right-width: 1px;
8326 7579 border-left-width: 0;
8327 7580 }
8328 7581
8329 -.rtl .frm-full-close {
8330 - padding-left: 0;
8331 - padding-right: var(--gap-md);
8332 -}
8333 -
8334 -.rtl .frm-text-right {
7582 +.rtl .frm_right_text {
8335 7583 text-align: left;
8336 7584 }
8337 7585
8338 7586 .rtl .frm_wrap #frm_adv_info ul.category-tabs li:first-child {
@@ -8377,39 +7625,22 @@
8377 7625 right: unset;
8378 7626 left: 2px;
8379 7627 }
8380 7628
7629 +.rtl #frm_upgrade_modal .dismiss i,
7630 +.rtl .frm-inline-modal i,
7631 +.rtl #frm-bulk-modal i,
8381 7632 .rtl .frm_has_shortcodes > i {
8382 7633 right: auto;
8383 7634 left: 5px;
8384 7635 }
8385 7636
7637 +.rtl .frm_code_list.frm-full-hover a span,
8386 7638 .rtl .frm_reply_to_container,
8387 7639 .rtl .frm_bcc_cc_container {
8388 7640 float: left;
8389 7641 }
8390 7642
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 7643 /* ---------------------------------------------------------------
8413 7644 Clearfix
8414 7645 --------------------------------------------------------------- */
8415 7646 span.clear {
@@ -8451,12 +7682,15 @@
8451 7682 @media only screen and (max-width: 1200px) {
8452 7683 .frm-addons {
8453 7684 grid-template-columns: 1fr 1fr;
8454 7685 }
7686 +
7687 + ul.frm_form_nav > li {
7688 + margin-right: 2.5%;
7689 + }
8455 7690 }
8456 7691
8457 7692 @media only screen and (max-width: 1050px) {
8458 - .frm-white-body,
8459 7693 .frm_wrap {
8460 7694 --biggest-sidebar: 390px;
8461 7695 }
8462 7696
@@ -8466,18 +7700,15 @@
8466 7700
8467 7701 .frm_actions_list {
8468 7702 margin-left: 0;
8469 7703 }
7704 +
7705 + ul.frm_form_nav > li {
7706 + margin-right: 1.5%;
7707 + }
8470 7708 }
8471 7709
8472 7710 @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 7711 .auto-fold #adminmenuwrap {
8481 7712 width: 36px;
8482 7713 }
8483 7714
@@ -8488,40 +7719,36 @@
8488 7719 p.howto {
8489 7720 display: inline-block;
8490 7721 }
8491 7722
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;
7723 + ul.frm_form_nav {
7724 + clear: left;
7725 + padding-top: 0;
8496 7726 }
8497 7727
8498 - .frm-admin-footer-links {
8499 - padding-left: 36px;
7728 + ul.frm_form_nav > li {
7729 + margin-right: 3.5%;
8500 7730 }
8501 7731
8502 - body.rtl .frm-admin-footer-links {
8503 - padding-right: 36px;
7732 + .frm-full-screen #frm_top_bar {
7733 + padding: 0 10px !important;
8504 7734 }
7735 +
7736 + .frm-full-close {
7737 + padding: 15px 0 10px 10px;
7738 + }
7739 +
7740 + .frm-full-close .frmsvg {
7741 + padding: 0;
7742 + }
8505 7743 }
8506 7744
8507 7745 @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 7746 .frm_wrap {
8515 7747 --biggest-sidebar: 350px;
8516 7748 --big-sidebar: 350px;
8517 7749 }
8518 7750
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 7751 .frm_col_one {
8525 7752 clear: none;
8526 7753 }
8527 7754
@@ -8530,9 +7757,10 @@
8530 7757 display: block;
8531 7758 margin: 5px 0;
8532 7759 }
8533 7760
8534 - #frm_top_bar h1 {
7761 + .post-type-frm_display #frm_top_bar h1,
7762 + .frm_page_container #frm_top_bar h1 {
8535 7763 width: auto;
8536 7764 max-width: 200px;
8537 7765 }
8538 7766
@@ -8602,9 +7830,8 @@
8602 7830 }
8603 7831 }
8604 7832
8605 7833 @media only screen and (max-width: 782px) {
8606 - .frm-white-body,
8607 7834 .frm_wrap {
8608 7835 --small-sidebar: 20%;
8609 7836 --medium-sidebar: 35%
8610 7837 }
@@ -8618,9 +7845,9 @@
8618 7845 .frm_wrap #publishing-action {
8619 7846 line-height: normal;
8620 7847 }
8621 7848
8622 - .frm-white-body #screen-meta-links {
7849 + .frm-full-screen #screen-meta-links {
8623 7850 display: none;
8624 7851 }
8625 7852
8626 7853 .frm_wrap .misc-pub-section {
@@ -8679,13 +7906,8 @@
8679 7906 .with_frm_style .frm_checkbox input[type=checkbox] {
8680 7907 width: 25px !important;
8681 7908 }
8682 7909
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 7910 .wp-list-table.toplevel_page_formidable .column-entries,
8689 7911 .wp-list-table.toplevel_page_formidable .column-form_key,
8690 7912 .wp-list-table.toplevel_page_formidable .column-shortcode,
8691 7913 .wp-list-table.toplevel_page_formidable .column-created_at {
@@ -8699,13 +7921,27 @@
8699 7921 padding: 3px 8px 3px 35%;
8700 7922 text-align: left;
8701 7923 }
8702 7924
7925 + .wp-list-table.toplevel_page_formidable td.column-title:before,
7926 + .wp-list-table.toplevel_page_formidable td.column-id:before {
7927 + display: none !important;
7928 + }
7929 +
7930 + .wp-list-table.toplevel_page_formidable td.column-title,
7931 + .wp-list-table.toplevel_page_formidable td.column-id {
7932 + display: table-cell !important;
7933 + }
7934 +
8703 7935 #form_entries_page .wp-list-table th.frm_hidden,
8704 7936 #form_entries_page .wp-list-table td.frm_hidden {
8705 7937 display: none !important;
8706 7938 }
8707 7939
7940 + ul.frm_form_nav > li {
7941 + margin-right: 15px;
7942 + }
7943 +
8708 7944 .frm-white-body.auto-fold #wpcontent {
8709 7945 padding-left: 0;
8710 7946 }
8711 7947
@@ -8716,13 +7952,11 @@
8716 7952 .frm-addons {
8717 7953 grid-template-columns: 1fr;
8718 7954 }
8719 7955
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;
7956 + .frm_single_entry_page.frm_wrap .frm_page_container {
7957 + height: auto;
7958 + display: block;
8725 7959 }
8726 7960
8727 7961 .frm_single_entry_page.frm_wrap .columns-2 {
8728 7962 display: block;
@@ -8740,22 +7974,13 @@
8740 7974 border-radius: 6px;
8741 7975 }
8742 7976
8743 7977 #wp-content-media-buttons a.frm_insert_form {
8744 - padding: 0 var(--gap-sm);
7978 + padding: 0 15px;
8745 7979 }
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 7980 }
8755 7981
8756 7982 @media only screen and (max-width: 700px) {
8757 - .frm-white-body,
8758 7983 .frm_wrap {
8759 7984 --biggest-sidebar: 50%;
8760 7985 --big-sidebar: 50%;
8761 7986 }
@@ -8761,9 +7986,8 @@
8761 7986 }
8762 7987 }
8763 7988
8764 7989 @media only screen and (max-width: 600px) {
8765 - .frm-white-body,
8766 7990 .frm_wrap {
8767 7991 --small-sidebar: 45px;
8768 7992 }
8769 7993
@@ -8769,9 +7993,9 @@
8769 7993
8770 7994 .frm-form-setting-tabs a {
8771 7995 visibility: collapse;
8772 7996 font-size: 0;
8773 - padding: 0 var(--gap-sm);
7997 + padding: 0 15px;
8774 7998 }
8775 7999
8776 8000 .frm-form-setting-tabs a .frmsvg,
8777 8001 .frm-form-setting-tabs a i {
@@ -8843,12 +8067,8 @@
8843 8067 .rtl #frm_builder_page .frm_actions_dropdown > .frm-dropdown-menu {
8844 8068 right: auto;
8845 8069 left: 0;
8846 8070 }
8847 -
8848 - .frm_on_submit_type svg {
8849 - display: none;
8850 - }
8851 8071 }
8852 8072
8853 8073 @media only screen and (max-width: 475px) {
8854 8074 #frm_bs_dropdown {
@@ -8864,18 +8084,8 @@
8864 8084 margin-right: 0;
8865 8085 }
8866 8086 }
8867 8087
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 8088 /* PRINT */
8879 8089 @media print {
8880 8090 a, .misc-pub-section a {
8881 8091 color: #000 !important;
@@ -8926,9 +8136,9 @@
8926 8136 display: block;
8927 8137 padding: 20px;
8928 8138 }
8929 8139
8930 - .frm_wrap .columns-2,
8140 + .frm_page_container .columns-2,
8931 8141 .frm_wrap .frm_page_container {
8932 8142 height: auto;
8933 8143 display: block;
8934 8144 }
@@ -8965,10 +8175,9 @@
8965 8175 width: 100%;
8966 8176 }
8967 8177 }
8968 8178
8969 -.frm-admin-page-styles #frm-publishing #save_menu_header,
8970 -.frm-admin-page-styles2 #frm-publishing #save_menu_header {
8179 +.frm-admin-page-styles #frm-publishing #save_menu_header {
8971 8180 display: inline-block;
8972 8181 }
8973 8182
8974 8183 /* Change the order of subfields of the Name field in the backend */
@@ -8975,12 +8184,16 @@
8975 8184 .edit_form_item .frm_combo_inputs_container[data-name-layout="last_first"] .frm_form_subfield-first {
8976 8185 order: 2;
8977 8186 }
8978 8187
8188 +.frm-video-wrapper {
8189 + padding: 0 20px;
8190 +}
8191 +
8979 8192 .frm-video-wrapper iframe {
8980 8193 width: 100%;
8981 8194 max-width: 843px;
8982 - border-radius: var(--border-radius);
8195 + border-radius: 10px;
8983 8196 }
8984 8197
8985 8198 #frm_field_group_popup {
8986 8199 position: absolute;
@@ -8986,9 +8199,9 @@
8986 8199 position: absolute;
8987 8200 top: 0;
8988 8201 right: 0;
8989 8202 width: 366px;
8990 - max-height: 231px;
8203 + height: 231px;
8991 8204 border-radius: 8px;
8992 8205 background: #fff;
8993 8206 box-shadow: 0px 20px 48px rgba(40, 47, 54, 0.15);
8994 8207 z-index: 3;
@@ -9006,23 +8219,8 @@
9006 8219 bottom: 50px;
9007 8220 height: 196px;
9008 8221 }
9009 8222
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 8223 .frm-merge-fields-into-row #frm_field_group_popup .frm-break-field-group {
9026 8224 display: none;
9027 8225 }
9028 8226
@@ -9037,9 +8235,9 @@
9037 8235 font-size: 11px;
9038 8236 line-height: 15px;
9039 8237 text-transform: uppercase;
9040 8238 color: rgba(40, 47, 54, 0.45);
9041 - margin-bottom: 27px;
8239 + margin-bottom: 40px;
9042 8240 }
9043 8241
9044 8242 .frm-row-layout-option {
9045 8243 background: #F6F7FB;
@@ -9044,9 +8242,9 @@
9044 8242 .frm-row-layout-option {
9045 8243 background: #F6F7FB;
9046 8244 box-sizing: border-box;
9047 8245 border-radius: 2px;
9048 - padding: 15px 10px;
8246 + padding: 18px 11px;
9049 8247 }
9050 8248
9051 8249 #frm_field_group_popup .frm-row-layout-option .frm_grid_container {
9052 8250 grid-gap: 0 5%;
@@ -9054,23 +8252,22 @@
9054 8252 }
9055 8253
9056 8254 #frm_field_group_popup .frm-row-layout-option {
9057 8255 cursor: pointer;
9058 - border: 2px solid transparent;
9059 8256 }
9060 8257
9061 8258 #frm_field_group_popup .frm-row-layout-option.frm-active-row-layout,
9062 8259 #frm_field_group_popup .frm-row-layout-option:hover {
9063 - border-color: var(--primary-500);
8260 + outline: 1px solid #4199FD;
9064 8261 }
9065 8262
9066 8263 .frm-custom-field-group-layout,
9067 8264 .frm-break-field-group {
9068 - padding: 4px 24px;
8265 + padding: 5px 15px;
9069 8266 cursor: pointer;
9070 - font-size: var(--text-sm);
8267 + font-size: 14px;
9071 8268 line-height: 19px;
9072 - color: rgba(72, 78, 84, 1);
8269 + color: rgba(40, 47, 54, 0.85);
9073 8270 }
9074 8271
9075 8272 .frm-custom-field-group-layout:hover,
9076 8273 .frm-break-field-group:hover {
@@ -9115,13 +8312,12 @@
9115 8312 }
9116 8313
9117 8314 .frm-builder-popup-heading {
9118 8315 font-weight: 600;
9119 - font-size: 11px;
8316 + font-size: 12px;
9120 8317 line-height: 15px;
9121 8318 text-transform: uppercase;
9122 8319 color: rgba(40, 47, 54, 0.45);
9123 - margin-bottom: 7px;
9124 8320 }
9125 8321
9126 8322 .frm-builder-popup-subheading {
9127 8323 font-size: 12px;
@@ -9128,17 +8324,8 @@
9128 8324 line-height: 16px;
9129 8325 color: rgba(40, 47, 54, 0.45);
9130 8326 }
9131 8327
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 8328 .frm-multiselect-popup-separator {
9142 8329 height: 36px;
9143 8330 width: 1px;
9144 8331 position: relative;
@@ -9145,154 +8332,9 @@
9145 8332 top: 6px;
9146 8333 background: #C4C4C4;
9147 8334 }
9148 8335
8336 +
9149 8337 .frm-sortable-helper,
9150 8338 .frm-multiselect-key-is-down li.form-field:not(.edit_field_type_divider) {
9151 8339 pointer-events: none;
9152 8340 }
9153 -
9154 -.frm-sortable-helper {
9155 - /* Make sure the item being dragged appears above other form builder fields */
9156 - z-index: 99;
9157 -}
9158 -
9159 -#frm_banner {
9160 - width: 100%;
9161 - color: #fff;
9162 - background: var(--primary-500);
9163 - height: 40px;
9164 - line-height: 40px;
9165 - text-align: center;
9166 - position: relative;
9167 -}
9168 -
9169 -.frm-banner-emoji {
9170 - font-size: 19px;
9171 -}
9172 -
9173 -.frm-banner-emoji,
9174 -.frm-banner-title {
9175 - margin-right: 5px;
9176 - vertical-align: top;
9177 -}
9178 -
9179 -.frm-banner-cta a {
9180 - text-decoration: underline !important;
9181 -}
9182 -
9183 -.frm-banner-dismiss {
9184 - cursor: pointer;
9185 - position: absolute;
9186 - right: 10px;
9187 - top: 50%;
9188 - transform: translateY( -50% );
9189 -}
9190 -
9191 -.frm-banner-dismiss .frmsvg {
9192 - vertical-align: top;
9193 -}
9194 -
9195 -.frm-ready-made-solution:not(.frm-search-result) {
9196 - display: none !important;
9197 -}
9198 -
9199 -#frm_new_form_modal .frm-ready-made-solution {
9200 - padding: var(--gap-xs) !important;
9201 - margin: var(--gap-xs) 0 var(--gap-sm);
9202 - display: flex;
9203 - gap: var(--gap-sm);
9204 - position: relative;
9205 - overflow: visible !important;
9206 -}
9207 -
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;
9216 -}
9217 -
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 -#frm_new_form_modal .frm-ready-made-solution > div:first-child {
9230 - width: 30%;
9231 - text-align: center;
9232 -}
9233 -
9234 -#frm_leave_email_wrapper {
9235 - position: relative;
9236 - margin: 0 auto;
9237 -}
9238 -
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 -.frm-ready-made-solution h3 ~ a {
9255 - color: var(--primary-500);
9256 -}
9257 -
9258 -.frm-ready-made-solution img {
9259 - max-width: 100%;
9260 - display: block;
9261 - box-shadow: var(--box-shadow-lg);
9262 -}
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 */