PluginProbe
Formidable Forms – WordPress Form Builder for Contact Forms, Calculators, Quizzes & More / 4.11.02
Formidable Forms – WordPress Form Builder for Contact Forms, Calculators, Quizzes & More v4.11.02
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 +1511 -2701 6.4.2 → 4.11.02 View file →
@@ -1,115 +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-500: #F04438;
32 - --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);
33 17 --green: rgb(63, 172, 37);
34 18 --orange: #F15A24;
35 19 --pink: rgb(226, 42, 110);
36 20 --purple: rgb(141, 53, 245);
37 21 --border-radius: 35px;
38 - --small-radius: 8px;
22 + --small-radius: 6px;
39 23 --small-sidebar: 275px;
40 24 --medium-sidebar: 350px;
41 25 --big-sidebar: 390px;
42 26 --biggest-sidebar: 450px;
43 - --text-xs: 12px;
44 - --text-sm: 14px;
45 - --text-md: 16px;
46 - --text-lg: 18px;
47 - --text-xl: 20px;
48 - --h-xs: 24px;
49 - --h-sm: 30px;
50 - --h-md: 36px;
51 - --leading: 1.5;
52 - --gap-2xs: 4px;
53 - --gap-xs: 8px;
54 - --gap-sm: 16px;
55 - --gap-md: 24px;
56 - --gap-lg: 32px;
57 - --gap-xl: 40px;
58 - --gap-2xl: 48px;
59 - --box-shadow-sm: 0px 0.470745px 1.41223px rgba(16, 24, 40, 0.1), 0px 0.470745px 0.941489px rgba(16, 24, 40, 0.06);
60 - --box-shadow-md: 0px 1.88298px 3.76596px -0.941489px rgba(16, 24, 40, 0.1), 0px 0.941489px 1.88298px -0.941489px rgba(16, 24, 40, 0.06);
61 - --box-shadow-lg: 0px 6px 8px -2px rgba(16, 24, 40, 0.08), 0px 1.88298px 4px -1px rgba(16, 24, 40, 0.03), 0px 0.470745px 1.41223px rgba(16, 24, 40, 0.1), 0px 0.470745px 0.941489px rgba(16, 24, 40, 0.06);
62 - --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);
63 27 }
64 28
65 -@font-face {
66 - font-family: 'Inter';
67 - src: url('../fonts/Inter-VariableFont_slnt,wght.ttf?v=1') format('truetype');
68 -}
69 -
70 -.with_frm_style,
71 -.frm-white-body .wpbody-content,
72 -.frm_wrap {
73 - font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
74 -}
75 -
76 -/* Safari 11+ */
77 -@media not all and (min-resolution:.001dpcm) {
78 - @supports (-webkit-appearance:none) and (stroke-color:transparent) {
79 - .with_frm_style,
80 - .frm-white-body .wpbody-content,
81 - .frm_wrap {
82 - -webkit-font-smoothing: antialiased;
83 - }
84 - }
85 -}
86 -
87 -.frm-white-body,
88 -.frm-white-body p,
89 -.frm_wrap,
90 -.frm_wrap p,
91 -.frm-modal,
92 -.frm-white-body .postbox .inside {
93 - font-size: var(--text-sm);
94 - color: var(--grey-500);
95 - line-height: var(--leading);
96 -}
97 -
98 -body:not(.frm-admin-page-styles):not(.frm-admin-page-style) .with_frm_style .frm_form_fields > fieldset {
99 - --fieldset-padding: 15px 0;
100 -}
101 -
102 29 a, .widget .widget-top, .stuffbox h3, .frm-collapsed {
103 30 cursor: pointer;
104 31 text-decoration: none;
105 32 }
106 33
107 -.post-type-frm_display .wrap > #posts-filter,
108 34 .wrap.frm-with-margin,
109 35 #frm_top_bar + .wrap,
110 36 .frm_wrap > .wrap {
111 - margin: var(--gap-sm) var(--gap-md) var(--gap-md);
37 + margin: 10px 40px 30px;
112 38 }
113 39
114 40 .frm-full-screen #wpbody-content > .wrap {
115 41 margin: 0;
@@ -118,12 +44,23 @@
118 44 .post-type-frm_display .wrap {
119 45 margin: 0;
120 46 }
121 47
48 +.columns-2 .frm-right-panel + #post-body-content {
49 + padding-bottom: 26px;
50 + border-left: 1px solid var(--sidebar-hover);
51 +}
52 +
122 53 .toplevel_page_formidable #post-body-content {
123 54 overflow-x: visible;
124 55 }
125 56
57 +.formidable_page_formidable-pro-upgrade #wpfooter,
58 +.toplevel_page_formidable #wpfooter {
59 + border-top: 1px solid #ddd;
60 + background: #fff;
61 +}
62 +
126 63 .frm-full-screen {
127 64 height: 100%;
128 65 overflow: hidden;
129 66 }
@@ -133,10 +70,8 @@
133 70 .frm-full-screen.post-type-frm_display {
134 71 overflow: auto;
135 72 }
136 73
137 -.frm-full-screen #wpadminbar,
138 -.frm-full-screen #adminmenumain,
139 74 .frm-full-screen .wp-header-end {
140 75 display: none;
141 76 }
142 77
@@ -142,43 +77,30 @@
142 77
143 78 .frm-full-screen #wpbody-content,
144 79 .frm-full-screen #wpbody,
145 80 .frm-full-screen #wpcontent {
146 - padding: 0;
81 + padding-bottom: 0;
147 82 overflow: hidden;
148 - margin: 0 !important;
149 83 }
150 84
151 -.frm-white-body #wpbody-content {
152 - position: relative; /* For screen meta links */
153 - padding-bottom: 0;
154 -}
155 -
156 85 .post-new-php.post-type-frm_display #screen-meta-links,
157 -.post-php.post-type-frm_display #screen-meta-links {
86 +.post-php.post-type-frm_display #screen-meta-links,
87 +.frm-full-screen #wpfooter {
158 88 display: none;
159 89 }
160 90
161 -.frm-white-body #screen-meta-links {
162 - position: fixed;
163 - bottom: 0;
164 - 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);
165 97 }
166 98
167 -.frm-full-screen #screen-meta-links .screen-meta-toggle {
168 - right: 55px;
169 -}
170 -
171 99 .frm-white-body #screen-meta-links .show-settings {
172 - border-radius: var(--small-radius) var(--small-radius) 0 0;
173 - border: 1px solid var(--grey-300);
174 - border-bottom: none;
100 + box-shadow: none;
175 101 }
176 102
177 -.frm-white-body.frm-lite #screen-meta-links .screen-meta-toggle {
178 - right: 125px; /* Don't cover the lite upgrade button */
179 -}
180 -
181 103 .frm-white-body #screen-meta {
182 104 margin: 0;
183 105 }
184 106
@@ -186,9 +108,9 @@
186 108 color: var(--grey);
187 109 }
188 110
189 111 .frm-white-body .columns-2 {
190 - border-bottom: 1px solid var(--grey-300);
112 + border-bottom: 1px solid var(--grey-border);
191 113 }
192 114
193 115 .frm-full-screen .columns-2 {
194 116 border: none;
@@ -218,13 +140,8 @@
218 140 .frm_wrap .tablenav {
219 141 margin-bottom: 10px;
220 142 }
221 143
222 -.frm-white-body .tablenav .actions select,
223 -.wp-admin .frm_wrap .tablenav select {
224 - margin-right: var(--gap-xs);
225 -}
226 -
227 144 .tablenav .actions .button {
228 145 margin-top: 1px;
229 146 }
230 147
@@ -240,17 +157,17 @@
240 157 background: #fff;
241 158 }
242 159
243 160 .frm-white-body table.widefat th {
244 - font-size: var(--text-md);
161 + font-size: 16px;
245 162 }
246 163
247 164 .frm-white-body table.widefat th a {
248 - color: var(--grey-700);
165 + color: var(--dark-grey);
249 166 }
250 167
251 168 .frm-white-body table.widefat strong a {
252 - color: var(--primary-700);
169 + color: var(--primary-hover);
253 170 }
254 171
255 172 .frm-scroll-box {
256 173 clear: both;
@@ -255,9 +172,9 @@
255 172 .frm-scroll-box {
256 173 clear: both;
257 174 overflow: auto;
258 175 max-height: 405px;
259 - border: 1px solid var(--grey-300);
176 + border: 1px solid var(--grey-border);
260 177 border-radius: var(--small-radius);
261 178 }
262 179
263 180 .frm_form_field.frm_scroll_box .frm_opt_container {
@@ -262,9 +179,9 @@
262 179
263 180 .frm_form_field.frm_scroll_box .frm_opt_container {
264 181 height: 100px;
265 182 overflow: auto;
266 - border: 1px solid var(--grey-300);
183 + border: 1px solid var(--grey-border);
267 184 }
268 185
269 186 .frm-short-list {
270 187 overflow: auto;
@@ -271,9 +188,9 @@
271 188 max-height: 190px;
272 189 }
273 190
274 191 .frm-white-body table.frm-border td {
275 - font-size: var(--text-sm);
192 + font-size: 14px;
276 193 }
277 194
278 195 .frm-white-body .striped > tbody > :nth-child(odd) {
279 196 background-color: #fff;
@@ -287,149 +204,56 @@
287 204 float: right;
288 205 }
289 206
290 207 #frm_top_bar {
291 - display: flex;
292 - gap: var(--gap-sm);
208 + display: block;
293 209 width: 100%;
294 - height: 72px;
210 + max-height: 100px;
211 + padding: 25px 40px 25px;
295 212 margin: 0;
296 213 box-sizing: border-box;
297 214 text-align: center;
298 - padding: 0 var(--gap-md);
299 215 }
300 216
301 -#frm_top_bar > .frm-full-close:last-child,
302 -#frm_top_bar > #frm-publishing:last-child {
303 - margin-left: auto;
304 -}
305 -
306 -#frm_top_bar {
307 - border-bottom: 1px solid var(--grey-300);
308 - 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;
309 222 overflow: visible;
310 223 }
311 224
312 -.frm-white-body h1,
313 -.frm-white-body h2,
314 -.frm-white-body h3,
315 -.frm-white-body h4 {
316 - color: var(--grey-900);
317 - font-weight: 400;
318 - line-height: var(--leading) !important;
225 +.frm-full-screen #frm_top_bar {
226 + padding: 0 15px !important;
319 227 }
320 228
321 -.frm-white-body .wrap h1,
322 -.frm-white-body h1 {
323 - font-size: var(--text-xl);
324 -}
325 -
326 -.frm-white-body .wrap h2,
327 -.frm-white-body h2 {
328 - font-size: var(--text-lg);
329 -}
330 -
331 -.frm-white-body .wrap h3,
332 -.frm-white-body h3 {
333 - font-size: var(--text-md);
334 -}
335 -
336 -.frm-white-body .wrap h4,
337 -.frm-white-body h4 {
338 - font-size: var(--text-sm);
339 - font-weight: 500;
340 -}
341 -
342 -/* Override CSS in Views plugin. */
343 -.frm-views-editor-body .frm_page_container #frm_top_bar h1 {
344 - padding: 0 !important;
345 - color: var(--grey-900);
346 - font-size: var(--text-xl) !important;
347 -}
348 -
349 -.post-type-frm_display .frm_top_left {
350 - padding-bottom: 0 !important;
351 -}
352 -
353 -.frm-new-table-view-option.frm-selected-table-view-option {
354 - border-radius: var(--small-radius);
355 - background: var(--primary-25);
356 -}
357 -
358 -.frm-views-editor-body #frm_adv_info .tabs-panel { /* Views sidebar */
359 - padding-left: 4px;
360 - padding-right: 4px;
361 -}
362 -
363 -#frm_edit_box_content_modal .frm_modal_footer {
364 - padding-top: var(--gap-sm);
365 - border-top: 1px solid var(--grey-300);
366 -}
367 -
368 -#frm_edit_box_content_modal .frm_modal_footer > div {
369 - display: flex;
370 - justify-content: space-between;
371 -}
372 -
373 -#frm_edit_box_content_modal #frm_modal_box_select_area,
374 -#frm_edit_box_content_modal #frm_box_content_wysiwyg_wrapper,
375 -#frm_edit_box_content_modal .frm_modal_content {
376 - max-height: calc(100vh - 176px) !important;
377 -}
378 -
379 -#frm_edit_box_content_modal #frm_modal_box_select_area {
380 - height: calc(100vh - 176px) !important;
381 -}
382 -
383 -#frm_edit_box_content_modal #wp-content-editor-tools {
384 - padding-top: 0;
385 -}
386 -
387 -#frm_edit_box_content_modal.frm-modal .postbox .frm-modal-title + div:last-child {
388 - right: var(--gap-md);
389 -}
390 -
391 -.frm_code_list.frm-full-hover .frm-dropdown-view a {
392 - flex-direction: row-reverse; /* Switch in the HTML */
393 -}
394 -
395 -#frm_view_editor_left.frm-right-panel .accordion-section-title:before {
396 - content: '' !important;
397 - margin: 0;
398 -}
399 -/** End Temporary View CSS */
400 -
401 229 .frm-upgrade-bar {
402 - background: rgba(188, 224, 253, 0.23);
230 + text-align: center;
231 + background: var(--sidebar-color);
403 232 border-bottom: 1px solid var(--sidebar-hover);
404 - padding: 3px 0 3px 40px;
233 + padding: 3px 0;
405 234 font-size: 95%;
406 235 }
407 236
408 237 .frm-upgrade-bar span {
409 - opacity: .9;
238 + opacity: .5;
410 239 }
411 240
412 241 a h1 .frmsvg {
413 - color: var(--grey-400);
414 - vertical-align: middle;
415 - min-width: var(--text-sm);
242 + color: var(--medium-grey);
243 + vertical-align: baseline;
416 244 }
417 245
418 -a .frmsvg {
419 - color: currentColor;
420 -}
421 -
422 246 .frm_wrap .view-switch a.current:before,
423 -.frm-white-body a,
424 -.frm_wrap a,
425 -.frm_wrap a i {
247 +a .frmsvg,
248 +.frm_wrap a i,
249 +.frm_wrap a {
426 250 color: var(--primary-color);
427 251 }
428 252
429 253 .frm_wrap a:active,
430 254 .frm_wrap a:hover {
431 - color: var(--primary-700);
255 + color: var(--primary-hover);
432 256 box-shadow: none;
433 257 }
434 258
435 259 .post-type-frm_display a:focus,
@@ -443,30 +267,34 @@
443 267 white-space: nowrap;
444 268 max-width: 250px;
445 269 overflow: hidden;
446 270 text-overflow: ellipsis;
447 - align-self: center;
448 271 }
449 272
450 -.post-type-frm_display .frm_top_left,
451 273 .frm_top_left.frm_top_wide {
452 274 max-width: 100%;
453 275 }
454 276
455 -.post-type-frm_display .frm_nav_bar .frm-header-logo,
456 -.frm_nav_bar .frm-header-logo {
457 - 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;
458 281 }
459 282
460 -#frm_top_bar .frm_form_nav {
461 - 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;
462 287 }
463 288
289 +.frm_page_container .frm-header-logo {
290 + margin-bottom: 6px;
291 +}
292 +
464 293 ul.frm_form_nav {
465 294 margin: 0 auto;
466 - padding-top: 18px;
295 + padding-top: 19px;
467 296 display: block;
468 - min-width: 240px;
469 297 }
470 298
471 299 .nav-tab-wrapper.frm_form_nav {
472 300 padding: 0 25px;
@@ -472,9 +300,9 @@
472 300 padding: 0 25px;
473 301 }
474 302
475 303 ul.frm_form_nav > li {
476 - margin: 0 min(3.5%, 32px) 0 0;
304 + margin: 0 3.5% 0 0;
477 305 display: inline-block;
478 306 }
479 307
480 308 .post-type-frm_display #advanced-sortables h2.hndle,
@@ -484,12 +312,13 @@
484 312 .frm_form_nav > li > a {
485 313 font-size: 1.3em;
486 314 text-decoration: none;
487 315 display: block;
488 - padding: 6px 2px 4px;
316 + padding: 5px 2px 15px;
489 317 font-weight: 500;
490 - color: var(--grey-700);
491 - border-bottom: 2px solid transparent;
318 + color: var(--dark-grey);
319 + border-bottom: 3px solid transparent;
320 + letter-spacing: 1px;
492 321 }
493 322
494 323 .post-type-frm_display.js .postbox .handlediv .toggle-indicator:before {
495 324 margin-top: 10px;
@@ -503,16 +332,10 @@
503 332 -webkit-box-shadow: none;
504 333 box-shadow: none;
505 334 }
506 335
507 -.frm_form_nav > li > a {
508 - font-size: var(--text-md);
509 - font-weight: 400;
510 - color: var(--grey-500);
511 -}
512 -
513 336 .frm_form_nav > li > a:hover {
514 - border-color: var(--primary-700);
337 + border-color: var(--primary-hover);
515 338 }
516 339
517 340 .frm_form_nav .frm-dropdown-menu a:hover {
518 341 background-color: #eaf2fa;
@@ -520,27 +343,24 @@
520 343
521 344 .post-type-frm_display .frm_form_nav .nav-tab-active,
522 345 .post-type-frm_display .frm_form_nav .nav-tab-active:hover,
523 346 .frm_form_nav > li a.current_page {
524 - color: var(--primary-500);
525 - border-color: var(--primary-500);
347 + color: var(--primary-color);
348 + border-color: var(--primary-color);
526 349 background: transparent;
527 - opacity: 1;
528 - font-weight: 600;
529 350 }
530 351
531 352 .frm-full-close {
532 353 display: none;
533 - padding-left: var(--gap-md);
534 - border: 0 solid var(--grey-300);
535 - border-left-width: 1px; /* Make RTL a bit less maintenance */
354 + float: right;
355 + padding: 15px 0 14px 12px;
356 + border-left: 1px solid var(--grey-border);
536 357 height: 100%;
537 358 box-sizing: border-box;
538 359 }
539 360
540 361 .frm-full-screen .frm-full-close {
541 - display: flex;
542 - align-items: center;
362 + display: block;
543 363 }
544 364
545 365 .frm-full-close a {
546 366 display: block;
@@ -549,49 +369,57 @@
549 369 .frm-full-close .frmsvg {
550 370 font-size: 20px;
551 371 width: 20px;
552 372 height: 20px;
553 - color: var(--grey-500);
373 + padding: 5px;
374 + color: var(--grey);
554 375 }
555 376
556 -#frm_top_bar h1 {
377 +.edit-php.post-type-frm_display #frm_top_bar h1,
378 +.frm_wrap #frm_top_bar h1 {
379 + font-size: 22px;
557 380 font-weight: 400;
558 381 padding: 0;
559 382 margin: 0;
560 - color: var(--grey-900);
561 - display: inline-flex;
562 - gap: var(--gap-sm);
563 - align-items: center;
383 + color: var(--medium-grey);
384 + display: inline-block;
385 + line-height: 1.4;
386 +}
387 +
388 +.frm-full-screen.post-type-frm_display #frm_top_bar h1,
389 +.post-type-frm_display #frm_top_bar h1,
390 +.frm_page_container #frm_top_bar h1 {
391 + margin: 0 15px;
392 + padding: 20px 0 0;
564 393 text-align: left;
565 394 width: 200px;
395 + line-height: 1.16;
566 396 }
567 397
568 -#frm_top_bar h1 span {
398 +.frm-full-screen.post-type-frm_display #frm_top_bar h1 span,
399 +.post-type-frm_display #frm_top_bar h1 span,
400 +.frm_page_container #frm_top_bar h1 span {
401 + font-size: 19px;
569 402 max-width: 175px;
570 403 text-overflow: ellipsis;
571 404 overflow: hidden;
572 405 white-space: nowrap;
573 406 display: inline-block;
574 - vertical-align: bottom;
575 407 }
576 408
577 -#frm_top_bar ul.frm_form_nav,
578 -#frm_top_bar .frm-header-logo,
579 -#frm_top_bar #frm_bs_dropdown {
580 - align-self: center;
581 - margin-top: 0;
582 - margin-bottom: 0;
583 - padding-top: 0;
409 +#frm_top_bar h1,
410 +#frm_top_bar h2 {
411 + color: var(--medium-grey);
584 412 }
585 413
586 -#frm_top_bar .frm-header-logo {
587 - display: flex; /* Get rid of extra padding below logo */
414 +#frm_top_bar #frm_bs_dropdown {
415 + float: left;
588 416 }
589 417
590 418 #frm_top_bar h2 {
591 419 float: left;
592 - margin: 0 0 0 var(--gap-sm);
593 - padding: 2px 0 2px var(--gap-sm);
420 + margin: 0 0 0 15px;
421 + padding: 2px 0 2px 15px;
594 422 font-weight: normal;
595 423 border-left: 2px solid var(--grey);
596 424 }
597 425
@@ -599,19 +427,26 @@
599 427 margin-top: 0;
600 428 }
601 429
602 430 #frm-publishing {
603 - min-width: 225px;
604 - align-self: center;
605 - align-items: center;
606 - display: flex;
607 - flex-direction: row-reverse;
608 - gap: 0 var(--gap-sm);
609 - flex-wrap: wrap;
431 + float: right;
432 + margin-top: 15px;
433 + width: 225px;
434 + min-height: 10px;
610 435 }
611 436
437 +#frm-publishing #publishing-action,
438 +#frm-publishing #preview-action,
439 +#frm-preview-action,
440 +#frm-publishing > input[type=submit],
441 +#frm-publishing > .button,
442 +#frm-publishing > button {
443 + float: right;
444 + margin: 0 10px 0 0;
445 +}
446 +
612 447 .frm_wrap .postbox {
613 - border-color: var(--grey-300);
448 + border-color: var(--grey-border);
614 449 border-radius: 6px;
615 450 box-shadow: none;
616 451 }
617 452
@@ -619,9 +454,9 @@
619 454 cursor: default;
620 455 padding: 10px 20px;
621 456 margin: 0;
622 457 line-height: 1.4em;
623 - border-color: var(--grey-300);
458 + border-color: var(--grey-border);
624 459 }
625 460
626 461 .frm-pre-hndle {
627 462 font-size: 15px;
@@ -632,12 +467,8 @@
632 467 .frm-empty-row {
633 468 display: none;
634 469 }
635 470
636 -.frm-child-row {
637 - box-shadow: 5px 0px 0px 0px inset var(--sidebar-hover);
638 -}
639 -
640 471 .frm_animate_bg {
641 472 transition: background 200ms linear, color 200ms linear;
642 473 }
643 474
@@ -645,48 +476,16 @@
645 476 clear: both;
646 477 margin: 0;
647 478 }
648 479
649 -.frm_wrap .subsubsub a {
650 - line-height: var(--leading);
651 - font-size: var(--text-sm);
652 -}
653 -
654 -.frm-admin-page-styles .frm_page_container,
655 -.frm_wrap .frm_page_container { /* Use .frm_wrap to avoid messing up Views editor layout */
480 +.frm_wrap .frm_page_container {
656 481 height: calc( 100vh - 32px );
657 482 display: flex;
658 483 flex-direction: column;
659 484 overflow: hidden;
660 485 padding-top: 0;
661 - position: fixed;
662 - top: 32px;
663 - bottom: 0;
664 - left: 0;
665 - right: 0;
666 486 }
667 487
668 -.frm-admin-page-translate .frm_wrap .frm_page_container, .frm-admin-page-update_translations .frm_wrap .frm_page_container {
669 - position: static;
670 -}
671 -
672 -.auto-fold.frm-admin-page-styles .frm_page_container,
673 -.auto-fold .frm_wrap .frm_page_container {
674 - left: 160px;
675 -}
676 -
677 -.folded.frm-admin-page-styles .frm_page_container,
678 -.folded .frm_wrap .frm_page_container {
679 - left: 38px;
680 -}
681 -
682 -.frm-full-screen.frm-admin-page-styles .frm_page_container,
683 -.frm-full-screen .frm_wrap .frm_page_container {
684 - height: 100vh;
685 - top: 0;
686 - left: 0;
687 -}
688 -
689 488 .frm-full-screen.frm-admin-page-entries .frm_page_container,
690 489 .frm-new-entry .frm_page_container,
691 490 .frm-admin-page-reports .frm_page_container,
692 491 .frm_list_entry_page .frm_page_container {
@@ -697,22 +496,16 @@
697 496 .frm-new-entry .columns-2 {
698 497 border: none;
699 498 }
700 499
701 -.frm-white-body #frm_top_bar,
702 -.frm-white-body .columns-2 {
500 +.frm_wrap #frm_top_bar,
501 +.frm_wrap .columns-2 {
703 502 flex: 0 0 auto;
704 503 }
705 504
706 -.columns-2 .frm-right-panel + div {
707 - padding-bottom: var(--gap-md);
708 - border-left: 1px solid var(--sidebar-hover);
709 -}
710 -
711 -.columns-2 .frm-right-panel + div,
712 505 .frm_wrap #post-body-content {
713 506 padding-bottom: 0;
714 - padding-top: var(--gap-sm);
507 + padding-top: 20px;
715 508 margin-bottom: 0;
716 509 background: #fff;
717 510 width: auto;
718 511 float: none;
@@ -718,17 +511,16 @@
718 511 float: none;
719 512 flex: 2;
720 513 }
721 514
722 -.frm-white-body .columns-2 {
515 +.frm_wrap .columns-2 {
723 516 flex: 1;
724 517 display: flex;
725 518 overflow: hidden;
726 519 }
727 520
728 -.frm-white-body .columns-2 > div {
521 +.frm_wrap .columns-2 > div {
729 522 overflow-y: auto;
730 - box-sizing: border-box;
731 523 }
732 524
733 525 .frm_wrap .columns-2 .frm-right-panel,
734 526 .frm-right-panel {
@@ -775,9 +567,9 @@
775 567
776 568 .frm-default-switcher a.current,
777 569 .frm-default-switcher a.current .frmsvg,
778 570 .frm-default-switcher a.current i {
779 - color: var( --primary-500);
571 + color: var( --primary-color);
780 572 }
781 573
782 574 #new_fields,
783 575 .frm-has-modal,
@@ -785,15 +577,41 @@
785 577 position: relative;
786 578 }
787 579
788 580 .frm-inline-modal.postbox {
581 + border-color: var(--blue-border);
789 582 background: #fff;
790 583 }
791 584
585 +#frm_upgrade_modal .dismiss .frmsvg,
586 +.frm-inline-modal .frmsvg,
587 +#frm-bulk-modal .frmsvg,
588 +.frm_has_shortcodes > .frmsvg,
589 +#frm_upgrade_modal .dismiss i,
590 +.frm-inline-modal i,
591 +#frm-bulk-modal i,
592 +.frm_has_shortcodes > i {
593 + top: 37px;
594 + right: 5px;
595 + margin-top: -9px;
596 + padding: 5px;
597 + font-size: 10px;
598 + height: 10px;
599 + width: 10px;
600 + line-height: 9px;
601 + font-weight: bold;
602 +}
603 +
604 +#frm_upgrade_modal .dismiss .frmsvg,
605 +.frm-inline-modal .frmsvg,
606 +#frm-bulk-modal .frmsvg,
792 607 .frm_has_shortcodes .frmsvg,
793 -.frm_has_shortcodes i:not([class*=mce-]) {
608 +#frm_upgrade_modal .dismiss i,
609 +.frm-inline-modal i,
610 +#frm-bulk-modal i,
611 +.frm_has_shortcodes i {
794 612 position: absolute;
795 - color: var(--primary-500);
613 + color: var(--primary-color);
796 614 border-radius: 50%;
797 615 border: 1px solid transparent;
798 616 z-index: 100;
799 617 text-align: center;
@@ -798,8 +616,51 @@
798 616 z-index: 100;
799 617 text-align: center;
800 618 }
801 619
620 +#frm_info_modal .dismiss .frmsvg,
621 +#frm_confirm_modal .dismiss .frmsvg,
622 +#frm_upgrade_modal .dismiss .frmsvg,
623 +#frm_info_modal .dismiss i,
624 +#frm_confirm_modal .dismiss i,
625 +#frm_upgrade_modal .dismiss i {
626 + top: 7px;
627 + right: 7px;
628 +}
629 +
630 +#frm-bulk-modal .frmsvg,
631 +#frm-bulk-modal i {
632 + top: 15px;
633 + right: 7px;
634 +}
635 +
636 +.frm-inline-modal .frmsvg,
637 +.frm-inline-modal i {
638 + top: 18px;
639 + right: 7px;
640 + font-size: 11px;
641 + height: 11px;
642 + width: 11px;
643 +}
644 +
645 +#frm_upgrade_modal .dismiss:hover .frmsvg,
646 +.frm-inline-modal .dismiss:hover .frmsvg,
647 +#frm-bulk-modal .dismiss:hover .frmsvg,
648 +#frm_upgrade_modal .dismiss i:hover,
649 +.frm-inline-modal i:hover,
650 +#frm-bulk-modal i:hover {
651 + background: var(--sidebar-color);
652 +}
653 +
654 +#frm_upgrade_modal .dismiss .frmsvg,
655 +.frm-inline-modal .dismiss .frmsvg,
656 +#frm-bulk-modal .dismiss .frmsvg,
657 +#frm_upgrade_modal .dismiss .frm_close_icon,
658 +.frm-inline-modal .frm_close_icon,
659 +#frm-bulk-modal .frm_close_icon {
660 + border-color: var(--primary-color);
661 +}
662 +
802 663 .frm_has_shortcodes input,
803 664 .frm_has_shortcodes textarea {
804 665 padding-left: 18px;
805 666 box-sizing: border-box;
@@ -806,11 +667,13 @@
806 667 }
807 668
808 669 #form_settings_page #frm_adv_info {
809 670 display: none;
671 + position: absolute;
810 672 top: 0;
811 - width: 310px;
812 - max-height: 315px;
673 + left: 0;
674 + width: 300px;
675 + max-height: 350px;
813 676 min-height: 200px;
814 677 overflow-y: scroll;
815 678 z-index: 100;
816 679 }
@@ -821,14 +684,10 @@
821 684 width: var(--small-sidebar);
822 685 min-width: var(--small-sidebar);
823 686 }
824 687
825 -#form_global_settings .frm_grid_container {
826 - gap: 0 var(--gap-md);
827 -}
828 -
829 688 .frm-inner-content {
830 - padding: var(--gap-md);
689 + padding: 10px 25px;
831 690 }
832 691
833 692 .post-type-frm_display #poststuff {
834 693 padding: 0 0 10px 40px;
@@ -894,17 +753,18 @@
894 753 }
895 754
896 755 .frm-right-panel .frm_field_list #frm-insert-fields {
897 756 max-height: none;
898 - font-size: var(--text-sm);
757 + font-size: 14px;
899 758 padding: 0;
900 759 }
901 760
902 -.frm-nav-tabs {
761 +.frm-nav-tabs,
762 +#frm-bulk-modal h2 {
903 763 margin: 10px 0 20px;
904 - padding: 0 var(--gap-sm);
764 + padding: 0 15px;
905 765 display: block;
906 - border-bottom: 1px solid var(--grey-300);
766 + border-bottom: 2px solid var(--sidebar-hover);
907 767 }
908 768
909 769 #frm-nav-tabs {
910 770 position: -webkit-sticky;
@@ -915,20 +775,11 @@
915 775 margin-top: 0;
916 776 padding-top: 5px;
917 777 }
918 778
919 -.frm_form_settings #frm_adv_info #frm-nav-tabs {
920 - background-color: #fff;
921 - margin: 0 -4px;
922 -}
923 -
924 -.frm_form_settings span.frm-with-right-icon {
925 - display: block;
926 -}
927 -
928 779 .frm-inline-modal .frm-nav-tabs,
929 780 #frm_adv_info .frm-nav-tabs {
930 - margin: 5px 0 0;
781 + margin: 5px 0 10px;
931 782 }
932 783
933 784 #frm_adv_info .frm-nav-tabs.frm-compact-nav {
934 785 padding-right: 0;
@@ -934,25 +785,23 @@
934 785 padding-right: 0;
935 786 padding-left: 20px;
936 787 }
937 788
789 +#frm-bulk-modal h2,
938 790 .frm-nav-tabs li {
939 791 display: inline-block;
792 + font-size: 15px;
940 793 margin: 0;
941 794 }
942 795
796 +#frm-bulk-modal h2,
943 797 .frm-nav-tabs a {
944 - color: var(--grey-700);
798 + color: var(--grey);
945 799 padding: 10px 1px;
946 800 margin: 0 9px;
947 801 border-bottom: 2px solid transparent;
948 802 }
949 803
950 -.frm_form_settings #frm_adv_info .frm-nav-tabs a {
951 - padding: 5px 1px;
952 - color: var(--grey-500);
953 -}
954 -
955 804 .frm-nav-tabs.frm-compact-nav a {
956 805 margin: 0 5px;
957 806 }
958 807
@@ -957,41 +806,36 @@
957 806 }
958 807
959 808 .frm-nav-tabs a {
960 809 display: block;
961 - opacity: .9;
962 810 }
963 811
964 812 #frm_adv_info .frm-nav-tabs a {
965 - color: var(--grey-700);
813 + color: var(--dark-grey);
966 814 }
967 815
816 +#frm-bulk-modal h2,
968 817 .frm-nav-tabs a:hover,
969 818 .frm-nav-tabs .frm-tabs a {
970 - color: var(--primary-500) !important;
971 - border-color: var(--primary-500);
819 + color: var(--primary-color) !important;
820 + border-color: var(--primary-color);
972 821 }
973 822
974 -.frm_form_settings #frm_adv_info .frm-nav-tabs .frm-tabs a {
975 - font-weight: 500;
823 +#frm-bulk-modal h3,
824 +#frm-bulk-modal h2 {
825 + font-size: 16px;
826 + margin-left: 20px;
827 + font-weight: 400;
976 828 }
977 829
978 -#frm-bulk-modal .howto,
979 830 #frm-bulk-modal h3 {
980 - font-size: var(--text-sm);
981 - font-weight: 400;
982 - margin: 5px 0 10px;
831 + margin: 5px 20px 10px;
983 832 color: var(--grey);
984 833 }
985 834
986 -#frm-bulk-modal h3 {
987 - margin-left: 20px;
988 -}
989 -
990 -.frm-right-panel a.frm_add_logic_link,
991 835 .frm-right-panel h3 {
992 - color: var(--grey-700);
993 - font-size: var(--text-lg);
836 + color: var(--dark-grey);
837 + font-size: 20px;
994 838 font-weight: 400;
995 839 border-top: 2px solid var(--sidebar-hover);
996 840 margin: 0;
997 841 }
@@ -1001,17 +845,10 @@
1001 845 border-top: none;
1002 846 padding-top: 0 !important;
1003 847 }
1004 848
1005 -.frm-flex-justify,
1006 -.frm-right-panel .frm-single-settings h3 {
1007 - display: flex;
1008 - justify-content: space-between;
1009 - align-items: center;
1010 -}
1011 -
1012 849 .frm-right-panel h3 i {
1013 - color: var(--grey-700);
850 + color: var(--dark-grey);
1014 851 float: right;
1015 852 width: 16px;
1016 853 cursor: pointer;
1017 854 }
@@ -1073,12 +910,8 @@
1073 910 .frm_wrap #frm-categorydiv {
1074 911 border-right: none;
1075 912 }
1076 913
1077 -#frm_adv_info #frm-conditionals {
1078 - padding-top: var(--gap-sm);
1079 -}
1080 -
1081 914 #postbox-container-1 #taxonomy-linkcategory #frm-html-tags {
1082 915 display: none;
1083 916 max-height: none;
1084 917 }
@@ -1086,49 +919,12 @@
1086 919 #postbox-container-1 .frm_field_list #frm-insert-fields .frmbutton.dropdown {
1087 920 position: relative;
1088 921 }
1089 922
1090 -/* Admin footer */
1091 -.frm-white-body #footer-upgrade {
923 +.toplevel_page_formidable #footer-upgrade {
1092 924 display: none;
1093 925 }
1094 926
1095 -.frm-admin-footer-links,
1096 -.frm-admin-footer-links-nav,
1097 -.frm-admin-footer-links-socials {
1098 - display: flex;
1099 - justify-content: center;
1100 -}
1101 -
1102 -.frm-admin-footer-links {
1103 - gap: var(--gap-2xs);
1104 - flex-direction: column;
1105 - text-align: center;
1106 - padding: var(--gap-xl) 0 var(--gap-lg) 160px;
1107 - font-size: var(--text-xs);
1108 - color: var(--grey-400);
1109 -}
1110 -
1111 -body.rtl .frm-admin-footer-links {
1112 - padding-left: unset;
1113 - padding-right: 160px;
1114 -}
1115 -
1116 -
1117 -.frm-admin-footer-links-nav {
1118 - gap: var(--gap-2xs);
1119 - margin-bottom: var(--gap-xs);
1120 -}
1121 -
1122 -.frm-admin-footer-links-socials {
1123 - gap: var(--gap-xs);
1124 -}
1125 -
1126 -.frm-admin-footer-links-socials a {
1127 - color: var(--grey-400);
1128 -}
1129 -/* End Admin footer */
1130 -
1131 927 .frm_list_entry_page h2 {
1132 928 float: left;
1133 929 }
1134 930
@@ -1135,8 +931,13 @@
1135 931 .frm_list_entry_page h2 + .error {
1136 932 clear: both;
1137 933 }
1138 934
935 +#titlediv #title {
936 + line-height: 1.5;
937 + height: auto;
938 +}
939 +
1139 940 .frm_sidebar select {
1140 941 width: 100%;
1141 942 margin-left: 0;
1142 943 margin-right: 0;
@@ -1173,12 +974,14 @@
1173 974
1174 975 /* Buttons */
1175 976
1176 977 .frm_orange_button,
1177 -.frm_reverse_button {
978 +.frm_reverse_button,
979 +.post-type-frm_display .wrap .add-new-h2 {
1178 980 font-size: 12px;
1179 981 border: 1px solid var(--orange);
1180 982 color: var(--orange);
983 + line-height: 1.4;
1181 984 font-weight: 600;
1182 985 padding: 1px 4px;
1183 986 border-radius: 4px;
1184 987 background: transparent;
@@ -1183,11 +986,33 @@
1183 986 border-radius: 4px;
1184 987 background: transparent;
1185 988 }
1186 989
990 +.post-type-frm_display .wrap .add-new-h2 {
991 + margin: 1px 0 0 10px;
992 + text-transform: lowercase;
993 + position: initial;
994 + vertical-align: middle;
995 +}
996 +
997 +h1 .frm-button-secondary,
998 +h1 .frm-button-primary,
999 +h2 .frm-button-secondary,
1000 +h2 .frm-button-primary {
1001 + font-size: 14px !important;
1002 + font-weight: normal;
1003 + margin: 0 5px !important;
1004 + line-height: 23px !important;
1005 + vertical-align: text-bottom !important;
1006 + height: auto !important;
1007 +}
1008 +
1187 1009 .frm_reverse_button:hover,
1188 1010 .frm_reverse_button:active,
1189 -.frm_reverse_button:focus {
1011 +.frm_reverse_button:focus,
1012 +.post-type-frm_display .wrap .add-new-h2:hover,
1013 +.post-type-frm_display .wrap .add-new-h2:active,
1014 +.post-type-frm_display .wrap .add-new-h2:focus {
1190 1015 color: #fff;
1191 1016 background: var(--orange);
1192 1017 border: 1px solid var(--orange);
1193 1018 }
@@ -1198,108 +1023,42 @@
1198 1023 }
1199 1024
1200 1025 .frm-button-primary,
1201 1026 .wp-core-ui .button-primary.frm-button-primary,
1202 -.wp-core-ui .button.frm-button-primary,
1203 1027 .frm-button-secondary,
1204 1028 .wp-core-ui .button-secondary.frm-button-secondary,
1205 1029 .wp-core-ui .button.frm-button-secondary,
1206 -.frm-white-body .frm-search .button,
1207 -.frm-white-body .search-box .button, /* Views */
1208 -.frm-white-body .tablenav .button,
1209 1030 .frm_orange_button,
1210 1031 .toplevel_page_formidable #frm_upgrade_modal .button-primary,
1032 +#form_global_settings .button-secondary,
1211 1033 .wp-core-ui.frm-white-body .button-primary,
1212 1034 .wp-core-ui.frm-white-body .button-secondary,
1213 1035 .frm-white-body .button-primary,
1214 1036 .frm-white-body .button-secondary,
1215 -#frm-form-button button,
1216 -.frm-preview-buttons button,
1217 -.frm-button-red,
1218 -.frm-button-tertiary {
1037 +.wp-core-ui.frm-white-body .button:not(.button-small),
1038 +.frm-white-body button:not(.wp-switch-editor):not(.dropdown-toggle):not(.media-menu-item):not(.media-modal-close):not(.frm_no_style_button){
1219 1039 text-shadow: none;
1220 1040 box-shadow: none;
1221 1041 border-radius: 30px;
1222 - border: 1px solid var(--primary-500);
1223 - font-size: var(--text-sm);
1042 + border-color: var(--primary-color);
1043 + font-size: 1em;
1224 1044 transition: all .2s ease;
1225 - padding: 7px 16px;
1226 - height: auto;
1045 + padding: 0 15px;
1046 + height: 28px;
1227 1047 min-height: 28px;
1228 1048 outline: none;
1229 - line-height: var(--leading);
1230 - box-sizing: border-box;
1231 - font-weight: 500;
1232 - margin-bottom: 0;
1233 - display: inline-block;
1049 + line-height: 26px;
1234 1050 }
1235 1051
1236 -.frm-button-tertiary {
1237 - border-color: transparent;
1238 - color: var(--primary-500);
1239 -}
1240 -
1241 -.frm-button-red,
1242 -.frm-button-red:focus {
1243 - color: #fff !important;
1244 - --primary-500: var(--error-500);
1245 - --primary-700: var(--error-700);
1246 -}
1247 -
1248 -.frm-white-body h2 .button,
1249 -.post-type-frm_display h2 .frm-button-primary,
1250 -.frm-white-body .tablenav .button,
1251 -.frm-button-primary.frm-button-sm,
1252 -.frm-button-secondary.frm-button-sm,
1253 -.frm-button-tertiary.frm-button-sm,
1254 -.frm-button-red.frm-button-sm {
1255 - padding: 4px 12px !important;
1256 - font-size: var(--text-xs) !important;
1257 -}
1258 -
1259 -.frm_no_style_button {
1260 - background: transparent;
1261 -}
1262 -
1263 -.frm-with-icon {
1264 - display: flex;
1265 - gap: var(--gap-xs);
1266 - align-items: center;
1267 -}
1268 -
1269 -.frm-with-icon svg {
1270 - opacity: .65; /* Get close to grey-500 without overriding hover colors */
1271 -}
1272 -
1273 -.frm-with-icon.button svg {
1274 - height: var(--text-sm);
1275 - width: var(--text-sm);
1276 -}
1277 -
1278 -.frm-with-icon.frm-button-sm svg {
1279 - height: var(--text-xs);
1280 - width: var(--text-xs);
1281 -}
1282 -
1283 -.frm-white-body .button.add_media {
1284 - /* Media buttons above RTE */
1285 - padding-left: 12px !important;
1286 - padding-right: 12px !important;
1287 - font-size: var(--text-xs);
1288 - border-radius: var(--border-radius);
1289 -}
1290 -
1291 1052 .wp-core-ui.frm-white-body #post-query-submit.button,
1292 -.wp-core-ui.frm-white-body .button.tablenav-pages-navspan,
1293 1053 .wp-core-ui.frm-white-body .button.first-page,
1294 1054 .wp-core-ui.frm-white-body .button.prev-page,
1295 1055 .wp-core-ui.frm-white-body .button.next-page,
1296 1056 .wp-core-ui.frm-white-body .button.last-page,
1297 1057 .wp-core-ui.frm-white-body .button.action {
1298 - background-color: transparent;
1299 - border-color: var(--grey-300);
1300 - color: var(--grey-700);
1301 - border-radius: var(--border-radius);
1058 + background-color: var(--lightest-grey);
1059 + border-color: var(--grey-border);
1060 + color: var(--dark-grey);
1302 1061 }
1303 1062
1304 1063 .post-type-frm_display.wp-core-ui .button-primary,
1305 1064 .frm-button-primary,
@@ -1304,16 +1063,16 @@
1304 1063 .post-type-frm_display.wp-core-ui .button-primary,
1305 1064 .frm-button-primary,
1306 1065 .wp-core-ui .button-primary.frm-button-primary,
1307 1066 .frm_single_entry_page .button-primary {
1308 - background-color: var(--primary-500) !important;
1067 + background-color: var(--primary-color) !important;
1309 1068 color: #fff !important;
1310 1069 }
1311 1070
1312 1071 .frm-button-primary.frm_large{
1313 - font-size: var(--text-md) !important;
1072 + font-size: 22px !important;
1314 1073 height: auto !important;
1315 - padding: 9px 18px !important;
1074 + padding: 16px 32px !important;
1316 1075 }
1317 1076
1318 1077 .frm-button-primary i:before {
1319 1078 color: #fff;
@@ -1320,10 +1079,10 @@
1320 1079 }
1321 1080
1322 1081 .wp-core-ui .button-primary.frm-button-primary:hover,
1323 1082 .frm-button-primary:hover {
1324 - background: var(--primary-700) !important;
1325 - border-color: var(--primary-700) !important;
1083 + background: var(--primary-hover) !important;
1084 + border-color: var(--primary-hover) !important;
1326 1085 }
1327 1086
1328 1087 .wp-core-ui .button-primary.frm-button-primary:active {
1329 1088 vertical-align: inherit;
@@ -1328,25 +1087,20 @@
1328 1087 .wp-core-ui .button-primary.frm-button-primary:active {
1329 1088 vertical-align: inherit;
1330 1089 }
1331 1090
1332 -.frm-white-body #search-submit,
1333 1091 #frm-form-button .frm_button_submit,
1334 -.frm-white-body .frm-preview-buttons button,
1335 -.frm-white-body .button:not(.frm-button-primary),
1336 1092 .wp-core-ui.frm-white-body .button-secondary,
1337 1093 .wp-core-ui .button-secondary.frm-button-secondary,
1338 1094 .wp-core-ui .button.frm-button-secondary,
1339 -.frm-white-body .frm-button-secondary,
1340 1095 .frm-button-secondary {
1341 - color: var(--grey-800);
1342 - border-color: var(--grey-300);
1343 - background-color: #fff;
1096 + color: var(--primary-color);
1097 + background-color: transparent;
1344 1098 }
1345 1099
1346 1100 #wp-content-media-buttons button,
1347 1101 #wp-content-media-buttons a.button {
1348 - border-color: var(--grey-300);
1102 + border-color: var(--grey-border);
1349 1103 }
1350 1104
1351 1105 .frm_orange_button {
1352 1106 border-color: #da791d !important;
@@ -1353,23 +1107,26 @@
1353 1107 background: var(--orange);
1354 1108 color: #fff;
1355 1109 }
1356 1110
1357 -.frm-white-body .button:not(.frm-button-primary):focus,
1358 -.frm-white-body .button:not(.frm-button-primary):active,
1359 -.frm-white-body .frm-button-secondary:hover,
1360 1111 .wp-core-ui.frm-white-body .frm-button-secondary:hover,
1361 1112 .wp-core-ui.frm-white-body .button-secondary:hover,
1362 1113 .wp-core-ui.frm-white-body .button-secondary:focus,
1363 -.wp-core-ui.frm-white-body .tablenav .button:hover,
1364 1114 .frm_wrap .preview > .button:hover {
1365 - border-color: var(--grey-300) !important;
1366 - color: var(--grey-800);
1367 - background: var(--grey-50) !important;
1368 - box-shadow: none !important;
1369 - outline: none !important;
1115 + border-color: var(--primary-hover) !important;
1116 + background: var(--primary-hover) !important;
1117 + color: #fff;
1118 + box-shadow: none;
1370 1119 }
1371 1120
1121 +.frm-with-plus {
1122 + padding-left: 10px !important;
1123 +}
1124 +
1125 +.frm-with-plus .frmsvg {
1126 + margin-right: 5px;
1127 +}
1128 +
1372 1129 .frm-button-primary .frmsvg {
1373 1130 color: #fff;
1374 1131 }
1375 1132
@@ -1376,20 +1133,23 @@
1376 1133 .frm_wrap .preview i {
1377 1134 font-size: inherit;
1378 1135 }
1379 1136
1380 -.frm-white-body .frm-button-primary:focus,
1381 -.frm-white-body .frm-button-primary:active,
1137 +.wp-core-ui.frm-white-body .frm-button-secondary:hover .frmsvg,
1138 +.frm_wrap .preview > .button:hover .frmsvg,
1139 +.wp-core-ui.frm-white-body .frm-button-secondary:hover i,
1140 +.frm_wrap .preview > .button:hover i {
1141 + color: #fff;
1142 +}
1143 +
1382 1144 #frm-addons-page .button-primary:focus,
1383 1145 #form_global_settings .button-primary:focus,
1384 -#frm_upgrade_modal .button:focus {
1385 - border-color: var(--primary-700) !important;
1386 - background-color: var(--primary-700) !important;
1387 - box-shadow: none !important;
1388 - outline: none !important;
1146 +#frm_upgrade_modal .button:focus,
1147 +.frm_wrap .preview > .button:focus {
1148 + border-color: var(--primary-hover) !important;
1149 + outline: none;
1389 1150 }
1390 1151
1391 -.frm_wrap .preview > .button:focus,
1392 1152 .frm_orange_button:hover,
1393 1153 .frm_orange_button:focus,
1394 1154 .toplevel_page_formidable #frm_upgrade_modal .button-primary:hover,
1395 1155 .toplevel_page_formidable #frm_upgrade_modal .button-primary:focus,
@@ -1437,9 +1197,9 @@
1437 1197 }
1438 1198
1439 1199 .frm-review-notice.notice form,
1440 1200 .frm-review-notice.notice p {
1441 - font-size: var(--text-sm);
1201 + font-size: 14px;
1442 1202 max-width: 600px;
1443 1203 margin-left: auto;
1444 1204 margin-right: auto;
1445 1205 }
@@ -1444,14 +1204,17 @@
1444 1204 margin-right: auto;
1445 1205 }
1446 1206
1447 1207 .frm-review-notice a {
1448 - margin: 0 var(--gap-xs) !important;
1208 + margin: 5px;
1449 1209 }
1450 1210
1451 1211 .frm-review-notice .frm-button-primary,
1452 1212 .frm-review-notice .frm-button-secondary {
1453 1213 min-width: 100px;
1214 + display: inline-block;
1215 + text-align: center;
1216 + padding: 2px 10px;
1454 1217 }
1455 1218
1456 1219 .frm-review-notice p > span {
1457 1220 font-size: 13px;
@@ -1458,9 +1221,9 @@
1458 1221 opacity: 0.75;
1459 1222 }
1460 1223
1461 1224 #frmapi-feedback {
1462 - margin-top: var(--gap-lg);
1225 + margin-top: 30px;
1463 1226 }
1464 1227
1465 1228 .frm-review-notice .frm_error,
1466 1229 .frm-review-notice label {
@@ -1468,112 +1231,12 @@
1468 1231 text-align: left;
1469 1232 }
1470 1233
1471 1234 .frm-review-notice label {
1472 - font-size: var(--text-sm);
1235 + font-size: 14px;
1473 1236 }
1474 1237
1475 -.frm-floating-success-message {
1476 - border-radius: 4px;
1477 - right: 10px !important;
1478 - bottom: 10px !important;
1479 -}
1480 -
1481 1238 /* Generic Classes */
1482 -.frm_no_margin, /* deprecated */
1483 -.frm-m-0 {
1484 - margin: 0 !important;
1485 -}
1486 -
1487 -.frm-m-12 {
1488 - margin: var(--gap-2xl);
1489 -
1490 -}
1491 -
1492 -.frm_no_top_margin, /* deprecated */
1493 -.frm-mt-0 {
1494 - margin-top: 0 !important;
1495 -}
1496 -
1497 -.frm_no_bottom_margin, /* deprecated */
1498 -.frm-mb-0 {
1499 - margin-bottom: 0 !important;
1500 -}
1501 -
1502 -.frm-mb-sm {
1503 - margin-bottom: var(--gap-sm) !important;
1504 -}
1505 -
1506 -.frm-mb-md {
1507 - margin-bottom: var(--gap-md) !important;
1508 -}
1509 -
1510 -.frm-mb-lg {
1511 - margin-bottom: var(--gap-lg) !important;
1512 -}
1513 -
1514 -.frm-mx-sm {
1515 - margin-left: var(--gap-sm) !important;
1516 - margin-right: var(--gap-sm) !important;
1517 -}
1518 -
1519 -.frm-p-1 {
1520 - padding: 4px;
1521 -}
1522 -
1523 -.frm-p-4 {
1524 - padding: var(--gap-sm);
1525 -}
1526 -
1527 -.frm-p-6 {
1528 - padding: var(--gap-md);
1529 -}
1530 -
1531 -.frm-text-md {
1532 - font-size: var(--text-md);
1533 -}
1534 -
1535 -.frm-text-lg {
1536 - font-size: var(--text-lg);
1537 -}
1538 -
1539 -.frm-text-xl {
1540 - font-size: var(--text-xl);
1541 -}
1542 -
1543 -.frm-w-auto {
1544 - width: auto !important;
1545 -}
1546 -
1547 -.frm-w-full {
1548 - width: 100% !important;
1549 -}
1550 -
1551 -.frm-flex-box {
1552 - display: flex;
1553 - gap: var(--gap-sm);
1554 -}
1555 -
1556 -.frm-gap-xs {
1557 - gap: var(--gap-xs);
1558 -}
1559 -
1560 -.frm-gap-sm {
1561 - gap: var(--gap-sm);
1562 -}
1563 -
1564 -.frm-gap-md {
1565 - gap: var(--gap-md);
1566 -}
1567 -
1568 -.frm-justify-between {
1569 - justify-content: space-between;
1570 -}
1571 -
1572 -.frm-transition-ease {
1573 - transition: all .2s ease;
1574 -}
1575 -
1576 1239 .frm_invisible {
1577 1240 visibility: hidden;
1578 1241 transition: all .2s ease;
1579 1242 }
@@ -1581,10 +1244,10 @@
1581 1244 .frm_no_float {
1582 1245 float: none;
1583 1246 }
1584 1247
1585 -.frm_block, /* deprecated */
1586 -.frm-block {
1248 +.frm_block,
1249 +.frm_no_section_fields.frm_block {
1587 1250 display: block;
1588 1251 }
1589 1252
1590 1253 .frm_inline {
@@ -1594,81 +1257,81 @@
1594 1257 .frm_inline_block {
1595 1258 display: inline-block !important;
1596 1259 }
1597 1260
1261 +.frm-lookup-modal .dismiss,
1262 +.frm-right-panel .inside a.frm_hidden,
1263 +ul.frm_form_nav > li.frm_hidden,
1264 +a.frm_hidden,
1265 +.button.frm_hidden,
1266 +.wp-core-ui .button.frm_hidden,
1598 1267 .frm_hidden {
1599 1268 display: none;
1600 1269 }
1601 1270
1602 -.frm-text-right {
1603 - text-align: right;
1271 +.frm_no_margin {
1272 + margin: 0;
1604 1273 }
1605 1274
1606 -.frm-border-b {
1607 - border-bottom: 1px solid var(--grey-300);
1275 +.frm_no_top_margin {
1276 + margin-top: 0 !important;
1608 1277 }
1609 1278
1610 -.frm-no-border {
1611 - border: none !important;
1279 +.postbox .inside > p.frm_no_bottom_margin:last-child,
1280 +.frm_no_bottom_margin {
1281 + margin-bottom: 0 !important;
1612 1282 }
1613 1283
1614 -.frm-opacity-100 {
1615 - opacity: 1;
1284 +.frm_tiny_top_margin {
1285 + margin-top: 1px;
1616 1286 }
1617 1287
1618 -.frm-on-bottom {
1619 - z-index: -1;
1288 +.frm_small_top_margin {
1289 + margin-top: 5px;
1620 1290 }
1621 -/* End Generic Classes, Start Forced Generic Classes */
1622 1291
1623 -.frm-fields p > label.frm_hidden,
1624 -.frm-lookup-modal .dismiss,
1625 -.frm-right-panel .inside a.frm_hidden,
1626 -#form_global_settings .frm_hidden,
1627 -ul.frm_form_nav > li.frm_hidden,
1628 -a.frm_hidden,
1629 -.button.frm_hidden,
1630 -.wp-core-ui .button.frm_hidden {
1631 - display: none;
1292 +.frm_cursor_pointer {
1293 + cursor: pointer;
1632 1294 }
1633 1295
1634 -.postbox .inside > p.frm_no_bottom_margin:last-child {
1635 - margin-bottom: 0 !important;
1296 +.frm_right_text {
1297 + text-align: right;
1636 1298 }
1637 1299
1638 -.frm_no_section_fields.frm_block {
1639 - display: block;
1300 +.frm_submit .frm_full_opacity, .frm_full_opacity {
1301 + opacity: 1;
1640 1302 }
1641 1303
1304 +.frm_med_padding {
1305 + padding: 10px;
1306 +}
1307 +
1642 1308 .actions.frm_visible_overflow {
1643 1309 overflow: visible !important;
1644 1310 }
1645 1311
1646 -.frm_full_opacity, /* deprecated */
1647 -.frm_submit .frm_full_opacity,
1648 -.frm_submit .frm-opacity-100 {
1649 - opacity: 1;
1650 -}
1651 -
1652 1312 .frm-dropdown-menu.frm-on-top {
1653 1313 z-index: 99999;
1654 1314 }
1655 1315
1656 -/* End Forced Generic Classes */
1316 +.frm-on-bottom {
1317 + z-index: -1;
1318 +}
1657 1319
1658 1320 .frm_forms.with_frm_style {
1659 1321 max-width: 100%;
1660 1322 }
1661 1323
1324 +.post-type-frm_display .wrap > #posts-filter,
1662 1325 .post-type-frm_display .wrap > .subsubsub,
1663 1326 .post-type-frm_display .wrap > .icl_subsubsub,
1664 1327 .frm_form_settings > p {
1665 - margin: 6px var(--gap-md);
1328 + margin: 6px 40px;
1666 1329 padding: 0;
1667 1330 }
1668 1331
1669 1332 .frm-entry-container {
1670 - margin: 0 40px 40px;
1333 + margin: 20px 40px 40px;
1671 1334 padding: 0;
1672 1335 }
1673 1336
1674 1337 #form_reports_page .frm-inner-content {
@@ -1682,24 +1345,24 @@
1682 1345 clear: both;
1683 1346 }
1684 1347
1685 1348 .post-type-frm_display h2,
1686 -.frm_wrap h2 {
1687 - margin-top: 0 !important;
1688 - font-size: var(--text-lg);
1689 - line-height: var(--leading);
1349 +.frm_page_container h2 {
1350 + margin: 10px 0 !important;
1351 + color: var(--medium-grey);
1352 + font-weight: 500;
1353 + font-size: 19px;
1690 1354 }
1691 1355
1692 1356 .post-type-frm_display .wrap > h2:first-child,
1693 -.frm_wrap .wrap > h2:first-child {
1694 - padding-top: 0;
1357 +.frm_page_container .wrap > h2:first-child {
1695 1358 margin-top: 0 !important;
1696 - font-size: var(--text-lg);
1359 + font-size: 22px;
1697 1360 }
1698 1361
1699 1362 #frm_form_editor_container {
1700 1363 position: relative;
1701 - margin-top: 28px;
1364 + margin: 25px 50px 50px;
1702 1365 }
1703 1366
1704 1367 .form-field p {
1705 1368 /* for conflicts */
@@ -1712,30 +1375,21 @@
1712 1375 float: none;
1713 1376 width: auto;
1714 1377 }
1715 1378
1716 -#frm_view_editor_left label, /* Views */
1717 -#frm_view_editor_left .frm_primary_label, /* Views */
1718 -.frm-dialog .frm-sub-label,
1719 -.frm-dialog label,
1720 -.dropdown .frm_primary_label,
1721 1379 .accordion-container label,
1722 1380 .frm-fields td > label,
1723 1381 .frm-fields td > div > label,
1724 -.frm_form_field > label:first-child,
1725 1382 .frm-fields p > label,
1726 -.frm_on_submit_type > label,
1727 1383 .post-type-frm_display .frm_form_field > label,
1728 1384 #new_fields .frm_primary_label,
1729 -#form_global_settings .frm_primary_label,
1730 1385 #frm_form_editor_container .frm_primary_label {
1731 - color: var(--grey-700);
1386 + color: var(--dark-grey);
1732 1387 margin: 0 0 3px;
1733 1388 padding: 0;
1734 1389 width: auto;
1735 - font-size: var(--text-sm);
1390 + font-size: 14px;
1736 1391 display: block;
1737 - line-height: var(--leading);
1738 1392 }
1739 1393
1740 1394 .frm-fields td input + label {
1741 1395 display: inline;
@@ -1753,12 +1407,8 @@
1753 1407 .with_frm_style form .form-field {
1754 1408 margin-bottom: 20px;
1755 1409 }
1756 1410
1757 -#frm_builder_page .with_frm_style form .frm_combo_inputs_container > .form-field {
1758 - margin-bottom: 0;
1759 -}
1760 -
1761 1411 .frm_description,
1762 1412 .with_frm_style form div.description,
1763 1413 .frm_error,
1764 1414 .with_frm_style form div.description textarea {
@@ -1770,18 +1420,11 @@
1770 1420 color: inherit;
1771 1421 }
1772 1422
1773 1423 #frm_form_editor_container .divider_section_only .frm_primary_label {
1774 - display: flex;
1775 - align-items: center;
1776 - gap: var(--gap-xs);
1777 1424 font-size: 20px;
1778 1425 }
1779 1426
1780 -#frm_form_editor_container .divider_section_only .frm_primary_label .frm-sub-label {
1781 - padding: 0;
1782 -}
1783 -
1784 1427 form .form-field.frm_field_loading {
1785 1428 margin-bottom: 0;
1786 1429 min-height: 0;
1787 1430 padding: 0;
@@ -1869,8 +1512,14 @@
1869 1512 max-width: 700px;
1870 1513 margin: 20px auto !important;
1871 1514 }
1872 1515
1516 +.upgrade_to_pro h1,
1517 +.upgrade_to_pro h3,
1518 +.upgrade_to_pro {
1519 + color: #444;
1520 +}
1521 +
1873 1522 .upgrade_to_pro .error {
1874 1523 display: none;
1875 1524 }
1876 1525
@@ -1880,19 +1529,19 @@
1880 1529 }
1881 1530
1882 1531 .frm_error_style,
1883 1532 .frm_warning_style,
1884 -.frm_note_style,
1885 1533 .frm_message,
1886 1534 #post-body-content .frm_updated_message,
1887 1535 div.frm_updated_message {
1888 - border-radius: var(--small-radius);
1889 - background-color: #D5F2DC;
1890 - color: #1E561F;
1891 - padding: var(--gap-sm) var(--gap-md);
1892 - font-size: var(--text-sm);
1893 - margin: var(--gap-sm) 0;
1894 - text-align: left;
1536 + border-radius: var(--border-radius);
1537 + border: 1px solid #D6E9C6;
1538 + background-color: #DFF0D8;
1539 + color: #468847;
1540 + padding: 5px 25px;
1541 + font-size: 14px;
1542 + margin: 5px 0 15px;
1543 + text-align: center;
1895 1544 }
1896 1545
1897 1546 #frm_top_bar + .wrap > .frm_updated_message, #frm_top_bar + .wrap > .frm_warning_style {
1898 1547 display: inline-block;
@@ -1903,20 +1552,21 @@
1903 1552 #post-body-content > .frm_updated_message {
1904 1553 margin: 5px 65px;
1905 1554 }
1906 1555
1907 -#form_global_settings #post-body-content > .frm_updated_message,
1908 -#form_global_settings #post-body-content > .frm_warning_style {
1556 +#form_global_settings .frm_updated_message {
1909 1557 margin: 5px 25px;
1910 1558 }
1911 1559
1912 1560 .frm_error_style {
1913 1561 color: #973937;
1914 - background-color: #EBCCCC;
1562 + border-color: #F2DEDE;
1563 + background-color: #F2DEDE;
1915 1564 clear: both;
1916 1565 }
1917 1566
1918 1567 .frm_error_style a {
1568 + color: #973937;
1919 1569 text-decoration: underline;
1920 1570 font-weight: 600;
1921 1571 }
1922 1572
@@ -1924,10 +1574,14 @@
1924 1574 opacity: .7;
1925 1575 }
1926 1576
1927 1577 .frm_warning_style {
1928 - color: #7A4D05;
1929 - background-color: #FFF2D2;
1578 + color: #8B6E3C;
1579 + border-color: #FBECCD;
1580 + background-color: #FDF9E3;
1581 + border-radius: 10px;
1582 + text-align: left;
1583 + padding-top: 5px;
1930 1584 }
1931 1585
1932 1586 .frm_warning_heading{
1933 1587 font-weight: bold;
@@ -1933,61 +1587,8 @@
1933 1587 font-weight: bold;
1934 1588 margin-bottom:4px;
1935 1589 }
1936 1590
1937 -/* Warning message dismiss */
1938 -.frm_warning_style {
1939 - position: relative;
1940 - padding-right: calc(var(--gap-md) + 15px);
1941 -}
1942 -
1943 -body.rtl .frm_warning_style {
1944 - padding-right: var(--gap-md);
1945 - padding-left: calc(var(--gap-md) + 15px);
1946 -}
1947 -
1948 -.frm-warning-dismiss {
1949 - position: absolute;
1950 - top: 10px;
1951 - right: 10px;
1952 - display: flex;
1953 - cursor: pointer;
1954 - transition: opacity 0.2s ease-out;
1955 -}
1956 -
1957 -body.rtl .frm-warning-dismiss {
1958 - left: 10px;
1959 - right: auto;
1960 -}
1961 -
1962 -.frm-warning-dismiss:hover {
1963 - opacity: 0.8;
1964 -}
1965 -
1966 -.frm-warning-dismiss.frmsvg,
1967 -.frm-warning-dismiss.frmsvg svg {
1968 - width: 15px;
1969 - height: 15px;
1970 -}
1971 -
1972 -.frm_note_style {
1973 - background: rgba(188, 224, 253, 0.23);
1974 - color: var(--grey-700);
1975 -}
1976 -
1977 -.frm-banner-alert {
1978 - text-align: left;
1979 - margin: 0;
1980 - border-radius: 0;
1981 - padding: 10px 0 10px 40px;
1982 -}
1983 -
1984 -.frm-banner-alert a {
1985 - color: var(--primary-500);
1986 - font-weight: 400;
1987 - text-decoration: none;
1988 -}
1989 -
1990 1591 .frm_updated_message ul,
1991 1592 .frm_updated_message li,
1992 1593 .frm_warning_style ul,
1993 1594 .frm_warning_style li,
@@ -1996,24 +1597,52 @@
1996 1597 margin: 0;
1997 1598 }
1998 1599
1999 1600 .frm-inline-message {
2000 - border: 1px solid var(--primary-700);
1601 + border: 1px solid var(--primary-hover);
2001 1602 border-radius: var(--small-radius);
2002 - color: var(--primary-700);
1603 + color: var(--primary-hover);
2003 1604 background: #fff;
2004 1605 text-align: center;
2005 1606 padding: 20px;
2006 - font-size: var(--text-sm);
2007 - line-height: var(--leading);
1607 + font-size: 14px;
1608 + line-height: 1.4em;
2008 1609 }
2009 1610
2010 1611 .frm-inline-message a {
2011 - text-decoration: underline;
2012 1612 font-weight: 600;
2013 - color: var(--primary-700);
1613 + color: var(--primary-hover);
2014 1614 }
2015 1615
1616 +.frm_ribbon {
1617 + -webkit-transform: rotate(45deg);
1618 + -moz-transform: rotate(45deg);
1619 + -ms-transform: rotate(45deg);
1620 + -o-transform: rotate(45deg);
1621 + transform: rotate(45deg);
1622 + border: 25px solid transparent;
1623 + border-bottom: 25px solid var(--orange);
1624 + position: absolute;
1625 + top: -31px;
1626 + right: -74px;
1627 + padding: 0px 10px;
1628 + width: 30px;
1629 + color: white;
1630 + font-family: sans-serif;
1631 + size: 11px;
1632 +}
1633 +
1634 +.frm_ribbon span {
1635 + position: absolute;
1636 + left: 25px;
1637 + font-size: 15px;
1638 + top: 4px;
1639 +}
1640 +
1641 +.accordion-section-content .frm-selectable:hover .frm_ribbon {
1642 + display: none;
1643 +}
1644 +
2016 1645 .frm_pro_heading span {
2017 1646 margin-top: 10px;
2018 1647 }
2019 1648
@@ -2022,14 +1651,15 @@
2022 1651 }
2023 1652
2024 1653 .frm-yes {
2025 1654 color: var(--green);
2026 - font-size: var(--text-xl);
1655 + font-size: 21px;
1656 + font-weight: 500;
2027 1657 }
2028 1658
2029 1659 .frm-nope {
2030 - color: var(--grey-400);
2031 - font-size: var(--text-xl);
1660 + color: #d2e0f2;
1661 + font-size: 21px;
2032 1662 }
2033 1663
2034 1664 .upgrade_to_pro a {
2035 1665 color: var(--orange);
@@ -2035,10 +1665,10 @@
2035 1665 color: var(--orange);
2036 1666 }
2037 1667
2038 1668 .upgrade_to_pro table .frmsvg {
2039 - height: var(--text-xl);
2040 - width: var(--text-xl);
1669 + height: 20px;
1670 + width: 20px;
2041 1671 }
2042 1672
2043 1673 .upgrade_to_pro table.widefat {
2044 1674 background-color: #fff;
@@ -2044,14 +1674,12 @@
2044 1674 background-color: #fff;
2045 1675 border-collapse: collapse;
2046 1676 }
2047 1677
2048 -.frm-white-body .upgrade_to_pro table th,
1678 +.upgrade_to_pro table th,
2049 1679 .upgrade_to_pro table td {
2050 1680 padding: 10px 15px;
2051 - border: 1px solid var(--grey-300);
2052 - line-height: var(--leading);
2053 - font-size: var(--text-sm);
1681 + border: 1px solid #d2e0f2;
2054 1682 }
2055 1683
2056 1684 .upgrade_to_pro table th.frmcenter {
2057 1685 text-align: center;
@@ -2057,9 +1685,9 @@
2057 1685 text-align: center;
2058 1686 }
2059 1687
2060 1688 .widefat th.frm_table_break {
2061 - background-color: var(--sidebar-color);
1689 + background-color: #f6f7fb;
2062 1690 }
2063 1691
2064 1692 h2.frm-h2 + .howto {
2065 1693 color: var(--medium-grey);
@@ -2075,18 +1703,18 @@
2075 1703 margin-top: 0;
2076 1704 }
2077 1705
2078 1706 .frm-addons {
2079 - margin-top: var(--gap-lg);
1707 + margin-top: 30px;
2080 1708 display: grid;
2081 1709 grid-template-columns: 1fr 1fr 1fr;
2082 - grid-gap: var(--gap-md);
1710 + grid-gap: 30px 2%;
2083 1711 }
2084 1712
2085 1713 .frm-addons,
2086 1714 .frm-addons h2,
2087 1715 .frm-addons h3 {
2088 - color: var(--grey-700);
1716 + color: var(--dark-grey);
2089 1717 }
2090 1718
2091 1719 .frm-addons h2 {
2092 1720 font-size: 17px;
@@ -2098,9 +1726,9 @@
2098 1726
2099 1727 .frm-card {
2100 1728 width: 100%;
2101 1729 border-radius: 10px;
2102 - border: 1px solid var(--grey-300);
1730 + border: 1px solid var(--grey-border);
2103 1731 opacity: 1;
2104 1732 transition: opacity 1s;
2105 1733 }
2106 1734
@@ -2114,10 +1742,10 @@
2114 1742 position: relative;
2115 1743 }
2116 1744
2117 1745 .frm-addons .plugin-card-top {
2118 - min-height: 155px;
2119 - padding-top: var(--gap-lg);
1746 + height: 140px;
1747 + padding-top: 30px;
2120 1748 overflow: hidden;
2121 1749 }
2122 1750
2123 1751 .frm-addons .plugin-card-top h2 {
@@ -2154,18 +1782,8 @@
2154 1782 .frm-addon-active .button {
2155 1783 visibility: hidden;
2156 1784 }
2157 1785
2158 -.frm-save-and-reload-options {
2159 - margin-top: 10px;
2160 - font-size: 13px;
2161 -}
2162 -
2163 -.frm-save-and-reload,
2164 -.frm-save-and-reload + .frm-button-secondary {
2165 - visibility: visible !important;
2166 -}
2167 -
2168 1786 .addon-status-label {
2169 1787 opacity: .7;
2170 1788 }
2171 1789
@@ -2192,13 +1810,9 @@
2192 1810 .frm-new-template.plugin-card-bottom {
2193 1811 overflow: visible;
2194 1812 }
2195 1813
2196 -#frm-new-template p:first-child {
2197 - margin-top: 0;
2198 -}
2199 -
2200 -.frm-admin-page-formidableedit #wpbody-content > *:not(.frm-review-notice):not(.frm_previous_install):not(.frm-banner-alert),
1814 +.frm-admin-page-formidableedit #wpbody-content > *:not(.frm-review-notice):not(.frm_previous_install),
2201 1815 #wpbody-content > .updated,
2202 1816 #wpbody-content > #update-nag,
2203 1817 #wpbody-content > .update-nag,
2204 1818 #wpbody-content > .notice:not(.frm-review-notice),
@@ -2220,86 +1834,35 @@
2220 1834 margin: 0;
2221 1835 padding: 10px 20px;
2222 1836 }
2223 1837
2224 -.frm-modal .postbox,
2225 1838 #frm_new_form_modal .postbox {
2226 1839 max-height: 600px;
2227 1840 overflow: hidden;
2228 - margin-bottom: 0;
2229 1841 }
2230 1842
2231 -.frm-modal .postbox .frm_modal_top,
2232 -.frm-dialog .frm_common_modal .postbox > div:first-child {
2233 - padding: var(--gap-md) var(--gap-md) 0;
1843 +#frm_new_form_modal .postbox > div:first-child {
1844 + padding: 30px 20px;
2234 1845 position: relative;
1846 + border-bottom: 1px solid var(--grey-border);
2235 1847 }
2236 1848
2237 -.frm-modal .postbox .frm-modal-title,
2238 -.frm-dialog .frm_common_modal .postbox > div:first-child > div:first-child {
1849 +#frm_new_form_modal .postbox > div:first-child > div:first-child {
2239 1850 display: inline-block;
2240 - font-size: var(--text-xl);
2241 - color: var(--grey-900);
1851 + font-size: 24px;
1852 + color: #282F36;
2242 1853 }
2243 1854
2244 -.frm-inline-modal > a.dismiss,
2245 -.frm-modal .postbox > a.dismiss,
2246 -.frm-modal .postbox .frm-modal-title + div:last-child,
2247 -.frm-dialog .frm_common_modal .postbox > div:first-child > div:last-child {
1855 +#frm_new_form_modal .postbox > div:first-child > div:last-child {
2248 1856 position: absolute;
2249 - right: 30px;
2250 - top: 25px;
2251 - z-index: 2;
1857 + right: 20px;
1858 + top: 37px;
2252 1859 }
2253 1860
2254 -body.rtl .frm-inline-modal > a.dismiss,
2255 -body.rtl .frm-modal .postbox > a.dismiss,
2256 -body.rtl .frm-modal .postbox .frm-modal-title + div:last-child,
2257 -body.rtl .frm-dialog .frm_common_modal .postbox > div:first-child > div:last-child {
2258 - right: unset;
2259 - left: 30px;
1861 +#frm_new_form_modal .postbox > div:first-child > div:last-child a {
1862 + color: var(--grey);
2260 1863 }
2261 1864
2262 -.frm-info-modal .postbox > a.dismiss,
2263 -.frm-inline-modal > a.dismiss {
2264 - right: 13px;
2265 - top: 13px;
2266 -}
2267 -
2268 -.frm-modal .postbox .frm-modal-title + div:last-child a,
2269 -.frm-modal a.dismiss .frmsvg,
2270 -.frm_common_modal .frm_modal_top a .frmsvg {
2271 - color: var(--grey-900);
2272 -}
2273 -
2274 -.frm-modal .frm_modal_content > div.inside,
2275 -.frm_common_modal .frm_modal_content > div.inside {
2276 - padding: var(--gap-md);
2277 - margin: 0;
2278 - font-size: var(--text-sm);
2279 - color: var(--grey-700);
2280 -}
2281 -
2282 -.frm_common_modal .postbox {
2283 - display: flex;
2284 - flex-direction: column;
2285 -}
2286 -
2287 -.frm-modal .postbox > div.inside .cta-inside {
2288 - overflow-y: auto;
2289 - height: auto;
2290 - padding: 0 var(--gap-sm);
2291 -}
2292 -
2293 -.frm_modal_footer {
2294 - padding: 0 var(--gap-md) var(--gap-sm);
2295 - text-align: right;
2296 -}
2297 -
2298 -body.frm-body-with-open-modal {
2299 - overflow-y: hidden;
2300 -}
2301 -
2302 1865 #frm_new_form_modal .postbox > div.inside {
2303 1866 max-height: 490px;
2304 1867 overflow-y: auto;
2305 1868 overflow-x: hidden;
@@ -2309,9 +1872,9 @@
2309 1872
2310 1873 #frm_new_form_modal .postbox > div.inside .cta-inside {
2311 1874 overflow-y: auto;
2312 1875 height: auto;
2313 - padding: 0 var(--gap-md);
1876 + padding: 0 15px;
2314 1877 }
2315 1878
2316 1879 #frm_new_form_modal .accordion-container {
2317 1880 width: 100%;
@@ -2317,16 +1880,13 @@
2317 1880 width: 100%;
2318 1881 }
2319 1882
2320 1883 .frm-templates-list {
2321 - margin-top: 0;
1884 + margin-top: 0px;
2322 1885 }
2323 1886
2324 -.frm-templates-list.frm_grid_container li {
2325 - margin-bottom: 0;
2326 -}
2327 -
2328 1887 .frm-templates-list li {
1888 + width: 50%;
2329 1889 vertical-align: top;
2330 1890 position: relative;
2331 1891 box-sizing: border-box;
2332 1892 border-radius: 6px;
@@ -2355,17 +1915,14 @@
2355 1915 .frm-templates-list li.frm-selectable:hover p {
2356 1916 max-width: calc( 100% - 65px );
2357 1917 }
2358 1918
2359 -.frm-templates-list .frm-featured-form {
2360 - display: flex;
1919 +.frm-templates-list li > div:not(.frm-hover-icons) {
1920 + display: inline-block;
2361 1921 width: 100%;
1922 + padding: 5px;
2362 1923 }
2363 1924
2364 -.frm-templates-list li .frm-featured-form {
2365 - padding: 7px 5px;
2366 -}
2367 -
2368 1925 .frm-templates-list li li > div {
2369 1926 padding-left: 0;
2370 1927 }
2371 1928
@@ -2372,38 +1929,23 @@
2372 1929 .frm-templates-list li > div > div {
2373 1930 vertical-align: middle;
2374 1931 }
2375 1932
2376 -.frm-templates-list .frm-inner-circle,
2377 -.frm-category-icon, /* Deprecated */
2378 -.frm-icon-wrapper {
2379 - background: var(--primary-500);
2380 - border-radius: var(--small-radius);
2381 - color: #fff;
1933 +.frm-templates-list li .frm-category-icon {
2382 1934 width: 40px;
2383 1935 height: 40px;
2384 - font-size: 18px;
2385 - box-sizing: border-box;
2386 - align-self: center;
2387 - justify-content: center;
2388 - align-items: center;
2389 - display: inline-flex;
2390 -}
2391 -
2392 -.frm-templates-list .frm-inner-circle .frmsvg {
1936 + overflow: hidden;
1937 + display: inline-block;
1938 + border-radius: 4px;
1939 + text-align: center;
2393 1940 vertical-align: top;
2394 1941 }
2395 1942
2396 -.frm-templates-list li .frm-category-icon {
2397 - overflow: hidden;
2398 - align-self: flex-start;
2399 -}
2400 -
2401 -.frm-templates-list .frm-template-details {
1943 +.frm-templates-list li > div > div:last-child {
2402 1944 /* the content container to the right of the icon in Create new form modal */
2403 1945 display: inline-block;
2404 1946 width: calc( 100% - 40px );
2405 - padding-left: var(--gap-sm);
1947 + padding-left: 13px;
2406 1948 box-sizing: border-box;
2407 1949 transform: translateY(-2px);
2408 1950 }
2409 1951
@@ -2417,18 +1959,54 @@
2417 1959 }
2418 1960
2419 1961 .frm-templates-list li h3,
2420 1962 .frm-templates-list .frm-install-template h3 {
2421 - font-size: var(--text-sm) !important;
1963 + font-size: 14px !important;
1964 + line-height: 24px;
1965 + height: 24px;
2422 1966 }
2423 1967
1968 +.frm-templates-list li p {
1969 + font-size: 13px;
1970 + color: rgba(40, 47, 54, 0.6);
1971 +}
1972 +
2424 1973 .frm-templates-list .frm-install-template div {
2425 1974 text-align: left;
2426 1975 }
2427 1976
1977 +.frm-templates-list .frm-add-blank-form .frm-category-icon .frmsvg,
1978 +.frm-templates-list li:last-child div:not(.frm-hover-icons) > .frmsvg {
1979 + color: #fff;
1980 + transform: translateY(10px);
1981 +}
1982 +
1983 +.frm-templates-list .frm-inner-circle {
1984 + border-radius: 4px;
1985 + width: 40px;
1986 + height: 40px;
1987 + padding: 0;
1988 + box-sizing: border-box;
1989 + display: flex;
1990 + flex-direction: row;
1991 + align-items: center;
1992 + justify-content: center;
1993 + position: relative;
1994 +}
1995 +
1996 +.frm-templates-list .frm-inner-circle .frmsvg {
1997 + position: absolute;
1998 + top: 0;
1999 + left: 0;
2000 + width: 100%;
2001 + height: 100%;
2002 + box-sizing: border-box;
2003 + padding: 10px;
2004 +}
2005 +
2428 2006 #frm_new_form_modal .frm-search {
2429 - width: 100%;
2430 - margin: var(--gap-sm) 0 var(--gap-md);
2007 + width: calc( 100% - 20px );
2008 + margin: 40px 10px 30px;
2431 2009 }
2432 2010
2433 2011 #frm_leave_email,
2434 2012 #frm_code_from_email
@@ -2435,10 +2013,14 @@
2435 2013 {
2436 2014 width: 480px;
2437 2015 }
2438 2016
2439 -#frm_new_form_modal #template-search-input {
2440 - width: 100%;
2017 +#frm_new_form_modal #template-search-input,
2018 +#frm_new_form_modal #frm_leave_email,
2019 +#frm_new_form_modal #frm_code_from_email
2020 +{
2021 + border: 2px solid var(--grey-border);
2022 + border-radius: 4px !important;
2441 2023 }
2442 2024
2443 2025 #frm-email-block .frm-with-left-icon .frmsvg {
2444 2026 padding: 0;
@@ -2448,12 +2030,12 @@
2448 2030
2449 2031 #frm_new_form_modal .accordion-container {
2450 2032 display: inline-block;
2451 2033 padding: 0;
2452 - border-top: 1px solid var(--grey-300);
2034 + border-top: 1px solid var(--grey-border);
2453 2035 box-sizing: border-box;
2454 - margin: 0 5px;
2455 - width: calc( 100% - 10px );
2036 + margin: 0 10px;
2037 + width: calc( 100% - 20px );
2456 2038 }
2457 2039
2458 2040 #frm_new_form_modal .accordion-section-title {
2459 2041 padding: 0;
@@ -2463,13 +2045,13 @@
2463 2045 .control-section:hover .accordion-section-title,
2464 2046 #frm_new_form_modal .accordion-section.open .accordion-section-title
2465 2047 {
2466 2048 background: #fff !important;
2467 - border-bottom-color: transparent;
2049 + border-bottom: none;
2468 2050 }
2469 2051
2470 2052 #frm_new_form_modal .accordion-section.open:hover {
2471 - border-bottom-color: transparent;
2053 + border-bottom: none;
2472 2054 }
2473 2055
2474 2056 #frm_new_form_modal .accordion-section {
2475 2057 padding: 8px 0 4px;
@@ -2475,9 +2057,9 @@
2475 2057 padding: 8px 0 4px;
2476 2058 }
2477 2059
2478 2060 #frm_new_form_modal .accordion-section + .accordion-section {
2479 - border-top: 1px solid var(--grey-300);
2061 + border-top: 1px solid var(--grey-border);
2480 2062 border-radius: 0;
2481 2063 }
2482 2064
2483 2065 .frm-templates-list.frm-categories-list li > div > div:last-child,
@@ -2486,9 +2068,9 @@
2486 2068 padding-left: 0;
2487 2069 }
2488 2070
2489 2071 #frm_new_form_modal .frm-templates-list.frm-categories-list .accordion-section-title {
2490 - padding-left: var(--gap-sm);
2072 + padding-left: 10px;
2491 2073 }
2492 2074
2493 2075 #frm_new_form_modal .frm-templates-list.frm-categories-list li.frm-selectable {
2494 2076 padding: 0 10px;
@@ -2495,127 +2077,131 @@
2495 2077 overflow: hidden;
2496 2078 }
2497 2079
2498 2080 #frm_new_form_modal .accordion-section-content {
2499 - padding: var(--gap-sm);
2081 + padding: 10px 0;
2500 2082 }
2501 2083
2502 2084 .frm-hover-icons {
2503 2085 position: absolute;
2504 2086 right: 0;
2505 - top: calc( ( 58px - 2px - 22px ) / 2 ); /* Template item height - borders - icon height */
2506 - max-width: 91px;
2087 + top: 0;
2088 + height: 20px;
2089 + width: 65px;
2507 2090 height: 100%;
2508 2091 box-sizing: border-box;
2509 - padding: 0 10px 0 5px !important;
2510 - border-radius: var(--small-radius);
2092 + padding: 14px 10px 0 5px !important;
2093 + border-radius: 6px;
2511 2094 text-align: right;
2512 - display: flex;
2513 - gap: 5px;
2514 2095 }
2515 2096
2516 -.frm-ready-made-solution .frm-hover-icons {
2517 - visibility: hidden;
2097 +#frm_new_form_modal .frm-selectable[data-custom="1"] .frm-hover-icons {
2098 + width: 91px;
2518 2099 }
2519 2100
2520 -.frm-ready-made-solution:hover .frm-hover-icons {
2521 - visibility: visible;
2522 -}
2523 -
2524 2101 .frm-hover-icons a {
2525 2102 width: 22px;
2526 2103 height: 22px;
2527 - font-size: var(--text-md);
2528 - display: inline-flex;
2529 - align-items: center;
2530 - justify-content: center;
2104 + display: inline-block;
2531 2105 border-radius: 50%;
2532 2106 box-sizing: border-box;
2533 - line-height: var(--leading);
2107 + line-height: 20px;
2534 2108 text-align: center;
2535 2109 }
2536 2110
2537 2111 .frm-hover-icons > .frm-preview-form,
2538 2112 .frm-hover-icons > .frm-delete-form {
2539 - border: 1px solid var(--primary-500);
2113 + border: 1px solid var(--primary-color);
2114 + margin-right: 5px;
2540 2115 }
2541 2116
2542 -.frm-hover-icons > .frm-create-form,
2543 -.frm-ready-made-solution .frm-hover-icons a {
2544 - background-color: var(--primary-500);
2117 +.frm-hover-icons > .frm-create-form {
2118 + background-color: var(--primary-color);
2545 2119 }
2546 2120
2547 -.frm-hover-icons > a .frmsvg {
2548 - width: 14px;
2549 - height: 14px;
2550 - vertical-align: baseline;
2121 +.frm-hover-icons > .frm-preview-form .frmsvg {
2122 + width: 16px;
2123 + height: 16px;
2124 + color: var(--primary-color);
2551 2125 }
2552 2126
2553 -.frm-hover-icons > .frm-preview-form .frmsvg,
2554 2127 .frm-hover-icons > .frm-delete-form .frmsvg {
2555 - color: var(--primary-500);
2128 + width: 14px;
2129 + height: 14px;
2130 + color: var(--primary-color);
2131 + transform: translateY(-1px);
2556 2132 }
2557 2133
2558 2134 .frm-hover-icons > .frm-unlock-form {
2559 - background-color: var(--primary-500);
2135 + background-color: var(--primary-color);
2560 2136 }
2561 2137
2562 2138 .frm-hover-icons > .frm-unlock-form .frmsvg {
2563 - background-color: var(--primary-500);
2139 + width: 12px;
2140 + height: 12px;
2141 + background-color: var(--primary-color);
2142 + transform: translateY(-2px);
2564 2143 }
2565 2144
2566 -.frm-ready-made-solution .frmsvg {
2145 +.frm-hover-icons > .frm-create-form .frmsvg {
2567 2146 width: 14px;
2568 2147 height: 14px;
2569 2148 }
2570 2149
2571 -.frm-hover-icons .frm-create-form svg,
2572 -.frm-ready-made-solution .frm-hover-icons svg {
2150 +.frm-hover-icons .frm-create-form svg {
2573 2151 color: #fff;
2574 2152 }
2575 2153
2576 2154 .frm-hover-icons .frm-create-form:hover,
2577 -.frm-ready-made-solution .frm-hover-icons a:hover,
2578 2155 .frm-hover-icons > .frm-unlock-form:hover,
2579 2156 .frm-hover-icons > .frm-unlock-form:hover .frmsvg
2580 2157 {
2581 - background-color: var(--primary-700) !important;
2158 + background-color: var(--primary-hover) !important;
2582 2159 }
2583 2160
2584 2161 .frm-hover-icons .frm-preview-form:hover,
2585 2162 .frm-hover-icons .frm-delete-form:hover
2586 2163 {
2587 - border: 1px solid var(--primary-700) !important;
2164 + border: 1px solid var(--primary-hover) !important;
2588 2165 }
2589 2166
2590 2167 .frm-hover-icons .frm-preview-form:hover .frmsvg,
2591 2168 .frm-hover-icons .frm-delete-form:hover .frmsvg {
2592 - color: var(--primary-700) !important;
2169 + color: var(--primary-hover) !important;
2593 2170 }
2594 2171
2595 -.frm-application-card h4 .frmsvg,
2596 2172 .frm-locked-template h3 .frmsvg {
2597 - height: var(--text-sm);
2598 - width: var(--text-sm);
2599 - vertical-align: text-top;
2600 - color: var(--grey-500);
2173 + height: 12px;
2174 + width: 14px;
2175 + vertical-align: top;
2176 + padding-top: 6px;
2601 2177 }
2602 2178
2179 +.frm_modal_footer {
2180 + background-color: #fff;
2181 + padding: 30px 20px 15px;
2182 + text-align: right;
2183 + border-top: 1px solid var(--grey-border);
2184 +}
2185 +
2603 2186 #frm_new_form_modal .frm-use-this-template {
2604 2187 margin-left: 10px;
2605 2188 }
2606 2189
2607 2190 #frm_new_form_modal #frm-preview-block {
2608 - padding: var(--gap-md) var(--gap-lg);
2191 + padding: 20px 40px;
2609 2192 overflow-x: hidden;
2610 2193 }
2611 2194
2612 2195 #frm_new_form_modal #frm-details-block {
2613 - padding: var(--gap-md) var(--gap-lg);
2196 + padding: 20px 40px;
2614 2197 }
2615 2198
2616 2199 .frm-modal-back {
2617 2200 cursor: pointer;
2201 + font-size: 17px;
2202 + vertical-align: top;
2203 + margin-top: 4px;
2618 2204 margin-right: 4px;
2619 2205 }
2620 2206
2621 2207 .frm-modal-cancel {
@@ -2622,28 +2208,19 @@
2622 2208 float: left;
2623 2209 }
2624 2210
2625 2211 .frm-plan-required-tag {
2626 - margin-left: 5px;
2627 - transform: translateY(-1px);
2628 2212 background: #FDE6DE;
2629 2213 color: #F15A24;
2630 -}
2631 -
2632 -.frm-ready-made-solution .frm-meta-tag {
2633 - width: fit-content;
2634 - background: #FDE6DE;
2635 - color: #F15A24;
2636 -}
2637 -
2638 -.frm-meta-tag {
2639 2214 font-size: 10px;
2640 - padding: 4px 6px;
2215 + padding: 4px 8px;
2641 2216 border-radius: 4px;
2642 2217 text-transform: uppercase;
2643 2218 font-weight: normal;
2644 2219 display: inline-block;
2645 2220 line-height: 12px;
2221 + transform: translateY(-1px);
2222 + margin-left: 5px;
2646 2223 }
2647 2224
2648 2225 #frm_new_form_modal.frm-expired #frm-create-block,
2649 2226 #frm_new_form_modal.frm-expiring #frm-create-block {
@@ -2653,14 +2230,18 @@
2653 2230 #frm-create-footer {
2654 2231 padding: 15px 20px;
2655 2232 }
2656 2233
2234 +#frm-create-footer .frm_error_style {
2235 + border-radius: 6px;
2236 +}
2237 +
2657 2238 #frm_code_from_email_options {
2658 2239 margin-top: 20px;
2659 2240 }
2660 2241
2661 2242 #frm_code_from_email_options * {
2662 - color: var(--primary-500);
2243 + color: var(--primary-color);
2663 2244 }
2664 2245
2665 2246 #frm-email-block p,
2666 2247 #frm-code-block p,
@@ -2696,23 +2277,20 @@
2696 2277 #frm_new_form_modal[frm-page="upgrade"] #frm-upgrade-title,
2697 2278 #frm_new_form_modal[frm-page="email"] #frm-email-title,
2698 2279 #frm_new_form_modal[frm-page="code"] #frm-email-title,
2699 2280 #frm_new_form_modal[frm-page="renew"] #frm-renew-title,
2281 +.frm-locked-template .frm-hover-icons .frm-unlock-form,
2282 +li[data-preview] .frm-hover-icons .frm-preview-form,
2700 2283 #frm_code_from_email_error[frm-error="wrong-code"] span[frm-error="wrong-code"],
2701 2284 #frm_code_from_email_error[frm-error="empty"] span[frm-error="empty"],
2702 2285 #frm_code_from_email_error[frm-error="custom"] span[frm-error="custom"],
2703 2286 #frm_leave_email_error[frm-error="invalid"] span[frm-error="invalid"],
2704 -#frm_leave_email_error[frm-error="empty"] span[frm-error="empty"]
2287 +#frm_leave_email_error[frm-error="empty"] span[frm-error="empty"],
2288 +#frm_new_form_modal .frm-selectable[data-custom="1"] .frm-hover-icons .frm-delete-form
2705 2289 {
2706 2290 display: inline-block;
2707 2291 }
2708 2292
2709 -.frm-locked-template .frm-hover-icons .frm-unlock-form,
2710 -li[data-preview] .frm-hover-icons .frm-preview-form,
2711 -#frm_new_form_modal .frm-selectable[data-custom="1"] .frm-hover-icons .frm-delete-form {
2712 - display: inline-flex;
2713 -}
2714 -
2715 2293 #frm_new_form_modal[frm-page="create"] #frm-create-block,
2716 2294 #frm_new_form_modal[frm-page="preview"] #frm-preview-block,
2717 2295 #frm_new_form_modal[frm-page="details"] #frm-details-block,
2718 2296 #frm_new_form_modal[frm-page="upgrade"] #frm-upgrade-block,
@@ -2747,120 +2325,28 @@
2747 2325 }
2748 2326
2749 2327 #frm-upgrade-body-list-wrapper ul li:before {
2750 2328 content: "\2022";
2751 - color: var(--primary-500);
2329 + color: var(--primary-color);
2752 2330 display: inline-block;
2753 2331 width: 1em;
2754 2332 margin-left: -1em;
2755 2333 }
2756 2334
2757 -/* Embed Form Modal */
2758 -
2759 -.frm-embed-modal-content {
2760 - padding: var(--gap-md);
2761 -}
2762 -
2763 -.frm-embed-modal-content.frm-loading-page-options {
2764 - display: flex;
2765 - justify-content: center;
2766 -}
2767 -
2768 -#frm_embed_modal .frm_embed_example {
2769 - background: var(--sidebar-color);
2770 - border: 1px solid var(--sidebar-hover);
2771 - border-radius: var(--small-radius);
2772 - color: var(--grey-900);
2773 - font-size: var(--text-sm);
2774 - padding-right: var(--gap-lg);
2775 - width: 100%;
2776 - height: auto !important;
2777 - resize: none;
2778 -}
2779 -
2780 -#frm_embed_modal textarea.frm_embed_example {
2781 - padding-bottom: 0;
2782 -}
2783 -
2784 -.frm-embed-modal-content > div a {
2785 - position: absolute;
2786 - right: 0;
2787 - top: 0;
2788 -}
2789 -
2790 -.frm-embed-modal-content > div {
2791 - position: relative;
2792 - margin-bottom: var(--gap-sm);
2793 -}
2794 -
2795 -.frm-embed-modal-content > div:last-child {
2796 - margin-bottom: 0;
2797 -}
2798 -
2799 -.frm-embed-modal-content svg[id^="frm_copy_embed_"] {
2800 - position: absolute;
2801 - bottom: calc( ( 38px - 18px ) / 2 ); /* Input height - SVG height */
2802 - right: 10px;
2803 - cursor: pointer;
2804 - opacity: 0.5;
2805 -}
2806 -
2807 -.frm-border-info-box,
2808 -.frm-embed-modal-option {
2809 - border-radius: var(--small-radius);
2810 - border: 1px solid var(--grey-300);
2811 - padding: var(--gap-sm);
2812 - cursor: pointer;
2813 - display: flex;
2814 - gap: var(--gap-sm);
2815 - font-size: var(--text-sm);
2816 -}
2817 -
2818 -.frm-embed-modal-option + .frm-embed-modal-option {
2819 - margin-top: var(--gap-sm);
2820 -}
2821 -
2822 -.frm-collapsed .frmsvg,
2823 -.caret.rotate-270,
2824 -.frm-embed-modal-option .caret {
2825 - align-self: center;
2826 - margin-left: auto;
2827 - transform: rotate(-90deg);
2828 -}
2829 -
2830 -#frm_embed_modal .frm_modal_footer {
2831 - display: none;
2832 -}
2833 -
2834 -#frm_embed_modal.frm-on-page-2 .frm_modal_footer {
2835 - display: block;
2836 -}
2837 -
2838 -.frm-embed-modal-content ul {
2839 - max-height: 300px;
2840 - overflow-y: scroll;
2841 -}
2842 -
2843 -.frm-embed-modal-wrapper.frm-dialog {
2844 - overflow: visible;
2845 -}
2846 -
2847 2335 /* Bulk Options */
2848 2336 #frm-bulk-modal .frm_grid_container {
2337 + border-top: 1px solid var(--grey-border);
2849 2338 grid-template-columns: repeat(12, 8.33%);
2850 2339 grid-gap: 0;
2851 2340 }
2852 2341
2853 2342 #frm-bulk-modal .frm8 {
2854 - border-right: 1px solid var(--grey-300);
2855 - padding: 10px 20px 10px var(--gap-lg);
2343 + border-right: 1px solid var(--grey-border);
2344 + padding: 0 20px 20px;
2856 2345 }
2857 2346
2858 -#frm-bulk-modal .frm4 {
2859 - padding: 10px 0;
2860 -}
2861 -
2862 -.frm-inline-modal .howto {
2347 +.frm-inline-modal .howto,
2348 +#frm-bulk-modal .howto {
2863 2349 margin: 5px 0 10px;
2864 2350 color: var(--grey);
2865 2351 }
2866 2352
@@ -2877,18 +2363,18 @@
2877 2363 }
2878 2364
2879 2365 .frm-bulk-edit-link {
2880 2366 text-align: right;
2881 - font-size: var(--text-sm);
2367 + font-size: 14px;
2882 2368 padding: 0 5px 10px;
2883 2369 }
2884 2370
2885 2371 .frm-small-add {
2886 - font-size: var(--text-sm) !important;
2372 + font-size: 14px !important;
2887 2373 }
2888 2374
2889 2375 .frm-small-add span {
2890 - color: var(--primary-500);
2376 + color: var(--primary-color);
2891 2377 font-size: 12px;
2892 2378 height: 12px;
2893 2379 width: 12px;
2894 2380 }
@@ -2903,33 +2389,34 @@
2903 2389 }
2904 2390
2905 2391 .frm-right-panel .inside a.frm_pro_tip,
2906 2392 a.frm_pro_tip {
2907 - font-size: var(--text-sm);
2393 + font-size: 14px;
2394 + border: 1px solid var(--orange);
2908 2395 display: inline-block;
2909 - color: var(--grey-700);
2910 - background: #FFE7DE;
2911 - border-radius: var(--small-radius);
2396 + color: var(--dark-grey);
2397 + background: var(--light-blue);
2398 + border-radius: var(--border-radius);
2399 + text-align: center;
2912 2400 padding: 5px 15px;
2913 2401 margin: 0 auto;
2914 - display: flex;
2915 - align-items: center;
2402 + line-height: 1.4;
2916 2403 }
2917 2404
2918 2405 a.frm_pro_tip:hover {
2919 - color: var(--grey-700);
2920 - border-color: var(--primary-500);
2406 + color: var(--dark-grey);
2407 + border-color: var(--primary-color);
2921 2408 }
2922 2409
2923 2410 a.frm_pro_tip:hover .frmsvg {
2924 - fill: var(--primary-500);
2411 + fill: var(--primary-color);
2925 2412 }
2926 2413
2927 2414 .frm_field_list .frm_pro_tip {
2928 2415 margin: 10px 15px;
2416 + padding-left: 40px;
2929 2417 position: relative;
2930 - width: calc(100% - 30px);
2931 - box-sizing: border-box;
2418 + background: #fff;
2932 2419 }
2933 2420
2934 2421 a.frm_pro_tip .frmsvg,
2935 2422 a.frm_pro_tip i {
@@ -2936,15 +2423,17 @@
2936 2423 color: var(--orange);
2937 2424 margin-right: 5px;
2938 2425 }
2939 2426
2940 -a.frm_pro_tip .frmsvg {
2941 - margin-right: 10px;
2427 +.frm_field_list a.frm_pro_tip .frmsvg {
2428 + position: absolute;
2429 + left: 15px;
2430 + top: calc(50% - 11px);
2942 2431 }
2943 2432
2944 -.frm-tip-info {
2945 - flex: 1;
2946 - text-align: left;
2433 +.pro-tip {
2434 + font-weight: 500;
2435 + color: var(--darkest-grey);
2947 2436 }
2948 2437
2949 2438 .frm-tip-cta {
2950 2439 color: var(--orange);
@@ -2954,9 +2443,9 @@
2954 2443 float: right;
2955 2444 }
2956 2445
2957 2446 .frm_pro_tip:hover .frm-tip-cta {
2958 - color: var(--primary-500);
2447 + color: var(--primary-color);
2959 2448 }
2960 2449
2961 2450 /*Switch form dropdown*/
2962 2451 h1 .fa-caret-down {
@@ -2971,23 +2460,16 @@
2971 2460 vertical-align: middle;
2972 2461 }
2973 2462
2974 2463 .caret,
2975 -.wp-admin .frm_wrap select,
2976 -.frm_wrap .frm_form_builder select,
2977 2464 .frm_wrap .ui-autocomplete-input {
2978 - 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%;
2979 - background-size: var(--text-md) var(--text-md);
2980 - padding-right: var(--gap-lg) !important;
2465 + 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%;
2466 + background-size: 16px 16px;
2981 2467 }
2982 2468
2983 -.caret {
2984 - padding-right: var(--gap-xs) !important;
2985 -}
2986 -
2987 2469 .frm-btn-group .caret {
2988 2470 float: right;
2989 - margin-top: calc( var(--text-md) / 2 );
2471 + margin-top: 6px;
2990 2472 }
2991 2473
2992 2474 .dropdown {
2993 2475 position: relative;
@@ -2996,12 +2478,12 @@
2996 2478 .dropdown-toggle:focus {
2997 2479 outline: 0;
2998 2480 }
2999 2481
3000 -.frm_wrap .ui-autocomplete,
3001 -#frm_adv_info.frm-dropdown-menu,
3002 2482 .frm-dropdown-menu {
3003 - /* Copied from .dropdown-menu rules from Bootstrap */
2483 + max-height: 200px;
2484 + overflow: auto;
2485 + overflow-x: hidden;
3004 2486 position: absolute;
3005 2487 top: 100%;
3006 2488 left: 0;
3007 2489 z-index: 1000;
@@ -3006,27 +2488,21 @@
3006 2488 left: 0;
3007 2489 z-index: 1000;
3008 2490 display: none;
3009 2491 float: left;
3010 - padding-left: 4px;
3011 - padding-right: 4px;
3012 - margin: var(--gap-xs) 0 0;
3013 2492 text-align: left;
2493 + min-width: 160px;
2494 + width: auto;
2495 + padding: 5px 0;
2496 + margin: 2px 0 0;
3014 2497 list-style: none;
3015 - background: none;
3016 - background-color: #fff;
2498 + font-size: 12px;
2499 + background-color: #ffffff;
2500 + border: 1px solid rgba(0, 0, 0, 0.15);
2501 + border-radius: 4px;
2502 + -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
2503 + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
3017 2504 background-clip: padding-box;
3018 - border: 1px solid var(--grey-100);
3019 - border-radius: 0.25rem;
3020 - box-shadow: var(--box-shadow-lg);
3021 -
3022 - /* Custom rules */
3023 - max-height: 200px;
3024 - overflow-y: auto;
3025 - overflow-x: hidden;
3026 - font-size: var(--text-md);
3027 - width: auto;
3028 - min-width: 160px;
3029 2505 }
3030 2506
3031 2507 .frm6 .frm-dropdown-menu {
3032 2508 min-width: 100px;
@@ -3032,35 +2508,25 @@
3032 2508 min-width: 100px;
3033 2509 max-width: 99%;
3034 2510 }
3035 2511
2512 +#frm_bs_dropdown > a {
2513 + font-size: 1em;
2514 +}
2515 +
3036 2516 #frm_bs_dropdown .frm-dropdown-menu {
3037 2517 max-width: 400px;
3038 2518 }
3039 2519
3040 -.field_type_list .frm-dropdown-menu {
3041 - min-width: 150px !important;
2520 +.preview .frm-dropdown-menu {
2521 + min-width: 60px;
3042 2522 }
3043 2523
3044 -#frm_field_group_controls .frm-dropdown-menu,
3045 -.frm-field-action-icons .frm-dropdown-menu {
3046 - min-width: 180px !important;
2524 +.field_type_list .frm-dropdown-menu {
2525 + min-width: 150px;
3047 2526 }
3048 2527
3049 -.frm-field-action-icons .frm-dropdown-toggle svg {
3050 - color: #9EA9B8;
3051 -}
3052 -
3053 -.multiselect-container.frm-dropdown-menu,
3054 -#search-submit .frm-dropdown-menu {
3055 - min-width: 200px !important;
3056 -}
3057 -
3058 -.preview .frm-dropdown-menu {
3059 - min-width: 230px !important;
3060 -}
3061 -
3062 -.frm-dropdown-menu.dropdown-menu-right {
2528 +.frm-dropdown-menu.pull-right {
3063 2529 right: 0;
3064 2530 left: auto;
3065 2531 }
3066 2532
@@ -3070,37 +2536,29 @@
3070 2536 overflow: hidden;
3071 2537 background-color: #e5e5e5;
3072 2538 }
3073 2539
3074 -.frm-dropdown-menu > .dropdown-item {
2540 +.frm-dropdown-menu > li {
3075 2541 margin: 0;
3076 2542 }
3077 2543
3078 -.frm-select-list-item,
3079 -.frm_wrap .ui-autocomplete li > div,
3080 -.multiselect-container button.multiselect-option,
3081 -.frm-dropdown-menu > .dropdown-item > a,
2544 +.frm-dropdown-menu > li > a,
3082 2545 .frm-dropdown-menu .frm_dropdown_li {
3083 2546 clear: both;
3084 2547 font-weight: normal;
3085 2548 white-space: nowrap;
3086 2549 text-decoration: none;
3087 - border-radius: var(--small-radius);
3088 2550 }
3089 2551
3090 -.frm-dropdown-menu > .active > a,
3091 -.frm-dropdown-menu > .active > a:hover,
3092 -.frm-dropdown-menu > .active > a:focus {
2552 +.frm-dropdown-menu > .active > a, .frm-dropdown-menu > .active > a:hover, .frm-dropdown-menu > .active > a:focus {
3093 2553 text-decoration: none;
3094 2554 outline: 0;
3095 2555 }
3096 2556
3097 -.frm-select-list-item.disabled,
3098 2557 .frm-dropdown-menu > .disabled > a, .frm-dropdown-menu > .disabled > a:hover, .frm-dropdown-menu > .disabled > a:focus {
3099 2558 color: #999999;
3100 2559 }
3101 2560
3102 -.frm-select-list-item.disabled:hover,
3103 2561 .frm-dropdown-menu > .disabled > a:hover,
3104 2562 .frm-dropdown-menu > .disabled > a:focus {
3105 2563 text-decoration: none;
3106 2564 background-color: transparent;
@@ -3117,11 +2575,12 @@
3117 2575 }
3118 2576
3119 2577 .dropdown-header {
3120 2578 display: block;
3121 - padding: 3px 10px;
3122 - font-size: var(--text-xs);
3123 - color: var(--grey-400);
2579 + padding: 3px 20px;
2580 + font-size: 12px;
2581 + line-height: 1.428571429;
2582 + color: #999999;
3124 2583 }
3125 2584
3126 2585 .dropdown-backdrop {
3127 2586 position: fixed;
@@ -3131,9 +2590,8 @@
3131 2590 top: 0;
3132 2591 z-index: 990;
3133 2592 }
3134 2593
3135 -.dropdown-menu-right > .frm-dropdown-menu,
3136 2594 .pull-right > .frm-dropdown-menu {
3137 2595 right: 0;
3138 2596 left: auto;
3139 2597 }
@@ -3153,13 +2611,13 @@
3153 2611 .btn {
3154 2612 border: 1px solid #ddd;
3155 2613 background: #fff;
3156 2614 height: 28px;
3157 - line-height: var(--leading);
2615 + line-height: 1.5;
3158 2616 }
3159 2617
3160 2618 a.frm_option_icon:before {
3161 - color: var(--primary-500);
2619 + color: var(--primary-color);
3162 2620 font-size: 22px;
3163 2621 width: 22px;
3164 2622 height: 22px;
3165 2623 }
@@ -3165,9 +2623,9 @@
3165 2623 }
3166 2624
3167 2625 a.frm_option_icon:focus::before,
3168 2626 a.frm_option_icon:hover::before {
3169 - color: var(--primary-700);
2627 + color: var(--primary-hover);
3170 2628 }
3171 2629
3172 2630 .frm_top_left .frm-dropdown-toggle {
3173 2631 color: #999;
@@ -3181,17 +2639,17 @@
3181 2639 text-decoration: none;
3182 2640 }
3183 2641
3184 2642 .frm-card .frm-dropdown-toggle {
3185 - border: 1px solid var(--grey-300);
2643 + border: 1px solid var(--grey-border);
3186 2644 border-radius: var(--small-radius);
3187 2645 font-size: 13px;
3188 - color: var(--grey-700);
2646 + color: var(--dark-grey);
3189 2647 padding: 7px 20px;
3190 2648 }
3191 2649
3192 2650 .frm_actions_dropdown .frm-dropdown-menu {
3193 - font-size: var(--text-sm);
2651 + font-size: 14px;
3194 2652 color: #5F6C72;
3195 2653 }
3196 2654
3197 2655 .frm-dropdown-menu .frm_icon_font {
@@ -3203,21 +2661,20 @@
3203 2661 /* BS Multiselect */
3204 2662 .multiselect-container.frm-dropdown-menu {
3205 2663 top: auto;
3206 2664 left: auto;
3207 - font-size: var(--text-sm);
3208 - padding: 4px;
2665 + font-size: 14px;
2666 + padding-top: 3px;
3209 2667 margin-bottom: 3px;
3210 2668 }
3211 2669
3212 2670 .frm-right-panel .accordion-section-content {
3213 2671 background: transparent;
3214 - padding: 0;
3215 - overflow: initial;
2672 + padding-top: 0
3216 2673 }
3217 2674
3218 -.frm-right-panel .accordion-section-content > .inside {
3219 - padding: 0 0 var(--gap-xs);
2675 +.frm-right-panel .accordion-section-content > .inside {
2676 + padding: 0;
3220 2677 }
3221 2678
3222 2679 .frm-right-panel .accordion-section-content .inside a {
3223 2680 font-size: inherit;
@@ -3224,10 +2681,10 @@
3224 2681 }
3225 2682
3226 2683 #post-body-content + .frm-right-panel h3.accordion-section-title {
3227 2684 padding: 7px 10px 8px 14px;
3228 - font-size: var(--text-md);
3229 - color: var(--grey-700);
2685 + font-size: 16px;
2686 + color: var(--dark-grey);
3230 2687 }
3231 2688
3232 2689 .frm-right-panel .control-section.open h3 {
3233 2690 border-bottom: none;
@@ -3236,22 +2693,22 @@
3236 2693 .js .frm-right-panel .control-section.open .accordion-section-title,
3237 2694 .js .frm-right-panel .control-section .accordion-section-title:focus,
3238 2695 .js .frm-right-panel .control-section .accordion-section-title:hover {
3239 2696 background: transparent;
3240 - color: var(--grey-900);
2697 + color: var(--dark-grey);
3241 2698 }
3242 2699
3243 2700 .js .frm-right-panel .control-section .accordion-section-title:hover:before {
3244 - color: var(--grey-700);
2701 + color: var(--dark-grey);
3245 2702 }
3246 2703
3247 2704 .frm-with-line,
3248 2705 .accordion-section-content h4 {
3249 - font-size: var(--text-md);
2706 + font-size: 16px;
3250 2707 font-weight: 400;
3251 2708 margin: 20px -20px 10px;
3252 2709 padding: 0 20px;
3253 - color: var(--grey-700);
2710 + color: var(--dark-grey);
3254 2711 position: relative;
3255 2712 border: none !important;
3256 2713 }
3257 2714
@@ -3281,9 +2738,9 @@
3281 2738 .accordion-section-content h4:before {
3282 2739 content: '';
3283 2740 display: block;
3284 2741 position: absolute;
3285 - border-bottom: 1px solid var(--grey-300);
2742 + border-bottom: 1px solid var(--grey-border);
3286 2743 left: 0;
3287 2744 width: 100%;
3288 2745 top: 50%;
3289 2746 }
@@ -3301,9 +2758,8 @@
3301 2758 font-family: "s11-fp" !important;
3302 2759 font-size: 18px;
3303 2760 font-variant: normal;
3304 2761 text-rendering: auto;
3305 - vertical-align: text-top;
3306 2762 }
3307 2763
3308 2764 #frm_new_form_modal .accordion-section.open .accordion-section-title:after {
3309 2765 transform: rotate(90deg);
@@ -3309,9 +2765,9 @@
3309 2765 transform: rotate(90deg);
3310 2766 }
3311 2767
3312 2768 .frm-right-panel .accordion-section-title:after {
3313 - top: calc(50% - 10px) !important;
2769 + right: 20px;
3314 2770 }
3315 2771
3316 2772 .frm-right-panel .open .accordion-section-title:after {
3317 2773 content: "\e62a" !important;
@@ -3320,9 +2776,9 @@
3320 2776 .frm-right-panel .accordion-section-title:before {
3321 2777 content: "\f1de" !important;
3322 2778 color: var(--grey);
3323 2779 font-size: 17px !important;
3324 - margin: 0 10px 0 0;
2780 + margin: 0 10px;
3325 2781 }
3326 2782
3327 2783 .form-title-style .accordion-section-title:before,
3328 2784 .section-fields-style .accordion-section-title:before {
@@ -3380,21 +2836,16 @@
3380 2836 .progress-bars-style .accordion-section-title:before{
3381 2837 content: "\e939" !important;
3382 2838 }
3383 2839
3384 -#frm_view_editor_left.frm-right-panel .accordion-section-title,
3385 2840 .frm-right-panel h3.accordion-section-title {
3386 2841 padding: 15px 20px;
3387 2842 background: var(--sidebar-color);
3388 - line-height: var(--leading);
3389 - color: var(--grey-700);
3390 - font-size: var(--text-lg);
3391 - font-weight: 400;
2843 + line-height: 1;
3392 2844 }
3393 2845
3394 -.control-section .accordion-section-title:after, /** Form template list */
3395 -.customize-pane-child .accordion-section-title:after {
3396 - top: 15px;
2846 +.control-section .accordion-section-title:after, .customize-pane-child .accordion-section-title:after {
2847 + top: 19px;
3397 2848 }
3398 2849
3399 2850 .accordion-container .frm-dropdown-menu {
3400 2851 min-width: 40px;
@@ -3399,39 +2850,58 @@
3399 2850 .accordion-container .frm-dropdown-menu {
3400 2851 min-width: 40px;
3401 2852 }
3402 2853
3403 -.frm-btn-group .multiselect.dropdown-toggle {
3404 - box-sizing: border-box;
3405 - min-height: unset;
3406 -}
3407 -
3408 2854 .accordion-container .frm-dropdown-menu:before,
3409 2855 .accordion-container .multiselect.dropdown-toggle:before {
3410 2856 font-family: "s11-fp" !important;
3411 2857 }
3412 2858
2859 +.multiselect-container.frm-dropdown-menu input[type=radio] {
2860 + display: none;
2861 +}
2862 +
3413 2863 .multiselect-container {
3414 2864 position: absolute;
3415 2865 list-style-type: none;
3416 2866 margin: 0;
2867 + padding: 0
2868 +}
2869 +
2870 +.multiselect-container .input-group {
2871 + margin: 5px
2872 +}
2873 +
2874 +.multiselect-container > li {
3417 2875 padding: 0;
3418 - width: 100%;
3419 - max-width: 250px;
2876 + margin: 0;
3420 2877 }
3421 2878
3422 -.multiselect-container button.multiselect-option {
3423 - width: 100%;
3424 - text-align: left;
3425 - border: none;
3426 - margin-bottom: 4px;
2879 +.multiselect-container > li > a.multiselect-all label {
2880 + font-weight: 700
3427 2881 }
3428 2882
3429 -.multiselect-container button.multiselect-option label {
3430 - margin-left: 5px;
2883 +.multiselect-container > li > label.multiselect-group {
2884 + margin: 0;
2885 + padding: 3px 20px;
2886 + height: 100%;
2887 + font-weight: 700
3431 2888 }
3432 2889
3433 -.accordion-container .multiselect-container label {
2890 +.frm-dropdown-menu.multiselect-container > li > a {
2891 + padding: 0
2892 +}
2893 +
2894 +.multiselect-container > li > a > label {
2895 + margin: 0;
2896 + padding: 3px 25px;
2897 + height: 100%;
2898 + cursor: pointer;
2899 + font-weight: 400;
2900 + display: block;
2901 +}
2902 +
2903 +.accordion-container .multiselect-container > li > a > label {
3434 2904 padding: 3px 19px 3px 7px;
3435 2905 }
3436 2906
3437 2907 .frm-btn-group.btn-group > .btn-group:nth-child(2) > .multiselect.btn {
@@ -3438,19 +2908,24 @@
3438 2908 border-top-left-radius: 4px;
3439 2909 border-bottom-left-radius: 4px
3440 2910 }
3441 2911
2912 +.form-inline .multiselect-container label.checkbox,
2913 +.form-inline .multiselect-container label.radio {
2914 + padding: 3px 20px;
2915 +}
2916 +
2917 +.form-inline .multiselect-container li a label.checkbox input[type=checkbox],
2918 +.form-inline .multiselect-container li a label.radio input[type=radio] {
2919 + margin-left: -20px;
2920 + margin-right: 0;
2921 +}
2922 +
3442 2923 .frm-btn-group.btn-group, .frm-btn-group.btn-group-vertical {
3443 2924 display: block;
2925 + vertical-align: middle;
3444 2926 }
3445 2927
3446 -.multiselect-option label {
3447 - max-width: calc(100% - 22px);
3448 - text-overflow: ellipsis;
3449 - overflow: hidden;
3450 - white-space: nowrap;
3451 -}
3452 -
3453 2928 .frm_scale {
3454 2929 text-align: center;
3455 2930 float: left;
3456 2931 margin-right: 10px;
@@ -3472,13 +2947,8 @@
3472 2947 width: 100%;
3473 2948 height: auto;
3474 2949 }
3475 2950
3476 -.frm_form_builder .frm_time_wrap .frm_time_sep {
3477 - vertical-align: sub;
3478 - vertical-align: -webkit-baseline-middle;
3479 -}
3480 -
3481 2951 .frm_form_builder input[type=range]::-webkit-slider-runnable-track {
3482 2952 background-color: var(--blue-border);
3483 2953 }
3484 2954
@@ -3495,12 +2965,10 @@
3495 2965 }
3496 2966
3497 2967 .frm-embed-field-placeholder {
3498 2968 text-align: center;
2969 + position: relative;
3499 2970 height: 145px;
3500 - display: flex;
3501 - align-items: center;
3502 - justify-content: center;
3503 2971 }
3504 2972
3505 2973 .frm-fake-field {
3506 2974 display: block;
@@ -3505,9 +2973,9 @@
3505 2973 .frm-fake-field {
3506 2974 display: block;
3507 2975 height: 25px;
3508 2976 background-color: var(--light-blue);
3509 - border: 1px solid var(--grey-300);
2977 + border: 1px solid var(--grey-border);
3510 2978 margin: 10px 0;
3511 2979 border-radius: var(--small-radius);
3512 2980 }
3513 2981
@@ -3513,17 +2981,15 @@
3513 2981
3514 2982 .frm-embed-message {
3515 2983 position: absolute;
3516 2984 background: #fff;
3517 - border: 1px solid var(--grey-300);
3518 - color: var(--grey-700);
3519 - padding: var(--gap-md);
3520 - font-size: var(--text-lg);
3521 - max-width: 200px;
3522 - min-width: 50%;
3523 - margin: 0 var(--gap-md);
3524 - overflow: hidden;
3525 - text-overflow: ellipsis;
2985 + border: 1px solid var(--grey-border);
2986 + color: var(--dark-grey);
2987 + padding: 37px 0;
2988 + font-size: 18px;
2989 + width: 50%;
2990 + top: 23px;
2991 + left: 25%
3526 2992 }
3527 2993
3528 2994 .frm-summary-message {
3529 2995 top: 50%;
@@ -3528,9 +2994,9 @@
3528 2994 .frm-summary-message {
3529 2995 top: 50%;
3530 2996 left: 50%;
3531 2997 padding: 15px 0;
3532 - font-size: var(--text-md);
2998 + font-size: 16px;
3533 2999 transform: translate(-50%, -50%);
3534 3000 }
3535 3001
3536 3002 .frm-summary-learn-more {
@@ -3539,9 +3005,8 @@
3539 3005
3540 3006 .frm-single-settings .frm-embed-message {
3541 3007 width: 100%;
3542 3008 position: static;
3543 - border-radius: var(--small-radius);
3544 3009 }
3545 3010
3546 3011 #new_fields input[type=text],
3547 3012 #new_fields input[type=number],
@@ -3578,8 +3043,19 @@
3578 3043 width: 16px;
3579 3044 padding: 0;
3580 3045 }
3581 3046
3047 +.frm-star-group:not(.frm-star-hovered) input[type=radio]:checked + label:before,
3048 +.frm-star-group input + label:hover:before,
3049 +.frm-star-group:hover input + label:hover:before,
3050 +.frm-star-group .star-rating-on:before,
3051 +.frm-star-group .star-rating-hover:before,
3052 +.frm-star-group input[type=radio]:checked + label:before,
3053 +.frm-star-group input + label:before,
3054 +.frm-star-group .star-rating:before {
3055 + color: var( --blue-border);
3056 +}
3057 +
3582 3058 .frm_wrap .frm-number-range + .frm_last input,
3583 3059 .frm_wrap .frm-number-range input {
3584 3060 text-align: center;
3585 3061 font-weight: 600;
@@ -3586,9 +3062,9 @@
3586 3062 }
3587 3063
3588 3064 .frm_wrap .frm-number-range input[type=number],
3589 3065 .frm_wrap .frm-number-range input[type=text] {
3590 - color: var(--primary-700);
3066 + color: var(--primary-hover);
3591 3067 }
3592 3068
3593 3069 .frm-range-min {
3594 3070 position: relative;
@@ -3598,25 +3074,24 @@
3598 3074 content: '';
3599 3075 height: 3px;
3600 3076 width: 10px;
3601 3077 border-radius: 30%;
3602 - background: var(--primary-700);
3078 + background: var(--primary-hover);
3603 3079 position: absolute;
3604 3080 top: 17px;
3605 3081 right: -28%;
3606 3082 }
3607 3083
3608 -.frm_grid_container > p,
3609 3084 .frm_grid_container > p.frm_form_field,
3610 3085 .frm_grid_container > div.frm_form_field,
3611 3086 #new_fields .frm_grid_container > p {
3612 - margin-top: 8px;
3613 - margin-bottom: 8px;
3087 + margin-top: 7px;
3088 + margin-bottom: 7px;
3614 3089 margin-right: 0;
3615 3090 }
3616 3091
3617 3092 #new_fields div.frm_grid_container > .frm_primary_label {
3618 - margin-top: 8px;
3093 + margin-top: 7px;
3619 3094 }
3620 3095
3621 3096 #new_fields .frm_primary_label + p,
3622 3097 #new_fields .frm_primary_label + .frm6 + .frm6,
@@ -3650,9 +3125,9 @@
3650 3125 }
3651 3126
3652 3127 .frm_form_builder .frm_radio label,
3653 3128 .frm_form_builder .frm_checkbox label {
3654 - font-size: var(--text-sm);
3129 + font-size: 14px;
3655 3130 }
3656 3131
3657 3132 /* Start copied front-end CSS */
3658 3133 .horizontal_radio .frm_radio,
@@ -3690,64 +3165,22 @@
3690 3165
3691 3166 .frm_wrap .with_frm_style .frm_checkbox input[type=checkbox],
3692 3167 .frm_wrap .with_frm_style .frm_radio input[type=radio],
3693 3168 .frm_wrap input[type=checkbox],
3694 -.frm-white-body input[type=checkbox],
3695 3169 .field-group input[type=checkbox],
3696 3170 .frm_scale input[type=radio],
3697 3171 .frm_radio input[type=radio],
3698 3172 .frm_checkbox input[type=checkbox] {
3699 - border: 1px solid var(--grey-300);
3173 + border: 1px solid var(--grey-border);
3700 3174 box-shadow: none;
3701 3175 -webkit-appearance: none;
3702 3176 }
3703 3177
3704 -
3705 -.frm_wrap .with_frm_style .frm_checkbox input[type=checkbox],
3706 -.frm_wrap input[type=checkbox],
3707 -.frm-white-body input[type=checkbox],
3708 -.field-group input[type=checkbox],
3709 -.frm_checkbox input[type=checkbox] {
3710 - border-radius: 4px;
3711 -}
3712 -
3713 -.frm-white-body input[type="checkbox"]:checked,
3714 -.frm_wrap input[type="checkbox"]:checked {
3715 - background-color: var(--primary-500);
3716 - border-color: var(--primary-500) !important;
3717 -}
3718 -
3719 -.frm-white-body input[type="checkbox"]:checked:focus,
3720 -.frm_wrap input[type="checkbox"]:checked:focus {
3721 - border-color: var(--primary-500);
3722 -}
3723 -
3724 -.frm-white-body input[type="checkbox"]:checked::before,
3725 -.frm_wrap input[type="checkbox"]:checked::before {
3726 - 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");
3727 - height: 12px;
3728 - width: 12px;
3729 - margin: 1px;
3730 -}
3731 -
3732 3178 .frm_radio input[type="radio"],
3733 3179 .frm_checkbox input[type="checkbox"] {
3734 3180 margin-right: 5px;
3735 3181 }
3736 3182
3737 -.frm_single_entry_page .with_frm_style .frm_radio input[type=radio] {
3738 - margin: 5px 0;
3739 - width: 18px;
3740 - position: relative; /* override Bootstrap */
3741 -}
3742 -
3743 -.frm_single_entry_page .with_frm_style .frm_radio input[type=radio]:before {
3744 - position: relative !important;
3745 - left: calc(50% - 6px);
3746 - top: calc(50% - 6px);
3747 - margin: 0 !important;
3748 -}
3749 -
3750 3183 .frm_inner_field_container {
3751 3184 margin-bottom: 10px;
3752 3185 }
3753 3186
@@ -3761,34 +3194,8 @@
3761 3194 margin-right: 2%;
3762 3195 clear: both;
3763 3196 }
3764 3197
3765 -.frm_inner_field_container > label {
3766 - text-overflow: ellipsis;
3767 - overflow: hidden;
3768 - white-space: nowrap;
3769 -}
3770 -
3771 -.frm_field_box:not(.edit_field_type_divider):hover > .frm_inner_field_container > label,
3772 -.frm_field_box .divider_section_only:hover > .frm_inner_field_container > label,
3773 -li.ui-state-default.selected > .frm_inner_field_container > label {
3774 - max-width: calc(100% - 100px);
3775 -}
3776 -
3777 -.frm-drag-fade {
3778 - background-color: var(--lightest-grey) !important;
3779 - border-radius: 4px;
3780 -}
3781 -
3782 -.frm-drag-fade * {
3783 - opacity: 0;
3784 -}
3785 -
3786 -.frm-dragging .divider_section_only,
3787 -.frm-dragging .frm_field_box {
3788 - pointer-events: none;
3789 -}
3790 -
3791 3198 .frm_form_settings #op-popup, /* 1Password */
3792 3199 .frm_form_settings com-1password-op-button,
3793 3200 .frm_conf_below .frm_conf_field_container .frm_primary_label,
3794 3201 .frm_conf_inline .frm_inner_field_container .frm-show-click a,
@@ -3923,15 +3330,15 @@
3923 3330 animation: spin 2s linear infinite;
3924 3331 }
3925 3332
3926 3333 .frm-wait:before {
3927 - border-bottom-color: var(--primary-700);
3928 - border-right-color: var(--primary-700);
3334 + border-bottom-color: var(--primary-hover);
3335 + border-right-color: var(--primary-hover);
3929 3336 }
3930 3337
3931 3338 .frm_loading_button.frm-button-secondary:before {
3932 - border-bottom-color: var(--primary-500);
3933 - border-right-color: var(--primary-500);
3339 + border-bottom-color: var(--primary-color);
3340 + border-right-color: var(--primary-color);
3934 3341 }
3935 3342
3936 3343 input[type=submit]:focus {
3937 3344 outline: none !important;
@@ -3955,9 +3362,9 @@
3955 3362 #editorcontainer #dyncontent {
3956 3363 margin: 0;
3957 3364 width: 100%;
3958 3365 padding: 6px;
3959 - line-height: var(--leading);
3366 + line-height: 1.5;
3960 3367 border: 0 none;
3961 3368 outline: none;
3962 3369 -moz-box-sizing: border-box;
3963 3370 -webkit-box-sizing: border-box;
@@ -4003,9 +3410,9 @@
4003 3410 font-size: 12px;
4004 3411 }
4005 3412
4006 3413 .frm_border_bottom {
4007 - border-bottom: 1px solid var(--grey-300);
3414 + border-bottom: 1px solid var(--grey-border);
4008 3415 margin-bottom: 10px;
4009 3416 padding-bottom: 10px;
4010 3417 }
4011 3418
@@ -4016,8 +3423,9 @@
4016 3423 .frm_posttax_opt_list .frm_border_bottom input {
4017 3424 margin-right: 1px;
4018 3425 }
4019 3426
3427 +.frm_logic_row,
4020 3428 .frm_add_remove div.frm_form_field {
4021 3429 padding-bottom: 5px;
4022 3430 }
4023 3431
@@ -4074,47 +3482,18 @@
4074 3482 max-width: 100%;
4075 3483 font-size: inherit;
4076 3484 }
4077 3485
4078 -/* Start entry statuses */
4079 -.frm-entry-status {
4080 - padding: var(--gap-2xs) var(--gap-xs);
4081 - align-items: center;
4082 - border-radius: var(--small-radius);
4083 - text-transform: uppercase;
4084 -}
4085 -
4086 -.frm-entry-status-0 {
4087 - color: #1E561F;
4088 - background: #D5F2DC;
4089 -}
4090 -
4091 -.frm-entry-status-1 {
4092 - color: #7A4D05;
4093 - background: #FFF2D2;
4094 -}
4095 -/* End entry statuses */
4096 -
4097 3486 #frm-options-panel {
4098 - padding: 0 var(--gap-sm);
4099 - color: var(--grey-900);
3487 + padding: 0 15px;
3488 + color: var(--darkest-grey);
4100 3489 }
4101 3490
4102 -.frm-right-panel a.frm_add_logic_link,
4103 3491 #frm-options-panel h3 {
4104 3492 padding: 15px 0;
4105 3493 margin-top: -2px;
4106 3494 }
4107 3495
4108 -.frm-right-panel a.frm_add_logic_link:focus {
4109 - outline: auto;
4110 -}
4111 -
4112 -#frm_style_sidebar h3,
4113 -#frm_view_editor_left.frm-right-panel .accordion-section-title {
4114 - padding: 15px 0;
4115 -}
4116 -
4117 3496 .frm_field_key {
4118 3497 background-color: #F7F7F7;
4119 3498 }
4120 3499
@@ -4148,12 +3527,8 @@
4148 3527 .frm-alt-table tr:nth-child(even) {
4149 3528 background-color: var(--sidebar-color);
4150 3529 }
4151 3530
4152 -.frm-alt-table h3 {
4153 - margin-bottom: 0;
4154 -}
4155 -
4156 3531 .form-field .frm_cb_button {
4157 3532 height: 22px;
4158 3533 line-height: 20px;
4159 3534 margin-bottom: 10px;
@@ -4238,9 +3613,8 @@
4238 3613
4239 3614 .frm_field_box {
4240 3615 padding: 5px;
4241 3616 min-height: 20px;
4242 - margin: 10px 0;
4243 3617 }
4244 3618
4245 3619 .frm_indent_opt, td.frm_indent_opt {
4246 3620 padding-left: 25px;
@@ -4255,53 +3629,47 @@
4255 3629 }
4256 3630
4257 3631 .frm_single_option.ui-sortable-placeholder,
4258 3632 li.sortable-placeholder {
3633 + width: calc(100% - 5px) !important;
3634 + height: 0 !important;
4259 3635 border: none;
3636 + box-shadow: 2px -10px 0 1px var(--primary-color);
4260 3637 margin: 0;
4261 3638 visibility: visible !important;
4262 - box-shadow: 2px -10px 0 2px var(--primary-500);
4263 3639 }
4264 3640
4265 -#frm_form_editor_container > ul > .frm_single_option.ui-sortable-placeholder,
4266 -#frm_form_editor_container > ul > li.sortable-placeholder {
4267 - width: calc(100% - 5px) !important;
4268 - height: 0 !important;
4269 -}
4270 -
4271 -#frm_form_editor_container > ul > li > ul {
4272 - position: relative;
4273 -}
4274 -
4275 -#frm_form_editor_container > ul > li > ul > li.sortable-placeholder,
4276 -#frm_form_editor_container ul.start_divider > li > ul > li.sortable-placeholder {
4277 - position: absolute;
4278 - top: 20px;
4279 - bottom: 0;
4280 -}
4281 -
4282 3641 .edit_field_type_divider + li.sortable-placeholder {
4283 - box-shadow: 2px 5px 0 2px var(--primary-500);
3642 + box-shadow: 2px 5px 0 1px var(--primary-color);
4284 3643 }
4285 3644
4286 3645 .start_divider li.sortable-placeholder {
4287 - box-shadow: 2px -5px 0 2px var(--primary-500);
3646 + box-shadow: 2px -5px 0 1px var(--primary-color);
4288 3647 }
4289 3648
4290 -.frm-is-collapsed + .sortable-placeholder {
4291 - box-shadow: 2px 15px 0 2px var(--primary-500);
3649 +.frm_single_option.ui-sortable-placeholder {
3650 + box-shadow: 20px -3px 0 1px var(--primary-color);
4292 3651 }
4293 3652
4294 -.frm_single_option.ui-sortable-placeholder {
4295 - box-shadow: 0 0 1px 1px var(--primary-500);
3653 +.frm-is-collapsed + .sortable-placeholder {
3654 + box-shadow: 2px 15px 0 1px var(--primary-color);
4296 3655 }
4297 3656
4298 3657 .frm_sorting > li.edit_field_type_end_divider:first-child,
3658 +.frm_sorting > .frmbutton + .sortable-placeholder, /* hide for first field */
3659 +.no-drop-placeholder,
4299 3660 .frm-show-click,
4300 3661 li.ui-state-default.edit_field_type_divider .frm-show-click {
4301 3662 display: none;
4302 3663 }
4303 3664
3665 +.frm_form_field.ui-sortable-helper {
3666 + height: 30px !important;
3667 + background-color: #fff !important;
3668 + overflow: hidden !important;
3669 + box-sizing: border-box;
3670 +}
3671 +
4304 3672 .frm_form_field.ui-sortable-helper .frm-field-action-icons,
4305 3673 .frm_form_field.ui-sortable-helper .frm_form_fields,
4306 3674 .frm_form_field.ui-sortable-helper .frm_description,
4307 3675 .frm_form_field.ui-sortable-helper .description {
@@ -4323,12 +3691,8 @@
4323 3691 opacity: 0;
4324 3692 transition: opacity .15s ease-in-out;
4325 3693 }
4326 3694
4327 -#frm-show-fields .frm-field-settings-open .frm-show-hover {
4328 - opacity: 1;
4329 -}
4330 -
4331 3695 .frm_sortable_field_opts {
4332 3696 margin-top: 5px;
4333 3697 }
4334 3698
@@ -4391,12 +3755,8 @@
4391 3755 li.ui-state-default.selected.edit_field_type_divider .divider_section_only .frm-show-hover {
4392 3756 opacity: 100;
4393 3757 }
4394 3758
4395 -li.frm_field_box > ul.frm_grid_container {
4396 - position: relative;
4397 -}
4398 -
4399 3759 .frm_sorting span.ui-icon {
4400 3760 width: 16px;
4401 3761 }
4402 3762
@@ -4403,10 +3763,10 @@
4403 3763 /* Image options for Radio and Checkbox */
4404 3764
4405 3765 .frm_image_options .frm_image_option_container {
4406 3766 --field-border-width: 1px;
4407 - --border-color: var(--grey-300);
4408 - --border-color-active: var(--primary-500);
3767 + --border-color: var(--grey-border);
3768 + --border-color-active: var(--primary-color);
4409 3769 --border-radius: var(--small-radius);
4410 3770 }
4411 3771
4412 3772 .frm_image_option_container svg {
@@ -4460,10 +3820,10 @@
4460 3820 height: 75px;
4461 3821 object-fit: cover;
4462 3822 }
4463 3823
4464 -.frm_list_entry_page img {
4465 - max-width: 100%;
3824 +.frm_list_entry_page .frm_file_link img {
3825 + max-width: 75px;
4466 3826 height: auto;
4467 3827 }
4468 3828
4469 3829 .frm_image_option_container .frm_empty_url {
@@ -4507,13 +3867,13 @@
4507 3867 margin-top: 17px;
4508 3868 }
4509 3869
4510 3870 .frm_image_data {
4511 - margin-left: var(--gap-xs);
3871 + margin-left: 10px;
4512 3872 display: flex;
4513 3873 flex-direction: column;
4514 - font-size: var(--text-sm);
4515 - justify-content: space-around;
3874 + font-size: 14px;
3875 + line-height: 17px;
4516 3876 }
4517 3877
4518 3878 .frm_image_styling_frame {
4519 3879 display: flex;
@@ -4537,9 +3897,10 @@
4537 3897 max-width: 54px;
4538 3898 }
4539 3899
4540 3900 .frm_image_preview_title{
4541 - color: var(--grey-500);
3901 + margin-top: 6px;
3902 + color: rgba(40, 47, 54, 0.65);
4542 3903 overflow: hidden;
4543 3904 white-space: nowrap;
4544 3905 text-overflow: ellipsis;
4545 3906 }
@@ -4545,9 +3906,9 @@
4545 3906 }
4546 3907
4547 3908 .frm_wrap .frm_choose_image_box {
4548 3909 cursor: pointer;
4549 - color: var(--grey-700);
3910 + color: var(--dark-grey);
4550 3911 background-color: #F2F2F2;
4551 3912 margin-left: 24px;
4552 3913 text-align: center;
4553 3914 width: 100%;
@@ -4556,11 +3917,13 @@
4556 3917 .frm_wrap .frm_choose_image_box:hover {
4557 3918 background: #fff;
4558 3919 }
4559 3920
3921 +a.frm_remove_image_option .frmsvg,
4560 3922 a.frm_remove_image_option,
4561 3923 .frm_remove_image_option {
4562 - color: var(--grey-400);
3924 + margin-top: 9px;
3925 + color: rgba(40, 47, 54, 0.4);
4563 3926 cursor: pointer;
4564 3927 }
4565 3928
4566 3929 a.frm_remove_image_option:hover .frmsvg,
@@ -4570,10 +3933,17 @@
4570 3933 }
4571 3934
4572 3935 /* Form settings */
4573 3936
3937 +#form_settings_page label,
3938 +.frm_form_builder label {
3939 + font-weight: normal;
3940 + font-size: 15px;
3941 + color: var(--dark-grey);
3942 +}
3943 +
4574 3944 .frm-form-setting-tabs {
4575 - margin-top: var(--gap-sm) !important;
3945 + margin-top: 20px !important;
4576 3946 }
4577 3947
4578 3948 .frm-right-panel > .postbox {
4579 3949 background-color: transparent;
@@ -4584,44 +3954,40 @@
4584 3954
4585 3955 .frm-right-panel .postbox.frm_with_icons .inside,
4586 3956 .frm-right-panel .postbox .inside,
4587 3957 .frm-right-panel .inside {
4588 - font-size: var(--text-md);
3958 + font-size: 16px;
4589 3959 padding: 15px 20px 20px;
4590 - color: var(--grey-700);
3960 + color: var(--dark-grey);
4591 3961 }
4592 3962
4593 3963 .frm-right-panel .misc-pub-section {
4594 - padding: var(--gap-xs) 0;
3964 + padding: 10px 0;
3965 + line-height: 1.4em;
4595 3966 position: relative;
4596 3967 }
4597 3968
4598 3969 .frm-right-panel .inside a,
4599 3970 .frm-form-setting-tabs a {
4600 - font-size: var(--text-md);
4601 - color: var(--grey-700);
4602 - padding: var(--gap-sm);
3971 + font-size: 16px;
3972 + color: var(--dark-grey);
3973 + padding: 15px 15px 15px 20px;
4603 3974 display: block;
4604 3975 }
4605 3976
4606 -.frm-form-setting-tabs a {
4607 - color: var(--grey-900);
4608 - padding: var(--gap-sm) var(--gap-md);
4609 -}
4610 -
4611 3977 .frm-right-panel .inside a {
4612 3978 padding: 0;
4613 - color: var(--primary-500);
3979 + color: var(--primary-color);
4614 3980 display: inline-block;
4615 3981 }
4616 3982
4617 3983 .frm-right-panel .inside a:hover {
4618 - color: var(--primary-700);
3984 + color: var(--primary-hover);
4619 3985 }
4620 3986
4621 3987 .frm-form-setting-tabs a:hover {
4622 3988 background: var(--sidebar-hover);
4623 - color: var(--grey-900);
3989 + color: var(--dark-grey);
4624 3990 }
4625 3991
4626 3992 .frm-right-panel .inside i,
4627 3993 .frm-right-panel .inside .frmsvg,
@@ -4630,20 +3996,16 @@
4630 3996 margin: 0 5px;
4631 3997 display: inline-block;
4632 3998 width: 20px;
4633 3999 height: 20px;
4634 - color: var(--grey-500);
4000 + color: var(--grey);
4635 4001 }
4636 4002
4637 -.frm-form-setting-tabs a .frmsvg {
4638 - margin: 0;
4639 -}
4640 -
4641 4003 .frm-right-panel .inside a:hover i,
4642 4004 .frm-right-panel .inside a:hover .frmsvg,
4643 4005 .frm-form-setting-tabs a:hover .frmsvg,
4644 4006 .frm-form-setting-tabs a:hover span {
4645 - color: var(--grey-700);
4007 + color: var(--dark-grey);
4646 4008 }
4647 4009
4648 4010 .frm_settings_form .tabs-panel {
4649 4011 padding: 0 25px;
@@ -4657,9 +4019,9 @@
4657 4019
4658 4020 #frm_adv_info .tabs-panel {
4659 4021 min-height: 0 !important;
4660 4022 overflow-x: hidden;
4661 - padding: 0;
4023 + padding: 0 20px;
4662 4024 border: none;
4663 4025 background: transparent;
4664 4026 }
4665 4027
@@ -4668,130 +4030,48 @@
4668 4030 }
4669 4031
4670 4032 .frm_posttax_opt_list,
4671 4033 .frm_submit_logic_rows {
4672 - border: 1px solid var(--grey-300);
4673 - padding: var(--gap-md);
4034 + border: 1px solid var(--grey-border);
4035 + padding: 25px;
4674 4036 border-radius: var(--small-radius);
4675 - margin: 5px 0 5px var(--gap-md);
4037 + margin: 5px 0 5px 25px;
4676 4038 }
4677 4039
4678 -.frm_submit_logic_rows .frm_grid_container > p.frm_form_field {
4679 - margin: 0;
4680 -}
4681 -
4682 -/* Color picker CSS */
4683 -.frm-right-panel .wp-picker-open + .wp-picker-input-wrap {
4040 +/* Admin toggle */
4041 +.frm_toggle_off,
4042 +.frm_toggle_on {
4043 + display: none;
4044 + color: #fff;
4045 + z-index: 999;
4684 4046 position: absolute;
4685 - margin-left: calc( ( 100% - 35px ) * -1 );
4686 - margin-top: 1px;
4687 - width: calc( 100% - 36px );
4047 + font-size: 10px;
4048 + line-height: 20px;
4049 + left: 6px;
4688 4050 }
4689 4051
4690 -.frm-right-panel .wp-picker-container input[type="text"].wp-color-picker {
4691 - border: none;
4692 - padding: 5px 8px;
4693 - font-family: inherit;
4694 - color: var(--grey-700);
4695 - font-size: var(--text-md);
4696 - width: 100%;
4697 - line-height: var(--leading);
4698 -}
4699 -
4700 -.frm-right-panel .wp-picker-input-wrap .wp-picker-clear {
4701 - display: none !important;
4702 -}
4703 -
4704 -.frm-right-panel .wp-picker-holder {
4705 - position: absolute;
4706 - z-index: 999;
4707 -}
4708 -
4709 -.frm-right-panel .wp-picker-input-wrap label {
4710 - margin-bottom: 0;
4711 -}
4712 -
4713 -.frm-right-panel .wp-picker-container .wp-color-result.button {
4714 - width: 100%;
4715 - overflow: hidden;
4716 - margin: 0 !important;
4717 - height: var(--h-md) !important;
4718 - padding: 0 0 0 var(--gap-lg) !important;
4719 - border-radius: var(--small-radius);
4720 - border-color: var(--grey-300);
4721 -}
4722 -
4723 -.frm-right-panel .wp-color-result-text {
4724 - line-height: var(--leading) !important;
4725 - font-size: var(--text-md);
4726 - background: #fff !important;
4727 - color: var(--grey-900);
4728 - padding: 5px 8px;
4729 - border-color: var(--grey-300);
4730 - text-align: left;
4731 -}
4732 -
4733 -.frm-right-panel .color-alpha {
4734 - width: var(--gap-lg) !important;
4735 -}
4736 -
4737 -.frm_grid_container .wp-picker-container {
4738 - width: 100%;
4739 - position: relative;
4740 -}
4741 -
4742 -.wp-picker-container button.wp-color-result {
4743 - border: 1px solid var(--grey-300) !important;
4744 -}
4745 -
4746 -.wp-picker-container .wp-picker-input-wrap input.hex.wp-color-picker {
4747 - max-width: 100%;
4748 - position: relative;
4749 -}
4750 -
4751 -.frm_end .wp-picker-holder {
4752 - margin-left: -145px;
4753 -}
4754 -
4755 -.frm_end.frm6 .wp-picker-holder {
4756 - margin-left: -86px;
4757 -}
4758 -/* End of color picker CSS */
4759 -
4760 -/*
4761 -These are the styles for the "Enable Formidable styling" toggle in the visual styler.
4762 -To use this element, you can call the FrmHtmlHelper::toggle function.
4763 -*/
4764 -.frm_toggle_opt {
4765 - padding: 0;
4766 - white-space: normal;
4052 +.frm_toggle_off {
4767 4053 display: inline;
4768 - vertical-align: middle;
4769 - font-weight: normal;
4054 + left: auto;
4055 + right: 5px;
4056 + color: var(--dark-grey);
4770 4057 }
4771 4058
4772 -.frm_on_label,
4773 -.frm_off_label {
4774 - color: #444444;
4775 -}
4776 -
4777 4059 .frm_toggle {
4778 4060 position: relative;
4779 4061 display: inline-block;
4780 - width: 40px;
4781 - height: var(--h-xs);
4062 + width: 45px;
4063 + height: 20px;
4782 4064 vertical-align: middle;
4065 + margin: 2px;
4783 4066 }
4784 4067
4785 -.frm_toggle_block {
4786 - display: inline-flex;
4787 - gap: var(--gap-sm);
4788 - align-items: center;
4068 +label > span.frm_toggle {
4069 + margin-right: 15px;
4789 4070 }
4790 4071
4791 -.frm_toggle input, /* Reverse compatibility */
4792 -.frm_toggle_block input {
4793 - display:none !important;
4072 +.frm_toggle input {
4073 + display: none !important;
4794 4074 }
4795 4075
4796 4076 .frm_toggle_slider {
4797 4077 position: absolute;
@@ -4799,44 +4079,26 @@
4799 4079 top: 0;
4800 4080 left: 0;
4801 4081 right: 0;
4802 4082 bottom: 0;
4803 - background-color: var(--grey-border);
4804 4083 transition: .4s;
4805 4084 border-radius: 30px;
4085 + background-color: #fff;
4086 + box-shadow: 0 0 0 2px var(--grey);
4806 4087 }
4807 4088
4808 4089 .frm_toggle_slider:before {
4809 4090 border-radius: 50%;
4810 4091 position: absolute;
4811 - 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>");
4812 - height: 22px;
4813 - width: 22px;
4814 - padding: 0 5.5px;
4815 - left: 1px;
4816 - bottom: 1px;
4817 - background-color: white;
4818 - transition: .4s;
4819 - box-sizing: border-box;
4820 - box-shadow: var(--box-shadow-md);
4821 - font-size: 21px;
4822 - line-height: 18px;
4092 + content: "";
4093 + height: 16px;
4094 + width: 16px;
4095 + left: 2px;
4096 + top: 2px;
4097 + transition: .3s;
4098 + background-color: var(--grey);
4823 4099 }
4824 4100
4825 -input:checked + .frm_toggle .frm_toggle_slider {
4826 - background-color: var(--primary-500);
4827 -}
4828 -
4829 -input:focus + .frm_toggle .frm_toggle_slider {
4830 - box-shadow: var(--box-shadow-md);
4831 -}
4832 -
4833 -input:checked + .frm_toggle .frm_toggle_slider:before {
4834 - padding: 0 6px;
4835 - transform: translateX(16px);
4836 - 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>");
4837 -}
4838 -
4839 4101 input[disabled] + .frm_toggle_slider {
4840 4102 pointer-events: none;
4841 4103 cursor: text;
4842 4104 opacity: .5;
@@ -4841,53 +4103,16 @@
4841 4103 cursor: text;
4842 4104 opacity: .5;
4843 4105 }
4844 4106
4845 -.frm_toggle_opt ~ .frm_toggle .frm_toggle_slider:before {
4846 - content: '' !important; /* Don't show x/check if off label included or on builder page */
4847 -}
4848 -
4849 -.rtl .frm_toggle_opt {
4850 - padding: 0 8px;
4851 -}
4852 -
4853 -.rtl .frm_toggle_slider:before {
4854 - left: 17px;
4855 -}
4856 -
4857 -.rtl input:checked + .frm_toggle .frm_toggle_slider:before {
4858 - transform: none!important;
4859 - left: 1px;
4860 -}
4861 -
4862 -/* Deprecated admin toggle */
4863 -.frm_toggle_off,
4864 -.frm_toggle_on {
4865 - display: none;
4866 - color: #fff;
4867 - z-index: 999;
4868 - position: absolute;
4869 - font-size: 10px;
4870 - line-height: 20px;
4871 - left: 6px;
4872 -}
4873 -
4874 -.frm_toggle_off {
4875 - display: inline;
4876 - left: auto;
4877 - right: 5px;
4878 - color: var(--dark-grey);
4879 -}
4880 -
4881 4107 .frm_toggle_long {
4882 - width: 80% !important;
4108 + width: 80%;
4883 4109 height: 28px;
4884 - display: inline-block !important;
4885 4110 }
4886 4111
4887 4112 .frm_toggle_long .frm_toggle_slider {
4888 - background: var(--primary-700);
4889 - box-shadow: 0 0 0 2px var(--primary-700);
4113 + background: var(--primary-hover);
4114 + box-shadow: 0 0 0 2px var(--primary-hover);
4890 4115 }
4891 4116
4892 4117 .frm_toggle_long .frm_toggle_off,
4893 4118 .frm_toggle_long .frm_toggle_on {
@@ -4912,11 +4137,20 @@
4912 4137 border-radius: var(--border-radius) 0 0 var(--border-radius);
4913 4138 height: 100%;
4914 4139 background-color: #fff;
4915 4140 color: var(--primary-color);
4916 - content: '' !important;
4917 4141 }
4918 4142
4143 +input:checked + .frm_toggle_slider {
4144 + background-color: var(--primary-hover);
4145 + box-shadow: 0 0 0 2px var(--primary-hover);
4146 +}
4147 +
4148 +input:checked + .frm_toggle_slider:before {
4149 + transform: translateX(25px);
4150 + background-color: #fff;
4151 +}
4152 +
4919 4153 .frm_toggle_long input:checked + .frm_toggle_slider:before {
4920 4154 transform: translateX(101%);
4921 4155 border-radius: 0 var(--border-radius) var(--border-radius) 0;
4922 4156 }
@@ -4931,9 +4165,9 @@
4931 4165
4932 4166 .frm_toggle_long .frm_toggle_on,
4933 4167 .frm_toggle_long input:checked + .frm_toggle_slider + .frm_toggle_on + .frm_toggle_off {
4934 4168 display: inline;
4935 - color: var(--primary-500);
4169 + color: var(--primary-color);
4936 4170 font-weight: normal;
4937 4171 }
4938 4172
4939 4173 .frm_toggle_long .frm_toggle_off,
@@ -4941,9 +4175,11 @@
4941 4175 color: #fff;
4942 4176 font-weight: bold;
4943 4177 }
4944 4178
4945 -/* End toggle styling */
4179 +input:focus + .frm_toggle_slider {
4180 + box-shadow: 0 0 1px #008ec2;
4181 +}
4946 4182
4947 4183 /* Global Settings */
4948 4184
4949 4185 .tabs-panel {
@@ -4961,59 +4197,21 @@
4961 4197 margin-right: 20px !important;
4962 4198 display: inline-block !important;
4963 4199 }
4964 4200
4965 -#frm_stripe_icon {
4966 - border-radius: 5px;
4967 -}
4968 -
4969 -#captcha_settings .frm_primary_label {
4970 - margin-top: var(--gap-sm);
4971 -}
4972 -
4973 -.frm-long-icon-buttons {
4974 - display: flex;
4975 - gap: var(--gap-md);
4976 -}
4977 -
4978 -.frm-long-icon-buttons > label {
4979 - border: 1px solid var(--grey-300);
4980 - color: var(--grey-700);
4981 - border-radius: var(--small-radius);
4982 - display: flex;
4983 - padding: var(--gap-sm);
4984 - gap: var(--gap-sm);
4985 - justify-content: center;
4986 - align-items: center;
4987 - width: calc( 33% - var(--gap-sm) );
4988 - box-sizing: border-box;
4989 -}
4990 -
4991 -.frm-long-icon-buttons > label:hover {
4992 - color: var(--primary-500);
4993 -}
4994 -
4995 -.frm-long-icon-buttons input[type=radio] {
4996 - display: none;
4997 -}
4998 -
4999 -.frm-long-icon-buttons input[type=radio]:checked + label {
5000 - border-color: var(--primary-500);
5001 - box-shadow: 0 0 0 1px var(--primary-color);
5002 -}
5003 -
5004 -.frm-long-icon-buttons label > svg {
5005 - height: 21px;
5006 -}
5007 -
5008 4201 .frm-example-icon .frmsvg,
5009 4202 .frm-example-icon i {
5010 4203 height: 20px;
5011 4204 width: 20px;
5012 4205 font-size: 20px;
5013 - color: var(--grey-700);
4206 + color: var(--dark-grey);
5014 4207 }
5015 4208
4209 +.edd_frm_license_row {
4210 + clear: both;
4211 + line-height: 2em;
4212 +}
4213 +
5016 4214 .frm_license_msg {
5017 4215 margin-top: 0;
5018 4216 }
5019 4217
@@ -5040,14 +4238,23 @@
5040 4238
5041 4239 .frm_no_items {
5042 4240 margin: 0 auto 50px;
5043 4241 text-align: center;
5044 - color: var(--grey-700);
4242 + color: var(--dark-grey);
5045 4243 max-width: 500px;
5046 4244 }
5047 4245
4246 +.frm_no_items h2 {
4247 + font-size: 25px;
4248 + margin-bottom: 30px !important;
4249 +}
4250 +
4251 +.frm_no_items p {
4252 + font-size: 14px;
4253 +}
4254 +
5048 4255 .frm-subscribe {
5049 - margin: var(--gap-lg) 0;
4256 + margin: 30px 0;
5050 4257 }
5051 4258
5052 4259 /* Inbox */
5053 4260
@@ -5057,16 +4264,16 @@
5057 4264
5058 4265 .frm_inbox_card {
5059 4266 display: grid;
5060 4267 grid-template-columns: 72px 1fr;
5061 - grid-gap: var(--gap-xs);
5062 - border-bottom: 1px solid var(--grey-300);
5063 - padding: var(--gap-md);
4268 + grid-gap: 15px;
4269 + border-bottom: 1px solid var(--grey-border);
4270 + padding: 25px;
5064 4271 }
5065 4272
5066 4273 .frm_inbox_card_icon {
5067 4274 grid-row: span 3 / span 3;
5068 - padding-top: var(--gap-xs);
4275 + padding-top: 20px;
5069 4276 text-align: center
5070 4277 }
5071 4278
5072 4279 .frm_inbox_card_icon svg {
@@ -5085,8 +4292,11 @@
5085 4292 border: none;
5086 4293 text-transform: none;
5087 4294 margin: 0;
5088 4295 padding: 0;
4296 + font-weight: 600;
4297 + color: var(--medium-grey);
4298 + font-size: 16px;
5089 4299 }
5090 4300
5091 4301 .frm_inbox_date {
5092 4302 text-align: right;
@@ -5114,8 +4324,37 @@
5114 4324 margin-left: 2px;
5115 4325 vertical-align: text-bottom;
5116 4326 }
5117 4327
4328 +/* Styles tabs */
4329 +
4330 +#frm_styling_form #frm_delete_style {
4331 + padding-right: 10px;
4332 +}
4333 +
4334 +#frm_styling_form #frm_delete_style .frmsvg {
4335 + vertical-align: -webkit-baseline-middle;
4336 +}
4337 +
4338 +.frm_pro_form .frm_form_field.frm_lite_style,
4339 +.frm_pro_form .frm_lite_style {
4340 + display: none !important;
4341 +}
4342 +
4343 +label.default-style-box input[type="checkbox"] {
4344 + vertical-align: middle;
4345 +}
4346 +
4347 +#frm_styling_form .frm_form_field input[type="checkbox"],
4348 +#frm_styling_form .frm_form_field input[type="radio"] {
4349 + vertical-align: bottom;
4350 +}
4351 +
4352 +#frm_styling_form .howto span {
4353 + float: none;
4354 + margin-top: 0;
4355 +}
4356 +
5118 4357 /* Import/Export */
5119 4358 .csv_opts #frm_csv_col_sep {
5120 4359 width: 45px;
5121 4360 }
@@ -5166,9 +4405,9 @@
5166 4405 padding: 0;
5167 4406 }
5168 4407
5169 4408 .frm-feature-banner {
5170 - background: var(--grey-700);
4409 + background: var(--dark-grey);
5171 4410 color: #fff;
5172 4411 border-radius: var(--small-radius);
5173 4412 padding: 20px;
5174 4413 margin: 10px 0;
@@ -5174,9 +4413,9 @@
5174 4413 margin: 10px 0;
5175 4414 }
5176 4415
5177 4416 .frm-feature-banner p {
5178 - font-size: var(--text-sm);
4417 + font-size: 14px;
5179 4418 }
5180 4419
5181 4420 .frm-feature-banner .dismiss {
5182 4421 margin-top: -10px;
@@ -5211,31 +4450,29 @@
5211 4450 /*Form Settings Tab*/
5212 4451
5213 4452 h2.frm-h2,
5214 4453 .frm_form_settings h2 {
5215 - border-bottom: 1px solid var(--grey-300);
5216 - color: var(--grey-900);
5217 - font-weight: 400 !important;
4454 + border-bottom: 1px solid var(--grey-border);
4455 + color: var(--dark-grey);
4456 + font-size: 20px !important;
4457 + font-weight: 500 !important;
5218 4458 padding: 9px 0 5px;
5219 4459 margin: 0;
5220 4460 }
5221 4461
5222 4462 .frm_settings_form h3,
5223 -.frm_form_settings h3,
5224 -.frm_form_settings span.frm_add_logic_link {
5225 - font-size: var(--text-md);
5226 - border-top: 1px solid var(--grey-300);
5227 - padding-top: var(--gap-sm);
5228 - margin: var(--gap-sm) 0;
4463 +.frm_form_settings h3 {
4464 + font-size: 16px;
4465 + border-top: 1px solid var(--grey-border);
4466 + padding-top: 10px;
5229 4467 font-weight: normal;
5230 4468 text-transform: uppercase;
5231 4469 color: var(--medium-grey);
5232 - display: block;
5233 4470 }
5234 4471
5235 4472 .frm_form_settings .howto {
5236 - color: var(--grey-500);
5237 - font-size: var(--text-sm);
4473 + color: var(--medium-grey);
4474 + font-size: 15px;
5238 4475 margin-top: 8px;
5239 4476 }
5240 4477
5241 4478 .frm_form_settings .advanced_settings .form-table {
@@ -5250,10 +4487,18 @@
5250 4487 width: 95%;
5251 4488 }
5252 4489
5253 4490 .frm_wrap .ui-autocomplete {
4491 + box-shadow: none;
4492 + border: 1px solid var(--grey-border);
4493 + border-radius: var(--small-radius);
4494 + background: var(--lightest-grey);
4495 + position: absolute;
5254 4496 padding: 3px 0;
4497 + font-size: 15px;
5255 4498 max-height: 310px;
4499 + overflow-y: auto;
4500 + overflow-x: hidden;
5256 4501 }
5257 4502
5258 4503 .frm_wrap .ui-widget {
5259 4504 font-family: inherit;
@@ -5259,18 +4504,18 @@
5259 4504 font-family: inherit;
5260 4505 }
5261 4506
5262 4507 .frm_wrap .ui-autocomplete li {
5263 - padding: 2px 4px;
4508 + padding: 2px 10px;
5264 4509 background: none;
5265 - color: var(--grey-700);
4510 + color: var(--dark-grey);
5266 4511 border: none;
5267 4512 font-weight: normal;
5268 4513 }
5269 4514
5270 -.frm_wrap .ui-autocomplete .ui-menu-item-wrapper.ui-state-active {
5271 - border: none;
5272 - font-weight: inherit;
4515 +.frm_wrap .ui-autocomplete li.ui-state-focus {
4516 + background: rgb(65, 153, 253);
4517 + color: #fff;
5273 4518 }
5274 4519
5275 4520 .frm_select_with_label {
5276 4521 margin: 7px 0 0;
@@ -5306,9 +4551,9 @@
5306 4551 #frm-insert-fields-box ul.frm_code_list li.clear.frm_block {
5307 4552 height: 10px;
5308 4553 }
5309 4554
5310 -#frm_adv_info .frm_noallow {
4555 +.frm_page_container #frm_adv_info .frm_noallow {
5311 4556 display: none;
5312 4557 }
5313 4558
5314 4559 #frm_adv_info #frm-conditionals .frm_noallow {
@@ -5343,9 +4588,9 @@
5343 4588 #frm_notification_settings .widget-top .widget-action,
5344 4589 #frm_form_editor_container .widget-top .widget-action {
5345 4590 border: 0;
5346 4591 margin: 0;
5347 - padding: 8px;
4592 + padding: 10px;
5348 4593 background: 0 0;
5349 4594 cursor: pointer;
5350 4595 outline: 0;
5351 4596 }
@@ -5350,12 +4595,12 @@
5350 4595 outline: 0;
5351 4596 }
5352 4597
5353 4598 #frm_email_addon_menu {
5354 - border: 1px solid var(--grey-300);
5355 - padding: var(--gap-sm);
4599 + border: 1px solid var(--grey-border);
4600 + padding: 15px;
5356 4601 border-radius: 4px;
5357 - margin: var(--gap-md) 0 var(--gap-sm);
4602 + margin: 25px 0 15px;
5358 4603 }
5359 4604
5360 4605 #frm_email_addon_menu .frm-search {
5361 4606 float: right;
@@ -5366,12 +4611,8 @@
5366 4611 clear: none;
5367 4612 padding-top: 7px;
5368 4613 }
5369 4614
5370 -.frm_email_settings .widget .widget-top {
5371 - background-color: var(--sidebar-color);
5372 -}
5373 -
5374 4615 .frm_email_settings .widget .widget-top,
5375 4616 .frm_email_settings .widget .widget-top h3 {
5376 4617 cursor: pointer !important;
5377 4618 }
@@ -5376,17 +4617,23 @@
5376 4617 cursor: pointer !important;
5377 4618 }
5378 4619
5379 4620 .frm_email_settings .widget {
5380 - margin-bottom: var(--gap-sm);
4621 + margin-bottom: 15px;
4622 + line-height: 1.4em;
4623 + padding: 0;
5381 4624 }
5382 4625
4626 +.frm_email_settings .widget:last-of-type {
4627 + margin-bottom: 20px;
4628 +}
4629 +
5383 4630 .frm_form_action_settings .widget-top {
5384 4631 box-shadow: none;
5385 - border-color: var(--grey-300);
5386 - border-radius: var(--small-radius);
4632 + border-color: var(--grey-border);
4633 + border-radius: 4px;
5387 4634 background: var(--lightest-grey);
5388 - color: var(--grey-700);
4635 + color: var(--dark-grey);
5389 4636 }
5390 4637
5391 4638 .frm_form_action_settings:hover .widget-top {
5392 4639 border-color: var(--grey);
@@ -5398,9 +4645,9 @@
5398 4645 border-bottom: none;
5399 4646 }
5400 4647
5401 4648 .frm_form_action_settings.open:hover .widget-top {
5402 - border-color: var(--grey-300);
4649 + border-color: var(--grey-border);
5403 4650 }
5404 4651
5405 4652 .frm_form_action_settings > .widget-inside {
5406 4653 display: none;
@@ -5412,9 +4659,9 @@
5412 4659
5413 4660 .frm_form_action_settings .widget-inside {
5414 4661 min-height: 25px;
5415 4662 padding: 15px;
5416 - border-color: var(--grey-300);
4663 + border-color: var(--grey-border);
5417 4664 border-bottom-left-radius: 4px;
5418 4665 border-bottom-right-radius: 4px;
5419 4666 }
5420 4667
@@ -5422,14 +4669,14 @@
5422 4669 .frm_form_action_settings .widget-title h3 {
5423 4670 display: inline-block;
5424 4671 border-bottom: none;
5425 4672 padding: 10px 10px 5px;
5426 - font-size: var(--text-md);
4673 + font-size: 16px;
5427 4674 font-weight: 500;
5428 4675 }
5429 4676
5430 4677 #frm_email_addon_menu h3 {
5431 - margin: 0 0 var(--gap-sm);
4678 + margin: 0 0 15px;
5432 4679 clear: both;
5433 4680 }
5434 4681
5435 4682 .frm_single_api_settings p > label {
@@ -5465,9 +4712,9 @@
5465 4712 }
5466 4713
5467 4714 #frm-hide-groups,
5468 4715 #frm-show-groups {
5469 - font-size: var(--text-md);
4716 + font-size: 16px;
5470 4717 float: right;
5471 4718 }
5472 4719
5473 4720 .frm_actions_list a:active, .frm_actions_list a:focus {
@@ -5474,16 +4721,16 @@
5474 4721 outline: none;
5475 4722 }
5476 4723
5477 4724 .frm_actions_list a {
5478 - font-size: var(--text-sm);
5479 - color: var(--grey-700);
4725 + font-size: 14px;
4726 + color: var(--dark-grey);
5480 4727 word-break: break-word;
5481 4728 }
5482 4729
5483 4730 .frm_actions_list span.frm-outer-circle {
5484 4731 /* 50px total with 30px content */
5485 - background-color: var(--grey-100);
4732 + background-color: var(--sidebar-color);
5486 4733 padding: 10px;
5487 4734 text-align: center;
5488 4735 border-radius: 50%;
5489 4736 display: block;
@@ -5489,13 +4736,12 @@
5489 4736 display: block;
5490 4737 width: 30px;
5491 4738 height: 30px;
5492 4739 margin: 0 auto 15px;
5493 - line-height: 1;
5494 4740 }
5495 4741
5496 4742 .frm_email_settings .widget-title h4 {
5497 - color: var(--grey-700);
4743 + color: var(--dark-grey);
5498 4744 }
5499 4745
5500 4746 .frm_disabled_action .widget-title h4 {
5501 4747 color: var(--grey);
@@ -5511,17 +4757,16 @@
5511 4757 }
5512 4758
5513 4759 span.frm-inner-circle,
5514 4760 .frm_email_settings .widget-title .frm_form_action_icon {
5515 - background-color: var(--grey-400);
4761 + background-color: var(--grey-border);
5516 4762 border-radius: 50%;
5517 4763 display: inline-block;
5518 4764 text-align: center;
5519 - line-height: 1;
5520 4765 }
5521 4766
5522 4767 span.frm-inner-circle {
5523 - background-color: var(--primary-700);
4768 + background-color: var(--primary-hover);
5524 4769 height: 22px;
5525 4770 width: 22px;
5526 4771 padding: 4px;
5527 4772 color: #fff;
@@ -5534,9 +4779,9 @@
5534 4779 .frm_email_settings .widget-title .frm_form_action_icon {
5535 4780 height: 15px;
5536 4781 width: 15px;
5537 4782 padding: 5px;
5538 - color: #fff;
4783 + color: var(--lightest-grey);
5539 4784 vertical-align: middle;
5540 4785 }
5541 4786
5542 4787 .frm_actions_list .frmsvg,
@@ -5557,9 +4802,9 @@
5557 4802 }
5558 4803
5559 4804 span.frm-inner-circle.frm-inverse {
5560 4805 background-color: transparent;
5561 - color: var(--primary-700);
4806 + color: var(--primary-hover);
5562 4807 padding: 0;
5563 4808 height: 30px;
5564 4809 width: 100%;
5565 4810 }
@@ -5565,9 +4810,9 @@
5565 4810 }
5566 4811
5567 4812 .frm_actions_list span.frm-inverse i,
5568 4813 .frm_actions_list span.frm-inverse .frmsvg {
5569 - color: var(--primary-700);
4814 + color: var(--primary-hover);
5570 4815 height: 30px;
5571 4816 width: 30px;
5572 4817 font-size: 30px;
5573 4818 padding: 0;
@@ -5579,9 +4824,9 @@
5579 4824 font-size: 30px;
5580 4825 }
5581 4826
5582 4827 .frm_email_settings .widget-title .frm_form_action_icon.frm-inverse {
5583 - background: #fff;
4828 + background: transparent;
5584 4829 padding: 0;
5585 4830 height: 24px;
5586 4831 width: 24px;
5587 4832 }
@@ -5587,17 +4832,18 @@
5587 4832 }
5588 4833
5589 4834 .frm_email_settings .widget-title .frm_form_action_icon.frm-inverse .frmsvg,
5590 4835 .frm_email_settings .widget-title .frm_form_action_icon.frm-inverse i:before {
5591 - color: var(--grey-400);
4836 + color: var(--grey-border);
5592 4837 height: 24px;
5593 4838 width: 24px;
5594 4839 font-size: 24px;
4840 + line-height: 1em;
5595 4841 }
5596 4842
5597 4843 .frm_email_settings .widget-title:hover .frm_form_action_icon.frm-inverse .frmsvg,
5598 4844 .frm_email_settings .widget-title:hover .frm_form_action_icon.frm-inverse i:before {
5599 - color: var(--grey-500);
4845 + color: var(--grey);
5600 4846 }
5601 4847
5602 4848 .frm_email_icons {
5603 4849 padding: 10px 0 5px 6px;
@@ -5608,8 +4854,9 @@
5608 4854 margin-left: 8px;
5609 4855 color: var(--grey);
5610 4856 opacity: 0;
5611 4857 transition: all .2s ease;
4858 + vertical-align: middle;
5612 4859 }
5613 4860
5614 4861 .frm_email_icons a .frmsvg {
5615 4862 color: var(--grey);
@@ -5628,8 +4875,16 @@
5628 4875 .frm_actions_list .frm_inactive_action i {
5629 4876 opacity: .4;
5630 4877 }
5631 4878
4879 +.frm-no-margin {
4880 + margin: 0;
4881 +}
4882 +
4883 +.frm-no-border {
4884 + border: none !important;
4885 +}
4886 +
5632 4887 table td, .form-table tr td {
5633 4888 vertical-align: top;
5634 4889 }
5635 4890
@@ -5656,12 +4911,8 @@
5656 4911 #frm_notification_settings .frm_form_action_settings td p {
5657 4912 padding: 7px 0;
5658 4913 }
5659 4914
5660 -#permissions_settings_settings .frm_grid_container {
5661 - align-items: center;
5662 -}
5663 -
5664 4915 #frm_notification_settings .form-table > tbody > tr > th {
5665 4916 width: 150px;
5666 4917 font-weight: normal;
5667 4918 padding-right: 10px;
@@ -5683,8 +4934,9 @@
5683 4934 #frm_notification_settings .frm_left_label {
5684 4935 /* For add-ons that haven't been updated for 4.0 */
5685 4936 float: none;
5686 4937 width: auto !important;
4938 + line-height: 1;
5687 4939 }
5688 4940
5689 4941 .frm-fields .frm_autoresponder_rows select {
5690 4942 width: auto;
@@ -5697,17 +4949,16 @@
5697 4949 width: 100%;
5698 4950 }
5699 4951
5700 4952 #frm_notification_settings .frm_email_buttons {
5701 - padding: var(--gap-2xs);
4953 + padding: 7px;
5702 4954 background: var(--light-blue);
5703 - color: var(--primary-700);
5704 - border-radius: var(--small-radius);
4955 + color: var(--primary-hover);
4956 + border-radius: 4px;
5705 4957 border-color: var(--blue-border);
5706 - line-height: 1;
4958 + line-height: 1em;
5707 4959 height: auto;
5708 - min-height: 12px;
5709 - font-size: var(--text-xs);
4960 + font-size: 12px;
5710 4961 box-shadow: none;
5711 4962 }
5712 4963
5713 4964 .frm_reply_to_container,
@@ -5712,31 +4963,34 @@
5712 4963
5713 4964 .frm_reply_to_container,
5714 4965 .frm_bcc_cc_container {
5715 4966 float: right;
5716 - margin: -4px 0 0;
4967 + margin: -8px 0 0;
5717 4968 z-index: 1;
5718 4969 position: relative;
5719 4970 }
5720 4971
5721 4972 .frm_email_row .frm_cancel1_icon:before {
4973 + line-height: 1;
5722 4974 vertical-align: bottom;
5723 4975 }
5724 4976
4977 +.frm_action_id {
4978 + padding-top: 10px;
4979 +}
4980 +
5725 4981 .frm_logic_field_opts {
5726 4982 max-width: 35%;
5727 4983 }
5728 4984
5729 4985 .frm-inline-select,
5730 -p.frm-inline-select,
5731 4986 #frm_submit_logic_row,
5732 4987 .frm_logic_rows .frm-collapse-me {
5733 - line-height: var(--h-md) !important;
4988 + line-height: 30px;
5734 4989 }
5735 4990
5736 -.frm_logic_row {
5737 - padding: var(--gap-xs) 0 0;
5738 - align-items: center;
4991 +.frm_logic_row:first-of-type {
4992 + padding-top: 8px;
5739 4993 }
5740 4994
5741 4995 .frm-single-settings .frm_logic_row > select {
5742 4996 max-width: 32.5% !important;
@@ -5773,8 +5027,13 @@
5773 5027 margin-bottom: 0;
5774 5028 padding: 0;
5775 5029 }
5776 5030
5031 +.frm_form_settings input[type="text"] {
5032 + line-height: normal;
5033 + height: auto;
5034 +}
5035 +
5777 5036 #poststuff .widgets-holder-wrap .frm_form_action_settings .widget-inside {
5778 5037 padding-bottom: 0;
5779 5038 }
5780 5039
@@ -5783,9 +5042,9 @@
5783 5042 padding-right: 15px;
5784 5043 }
5785 5044
5786 5045 #form_global_settings h3 {
5787 - font-size: var(--text-sm);
5046 + font-size: 14px;
5788 5047 margin-top: 25px;
5789 5048 }
5790 5049
5791 5050 #form_global_settings .tabs-panel + h3 {
@@ -5800,9 +5059,9 @@
5800 5059 border-top: 1px solid #eee;
5801 5060 border-bottom: none;
5802 5061 margin: 15px -15px 0;
5803 5062 padding: 8px 15px;
5804 - font-size: var(--text-sm);
5063 + font-size: 14px;
5805 5064 }
5806 5065
5807 5066 #poststuff .frm_form_settings h3.frm_first_h3,
5808 5067 #poststuff h3.frm_first_h3 {
@@ -5813,8 +5072,20 @@
5813 5072 h3.frm_add_logic_link {
5814 5073 margin-bottom: 0 !important;
5815 5074 }
5816 5075
5076 +a.frm_add_logic_link {
5077 + display: block;
5078 + text-align: center;
5079 + margin: 10px auto;
5080 + padding: 10px;
5081 + width: 80%;
5082 + max-width: 290px;
5083 + font-size: 19px;
5084 + border: 1px solid var(--primary-color);
5085 + border-radius: var(--border-radius);
5086 +}
5087 +
5817 5088 a.frm_add_logic_link.frm_hidden {
5818 5089 display: none;
5819 5090 }
5820 5091
@@ -5834,9 +5105,9 @@
5834 5105 bottom: 0;
5835 5106 }
5836 5107
5837 5108 .frm_right_addon input {
5838 - padding-right: var(--gap-lg);
5109 + padding-right: 30px;
5839 5110 }
5840 5111
5841 5112 .frm_icon_font {
5842 5113 color: #A0A0A0;
@@ -5842,12 +5113,8 @@
5842 5113 color: #A0A0A0;
5843 5114 color: var(--grey);
5844 5115 }
5845 5116
5846 -.frm-fields label .frm_icon_font {
5847 - font-size: inherit;
5848 -}
5849 -
5850 5117 .misc-pub-revisions.frm_icon_font,
5851 5118 .misc-pub-revisions.frm_icon_font:hover {
5852 5119 color: inherit;
5853 5120 }
@@ -5915,58 +5182,28 @@
5915 5182 .frm_inactive_icon.frm_action_icon.frm_error_icon:before {
5916 5183 content: '\e606';
5917 5184 }
5918 5185
5919 -.frm-field-action-icons {
5920 - text-align: right;
5921 - position: absolute;
5922 - top: 2px;
5923 - right: 2px;
5924 - max-width: 100%;
5925 -}
5926 -
5927 -.frm-field-action-icons .frm-field-id {
5928 - display: inline-block;
5929 - overflow: hidden;
5930 - text-overflow: ellipsis;
5931 - white-space: nowrap;
5932 - width: 80px;
5933 - max-width: calc( 100% - 50px );
5934 - position: relative;
5935 - top: 2px;
5936 -}
5937 -
5938 -.frm-field-action-icons > a {
5939 - font-size: var(--text-md);
5186 +.frm-field-action-icons a {
5187 + margin-left: 15px;
5188 + float: right;
5189 + font-size: 16px;
5940 5190 width: 17px;
5941 5191 }
5942 5192
5943 -.frm-field-action-icons a:hover {
5944 - text-decoration: none;
5945 -}
5946 -
5947 -.frm-field-action-icons .dropdown {
5948 - display: inline-block;
5949 -}
5950 -
5951 -.frm-field-action-icons > a .frmsvg {
5952 - color: var(--grey-500) !important;
5193 +.frm-field-action-icons a .frmsvg {
5194 + color: var(--primary-hover) !important;
5953 5195 font-size: 17px;
5954 5196 width: 17px;
5955 5197 height: 17px;
5956 5198 }
5957 5199
5958 -.frm-field-action-icons > a .frmsvg,
5959 -.frm-field-action-icons > div > a .frmsvg {
5960 - vertical-align: baseline;
5961 -}
5962 -
5963 5200 .edit_field_type_end_divider .frm-field-action-icons {
5964 5201 display: none !important;
5965 5202 }
5966 5203
5967 5204 .frm-move {
5968 - cursor: grab;
5205 + cursor: move;
5969 5206 }
5970 5207
5971 5208 span.howto {
5972 5209 display: inline;
@@ -6012,15 +5249,11 @@
6012 5249 margin-bottom: 10px;
6013 5250 }
6014 5251
6015 5252 .frm_no_entries_form .frm_no_entries_text {
6016 - line-height: var(--leading);
5253 + line-height: 200%;
6017 5254 }
6018 5255
6019 -#form_entries_page #the-list .no-items {
6020 - height: 240px; /* Equals to the max height of search dropdown */
6021 -}
6022 -
6023 5256 /* Reports Page */
6024 5257 #form_reports_page img.frm_no_reports {
6025 5258 max-width: 100%;
6026 5259 }
@@ -6043,10 +5276,9 @@
6043 5276 }
6044 5277
6045 5278 .frm_wrap .google-visualization-table-tr-head,
6046 5279 .frm_wrap .google-visualization-table-tr-head th {
6047 - white-space: pre-wrap;
6048 - font-size: var(--text-md);
5280 + font-size: 16px;
6049 5281 font-weight: 400 !important;
6050 5282 text-align: left;
6051 5283 }
6052 5284
@@ -6062,8 +5294,12 @@
6062 5294 width: 20%;
6063 5295 min-width: 175px;
6064 5296 }
6065 5297
5298 +#form_reports_page h2 {
5299 + margin-top: 2em !important;
5300 +}
5301 +
6066 5302 /* Views Page */
6067 5303 #form_views_page img.frm_no_views {
6068 5304 max-width: 100%;
6069 5305 }
@@ -6173,11 +5409,10 @@
6173 5409 }
6174 5410
6175 5411 #frm-show-fields {
6176 5412 min-height: 350px;
6177 - padding: 0 0 35px;
5413 + padding: 10px 0 35px;
6178 5414 margin: 0;
6179 - position: relative;
6180 5415 }
6181 5416
6182 5417 .frm-has-fields #frm-show-fields {
6183 5418 min-height: 50px;
@@ -6182,55 +5417,8 @@
6182 5417 .frm-has-fields #frm-show-fields {
6183 5418 min-height: 50px;
6184 5419 }
6185 5420
6186 -#frm_builder_page #frm_field_group_controls {
6187 - position: absolute;
6188 - padding: 5px;
6189 - border-radius: 4px 4px 0 0;
6190 - text-align: right;
6191 - box-sizing: border-box;
6192 - right: 0;
6193 - top: -28px;
6194 - height: 28px;
6195 - z-index: 3; /* section dividers use z-index: 2; position above that to avoid it taking over hover control. */
6196 -}
6197 -
6198 -.frm-field-group-hover-target,
6199 -.frm-has-open-field-group-popup,
6200 -#frm_builder_page #frm_field_group_controls,
6201 -.frm-selected-field-group {
6202 - background: rgba(65, 153, 253, 0.04);
6203 -}
6204 -
6205 -.frm-selected-field-group {
6206 - position: relative;
6207 -}
6208 -
6209 -#frm_builder_page #frm_field_group_controls > span:first-child {
6210 - margin-right: 5px;
6211 -}
6212 -
6213 -#frm_builder_page #frm_field_group_controls svg {
6214 - pointer-events: none;
6215 -}
6216 -
6217 -#frm_field_group_controls {
6218 - visibility: hidden;
6219 -}
6220 -
6221 -.frm-field-group-hover-target #frm_field_group_controls {
6222 - visibility: visible;
6223 -}
6224 -
6225 -#frm_field_group_controls .dropdown-item a span {
6226 - color: var(--grey-700);
6227 -}
6228 -
6229 -#frm_field_group_controls .dropdown-item a:hover {
6230 - text-decoration: none;
6231 -}
6232 -
6233 5421 .frm_sorting .no_repeat_section li.ui-state-default.edit_field_type_end_divider {
6234 5422 display: none !important;
6235 5423 }
6236 5424
@@ -6237,14 +5425,15 @@
6237 5425 .frm-right-panel .ui-state-default,
6238 5426 #postbox-container-1 .ui-state-default,
6239 5427 .frm_sorting > li.ui-state-default,
6240 5428 .frm_sorting .no_repeat_section li.ui-state-default.edit_field_type_end_divider:hover {
6241 - border: 1px solid transparent;
5429 + border: 2px solid transparent;
5430 + border-radius: 4px;
6242 5431 font-weight: normal !important;
6243 5432 background-color: transparent;
6244 5433 background-image: none;
6245 5434 padding: 5px;
6246 - margin: 0;
5435 + margin: 10px 0;
6247 5436 box-shadow: none;
6248 5437 display: block;
6249 5438 text-align: inherit !important;
6250 5439 overflow: visible;
@@ -6263,8 +5452,12 @@
6263 5452 .divider_drop .howto .frm_icon_font {
6264 5453 font-style: normal;
6265 5454 }
6266 5455
5456 +.repeat_section .start_divider li:only-child {
5457 + margin-top: 50px;
5458 +}
5459 +
6267 5460 .show_repeat_sec {
6268 5461 display: none;
6269 5462 }
6270 5463
@@ -6340,16 +5533,15 @@
6340 5533 }
6341 5534
6342 5535 .frm-page-collapsed .frm_clone_icon,
6343 5536 .frm-page-collapsed .frm_delete_field,
6344 -.frm-page-collapsed .frm_clone_field,
6345 -.frm-section-collapsed .frm_clone_icon {
5537 +.frm-section-collapsed .frm_clone_icon,
5538 +.frm-section-collapsed .frm_delete_field {
6346 5539 opacity: .5;
6347 5540 cursor: not-allowed;
6348 5541 }
6349 5542
6350 -/* Hide the Duplicate summary option because we are missing the logic that also adds a new page */
6351 -.edit_field_type_summary .frm_more_options_li:nth-child(2) {
5543 +.edit_field_type_summary .frm_clone_field {
6352 5544 display: none !important;
6353 5545 }
6354 5546
6355 5547 .frm_no_section_fields:not(.frm_block) + ul.start_divider {
@@ -6381,9 +5573,9 @@
6381 5573 content: '';
6382 5574 display: block;
6383 5575 padding: 2px 0;
6384 5576 line-height: 1px;
6385 - border-top: 2px solid var(--grey-300);
5577 + border-top: 2px solid var(--grey-border);
6386 5578 top: -2px;
6387 5579 position: absolute;
6388 5580 width: 100%;
6389 5581 transition: .5s border-color ease-in-out;
@@ -6395,9 +5587,8 @@
6395 5587 }
6396 5588
6397 5589 .frm-section-collapsed .divider_section_only:hover:after,
6398 5590 li.selected.frm-section-collapsed .divider_section_only:before,
6399 -li.selected.frm-section-collapsed .divider_section_only:after,
6400 5591 .divider_section_only:hover:before,
6401 5592 li.selected .divider_section_only:before {
6402 5593 border-color: transparent;
6403 5594 }
@@ -6405,10 +5596,10 @@
6405 5596 .frm_sorting li.ui-state-default.edit_field_type_divider {
6406 5597 overflow: visible;
6407 5598 position: relative;
6408 5599 padding: 0 0 0 20px;
6409 - margin: 25px 0 0 -5px;
6410 - border-left: 1px solid var(--primary-700);
5600 + margin: 25px 0 0 -20px;
5601 + border-left: 1px solid var(--primary-hover);
6411 5602 transition: border 0.7s ease-out;
6412 5603 }
6413 5604
6414 5605 .frm-section-collapsed {
@@ -6416,9 +5607,9 @@
6416 5607 }
6417 5608
6418 5609 .frm_sorting li.edit_field_type_end_divider,
6419 5610 .frm_sorting .no_repeat_section li.ui-state-default.edit_field_type_end_divider:hover {
6420 - margin: 0 0 var(--gap-sm);
5611 + margin: 0 0 15px;
6421 5612 }
6422 5613
6423 5614 .frm-first-page .frm_prev_page {
6424 5615 display: none;
@@ -6423,19 +5614,22 @@
6423 5614 .frm-first-page .frm_prev_page {
6424 5615 display: none;
6425 5616 }
6426 5617
6427 -#frm_builder_page .frm_remove_form_row.frm_button,
6428 -#frm_builder_page .frm_add_form_row.frm_button {
5618 +#frm-form-button button,
5619 +.frm_remove_form_row.frm_button,
5620 +.frm_add_form_row.frm_button,
5621 +.frm-white-body .frm-preview-buttons button {
6429 5622 border-radius: var(--small-radius);
6430 5623 border: 1px solid var(--blue-border);
5624 + color: var(--primary-color);
6431 5625 }
6432 5626
6433 -#frm_builder_page .frm_remove_form_row .frmsvg,
6434 -#frm_builder_page .frm_remove_form_row i:before,
6435 -#frm_builder_page .frm_add_form_row .frmsvg,
6436 -#frm_builder_page .frm_add_form_row i:before {
6437 - color: var(--primary-700);
5627 +.frm_wrap .frm_remove_form_row .frmsvg,
5628 +.frm_remove_form_row i:before,
5629 +.frm_wrap .frm_add_form_row .frmsvg,
5630 +.frm_add_form_row i:before {
5631 + color: var(--primary-hover);
6438 5632 }
6439 5633
6440 5634 .frm-preview-buttons .frm_button_submit {
6441 5635 margin: 0 5px;
@@ -6441,10 +5635,10 @@
6441 5635 margin: 0 5px;
6442 5636 }
6443 5637
6444 5638 .frm-page-break {
6445 - border-top: 1px dashed var(--primary-700);
6446 - margin-top: var(--gap-lg);
5639 + border-top: 1px dashed var(--primary-hover);
5640 + margin-top: 30px;
6447 5641 position: relative;
6448 5642 }
6449 5643
6450 5644 .edit_field_type_divider:before,
@@ -6457,9 +5651,9 @@
6457 5651 width: 4px;
6458 5652 height: 4px;
6459 5653 background-color: #fff;
6460 5654 border-radius: 50%;
6461 - border: 1px solid var(--primary-700);
5655 + border: 1px solid var(--primary-hover);
6462 5656 text-rendering: auto;
6463 5657 -webkit-font-smoothing: antialiased;
6464 5658 }
6465 5659
@@ -6481,12 +5675,13 @@
6481 5675 width: 20px;
6482 5676 height: 20px;
6483 5677 left: -11px;
6484 5678 top: 0;
6485 - background: var(--primary-700);
5679 + background: var(--primary-hover);
6486 5680 text-align: center;
6487 5681 color: #fff;
6488 5682 font-size: 13px;
5683 + line-height: 22px;
6489 5684 }
6490 5685
6491 5686 .edit_field_type_divider:before{
6492 5687 font-family: 's11-fp';
@@ -6507,20 +5702,20 @@
6507 5702
6508 5703
6509 5704 .frm_sorting li.edit_field_type_divider:hover,
6510 5705 .frm_sorting li.edit_field_type_divider.selected {
6511 - border-left-color: var(--primary-500);
5706 + border-left-color: var(--primary-color);
6512 5707 }
6513 5708
6514 5709 .edit_field_type_divider.selected:before,
6515 5710 .edit_field_type_divider:hover:before {
6516 - border-color: var(--primary-500);
6517 - background: var(--primary-500);
5711 + border-color: var(--primary-color);
5712 + background: var(--primary-color);
6518 5713 }
6519 5714
6520 5715 .edit_field_type_divider.selected:after,
6521 5716 .edit_field_type_divider:hover:after {
6522 - border-color: var(--primary-500);
5717 + border-color: var(--primary-color);
6523 5718 }
6524 5719
6525 5720 .frm-section-collapsed:after {
6526 5721 border-color: transparent !important;
@@ -6528,11 +5723,19 @@
6528 5723 }
6529 5724
6530 5725 .frm-page-break .frm-collapse-page.button {
6531 5726 margin-left: 46%;
6532 - margin-top: calc( -28px / 2 );
5727 + margin-top: -15px;
5728 + background-color: #fff;
5729 + border-color: var(--primary-hover) !important;
5730 + color: var(--primary-hover);
6533 5731 }
6534 5732
5733 +#frm-fake-page .frm-collapse-page.button {
5734 + border-color: var(--grey) !important;
5735 + color: var(--grey);
5736 +}
5737 +
6535 5738 #frm-fake-page.frm-page-collapsed {
6536 5739 margin-bottom: 0;
6537 5740 }
6538 5741
@@ -6538,15 +5741,15 @@
6538 5741
6539 5742 .frm-page-collapsed {
6540 5743 position: relative;
6541 5744 overflow: visible !important;
6542 - margin-bottom: var(--gap-lg);
5745 + margin-bottom: 30px;
6543 5746 }
6544 5747
6545 5748 .frm-page-collapsed:after {
6546 5749 content: '';
6547 5750 display: block;
6548 - border: 1px dashed var(--grey-300);
5751 + border: 1px dashed var(--grey-border);
6549 5752 border-left: none;
6550 5753 border-right: none;
6551 5754 height: 6px;
6552 5755 position: absolute;
@@ -6553,40 +5756,31 @@
6553 5756 width: calc( 100% - 10px );
6554 5757 bottom: -15px;
6555 5758 }
6556 5759
6557 -.frm-collapse-page .frmsvg,
6558 5760 .frm-collapse-page .frm_arrowdown6_icon {
6559 - width: var(--text-sm);
6560 - height: var(--text-sm);
6561 - font-size: var(--text-sm);
5761 + width: 16px;
6562 5762 text-align: center;
6563 5763 margin-left: 2px;
6564 - color: currentColor;
5764 + color: var(--primary-hover);
6565 5765 }
6566 5766
6567 5767 #frm-fake-page .frm_arrowdown6_icon {
6568 - color: currentColor;
5768 + color: var(--grey);
6569 5769 }
6570 5770
5771 +#frm-fake-page .frm-collapse-page:hover,
5772 +#frm-fake-page .frm-collapse-page:hover .frm_arrowdown6_icon,
5773 +.frm-collapse-page:hover .frm_arrowdown6_icon {
5774 + color: #fff;
5775 +}
5776 +
6571 5777 .frm-collapsed i:before,
5778 +.frm-section-collapsed .frm_arrowdown6_icon:before,
6572 5779 .frm-page-collapsed .frm_arrowdown6_icon:before {
6573 5780 content: '\e913';
6574 5781 }
6575 5782
6576 -.frm-collapse-section svg {
6577 - fill: var(--primary-color);
6578 - transition: transform 0.2s ease-out, fill 0.2s ease-out;
6579 -}
6580 -
6581 -.frm-collapse-section:hover svg {
6582 - fill: var(--primary-700);
6583 -}
6584 -
6585 -.frm-section-collapsed .frm-collapse-section svg {
6586 - transform: rotate(-90deg);
6587 -}
6588 -
6589 5783 .open .widget-top .frm_arrow_right_icon:before {
6590 5784 content: '\e62a';
6591 5785 }
6592 5786
@@ -6628,14 +5822,14 @@
6628 5822 .frm_no_section_fields {
6629 5823 text-align: center;
6630 5824 position: absolute;
6631 5825 color: var(--medium-grey);
6632 - font-size: var(--text-md);
5826 + font-size: 16px;
6633 5827 box-sizing: border-box;
6634 - border: 1px dashed var(--grey-300);
5828 + border: 2px dashed var(--primary-color);
6635 5829 }
6636 5830
6637 -.ui-droppable-active ~ .frm_no_fields {
5831 +.drop-me + .frm_no_fields {
6638 5832 border-style: solid;
6639 5833 }
6640 5834
6641 5835 .frm_no_section_fields {
@@ -6643,8 +5837,9 @@
6643 5837 margin: 0;
6644 5838 padding: 20px 0 0;
6645 5839 width: calc( 100% - 20px );
6646 5840 height: 121px;
5841 + border-color: var(--grey-border);
6647 5842 transition: all 0.4s linear;
6648 5843 }
6649 5844
6650 5845 .frm_no_fields {
@@ -6667,9 +5862,9 @@
6667 5862 display: block;
6668 5863 }
6669 5864
6670 5865 .frm-large-plus.frmsvg {
6671 - color: var(--primary-700);
5866 + color: var(--primary-hover);
6672 5867 height: 45px;
6673 5868 width: 45px;
6674 5869 }
6675 5870
@@ -6789,12 +5984,10 @@
6789 5984
6790 5985 .frm-category-tabs > li a,
6791 5986 .frm-category-tabs > li a:active {
6792 5987 outline: none;
5988 + -webkit-box-shadow: none;
6793 5989 box-shadow: none;
6794 - display: flex;
6795 - gap: var(--gap-xs);
6796 - align-items: center;
6797 5990 }
6798 5991
6799 5992 .frm-category-tabs > li.active .frmsvg,
6800 5993 .frm-category-tabs > li.active i,
@@ -6799,15 +5992,15 @@
6799 5992 .frm-category-tabs > li.active .frmsvg,
6800 5993 .frm-category-tabs > li.active i,
6801 5994 .frm-category-tabs > li.active span,
6802 5995 .frm-category-tabs > li.active a {
6803 - color: var(--primary-500);
5996 + color: var(--primary-color);
6804 5997 }
6805 5998
6806 5999 .frm_wrap .manage-menus {
6807 6000 margin-top: 0;
6808 6001 border: none;
6809 - border-bottom: 1px solid var(--grey-300);
6002 + border-bottom: 1px solid var(--grey-border);
6810 6003 background: var(--lightest-grey);
6811 6004 }
6812 6005
6813 6006 .general_settings .postbox .manage-menus {
@@ -6843,9 +6036,9 @@
6843 6036 padding-top: 10px;
6844 6037 }
6845 6038
6846 6039 .frm-right-panel .ui-state-default, #postbox-container-1 .ui-state-default {
6847 - color: var(--grey-900);
6040 + color: var(--darkest-grey);
6848 6041 }
6849 6042
6850 6043 .no_repeat_section .frm_sorting > li.ui-state-default.edit_field_type_end_divider:hover {
6851 6044 box-shadow: none;
@@ -6850,9 +6043,8 @@
6850 6043 .no_repeat_section .frm_sorting > li.ui-state-default.edit_field_type_end_divider:hover {
6851 6044 box-shadow: none;
6852 6045 }
6853 6046
6854 -.frm-selected-field-group li.ui-state-default,
6855 6047 .start_divider.frm_sorting li.ui-state-default.frm_not_divider.selected,
6856 6048 .start_divider.frm_sorting li.ui-state-default.frm_not_divider:hover,
6857 6049 .frm_sorting li.ui-state-default.frm_not_divider:hover,
6858 6050 .frm_sorting li.ui-state-default.ui-sortable-helper,
@@ -6861,14 +6053,14 @@
6861 6053 .frm_sorting li.ui-state-default.selected.edit_field_type_divider .divider_section_only,
6862 6054 .frm_update_msg,
6863 6055 .frm_sorting li.ui-state-default.frm_not_divider.selected,
6864 6056 .frm_sorting li.ui-state-default.selected.edit_field_type_divider .divider_section_only {
6865 - border-color: var(--primary-500);
6057 + border-color: var(--primary-color);
6866 6058 transition: .5s border-color ease-in-out;
6867 6059 }
6868 6060
6869 6061 .frm_sorting li.ui-state-default.frm_not_divider.selected {
6870 - box-shadow: 0 0 1px 0 var(--primary-500);
6062 + box-shadow: 0 0 1px 0 var(--primary-color);
6871 6063 }
6872 6064
6873 6065 .frm_sorting li.ui-state-default {
6874 6066 transition: .7s box-shadow ease-in-out, .7s height linear;
@@ -6891,9 +6083,9 @@
6891 6083 font-weight: bold;
6892 6084 border: 1px solid #DFDFDF;
6893 6085 background-color: #EEEEEE;
6894 6086 padding: 3px 5px 2px;
6895 - font-size: var(--text-md);
6087 + font-size: 16px;
6896 6088 line-height: 20px;
6897 6089 }
6898 6090
6899 6091 .frm_update_msg {
@@ -6931,13 +6123,8 @@
6931 6123 .widefat .column-shortcode {
6932 6124 width: 9em;
6933 6125 }
6934 6126
6935 -.toplevel_page_formidable .column-shortcode div {
6936 - display: flex;
6937 - gap: var(--gap-xs);
6938 -}
6939 -
6940 6127 .widefat .column-entries, .widefat .column-link {
6941 6128 width: 10%;
6942 6129 text-align: center;
6943 6130 }
@@ -6945,22 +6132,23 @@
6945 6132 .widefat .column-form_key, .widefat .column-created_at {
6946 6133 width: 10%;
6947 6134 }
6948 6135
6949 -.frm-white-body .search-box,
6136 +.post-type-frm_display .search-box,
6950 6137 .frm_wrap .frm-search {
6951 6138 float: right;
6952 - margin: 0;
6139 + margin-bottom: 15px;
6953 6140 clear: right;
6954 6141 }
6955 6142
6956 -.frm-white-body .search-box,
6143 +#form_entries_page form .frm-search {
6144 + margin-top: 15px;
6145 +}
6146 +
6957 6147 .frm-search {
6958 - min-width: 32%;
6148 + width: 32%;
6149 + float: right;
6959 6150 position: relative;
6960 - display: flex;
6961 - gap: var(--gap-sm);
6962 - align-items: center;
6963 6151 }
6964 6152
6965 6153 .frm-inline-modal .frm-search,
6966 6154 #frm_adv_info .frm-search {
@@ -6966,9 +6154,9 @@
6966 6154 #frm_adv_info .frm-search {
6967 6155 float: none;
6968 6156 width: 100%;
6969 6157 clear: both;
6970 - margin: var(--gap-xs) 0;
6158 + margin: 5px 0 10px;
6971 6159 }
6972 6160
6973 6161 .frm-button-group a {
6974 6162 margin: 0 7px !important;
@@ -6985,9 +6173,9 @@
6985 6173
6986 6174 i.frm-show-box,
6987 6175 i.frm-show-inline-modal,
6988 6176 .frm-with-left-icon i,
6989 -.frm-with-right-icon i:not([class*=mce-]),
6177 +.frm-with-right-icon i,
6990 6178 .frmsvg.frm-show-box,
6991 6179 .frmsvg.frm-show-inline-modal,
6992 6180 .frm-with-left-icon .frmsvg,
6993 6181 .frm-with-right-icon .frmsvg,
@@ -6993,17 +6181,18 @@
6993 6181 .frm-with-right-icon .frmsvg,
6994 6182 .frm-search > .frmsvg,
6995 6183 .frm-search span:not(.multiselect-selected-text):not(.multiselect-native-select) {
6996 6184 position: absolute;
6997 - padding: 0 14px;
6185 + padding: 7px 10px;
6998 6186 pointer-events: none;
6999 6187 left: 0;
7000 - color: var(--grey-400);
7001 - font-size: var(--text-xs);
6188 + color: var(--grey);
6189 + opacity: .5;
6190 + font-size: 18px;
7002 6191 }
7003 6192
7004 6193 .frm-with-right-icon .frmsvg,
7005 -.frm-with-right-icon i:not([class*=mce-]) {
6194 +.frm-with-right-icon i {
7006 6195 right: 0;
7007 6196 top: -3px;
7008 6197 left: auto;
7009 6198 padding: 0 10px 0 5px;
@@ -7008,35 +6197,20 @@
7008 6197 left: auto;
7009 6198 padding: 0 10px 0 5px;
7010 6199 }
7011 6200
7012 -.frm_form_settings .frm-with-right-icon .frmsvg {
7013 - top: 0;
7014 -}
7015 -
7016 -.frm_form_settings .wp-editor-container .frm-with-right-icon .frmsvg {
7017 - top: auto;
7018 - bottom: 0;
7019 -}
7020 -
7021 -.frm_form_settings .frm_has_textarea .frm-with-right-icon .frmsvg {
7022 - top: auto;
7023 - bottom: 6px;
7024 -}
7025 -
7026 6201 .frmsvg.frm-show-box,
7027 6202 .frmsvg.frm-show-inline-modal,
7028 6203 i.frm-show-box,
7029 6204 i.frm-show-inline-modal {
7030 - color: var(--primary-500);
6205 + color: var(--primary-color);
7031 6206 pointer-events: initial;
7032 6207 cursor: pointer;
7033 6208 z-index: 1;
7034 6209 opacity: 1;
6210 + right: 2px;
7035 6211 top: auto;
7036 - margin: calc( ( 36px - 18px ) / 2 ); /* input height - svg / 2 */
7037 - margin-bottom: 0;
7038 - padding: 0;
6212 + padding: 7px 10px;
7039 6213 }
7040 6214
7041 6215 .frm-open .frmsvg.frm-show-inline-modal,
7042 6216 .frm-open i.frm-show-inline-modal {
@@ -7059,9 +6233,9 @@
7059 6233
7060 6234 .frm_wrap .frm-with-right-icon textarea,
7061 6235 .frm_wrap .frm-with-right-icon input,
7062 6236 .frm_wrap .frm-with-right-icon input[type=text] {
7063 - padding-right: var(--gap-md);
6237 + padding-right: 35px;
7064 6238 }
7065 6239
7066 6240 #frm-show-fields .frm-with-left-icon .frmsvg,
7067 6241 #frm-show-fields .frm-with-left-icon i {
@@ -7067,29 +6241,43 @@
7067 6241 #frm-show-fields .frm-with-left-icon i {
7068 6242 padding-top: 10px;
7069 6243 }
7070 6244
6245 +.frm-search input.frm-search-input,
7071 6246 .frm-search input[name="s"],
6247 +.frm-search #search-submit {
6248 + border-color: var(--grey-border);
6249 + box-shadow: none;
6250 + margin: 0;
6251 + padding: 7px;
6252 + height: auto;
6253 + font-size: 13px;
6254 + line-height: normal;
6255 +}
6256 +
7072 6257 .frm-search .dropdown-toggle,
7073 6258 .frm-search input.frm-search-input {
7074 - border-radius: var(--small-radius);
6259 + border-radius: var(--border-radius);
7075 6260 padding-left: 33px !important;
7076 - border-color: var(--grey-300);
7077 6261 }
7078 6262
7079 -.frm_wrap .frm-search .frm-search-input,
7080 -.frm-modal .frm-search .frm-search-input,
7081 -.frm-white-body .search-box input[name="s"], /* Views search */
7082 -.frm_wrap .frm-search input[name="s"] {
7083 - padding-top: 3px;
7084 - padding-bottom: 3px;
7085 - flex: 1;
7086 - font-size: var(--text-sm);
6263 +.frm-search input[name="s"] {
6264 + width: 70%;
6265 + float: left;
6266 + border-radius: var(--border-radius) 0 0 var(--border-radius) !important;
6267 + border-right-width: 0;
6268 + padding-left: 33px;
7087 6269 }
7088 6270
7089 -.frm-search .dropdown-toggle {
6271 +.frm-search .dropdown-toggle,
6272 +.frm-search input.frm-auto-search {
7090 6273 width: 100%;
6274 + border-right-width: 1px;
6275 + border-radius: var(--border-radius) !important;
7091 6276 float: none;
6277 +}
6278 +
6279 +.frm-search .dropdown-toggle {
7092 6280 max-width: 200px;
7093 6281 background: transparent;
7094 6282 padding: 7px;
7095 6283 min-height: 32px;
@@ -7097,18 +6285,22 @@
7097 6285 overflow: hidden;
7098 6286 text-overflow: ellipsis;
7099 6287 }
7100 6288
7101 -span.multiselect-selected-text {
6289 +.frm-search span.multiselect-selected-text {
7102 6290 white-space: nowrap;
7103 - display: inline-block;
7104 - max-width: 90%;
7105 - text-overflow: ellipsis;
7106 - overflow: hidden;
6291 + display: inline-block;
7107 6292 }
7108 6293
6294 +.frm-search #search-submit {
6295 + width: 30%;
6296 + border-radius: 0 var(--border-radius) var(--border-radius) 0;
6297 + text-align: center;
6298 + background-color: var(--lightest-grey);
6299 +}
6300 +
7109 6301 .frm-search #search-submit a {
7110 - color: var(--grey-800);
6302 + color: var(--primary-color);
7111 6303 }
7112 6304
7113 6305 .frm-search #search-submit .caret {
7114 6306 opacity:.7;
@@ -7114,15 +6306,15 @@
7114 6306 opacity:.7;
7115 6307 }
7116 6308
7117 6309 .frm-not-set input {
7118 - color: var(--primary-500) !important;
6310 + color: var(--primary-color) !important;
7119 6311 font-size: 13px;
7120 6312 }
7121 6313
7122 6314 .frm-not-set .frmsvg,
7123 6315 .frm-not-set i {
7124 - color: var(--primary-700);
6316 + color: var(--primary-hover);
7125 6317 opacity: 1;
7126 6318 }
7127 6319
7128 6320 .post-type-frm_display select[name="m"] + #post-query-submit,
@@ -7148,9 +6340,9 @@
7148 6340 }
7149 6341
7150 6342 .frm-grid {
7151 6343 border-collapse: collapse;
7152 - border: none;
6344 + border: 1px solid black;
7153 6345 margin-right: 10px;
7154 6346 }
7155 6347
7156 6348 .frm-grid td, .frm-grid th {
@@ -7190,9 +6382,9 @@
7190 6382
7191 6383 .post-type-frm_display #advanced-sortables h2.hndle,
7192 6384 .post-type-frm_display #side-sortables h2.hndle,
7193 6385 .post-type-frm_display #normal-sortables h2.hndle {
7194 - border-bottom: 1px solid var(--grey-300);
6386 + border-bottom: 1px solid var(--grey-border);
7195 6387 margin: 10px 0 0 !important;
7196 6388 padding: 0 25px 8px;
7197 6389 }
7198 6390
@@ -7201,9 +6393,9 @@
7201 6393 padding-top: 10px;
7202 6394 }
7203 6395
7204 6396 .post-type-frm_display #post-body-content {
7205 - margin-top: var(--gap-lg);
6397 + margin-top: 30px;
7206 6398 }
7207 6399
7208 6400 .post-type-frm_display.edit-php #wpbody-content > .wrap {
7209 6401 margin: 0;
@@ -7210,15 +6402,15 @@
7210 6402 }
7211 6403
7212 6404 .post-type-frm_display .postbox .hndle,
7213 6405 .post-type-frm_display .postbox {
7214 - border-color: var(--grey-300);
6406 + border-color: var(--grey-border);
7215 6407 }
7216 6408
7217 6409 .post-type-frm_display #postbox-container-1 .postbox,
7218 6410 .post-type-frm_display #postbox-container-2 .postbox {
7219 6411 border-radius: var(--small-radius);
7220 - border-color: var(--grey-300);
6412 + border-color: var(--grey-border);
7221 6413 box-shadow: none;
7222 6414 }
7223 6415
7224 6416 .post-type-frm_display #side-sortables .postbox {
@@ -7297,9 +6489,9 @@
7297 6489 background-color: transparent;
7298 6490 }
7299 6491
7300 6492 .post-type-frm_display #major-publishing-actions {
7301 - border-color: var(--grey-300);
6493 + border-color: var(--grey-border);
7302 6494 background: var(--sidebar-color);
7303 6495 }
7304 6496
7305 6497 .post-type-frm_display #frm_adv_info {
@@ -7353,9 +6545,9 @@
7353 6545 .settings-lite-cta ul,
7354 6546 .settings-lite-cta p,
7355 6547 .settings-lite-cta {
7356 6548 color: #666;
7357 - font-size: var(--text-md);
6549 + font-size: 16px;
7358 6550 box-shadow: none !important;
7359 6551 }
7360 6552
7361 6553 .frm-info-modal h3,
@@ -7369,9 +6561,8 @@
7369 6561
7370 6562 .frm-info-modal .postbox .inside,
7371 6563 .settings-lite-cta .postbox .inside {
7372 6564 padding: 20px 40px;
7373 - margin: 0;
7374 6565 }
7375 6566
7376 6567 .cta-inside a {
7377 6568 color: var(--orange)
@@ -7377,15 +6568,25 @@
7377 6568 color: var(--orange)
7378 6569 }
7379 6570
7380 6571 .info-modal-inside a.frm-standard-link {
7381 - color: var(--primary-500);
6572 + color: var(--primary-color);
7382 6573 }
7383 6574
7384 6575 .info-modal-inside a.frm-standard-link:hover {
7385 - color: var(--primary-700);
6576 + color: var(--primary-hover);
7386 6577 }
7387 6578
6579 +.frm-caution {
6580 + text-transform: uppercase;
6581 + font-weight: bold;
6582 + color: var(--dark-grey);
6583 +}
6584 +
6585 +.field_type_list > li {
6586 + width: 50%;
6587 +}
6588 +
7388 6589 .frm_no_p_margin > p {
7389 6590 margin: 0;
7390 6591 }
7391 6592
@@ -7395,12 +6596,14 @@
7395 6596 font-size: 11px;
7396 6597 overflow: hidden;
7397 6598 }
7398 6599
6600 +.frm_code_list.frm-full-hover {
6601 + margin: 0 -20px;
6602 +}
6603 +
7399 6604 #frm-navbarDrop + .frm_code_list.frm-full-hover {
7400 - margin: var(--gap-xs) 0 0;
7401 - min-width: 300px;
7402 - max-height: calc( ( 40px * 5 ) + 56px );
6605 + margin: 4px 0 0;
7403 6606 }
7404 6607
7405 6608 .frm_code_list.frm-full-hover li {
7406 6609 margin: 0;
@@ -7405,28 +6608,23 @@
7405 6608 .frm_code_list.frm-full-hover li {
7406 6609 margin: 0;
7407 6610 }
7408 6611
7409 -.frm-select-list-item,
7410 -.frm_wrap .ui-autocomplete li > div,
7411 -.multiselect-container button.multiselect-option,
7412 -.frm-dropdown-menu > .dropdown-item > a,
7413 -.frm-dropdown-menu > .dropdown-item > a:visited,
7414 -.frm-dropdown-menu > .dropdown-item > a:link, /* Override jQuery UI */
6612 +.frm-dropdown-menu > li > a,
7415 6613 .frm-dropdown-menu .frm_dropdown_li,
7416 6614 .frm_code_list.frm-full-hover a {
7417 - display: flex;
7418 - color: var(--grey-700);
7419 - padding: 5px 10px;
7420 - font-size: var(--text-md);
7421 - gap: var(--gap-xs);
7422 - align-items: center;
6615 + display: block;
6616 + color: var(--dark-grey);
6617 + padding: 3px 25px;
6618 + font-size: 15px;
7423 6619 }
7424 6620
7425 6621 .frm_code_list.frm-full-hover a span {
6622 + color: var(--grey);
6623 + float: right;
6624 + font-size: 14px;
7426 6625 max-width: 83px;
7427 6626 text-align: right;
7428 - margin-left: auto;
7429 6627 }
7430 6628
7431 6629 .frm_code_list.frm-full-hover a,
7432 6630 .frm_code_list.frm-full-hover a span {
@@ -7434,54 +6632,24 @@
7434 6632 overflow: hidden;
7435 6633 text-overflow: ellipsis;
7436 6634 }
7437 6635
7438 -.frm_code_list.frm-full-hover.frmcenter a {
7439 - display: block;
7440 -}
7441 -
7442 -#frm-layout-classes frm-full-hover a span {
7443 - max-width: 45%;
7444 -}
7445 -
7446 -.frm-select-list-item.active,
7447 -.frm-select-list-item:hover,
7448 -.frm_wrap .ui-autocomplete li div.ui-state-active,
7449 -.frm_wrap .ui-autocomplete li.ui-state-focus,
7450 -.multiselect-container button.multiselect-option.active,
7451 -.multiselect-container button.multiselect-option:hover,
7452 -.frm-dropdown-menu > .dropdown-item > a:hover,
6636 +.frm-dropdown-menu > li > a:hover,
7453 6637 .frm_code_list.frm-full-hover a:hover span,
7454 6638 .frm_code_list.frm-full-hover a:hover {
7455 - background: var(--primary-25);
7456 - color: var(--primary-500);
7457 - border-radius: var(--small-radius);
6639 + background: var(--sidebar-color);
6640 + color: var(--primary-color);
7458 6641 }
7459 6642
7460 -.frm-select-list-item .frmsvg,
7461 -.frm-dropdown-menu > .dropdown-item > a .frmsvg {
7462 - opacity: .8;
7463 -}
7464 -
7465 -.frm-select-list-item:hover .frmsvg,
7466 -.frm-dropdown-menu > .dropdown-item > a:hover .frmsvg {
7467 - opacity: 1;
7468 -}
7469 -
7470 6643 .frm-dropdown-menu.frm_code_list > li > a {
7471 6644 padding: 3px 15px;
7472 6645 width: 300px;
7473 6646 }
7474 6647
7475 -#frm_edit_box_content_modal .frm-with-search, /* Temp. Add .frm-dropdown-menu in Views */
7476 -.frm-dropdown-menu .frm-with-search {
7477 - padding: var(--gap-xs) 10px 0;
6648 +.frm-dropdown-menu.frm_code_list .frm-with-search {
6649 + padding: 3px 10px;
7478 6650 }
7479 6651
7480 -.frm-dropdown-menu .subsubsub {
7481 - padding: 0 10px;
7482 -}
7483 -
7484 6652 .frm_grid_container {
7485 6653 overflow: visible;
7486 6654 }
7487 6655
@@ -7497,16 +6665,16 @@
7497 6665 .frm_code_list.frm_grid_container a {
7498 6666 padding: 5px 0;
7499 6667 text-align: center;
7500 6668 background-color: var(--light-blue);
7501 - border: 1px solid var(--primary-500);
7502 - color: var(--primary-500);
6669 + border: 1px solid var(--primary-color);
6670 + color: var(--primary-color);
7503 6671 display: block;
7504 6672 border-radius: var(--small-radius);
7505 6673 }
7506 6674
7507 6675 .frm_code_list.frm_grid_container a:hover {
7508 - background-color: var(--primary-700);
6676 + background-color: var(--primary-hover);
7509 6677 color: #fff;
7510 6678 }
7511 6679
7512 6680 .frm_field_list #frm-insert-fields .button a {
@@ -7514,22 +6682,18 @@
7514 6682 max-width: 95%;
7515 6683 overflow: hidden;
7516 6684 }
7517 6685
7518 -.field_type_list.frm_grid_container {
7519 - gap: var(--gap-xs) var(--gap-sm);
7520 - margin: var(--gap-xs);
7521 -}
7522 -
7523 6686 .field_type_list li {
7524 - margin: 0;
6687 + margin: 0 0 10px;
7525 6688 padding: 0;
6689 + clear: both;
6690 + float: left;
7526 6691 }
7527 6692
7528 -#frm-insert-fields .frm-search {
7529 - float: none;
7530 - margin: 15px 20px;
7531 - width: auto;
6693 +.field_type_list li:nth-child(2n) {
6694 + float: right;
6695 + clear: none;
7532 6696 }
7533 6697
7534 6698 #frm-insert-fields li,
7535 6699 #frm-insert-fields li a {
@@ -7534,13 +6698,22 @@
7534 6698 #frm-insert-fields li,
7535 6699 #frm-insert-fields li a {
7536 6700 text-decoration: none;
7537 6701 font-weight: normal;
7538 - font-size: var(--text-md) !important;
7539 - color: var(--grey-900);
6702 + font-size: 15px !important;
6703 + color: var(--dark-grey);
7540 6704 }
7541 6705
6706 +#frm-insert-fields li a {
6707 + padding: 5px 20px;
6708 + display: block;
6709 + border-radius: 0 var(--border-radius) var(--border-radius) 0;
6710 +}
6711 +
7542 6712 #frm-insert-fields li.frm_show_upgrade {
6713 + margin: 0 0 10px;
6714 + padding: 5px 20px;
6715 + box-sizing: border-box;
7543 6716 cursor: pointer;
7544 6717 opacity: .5;
7545 6718 }
7546 6719
@@ -7547,11 +6720,14 @@
7547 6720 #frm-insert-fields li a span {
7548 6721 vertical-align: middle;
7549 6722 }
7550 6723
7551 -.frmbutton.ui-draggable-dragging a,
6724 +#frm-insert-fields li:nth-child(2n) a {
6725 + border-radius: var(--border-radius) 0 0 var(--border-radius);
6726 +}
6727 +
7552 6728 #frm-insert-fields li a:not(.disabled):hover {
7553 - background: var(--grey-100);
6729 + background: var(--sidebar-hover);
7554 6730 }
7555 6731
7556 6732 #frm-insert-fields li a.disabled:hover {
7557 6733 cursor: not-allowed;
@@ -7573,9 +6749,9 @@
7573 6749 .frmsvg {
7574 6750 fill: currentColor;
7575 6751 width: 18px;
7576 6752 height: 18px;
7577 - vertical-align: middle;
6753 + vertical-align: text-bottom;
7578 6754 }
7579 6755
7580 6756 input[disabled],
7581 6757 .frmsvg svg {
@@ -7601,27 +6777,40 @@
7601 6777 width: 13px;
7602 6778 height: 13px;
7603 6779 }
7604 6780
6781 +.frm_code_list a .frmsvg,
7605 6782 .frmbutton.ui-sortable-helper .frmsvg,
7606 6783 .field_type_list li.frmbutton .frmsvg,
6784 +.frm_code_list a i,
7607 6785 .frmbutton.ui-sortable-helper i,
7608 -.field_type_list li.frmbutton i,
7609 -.frm_code_list a .frmsvg,
7610 -.frm_code_list a i {
7611 - color: var(--grey-500);
6786 +.field_type_list li.frmbutton i {
6787 + margin: .15em .2em;
6788 + color: var(--grey);
7612 6789 display: inline-block;
7613 6790 vertical-align: middle;
7614 - width: var(--text-md);
7615 - font-size: var(--text-md);
6791 + width: 20px;
6792 + height: 20px;
6793 + padding-right: 15px;
6794 + text-align: left;
6795 + font-size: 18px;
7616 6796 }
7617 6797
7618 -/* Standardize icon size for field buttons in the builder */
7619 -.field_type_list li.frmbutton .frmsvg {
7620 - width: var(--text-xl);
7621 - font-size: var(--text-xl);
6798 +/* Icon for Name field is larger */
6799 +.field_type_list li.frm_tname.frmbutton .frmsvg {
6800 + width: 24px;
6801 + height: 24px;
6802 + padding-right: 11px;
7622 6803 }
7623 6804
6805 +.frm_code_list a .frmsvg,
6806 +.frm_code_list a i {
6807 + margin: 0 5px 0 0;
6808 + padding: 0;
6809 + width: 15px;
6810 + font-size: 15px;
6811 +}
6812 +
7624 6813 .frm_code_list i:before {
7625 6814 font-size: inherit;
7626 6815 }
7627 6816
@@ -7626,58 +6815,55 @@
7626 6815 }
7627 6816
7628 6817 #frm-insert-fields li a:not(.disabled):hover .frmsvg,
7629 6818 #frm-insert-fields li a:not(.disabled):hover i {
7630 - color: var(--grey-600);
6819 + color: var(--dark-grey);
7631 6820 }
7632 6821
7633 6822 /* Icon while dragging */
7634 -.frmbutton.ui-draggable-dragging {
7635 - pointer-events: none;
6823 +.frmbutton.ui-draggable-dragging,
6824 +.frmbutton.ui-draggable-dragging a {
6825 + cursor: move;
7636 6826 }
7637 6827
7638 -#frm-insert-fields li.frm_show_upgrade,
7639 -#frm-insert-fields li a,
6828 +.frmbutton.ui-sortable-helper a,
6829 +.frmbutton.ui-draggable-dragging a:hover,
7640 6830 .frmbutton.ui-draggable-dragging a {
7641 6831 text-decoration: none;
7642 - display: inline-flex !important;
7643 - gap: var(--gap-xs);
7644 - align-items: center;
6832 + height: 25px !important;
6833 + max-width: 180px;
6834 + text-align: center;
6835 + display: block !important;
6836 + background-color: var(--primary-hover) !important;
7645 6837 border-radius: var(--border-radius) !important;
7646 - padding: var(--gap-xs) var(--gap-sm) !important;
7647 - color: var(--grey-900) !important;
6838 + padding: 5px 20px !important;
7648 6839 }
7649 6840
7650 -/* Adjust field button size to full width in builder */
7651 -#frm-insert-fields li a {
7652 - display: flex !important;
6841 +.frmbutton.ui-draggable-dragging:not(.ui-sortable-helper) a {
6842 + /* When the new field is held outside of a dropzone */
6843 + cursor: not-allowed;
6844 + background: var(--sidebar-color) !important;
6845 + color: var(--dark-grey) !important;
7653 6846 }
7654 6847
7655 -/* Prevents advanced fields from always appearing in search results */
7656 -#frm-insert-fields li.frm_show_upgrade.frm_hidden {
7657 - display: none !important;
7658 -}
7659 -
7660 -.frmbutton.ui-draggable-dragging a {
7661 - border: 1px solid var(--grey-300);
7662 - box-shadow: var(--box-shadow-md);
7663 -}
7664 -
7665 6848 .frmbutton.ui-draggable-dragging span {
7666 6849 font-size: 15px;
7667 6850 }
7668 6851
7669 6852 #frm-show-fields .frmbutton.ui-sortable-helper i,
7670 -.frmbutton.ui-draggable-dragging i,
7671 -.frmbutton.ui-draggable-dragging .frmsvg {
6853 +.frmbutton.ui-sortable-helper span,
6854 +.frmbutton.ui-draggable-dragging i {
7672 6855 color: #fff !important;
7673 6856 }
7674 6857
7675 -.frmbutton.ui-draggable-dragging i,
7676 -.frmbutton.ui-draggable-dragging .frmsvg {
7677 - color: var(--grey-700) !important;
6858 +.frmbutton.ui-draggable-dragging:not(.ui-sortable-helper) i {
6859 + color: var(--dark-grey) !important;
7678 6860 }
7679 6861
6862 +.frmbutton.ui-draggable-dragging .frm-dropdown-menu {
6863 + display: none;
6864 +}
6865 +
7680 6866 .frm_sorting li.ui-state-default.ui-sortable-helper,
7681 6867 .frmbutton.ui-sortable-helper {
7682 6868 transition: opacity .2s;
7683 6869 opacity: 1;
@@ -7682,13 +6868,10 @@
7682 6868 transition: opacity .2s;
7683 6869 opacity: 1;
7684 6870 }
7685 6871
7686 -.frm-field-group-count {
7687 - background-color: var(--sidebar-hover);
7688 - padding: 5px;
7689 - color: #fff !important;
7690 - border-radius: 10px;
6872 +.frmbutton.ui-sortable-helper:not(.ui-draggable-dragging) {
6873 + opacity: 0;
7691 6874 }
7692 6875
7693 6876 /* End dragging */
7694 6877
@@ -7714,64 +6897,13 @@
7714 6897 .frm_noallow a {
7715 6898 color: inherit;
7716 6899 }
7717 6900
7718 -#frm_upgrade_modal_image {
7719 - max-width: 200px;
7720 -}
7721 -
7722 -.frm-tab-message {
7723 - max-width: 600px;
7724 - margin: 20px auto;
7725 - color: rgba(63, 75, 91, 0.8);
7726 -}
7727 -
7728 -.frm-settings-screenshot-toolbar {
7729 - min-height: 39px;
7730 - display: flex;
7731 -}
7732 -
7733 -.frm-settings-screenshot-toolbar .frm-minmax-icon {
7734 - height: 8px;
7735 - width: 8px;
7736 - border-radius: 50%;
7737 - align-self: center;
7738 - margin-left: 10px;
7739 -}
7740 -
7741 -.frm-settings-screenshot-toolbar .frm-minmax-icon:first-of-type {
7742 - margin-left: 20px;
7743 -}
7744 -
7745 -.frm-settings-screenshot-toolbar img {
7746 - object-fit: contain;
7747 - align-self: flex-end;
7748 - margin-left: 25px;
7749 -}
7750 -
7751 -.frm-settings-screenshot-toolbar + div {
7752 - background: #fff;
7753 - padding-top: 25px;
7754 - border-radius: 0 0 16px 16px;
7755 -}
7756 -
7757 -.frm-settings-screenshot-toolbar + div img {
7758 - max-width: calc( 100% - 40px );
7759 -}
7760 -
7761 -.frm-settings-screenshot-wrapper {
7762 - max-width: 700px;
7763 - margin: 50px auto 0;
7764 - box-shadow: 0px 4px 4px rgba(189, 196, 205, 0.25), 0px 12px 56px rgba(42, 57, 75, 0.25);
7765 - border-radius: 16px;
7766 - background: #EBECF1;
7767 -}
7768 -
7769 6901 .frm-dialog {
7770 6902 z-index: 100;
7771 6903 padding: 0 !important;
7772 - border-radius: 16px;
7773 - border: none;
6904 + border-radius: 10px;
6905 + border: 1px solid var(--grey);
7774 6906 background-color: #fff;
7775 6907 max-width: 100% !important;
7776 6908 }
7777 6909
@@ -7778,14 +6910,20 @@
7778 6910 .frm-dialog .postbox {
7779 6911 background: transparent;
7780 6912 box-shadow: none;
7781 6913 border: none;
7782 - line-height: var(--leading);
7783 6914 }
7784 6915
6916 +.frm-dialog .frm-sub-label,
6917 +.frm-dialog label {
6918 + color: var(--dark-grey);
6919 + font-size: 17px;
6920 + font-weight: 300;
6921 +}
6922 +
7785 6923 .frm-dialog input[type=text],
7786 6924 .frm-dialog textarea {
7787 - font-size: var(--text-md);
6925 + font-size: 16px;
7788 6926 }
7789 6927
7790 6928 .frm-dialog textarea {
7791 6929 height: 75px;
@@ -7798,19 +6936,16 @@
7798 6936 .frm-dialog .frm-sub-label,
7799 6937 .frm-sub-label {
7800 6938 color: var(--grey);
7801 6939 text-transform: none;
7802 - padding-left: 8px;
7803 6940 }
7804 6941
7805 6942 h2 .frm-sub-label {
7806 - font-size: var(--text-md);
6943 + font-size: 16px;
7807 6944 }
7808 6945
7809 -.frm-views-editor-body .ui-widget-overlay,
7810 6946 .frm-white-body .ui-widget-overlay,
7811 -.toplevel_page_formidable .ui-widget-overlay,
7812 -.formidable_page_formidable-payments .ui-widget-overlay {
6947 +.toplevel_page_formidable .ui-widget-overlay {
7813 6948 position: fixed;
7814 6949 width: 100%;
7815 6950 height: 100%;
7816 6951 top: 0;
@@ -7816,10 +6951,9 @@
7816 6951 top: 0;
7817 6952 left: 0;
7818 6953 right: 0;
7819 6954 bottom: 0;
7820 - background: var(--grey-500);
7821 - opacity: .5;
6955 + background: var(--grey-border);
7822 6956 z-index: 2;
7823 6957 }
7824 6958
7825 6959 #frm_upgrade_modal {
@@ -7834,15 +6968,15 @@
7834 6968 color: #c4c4c4;
7835 6969 padding-bottom: 20px;
7836 6970 }
7837 6971
7838 -.frm-upgrade-message img {
6972 +#frm-upgrade-message img {
7839 6973 max-width: 100%;
7840 6974 }
7841 6975
7842 6976 a.frm-link-secondary {
7843 6977 color: #c4c4c4;
7844 - font-size: var(--text-sm);
6978 + font-size: 14px;
7845 6979 text-decoration: underline;
7846 6980 }
7847 6981
7848 6982 .field_type_list li.button.frm_noallow,
@@ -7858,136 +6992,132 @@
7858 6992 min-height: 150px;
7859 6993 }
7860 6994
7861 6995 /*!
7862 - * Bootstrap v4.6.1
6996 + * Bootstrap v3.0.2
7863 6997 */
7864 6998
7865 6999 .tooltip {
7866 - /* Copied from Bootstrap */
7867 7000 position: absolute;
7001 + z-index: 9999999;
7868 7002 display: block;
7869 - margin: 0;
7870 - font-style: normal;
7871 - font-weight: 400;
7872 - line-height: 1.5;
7873 - text-align: left;
7874 - text-align: start;
7875 - text-decoration: none;
7876 - text-shadow: none;
7877 - text-transform: none;
7878 - letter-spacing: normal;
7879 - word-break: normal;
7880 - word-spacing: normal;
7881 - white-space: normal;
7882 - line-break: auto;
7883 - font-size: 0.875rem;
7884 - word-wrap: break-word;
7003 + visibility: visible;
7004 + font-size: 14px;
7005 + line-height: 1.4;
7885 7006 opacity: 0;
7886 -
7887 - /* Custom rules */
7888 - z-index: 9999999;
7889 - pointer-events: none;
7007 + filter: alpha(opacity=0);
7890 7008 }
7891 7009
7892 -.tooltip.show {
7893 - opacity: 0.9;
7010 +.tooltip.in {
7011 + opacity: 1;
7012 + filter: alpha(opacity=100);
7894 7013 }
7895 7014
7896 -.tooltip .arrow {
7897 - position: absolute;
7898 - display: block;
7899 - width: 0.8rem;
7900 - height: 0.4rem;
7901 - margin-left: 0 !important;
7015 +.tooltip.top {
7016 + margin-top: -3px;
7017 + padding: 5px 0;
7902 7018 }
7903 7019
7904 -.tooltip .arrow::before {
7905 - position: absolute;
7906 - content: "";
7907 - border-color: transparent;
7908 - border-style: solid;
7020 +.tooltip.right {
7021 + margin-left: 3px;
7022 + padding: 0 5px;
7909 7023 }
7910 7024
7911 -.bs-tooltip-top, .bs-tooltip-auto[x-placement^="top"] {
7912 - padding: 0.4rem 0;
7025 +.tooltip.bottom {
7026 + margin-top: 3px;
7027 + padding: 5px 0;
7913 7028 }
7914 7029
7915 -.bs-tooltip-top .arrow, .bs-tooltip-auto[x-placement^="top"] .arrow {
7916 - bottom: 0;
7030 +.tooltip.left {
7031 + margin-left: -3px;
7032 + padding: 0 5px;
7917 7033 }
7918 7034
7919 -.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before {
7920 - top: 0;
7921 - border-width: 0.4rem 0.4rem 0;
7922 - border-top-color: #000;
7035 +.tooltip-inner {
7036 + max-width: 200px;
7037 + padding: 10px;
7038 + color: #fff;
7039 + text-align: left;
7040 + text-decoration: none;
7041 + background-color: var(--dark-grey);
7042 + border-radius: 4px;
7043 + z-index: 99999999;
7044 + text-transform: none;
7923 7045 }
7924 7046
7925 -.bs-tooltip-right, .bs-tooltip-auto[x-placement^="right"] {
7926 - padding: 0 0.4rem;
7047 +.tooltip.right .tooltip-inner {
7048 + min-width: 150px;
7049 + max-width: 300px;
7927 7050 }
7928 7051
7929 -.bs-tooltip-right .arrow, .bs-tooltip-auto[x-placement^="right"] .arrow {
7930 - left: 0;
7931 - width: 0.4rem;
7932 - height: 0.8rem;
7052 +.tooltip-arrow {
7053 + position: absolute;
7054 + width: 0;
7055 + height: 0;
7056 + border-color: transparent;
7057 + border-style: solid;
7933 7058 }
7934 7059
7935 -.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before {
7936 - right: 0;
7937 - border-width: 0.4rem 0.4rem 0.4rem 0;
7938 - border-right-color: #000;
7060 +.tooltip.top .tooltip-arrow {
7061 + bottom: 0;
7062 + left: 50%;
7063 + margin-left: -5px;
7064 + border-width: 5px 5px 0;
7065 + border-top-color: var(--dark-grey);
7939 7066 }
7940 7067
7941 -.bs-tooltip-bottom, .bs-tooltip-auto[x-placement^="bottom"] {
7942 - padding: 0.4rem 0;
7068 +.tooltip.top-left .tooltip-arrow {
7069 + bottom: 0;
7070 + left: 5px;
7071 + border-width: 5px 5px 0;
7072 + border-top-color: var(--dark-grey);
7943 7073 }
7944 7074
7945 -.bs-tooltip-bottom .arrow, .bs-tooltip-auto[x-placement^="bottom"] .arrow {
7946 - top: 0;
7947 -}
7948 -
7949 -.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
7075 +.tooltip.top-right .tooltip-arrow {
7950 7076 bottom: 0;
7951 - border-width: 0 0.4rem 0.4rem;
7952 - border-bottom-color: #000;
7077 + right: 5px;
7078 + border-width: 5px 5px 0;
7079 + border-top-color: var(--dark-grey);
7953 7080 }
7954 7081
7955 -.bs-tooltip-left, .bs-tooltip-auto[x-placement^="left"] {
7956 - padding: 0 0.4rem;
7082 +.tooltip.right .tooltip-arrow {
7083 + top: 50%;
7084 + left: 0;
7085 + margin-top: -5px;
7086 + border-width: 5px 5px 5px 0;
7087 + border-right-color: var(--dark-grey);
7957 7088 }
7958 7089
7959 -.bs-tooltip-left .arrow, .bs-tooltip-auto[x-placement^="left"] .arrow {
7090 +.tooltip.left .tooltip-arrow {
7091 + top: 50%;
7960 7092 right: 0;
7961 - width: 0.4rem;
7962 - height: 0.8rem;
7093 + margin-top: -5px;
7094 + border-width: 5px 0 5px 5px;
7095 + border-left-color: var(--dark-grey);
7963 7096 }
7964 7097
7965 -.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before {
7966 - left: 0;
7967 - border-width: 0.4rem 0 0.4rem 0.4rem;
7968 - border-left-color: #000;
7098 +.tooltip.bottom .tooltip-arrow {
7099 + top: 0;
7100 + left: 50%;
7101 + margin-left: -5px;
7102 + border-width: 0 5px 5px;
7103 + border-bottom-color: var(--dark-grey);
7969 7104 }
7970 7105
7971 -.tooltip-inner {
7972 - max-width: 200px;
7973 - padding: 0.25rem 0.5rem;
7974 - color: #fff;
7975 - text-align: center;
7976 - background-color: #000;
7977 - border-radius: 0.25rem;
7106 +.tooltip.bottom-left .tooltip-arrow {
7107 + top: 0;
7108 + left: 5px;
7109 + border-width: 0 5px 5px;
7110 + border-bottom-color: var(--dark-grey);
7978 7111 }
7979 7112
7980 -.frm-dropdown-menu.show {
7981 - display: block;
7113 +.tooltip.bottom-right .tooltip-arrow {
7114 + top: 0;
7115 + right: 5px;
7116 + border-width: 0 5px 5px;
7117 + border-bottom-color: var(--dark-grey);
7982 7118 }
7983 7119
7984 -/* End Bootstrap */
7985 -
7986 -.preview.dropdown .dropdown-menu {
7987 - min-width: 205px;
7988 -}
7989 -
7990 7120 .frm_clear {
7991 7121 clear: both;
7992 7122 }
7993 7123
@@ -8025,8 +7155,10 @@
8025 7155 transition: width 0.6s ease;
8026 7156 background-color: #04A4CC;
8027 7157 }
8028 7158
7159 +/* End Bootstrap */
7160 +
8029 7161 .tooltip.frm_tooltip {
8030 7162 position: fixed;
8031 7163 top: auto !important;
8032 7164 bottom: 0 !important;
@@ -8047,25 +7179,93 @@
8047 7179 box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.5);
8048 7180 padding: 10px 40px;
8049 7181 border-top-color: #ccc;
8050 7182 background: var(--sidebar-color);
8051 - color: var(--grey-700);
7183 + color: var(--dark-grey);
8052 7184 border-radius: 0;
8053 7185 opacity: 1;
8054 - font-size: var(--text-sm);
7186 + font-size: 14px;
8055 7187 }
8056 7188
7189 +#frm_styling_form #post-body {
7190 + padding: 20px;
7191 +}
7192 +
7193 +.ui-datepicker-inline.ui-datepicker {
7194 + max-width: 19em;
7195 +}
7196 +
7197 +.default-style-box.howto {
7198 + margin-left: 20px;
7199 + font-style: normal;
7200 +}
7201 +
8057 7202 #frm_custom_css_box {
8058 7203 width: 100%;
8059 7204 }
8060 7205
7206 +#frm_styling_form .wp-picker-container .wp-color-result.button {
7207 + width: 100%;
7208 + overflow: hidden;
7209 + margin: 0 !important;
7210 + height: 32px !important;
7211 + padding: 0 0 0 30px !important;
7212 + border-radius: var(--small-radius);
7213 + border-color: var(--grey-border);
7214 +}
7215 +
7216 +#frm_styling_form .wp-color-result-text {
7217 + line-height: 30px !important;
7218 + font-size: 15px;
7219 + background: #fff !important;
7220 +}
7221 +
7222 +.wp-picker-open + .wp-picker-input-wrap {
7223 + position: absolute;
7224 + margin-left: -87px;
7225 + margin-top: 1px;
7226 + width: 86px;
7227 +}
7228 +
7229 +.wp-picker-container input[type="text"].wp-color-picker {
7230 + border: none;
7231 + padding: 3px;
7232 + font-family: inherit;
7233 + color: var(--dark-grey);
7234 + font-size: 15px;
7235 + width: 100%;
7236 + line-height: 1;
7237 + text-align: center;
7238 +}
7239 +
7240 +.wp-picker-input-wrap .wp-picker-clear {
7241 + display: none !important;
7242 +}
7243 +
7244 +.wp-picker-holder {
7245 + position: absolute;
7246 + z-index: 999;
7247 +}
7248 +
7249 +.frm_end .wp-picker-holder {
7250 + margin-left: -145px;
7251 +}
7252 +
7253 +.frm_end.frm6 .wp-picker-holder {
7254 + margin-left: -86px;
7255 +}
7256 +
7257 +#frm_styling_form div.tabs-panel {
7258 + padding-left: 5px;
7259 + padding-right: 5px;
7260 +}
7261 +
8061 7262 /*form inputs/selects */
8062 7263 .frm_form_field.frm_scroll_box .frm_opt_container,
8063 -.frm-white-body .wrap input[type="text"], /* Cover Views pages */
8064 -.frm-white-body .wrap input[type="search"],
8065 -.frm-white-body .wrap input[type="number"],
8066 -.frm-white-body .wrap select,
8067 -.frm-white-body .wrap textarea,
7264 +#postbox-container-2 input[type="text"],
7265 +#postbox-container-2 input[type="number"],
7266 +#postbox-container-2 select,
7267 +#postbox-container-2 textarea,
8068 7268 button.frm_choose_image_box,
8069 7269 #titlediv input[type="text"],
8070 7270 .frm-fields button.btn,
8071 7271 .frm_wrap textarea,
@@ -8070,11 +7270,9 @@
8070 7270 .frm-fields button.btn,
8071 7271 .frm_wrap textarea,
8072 7272 .frm_wrap input[type="tel"],
8073 7273 .frm_wrap input[type="text"],
8074 -.frm_wrap input[type=search],
8075 7274 .frm_wrap input[type="number"],
8076 -.frm_wrap input[type="date"],
8077 7275 .frm_wrap select,
8078 7276 .wp-admin .frm_wrap select,
8079 7277 .field-group textarea,
8080 7278 .field-group input[type="text"],
@@ -8081,33 +7279,17 @@
8081 7279 .field-group select {
8082 7280 outline: 0;
8083 7281 box-shadow: none;
8084 7282 border-radius: var(--small-radius);
8085 - padding: 5px 14px;
8086 - border-color: var(--grey-300);
8087 - color: var(--grey-800);
8088 - font-size: var(--text-md);
7283 + padding: 6px 9px;
7284 + border-color: var(--grey-border);
7285 + color: var(--dark-grey);
7286 + font-size: 15px;
8089 7287 margin: 0;
8090 7288 background-color: #fff;
8091 - line-height: var(--leading);
7289 + line-height: 1;
8092 7290 }
8093 7291
8094 -.frm_wrap ::-webkit-datetime-edit {
8095 - line-height: var(--leading);
8096 -}
8097 -
8098 -.frm-white-body textarea:focus,
8099 -.frm-white-body input:focus,
8100 -.frm-white-body select:focus,
8101 -.frm_wrap input:focus,
8102 -.frm_wrap select:focus,
8103 -.wp-core-ui .frm_wrap select:focus,
8104 -.frm-btn-group .multiselect.dropdown-toggle:focus,
8105 -.frm_wrap textarea:focus {
8106 - border-color: var(--primary-500) !important;
8107 - box-shadow: none !important;
8108 -}
8109 -
8110 7292 #postbox-container-2 textarea,
8111 7293 .frm_wrap textarea,
8112 7294 .field-group textarea {
8113 7295 line-height: 2;
@@ -8124,12 +7306,19 @@
8124 7306 .wp-admin .frm_wrap select {
8125 7307 max-width: 100%;
8126 7308 }
8127 7309
8128 -.frm_form_field.frm_scroll_box .frm_opt_container {
7310 +.frm_form_field.frm_scroll_box .frm_opt_container,
7311 +.frm_wrap .frm_form_builder textarea,
7312 +.frm_wrap .frm_form_builder input[type="tel"],
7313 +.frm_wrap .frm_form_builder input[type="text"] {
8129 7314 padding: 10px 12px;
8130 7315 }
8131 7316
7317 +.frm_wrap .frm_form_builder input[type="text"].frm_other_input {
7318 + padding: 6px 9px;
7319 +}
7320 +
8132 7321 .frm_wrap input[disabled],
8133 7322 .frm_wrap select[disabled],
8134 7323 .frm_wrap textarea[disabled],
8135 7324 .frm_wrap input[readonly],
@@ -8135,23 +7324,37 @@
8135 7324 .frm_wrap input[readonly],
8136 7325 .frm_wrap select[readonly],
8137 7326 .frm_wrap textarea[readonly],
8138 7327 .frm_wrap input::placeholder {
8139 - color: var(--grey-500);
7328 + color: var(--grey);
8140 7329 }
8141 7330
7331 +#postcustomstuff table input {
7332 + width: 100% !important;
7333 + margin: 0 !important;
7334 +}
7335 +
7336 +#postcustomstuff table td {
7337 + padding: 7px 0 7px 7px !important;
7338 + line-height: 30px;
7339 +}
7340 +
8142 7341 #postcustomstuff table td > div {
8143 7342 /* To override some inline css in add-on */
8144 7343 padding-top: 0 !important;
8145 7344 }
8146 7345
8147 -.wp-admin .frm_wrap .form-table select {
7346 +.wp-admin .frm_wrap .form-table select,
7347 +#postbox-container-2 select,
7348 +.wp-admin .frm_wrap select {
7349 + line-height: 32px;
7350 + height: 32px;
8148 7351 vertical-align: top;
8149 7352 }
8150 7353
8151 7354 .frm_wrap .frm_form_builder select {
8152 - line-height: var(--leading);
8153 - height: var(--text-md);
7355 + line-height: 40px;
7356 + height: 40px;
8154 7357 width: 100%;
8155 7358 }
8156 7359
8157 7360 #postbox-container-2 select,
@@ -8157,25 +7360,11 @@
8157 7360 #postbox-container-2 select,
8158 7361 .wp-admin .frm_wrap select,
8159 7362 .frm_wrap .frm_form_builder select {
8160 7363 height: auto;
8161 - background-position: right 11px top 55%;
7364 + padding: 0 24px 0 12px;
8162 7365 }
8163 7366
8164 -.frm-white-body .tablenav select,
8165 -.frm-white-body .tablenav input[type="text"],
8166 -.wp-admin .frm_wrap .tablenav select,
8167 -.frm_wrap .tablenav input[type="date"],
8168 -.frm_wrap .tablenav input[type="text"] {
8169 - padding-top: 0;
8170 - padding-bottom: 0;
8171 - line-height: 1;
8172 -}
8173 -
8174 -.frm_wrap .tablenav ::-webkit-datetime-edit {
8175 - line-height: 1;
8176 -}
8177 -
8178 7367 .frm-fields button.btn,
8179 7368 .frm-fields textarea,
8180 7369 .frm-fields input[type="text"],
8181 7370 .frm-fields select,
@@ -8187,9 +7376,10 @@
8187 7376 outline: 0;
8188 7377 }
8189 7378
8190 7379 .frm-fields button.btn {
8191 - height: var(--h-md);
7380 + line-height: normal;
7381 + height: auto;
8192 7382 text-align: inherit;
8193 7383 }
8194 7384
8195 7385 .global-font .field-group input[type="text"] {
@@ -8195,53 +7385,8 @@
8195 7385 .global-font .field-group input[type="text"] {
8196 7386 width: auto;
8197 7387 }
8198 7388
8199 -/* Image Options */
8200 -
8201 -.frm_images_dropdown .frm_image_option {
8202 - margin: 0 !important;
8203 -}
8204 -
8205 -.frm_images_dropdown .frm_radio input[type=radio] {
8206 - opacity: 0;
8207 - position: absolute;
8208 - z-index: -1;
8209 -}
8210 -
8211 -.frm_images_dropdown__image .frmsvg {
8212 - width: 100%;
8213 - max-width: 102px;
8214 - fill: none;
8215 - margin: 0;
8216 -}
8217 -
8218 -.frm_images_dropdown .frm_noallow .frm_image_option_container {
8219 - opacity: .5;
8220 -}
8221 -
8222 -.frm_images_dropdown .frm_image_option_container {
8223 - border-radius: var(--small-radius);
8224 - border: 2px solid transparent;
8225 - align-items: center;
8226 -}
8227 -
8228 -.frm_images_dropdown .frm_image_option_container:hover {
8229 - background: #fff !important;
8230 -}
8231 -
8232 -.frm_images_dropdown input[type="radio"]:checked + .frm_image_option_container {
8233 - background: #fff !important;
8234 - border-color: var(--primary-500);
8235 -}
8236 -
8237 -.frm_images_dropdown .frm_text_label_for_image {
8238 - padding: 0;
8239 - text-align: left;
8240 -}
8241 -
8242 -/* End Image Options */
8243 -
8244 7389 /* Welcome page */
8245 7390
8246 7391 .wp-core-ui .frm_grey.frm-button-primary.disabled,
8247 7392 .wp-core-ui .frm_grey.frm-button-primary,
@@ -8260,9 +7405,9 @@
8260 7405 }
8261 7406
8262 7407 .windows::-webkit-scrollbar-thumb,
8263 7408 .windows ::-webkit-scrollbar-thumb {
8264 - background: var(--grey-300);
7409 + background: var(--grey-border);
8265 7410 -webkit-border-radius: var(--border-radius);
8266 7411 -webkit-box-shadow: none;
8267 7412 }
8268 7413
@@ -8284,9 +7429,8 @@
8284 7429 .rtl #frm_top_bar #frm_bs_dropdown {
8285 7430 padding-left: 15px;
8286 7431 }
8287 7432
8288 -.rtl .frm-full-close,
8289 7433 .rtl .frm_wrap .columns-2 .frm-right-panel,
8290 7434 .rtl .frm-right-panel {
8291 7435 border-right-width: 1px;
8292 7436 border-left-width: 0;
@@ -8291,14 +7435,9 @@
8291 7435 border-right-width: 1px;
8292 7436 border-left-width: 0;
8293 7437 }
8294 7438
8295 -.rtl .frm-full-close {
8296 - padding-left: 0;
8297 - padding-right: var(--gap-md);
8298 -}
8299 -
8300 -.rtl .frm-text-right {
7439 +.rtl .frm_right_text {
8301 7440 text-align: left;
8302 7441 }
8303 7442
8304 7443 .rtl .frm_wrap #frm_adv_info ul.category-tabs li:first-child {
@@ -8338,44 +7477,28 @@
8338 7477 margin-left: 0;
8339 7478 margin-right: 46%;
8340 7479 }
8341 7480
8342 -.rtl .frm-field-action-icons {
8343 - right: unset;
8344 - left: 2px;
7481 +.rtl .frm-field-action-icons a {
7482 + float: left;
7483 + margin-right: 15px;
7484 + margin-left: 0;
8345 7485 }
8346 7486
7487 +.rtl #frm_upgrade_modal .dismiss i,
7488 +.rtl .frm-inline-modal i,
7489 +.rtl #frm-bulk-modal i,
8347 7490 .rtl .frm_has_shortcodes > i {
8348 7491 right: auto;
8349 7492 left: 5px;
8350 7493 }
8351 7494
7495 +.rtl .frm_code_list.frm-full-hover a span,
8352 7496 .rtl .frm_reply_to_container,
8353 7497 .rtl .frm_bcc_cc_container {
8354 7498 float: left;
8355 7499 }
8356 7500
8357 -.rtl .frm-default-switcher {
8358 - float: left;
8359 - position: relative;
8360 -}
8361 -
8362 -.rtl .frm-with-right-icon .frmsvg {
8363 - right: auto;
8364 - left: 0;
8365 -}
8366 -
8367 -.rtl .frm-inline-modal > a.dismiss {
8368 - left: 13px;
8369 - right: auto;
8370 -}
8371 -
8372 -.rtl.wp-admin .frm_wrap select {
8373 - padding-left: var(--gap-lg) !important;
8374 - padding-right: 5px !important;
8375 - background-position: left 11px top 55%;
8376 -}
8377 -
8378 7501 /* ---------------------------------------------------------------
8379 7502 Clearfix
8380 7503 --------------------------------------------------------------- */
8381 7504 span.clear {
@@ -8417,12 +7540,15 @@
8417 7540 @media only screen and (max-width: 1200px) {
8418 7541 .frm-addons {
8419 7542 grid-template-columns: 1fr 1fr;
8420 7543 }
7544 +
7545 + ul.frm_form_nav > li {
7546 + margin-right: 2.5%;
7547 + }
8421 7548 }
8422 7549
8423 7550 @media only screen and (max-width: 1050px) {
8424 - .frm-white-body,
8425 7551 .frm_wrap {
8426 7552 --biggest-sidebar: 390px;
8427 7553 }
8428 7554
@@ -8432,18 +7558,15 @@
8432 7558
8433 7559 .frm_actions_list {
8434 7560 margin-left: 0;
8435 7561 }
7562 +
7563 + ul.frm_form_nav > li {
7564 + margin-right: 1.5%;
7565 + }
8436 7566 }
8437 7567
8438 7568 @media only screen and (max-width: 960px) {
8439 - .frm-white-body,
8440 - .frm_wrap {
8441 - --gap-sm: 8px;
8442 - --gap-md: 16px;
8443 - --gap-2xl: 24px;
8444 - }
8445 -
8446 7569 .auto-fold #adminmenuwrap {
8447 7570 width: 36px;
8448 7571 }
8449 7572
@@ -8454,40 +7577,36 @@
8454 7577 p.howto {
8455 7578 display: inline-block;
8456 7579 }
8457 7580
8458 - /* Fix: Issue where the admin page content had extra white space to the left on small screens */
8459 - .auto-fold.frm-admin-page-styles:not(.frm-full-screen) .frm_page_container,
8460 - .auto-fold:not(.frm-full-screen) .frm_wrap .frm_page_container {
8461 - left: 36px;
7581 + ul.frm_form_nav {
7582 + clear: left;
7583 + padding-top: 0;
8462 7584 }
8463 7585
8464 - .frm-admin-footer-links {
8465 - padding-left: 36px;
7586 + ul.frm_form_nav > li {
7587 + margin-right: 3.5%;
8466 7588 }
8467 7589
8468 - body.rtl .frm-admin-footer-links {
8469 - padding-right: 36px;
7590 + .frm-full-screen #frm_top_bar {
7591 + padding: 0 10px !important;
8470 7592 }
7593 +
7594 + .frm-full-close {
7595 + padding: 15px 0 10px 10px;
7596 + }
7597 +
7598 + .frm-full-close .frmsvg {
7599 + padding: 0;
7600 + }
8471 7601 }
8472 7602
8473 7603 @media only screen and (max-width: 850px) {
8474 - #frm_bs_dropdown {
8475 - /* There isn't enough room for the title on a screen this size so just hide it. */
8476 - display: none;
8477 - }
8478 -
8479 - .frm-white-body,
8480 7604 .frm_wrap {
8481 7605 --biggest-sidebar: 350px;
8482 7606 --big-sidebar: 350px;
8483 7607 }
8484 7608
8485 - #frm_bs_dropdown .frm_bstooltip {
8486 - /* There isn't enough room for the title on a screen this size so just hide it. */
8487 - display: none !important;
8488 - }
8489 -
8490 7609 .frm_col_one {
8491 7610 clear: none;
8492 7611 }
8493 7612
@@ -8496,9 +7615,10 @@
8496 7615 display: block;
8497 7616 margin: 5px 0;
8498 7617 }
8499 7618
8500 - #frm_top_bar h1 {
7619 + .post-type-frm_display #frm_top_bar h1,
7620 + .frm_page_container #frm_top_bar h1 {
8501 7621 width: auto;
8502 7622 max-width: 200px;
8503 7623 }
8504 7624
@@ -8568,9 +7688,8 @@
8568 7688 }
8569 7689 }
8570 7690
8571 7691 @media only screen and (max-width: 782px) {
8572 - .frm-white-body,
8573 7692 .frm_wrap {
8574 7693 --small-sidebar: 20%;
8575 7694 --medium-sidebar: 35%
8576 7695 }
@@ -8584,9 +7703,9 @@
8584 7703 .frm_wrap #publishing-action {
8585 7704 line-height: normal;
8586 7705 }
8587 7706
8588 - .frm-white-body #screen-meta-links {
7707 + .frm-full-screen #screen-meta-links {
8589 7708 display: none;
8590 7709 }
8591 7710
8592 7711 .frm_wrap .misc-pub-section {
@@ -8645,13 +7764,8 @@
8645 7764 .with_frm_style .frm_checkbox input[type=checkbox] {
8646 7765 width: 25px !important;
8647 7766 }
8648 7767
8649 - .frm_single_entry_page .with_frm_style .frm_radio input[type=radio],
8650 - .frm_single_entry_page .with_frm_style .frm_checkbox input[type=checkbox] {
8651 - width: 18px !important;
8652 - }
8653 -
8654 7768 .wp-list-table.toplevel_page_formidable .column-entries,
8655 7769 .wp-list-table.toplevel_page_formidable .column-form_key,
8656 7770 .wp-list-table.toplevel_page_formidable .column-shortcode,
8657 7771 .wp-list-table.toplevel_page_formidable .column-created_at {
@@ -8665,13 +7779,27 @@
8665 7779 padding: 3px 8px 3px 35%;
8666 7780 text-align: left;
8667 7781 }
8668 7782
7783 + .wp-list-table.toplevel_page_formidable td.column-title:before,
7784 + .wp-list-table.toplevel_page_formidable td.column-id:before {
7785 + display: none !important;
7786 + }
7787 +
7788 + .wp-list-table.toplevel_page_formidable td.column-title,
7789 + .wp-list-table.toplevel_page_formidable td.column-id {
7790 + display: table-cell !important;
7791 + }
7792 +
8669 7793 #form_entries_page .wp-list-table th.frm_hidden,
8670 7794 #form_entries_page .wp-list-table td.frm_hidden {
8671 7795 display: none !important;
8672 7796 }
8673 7797
7798 + ul.frm_form_nav > li {
7799 + margin-right: 15px;
7800 + }
7801 +
8674 7802 .frm-white-body.auto-fold #wpcontent {
8675 7803 padding-left: 0;
8676 7804 }
8677 7805
@@ -8682,13 +7810,11 @@
8682 7810 .frm-addons {
8683 7811 grid-template-columns: 1fr;
8684 7812 }
8685 7813
8686 - .frm-admin-page-styles .frm_page_container,
8687 - .frm_wrap .frm_page_container {
8688 - left: 0 !important;
8689 - top: 46px !important;
8690 - height: calc( 100vh - 46px ) !important;
7814 + .frm_single_entry_page.frm_wrap .frm_page_container {
7815 + height: auto;
7816 + display: block;
8691 7817 }
8692 7818
8693 7819 .frm_single_entry_page.frm_wrap .columns-2 {
8694 7820 display: block;
@@ -8706,22 +7832,13 @@
8706 7832 border-radius: 6px;
8707 7833 }
8708 7834
8709 7835 #wp-content-media-buttons a.frm_insert_form {
8710 - padding: 0 var(--gap-sm);
7836 + padding: 0 15px;
8711 7837 }
8712 -
8713 - .frm-admin-footer-links {
8714 - padding-left: 0;
8715 - }
8716 -
8717 - body.rtl .frm-admin-footer-links {
8718 - padding-right: 0;
8719 - }
8720 7838 }
8721 7839
8722 7840 @media only screen and (max-width: 700px) {
8723 - .frm-white-body,
8724 7841 .frm_wrap {
8725 7842 --biggest-sidebar: 50%;
8726 7843 --big-sidebar: 50%;
8727 7844 }
@@ -8727,9 +7844,8 @@
8727 7844 }
8728 7845 }
8729 7846
8730 7847 @media only screen and (max-width: 600px) {
8731 - .frm-white-body,
8732 7848 .frm_wrap {
8733 7849 --small-sidebar: 45px;
8734 7850 }
8735 7851
@@ -8735,9 +7851,9 @@
8735 7851
8736 7852 .frm-form-setting-tabs a {
8737 7853 visibility: collapse;
8738 7854 font-size: 0;
8739 - padding: 0 var(--gap-sm);
7855 + padding: 0 15px;
8740 7856 }
8741 7857
8742 7858 .frm-form-setting-tabs a .frmsvg,
8743 7859 .frm-form-setting-tabs a i {
@@ -8809,12 +7925,8 @@
8809 7925 .rtl #frm_builder_page .frm_actions_dropdown > .frm-dropdown-menu {
8810 7926 right: auto;
8811 7927 left: 0;
8812 7928 }
8813 -
8814 - .frm_on_submit_type svg {
8815 - display: none;
8816 - }
8817 7929 }
8818 7930
8819 7931 @media only screen and (max-width: 475px) {
8820 7932 #frm_bs_dropdown {
@@ -8830,18 +7942,8 @@
8830 7942 margin-right: 0;
8831 7943 }
8832 7944 }
8833 7945
8834 -/* Firefox */
8835 -@-moz-document url-prefix() {
8836 - .frm-white-body .tablenav select,
8837 - .frm-white-body .tablenav input[type="text"],
8838 - .wp-admin .frm_wrap .tablenav select,
8839 - .frm_wrap .tablenav input[type="text"] {
8840 - padding-top: 5px;
8841 - }
8842 -}
8843 -
8844 7946 /* PRINT */
8845 7947 @media print {
8846 7948 a, .misc-pub-section a {
8847 7949 color: #000 !important;
@@ -8892,9 +7994,9 @@
8892 7994 display: block;
8893 7995 padding: 20px;
8894 7996 }
8895 7997
8896 - .frm_wrap .columns-2,
7998 + .frm_page_container .columns-2,
8897 7999 .frm_wrap .frm_page_container {
8898 8000 height: auto;
8899 8001 display: block;
8900 8002 }
@@ -8931,10 +8033,9 @@
8931 8033 width: 100%;
8932 8034 }
8933 8035 }
8934 8036
8935 -.frm-admin-page-styles #frm-publishing #save_menu_header,
8936 -.frm-admin-page-styles2 #frm-publishing #save_menu_header {
8037 +.frm-admin-page-styles #frm-publishing #save_menu_header {
8937 8038 display: inline-block;
8938 8039 }
8939 8040
8940 8041 /* Change the order of subfields of the Name field in the backend */
@@ -8941,304 +8042,13 @@
8941 8042 .edit_form_item .frm_combo_inputs_container[data-name-layout="last_first"] .frm_form_subfield-first {
8942 8043 order: 2;
8943 8044 }
8944 8045
8945 -.frm-video-wrapper iframe {
8946 - width: 100%;
8947 - max-width: 843px;
8948 - border-radius: var(--border-radius);
8949 -}
8950 -
8951 -#frm_field_group_popup {
8952 - position: absolute;
8953 - top: 0;
8954 - right: 0;
8955 - width: 366px;
8956 - max-height: 231px;
8957 - border-radius: 8px;
8958 - background: #fff;
8959 - box-shadow: 0px 20px 48px rgba(40, 47, 54, 0.15);
8960 - z-index: 3;
8961 - box-sizing: border-box;
8962 - padding: 24px 0;
8963 - text-align: left;
8964 -}
8965 -
8966 -.rtl #frm_field_group_popup {
8967 - text-align: right;
8968 -}
8969 -
8970 -.frm-merge-fields-into-row #frm_field_group_popup {
8971 - top: unset;
8972 - bottom: 50px;
8973 - height: 196px;
8974 -}
8975 -
8976 -#frm_field_group_popup > hr {
8977 - margin: 12px 0;
8978 -}
8979 -
8980 -#frm_field_group_popup .frm-cancel-custom-field-group-layout,
8981 -#frm_field_group_popup .frm-save-custom-field-group-layout {
8982 - padding: 4px 18px;
8983 -}
8984 -
8985 -#frm_field_group_popup .frm-cancel-custom-field-group-layout:hover {
8986 - border-color: var(--primary-500) !important;
8987 - color: var(--primary-500);
8988 - background-color: transparent !important;
8989 -}
8990 -
8991 -.frm-merge-fields-into-row #frm_field_group_popup .frm-break-field-group {
8992 - display: none;
8993 -}
8994 -
8995 -.frm-merge-fields-into-row > a {
8996 - color: rgba(40, 47, 54, 0.85);
8997 - position: relative;
8998 - top: 2px;
8999 -}
9000 -
9001 -.frm-row-layout-title {
9002 - font-weight: 600;
9003 - font-size: 11px;
9004 - line-height: 15px;
9005 - text-transform: uppercase;
9006 - color: rgba(40, 47, 54, 0.45);
9007 - margin-bottom: 27px;
9008 -}
9009 -
9010 -.frm-row-layout-option {
9011 - background: #F6F7FB;
9012 - box-sizing: border-box;
9013 - border-radius: 2px;
9014 - padding: 15px 10px;
9015 -}
9016 -
9017 -#frm_field_group_popup .frm-row-layout-option .frm_grid_container {
9018 - grid-gap: 0 5%;
9019 - grid-template-columns: repeat(12, auto);
9020 -}
9021 -
9022 -#frm_field_group_popup .frm-row-layout-option {
9023 - cursor: pointer;
9024 - border: 2px solid transparent;
9025 -}
9026 -
9027 -#frm_field_group_popup .frm-row-layout-option.frm-active-row-layout,
9028 -#frm_field_group_popup .frm-row-layout-option:hover {
9029 - border-color: var(--primary-500);
9030 -}
9031 -
9032 -.frm-custom-field-group-layout,
9033 -.frm-break-field-group {
9034 - padding: 4px 24px;
9035 - cursor: pointer;
9036 - font-size: var(--text-sm);
9037 - line-height: 19px;
9038 - color: rgba(72, 78, 84, 1);
9039 -}
9040 -
9041 -.frm-custom-field-group-layout:hover,
9042 -.frm-break-field-group:hover {
9043 - background-color: #f5f5f5f5;
9044 -}
9045 -
9046 -.frm-custom-field-group-layout svg,
9047 -.frm-break-field-group svg {
9048 - margin-right: 5px;
9049 -}
9050 -
9051 -#frm_field_multiselect_popup {
9052 - background: white;
9053 - height: 48px;
9054 - position: fixed;
9055 - border-radius: 4px;
9056 - box-shadow: 0px 8px 24px rgba(40, 47, 54, 0.15);
9057 - color: rgba(40, 47, 54, 0.85);
9058 - font-size: 13px;
9059 - right: 30px;
9060 - bottom: 10px;
9061 -}
9062 -
9063 -#frm_field_multiselect_popup > div {
9064 - display: inline-block;
9065 - line-height: 48px;
9066 - vertical-align: top;
9067 -}
9068 -
9069 -#frm_field_multiselect_popup.frm-unmergable > .frm-merge-fields-into-row,
9070 -#frm_field_multiselect_popup.frm-unmergable > .frm-multiselect-popup-separator {
9071 - display: none;
9072 -}
9073 -
9074 -#frm_field_multiselect_popup > div:not(.frm-multiselect-popup-separator) {
8046 +.frm-video-wrapper {
9075 8047 padding: 0 20px;
9076 - cursor: pointer;
9077 8048 }
9078 8049
9079 -#frm_field_multiselect_popup > div:not(.frm-multiselect-popup-separator):hover {
9080 - background: #f5f5f5f5;
9081 -}
9082 -
9083 -.frm-builder-popup-heading {
9084 - font-weight: 600;
9085 - font-size: 11px;
9086 - line-height: 15px;
9087 - text-transform: uppercase;
9088 - color: rgba(40, 47, 54, 0.45);
9089 - margin-bottom: 7px;
9090 -}
9091 -
9092 -.frm-builder-popup-subheading {
9093 - font-size: 12px;
9094 - line-height: 16px;
9095 - color: rgba(40, 47, 54, 0.45);
9096 -}
9097 -
9098 -#frm_field_group_popup input[type="text"] {
9099 - height: 30px;
9100 - border-radius: 3px;
9101 - font-size: 14px;
9102 - padding: 8px;
9103 - color: rgba(84, 95, 110, 1);
9104 - border-color: rgba(40, 47, 54, 0.2);
9105 -}
9106 -
9107 -.frm-multiselect-popup-separator {
9108 - height: 36px;
9109 - width: 1px;
9110 - position: relative;
9111 - top: 6px;
9112 - background: #C4C4C4;
9113 -}
9114 -
9115 -.frm-sortable-helper,
9116 -.frm-multiselect-key-is-down li.form-field:not(.edit_field_type_divider) {
9117 - pointer-events: none;
9118 -}
9119 -
9120 -.frm-sortable-helper {
9121 - /* Make sure the item being dragged appears above other form builder fields */
9122 - z-index: 99;
9123 -}
9124 -
9125 -#frm_banner {
8050 +.frm-video-wrapper iframe {
9126 8051 width: 100%;
9127 - color: #fff;
9128 - background: var(--primary-500);
9129 - height: 40px;
9130 - line-height: 40px;
9131 - text-align: center;
9132 - position: relative;
8052 + max-width: 843px;
8053 + border-radius: 10px;
9133 8054 }
9134 -
9135 -.frm-banner-emoji {
9136 - font-size: 19px;
9137 -}
9138 -
9139 -.frm-banner-emoji,
9140 -.frm-banner-title {
9141 - margin-right: 5px;
9142 - vertical-align: top;
9143 -}
9144 -
9145 -.frm-banner-cta a {
9146 - text-decoration: underline !important;
9147 -}
9148 -
9149 -.frm-banner-dismiss {
9150 - cursor: pointer;
9151 - position: absolute;
9152 - right: 10px;
9153 - top: 50%;
9154 - transform: translateY( -50% );
9155 -}
9156 -
9157 -.frm-banner-dismiss .frmsvg {
9158 - vertical-align: top;
9159 -}
9160 -
9161 -.frm-ready-made-solution:not(.frm-search-result) {
9162 - display: none !important;
9163 -}
9164 -
9165 -#frm_new_form_modal .frm-ready-made-solution {
9166 - padding: var(--gap-xs) !important;
9167 - margin: var(--gap-xs) 0 var(--gap-sm);
9168 - display: flex;
9169 - gap: var(--gap-sm);
9170 - position: relative;
9171 - overflow: visible !important;
9172 -}
9173 -
9174 -#frm_new_form_modal .frm-ready-made-solution:after {
9175 - width: 100%;
9176 - height: 1px;
9177 - background: var(--grey-300);
9178 - content: '';
9179 - position: absolute;
9180 - bottom: -10px;
9181 - left: 0;
9182 -}
9183 -
9184 -#frm_new_form_modal .frm-ready-made-solution.frm-search-result:last-of-type::after {
9185 - content: none;
9186 -}
9187 -
9188 -#frm_new_form_modal .frm-solution-details {
9189 - flex: 1;
9190 - display: flex;
9191 - gap: var(--gap-2xs);
9192 - flex-direction: column;
9193 -}
9194 -
9195 -#frm_new_form_modal .frm-ready-made-solution > div:first-child {
9196 - width: 30%;
9197 - text-align: center;
9198 -}
9199 -
9200 -.frm-ready-made-solution h3 ~ a {
9201 - color: var(--primary-500);
9202 -}
9203 -
9204 -.frm-ready-made-solution img {
9205 - max-width: 100%;
9206 - display: block;
9207 - box-shadow: var(--box-shadow-lg);
9208 -}
9209 -
9210 -/* On Submit action */
9211 -.frm_single_on_submit_settings .frm_form_field {
9212 - margin: 8px 0;
9213 -}
9214 -
9215 -.frm_on_submit_type_setting {
9216 - padding: 8px 0;
9217 -}
9218 -
9219 -.frm_on_submit_type label {
9220 - display: flex;
9221 - border: 1px solid var(--grey-border);
9222 - border-radius: var(--small-radius);
9223 - gap: 16px;
9224 - padding: 16px;
9225 - align-items: center;
9226 - justify-content: center;
9227 -}
9228 -
9229 -.frm_on_submit_type input {
9230 - opacity: 0 !important;
9231 - position: absolute;
9232 - z-index: -1;
9233 -}
9234 -
9235 -.frm_on_submit_type input[type="radio"]:checked + label {
9236 - border-color: var(--primary-color);
9237 - box-shadow: 0 0 0 1px var(--primary-color);
9238 -}
9239 -
9240 -#form_settings_page .frm_on_submit_type label:hover,
9241 -.frm_on_submit_type input[type="radio"]:checked + label svg {
9242 - color: var(--primary-color);
9243 -}
9244 -/* End On Submit action */