PluginProbe
Formidable Forms – WordPress Form Builder for Contact Forms, Calculators, Quizzes & More / 5.0
Formidable Forms – WordPress Form Builder for Contact Forms, Calculators, Quizzes & More v5.0
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 +1543 -2347 6.3.15.0 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,44 +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 86 .post-php.post-type-frm_display #screen-meta-links,
158 -.frm-white-body #wpfooter {
87 +.frm-full-screen #wpfooter {
159 88 display: none;
160 89 }
161 90
162 -.frm-white-body #screen-meta-links {
163 - position: fixed;
164 - bottom: 0;
165 - 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);
166 97 }
167 98
168 -.frm-full-screen #screen-meta-links .screen-meta-toggle {
169 - right: 55px;
170 -}
171 -
172 99 .frm-white-body #screen-meta-links .show-settings {
173 - border-radius: var(--small-radius) var(--small-radius) 0 0;
174 - border: 1px solid var(--grey-300);
175 - border-bottom: none;
100 + box-shadow: none;
176 101 }
177 102
178 -.frm-white-body.frm-lite #screen-meta-links .screen-meta-toggle {
179 - right: 125px; /* Don't cover the lite upgrade button */
180 -}
181 -
182 103 .frm-white-body #screen-meta {
183 104 margin: 0;
184 105 }
185 106
@@ -187,9 +108,9 @@
187 108 color: var(--grey);
188 109 }
189 110
190 111 .frm-white-body .columns-2 {
191 - border-bottom: 1px solid var(--grey-300);
112 + border-bottom: 1px solid var(--grey-border);
192 113 }
193 114
194 115 .frm-full-screen .columns-2 {
195 116 border: none;
@@ -219,13 +140,8 @@
219 140 .frm_wrap .tablenav {
220 141 margin-bottom: 10px;
221 142 }
222 143
223 -.frm-white-body .tablenav .actions select,
224 -.wp-admin .frm_wrap .tablenav select {
225 - margin-right: var(--gap-xs);
226 -}
227 -
228 144 .tablenav .actions .button {
229 145 margin-top: 1px;
230 146 }
231 147
@@ -241,17 +157,17 @@
241 157 background: #fff;
242 158 }
243 159
244 160 .frm-white-body table.widefat th {
245 - font-size: var(--text-md);
161 + font-size: 16px;
246 162 }
247 163
248 164 .frm-white-body table.widefat th a {
249 - color: var(--grey-700);
165 + color: var(--dark-grey);
250 166 }
251 167
252 168 .frm-white-body table.widefat strong a {
253 - color: var(--primary-700);
169 + color: var(--primary-hover);
254 170 }
255 171
256 172 .frm-scroll-box {
257 173 clear: both;
@@ -256,9 +172,9 @@
256 172 .frm-scroll-box {
257 173 clear: both;
258 174 overflow: auto;
259 175 max-height: 405px;
260 - border: 1px solid var(--grey-300);
176 + border: 1px solid var(--grey-border);
261 177 border-radius: var(--small-radius);
262 178 }
263 179
264 180 .frm_form_field.frm_scroll_box .frm_opt_container {
@@ -263,9 +179,9 @@
263 179
264 180 .frm_form_field.frm_scroll_box .frm_opt_container {
265 181 height: 100px;
266 182 overflow: auto;
267 - border: 1px solid var(--grey-300);
183 + border: 1px solid var(--grey-border);
268 184 }
269 185
270 186 .frm-short-list {
271 187 overflow: auto;
@@ -272,9 +188,9 @@
272 188 max-height: 190px;
273 189 }
274 190
275 191 .frm-white-body table.frm-border td {
276 - font-size: var(--text-sm);
192 + font-size: 14px;
277 193 }
278 194
279 195 .frm-white-body .striped > tbody > :nth-child(odd) {
280 196 background-color: #fff;
@@ -288,149 +204,56 @@
288 204 float: right;
289 205 }
290 206
291 207 #frm_top_bar {
292 - display: flex;
293 - gap: var(--gap-sm);
208 + display: block;
294 209 width: 100%;
295 - height: 72px;
210 + max-height: 100px;
211 + padding: 25px 40px 25px;
296 212 margin: 0;
297 213 box-sizing: border-box;
298 214 text-align: center;
299 - padding: 0 var(--gap-md);
300 215 }
301 216
302 -#frm_top_bar > .frm-full-close:last-child,
303 -#frm_top_bar > #frm-publishing:last-child {
304 - margin-left: auto;
305 -}
306 -
307 -#frm_top_bar {
308 - border-bottom: 1px solid var(--grey-300);
309 - 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;
310 222 overflow: visible;
311 223 }
312 224
313 -.frm-white-body h1,
314 -.frm-white-body h2,
315 -.frm-white-body h3,
316 -.frm-white-body h4 {
317 - color: var(--grey-900);
318 - font-weight: 400;
319 - line-height: var(--leading) !important;
225 +.frm-full-screen #frm_top_bar {
226 + padding: 0 15px !important;
320 227 }
321 228
322 -.frm-white-body .wrap h1,
323 -.frm-white-body h1 {
324 - font-size: var(--text-xl);
325 -}
326 -
327 -.frm-white-body .wrap h2,
328 -.frm-white-body h2 {
329 - font-size: var(--text-lg);
330 -}
331 -
332 -.frm-white-body .wrap h3,
333 -.frm-white-body h3 {
334 - font-size: var(--text-md);
335 -}
336 -
337 -.frm-white-body .wrap h4,
338 -.frm-white-body h4 {
339 - font-size: var(--text-sm);
340 - font-weight: 500;
341 -}
342 -
343 -/* Override CSS in Views plugin. */
344 -.frm-views-editor-body .frm_page_container #frm_top_bar h1 {
345 - padding: 0 !important;
346 - color: var(--grey-900);
347 - font-size: var(--text-xl) !important;
348 -}
349 -
350 -.post-type-frm_display .frm_top_left {
351 - padding-bottom: 0 !important;
352 -}
353 -
354 -.frm-new-table-view-option.frm-selected-table-view-option {
355 - border-radius: var(--small-radius);
356 - background: var(--primary-25);
357 -}
358 -
359 -.frm-views-editor-body #frm_adv_info .tabs-panel { /* Views sidebar */
360 - padding-left: 4px;
361 - padding-right: 4px;
362 -}
363 -
364 -#frm_edit_box_content_modal .frm_modal_footer {
365 - padding-top: var(--gap-sm);
366 - border-top: 1px solid var(--grey-300);
367 -}
368 -
369 -#frm_edit_box_content_modal .frm_modal_footer > div {
370 - display: flex;
371 - justify-content: space-between;
372 -}
373 -
374 -#frm_edit_box_content_modal #frm_modal_box_select_area,
375 -#frm_edit_box_content_modal #frm_box_content_wysiwyg_wrapper,
376 -#frm_edit_box_content_modal .frm_modal_content {
377 - max-height: calc(100vh - 176px) !important;
378 -}
379 -
380 -#frm_edit_box_content_modal #frm_modal_box_select_area {
381 - height: calc(100vh - 176px) !important;
382 -}
383 -
384 -#frm_edit_box_content_modal #wp-content-editor-tools {
385 - padding-top: 0;
386 -}
387 -
388 -#frm_edit_box_content_modal.frm-modal .postbox .frm-modal-title + div:last-child {
389 - right: var(--gap-md);
390 -}
391 -
392 -.frm_code_list.frm-full-hover .frm-dropdown-view a {
393 - flex-direction: row-reverse; /* Switch in the HTML */
394 -}
395 -
396 -#frm_view_editor_left.frm-right-panel .accordion-section-title:before {
397 - content: '' !important;
398 - margin: 0;
399 -}
400 -/** End Temporary View CSS */
401 -
402 229 .frm-upgrade-bar {
403 - background: rgba(188, 224, 253, 0.23);
230 + text-align: center;
231 + background: var(--sidebar-color);
404 232 border-bottom: 1px solid var(--sidebar-hover);
405 - padding: 3px 0 3px 40px;
233 + padding: 3px 0;
406 234 font-size: 95%;
407 235 }
408 236
409 237 .frm-upgrade-bar span {
410 - opacity: .9;
238 + opacity: .5;
411 239 }
412 240
413 241 a h1 .frmsvg {
414 - color: var(--grey-400);
415 - vertical-align: middle;
416 - min-width: var(--text-sm);
242 + color: var(--medium-grey);
243 + vertical-align: baseline;
417 244 }
418 245
419 -a .frmsvg {
420 - color: currentColor;
421 -}
422 -
423 246 .frm_wrap .view-switch a.current:before,
424 -.frm-white-body a,
425 -.frm_wrap a,
426 -.frm_wrap a i {
247 +a .frmsvg,
248 +.frm_wrap a i,
249 +.frm_wrap a {
427 250 color: var(--primary-color);
428 251 }
429 252
430 253 .frm_wrap a:active,
431 254 .frm_wrap a:hover {
432 - color: var(--primary-700);
255 + color: var(--primary-hover);
433 256 box-shadow: none;
434 257 }
435 258
436 259 .post-type-frm_display a:focus,
@@ -444,30 +267,34 @@
444 267 white-space: nowrap;
445 268 max-width: 250px;
446 269 overflow: hidden;
447 270 text-overflow: ellipsis;
448 - align-self: center;
449 271 }
450 272
451 -.post-type-frm_display .frm_top_left,
452 273 .frm_top_left.frm_top_wide {
453 274 max-width: 100%;
454 275 }
455 276
456 -.post-type-frm_display .frm_nav_bar .frm-header-logo,
457 -.frm_nav_bar .frm-header-logo {
458 - 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;
459 281 }
460 282
461 -#frm_top_bar .frm_form_nav {
462 - 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;
463 287 }
464 288
289 +.frm_page_container .frm-header-logo {
290 + margin-bottom: 6px;
291 +}
292 +
465 293 ul.frm_form_nav {
466 294 margin: 0 auto;
467 - padding-top: 18px;
295 + padding-top: 19px;
468 296 display: block;
469 - min-width: 240px;
470 297 }
471 298
472 299 .nav-tab-wrapper.frm_form_nav {
473 300 padding: 0 25px;
@@ -473,9 +300,9 @@
473 300 padding: 0 25px;
474 301 }
475 302
476 303 ul.frm_form_nav > li {
477 - margin: 0 min(3.5%, 32px) 0 0;
304 + margin: 0 3.5% 0 0;
478 305 display: inline-block;
479 306 }
480 307
481 308 .post-type-frm_display #advanced-sortables h2.hndle,
@@ -485,12 +312,13 @@
485 312 .frm_form_nav > li > a {
486 313 font-size: 1.3em;
487 314 text-decoration: none;
488 315 display: block;
489 - padding: 6px 2px 4px;
316 + padding: 5px 2px 15px;
490 317 font-weight: 500;
491 - color: var(--grey-700);
492 - border-bottom: 2px solid transparent;
318 + color: var(--dark-grey);
319 + border-bottom: 3px solid transparent;
320 + letter-spacing: 1px;
493 321 }
494 322
495 323 .post-type-frm_display.js .postbox .handlediv .toggle-indicator:before {
496 324 margin-top: 10px;
@@ -504,16 +332,10 @@
504 332 -webkit-box-shadow: none;
505 333 box-shadow: none;
506 334 }
507 335
508 -.frm_form_nav > li > a {
509 - font-size: var(--text-md);
510 - font-weight: 400;
511 - color: var(--grey-500);
512 -}
513 -
514 336 .frm_form_nav > li > a:hover {
515 - border-color: var(--primary-700);
337 + border-color: var(--primary-hover);
516 338 }
517 339
518 340 .frm_form_nav .frm-dropdown-menu a:hover {
519 341 background-color: #eaf2fa;
@@ -521,27 +343,24 @@
521 343
522 344 .post-type-frm_display .frm_form_nav .nav-tab-active,
523 345 .post-type-frm_display .frm_form_nav .nav-tab-active:hover,
524 346 .frm_form_nav > li a.current_page {
525 - color: var(--primary-500);
526 - border-color: var(--primary-500);
347 + color: var(--primary-color);
348 + border-color: var(--primary-color);
527 349 background: transparent;
528 - opacity: 1;
529 - font-weight: 600;
530 350 }
531 351
532 352 .frm-full-close {
533 353 display: none;
534 - padding-left: var(--gap-md);
535 - border: 0 solid var(--grey-300);
536 - 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);
537 357 height: 100%;
538 358 box-sizing: border-box;
539 359 }
540 360
541 361 .frm-full-screen .frm-full-close {
542 - display: flex;
543 - align-items: center;
362 + display: block;
544 363 }
545 364
546 365 .frm-full-close a {
547 366 display: block;
@@ -550,49 +369,57 @@
550 369 .frm-full-close .frmsvg {
551 370 font-size: 20px;
552 371 width: 20px;
553 372 height: 20px;
554 - color: var(--grey-500);
373 + padding: 5px;
374 + color: var(--grey);
555 375 }
556 376
557 -#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;
558 380 font-weight: 400;
559 381 padding: 0;
560 382 margin: 0;
561 - color: var(--grey-900);
562 - display: inline-flex;
563 - gap: var(--gap-sm);
564 - 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;
565 393 text-align: left;
566 394 width: 200px;
395 + line-height: 1.16;
567 396 }
568 397
569 -#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;
570 402 max-width: 175px;
571 403 text-overflow: ellipsis;
572 404 overflow: hidden;
573 405 white-space: nowrap;
574 406 display: inline-block;
575 - vertical-align: bottom;
576 407 }
577 408
578 -#frm_top_bar ul.frm_form_nav,
579 -#frm_top_bar .frm-header-logo,
580 -#frm_top_bar #frm_bs_dropdown {
581 - align-self: center;
582 - margin-top: 0;
583 - margin-bottom: 0;
584 - padding-top: 0;
409 +#frm_top_bar h1,
410 +#frm_top_bar h2 {
411 + color: var(--medium-grey);
585 412 }
586 413
587 -#frm_top_bar .frm-header-logo {
588 - display: flex; /* Get rid of extra padding below logo */
414 +#frm_top_bar #frm_bs_dropdown {
415 + float: left;
589 416 }
590 417
591 418 #frm_top_bar h2 {
592 419 float: left;
593 - margin: 0 0 0 var(--gap-sm);
594 - padding: 2px 0 2px var(--gap-sm);
420 + margin: 0 0 0 15px;
421 + padding: 2px 0 2px 15px;
595 422 font-weight: normal;
596 423 border-left: 2px solid var(--grey);
597 424 }
598 425
@@ -600,19 +427,27 @@
600 427 margin-top: 0;
601 428 }
602 429
603 430 #frm-publishing {
431 + float: right;
432 + margin-top: 15px;
604 433 min-width: 225px;
605 - align-self: center;
606 - align-items: center;
607 - display: flex;
608 - flex-direction: row-reverse;
609 - gap: 0 var(--gap-sm);
610 - flex-wrap: wrap;
434 + max-width: 325px;
435 + min-height: 10px;
611 436 }
612 437
438 +#frm-publishing #publishing-action,
439 +#frm-publishing #preview-action,
440 +#frm-preview-action,
441 +#frm-publishing > input[type=submit],
442 +#frm-publishing > .button,
443 +#frm-publishing > button {
444 + float: right;
445 + margin: 0 10px 0 0;
446 +}
447 +
613 448 .frm_wrap .postbox {
614 - border-color: var(--grey-300);
449 + border-color: var(--grey-border);
615 450 border-radius: 6px;
616 451 box-shadow: none;
617 452 }
618 453
@@ -620,9 +455,9 @@
620 455 cursor: default;
621 456 padding: 10px 20px;
622 457 margin: 0;
623 458 line-height: 1.4em;
624 - border-color: var(--grey-300);
459 + border-color: var(--grey-border);
625 460 }
626 461
627 462 .frm-pre-hndle {
628 463 font-size: 15px;
@@ -633,12 +468,8 @@
633 468 .frm-empty-row {
634 469 display: none;
635 470 }
636 471
637 -.frm-child-row {
638 - box-shadow: 5px 0px 0px 0px inset var(--sidebar-hover);
639 -}
640 -
641 472 .frm_animate_bg {
642 473 transition: background 200ms linear, color 200ms linear;
643 474 }
644 475
@@ -646,48 +477,16 @@
646 477 clear: both;
647 478 margin: 0;
648 479 }
649 480
650 -.frm_wrap .subsubsub a {
651 - line-height: var(--leading);
652 - font-size: var(--text-sm);
653 -}
654 -
655 -.frm-admin-page-styles .frm_page_container,
656 -.frm_wrap .frm_page_container { /* Use .frm_wrap to avoid messing up Views editor layout */
481 +.frm_wrap .frm_page_container {
657 482 height: calc( 100vh - 32px );
658 483 display: flex;
659 484 flex-direction: column;
660 485 overflow: hidden;
661 486 padding-top: 0;
662 - position: fixed;
663 - top: 32px;
664 - bottom: 0;
665 - left: 0;
666 - right: 0;
667 487 }
668 488
669 -.frm-admin-page-translate .frm_wrap .frm_page_container, .frm-admin-page-update_translations .frm_wrap .frm_page_container {
670 - position: static;
671 -}
672 -
673 -.auto-fold.frm-admin-page-styles .frm_page_container,
674 -.auto-fold .frm_wrap .frm_page_container {
675 - left: 160px;
676 -}
677 -
678 -.folded.frm-admin-page-styles .frm_page_container,
679 -.folded .frm_wrap .frm_page_container {
680 - left: 38px;
681 -}
682 -
683 -.frm-full-screen.frm-admin-page-styles .frm_page_container,
684 -.frm-full-screen .frm_wrap .frm_page_container {
685 - height: 100vh;
686 - top: 0;
687 - left: 0;
688 -}
689 -
690 489 .frm-full-screen.frm-admin-page-entries .frm_page_container,
691 490 .frm-new-entry .frm_page_container,
692 491 .frm-admin-page-reports .frm_page_container,
693 492 .frm_list_entry_page .frm_page_container {
@@ -698,22 +497,16 @@
698 497 .frm-new-entry .columns-2 {
699 498 border: none;
700 499 }
701 500
702 -.frm-white-body #frm_top_bar,
703 -.frm-white-body .columns-2 {
501 +.frm_wrap #frm_top_bar,
502 +.frm_wrap .columns-2 {
704 503 flex: 0 0 auto;
705 504 }
706 505
707 -.columns-2 .frm-right-panel + div {
708 - padding-bottom: var(--gap-md);
709 - border-left: 1px solid var(--sidebar-hover);
710 -}
711 -
712 -.columns-2 .frm-right-panel + div,
713 506 .frm_wrap #post-body-content {
714 507 padding-bottom: 0;
715 - padding-top: var(--gap-sm);
508 + padding-top: 20px;
716 509 margin-bottom: 0;
717 510 background: #fff;
718 511 width: auto;
719 512 float: none;
@@ -719,17 +512,16 @@
719 512 float: none;
720 513 flex: 2;
721 514 }
722 515
723 -.frm-white-body .columns-2 {
516 +.frm_wrap .columns-2 {
724 517 flex: 1;
725 518 display: flex;
726 519 overflow: hidden;
727 520 }
728 521
729 -.frm-white-body .columns-2 > div {
522 +.frm_wrap .columns-2 > div {
730 523 overflow-y: auto;
731 - box-sizing: border-box;
732 524 }
733 525
734 526 .frm_wrap .columns-2 .frm-right-panel,
735 527 .frm-right-panel {
@@ -776,9 +568,9 @@
776 568
777 569 .frm-default-switcher a.current,
778 570 .frm-default-switcher a.current .frmsvg,
779 571 .frm-default-switcher a.current i {
780 - color: var( --primary-500);
572 + color: var( --primary-color);
781 573 }
782 574
783 575 #new_fields,
784 576 .frm-has-modal,
@@ -786,15 +578,41 @@
786 578 position: relative;
787 579 }
788 580
789 581 .frm-inline-modal.postbox {
582 + border-color: var(--blue-border);
790 583 background: #fff;
791 584 }
792 585
586 +#frm_upgrade_modal .dismiss .frmsvg,
587 +.frm-inline-modal .frmsvg,
588 +#frm-bulk-modal .frmsvg,
589 +.frm_has_shortcodes > .frmsvg,
590 +#frm_upgrade_modal .dismiss i,
591 +.frm-inline-modal i,
592 +#frm-bulk-modal i,
593 +.frm_has_shortcodes > i {
594 + top: 37px;
595 + right: 5px;
596 + margin-top: -9px;
597 + padding: 5px;
598 + font-size: 10px;
599 + height: 10px;
600 + width: 10px;
601 + line-height: 9px;
602 + font-weight: bold;
603 +}
604 +
605 +#frm_upgrade_modal .dismiss .frmsvg,
606 +.frm-inline-modal .frmsvg,
607 +#frm-bulk-modal .frmsvg,
793 608 .frm_has_shortcodes .frmsvg,
794 -.frm_has_shortcodes i:not([class*=mce-]) {
609 +#frm_upgrade_modal .dismiss i,
610 +.frm-inline-modal i,
611 +#frm-bulk-modal i,
612 +.frm_has_shortcodes i {
795 613 position: absolute;
796 - color: var(--primary-500);
614 + color: var(--primary-color);
797 615 border-radius: 50%;
798 616 border: 1px solid transparent;
799 617 z-index: 100;
800 618 text-align: center;
@@ -799,8 +617,51 @@
799 617 z-index: 100;
800 618 text-align: center;
801 619 }
802 620
621 +#frm_info_modal .dismiss .frmsvg,
622 +#frm_confirm_modal .dismiss .frmsvg,
623 +#frm_upgrade_modal .dismiss .frmsvg,
624 +#frm_info_modal .dismiss i,
625 +#frm_confirm_modal .dismiss i,
626 +#frm_upgrade_modal .dismiss i {
627 + top: 7px;
628 + right: 7px;
629 +}
630 +
631 +#frm-bulk-modal .frmsvg,
632 +#frm-bulk-modal i {
633 + top: 15px;
634 + right: 7px;
635 +}
636 +
637 +.frm-inline-modal .frmsvg,
638 +.frm-inline-modal i {
639 + top: 18px;
640 + right: 7px;
641 + font-size: 11px;
642 + height: 11px;
643 + width: 11px;
644 +}
645 +
646 +#frm_upgrade_modal .dismiss:hover .frmsvg,
647 +.frm-inline-modal .dismiss:hover .frmsvg,
648 +#frm-bulk-modal .dismiss:hover .frmsvg,
649 +#frm_upgrade_modal .dismiss i:hover,
650 +.frm-inline-modal i:hover,
651 +#frm-bulk-modal i:hover {
652 + background: var(--sidebar-color);
653 +}
654 +
655 +#frm_upgrade_modal .dismiss .frmsvg,
656 +.frm-inline-modal .dismiss .frmsvg,
657 +#frm-bulk-modal .dismiss .frmsvg,
658 +#frm_upgrade_modal .dismiss .frm_close_icon,
659 +.frm-inline-modal .frm_close_icon,
660 +#frm-bulk-modal .frm_close_icon {
661 + border-color: var(--primary-color);
662 +}
663 +
803 664 .frm_has_shortcodes input,
804 665 .frm_has_shortcodes textarea {
805 666 padding-left: 18px;
806 667 box-sizing: border-box;
@@ -807,11 +668,13 @@
807 668 }
808 669
809 670 #form_settings_page #frm_adv_info {
810 671 display: none;
672 + position: absolute;
811 673 top: 0;
812 - width: 310px;
813 - max-height: 315px;
674 + left: 0;
675 + width: 300px;
676 + max-height: 350px;
814 677 min-height: 200px;
815 678 overflow-y: scroll;
816 679 z-index: 100;
817 680 }
@@ -822,14 +685,10 @@
822 685 width: var(--small-sidebar);
823 686 min-width: var(--small-sidebar);
824 687 }
825 688
826 -#form_global_settings .frm_grid_container {
827 - gap: 0 var(--gap-md);
828 -}
829 -
830 689 .frm-inner-content {
831 - padding: var(--gap-md);
690 + padding: 10px 25px;
832 691 }
833 692
834 693 .post-type-frm_display #poststuff {
835 694 padding: 0 0 10px 40px;
@@ -895,17 +754,18 @@
895 754 }
896 755
897 756 .frm-right-panel .frm_field_list #frm-insert-fields {
898 757 max-height: none;
899 - font-size: var(--text-sm);
758 + font-size: 14px;
900 759 padding: 0;
901 760 }
902 761
903 -.frm-nav-tabs {
762 +.frm-nav-tabs,
763 +#frm-bulk-modal h2 {
904 764 margin: 10px 0 20px;
905 - padding: 0 var(--gap-sm);
765 + padding: 0 15px;
906 766 display: block;
907 - border-bottom: 1px solid var(--grey-300);
767 + border-bottom: 2px solid var(--sidebar-hover);
908 768 }
909 769
910 770 #frm-nav-tabs {
911 771 position: -webkit-sticky;
@@ -916,20 +776,11 @@
916 776 margin-top: 0;
917 777 padding-top: 5px;
918 778 }
919 779
920 -.frm_form_settings #frm_adv_info #frm-nav-tabs {
921 - background-color: #fff;
922 - margin: 0 -4px;
923 -}
924 -
925 -.frm_form_settings span.frm-with-right-icon {
926 - display: block;
927 -}
928 -
929 780 .frm-inline-modal .frm-nav-tabs,
930 781 #frm_adv_info .frm-nav-tabs {
931 - margin: 5px 0 0;
782 + margin: 5px 0 10px;
932 783 }
933 784
934 785 #frm_adv_info .frm-nav-tabs.frm-compact-nav {
935 786 padding-right: 0;
@@ -935,25 +786,23 @@
935 786 padding-right: 0;
936 787 padding-left: 20px;
937 788 }
938 789
790 +#frm-bulk-modal h2,
939 791 .frm-nav-tabs li {
940 792 display: inline-block;
793 + font-size: 15px;
941 794 margin: 0;
942 795 }
943 796
797 +#frm-bulk-modal h2,
944 798 .frm-nav-tabs a {
945 - color: var(--grey-700);
799 + color: var(--grey);
946 800 padding: 10px 1px;
947 801 margin: 0 9px;
948 802 border-bottom: 2px solid transparent;
949 803 }
950 804
951 -.frm_form_settings #frm_adv_info .frm-nav-tabs a {
952 - padding: 5px 1px;
953 - color: var(--grey-500);
954 -}
955 -
956 805 .frm-nav-tabs.frm-compact-nav a {
957 806 margin: 0 5px;
958 807 }
959 808
@@ -958,41 +807,36 @@
958 807 }
959 808
960 809 .frm-nav-tabs a {
961 810 display: block;
962 - opacity: .9;
963 811 }
964 812
965 813 #frm_adv_info .frm-nav-tabs a {
966 - color: var(--grey-700);
814 + color: var(--dark-grey);
967 815 }
968 816
817 +#frm-bulk-modal h2,
969 818 .frm-nav-tabs a:hover,
970 819 .frm-nav-tabs .frm-tabs a {
971 - color: var(--primary-500) !important;
972 - border-color: var(--primary-500);
820 + color: var(--primary-color) !important;
821 + border-color: var(--primary-color);
973 822 }
974 823
975 -.frm_form_settings #frm_adv_info .frm-nav-tabs .frm-tabs a {
976 - font-weight: 500;
824 +#frm-bulk-modal h3,
825 +#frm-bulk-modal h2 {
826 + font-size: 16px;
827 + margin-left: 20px;
828 + font-weight: 400;
977 829 }
978 830
979 -#frm-bulk-modal .howto,
980 831 #frm-bulk-modal h3 {
981 - font-size: var(--text-sm);
982 - font-weight: 400;
983 - margin: 5px 0 10px;
832 + margin: 5px 20px 10px;
984 833 color: var(--grey);
985 834 }
986 835
987 -#frm-bulk-modal h3 {
988 - margin-left: 20px;
989 -}
990 -
991 -.frm-right-panel a.frm_add_logic_link,
992 836 .frm-right-panel h3 {
993 - color: var(--grey-700);
994 - font-size: var(--text-lg);
837 + color: var(--dark-grey);
838 + font-size: 20px;
995 839 font-weight: 400;
996 840 border-top: 2px solid var(--sidebar-hover);
997 841 margin: 0;
998 842 }
@@ -1002,17 +846,10 @@
1002 846 border-top: none;
1003 847 padding-top: 0 !important;
1004 848 }
1005 849
1006 -.frm-flex-justify,
1007 -.frm-right-panel .frm-single-settings h3 {
1008 - display: flex;
1009 - justify-content: space-between;
1010 - align-items: center;
1011 -}
1012 -
1013 850 .frm-right-panel h3 i {
1014 - color: var(--grey-700);
851 + color: var(--dark-grey);
1015 852 float: right;
1016 853 width: 16px;
1017 854 cursor: pointer;
1018 855 }
@@ -1074,12 +911,8 @@
1074 911 .frm_wrap #frm-categorydiv {
1075 912 border-right: none;
1076 913 }
1077 914
1078 -#frm_adv_info #frm-conditionals {
1079 - padding-top: var(--gap-sm);
1080 -}
1081 -
1082 915 #postbox-container-1 #taxonomy-linkcategory #frm-html-tags {
1083 916 display: none;
1084 917 max-height: none;
1085 918 }
@@ -1087,9 +920,9 @@
1087 920 #postbox-container-1 .frm_field_list #frm-insert-fields .frmbutton.dropdown {
1088 921 position: relative;
1089 922 }
1090 923
1091 -.frm-white-body #footer-upgrade {
924 +.toplevel_page_formidable #footer-upgrade {
1092 925 display: none;
1093 926 }
1094 927
1095 928 .frm_list_entry_page h2 {
@@ -1099,8 +932,13 @@
1099 932 .frm_list_entry_page h2 + .error {
1100 933 clear: both;
1101 934 }
1102 935
936 +#titlediv #title {
937 + line-height: 1.5;
938 + height: auto;
939 +}
940 +
1103 941 .frm_sidebar select {
1104 942 width: 100%;
1105 943 margin-left: 0;
1106 944 margin-right: 0;
@@ -1137,12 +975,14 @@
1137 975
1138 976 /* Buttons */
1139 977
1140 978 .frm_orange_button,
1141 -.frm_reverse_button {
979 +.frm_reverse_button,
980 +.post-type-frm_display .wrap .add-new-h2 {
1142 981 font-size: 12px;
1143 982 border: 1px solid var(--orange);
1144 983 color: var(--orange);
984 + line-height: 1.4;
1145 985 font-weight: 600;
1146 986 padding: 1px 4px;
1147 987 border-radius: 4px;
1148 988 background: transparent;
@@ -1147,11 +987,33 @@
1147 987 border-radius: 4px;
1148 988 background: transparent;
1149 989 }
1150 990
991 +.post-type-frm_display .wrap .add-new-h2 {
992 + margin: 1px 0 0 10px;
993 + text-transform: lowercase;
994 + position: initial;
995 + vertical-align: middle;
996 +}
997 +
998 +h1 .frm-button-secondary,
999 +h1 .frm-button-primary,
1000 +h2 .frm-button-secondary,
1001 +h2 .frm-button-primary {
1002 + font-size: 14px !important;
1003 + font-weight: normal;
1004 + margin: 0 5px !important;
1005 + line-height: 23px !important;
1006 + vertical-align: text-bottom !important;
1007 + height: auto !important;
1008 +}
1009 +
1151 1010 .frm_reverse_button:hover,
1152 1011 .frm_reverse_button:active,
1153 -.frm_reverse_button:focus {
1012 +.frm_reverse_button:focus,
1013 +.post-type-frm_display .wrap .add-new-h2:hover,
1014 +.post-type-frm_display .wrap .add-new-h2:active,
1015 +.post-type-frm_display .wrap .add-new-h2:focus {
1154 1016 color: #fff;
1155 1017 background: var(--orange);
1156 1018 border: 1px solid var(--orange);
1157 1019 }
@@ -1162,108 +1024,42 @@
1162 1024 }
1163 1025
1164 1026 .frm-button-primary,
1165 1027 .wp-core-ui .button-primary.frm-button-primary,
1166 -.wp-core-ui .button.frm-button-primary,
1167 1028 .frm-button-secondary,
1168 1029 .wp-core-ui .button-secondary.frm-button-secondary,
1169 1030 .wp-core-ui .button.frm-button-secondary,
1170 -.frm-white-body .frm-search .button,
1171 -.frm-white-body .search-box .button, /* Views */
1172 -.frm-white-body .tablenav .button,
1173 1031 .frm_orange_button,
1174 1032 .toplevel_page_formidable #frm_upgrade_modal .button-primary,
1033 +#form_global_settings .button-secondary,
1175 1034 .wp-core-ui.frm-white-body .button-primary,
1176 1035 .wp-core-ui.frm-white-body .button-secondary,
1177 1036 .frm-white-body .button-primary,
1178 1037 .frm-white-body .button-secondary,
1179 -#frm-form-button button,
1180 -.frm-preview-buttons button,
1181 -.frm-button-red,
1182 -.frm-button-tertiary {
1038 +.wp-core-ui.frm-white-body .button:not(.button-small),
1039 +.frm-white-body button:not(.wp-switch-editor):not(.dropdown-toggle):not(.media-menu-item):not(.media-modal-close):not(.frm_no_style_button){
1183 1040 text-shadow: none;
1184 1041 box-shadow: none;
1185 1042 border-radius: 30px;
1186 - border: 1px solid var(--primary-500);
1187 - font-size: var(--text-sm);
1043 + border-color: var(--primary-color);
1044 + font-size: 1em;
1188 1045 transition: all .2s ease;
1189 - padding: 7px 16px;
1190 - height: auto;
1046 + padding: 0 15px;
1047 + height: 28px;
1191 1048 min-height: 28px;
1192 1049 outline: none;
1193 - line-height: var(--leading);
1194 - box-sizing: border-box;
1195 - font-weight: 500;
1196 - margin-bottom: 0;
1197 - display: inline-block;
1050 + line-height: 26px;
1198 1051 }
1199 1052
1200 -.frm-button-tertiary {
1201 - border-color: transparent;
1202 - color: var(--primary-500);
1203 -}
1204 -
1205 -.frm-button-red,
1206 -.frm-button-red:focus {
1207 - color: #fff !important;
1208 - --primary-500: var(--error-500);
1209 - --primary-700: var(--error-700);
1210 -}
1211 -
1212 -.frm-white-body h2 .button,
1213 -.post-type-frm_display h2 .frm-button-primary,
1214 -.frm-white-body .tablenav .button,
1215 -.frm-button-primary.frm-button-sm,
1216 -.frm-button-secondary.frm-button-sm,
1217 -.frm-button-tertiary.frm-button-sm,
1218 -.frm-button-red.frm-button-sm {
1219 - padding: 4px 12px !important;
1220 - font-size: var(--text-xs) !important;
1221 -}
1222 -
1223 -.frm_no_style_button {
1224 - background: transparent;
1225 -}
1226 -
1227 -.frm-with-icon {
1228 - display: flex;
1229 - gap: var(--gap-xs);
1230 - align-items: center;
1231 -}
1232 -
1233 -.frm-with-icon svg {
1234 - opacity: .65; /* Get close to grey-500 without overriding hover colors */
1235 -}
1236 -
1237 -.frm-with-icon.button svg {
1238 - height: var(--text-sm);
1239 - width: var(--text-sm);
1240 -}
1241 -
1242 -.frm-with-icon.frm-button-sm svg {
1243 - height: var(--text-xs);
1244 - width: var(--text-xs);
1245 -}
1246 -
1247 -.frm-white-body .button.add_media {
1248 - /* Media buttons above RTE */
1249 - padding-left: 12px !important;
1250 - padding-right: 12px !important;
1251 - font-size: var(--text-xs);
1252 - border-radius: var(--border-radius);
1253 -}
1254 -
1255 1053 .wp-core-ui.frm-white-body #post-query-submit.button,
1256 -.wp-core-ui.frm-white-body .button.tablenav-pages-navspan,
1257 1054 .wp-core-ui.frm-white-body .button.first-page,
1258 1055 .wp-core-ui.frm-white-body .button.prev-page,
1259 1056 .wp-core-ui.frm-white-body .button.next-page,
1260 1057 .wp-core-ui.frm-white-body .button.last-page,
1261 1058 .wp-core-ui.frm-white-body .button.action {
1262 - background-color: transparent;
1263 - border-color: var(--grey-300);
1264 - color: var(--grey-700);
1265 - border-radius: var(--border-radius);
1059 + background-color: var(--lightest-grey);
1060 + border-color: var(--grey-border);
1061 + color: var(--dark-grey);
1266 1062 }
1267 1063
1268 1064 .post-type-frm_display.wp-core-ui .button-primary,
1269 1065 .frm-button-primary,
@@ -1268,16 +1064,16 @@
1268 1064 .post-type-frm_display.wp-core-ui .button-primary,
1269 1065 .frm-button-primary,
1270 1066 .wp-core-ui .button-primary.frm-button-primary,
1271 1067 .frm_single_entry_page .button-primary {
1272 - background-color: var(--primary-500) !important;
1068 + background-color: var(--primary-color) !important;
1273 1069 color: #fff !important;
1274 1070 }
1275 1071
1276 1072 .frm-button-primary.frm_large{
1277 - font-size: var(--text-md) !important;
1073 + font-size: 22px !important;
1278 1074 height: auto !important;
1279 - padding: 9px 18px !important;
1075 + padding: 16px 32px !important;
1280 1076 }
1281 1077
1282 1078 .frm-button-primary i:before {
1283 1079 color: #fff;
@@ -1284,10 +1080,10 @@
1284 1080 }
1285 1081
1286 1082 .wp-core-ui .button-primary.frm-button-primary:hover,
1287 1083 .frm-button-primary:hover {
1288 - background: var(--primary-700) !important;
1289 - border-color: var(--primary-700) !important;
1084 + background: var(--primary-hover) !important;
1085 + border-color: var(--primary-hover) !important;
1290 1086 }
1291 1087
1292 1088 .wp-core-ui .button-primary.frm-button-primary:active {
1293 1089 vertical-align: inherit;
@@ -1292,25 +1088,20 @@
1292 1088 .wp-core-ui .button-primary.frm-button-primary:active {
1293 1089 vertical-align: inherit;
1294 1090 }
1295 1091
1296 -.frm-white-body #search-submit,
1297 1092 #frm-form-button .frm_button_submit,
1298 -.frm-white-body .frm-preview-buttons button,
1299 -.frm-white-body .button:not(.frm-button-primary),
1300 1093 .wp-core-ui.frm-white-body .button-secondary,
1301 1094 .wp-core-ui .button-secondary.frm-button-secondary,
1302 1095 .wp-core-ui .button.frm-button-secondary,
1303 -.frm-white-body .frm-button-secondary,
1304 1096 .frm-button-secondary {
1305 - color: var(--grey-800);
1306 - border-color: var(--grey-300);
1307 - background-color: #fff;
1097 + color: var(--primary-color);
1098 + background-color: transparent;
1308 1099 }
1309 1100
1310 1101 #wp-content-media-buttons button,
1311 1102 #wp-content-media-buttons a.button {
1312 - border-color: var(--grey-300);
1103 + border-color: var(--grey-border);
1313 1104 }
1314 1105
1315 1106 .frm_orange_button {
1316 1107 border-color: #da791d !important;
@@ -1317,23 +1108,26 @@
1317 1108 background: var(--orange);
1318 1109 color: #fff;
1319 1110 }
1320 1111
1321 -.frm-white-body .button:not(.frm-button-primary):focus,
1322 -.frm-white-body .button:not(.frm-button-primary):active,
1323 -.frm-white-body .frm-button-secondary:hover,
1324 1112 .wp-core-ui.frm-white-body .frm-button-secondary:hover,
1325 1113 .wp-core-ui.frm-white-body .button-secondary:hover,
1326 1114 .wp-core-ui.frm-white-body .button-secondary:focus,
1327 -.wp-core-ui.frm-white-body .tablenav .button:hover,
1328 1115 .frm_wrap .preview > .button:hover {
1329 - border-color: var(--grey-300) !important;
1330 - color: var(--grey-800);
1331 - background: var(--grey-50) !important;
1332 - box-shadow: none !important;
1333 - outline: none !important;
1116 + border-color: var(--primary-hover) !important;
1117 + background: var(--primary-hover) !important;
1118 + color: #fff;
1119 + box-shadow: none;
1334 1120 }
1335 1121
1122 +.frm-with-plus {
1123 + padding-left: 10px !important;
1124 +}
1125 +
1126 +.frm-with-plus .frmsvg {
1127 + margin-right: 5px;
1128 +}
1129 +
1336 1130 .frm-button-primary .frmsvg {
1337 1131 color: #fff;
1338 1132 }
1339 1133
@@ -1340,20 +1134,23 @@
1340 1134 .frm_wrap .preview i {
1341 1135 font-size: inherit;
1342 1136 }
1343 1137
1344 -.frm-white-body .frm-button-primary:focus,
1345 -.frm-white-body .frm-button-primary:active,
1138 +.wp-core-ui.frm-white-body .frm-button-secondary:hover .frmsvg,
1139 +.frm_wrap .preview > .button:hover .frmsvg,
1140 +.wp-core-ui.frm-white-body .frm-button-secondary:hover i,
1141 +.frm_wrap .preview > .button:hover i {
1142 + color: #fff;
1143 +}
1144 +
1346 1145 #frm-addons-page .button-primary:focus,
1347 1146 #form_global_settings .button-primary:focus,
1348 -#frm_upgrade_modal .button:focus {
1349 - border-color: var(--primary-700) !important;
1350 - background-color: var(--primary-700) !important;
1351 - box-shadow: none !important;
1352 - outline: none !important;
1147 +#frm_upgrade_modal .button:focus,
1148 +.frm_wrap .preview > .button:focus {
1149 + border-color: var(--primary-hover) !important;
1150 + outline: none;
1353 1151 }
1354 1152
1355 -.frm_wrap .preview > .button:focus,
1356 1153 .frm_orange_button:hover,
1357 1154 .frm_orange_button:focus,
1358 1155 .toplevel_page_formidable #frm_upgrade_modal .button-primary:hover,
1359 1156 .toplevel_page_formidable #frm_upgrade_modal .button-primary:focus,
@@ -1401,9 +1198,9 @@
1401 1198 }
1402 1199
1403 1200 .frm-review-notice.notice form,
1404 1201 .frm-review-notice.notice p {
1405 - font-size: var(--text-sm);
1202 + font-size: 14px;
1406 1203 max-width: 600px;
1407 1204 margin-left: auto;
1408 1205 margin-right: auto;
1409 1206 }
@@ -1408,14 +1205,17 @@
1408 1205 margin-right: auto;
1409 1206 }
1410 1207
1411 1208 .frm-review-notice a {
1412 - margin: 0 var(--gap-xs) !important;
1209 + margin: 5px;
1413 1210 }
1414 1211
1415 1212 .frm-review-notice .frm-button-primary,
1416 1213 .frm-review-notice .frm-button-secondary {
1417 1214 min-width: 100px;
1215 + display: inline-block;
1216 + text-align: center;
1217 + padding: 2px 10px;
1418 1218 }
1419 1219
1420 1220 .frm-review-notice p > span {
1421 1221 font-size: 13px;
@@ -1422,9 +1222,9 @@
1422 1222 opacity: 0.75;
1423 1223 }
1424 1224
1425 1225 #frmapi-feedback {
1426 - margin-top: var(--gap-lg);
1226 + margin-top: 30px;
1427 1227 }
1428 1228
1429 1229 .frm-review-notice .frm_error,
1430 1230 .frm-review-notice label {
@@ -1432,112 +1232,12 @@
1432 1232 text-align: left;
1433 1233 }
1434 1234
1435 1235 .frm-review-notice label {
1436 - font-size: var(--text-sm);
1236 + font-size: 14px;
1437 1237 }
1438 1238
1439 -.frm-floating-success-message {
1440 - border-radius: 4px;
1441 - right: 10px !important;
1442 - bottom: 10px !important;
1443 -}
1444 -
1445 1239 /* Generic Classes */
1446 -.frm_no_margin, /* deprecated */
1447 -.frm-m-0 {
1448 - margin: 0 !important;
1449 -}
1450 -
1451 -.frm-m-12 {
1452 - margin: var(--gap-2xl);
1453 -
1454 -}
1455 -
1456 -.frm_no_top_margin, /* deprecated */
1457 -.frm-mt-0 {
1458 - margin-top: 0 !important;
1459 -}
1460 -
1461 -.frm_no_bottom_margin, /* deprecated */
1462 -.frm-mb-0 {
1463 - margin-bottom: 0 !important;
1464 -}
1465 -
1466 -.frm-mb-sm {
1467 - margin-bottom: var(--gap-sm) !important;
1468 -}
1469 -
1470 -.frm-mb-md {
1471 - margin-bottom: var(--gap-md) !important;
1472 -}
1473 -
1474 -.frm-mb-lg {
1475 - margin-bottom: var(--gap-lg) !important;
1476 -}
1477 -
1478 -.frm-mx-sm {
1479 - margin-left: var(--gap-sm) !important;
1480 - margin-right: var(--gap-sm) !important;
1481 -}
1482 -
1483 -.frm-p-1 {
1484 - padding: 4px;
1485 -}
1486 -
1487 -.frm-p-4 {
1488 - padding: var(--gap-sm);
1489 -}
1490 -
1491 -.frm-p-6 {
1492 - padding: var(--gap-md);
1493 -}
1494 -
1495 -.frm-text-md {
1496 - font-size: var(--text-md);
1497 -}
1498 -
1499 -.frm-text-lg {
1500 - font-size: var(--text-lg);
1501 -}
1502 -
1503 -.frm-text-xl {
1504 - font-size: var(--text-xl);
1505 -}
1506 -
1507 -.frm-w-auto {
1508 - width: auto !important;
1509 -}
1510 -
1511 -.frm-w-full {
1512 - width: 100% !important;
1513 -}
1514 -
1515 -.frm-flex-box {
1516 - display: flex;
1517 - gap: var(--gap-sm);
1518 -}
1519 -
1520 -.frm-gap-xs {
1521 - gap: var(--gap-xs);
1522 -}
1523 -
1524 -.frm-gap-sm {
1525 - gap: var(--gap-sm);
1526 -}
1527 -
1528 -.frm-gap-md {
1529 - gap: var(--gap-md);
1530 -}
1531 -
1532 -.frm-justify-between {
1533 - justify-content: space-between;
1534 -}
1535 -
1536 -.frm-transition-ease {
1537 - transition: all .2s ease;
1538 -}
1539 -
1540 1240 .frm_invisible {
1541 1241 visibility: hidden;
1542 1242 transition: all .2s ease;
1543 1243 }
@@ -1545,10 +1245,10 @@
1545 1245 .frm_no_float {
1546 1246 float: none;
1547 1247 }
1548 1248
1549 -.frm_block, /* deprecated */
1550 -.frm-block {
1249 +.frm_block,
1250 +.frm_no_section_fields.frm_block {
1551 1251 display: block;
1552 1252 }
1553 1253
1554 1254 .frm_inline {
@@ -1558,81 +1258,81 @@
1558 1258 .frm_inline_block {
1559 1259 display: inline-block !important;
1560 1260 }
1561 1261
1262 +.frm-lookup-modal .dismiss,
1263 +.frm-right-panel .inside a.frm_hidden,
1264 +ul.frm_form_nav > li.frm_hidden,
1265 +a.frm_hidden,
1266 +.button.frm_hidden,
1267 +.wp-core-ui .button.frm_hidden,
1562 1268 .frm_hidden {
1563 1269 display: none;
1564 1270 }
1565 1271
1566 -.frm-text-right {
1567 - text-align: right;
1272 +.frm_no_margin {
1273 + margin: 0;
1568 1274 }
1569 1275
1570 -.frm-border-b {
1571 - border-bottom: 1px solid var(--grey-300);
1276 +.frm_no_top_margin {
1277 + margin-top: 0 !important;
1572 1278 }
1573 1279
1574 -.frm-no-border {
1575 - border: none !important;
1280 +.postbox .inside > p.frm_no_bottom_margin:last-child,
1281 +.frm_no_bottom_margin {
1282 + margin-bottom: 0 !important;
1576 1283 }
1577 1284
1578 -.frm-opacity-100 {
1579 - opacity: 1;
1285 +.frm_tiny_top_margin {
1286 + margin-top: 1px;
1580 1287 }
1581 1288
1582 -.frm-on-bottom {
1583 - z-index: -1;
1289 +.frm_small_top_margin {
1290 + margin-top: 5px;
1584 1291 }
1585 -/* End Generic Classes, Start Forced Generic Classes */
1586 1292
1587 -.frm-fields p > label.frm_hidden,
1588 -.frm-lookup-modal .dismiss,
1589 -.frm-right-panel .inside a.frm_hidden,
1590 -#form_global_settings .frm_hidden,
1591 -ul.frm_form_nav > li.frm_hidden,
1592 -a.frm_hidden,
1593 -.button.frm_hidden,
1594 -.wp-core-ui .button.frm_hidden {
1595 - display: none;
1293 +.frm_cursor_pointer {
1294 + cursor: pointer;
1596 1295 }
1597 1296
1598 -.postbox .inside > p.frm_no_bottom_margin:last-child {
1599 - margin-bottom: 0 !important;
1297 +.frm_right_text {
1298 + text-align: right;
1600 1299 }
1601 1300
1602 -.frm_no_section_fields.frm_block {
1603 - display: block;
1301 +.frm_submit .frm_full_opacity, .frm_full_opacity {
1302 + opacity: 1;
1604 1303 }
1605 1304
1305 +.frm_med_padding {
1306 + padding: 10px;
1307 +}
1308 +
1606 1309 .actions.frm_visible_overflow {
1607 1310 overflow: visible !important;
1608 1311 }
1609 1312
1610 -.frm_full_opacity, /* deprecated */
1611 -.frm_submit .frm_full_opacity,
1612 -.frm_submit .frm-opacity-100 {
1613 - opacity: 1;
1614 -}
1615 -
1616 1313 .frm-dropdown-menu.frm-on-top {
1617 1314 z-index: 99999;
1618 1315 }
1619 1316
1620 -/* End Forced Generic Classes */
1317 +.frm-on-bottom {
1318 + z-index: -1;
1319 +}
1621 1320
1622 1321 .frm_forms.with_frm_style {
1623 1322 max-width: 100%;
1624 1323 }
1625 1324
1325 +.post-type-frm_display .wrap > #posts-filter,
1626 1326 .post-type-frm_display .wrap > .subsubsub,
1627 1327 .post-type-frm_display .wrap > .icl_subsubsub,
1628 1328 .frm_form_settings > p {
1629 - margin: 6px var(--gap-md);
1329 + margin: 6px 40px;
1630 1330 padding: 0;
1631 1331 }
1632 1332
1633 1333 .frm-entry-container {
1634 - margin: 0 40px 40px;
1334 + margin: 20px 40px 40px;
1635 1335 padding: 0;
1636 1336 }
1637 1337
1638 1338 #form_reports_page .frm-inner-content {
@@ -1646,24 +1346,24 @@
1646 1346 clear: both;
1647 1347 }
1648 1348
1649 1349 .post-type-frm_display h2,
1650 -.frm_wrap h2 {
1651 - margin-top: 0 !important;
1652 - font-size: var(--text-lg);
1653 - line-height: var(--leading);
1350 +.frm_page_container h2 {
1351 + margin: 10px 0 !important;
1352 + color: var(--medium-grey);
1353 + font-weight: 500;
1354 + font-size: 19px;
1654 1355 }
1655 1356
1656 1357 .post-type-frm_display .wrap > h2:first-child,
1657 -.frm_wrap .wrap > h2:first-child {
1658 - padding-top: 0;
1358 +.frm_page_container .wrap > h2:first-child {
1659 1359 margin-top: 0 !important;
1660 - font-size: var(--text-lg);
1360 + font-size: 22px;
1661 1361 }
1662 1362
1663 1363 #frm_form_editor_container {
1664 1364 position: relative;
1665 - margin-top: 28px;
1365 + margin: 25px 50px 50px;
1666 1366 }
1667 1367
1668 1368 .form-field p {
1669 1369 /* for conflicts */
@@ -1676,30 +1376,21 @@
1676 1376 float: none;
1677 1377 width: auto;
1678 1378 }
1679 1379
1680 -#frm_view_editor_left label, /* Views */
1681 -#frm_view_editor_left .frm_primary_label, /* Views */
1682 -.frm-dialog .frm-sub-label,
1683 -.frm-dialog label,
1684 -.dropdown .frm_primary_label,
1685 1380 .accordion-container label,
1686 1381 .frm-fields td > label,
1687 1382 .frm-fields td > div > label,
1688 -.frm_form_field > label:first-child,
1689 1383 .frm-fields p > label,
1690 -.frm_on_submit_type > label,
1691 1384 .post-type-frm_display .frm_form_field > label,
1692 1385 #new_fields .frm_primary_label,
1693 -#form_global_settings .frm_primary_label,
1694 1386 #frm_form_editor_container .frm_primary_label {
1695 - color: var(--grey-700);
1387 + color: var(--dark-grey);
1696 1388 margin: 0 0 3px;
1697 1389 padding: 0;
1698 1390 width: auto;
1699 - font-size: var(--text-sm);
1391 + font-size: 14px;
1700 1392 display: block;
1701 - line-height: var(--leading);
1702 1393 }
1703 1394
1704 1395 .frm-fields td input + label {
1705 1396 display: inline;
@@ -1717,12 +1408,8 @@
1717 1408 .with_frm_style form .form-field {
1718 1409 margin-bottom: 20px;
1719 1410 }
1720 1411
1721 -#frm_builder_page .with_frm_style form .frm_combo_inputs_container > .form-field {
1722 - margin-bottom: 0;
1723 -}
1724 -
1725 1412 .frm_description,
1726 1413 .with_frm_style form div.description,
1727 1414 .frm_error,
1728 1415 .with_frm_style form div.description textarea {
@@ -1734,18 +1421,11 @@
1734 1421 color: inherit;
1735 1422 }
1736 1423
1737 1424 #frm_form_editor_container .divider_section_only .frm_primary_label {
1738 - display: flex;
1739 - align-items: center;
1740 - gap: var(--gap-xs);
1741 1425 font-size: 20px;
1742 1426 }
1743 1427
1744 -#frm_form_editor_container .divider_section_only .frm_primary_label .frm-sub-label {
1745 - padding: 0;
1746 -}
1747 -
1748 1428 form .form-field.frm_field_loading {
1749 1429 margin-bottom: 0;
1750 1430 min-height: 0;
1751 1431 padding: 0;
@@ -1833,8 +1513,14 @@
1833 1513 max-width: 700px;
1834 1514 margin: 20px auto !important;
1835 1515 }
1836 1516
1517 +.upgrade_to_pro h1,
1518 +.upgrade_to_pro h3,
1519 +.upgrade_to_pro {
1520 + color: #444;
1521 +}
1522 +
1837 1523 .upgrade_to_pro .error {
1838 1524 display: none;
1839 1525 }
1840 1526
@@ -1844,19 +1530,19 @@
1844 1530 }
1845 1531
1846 1532 .frm_error_style,
1847 1533 .frm_warning_style,
1848 -.frm_note_style,
1849 1534 .frm_message,
1850 1535 #post-body-content .frm_updated_message,
1851 1536 div.frm_updated_message {
1852 - border-radius: var(--small-radius);
1853 - background-color: #D5F2DC;
1854 - color: #1E561F;
1855 - padding: var(--gap-sm) var(--gap-md);
1856 - font-size: var(--text-sm);
1857 - margin: var(--gap-sm) 0;
1858 - text-align: left;
1537 + border-radius: var(--border-radius);
1538 + border: 1px solid #D6E9C6;
1539 + background-color: #DFF0D8;
1540 + color: #468847;
1541 + padding: 5px 25px;
1542 + font-size: 14px;
1543 + margin: 5px 0 15px;
1544 + text-align: center;
1859 1545 }
1860 1546
1861 1547 #frm_top_bar + .wrap > .frm_updated_message, #frm_top_bar + .wrap > .frm_warning_style {
1862 1548 display: inline-block;
@@ -1867,20 +1553,21 @@
1867 1553 #post-body-content > .frm_updated_message {
1868 1554 margin: 5px 65px;
1869 1555 }
1870 1556
1871 -#form_global_settings #post-body-content > .frm_updated_message,
1872 -#form_global_settings #post-body-content > .frm_warning_style {
1557 +#form_global_settings .frm_updated_message {
1873 1558 margin: 5px 25px;
1874 1559 }
1875 1560
1876 1561 .frm_error_style {
1877 1562 color: #973937;
1878 - background-color: #EBCCCC;
1563 + border-color: #F2DEDE;
1564 + background-color: #F2DEDE;
1879 1565 clear: both;
1880 1566 }
1881 1567
1882 1568 .frm_error_style a {
1569 + color: #973937;
1883 1570 text-decoration: underline;
1884 1571 font-weight: 600;
1885 1572 }
1886 1573
@@ -1888,10 +1575,14 @@
1888 1575 opacity: .7;
1889 1576 }
1890 1577
1891 1578 .frm_warning_style {
1892 - color: #7A4D05;
1893 - background-color: #FFF2D2;
1579 + color: #8B6E3C;
1580 + border-color: #FBECCD;
1581 + background-color: #FDF9E3;
1582 + border-radius: 10px;
1583 + text-align: left;
1584 + padding-top: 5px;
1894 1585 }
1895 1586
1896 1587 .frm_warning_heading{
1897 1588 font-weight: bold;
@@ -1897,61 +1588,8 @@
1897 1588 font-weight: bold;
1898 1589 margin-bottom:4px;
1899 1590 }
1900 1591
1901 -/* Warning message dismiss */
1902 -.frm_warning_style {
1903 - position: relative;
1904 - padding-right: calc(var(--gap-md) + 15px);
1905 -}
1906 -
1907 -body.rtl .frm_warning_style {
1908 - padding-right: var(--gap-md);
1909 - padding-left: calc(var(--gap-md) + 15px);
1910 -}
1911 -
1912 -.frm-warning-dismiss {
1913 - position: absolute;
1914 - top: 10px;
1915 - right: 10px;
1916 - display: flex;
1917 - cursor: pointer;
1918 - transition: opacity 0.2s ease-out;
1919 -}
1920 -
1921 -body.rtl .frm-warning-dismiss {
1922 - left: 10px;
1923 - right: auto;
1924 -}
1925 -
1926 -.frm-warning-dismiss:hover {
1927 - opacity: 0.8;
1928 -}
1929 -
1930 -.frm-warning-dismiss.frmsvg,
1931 -.frm-warning-dismiss.frmsvg svg {
1932 - width: 15px;
1933 - height: 15px;
1934 -}
1935 -
1936 -.frm_note_style {
1937 - background: rgba(188, 224, 253, 0.23);
1938 - color: var(--grey-700);
1939 -}
1940 -
1941 -.frm-banner-alert {
1942 - text-align: left;
1943 - margin: 0;
1944 - border-radius: 0;
1945 - padding: 10px 0 10px 40px;
1946 -}
1947 -
1948 -.frm-banner-alert a {
1949 - color: var(--primary-500);
1950 - font-weight: 400;
1951 - text-decoration: none;
1952 -}
1953 -
1954 1592 .frm_updated_message ul,
1955 1593 .frm_updated_message li,
1956 1594 .frm_warning_style ul,
1957 1595 .frm_warning_style li,
@@ -1960,24 +1598,57 @@
1960 1598 margin: 0;
1961 1599 }
1962 1600
1963 1601 .frm-inline-message {
1964 - border: 1px solid var(--primary-700);
1602 + border: 1px solid var(--primary-hover);
1965 1603 border-radius: var(--small-radius);
1966 - color: var(--primary-700);
1604 + color: var(--primary-hover);
1967 1605 background: #fff;
1968 1606 text-align: center;
1969 1607 padding: 20px;
1970 - font-size: var(--text-sm);
1971 - line-height: var(--leading);
1608 + font-size: 14px;
1609 + line-height: 1.4em;
1972 1610 }
1973 1611
1974 1612 .frm-inline-message a {
1975 - text-decoration: underline;
1976 1613 font-weight: 600;
1977 - color: var(--primary-700);
1614 + color: var(--primary-hover);
1978 1615 }
1979 1616
1617 +.frm_ribbon {
1618 + -webkit-transform: rotate(45deg);
1619 + -moz-transform: rotate(45deg);
1620 + -ms-transform: rotate(45deg);
1621 + -o-transform: rotate(45deg);
1622 + transform: rotate(45deg);
1623 + border: 25px solid transparent;
1624 + border-bottom: 25px solid var(--orange);
1625 + position: absolute;
1626 + top: -31px;
1627 + right: -74px;
1628 + padding: 0px 10px;
1629 + width: 30px;
1630 + color: white;
1631 + font-family: sans-serif;
1632 + size: 11px;
1633 +}
1634 +
1635 +.plugin-card-top .frm_ribbon {
1636 + right: -33px;
1637 + top: -28px;
1638 +}
1639 +
1640 +.frm_ribbon span {
1641 + position: absolute;
1642 + left: 25px;
1643 + font-size: 15px;
1644 + top: 4px;
1645 +}
1646 +
1647 +.accordion-section-content .frm-selectable:hover .frm_ribbon {
1648 + display: none;
1649 +}
1650 +
1980 1651 .frm_pro_heading span {
1981 1652 margin-top: 10px;
1982 1653 }
1983 1654
@@ -1986,14 +1657,15 @@
1986 1657 }
1987 1658
1988 1659 .frm-yes {
1989 1660 color: var(--green);
1990 - font-size: var(--text-xl);
1661 + font-size: 21px;
1662 + font-weight: 500;
1991 1663 }
1992 1664
1993 1665 .frm-nope {
1994 - color: var(--grey-400);
1995 - font-size: var(--text-xl);
1666 + color: #d2e0f2;
1667 + font-size: 21px;
1996 1668 }
1997 1669
1998 1670 .upgrade_to_pro a {
1999 1671 color: var(--orange);
@@ -1999,10 +1671,10 @@
1999 1671 color: var(--orange);
2000 1672 }
2001 1673
2002 1674 .upgrade_to_pro table .frmsvg {
2003 - height: var(--text-xl);
2004 - width: var(--text-xl);
1675 + height: 20px;
1676 + width: 20px;
2005 1677 }
2006 1678
2007 1679 .upgrade_to_pro table.widefat {
2008 1680 background-color: #fff;
@@ -2008,14 +1680,12 @@
2008 1680 background-color: #fff;
2009 1681 border-collapse: collapse;
2010 1682 }
2011 1683
2012 -.frm-white-body .upgrade_to_pro table th,
1684 +.upgrade_to_pro table th,
2013 1685 .upgrade_to_pro table td {
2014 1686 padding: 10px 15px;
2015 - border: 1px solid var(--grey-300);
2016 - line-height: var(--leading);
2017 - font-size: var(--text-sm);
1687 + border: 1px solid #d2e0f2;
2018 1688 }
2019 1689
2020 1690 .upgrade_to_pro table th.frmcenter {
2021 1691 text-align: center;
@@ -2021,9 +1691,9 @@
2021 1691 text-align: center;
2022 1692 }
2023 1693
2024 1694 .widefat th.frm_table_break {
2025 - background-color: var(--sidebar-color);
1695 + background-color: #f6f7fb;
2026 1696 }
2027 1697
2028 1698 h2.frm-h2 + .howto {
2029 1699 color: var(--medium-grey);
@@ -2039,18 +1709,18 @@
2039 1709 margin-top: 0;
2040 1710 }
2041 1711
2042 1712 .frm-addons {
2043 - margin-top: var(--gap-lg);
1713 + margin-top: 30px;
2044 1714 display: grid;
2045 1715 grid-template-columns: 1fr 1fr 1fr;
2046 - grid-gap: var(--gap-md);
1716 + grid-gap: 30px 2%;
2047 1717 }
2048 1718
2049 1719 .frm-addons,
2050 1720 .frm-addons h2,
2051 1721 .frm-addons h3 {
2052 - color: var(--grey-700);
1722 + color: var(--dark-grey);
2053 1723 }
2054 1724
2055 1725 .frm-addons h2 {
2056 1726 font-size: 17px;
@@ -2062,9 +1732,9 @@
2062 1732
2063 1733 .frm-card {
2064 1734 width: 100%;
2065 1735 border-radius: 10px;
2066 - border: 1px solid var(--grey-300);
1736 + border: 1px solid var(--grey-border);
2067 1737 opacity: 1;
2068 1738 transition: opacity 1s;
2069 1739 }
2070 1740
@@ -2078,10 +1748,10 @@
2078 1748 position: relative;
2079 1749 }
2080 1750
2081 1751 .frm-addons .plugin-card-top {
2082 - min-height: 155px;
2083 - padding-top: var(--gap-lg);
1752 + height: 140px;
1753 + padding-top: 30px;
2084 1754 overflow: hidden;
2085 1755 }
2086 1756
2087 1757 .frm-addons .plugin-card-top h2 {
@@ -2118,18 +1788,8 @@
2118 1788 .frm-addon-active .button {
2119 1789 visibility: hidden;
2120 1790 }
2121 1791
2122 -.frm-save-and-reload-options {
2123 - margin-top: 10px;
2124 - font-size: 13px;
2125 -}
2126 -
2127 -.frm-save-and-reload,
2128 -.frm-save-and-reload + .frm-button-secondary {
2129 - visibility: visible !important;
2130 -}
2131 -
2132 1792 .addon-status-label {
2133 1793 opacity: .7;
2134 1794 }
2135 1795
@@ -2156,13 +1816,9 @@
2156 1816 .frm-new-template.plugin-card-bottom {
2157 1817 overflow: visible;
2158 1818 }
2159 1819
2160 -#frm-new-template p:first-child {
2161 - margin-top: 0;
2162 -}
2163 -
2164 -.frm-admin-page-formidableedit #wpbody-content > *:not(.frm-review-notice):not(.frm_previous_install):not(.frm-banner-alert),
1820 +.frm-admin-page-formidableedit #wpbody-content > *:not(.frm-review-notice):not(.frm_previous_install),
2165 1821 #wpbody-content > .updated,
2166 1822 #wpbody-content > #update-nag,
2167 1823 #wpbody-content > .update-nag,
2168 1824 #wpbody-content > .notice:not(.frm-review-notice),
@@ -2184,86 +1840,35 @@
2184 1840 margin: 0;
2185 1841 padding: 10px 20px;
2186 1842 }
2187 1843
2188 -.frm-modal .postbox,
2189 1844 #frm_new_form_modal .postbox {
2190 1845 max-height: 600px;
2191 1846 overflow: hidden;
2192 - margin-bottom: 0;
2193 1847 }
2194 1848
2195 -.frm-modal .postbox .frm_modal_top,
2196 -.frm-dialog .frm_common_modal .postbox > div:first-child {
2197 - padding: var(--gap-md) var(--gap-md) 0;
1849 +#frm_new_form_modal .postbox > div:first-child {
1850 + padding: 30px 20px;
2198 1851 position: relative;
1852 + border-bottom: 1px solid var(--grey-border);
2199 1853 }
2200 1854
2201 -.frm-modal .postbox .frm-modal-title,
2202 -.frm-dialog .frm_common_modal .postbox > div:first-child > div:first-child {
1855 +#frm_new_form_modal .postbox > div:first-child > div:first-child {
2203 1856 display: inline-block;
2204 - font-size: var(--text-xl);
2205 - color: var(--grey-900);
1857 + font-size: 24px;
1858 + color: #282F36;
2206 1859 }
2207 1860
2208 -.frm-inline-modal > a.dismiss,
2209 -.frm-modal .postbox > a.dismiss,
2210 -.frm-modal .postbox .frm-modal-title + div:last-child,
2211 -.frm-dialog .frm_common_modal .postbox > div:first-child > div:last-child {
1861 +#frm_new_form_modal .postbox > div:first-child > div:last-child {
2212 1862 position: absolute;
2213 - right: 30px;
2214 - top: 25px;
2215 - z-index: 2;
1863 + right: 20px;
1864 + top: 37px;
2216 1865 }
2217 1866
2218 -body.rtl .frm-inline-modal > a.dismiss,
2219 -body.rtl .frm-modal .postbox > a.dismiss,
2220 -body.rtl .frm-modal .postbox .frm-modal-title + div:last-child,
2221 -body.rtl .frm-dialog .frm_common_modal .postbox > div:first-child > div:last-child {
2222 - right: unset;
2223 - left: 30px;
1867 +#frm_new_form_modal .postbox > div:first-child > div:last-child a {
1868 + color: var(--grey);
2224 1869 }
2225 1870
2226 -.frm-info-modal .postbox > a.dismiss,
2227 -.frm-inline-modal > a.dismiss {
2228 - right: 13px;
2229 - top: 13px;
2230 -}
2231 -
2232 -.frm-modal .postbox .frm-modal-title + div:last-child a,
2233 -.frm-modal a.dismiss .frmsvg,
2234 -.frm_common_modal .frm_modal_top a .frmsvg {
2235 - color: var(--grey-900);
2236 -}
2237 -
2238 -.frm-modal .frm_modal_content > div.inside,
2239 -.frm_common_modal .frm_modal_content > div.inside {
2240 - padding: var(--gap-md);
2241 - margin: 0;
2242 - font-size: var(--text-sm);
2243 - color: var(--grey-700);
2244 -}
2245 -
2246 -.frm_common_modal .postbox {
2247 - display: flex;
2248 - flex-direction: column;
2249 -}
2250 -
2251 -.frm-modal .postbox > div.inside .cta-inside {
2252 - overflow-y: auto;
2253 - height: auto;
2254 - padding: 0 var(--gap-sm);
2255 -}
2256 -
2257 -.frm_modal_footer {
2258 - padding: 0 var(--gap-md) var(--gap-sm);
2259 - text-align: right;
2260 -}
2261 -
2262 -body.frm-body-with-open-modal {
2263 - overflow-y: hidden;
2264 -}
2265 -
2266 1871 #frm_new_form_modal .postbox > div.inside {
2267 1872 max-height: 490px;
2268 1873 overflow-y: auto;
2269 1874 overflow-x: hidden;
@@ -2273,9 +1878,9 @@
2273 1878
2274 1879 #frm_new_form_modal .postbox > div.inside .cta-inside {
2275 1880 overflow-y: auto;
2276 1881 height: auto;
2277 - padding: 0 var(--gap-md);
1882 + padding: 0 15px;
2278 1883 }
2279 1884
2280 1885 #frm_new_form_modal .accordion-container {
2281 1886 width: 100%;
@@ -2281,16 +1886,13 @@
2281 1886 width: 100%;
2282 1887 }
2283 1888
2284 1889 .frm-templates-list {
2285 - margin-top: 0;
1890 + margin-top: 0px;
2286 1891 }
2287 1892
2288 -.frm-templates-list.frm_grid_container li {
2289 - margin-bottom: 0;
2290 -}
2291 -
2292 1893 .frm-templates-list li {
1894 + width: 50%;
2293 1895 vertical-align: top;
2294 1896 position: relative;
2295 1897 box-sizing: border-box;
2296 1898 border-radius: 6px;
@@ -2319,17 +1921,14 @@
2319 1921 .frm-templates-list li.frm-selectable:hover p {
2320 1922 max-width: calc( 100% - 65px );
2321 1923 }
2322 1924
2323 -.frm-templates-list .frm-featured-form {
2324 - display: flex;
1925 +.frm-templates-list li > div:not(.frm-hover-icons) {
1926 + display: inline-block;
2325 1927 width: 100%;
1928 + padding: 5px;
2326 1929 }
2327 1930
2328 -.frm-templates-list li .frm-featured-form {
2329 - padding: 7px 5px;
2330 -}
2331 -
2332 1931 .frm-templates-list li li > div {
2333 1932 padding-left: 0;
2334 1933 }
2335 1934
@@ -2336,38 +1935,23 @@
2336 1935 .frm-templates-list li > div > div {
2337 1936 vertical-align: middle;
2338 1937 }
2339 1938
2340 -.frm-templates-list .frm-inner-circle,
2341 -.frm-category-icon, /* Deprecated */
2342 -.frm-icon-wrapper {
2343 - background: var(--primary-500);
2344 - border-radius: var(--small-radius);
2345 - color: #fff;
1939 +.frm-templates-list li .frm-category-icon {
2346 1940 width: 40px;
2347 1941 height: 40px;
2348 - font-size: 18px;
2349 - box-sizing: border-box;
2350 - align-self: center;
2351 - justify-content: center;
2352 - align-items: center;
2353 - display: inline-flex;
2354 -}
2355 -
2356 -.frm-templates-list .frm-inner-circle .frmsvg {
1942 + overflow: hidden;
1943 + display: inline-block;
1944 + border-radius: 4px;
1945 + text-align: center;
2357 1946 vertical-align: top;
2358 1947 }
2359 1948
2360 -.frm-templates-list li .frm-category-icon {
2361 - overflow: hidden;
2362 - align-self: flex-start;
2363 -}
2364 -
2365 -.frm-templates-list .frm-template-details {
1949 +.frm-templates-list li > div > div:last-child {
2366 1950 /* the content container to the right of the icon in Create new form modal */
2367 1951 display: inline-block;
2368 1952 width: calc( 100% - 40px );
2369 - padding-left: var(--gap-sm);
1953 + padding-left: 13px;
2370 1954 box-sizing: border-box;
2371 1955 transform: translateY(-2px);
2372 1956 }
2373 1957
@@ -2381,18 +1965,54 @@
2381 1965 }
2382 1966
2383 1967 .frm-templates-list li h3,
2384 1968 .frm-templates-list .frm-install-template h3 {
2385 - font-size: var(--text-sm) !important;
1969 + font-size: 14px !important;
1970 + line-height: 24px;
1971 + height: 24px;
2386 1972 }
2387 1973
1974 +.frm-templates-list li p {
1975 + font-size: 13px;
1976 + color: rgba(40, 47, 54, 0.6);
1977 +}
1978 +
2388 1979 .frm-templates-list .frm-install-template div {
2389 1980 text-align: left;
2390 1981 }
2391 1982
1983 +.frm-templates-list .frm-add-blank-form .frm-category-icon .frmsvg,
1984 +.frm-templates-list li:last-child div:not(.frm-hover-icons) > .frmsvg {
1985 + color: #fff;
1986 + transform: translateY(10px);
1987 +}
1988 +
1989 +.frm-templates-list .frm-inner-circle {
1990 + border-radius: 4px;
1991 + width: 40px;
1992 + height: 40px;
1993 + padding: 0;
1994 + box-sizing: border-box;
1995 + display: flex;
1996 + flex-direction: row;
1997 + align-items: center;
1998 + justify-content: center;
1999 + position: relative;
2000 +}
2001 +
2002 +.frm-templates-list .frm-inner-circle .frmsvg {
2003 + position: absolute;
2004 + top: 0;
2005 + left: 0;
2006 + width: 100%;
2007 + height: 100%;
2008 + box-sizing: border-box;
2009 + padding: 10px;
2010 +}
2011 +
2392 2012 #frm_new_form_modal .frm-search {
2393 - width: 100%;
2394 - margin: var(--gap-sm) 0 var(--gap-md);
2013 + width: calc( 100% - 20px );
2014 + margin: 40px 10px 30px;
2395 2015 }
2396 2016
2397 2017 #frm_leave_email,
2398 2018 #frm_code_from_email
@@ -2399,10 +2019,14 @@
2399 2019 {
2400 2020 width: 480px;
2401 2021 }
2402 2022
2403 -#frm_new_form_modal #template-search-input {
2404 - width: 100%;
2023 +#frm_new_form_modal #template-search-input,
2024 +#frm_new_form_modal #frm_leave_email,
2025 +#frm_new_form_modal #frm_code_from_email
2026 +{
2027 + border: 2px solid var(--grey-border);
2028 + border-radius: 4px !important;
2405 2029 }
2406 2030
2407 2031 #frm-email-block .frm-with-left-icon .frmsvg {
2408 2032 padding: 0;
@@ -2412,12 +2036,12 @@
2412 2036
2413 2037 #frm_new_form_modal .accordion-container {
2414 2038 display: inline-block;
2415 2039 padding: 0;
2416 - border-top: 1px solid var(--grey-300);
2040 + border-top: 1px solid var(--grey-border);
2417 2041 box-sizing: border-box;
2418 - margin: 0 5px;
2419 - width: calc( 100% - 10px );
2042 + margin: 0 10px;
2043 + width: calc( 100% - 20px );
2420 2044 }
2421 2045
2422 2046 #frm_new_form_modal .accordion-section-title {
2423 2047 padding: 0;
@@ -2427,13 +2051,13 @@
2427 2051 .control-section:hover .accordion-section-title,
2428 2052 #frm_new_form_modal .accordion-section.open .accordion-section-title
2429 2053 {
2430 2054 background: #fff !important;
2431 - border-bottom-color: transparent;
2055 + border-bottom: none;
2432 2056 }
2433 2057
2434 2058 #frm_new_form_modal .accordion-section.open:hover {
2435 - border-bottom-color: transparent;
2059 + border-bottom: none;
2436 2060 }
2437 2061
2438 2062 #frm_new_form_modal .accordion-section {
2439 2063 padding: 8px 0 4px;
@@ -2439,9 +2063,9 @@
2439 2063 padding: 8px 0 4px;
2440 2064 }
2441 2065
2442 2066 #frm_new_form_modal .accordion-section + .accordion-section {
2443 - border-top: 1px solid var(--grey-300);
2067 + border-top: 1px solid var(--grey-border);
2444 2068 border-radius: 0;
2445 2069 }
2446 2070
2447 2071 .frm-templates-list.frm-categories-list li > div > div:last-child,
@@ -2450,9 +2074,9 @@
2450 2074 padding-left: 0;
2451 2075 }
2452 2076
2453 2077 #frm_new_form_modal .frm-templates-list.frm-categories-list .accordion-section-title {
2454 - padding-left: var(--gap-sm);
2078 + padding-left: 10px;
2455 2079 }
2456 2080
2457 2081 #frm_new_form_modal .frm-templates-list.frm-categories-list li.frm-selectable {
2458 2082 padding: 0 10px;
@@ -2459,127 +2083,131 @@
2459 2083 overflow: hidden;
2460 2084 }
2461 2085
2462 2086 #frm_new_form_modal .accordion-section-content {
2463 - padding: var(--gap-sm);
2087 + padding: 10px 0;
2464 2088 }
2465 2089
2466 2090 .frm-hover-icons {
2467 2091 position: absolute;
2468 2092 right: 0;
2469 - top: calc( ( 58px - 2px - 22px ) / 2 ); /* Template item height - borders - icon height */
2470 - max-width: 91px;
2093 + top: 0;
2094 + height: 20px;
2095 + width: 65px;
2471 2096 height: 100%;
2472 2097 box-sizing: border-box;
2473 - padding: 0 10px 0 5px !important;
2474 - border-radius: var(--small-radius);
2098 + padding: 14px 10px 0 5px !important;
2099 + border-radius: 6px;
2475 2100 text-align: right;
2476 - display: flex;
2477 - gap: 5px;
2478 2101 }
2479 2102
2480 -.frm-ready-made-solution .frm-hover-icons {
2481 - visibility: hidden;
2103 +#frm_new_form_modal .frm-selectable[data-custom="1"] .frm-hover-icons {
2104 + width: 91px;
2482 2105 }
2483 2106
2484 -.frm-ready-made-solution:hover .frm-hover-icons {
2485 - visibility: visible;
2486 -}
2487 -
2488 2107 .frm-hover-icons a {
2489 2108 width: 22px;
2490 2109 height: 22px;
2491 - font-size: var(--text-md);
2492 - display: inline-flex;
2493 - align-items: center;
2494 - justify-content: center;
2110 + display: inline-block;
2495 2111 border-radius: 50%;
2496 2112 box-sizing: border-box;
2497 - line-height: var(--leading);
2113 + line-height: 20px;
2498 2114 text-align: center;
2499 2115 }
2500 2116
2501 2117 .frm-hover-icons > .frm-preview-form,
2502 2118 .frm-hover-icons > .frm-delete-form {
2503 - border: 1px solid var(--primary-500);
2119 + border: 1px solid var(--primary-color);
2120 + margin-right: 5px;
2504 2121 }
2505 2122
2506 -.frm-hover-icons > .frm-create-form,
2507 -.frm-ready-made-solution .frm-hover-icons a {
2508 - background-color: var(--primary-500);
2123 +.frm-hover-icons > .frm-create-form {
2124 + background-color: var(--primary-color);
2509 2125 }
2510 2126
2511 -.frm-hover-icons > a .frmsvg {
2512 - width: 14px;
2513 - height: 14px;
2514 - vertical-align: baseline;
2127 +.frm-hover-icons > .frm-preview-form .frmsvg {
2128 + width: 16px;
2129 + height: 16px;
2130 + color: var(--primary-color);
2515 2131 }
2516 2132
2517 -.frm-hover-icons > .frm-preview-form .frmsvg,
2518 2133 .frm-hover-icons > .frm-delete-form .frmsvg {
2519 - color: var(--primary-500);
2134 + width: 14px;
2135 + height: 14px;
2136 + color: var(--primary-color);
2137 + transform: translateY(-1px);
2520 2138 }
2521 2139
2522 2140 .frm-hover-icons > .frm-unlock-form {
2523 - background-color: var(--primary-500);
2141 + background-color: var(--primary-color);
2524 2142 }
2525 2143
2526 2144 .frm-hover-icons > .frm-unlock-form .frmsvg {
2527 - background-color: var(--primary-500);
2145 + width: 12px;
2146 + height: 12px;
2147 + background-color: var(--primary-color);
2148 + transform: translateY(-2px);
2528 2149 }
2529 2150
2530 -.frm-ready-made-solution .frmsvg {
2151 +.frm-hover-icons > .frm-create-form .frmsvg {
2531 2152 width: 14px;
2532 2153 height: 14px;
2533 2154 }
2534 2155
2535 -.frm-hover-icons .frm-create-form svg,
2536 -.frm-ready-made-solution .frm-hover-icons svg {
2156 +.frm-hover-icons .frm-create-form svg {
2537 2157 color: #fff;
2538 2158 }
2539 2159
2540 2160 .frm-hover-icons .frm-create-form:hover,
2541 -.frm-ready-made-solution .frm-hover-icons a:hover,
2542 2161 .frm-hover-icons > .frm-unlock-form:hover,
2543 2162 .frm-hover-icons > .frm-unlock-form:hover .frmsvg
2544 2163 {
2545 - background-color: var(--primary-700) !important;
2164 + background-color: var(--primary-hover) !important;
2546 2165 }
2547 2166
2548 2167 .frm-hover-icons .frm-preview-form:hover,
2549 2168 .frm-hover-icons .frm-delete-form:hover
2550 2169 {
2551 - border: 1px solid var(--primary-700) !important;
2170 + border: 1px solid var(--primary-hover) !important;
2552 2171 }
2553 2172
2554 2173 .frm-hover-icons .frm-preview-form:hover .frmsvg,
2555 2174 .frm-hover-icons .frm-delete-form:hover .frmsvg {
2556 - color: var(--primary-700) !important;
2175 + color: var(--primary-hover) !important;
2557 2176 }
2558 2177
2559 -.frm-application-card h4 .frmsvg,
2560 2178 .frm-locked-template h3 .frmsvg {
2561 - height: var(--text-sm);
2562 - width: var(--text-sm);
2563 - vertical-align: text-top;
2564 - color: var(--grey-500);
2179 + height: 12px;
2180 + width: 14px;
2181 + vertical-align: top;
2182 + padding-top: 6px;
2565 2183 }
2566 2184
2185 +.frm_modal_footer {
2186 + background-color: #fff;
2187 + padding: 30px 20px 15px;
2188 + text-align: right;
2189 + border-top: 1px solid var(--grey-border);
2190 +}
2191 +
2567 2192 #frm_new_form_modal .frm-use-this-template {
2568 2193 margin-left: 10px;
2569 2194 }
2570 2195
2571 2196 #frm_new_form_modal #frm-preview-block {
2572 - padding: var(--gap-md) var(--gap-lg);
2197 + padding: 20px 40px;
2573 2198 overflow-x: hidden;
2574 2199 }
2575 2200
2576 2201 #frm_new_form_modal #frm-details-block {
2577 - padding: var(--gap-md) var(--gap-lg);
2202 + padding: 20px 40px;
2578 2203 }
2579 2204
2580 2205 .frm-modal-back {
2581 2206 cursor: pointer;
2207 + font-size: 17px;
2208 + vertical-align: top;
2209 + margin-top: 4px;
2582 2210 margin-right: 4px;
2583 2211 }
2584 2212
2585 2213 .frm-modal-cancel {
@@ -2586,28 +2214,19 @@
2586 2214 float: left;
2587 2215 }
2588 2216
2589 2217 .frm-plan-required-tag {
2590 - margin-left: 5px;
2591 - transform: translateY(-1px);
2592 2218 background: #FDE6DE;
2593 2219 color: #F15A24;
2594 -}
2595 -
2596 -.frm-ready-made-solution .frm-meta-tag {
2597 - width: fit-content;
2598 - background: #FDE6DE;
2599 - color: #F15A24;
2600 -}
2601 -
2602 -.frm-meta-tag {
2603 2220 font-size: 10px;
2604 - padding: 4px 6px;
2221 + padding: 4px 8px;
2605 2222 border-radius: 4px;
2606 2223 text-transform: uppercase;
2607 2224 font-weight: normal;
2608 2225 display: inline-block;
2609 2226 line-height: 12px;
2227 + transform: translateY(-1px);
2228 + margin-left: 5px;
2610 2229 }
2611 2230
2612 2231 #frm_new_form_modal.frm-expired #frm-create-block,
2613 2232 #frm_new_form_modal.frm-expiring #frm-create-block {
@@ -2617,14 +2236,18 @@
2617 2236 #frm-create-footer {
2618 2237 padding: 15px 20px;
2619 2238 }
2620 2239
2240 +#frm-create-footer .frm_error_style {
2241 + border-radius: 6px;
2242 +}
2243 +
2621 2244 #frm_code_from_email_options {
2622 2245 margin-top: 20px;
2623 2246 }
2624 2247
2625 2248 #frm_code_from_email_options * {
2626 - color: var(--primary-500);
2249 + color: var(--primary-color);
2627 2250 }
2628 2251
2629 2252 #frm-email-block p,
2630 2253 #frm-code-block p,
@@ -2660,23 +2283,20 @@
2660 2283 #frm_new_form_modal[frm-page="upgrade"] #frm-upgrade-title,
2661 2284 #frm_new_form_modal[frm-page="email"] #frm-email-title,
2662 2285 #frm_new_form_modal[frm-page="code"] #frm-email-title,
2663 2286 #frm_new_form_modal[frm-page="renew"] #frm-renew-title,
2287 +.frm-locked-template .frm-hover-icons .frm-unlock-form,
2288 +li[data-preview] .frm-hover-icons .frm-preview-form,
2664 2289 #frm_code_from_email_error[frm-error="wrong-code"] span[frm-error="wrong-code"],
2665 2290 #frm_code_from_email_error[frm-error="empty"] span[frm-error="empty"],
2666 2291 #frm_code_from_email_error[frm-error="custom"] span[frm-error="custom"],
2667 2292 #frm_leave_email_error[frm-error="invalid"] span[frm-error="invalid"],
2668 -#frm_leave_email_error[frm-error="empty"] span[frm-error="empty"]
2293 +#frm_leave_email_error[frm-error="empty"] span[frm-error="empty"],
2294 +#frm_new_form_modal .frm-selectable[data-custom="1"] .frm-hover-icons .frm-delete-form
2669 2295 {
2670 2296 display: inline-block;
2671 2297 }
2672 2298
2673 -.frm-locked-template .frm-hover-icons .frm-unlock-form,
2674 -li[data-preview] .frm-hover-icons .frm-preview-form,
2675 -#frm_new_form_modal .frm-selectable[data-custom="1"] .frm-hover-icons .frm-delete-form {
2676 - display: inline-flex;
2677 -}
2678 -
2679 2299 #frm_new_form_modal[frm-page="create"] #frm-create-block,
2680 2300 #frm_new_form_modal[frm-page="preview"] #frm-preview-block,
2681 2301 #frm_new_form_modal[frm-page="details"] #frm-details-block,
2682 2302 #frm_new_form_modal[frm-page="upgrade"] #frm-upgrade-block,
@@ -2711,120 +2331,28 @@
2711 2331 }
2712 2332
2713 2333 #frm-upgrade-body-list-wrapper ul li:before {
2714 2334 content: "\2022";
2715 - color: var(--primary-500);
2335 + color: var(--primary-color);
2716 2336 display: inline-block;
2717 2337 width: 1em;
2718 2338 margin-left: -1em;
2719 2339 }
2720 2340
2721 -/* Embed Form Modal */
2722 -
2723 -.frm-embed-modal-content {
2724 - padding: var(--gap-md);
2725 -}
2726 -
2727 -.frm-embed-modal-content.frm-loading-page-options {
2728 - display: flex;
2729 - justify-content: center;
2730 -}
2731 -
2732 -#frm_embed_modal .frm_embed_example {
2733 - background: var(--sidebar-color);
2734 - border: 1px solid var(--sidebar-hover);
2735 - border-radius: var(--small-radius);
2736 - color: var(--grey-900);
2737 - font-size: var(--text-sm);
2738 - padding-right: var(--gap-lg);
2739 - width: 100%;
2740 - height: auto !important;
2741 - resize: none;
2742 -}
2743 -
2744 -#frm_embed_modal textarea.frm_embed_example {
2745 - padding-bottom: 0;
2746 -}
2747 -
2748 -.frm-embed-modal-content > div a {
2749 - position: absolute;
2750 - right: 0;
2751 - top: 0;
2752 -}
2753 -
2754 -.frm-embed-modal-content > div {
2755 - position: relative;
2756 - margin-bottom: var(--gap-sm);
2757 -}
2758 -
2759 -.frm-embed-modal-content > div:last-child {
2760 - margin-bottom: 0;
2761 -}
2762 -
2763 -.frm-embed-modal-content svg[id^="frm_copy_embed_"] {
2764 - position: absolute;
2765 - bottom: calc( ( 38px - 18px ) / 2 ); /* Input height - SVG height */
2766 - right: 10px;
2767 - cursor: pointer;
2768 - opacity: 0.5;
2769 -}
2770 -
2771 -.frm-border-info-box,
2772 -.frm-embed-modal-option {
2773 - border-radius: var(--small-radius);
2774 - border: 1px solid var(--grey-300);
2775 - padding: var(--gap-sm);
2776 - cursor: pointer;
2777 - display: flex;
2778 - gap: var(--gap-sm);
2779 - font-size: var(--text-sm);
2780 -}
2781 -
2782 -.frm-embed-modal-option + .frm-embed-modal-option {
2783 - margin-top: var(--gap-sm);
2784 -}
2785 -
2786 -.frm-collapsed .frmsvg,
2787 -.caret.rotate-270,
2788 -.frm-embed-modal-option .caret {
2789 - align-self: center;
2790 - margin-left: auto;
2791 - transform: rotate(-90deg);
2792 -}
2793 -
2794 -#frm_embed_modal .frm_modal_footer {
2795 - display: none;
2796 -}
2797 -
2798 -#frm_embed_modal.frm-on-page-2 .frm_modal_footer {
2799 - display: block;
2800 -}
2801 -
2802 -.frm-embed-modal-content ul {
2803 - max-height: 300px;
2804 - overflow-y: scroll;
2805 -}
2806 -
2807 -.frm-embed-modal-wrapper.frm-dialog {
2808 - overflow: visible;
2809 -}
2810 -
2811 2341 /* Bulk Options */
2812 2342 #frm-bulk-modal .frm_grid_container {
2343 + border-top: 1px solid var(--grey-border);
2813 2344 grid-template-columns: repeat(12, 8.33%);
2814 2345 grid-gap: 0;
2815 2346 }
2816 2347
2817 2348 #frm-bulk-modal .frm8 {
2818 - border-right: 1px solid var(--grey-300);
2819 - padding: 10px 20px 10px var(--gap-lg);
2349 + border-right: 1px solid var(--grey-border);
2350 + padding: 0 20px 20px;
2820 2351 }
2821 2352
2822 -#frm-bulk-modal .frm4 {
2823 - padding: 10px 0;
2824 -}
2825 -
2826 -.frm-inline-modal .howto {
2353 +.frm-inline-modal .howto,
2354 +#frm-bulk-modal .howto {
2827 2355 margin: 5px 0 10px;
2828 2356 color: var(--grey);
2829 2357 }
2830 2358
@@ -2841,18 +2369,18 @@
2841 2369 }
2842 2370
2843 2371 .frm-bulk-edit-link {
2844 2372 text-align: right;
2845 - font-size: var(--text-sm);
2373 + font-size: 14px;
2846 2374 padding: 0 5px 10px;
2847 2375 }
2848 2376
2849 2377 .frm-small-add {
2850 - font-size: var(--text-sm) !important;
2378 + font-size: 14px !important;
2851 2379 }
2852 2380
2853 2381 .frm-small-add span {
2854 - color: var(--primary-500);
2382 + color: var(--primary-color);
2855 2383 font-size: 12px;
2856 2384 height: 12px;
2857 2385 width: 12px;
2858 2386 }
@@ -2867,33 +2395,34 @@
2867 2395 }
2868 2396
2869 2397 .frm-right-panel .inside a.frm_pro_tip,
2870 2398 a.frm_pro_tip {
2871 - font-size: var(--text-sm);
2399 + font-size: 14px;
2400 + border: 1px solid var(--orange);
2872 2401 display: inline-block;
2873 - color: var(--grey-700);
2874 - background: #FFE7DE;
2875 - border-radius: var(--small-radius);
2402 + color: var(--dark-grey);
2403 + background: var(--light-blue);
2404 + border-radius: var(--border-radius);
2405 + text-align: center;
2876 2406 padding: 5px 15px;
2877 2407 margin: 0 auto;
2878 - display: flex;
2879 - align-items: center;
2408 + line-height: 1.4;
2880 2409 }
2881 2410
2882 2411 a.frm_pro_tip:hover {
2883 - color: var(--grey-700);
2884 - border-color: var(--primary-500);
2412 + color: var(--dark-grey);
2413 + border-color: var(--primary-color);
2885 2414 }
2886 2415
2887 2416 a.frm_pro_tip:hover .frmsvg {
2888 - fill: var(--primary-500);
2417 + fill: var(--primary-color);
2889 2418 }
2890 2419
2891 2420 .frm_field_list .frm_pro_tip {
2892 2421 margin: 10px 15px;
2422 + padding-left: 40px;
2893 2423 position: relative;
2894 - width: calc(100% - 30px);
2895 - box-sizing: border-box;
2424 + background: #fff;
2896 2425 }
2897 2426
2898 2427 a.frm_pro_tip .frmsvg,
2899 2428 a.frm_pro_tip i {
@@ -2900,15 +2429,17 @@
2900 2429 color: var(--orange);
2901 2430 margin-right: 5px;
2902 2431 }
2903 2432
2904 -a.frm_pro_tip .frmsvg {
2905 - margin-right: 10px;
2433 +.frm_field_list a.frm_pro_tip .frmsvg {
2434 + position: absolute;
2435 + left: 15px;
2436 + top: calc(50% - 11px);
2906 2437 }
2907 2438
2908 -.frm-tip-info {
2909 - flex: 1;
2910 - text-align: left;
2439 +.pro-tip {
2440 + font-weight: 500;
2441 + color: var(--darkest-grey);
2911 2442 }
2912 2443
2913 2444 .frm-tip-cta {
2914 2445 color: var(--orange);
@@ -2918,9 +2449,9 @@
2918 2449 float: right;
2919 2450 }
2920 2451
2921 2452 .frm_pro_tip:hover .frm-tip-cta {
2922 - color: var(--primary-500);
2453 + color: var(--primary-color);
2923 2454 }
2924 2455
2925 2456 /*Switch form dropdown*/
2926 2457 h1 .fa-caret-down {
@@ -2935,23 +2466,16 @@
2935 2466 vertical-align: middle;
2936 2467 }
2937 2468
2938 2469 .caret,
2939 -.wp-admin .frm_wrap select,
2940 -.frm_wrap .frm_form_builder select,
2941 2470 .frm_wrap .ui-autocomplete-input {
2942 - 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%;
2943 - background-size: var(--text-md) var(--text-md);
2944 - padding-right: var(--gap-lg) !important;
2471 + 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%;
2472 + background-size: 16px 16px;
2945 2473 }
2946 2474
2947 -.caret {
2948 - padding-right: var(--gap-xs) !important;
2949 -}
2950 -
2951 2475 .frm-btn-group .caret {
2952 2476 float: right;
2953 - margin-top: calc( var(--text-md) / 2 );
2477 + margin-top: 6px;
2954 2478 }
2955 2479
2956 2480 .dropdown {
2957 2481 position: relative;
@@ -2960,12 +2484,12 @@
2960 2484 .dropdown-toggle:focus {
2961 2485 outline: 0;
2962 2486 }
2963 2487
2964 -.frm_wrap .ui-autocomplete,
2965 -#frm_adv_info.frm-dropdown-menu,
2966 2488 .frm-dropdown-menu {
2967 - /* Copied from .dropdown-menu rules from Bootstrap */
2489 + max-height: 200px;
2490 + overflow: auto;
2491 + overflow-x: hidden;
2968 2492 position: absolute;
2969 2493 top: 100%;
2970 2494 left: 0;
2971 2495 z-index: 1000;
@@ -2970,27 +2494,21 @@
2970 2494 left: 0;
2971 2495 z-index: 1000;
2972 2496 display: none;
2973 2497 float: left;
2974 - padding-left: 4px;
2975 - padding-right: 4px;
2976 - margin: var(--gap-xs) 0 0;
2977 2498 text-align: left;
2499 + min-width: 160px;
2500 + width: auto;
2501 + padding: 5px 0;
2502 + margin: 2px 0 0;
2978 2503 list-style: none;
2979 - background: none;
2980 - background-color: #fff;
2504 + font-size: 12px;
2505 + background-color: #ffffff;
2506 + border: 1px solid rgba(0, 0, 0, 0.15);
2507 + border-radius: 4px;
2508 + -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
2509 + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
2981 2510 background-clip: padding-box;
2982 - border: 1px solid var(--grey-100);
2983 - border-radius: 0.25rem;
2984 - box-shadow: var(--box-shadow-lg);
2985 -
2986 - /* Custom rules */
2987 - max-height: 200px;
2988 - overflow-y: auto;
2989 - overflow-x: hidden;
2990 - font-size: var(--text-md);
2991 - width: auto;
2992 - min-width: 160px;
2993 2511 }
2994 2512
2995 2513 .frm6 .frm-dropdown-menu {
2996 2514 min-width: 100px;
@@ -2996,35 +2514,25 @@
2996 2514 min-width: 100px;
2997 2515 max-width: 99%;
2998 2516 }
2999 2517
2518 +#frm_bs_dropdown > a {
2519 + font-size: 1em;
2520 +}
2521 +
3000 2522 #frm_bs_dropdown .frm-dropdown-menu {
3001 2523 max-width: 400px;
3002 2524 }
3003 2525
3004 -.field_type_list .frm-dropdown-menu {
3005 - min-width: 150px !important;
2526 +.preview .frm-dropdown-menu {
2527 + min-width: 60px;
3006 2528 }
3007 2529
3008 -#frm_field_group_controls .frm-dropdown-menu,
3009 -.frm-field-action-icons .frm-dropdown-menu {
3010 - min-width: 180px !important;
2530 +.field_type_list .frm-dropdown-menu {
2531 + min-width: 150px;
3011 2532 }
3012 2533
3013 -.frm-field-action-icons .frm-dropdown-toggle svg {
3014 - color: #9EA9B8;
3015 -}
3016 -
3017 -.multiselect-container.frm-dropdown-menu,
3018 -#search-submit .frm-dropdown-menu {
3019 - min-width: 200px !important;
3020 -}
3021 -
3022 -.preview .frm-dropdown-menu {
3023 - min-width: 230px !important;
3024 -}
3025 -
3026 -.frm-dropdown-menu.dropdown-menu-right {
2534 +.frm-dropdown-menu.pull-right {
3027 2535 right: 0;
3028 2536 left: auto;
3029 2537 }
3030 2538
@@ -3034,37 +2542,29 @@
3034 2542 overflow: hidden;
3035 2543 background-color: #e5e5e5;
3036 2544 }
3037 2545
3038 -.frm-dropdown-menu > .dropdown-item {
2546 +.frm-dropdown-menu > li {
3039 2547 margin: 0;
3040 2548 }
3041 2549
3042 -.frm-select-list-item,
3043 -.frm_wrap .ui-autocomplete li > div,
3044 -.multiselect-container button.multiselect-option,
3045 -.frm-dropdown-menu > .dropdown-item > a,
2550 +.frm-dropdown-menu > li > a,
3046 2551 .frm-dropdown-menu .frm_dropdown_li {
3047 2552 clear: both;
3048 2553 font-weight: normal;
3049 2554 white-space: nowrap;
3050 2555 text-decoration: none;
3051 - border-radius: var(--small-radius);
3052 2556 }
3053 2557
3054 -.frm-dropdown-menu > .active > a,
3055 -.frm-dropdown-menu > .active > a:hover,
3056 -.frm-dropdown-menu > .active > a:focus {
2558 +.frm-dropdown-menu > .active > a, .frm-dropdown-menu > .active > a:hover, .frm-dropdown-menu > .active > a:focus {
3057 2559 text-decoration: none;
3058 2560 outline: 0;
3059 2561 }
3060 2562
3061 -.frm-select-list-item.disabled,
3062 2563 .frm-dropdown-menu > .disabled > a, .frm-dropdown-menu > .disabled > a:hover, .frm-dropdown-menu > .disabled > a:focus {
3063 2564 color: #999999;
3064 2565 }
3065 2566
3066 -.frm-select-list-item.disabled:hover,
3067 2567 .frm-dropdown-menu > .disabled > a:hover,
3068 2568 .frm-dropdown-menu > .disabled > a:focus {
3069 2569 text-decoration: none;
3070 2570 background-color: transparent;
@@ -3081,11 +2581,12 @@
3081 2581 }
3082 2582
3083 2583 .dropdown-header {
3084 2584 display: block;
3085 - padding: 3px 10px;
3086 - font-size: var(--text-xs);
3087 - color: var(--grey-400);
2585 + padding: 3px 20px;
2586 + font-size: 12px;
2587 + line-height: 1.428571429;
2588 + color: #999999;
3088 2589 }
3089 2590
3090 2591 .dropdown-backdrop {
3091 2592 position: fixed;
@@ -3095,9 +2596,8 @@
3095 2596 top: 0;
3096 2597 z-index: 990;
3097 2598 }
3098 2599
3099 -.dropdown-menu-right > .frm-dropdown-menu,
3100 2600 .pull-right > .frm-dropdown-menu {
3101 2601 right: 0;
3102 2602 left: auto;
3103 2603 }
@@ -3117,13 +2617,13 @@
3117 2617 .btn {
3118 2618 border: 1px solid #ddd;
3119 2619 background: #fff;
3120 2620 height: 28px;
3121 - line-height: var(--leading);
2621 + line-height: 1.5;
3122 2622 }
3123 2623
3124 2624 a.frm_option_icon:before {
3125 - color: var(--primary-500);
2625 + color: var(--primary-color);
3126 2626 font-size: 22px;
3127 2627 width: 22px;
3128 2628 height: 22px;
3129 2629 }
@@ -3129,9 +2629,9 @@
3129 2629 }
3130 2630
3131 2631 a.frm_option_icon:focus::before,
3132 2632 a.frm_option_icon:hover::before {
3133 - color: var(--primary-700);
2633 + color: var(--primary-hover);
3134 2634 }
3135 2635
3136 2636 .frm_top_left .frm-dropdown-toggle {
3137 2637 color: #999;
@@ -3145,17 +2645,17 @@
3145 2645 text-decoration: none;
3146 2646 }
3147 2647
3148 2648 .frm-card .frm-dropdown-toggle {
3149 - border: 1px solid var(--grey-300);
2649 + border: 1px solid var(--grey-border);
3150 2650 border-radius: var(--small-radius);
3151 2651 font-size: 13px;
3152 - color: var(--grey-700);
2652 + color: var(--dark-grey);
3153 2653 padding: 7px 20px;
3154 2654 }
3155 2655
3156 2656 .frm_actions_dropdown .frm-dropdown-menu {
3157 - font-size: var(--text-sm);
2657 + font-size: 14px;
3158 2658 color: #5F6C72;
3159 2659 }
3160 2660
3161 2661 .frm-dropdown-menu .frm_icon_font {
@@ -3167,21 +2667,20 @@
3167 2667 /* BS Multiselect */
3168 2668 .multiselect-container.frm-dropdown-menu {
3169 2669 top: auto;
3170 2670 left: auto;
3171 - font-size: var(--text-sm);
3172 - padding: 4px;
2671 + font-size: 14px;
2672 + padding-top: 3px;
3173 2673 margin-bottom: 3px;
3174 2674 }
3175 2675
3176 2676 .frm-right-panel .accordion-section-content {
3177 2677 background: transparent;
3178 - padding: 0;
3179 - overflow: initial;
2678 + padding-top: 0
3180 2679 }
3181 2680
3182 -.frm-right-panel .accordion-section-content > .inside {
3183 - padding: 0 0 var(--gap-xs);
2681 +.frm-right-panel .accordion-section-content > .inside {
2682 + padding: 0;
3184 2683 }
3185 2684
3186 2685 .frm-right-panel .accordion-section-content .inside a {
3187 2686 font-size: inherit;
@@ -3188,10 +2687,10 @@
3188 2687 }
3189 2688
3190 2689 #post-body-content + .frm-right-panel h3.accordion-section-title {
3191 2690 padding: 7px 10px 8px 14px;
3192 - font-size: var(--text-md);
3193 - color: var(--grey-700);
2691 + font-size: 16px;
2692 + color: var(--dark-grey);
3194 2693 }
3195 2694
3196 2695 .frm-right-panel .control-section.open h3 {
3197 2696 border-bottom: none;
@@ -3200,22 +2699,22 @@
3200 2699 .js .frm-right-panel .control-section.open .accordion-section-title,
3201 2700 .js .frm-right-panel .control-section .accordion-section-title:focus,
3202 2701 .js .frm-right-panel .control-section .accordion-section-title:hover {
3203 2702 background: transparent;
3204 - color: var(--grey-900);
2703 + color: var(--dark-grey);
3205 2704 }
3206 2705
3207 2706 .js .frm-right-panel .control-section .accordion-section-title:hover:before {
3208 - color: var(--grey-700);
2707 + color: var(--dark-grey);
3209 2708 }
3210 2709
3211 2710 .frm-with-line,
3212 2711 .accordion-section-content h4 {
3213 - font-size: var(--text-md);
2712 + font-size: 16px;
3214 2713 font-weight: 400;
3215 2714 margin: 20px -20px 10px;
3216 2715 padding: 0 20px;
3217 - color: var(--grey-700);
2716 + color: var(--dark-grey);
3218 2717 position: relative;
3219 2718 border: none !important;
3220 2719 }
3221 2720
@@ -3245,9 +2744,9 @@
3245 2744 .accordion-section-content h4:before {
3246 2745 content: '';
3247 2746 display: block;
3248 2747 position: absolute;
3249 - border-bottom: 1px solid var(--grey-300);
2748 + border-bottom: 1px solid var(--grey-border);
3250 2749 left: 0;
3251 2750 width: 100%;
3252 2751 top: 50%;
3253 2752 }
@@ -3265,9 +2764,8 @@
3265 2764 font-family: "s11-fp" !important;
3266 2765 font-size: 18px;
3267 2766 font-variant: normal;
3268 2767 text-rendering: auto;
3269 - vertical-align: text-top;
3270 2768 }
3271 2769
3272 2770 #frm_new_form_modal .accordion-section.open .accordion-section-title:after {
3273 2771 transform: rotate(90deg);
@@ -3273,9 +2771,9 @@
3273 2771 transform: rotate(90deg);
3274 2772 }
3275 2773
3276 2774 .frm-right-panel .accordion-section-title:after {
3277 - top: calc(50% - 10px) !important;
2775 + right: 20px;
3278 2776 }
3279 2777
3280 2778 .frm-right-panel .open .accordion-section-title:after {
3281 2779 content: "\e62a" !important;
@@ -3284,9 +2782,9 @@
3284 2782 .frm-right-panel .accordion-section-title:before {
3285 2783 content: "\f1de" !important;
3286 2784 color: var(--grey);
3287 2785 font-size: 17px !important;
3288 - margin: 0 10px 0 0;
2786 + margin: 0 10px;
3289 2787 }
3290 2788
3291 2789 .form-title-style .accordion-section-title:before,
3292 2790 .section-fields-style .accordion-section-title:before {
@@ -3344,21 +2842,16 @@
3344 2842 .progress-bars-style .accordion-section-title:before{
3345 2843 content: "\e939" !important;
3346 2844 }
3347 2845
3348 -#frm_view_editor_left.frm-right-panel .accordion-section-title,
3349 2846 .frm-right-panel h3.accordion-section-title {
3350 2847 padding: 15px 20px;
3351 2848 background: var(--sidebar-color);
3352 - line-height: var(--leading);
3353 - color: var(--grey-700);
3354 - font-size: var(--text-lg);
3355 - font-weight: 400;
2849 + line-height: 1;
3356 2850 }
3357 2851
3358 -.control-section .accordion-section-title:after, /** Form template list */
3359 -.customize-pane-child .accordion-section-title:after {
3360 - top: 15px;
2852 +.control-section .accordion-section-title:after, .customize-pane-child .accordion-section-title:after {
2853 + top: 19px;
3361 2854 }
3362 2855
3363 2856 .accordion-container .frm-dropdown-menu {
3364 2857 min-width: 40px;
@@ -3363,39 +2856,58 @@
3363 2856 .accordion-container .frm-dropdown-menu {
3364 2857 min-width: 40px;
3365 2858 }
3366 2859
3367 -.frm-btn-group .multiselect.dropdown-toggle {
3368 - box-sizing: border-box;
3369 - min-height: unset;
3370 -}
3371 -
3372 2860 .accordion-container .frm-dropdown-menu:before,
3373 2861 .accordion-container .multiselect.dropdown-toggle:before {
3374 2862 font-family: "s11-fp" !important;
3375 2863 }
3376 2864
2865 +.multiselect-container.frm-dropdown-menu input[type=radio] {
2866 + display: none;
2867 +}
2868 +
3377 2869 .multiselect-container {
3378 2870 position: absolute;
3379 2871 list-style-type: none;
3380 2872 margin: 0;
2873 + padding: 0
2874 +}
2875 +
2876 +.multiselect-container .input-group {
2877 + margin: 5px
2878 +}
2879 +
2880 +.multiselect-container > li {
3381 2881 padding: 0;
3382 - width: 100%;
3383 - max-width: 250px;
2882 + margin: 0;
3384 2883 }
3385 2884
3386 -.multiselect-container button.multiselect-option {
3387 - width: 100%;
3388 - text-align: left;
3389 - border: none;
3390 - margin-bottom: 4px;
2885 +.multiselect-container > li > a.multiselect-all label {
2886 + font-weight: 700
3391 2887 }
3392 2888
3393 -.multiselect-container button.multiselect-option label {
3394 - margin-left: 5px;
2889 +.multiselect-container > li > label.multiselect-group {
2890 + margin: 0;
2891 + padding: 3px 20px;
2892 + height: 100%;
2893 + font-weight: 700
3395 2894 }
3396 2895
3397 -.accordion-container .multiselect-container label {
2896 +.frm-dropdown-menu.multiselect-container > li > a {
2897 + padding: 0
2898 +}
2899 +
2900 +.multiselect-container > li > a > label {
2901 + margin: 0;
2902 + padding: 3px 25px;
2903 + height: 100%;
2904 + cursor: pointer;
2905 + font-weight: 400;
2906 + display: block;
2907 +}
2908 +
2909 +.accordion-container .multiselect-container > li > a > label {
3398 2910 padding: 3px 19px 3px 7px;
3399 2911 }
3400 2912
3401 2913 .frm-btn-group.btn-group > .btn-group:nth-child(2) > .multiselect.btn {
@@ -3402,19 +2914,24 @@
3402 2914 border-top-left-radius: 4px;
3403 2915 border-bottom-left-radius: 4px
3404 2916 }
3405 2917
2918 +.form-inline .multiselect-container label.checkbox,
2919 +.form-inline .multiselect-container label.radio {
2920 + padding: 3px 20px;
2921 +}
2922 +
2923 +.form-inline .multiselect-container li a label.checkbox input[type=checkbox],
2924 +.form-inline .multiselect-container li a label.radio input[type=radio] {
2925 + margin-left: -20px;
2926 + margin-right: 0;
2927 +}
2928 +
3406 2929 .frm-btn-group.btn-group, .frm-btn-group.btn-group-vertical {
3407 2930 display: block;
2931 + vertical-align: middle;
3408 2932 }
3409 2933
3410 -.multiselect-option label {
3411 - max-width: calc(100% - 22px);
3412 - text-overflow: ellipsis;
3413 - overflow: hidden;
3414 - white-space: nowrap;
3415 -}
3416 -
3417 2934 .frm_scale {
3418 2935 text-align: center;
3419 2936 float: left;
3420 2937 margin-right: 10px;
@@ -3436,13 +2953,8 @@
3436 2953 width: 100%;
3437 2954 height: auto;
3438 2955 }
3439 2956
3440 -.frm_form_builder .frm_time_wrap .frm_time_sep {
3441 - vertical-align: sub;
3442 - vertical-align: -webkit-baseline-middle;
3443 -}
3444 -
3445 2957 .frm_form_builder input[type=range]::-webkit-slider-runnable-track {
3446 2958 background-color: var(--blue-border);
3447 2959 }
3448 2960
@@ -3459,12 +2971,10 @@
3459 2971 }
3460 2972
3461 2973 .frm-embed-field-placeholder {
3462 2974 text-align: center;
2975 + position: relative;
3463 2976 height: 145px;
3464 - display: flex;
3465 - align-items: center;
3466 - justify-content: center;
3467 2977 }
3468 2978
3469 2979 .frm-fake-field {
3470 2980 display: block;
@@ -3469,9 +2979,9 @@
3469 2979 .frm-fake-field {
3470 2980 display: block;
3471 2981 height: 25px;
3472 2982 background-color: var(--light-blue);
3473 - border: 1px solid var(--grey-300);
2983 + border: 1px solid var(--grey-border);
3474 2984 margin: 10px 0;
3475 2985 border-radius: var(--small-radius);
3476 2986 }
3477 2987
@@ -3477,17 +2987,15 @@
3477 2987
3478 2988 .frm-embed-message {
3479 2989 position: absolute;
3480 2990 background: #fff;
3481 - border: 1px solid var(--grey-300);
3482 - color: var(--grey-700);
3483 - padding: var(--gap-md);
3484 - font-size: var(--text-lg);
3485 - max-width: 200px;
3486 - min-width: 50%;
3487 - margin: 0 var(--gap-md);
3488 - overflow: hidden;
3489 - text-overflow: ellipsis;
2991 + border: 1px solid var(--grey-border);
2992 + color: var(--dark-grey);
2993 + padding: 37px 0;
2994 + font-size: 18px;
2995 + width: 50%;
2996 + top: 23px;
2997 + left: 25%
3490 2998 }
3491 2999
3492 3000 .frm-summary-message {
3493 3001 top: 50%;
@@ -3492,9 +3000,9 @@
3492 3000 .frm-summary-message {
3493 3001 top: 50%;
3494 3002 left: 50%;
3495 3003 padding: 15px 0;
3496 - font-size: var(--text-md);
3004 + font-size: 16px;
3497 3005 transform: translate(-50%, -50%);
3498 3006 }
3499 3007
3500 3008 .frm-summary-learn-more {
@@ -3503,9 +3011,8 @@
3503 3011
3504 3012 .frm-single-settings .frm-embed-message {
3505 3013 width: 100%;
3506 3014 position: static;
3507 - border-radius: var(--small-radius);
3508 3015 }
3509 3016
3510 3017 #new_fields input[type=text],
3511 3018 #new_fields input[type=number],
@@ -3542,8 +3049,19 @@
3542 3049 width: 16px;
3543 3050 padding: 0;
3544 3051 }
3545 3052
3053 +.frm-star-group:not(.frm-star-hovered) input[type=radio]:checked + label:before,
3054 +.frm-star-group input + label:hover:before,
3055 +.frm-star-group:hover input + label:hover:before,
3056 +.frm-star-group .star-rating-on:before,
3057 +.frm-star-group .star-rating-hover:before,
3058 +.frm-star-group input[type=radio]:checked + label:before,
3059 +.frm-star-group input + label:before,
3060 +.frm-star-group .star-rating:before {
3061 + color: var( --blue-border);
3062 +}
3063 +
3546 3064 .frm_wrap .frm-number-range + .frm_last input,
3547 3065 .frm_wrap .frm-number-range input {
3548 3066 text-align: center;
3549 3067 font-weight: 600;
@@ -3550,9 +3068,9 @@
3550 3068 }
3551 3069
3552 3070 .frm_wrap .frm-number-range input[type=number],
3553 3071 .frm_wrap .frm-number-range input[type=text] {
3554 - color: var(--primary-700);
3072 + color: var(--primary-hover);
3555 3073 }
3556 3074
3557 3075 .frm-range-min {
3558 3076 position: relative;
@@ -3562,25 +3080,24 @@
3562 3080 content: '';
3563 3081 height: 3px;
3564 3082 width: 10px;
3565 3083 border-radius: 30%;
3566 - background: var(--primary-700);
3084 + background: var(--primary-hover);
3567 3085 position: absolute;
3568 3086 top: 17px;
3569 3087 right: -28%;
3570 3088 }
3571 3089
3572 -.frm_grid_container > p,
3573 3090 .frm_grid_container > p.frm_form_field,
3574 3091 .frm_grid_container > div.frm_form_field,
3575 3092 #new_fields .frm_grid_container > p {
3576 - margin-top: 8px;
3577 - margin-bottom: 8px;
3093 + margin-top: 7px;
3094 + margin-bottom: 7px;
3578 3095 margin-right: 0;
3579 3096 }
3580 3097
3581 3098 #new_fields div.frm_grid_container > .frm_primary_label {
3582 - margin-top: 8px;
3099 + margin-top: 7px;
3583 3100 }
3584 3101
3585 3102 #new_fields .frm_primary_label + p,
3586 3103 #new_fields .frm_primary_label + .frm6 + .frm6,
@@ -3614,9 +3131,9 @@
3614 3131 }
3615 3132
3616 3133 .frm_form_builder .frm_radio label,
3617 3134 .frm_form_builder .frm_checkbox label {
3618 - font-size: var(--text-sm);
3135 + font-size: 14px;
3619 3136 }
3620 3137
3621 3138 /* Start copied front-end CSS */
3622 3139 .horizontal_radio .frm_radio,
@@ -3654,64 +3171,22 @@
3654 3171
3655 3172 .frm_wrap .with_frm_style .frm_checkbox input[type=checkbox],
3656 3173 .frm_wrap .with_frm_style .frm_radio input[type=radio],
3657 3174 .frm_wrap input[type=checkbox],
3658 -.frm-white-body input[type=checkbox],
3659 3175 .field-group input[type=checkbox],
3660 3176 .frm_scale input[type=radio],
3661 3177 .frm_radio input[type=radio],
3662 3178 .frm_checkbox input[type=checkbox] {
3663 - border: 1px solid var(--grey-300);
3179 + border: 1px solid var(--grey-border);
3664 3180 box-shadow: none;
3665 3181 -webkit-appearance: none;
3666 3182 }
3667 3183
3668 -
3669 -.frm_wrap .with_frm_style .frm_checkbox input[type=checkbox],
3670 -.frm_wrap input[type=checkbox],
3671 -.frm-white-body input[type=checkbox],
3672 -.field-group input[type=checkbox],
3673 -.frm_checkbox input[type=checkbox] {
3674 - border-radius: 4px;
3675 -}
3676 -
3677 -.frm-white-body input[type="checkbox"]:checked,
3678 -.frm_wrap input[type="checkbox"]:checked {
3679 - background-color: var(--primary-500);
3680 - border-color: var(--primary-500) !important;
3681 -}
3682 -
3683 -.frm-white-body input[type="checkbox"]:checked:focus,
3684 -.frm_wrap input[type="checkbox"]:checked:focus {
3685 - border-color: var(--primary-500);
3686 -}
3687 -
3688 -.frm-white-body input[type="checkbox"]:checked::before,
3689 -.frm_wrap input[type="checkbox"]:checked::before {
3690 - content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2010%2010%27%3E%3Cpath%20d%3D%27M9.2%202c.2.3.2.7%200%201l-5%205c-.3.2-.6.2-.9%200L.8 5.3a.6.6%200%200%201%20.9-.8l2%202%204.6-4.5c.3-.3.6-.3.9%200Z%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E");
3691 - height: 12px;
3692 - width: 12px;
3693 - margin: 1px;
3694 -}
3695 -
3696 3184 .frm_radio input[type="radio"],
3697 3185 .frm_checkbox input[type="checkbox"] {
3698 3186 margin-right: 5px;
3699 3187 }
3700 3188
3701 -.frm_single_entry_page .with_frm_style .frm_radio input[type=radio] {
3702 - margin: 5px 0;
3703 - width: 18px;
3704 - position: relative; /* override Bootstrap */
3705 -}
3706 -
3707 -.frm_single_entry_page .with_frm_style .frm_radio input[type=radio]:before {
3708 - position: relative !important;
3709 - left: calc(50% - 6px);
3710 - top: calc(50% - 6px);
3711 - margin: 0 !important;
3712 -}
3713 -
3714 3189 .frm_inner_field_container {
3715 3190 margin-bottom: 10px;
3716 3191 }
3717 3192
@@ -3737,22 +3212,8 @@
3737 3212 li.ui-state-default.selected > .frm_inner_field_container > label {
3738 3213 max-width: calc(100% - 100px);
3739 3214 }
3740 3215
3741 -.frm-drag-fade {
3742 - background-color: var(--lightest-grey) !important;
3743 - border-radius: 4px;
3744 -}
3745 -
3746 -.frm-drag-fade * {
3747 - opacity: 0;
3748 -}
3749 -
3750 -.frm-dragging .divider_section_only,
3751 -.frm-dragging .frm_field_box {
3752 - pointer-events: none;
3753 -}
3754 -
3755 3216 .frm_form_settings #op-popup, /* 1Password */
3756 3217 .frm_form_settings com-1password-op-button,
3757 3218 .frm_conf_below .frm_conf_field_container .frm_primary_label,
3758 3219 .frm_conf_inline .frm_inner_field_container .frm-show-click a,
@@ -3887,15 +3348,15 @@
3887 3348 animation: spin 2s linear infinite;
3888 3349 }
3889 3350
3890 3351 .frm-wait:before {
3891 - border-bottom-color: var(--primary-700);
3892 - border-right-color: var(--primary-700);
3352 + border-bottom-color: var(--primary-hover);
3353 + border-right-color: var(--primary-hover);
3893 3354 }
3894 3355
3895 3356 .frm_loading_button.frm-button-secondary:before {
3896 - border-bottom-color: var(--primary-500);
3897 - border-right-color: var(--primary-500);
3357 + border-bottom-color: var(--primary-color);
3358 + border-right-color: var(--primary-color);
3898 3359 }
3899 3360
3900 3361 input[type=submit]:focus {
3901 3362 outline: none !important;
@@ -3919,9 +3380,9 @@
3919 3380 #editorcontainer #dyncontent {
3920 3381 margin: 0;
3921 3382 width: 100%;
3922 3383 padding: 6px;
3923 - line-height: var(--leading);
3384 + line-height: 1.5;
3924 3385 border: 0 none;
3925 3386 outline: none;
3926 3387 -moz-box-sizing: border-box;
3927 3388 -webkit-box-sizing: border-box;
@@ -3967,9 +3428,9 @@
3967 3428 font-size: 12px;
3968 3429 }
3969 3430
3970 3431 .frm_border_bottom {
3971 - border-bottom: 1px solid var(--grey-300);
3432 + border-bottom: 1px solid var(--grey-border);
3972 3433 margin-bottom: 10px;
3973 3434 padding-bottom: 10px;
3974 3435 }
3975 3436
@@ -3980,8 +3441,9 @@
3980 3441 .frm_posttax_opt_list .frm_border_bottom input {
3981 3442 margin-right: 1px;
3982 3443 }
3983 3444
3445 +.frm_logic_row,
3984 3446 .frm_add_remove div.frm_form_field {
3985 3447 padding-bottom: 5px;
3986 3448 }
3987 3449
@@ -4039,23 +3501,17 @@
4039 3501 font-size: inherit;
4040 3502 }
4041 3503
4042 3504 #frm-options-panel {
4043 - padding: 0 var(--gap-sm);
4044 - color: var(--grey-900);
3505 + padding: 0 15px;
3506 + color: var(--darkest-grey);
4045 3507 }
4046 3508
4047 -.frm-right-panel a.frm_add_logic_link,
4048 3509 #frm-options-panel h3 {
4049 3510 padding: 15px 0;
4050 3511 margin-top: -2px;
4051 3512 }
4052 3513
4053 -#frm_style_sidebar h3,
4054 -#frm_view_editor_left.frm-right-panel .accordion-section-title {
4055 - padding: 15px 0;
4056 -}
4057 -
4058 3514 .frm_field_key {
4059 3515 background-color: #F7F7F7;
4060 3516 }
4061 3517
@@ -4089,12 +3545,8 @@
4089 3545 .frm-alt-table tr:nth-child(even) {
4090 3546 background-color: var(--sidebar-color);
4091 3547 }
4092 3548
4093 -.frm-alt-table h3 {
4094 - margin-bottom: 0;
4095 -}
4096 -
4097 3549 .form-field .frm_cb_button {
4098 3550 height: 22px;
4099 3551 line-height: 20px;
4100 3552 margin-bottom: 10px;
@@ -4199,9 +3651,9 @@
4199 3651 li.sortable-placeholder {
4200 3652 border: none;
4201 3653 margin: 0;
4202 3654 visibility: visible !important;
4203 - box-shadow: 2px -10px 0 2px var(--primary-500);
3655 + box-shadow: 2px -10px 0 1px var(--primary-color);
4204 3656 }
4205 3657
4206 3658 #frm_form_editor_container > ul > .frm_single_option.ui-sortable-placeholder,
4207 3659 #frm_form_editor_container > ul > li.sortable-placeholder {
@@ -4212,8 +3664,9 @@
4212 3664 #frm_form_editor_container > ul > li > ul {
4213 3665 position: relative;
4214 3666 }
4215 3667
3668 +#frm_form_editor_container > ul > li > ul > .frm_single_option.ui-sortable-placeholder,
4216 3669 #frm_form_editor_container > ul > li > ul > li.sortable-placeholder,
4217 3670 #frm_form_editor_container ul.start_divider > li > ul > li.sortable-placeholder {
4218 3671 position: absolute;
4219 3672 top: 20px;
@@ -4220,29 +3673,38 @@
4220 3673 bottom: 0;
4221 3674 }
4222 3675
4223 3676 .edit_field_type_divider + li.sortable-placeholder {
4224 - box-shadow: 2px 5px 0 2px var(--primary-500);
3677 + box-shadow: 2px 5px 0 1px var(--primary-color);
4225 3678 }
4226 3679
4227 3680 .start_divider li.sortable-placeholder {
4228 - box-shadow: 2px -5px 0 2px var(--primary-500);
3681 + box-shadow: 2px -5px 0 1px var(--primary-color);
4229 3682 }
4230 3683
4231 -.frm-is-collapsed + .sortable-placeholder {
4232 - box-shadow: 2px 15px 0 2px var(--primary-500);
3684 +.frm_single_option.ui-sortable-placeholder {
3685 + box-shadow: 20px -3px 0 1px var(--primary-color);
4233 3686 }
4234 3687
4235 -.frm_single_option.ui-sortable-placeholder {
4236 - box-shadow: 0 0 1px 1px var(--primary-500);
3688 +.frm-is-collapsed + .sortable-placeholder {
3689 + box-shadow: 2px 15px 0 1px var(--primary-color);
4237 3690 }
4238 3691
4239 3692 .frm_sorting > li.edit_field_type_end_divider:first-child,
3693 +.frm_sorting > .frmbutton + .sortable-placeholder, /* hide for first field */
3694 +.no-drop-placeholder,
4240 3695 .frm-show-click,
4241 3696 li.ui-state-default.edit_field_type_divider .frm-show-click {
4242 3697 display: none;
4243 3698 }
4244 3699
3700 +.frm_form_field.ui-sortable-helper {
3701 + height: 30px !important;
3702 + background-color: #fff !important;
3703 + overflow: hidden !important;
3704 + box-sizing: border-box;
3705 +}
3706 +
4245 3707 .frm_form_field.ui-sortable-helper .frm-field-action-icons,
4246 3708 .frm_form_field.ui-sortable-helper .frm_form_fields,
4247 3709 .frm_form_field.ui-sortable-helper .frm_description,
4248 3710 .frm_form_field.ui-sortable-helper .description {
@@ -4344,10 +3806,10 @@
4344 3806 /* Image options for Radio and Checkbox */
4345 3807
4346 3808 .frm_image_options .frm_image_option_container {
4347 3809 --field-border-width: 1px;
4348 - --border-color: var(--grey-300);
4349 - --border-color-active: var(--primary-500);
3810 + --border-color: var(--grey-border);
3811 + --border-color-active: var(--primary-color);
4350 3812 --border-radius: var(--small-radius);
4351 3813 }
4352 3814
4353 3815 .frm_image_option_container svg {
@@ -4401,10 +3863,10 @@
4401 3863 height: 75px;
4402 3864 object-fit: cover;
4403 3865 }
4404 3866
4405 -.frm_list_entry_page img {
4406 - max-width: 100%;
3867 +.frm_list_entry_page .frm_file_link img {
3868 + max-width: 75px;
4407 3869 height: auto;
4408 3870 }
4409 3871
4410 3872 .frm_image_option_container .frm_empty_url {
@@ -4448,13 +3910,13 @@
4448 3910 margin-top: 17px;
4449 3911 }
4450 3912
4451 3913 .frm_image_data {
4452 - margin-left: var(--gap-xs);
3914 + margin-left: 10px;
4453 3915 display: flex;
4454 3916 flex-direction: column;
4455 - font-size: var(--text-sm);
4456 - justify-content: space-around;
3917 + font-size: 14px;
3918 + line-height: 17px;
4457 3919 }
4458 3920
4459 3921 .frm_image_styling_frame {
4460 3922 display: flex;
@@ -4478,9 +3940,10 @@
4478 3940 max-width: 54px;
4479 3941 }
4480 3942
4481 3943 .frm_image_preview_title{
4482 - color: var(--grey-500);
3944 + margin-top: 6px;
3945 + color: rgba(40, 47, 54, 0.65);
4483 3946 overflow: hidden;
4484 3947 white-space: nowrap;
4485 3948 text-overflow: ellipsis;
4486 3949 }
@@ -4486,9 +3949,9 @@
4486 3949 }
4487 3950
4488 3951 .frm_wrap .frm_choose_image_box {
4489 3952 cursor: pointer;
4490 - color: var(--grey-700);
3953 + color: var(--dark-grey);
4491 3954 background-color: #F2F2F2;
4492 3955 margin-left: 24px;
4493 3956 text-align: center;
4494 3957 width: 100%;
@@ -4497,11 +3960,13 @@
4497 3960 .frm_wrap .frm_choose_image_box:hover {
4498 3961 background: #fff;
4499 3962 }
4500 3963
3964 +a.frm_remove_image_option .frmsvg,
4501 3965 a.frm_remove_image_option,
4502 3966 .frm_remove_image_option {
4503 - color: var(--grey-400);
3967 + margin-top: 9px;
3968 + color: rgba(40, 47, 54, 0.4);
4504 3969 cursor: pointer;
4505 3970 }
4506 3971
4507 3972 a.frm_remove_image_option:hover .frmsvg,
@@ -4511,10 +3976,17 @@
4511 3976 }
4512 3977
4513 3978 /* Form settings */
4514 3979
3980 +#form_settings_page label,
3981 +.frm_form_builder label {
3982 + font-weight: normal;
3983 + font-size: 15px;
3984 + color: var(--dark-grey);
3985 +}
3986 +
4515 3987 .frm-form-setting-tabs {
4516 - margin-top: var(--gap-sm) !important;
3988 + margin-top: 20px !important;
4517 3989 }
4518 3990
4519 3991 .frm-right-panel > .postbox {
4520 3992 background-color: transparent;
@@ -4525,44 +3997,40 @@
4525 3997
4526 3998 .frm-right-panel .postbox.frm_with_icons .inside,
4527 3999 .frm-right-panel .postbox .inside,
4528 4000 .frm-right-panel .inside {
4529 - font-size: var(--text-md);
4001 + font-size: 16px;
4530 4002 padding: 15px 20px 20px;
4531 - color: var(--grey-700);
4003 + color: var(--dark-grey);
4532 4004 }
4533 4005
4534 4006 .frm-right-panel .misc-pub-section {
4535 - padding: var(--gap-xs) 0;
4007 + padding: 10px 0;
4008 + line-height: 1.4em;
4536 4009 position: relative;
4537 4010 }
4538 4011
4539 4012 .frm-right-panel .inside a,
4540 4013 .frm-form-setting-tabs a {
4541 - font-size: var(--text-md);
4542 - color: var(--grey-700);
4543 - padding: var(--gap-sm);
4014 + font-size: 16px;
4015 + color: var(--dark-grey);
4016 + padding: 15px 15px 15px 20px;
4544 4017 display: block;
4545 4018 }
4546 4019
4547 -.frm-form-setting-tabs a {
4548 - color: var(--grey-900);
4549 - padding: var(--gap-sm) var(--gap-md);
4550 -}
4551 -
4552 4020 .frm-right-panel .inside a {
4553 4021 padding: 0;
4554 - color: var(--primary-500);
4022 + color: var(--primary-color);
4555 4023 display: inline-block;
4556 4024 }
4557 4025
4558 4026 .frm-right-panel .inside a:hover {
4559 - color: var(--primary-700);
4027 + color: var(--primary-hover);
4560 4028 }
4561 4029
4562 4030 .frm-form-setting-tabs a:hover {
4563 4031 background: var(--sidebar-hover);
4564 - color: var(--grey-900);
4032 + color: var(--dark-grey);
4565 4033 }
4566 4034
4567 4035 .frm-right-panel .inside i,
4568 4036 .frm-right-panel .inside .frmsvg,
@@ -4571,20 +4039,16 @@
4571 4039 margin: 0 5px;
4572 4040 display: inline-block;
4573 4041 width: 20px;
4574 4042 height: 20px;
4575 - color: var(--grey-500);
4043 + color: var(--grey);
4576 4044 }
4577 4045
4578 -.frm-form-setting-tabs a .frmsvg {
4579 - margin: 0;
4580 -}
4581 -
4582 4046 .frm-right-panel .inside a:hover i,
4583 4047 .frm-right-panel .inside a:hover .frmsvg,
4584 4048 .frm-form-setting-tabs a:hover .frmsvg,
4585 4049 .frm-form-setting-tabs a:hover span {
4586 - color: var(--grey-700);
4050 + color: var(--dark-grey);
4587 4051 }
4588 4052
4589 4053 .frm_settings_form .tabs-panel {
4590 4054 padding: 0 25px;
@@ -4598,9 +4062,9 @@
4598 4062
4599 4063 #frm_adv_info .tabs-panel {
4600 4064 min-height: 0 !important;
4601 4065 overflow-x: hidden;
4602 - padding: 0;
4066 + padding: 0 20px;
4603 4067 border: none;
4604 4068 background: transparent;
4605 4069 }
4606 4070
@@ -4609,130 +4073,48 @@
4609 4073 }
4610 4074
4611 4075 .frm_posttax_opt_list,
4612 4076 .frm_submit_logic_rows {
4613 - border: 1px solid var(--grey-300);
4614 - padding: var(--gap-md);
4077 + border: 1px solid var(--grey-border);
4078 + padding: 25px;
4615 4079 border-radius: var(--small-radius);
4616 - margin: 5px 0 5px var(--gap-md);
4080 + margin: 5px 0 5px 25px;
4617 4081 }
4618 4082
4619 -.frm_submit_logic_rows .frm_grid_container > p.frm_form_field {
4620 - margin: 0;
4621 -}
4622 -
4623 -/* Color picker CSS */
4624 -.frm-right-panel .wp-picker-open + .wp-picker-input-wrap {
4083 +/* Admin toggle */
4084 +.frm_toggle_off,
4085 +.frm_toggle_on {
4086 + display: none;
4087 + color: #fff;
4088 + z-index: 999;
4625 4089 position: absolute;
4626 - margin-left: calc( ( 100% - 35px ) * -1 );
4627 - margin-top: 1px;
4628 - width: calc( 100% - 36px );
4090 + font-size: 10px;
4091 + line-height: 20px;
4092 + left: 6px;
4629 4093 }
4630 4094
4631 -.frm-right-panel .wp-picker-container input[type="text"].wp-color-picker {
4632 - border: none;
4633 - padding: 5px 8px;
4634 - font-family: inherit;
4635 - color: var(--grey-700);
4636 - font-size: var(--text-md);
4637 - width: 100%;
4638 - line-height: var(--leading);
4639 -}
4640 -
4641 -.frm-right-panel .wp-picker-input-wrap .wp-picker-clear {
4642 - display: none !important;
4643 -}
4644 -
4645 -.frm-right-panel .wp-picker-holder {
4646 - position: absolute;
4647 - z-index: 999;
4648 -}
4649 -
4650 -.frm-right-panel .wp-picker-input-wrap label {
4651 - margin-bottom: 0;
4652 -}
4653 -
4654 -.frm-right-panel .wp-picker-container .wp-color-result.button {
4655 - width: 100%;
4656 - overflow: hidden;
4657 - margin: 0 !important;
4658 - height: var(--h-md) !important;
4659 - padding: 0 0 0 var(--gap-lg) !important;
4660 - border-radius: var(--small-radius);
4661 - border-color: var(--grey-300);
4662 -}
4663 -
4664 -.frm-right-panel .wp-color-result-text {
4665 - line-height: var(--leading) !important;
4666 - font-size: var(--text-md);
4667 - background: #fff !important;
4668 - color: var(--grey-900);
4669 - padding: 5px 8px;
4670 - border-color: var(--grey-300);
4671 - text-align: left;
4672 -}
4673 -
4674 -.frm-right-panel .color-alpha {
4675 - width: var(--gap-lg) !important;
4676 -}
4677 -
4678 -.frm_grid_container .wp-picker-container {
4679 - width: 100%;
4680 - position: relative;
4681 -}
4682 -
4683 -.wp-picker-container button.wp-color-result {
4684 - border: 1px solid var(--grey-300) !important;
4685 -}
4686 -
4687 -.wp-picker-container .wp-picker-input-wrap input.hex.wp-color-picker {
4688 - max-width: 100%;
4689 - position: relative;
4690 -}
4691 -
4692 -.frm_end .wp-picker-holder {
4693 - margin-left: -145px;
4694 -}
4695 -
4696 -.frm_end.frm6 .wp-picker-holder {
4697 - margin-left: -86px;
4698 -}
4699 -/* End of color picker CSS */
4700 -
4701 -/*
4702 -These are the styles for the "Enable Formidable styling" toggle in the visual styler.
4703 -To use this element, you can call the FrmHtmlHelper::toggle function.
4704 -*/
4705 -.frm_toggle_opt {
4706 - padding: 0;
4707 - white-space: normal;
4095 +.frm_toggle_off {
4708 4096 display: inline;
4709 - vertical-align: middle;
4710 - font-weight: normal;
4097 + left: auto;
4098 + right: 5px;
4099 + color: var(--dark-grey);
4711 4100 }
4712 4101
4713 -.frm_on_label,
4714 -.frm_off_label {
4715 - color: #444444;
4716 -}
4717 -
4718 4102 .frm_toggle {
4719 4103 position: relative;
4720 4104 display: inline-block;
4721 - width: 40px;
4722 - height: var(--h-xs);
4105 + width: 45px;
4106 + height: 20px;
4723 4107 vertical-align: middle;
4108 + margin: 2px;
4724 4109 }
4725 4110
4726 -.frm_toggle_block {
4727 - display: inline-flex;
4728 - gap: var(--gap-sm);
4729 - align-items: center;
4111 +label > span.frm_toggle {
4112 + margin-right: 15px;
4730 4113 }
4731 4114
4732 -.frm_toggle input, /* Reverse compatibility */
4733 -.frm_toggle_block input {
4734 - display:none !important;
4115 +.frm_toggle input {
4116 + display: none !important;
4735 4117 }
4736 4118
4737 4119 .frm_toggle_slider {
4738 4120 position: absolute;
@@ -4740,44 +4122,26 @@
4740 4122 top: 0;
4741 4123 left: 0;
4742 4124 right: 0;
4743 4125 bottom: 0;
4744 - background-color: var(--grey-border);
4745 4126 transition: .4s;
4746 4127 border-radius: 30px;
4128 + background-color: #fff;
4129 + box-shadow: 0 0 0 2px var(--grey);
4747 4130 }
4748 4131
4749 4132 .frm_toggle_slider:before {
4750 4133 border-radius: 50%;
4751 4134 position: absolute;
4752 - 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>");
4753 - height: 22px;
4754 - width: 22px;
4755 - padding: 0 5.5px;
4756 - left: 1px;
4757 - bottom: 1px;
4758 - background-color: white;
4759 - transition: .4s;
4760 - box-sizing: border-box;
4761 - box-shadow: var(--box-shadow-md);
4762 - font-size: 21px;
4763 - line-height: 18px;
4135 + content: "";
4136 + height: 16px;
4137 + width: 16px;
4138 + left: 2px;
4139 + top: 2px;
4140 + transition: .3s;
4141 + background-color: var(--grey);
4764 4142 }
4765 4143
4766 -input:checked + .frm_toggle .frm_toggle_slider {
4767 - background-color: var(--primary-500);
4768 -}
4769 -
4770 -input:focus + .frm_toggle .frm_toggle_slider {
4771 - box-shadow: var(--box-shadow-md);
4772 -}
4773 -
4774 -input:checked + .frm_toggle .frm_toggle_slider:before {
4775 - padding: 0 6px;
4776 - transform: translateX(16px);
4777 - 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>");
4778 -}
4779 -
4780 4144 input[disabled] + .frm_toggle_slider {
4781 4145 pointer-events: none;
4782 4146 cursor: text;
4783 4147 opacity: .5;
@@ -4782,53 +4146,16 @@
4782 4146 cursor: text;
4783 4147 opacity: .5;
4784 4148 }
4785 4149
4786 -.frm_toggle_opt ~ .frm_toggle .frm_toggle_slider:before {
4787 - content: '' !important; /* Don't show x/check if off label included or on builder page */
4788 -}
4789 -
4790 -.rtl .frm_toggle_opt {
4791 - padding: 0 8px;
4792 -}
4793 -
4794 -.rtl .frm_toggle_slider:before {
4795 - left: 17px;
4796 -}
4797 -
4798 -.rtl input:checked + .frm_toggle .frm_toggle_slider:before {
4799 - transform: none!important;
4800 - left: 1px;
4801 -}
4802 -
4803 -/* Deprecated admin toggle */
4804 -.frm_toggle_off,
4805 -.frm_toggle_on {
4806 - display: none;
4807 - color: #fff;
4808 - z-index: 999;
4809 - position: absolute;
4810 - font-size: 10px;
4811 - line-height: 20px;
4812 - left: 6px;
4813 -}
4814 -
4815 -.frm_toggle_off {
4816 - display: inline;
4817 - left: auto;
4818 - right: 5px;
4819 - color: var(--dark-grey);
4820 -}
4821 -
4822 4150 .frm_toggle_long {
4823 - width: 80% !important;
4151 + width: 80%;
4824 4152 height: 28px;
4825 - display: inline-block !important;
4826 4153 }
4827 4154
4828 4155 .frm_toggle_long .frm_toggle_slider {
4829 - background: var(--primary-700);
4830 - box-shadow: 0 0 0 2px var(--primary-700);
4156 + background: var(--primary-hover);
4157 + box-shadow: 0 0 0 2px var(--primary-hover);
4831 4158 }
4832 4159
4833 4160 .frm_toggle_long .frm_toggle_off,
4834 4161 .frm_toggle_long .frm_toggle_on {
@@ -4853,11 +4180,20 @@
4853 4180 border-radius: var(--border-radius) 0 0 var(--border-radius);
4854 4181 height: 100%;
4855 4182 background-color: #fff;
4856 4183 color: var(--primary-color);
4857 - content: '' !important;
4858 4184 }
4859 4185
4186 +input:checked + .frm_toggle_slider {
4187 + background-color: var(--primary-hover);
4188 + box-shadow: 0 0 0 2px var(--primary-hover);
4189 +}
4190 +
4191 +input:checked + .frm_toggle_slider:before {
4192 + transform: translateX(25px);
4193 + background-color: #fff;
4194 +}
4195 +
4860 4196 .frm_toggle_long input:checked + .frm_toggle_slider:before {
4861 4197 transform: translateX(101%);
4862 4198 border-radius: 0 var(--border-radius) var(--border-radius) 0;
4863 4199 }
@@ -4872,9 +4208,9 @@
4872 4208
4873 4209 .frm_toggle_long .frm_toggle_on,
4874 4210 .frm_toggle_long input:checked + .frm_toggle_slider + .frm_toggle_on + .frm_toggle_off {
4875 4211 display: inline;
4876 - color: var(--primary-500);
4212 + color: var(--primary-color);
4877 4213 font-weight: normal;
4878 4214 }
4879 4215
4880 4216 .frm_toggle_long .frm_toggle_off,
@@ -4882,9 +4218,11 @@
4882 4218 color: #fff;
4883 4219 font-weight: bold;
4884 4220 }
4885 4221
4886 -/* End toggle styling */
4222 +input:focus + .frm_toggle_slider {
4223 + box-shadow: 0 0 1px #008ec2;
4224 +}
4887 4225
4888 4226 /* Global Settings */
4889 4227
4890 4228 .tabs-panel {
@@ -4902,59 +4240,21 @@
4902 4240 margin-right: 20px !important;
4903 4241 display: inline-block !important;
4904 4242 }
4905 4243
4906 -#frm_stripe_icon {
4907 - border-radius: 5px;
4908 -}
4909 -
4910 -#captcha_settings .frm_primary_label {
4911 - margin-top: var(--gap-sm);
4912 -}
4913 -
4914 -.frm-long-icon-buttons {
4915 - display: flex;
4916 - gap: var(--gap-md);
4917 -}
4918 -
4919 -.frm-long-icon-buttons > label {
4920 - border: 1px solid var(--grey-300);
4921 - color: var(--grey-700);
4922 - border-radius: var(--small-radius);
4923 - display: flex;
4924 - padding: var(--gap-sm);
4925 - gap: var(--gap-sm);
4926 - justify-content: center;
4927 - align-items: center;
4928 - width: calc( 33% - var(--gap-sm) );
4929 - box-sizing: border-box;
4930 -}
4931 -
4932 -.frm-long-icon-buttons > label:hover {
4933 - color: var(--primary-500);
4934 -}
4935 -
4936 -.frm-long-icon-buttons input[type=radio] {
4937 - display: none;
4938 -}
4939 -
4940 -.frm-long-icon-buttons input[type=radio]:checked + label {
4941 - border-color: var(--primary-500);
4942 - box-shadow: 0 0 0 1px var(--primary-color);
4943 -}
4944 -
4945 -.frm-long-icon-buttons label > svg {
4946 - height: 21px;
4947 -}
4948 -
4949 4244 .frm-example-icon .frmsvg,
4950 4245 .frm-example-icon i {
4951 4246 height: 20px;
4952 4247 width: 20px;
4953 4248 font-size: 20px;
4954 - color: var(--grey-700);
4249 + color: var(--dark-grey);
4955 4250 }
4956 4251
4252 +.edd_frm_license_row {
4253 + clear: both;
4254 + line-height: 2em;
4255 +}
4256 +
4957 4257 .frm_license_msg {
4958 4258 margin-top: 0;
4959 4259 }
4960 4260
@@ -4981,14 +4281,23 @@
4981 4281
4982 4282 .frm_no_items {
4983 4283 margin: 0 auto 50px;
4984 4284 text-align: center;
4985 - color: var(--grey-700);
4285 + color: var(--dark-grey);
4986 4286 max-width: 500px;
4987 4287 }
4988 4288
4289 +.frm_no_items h2 {
4290 + font-size: 25px;
4291 + margin-bottom: 30px !important;
4292 +}
4293 +
4294 +.frm_no_items p {
4295 + font-size: 14px;
4296 +}
4297 +
4989 4298 .frm-subscribe {
4990 - margin: var(--gap-lg) 0;
4299 + margin: 30px 0;
4991 4300 }
4992 4301
4993 4302 /* Inbox */
4994 4303
@@ -4998,16 +4307,16 @@
4998 4307
4999 4308 .frm_inbox_card {
5000 4309 display: grid;
5001 4310 grid-template-columns: 72px 1fr;
5002 - grid-gap: var(--gap-xs);
5003 - border-bottom: 1px solid var(--grey-300);
5004 - padding: var(--gap-md);
4311 + grid-gap: 15px;
4312 + border-bottom: 1px solid var(--grey-border);
4313 + padding: 25px;
5005 4314 }
5006 4315
5007 4316 .frm_inbox_card_icon {
5008 4317 grid-row: span 3 / span 3;
5009 - padding-top: var(--gap-xs);
4318 + padding-top: 20px;
5010 4319 text-align: center
5011 4320 }
5012 4321
5013 4322 .frm_inbox_card_icon svg {
@@ -5026,8 +4335,11 @@
5026 4335 border: none;
5027 4336 text-transform: none;
5028 4337 margin: 0;
5029 4338 padding: 0;
4339 + font-weight: 600;
4340 + color: var(--medium-grey);
4341 + font-size: 16px;
5030 4342 }
5031 4343
5032 4344 .frm_inbox_date {
5033 4345 text-align: right;
@@ -5055,8 +4367,37 @@
5055 4367 margin-left: 2px;
5056 4368 vertical-align: text-bottom;
5057 4369 }
5058 4370
4371 +/* Styles tabs */
4372 +
4373 +#frm_styling_form #frm_delete_style {
4374 + padding-right: 10px;
4375 +}
4376 +
4377 +#frm_styling_form #frm_delete_style .frmsvg {
4378 + vertical-align: -webkit-baseline-middle;
4379 +}
4380 +
4381 +.frm_pro_form .frm_form_field.frm_lite_style,
4382 +.frm_pro_form .frm_lite_style {
4383 + display: none !important;
4384 +}
4385 +
4386 +label.default-style-box input[type="checkbox"] {
4387 + vertical-align: middle;
4388 +}
4389 +
4390 +#frm_styling_form .frm_form_field input[type="checkbox"],
4391 +#frm_styling_form .frm_form_field input[type="radio"] {
4392 + vertical-align: bottom;
4393 +}
4394 +
4395 +#frm_styling_form .howto span {
4396 + float: none;
4397 + margin-top: 0;
4398 +}
4399 +
5059 4400 /* Import/Export */
5060 4401 .csv_opts #frm_csv_col_sep {
5061 4402 width: 45px;
5062 4403 }
@@ -5107,9 +4448,9 @@
5107 4448 padding: 0;
5108 4449 }
5109 4450
5110 4451 .frm-feature-banner {
5111 - background: var(--grey-700);
4452 + background: var(--dark-grey);
5112 4453 color: #fff;
5113 4454 border-radius: var(--small-radius);
5114 4455 padding: 20px;
5115 4456 margin: 10px 0;
@@ -5115,9 +4456,9 @@
5115 4456 margin: 10px 0;
5116 4457 }
5117 4458
5118 4459 .frm-feature-banner p {
5119 - font-size: var(--text-sm);
4460 + font-size: 14px;
5120 4461 }
5121 4462
5122 4463 .frm-feature-banner .dismiss {
5123 4464 margin-top: -10px;
@@ -5152,31 +4493,29 @@
5152 4493 /*Form Settings Tab*/
5153 4494
5154 4495 h2.frm-h2,
5155 4496 .frm_form_settings h2 {
5156 - border-bottom: 1px solid var(--grey-300);
5157 - color: var(--grey-900);
5158 - font-weight: 400 !important;
4497 + border-bottom: 1px solid var(--grey-border);
4498 + color: var(--dark-grey);
4499 + font-size: 20px !important;
4500 + font-weight: 500 !important;
5159 4501 padding: 9px 0 5px;
5160 4502 margin: 0;
5161 4503 }
5162 4504
5163 4505 .frm_settings_form h3,
5164 -.frm_form_settings h3,
5165 -.frm_form_settings span.frm_add_logic_link {
5166 - font-size: var(--text-md);
5167 - border-top: 1px solid var(--grey-300);
5168 - padding-top: var(--gap-sm);
5169 - margin: var(--gap-sm) 0;
4506 +.frm_form_settings h3 {
4507 + font-size: 16px;
4508 + border-top: 1px solid var(--grey-border);
4509 + padding-top: 10px;
5170 4510 font-weight: normal;
5171 4511 text-transform: uppercase;
5172 4512 color: var(--medium-grey);
5173 - display: block;
5174 4513 }
5175 4514
5176 4515 .frm_form_settings .howto {
5177 - color: var(--grey-500);
5178 - font-size: var(--text-sm);
4516 + color: var(--medium-grey);
4517 + font-size: 15px;
5179 4518 margin-top: 8px;
5180 4519 }
5181 4520
5182 4521 .frm_form_settings .advanced_settings .form-table {
@@ -5191,10 +4530,18 @@
5191 4530 width: 95%;
5192 4531 }
5193 4532
5194 4533 .frm_wrap .ui-autocomplete {
4534 + box-shadow: none;
4535 + border: 1px solid var(--grey-border);
4536 + border-radius: var(--small-radius);
4537 + background: var(--lightest-grey);
4538 + position: absolute;
5195 4539 padding: 3px 0;
4540 + font-size: 15px;
5196 4541 max-height: 310px;
4542 + overflow-y: auto;
4543 + overflow-x: hidden;
5197 4544 }
5198 4545
5199 4546 .frm_wrap .ui-widget {
5200 4547 font-family: inherit;
@@ -5200,15 +4547,26 @@
5200 4547 font-family: inherit;
5201 4548 }
5202 4549
5203 4550 .frm_wrap .ui-autocomplete li {
5204 - padding: 2px 4px;
4551 + padding: 2px 10px;
5205 4552 background: none;
5206 - color: var(--grey-700);
4553 + color: var(--dark-grey);
5207 4554 border: none;
5208 4555 font-weight: normal;
5209 4556 }
5210 4557
4558 +.frm_wrap .ui-autocomplete li div.ui-state-active,
4559 +.frm_wrap .ui-autocomplete li.ui-state-focus {
4560 + background: rgb(65, 153, 253);
4561 + color: #fff;
4562 +}
4563 +
4564 +.frm_wrap .ui-autocomplete .ui-menu-item-wrapper {
4565 + padding: 2px 10px;
4566 + border-radius: var(--small-radius);
4567 +}
4568 +
5211 4569 .frm_wrap .ui-autocomplete .ui-menu-item-wrapper.ui-state-active {
5212 4570 border: none;
5213 4571 font-weight: inherit;
5214 4572 }
@@ -5247,9 +4605,9 @@
5247 4605 #frm-insert-fields-box ul.frm_code_list li.clear.frm_block {
5248 4606 height: 10px;
5249 4607 }
5250 4608
5251 -#frm_adv_info .frm_noallow {
4609 +.frm_page_container #frm_adv_info .frm_noallow {
5252 4610 display: none;
5253 4611 }
5254 4612
5255 4613 #frm_adv_info #frm-conditionals .frm_noallow {
@@ -5284,9 +4642,9 @@
5284 4642 #frm_notification_settings .widget-top .widget-action,
5285 4643 #frm_form_editor_container .widget-top .widget-action {
5286 4644 border: 0;
5287 4645 margin: 0;
5288 - padding: 8px;
4646 + padding: 10px;
5289 4647 background: 0 0;
5290 4648 cursor: pointer;
5291 4649 outline: 0;
5292 4650 }
@@ -5291,12 +4649,12 @@
5291 4649 outline: 0;
5292 4650 }
5293 4651
5294 4652 #frm_email_addon_menu {
5295 - border: 1px solid var(--grey-300);
5296 - padding: var(--gap-sm);
4653 + border: 1px solid var(--grey-border);
4654 + padding: 15px;
5297 4655 border-radius: 4px;
5298 - margin: var(--gap-md) 0 var(--gap-sm);
4656 + margin: 25px 0 15px;
5299 4657 }
5300 4658
5301 4659 #frm_email_addon_menu .frm-search {
5302 4660 float: right;
@@ -5307,12 +4665,8 @@
5307 4665 clear: none;
5308 4666 padding-top: 7px;
5309 4667 }
5310 4668
5311 -.frm_email_settings .widget .widget-top {
5312 - background-color: var(--sidebar-color);
5313 -}
5314 -
5315 4669 .frm_email_settings .widget .widget-top,
5316 4670 .frm_email_settings .widget .widget-top h3 {
5317 4671 cursor: pointer !important;
5318 4672 }
@@ -5317,17 +4671,23 @@
5317 4671 cursor: pointer !important;
5318 4672 }
5319 4673
5320 4674 .frm_email_settings .widget {
5321 - margin-bottom: var(--gap-sm);
4675 + margin-bottom: 15px;
4676 + line-height: 1.4em;
4677 + padding: 0;
5322 4678 }
5323 4679
4680 +.frm_email_settings .widget:last-of-type {
4681 + margin-bottom: 20px;
4682 +}
4683 +
5324 4684 .frm_form_action_settings .widget-top {
5325 4685 box-shadow: none;
5326 - border-color: var(--grey-300);
5327 - border-radius: var(--small-radius);
4686 + border-color: var(--grey-border);
4687 + border-radius: 4px;
5328 4688 background: var(--lightest-grey);
5329 - color: var(--grey-700);
4689 + color: var(--dark-grey);
5330 4690 }
5331 4691
5332 4692 .frm_form_action_settings:hover .widget-top {
5333 4693 border-color: var(--grey);
@@ -5339,9 +4699,9 @@
5339 4699 border-bottom: none;
5340 4700 }
5341 4701
5342 4702 .frm_form_action_settings.open:hover .widget-top {
5343 - border-color: var(--grey-300);
4703 + border-color: var(--grey-border);
5344 4704 }
5345 4705
5346 4706 .frm_form_action_settings > .widget-inside {
5347 4707 display: none;
@@ -5353,9 +4713,9 @@
5353 4713
5354 4714 .frm_form_action_settings .widget-inside {
5355 4715 min-height: 25px;
5356 4716 padding: 15px;
5357 - border-color: var(--grey-300);
4717 + border-color: var(--grey-border);
5358 4718 border-bottom-left-radius: 4px;
5359 4719 border-bottom-right-radius: 4px;
5360 4720 }
5361 4721
@@ -5363,14 +4723,14 @@
5363 4723 .frm_form_action_settings .widget-title h3 {
5364 4724 display: inline-block;
5365 4725 border-bottom: none;
5366 4726 padding: 10px 10px 5px;
5367 - font-size: var(--text-md);
4727 + font-size: 16px;
5368 4728 font-weight: 500;
5369 4729 }
5370 4730
5371 4731 #frm_email_addon_menu h3 {
5372 - margin: 0 0 var(--gap-sm);
4732 + margin: 0 0 15px;
5373 4733 clear: both;
5374 4734 }
5375 4735
5376 4736 .frm_single_api_settings p > label {
@@ -5406,9 +4766,9 @@
5406 4766 }
5407 4767
5408 4768 #frm-hide-groups,
5409 4769 #frm-show-groups {
5410 - font-size: var(--text-md);
4770 + font-size: 16px;
5411 4771 float: right;
5412 4772 }
5413 4773
5414 4774 .frm_actions_list a:active, .frm_actions_list a:focus {
@@ -5415,16 +4775,16 @@
5415 4775 outline: none;
5416 4776 }
5417 4777
5418 4778 .frm_actions_list a {
5419 - font-size: var(--text-sm);
5420 - color: var(--grey-700);
4779 + font-size: 14px;
4780 + color: var(--dark-grey);
5421 4781 word-break: break-word;
5422 4782 }
5423 4783
5424 4784 .frm_actions_list span.frm-outer-circle {
5425 4785 /* 50px total with 30px content */
5426 - background-color: var(--grey-100);
4786 + background-color: var(--sidebar-color);
5427 4787 padding: 10px;
5428 4788 text-align: center;
5429 4789 border-radius: 50%;
5430 4790 display: block;
@@ -5430,13 +4790,12 @@
5430 4790 display: block;
5431 4791 width: 30px;
5432 4792 height: 30px;
5433 4793 margin: 0 auto 15px;
5434 - line-height: 1;
5435 4794 }
5436 4795
5437 4796 .frm_email_settings .widget-title h4 {
5438 - color: var(--grey-700);
4797 + color: var(--dark-grey);
5439 4798 }
5440 4799
5441 4800 .frm_disabled_action .widget-title h4 {
5442 4801 color: var(--grey);
@@ -5452,17 +4811,16 @@
5452 4811 }
5453 4812
5454 4813 span.frm-inner-circle,
5455 4814 .frm_email_settings .widget-title .frm_form_action_icon {
5456 - background-color: var(--grey-400);
4815 + background-color: var(--grey-border);
5457 4816 border-radius: 50%;
5458 4817 display: inline-block;
5459 4818 text-align: center;
5460 - line-height: 1;
5461 4819 }
5462 4820
5463 4821 span.frm-inner-circle {
5464 - background-color: var(--primary-700);
4822 + background-color: var(--primary-hover);
5465 4823 height: 22px;
5466 4824 width: 22px;
5467 4825 padding: 4px;
5468 4826 color: #fff;
@@ -5475,9 +4833,9 @@
5475 4833 .frm_email_settings .widget-title .frm_form_action_icon {
5476 4834 height: 15px;
5477 4835 width: 15px;
5478 4836 padding: 5px;
5479 - color: #fff;
4837 + color: var(--lightest-grey);
5480 4838 vertical-align: middle;
5481 4839 }
5482 4840
5483 4841 .frm_actions_list .frmsvg,
@@ -5498,9 +4856,9 @@
5498 4856 }
5499 4857
5500 4858 span.frm-inner-circle.frm-inverse {
5501 4859 background-color: transparent;
5502 - color: var(--primary-700);
4860 + color: var(--primary-hover);
5503 4861 padding: 0;
5504 4862 height: 30px;
5505 4863 width: 100%;
5506 4864 }
@@ -5506,9 +4864,9 @@
5506 4864 }
5507 4865
5508 4866 .frm_actions_list span.frm-inverse i,
5509 4867 .frm_actions_list span.frm-inverse .frmsvg {
5510 - color: var(--primary-700);
4868 + color: var(--primary-hover);
5511 4869 height: 30px;
5512 4870 width: 30px;
5513 4871 font-size: 30px;
5514 4872 padding: 0;
@@ -5520,9 +4878,9 @@
5520 4878 font-size: 30px;
5521 4879 }
5522 4880
5523 4881 .frm_email_settings .widget-title .frm_form_action_icon.frm-inverse {
5524 - background: #fff;
4882 + background: transparent;
5525 4883 padding: 0;
5526 4884 height: 24px;
5527 4885 width: 24px;
5528 4886 }
@@ -5528,17 +4886,18 @@
5528 4886 }
5529 4887
5530 4888 .frm_email_settings .widget-title .frm_form_action_icon.frm-inverse .frmsvg,
5531 4889 .frm_email_settings .widget-title .frm_form_action_icon.frm-inverse i:before {
5532 - color: var(--grey-400);
4890 + color: var(--grey-border);
5533 4891 height: 24px;
5534 4892 width: 24px;
5535 4893 font-size: 24px;
4894 + line-height: 1em;
5536 4895 }
5537 4896
5538 4897 .frm_email_settings .widget-title:hover .frm_form_action_icon.frm-inverse .frmsvg,
5539 4898 .frm_email_settings .widget-title:hover .frm_form_action_icon.frm-inverse i:before {
5540 - color: var(--grey-500);
4899 + color: var(--grey);
5541 4900 }
5542 4901
5543 4902 .frm_email_icons {
5544 4903 padding: 10px 0 5px 6px;
@@ -5549,8 +4908,9 @@
5549 4908 margin-left: 8px;
5550 4909 color: var(--grey);
5551 4910 opacity: 0;
5552 4911 transition: all .2s ease;
4912 + vertical-align: middle;
5553 4913 }
5554 4914
5555 4915 .frm_email_icons a .frmsvg {
5556 4916 color: var(--grey);
@@ -5569,8 +4929,16 @@
5569 4929 .frm_actions_list .frm_inactive_action i {
5570 4930 opacity: .4;
5571 4931 }
5572 4932
4933 +.frm-no-margin {
4934 + margin: 0;
4935 +}
4936 +
4937 +.frm-no-border {
4938 + border: none !important;
4939 +}
4940 +
5573 4941 table td, .form-table tr td {
5574 4942 vertical-align: top;
5575 4943 }
5576 4944
@@ -5597,12 +4965,8 @@
5597 4965 #frm_notification_settings .frm_form_action_settings td p {
5598 4966 padding: 7px 0;
5599 4967 }
5600 4968
5601 -#permissions_settings_settings .frm_grid_container {
5602 - align-items: center;
5603 -}
5604 -
5605 4969 #frm_notification_settings .form-table > tbody > tr > th {
5606 4970 width: 150px;
5607 4971 font-weight: normal;
5608 4972 padding-right: 10px;
@@ -5624,8 +4988,9 @@
5624 4988 #frm_notification_settings .frm_left_label {
5625 4989 /* For add-ons that haven't been updated for 4.0 */
5626 4990 float: none;
5627 4991 width: auto !important;
4992 + line-height: 1;
5628 4993 }
5629 4994
5630 4995 .frm-fields .frm_autoresponder_rows select {
5631 4996 width: auto;
@@ -5638,17 +5003,16 @@
5638 5003 width: 100%;
5639 5004 }
5640 5005
5641 5006 #frm_notification_settings .frm_email_buttons {
5642 - padding: var(--gap-2xs);
5007 + padding: 7px;
5643 5008 background: var(--light-blue);
5644 - color: var(--primary-700);
5645 - border-radius: var(--small-radius);
5009 + color: var(--primary-hover);
5010 + border-radius: 4px;
5646 5011 border-color: var(--blue-border);
5647 - line-height: 1;
5012 + line-height: 1em;
5648 5013 height: auto;
5649 - min-height: 12px;
5650 - font-size: var(--text-xs);
5014 + font-size: 12px;
5651 5015 box-shadow: none;
5652 5016 }
5653 5017
5654 5018 .frm_reply_to_container,
@@ -5653,31 +5017,34 @@
5653 5017
5654 5018 .frm_reply_to_container,
5655 5019 .frm_bcc_cc_container {
5656 5020 float: right;
5657 - margin: -4px 0 0;
5021 + margin: -8px 0 0;
5658 5022 z-index: 1;
5659 5023 position: relative;
5660 5024 }
5661 5025
5662 5026 .frm_email_row .frm_cancel1_icon:before {
5027 + line-height: 1;
5663 5028 vertical-align: bottom;
5664 5029 }
5665 5030
5031 +.frm_action_id {
5032 + padding-top: 10px;
5033 +}
5034 +
5666 5035 .frm_logic_field_opts {
5667 5036 max-width: 35%;
5668 5037 }
5669 5038
5670 5039 .frm-inline-select,
5671 -p.frm-inline-select,
5672 5040 #frm_submit_logic_row,
5673 5041 .frm_logic_rows .frm-collapse-me {
5674 - line-height: var(--h-md) !important;
5042 + line-height: 30px;
5675 5043 }
5676 5044
5677 -.frm_logic_row {
5678 - padding: var(--gap-xs) 0 0;
5679 - align-items: center;
5045 +.frm_logic_row:first-of-type {
5046 + padding-top: 8px;
5680 5047 }
5681 5048
5682 5049 .frm-single-settings .frm_logic_row > select {
5683 5050 max-width: 32.5% !important;
@@ -5714,8 +5081,13 @@
5714 5081 margin-bottom: 0;
5715 5082 padding: 0;
5716 5083 }
5717 5084
5085 +.frm_form_settings input[type="text"] {
5086 + line-height: normal;
5087 + height: auto;
5088 +}
5089 +
5718 5090 #poststuff .widgets-holder-wrap .frm_form_action_settings .widget-inside {
5719 5091 padding-bottom: 0;
5720 5092 }
5721 5093
@@ -5724,9 +5096,9 @@
5724 5096 padding-right: 15px;
5725 5097 }
5726 5098
5727 5099 #form_global_settings h3 {
5728 - font-size: var(--text-sm);
5100 + font-size: 14px;
5729 5101 margin-top: 25px;
5730 5102 }
5731 5103
5732 5104 #form_global_settings .tabs-panel + h3 {
@@ -5741,9 +5113,9 @@
5741 5113 border-top: 1px solid #eee;
5742 5114 border-bottom: none;
5743 5115 margin: 15px -15px 0;
5744 5116 padding: 8px 15px;
5745 - font-size: var(--text-sm);
5117 + font-size: 14px;
5746 5118 }
5747 5119
5748 5120 #poststuff .frm_form_settings h3.frm_first_h3,
5749 5121 #poststuff h3.frm_first_h3 {
@@ -5754,8 +5126,20 @@
5754 5126 h3.frm_add_logic_link {
5755 5127 margin-bottom: 0 !important;
5756 5128 }
5757 5129
5130 +a.frm_add_logic_link {
5131 + display: block;
5132 + text-align: center;
5133 + margin: 10px auto;
5134 + padding: 10px;
5135 + width: 80%;
5136 + max-width: 290px;
5137 + font-size: 19px;
5138 + border: 1px solid var(--primary-color);
5139 + border-radius: var(--border-radius);
5140 +}
5141 +
5758 5142 a.frm_add_logic_link.frm_hidden {
5759 5143 display: none;
5760 5144 }
5761 5145
@@ -5775,9 +5159,9 @@
5775 5159 bottom: 0;
5776 5160 }
5777 5161
5778 5162 .frm_right_addon input {
5779 - padding-right: var(--gap-lg);
5163 + padding-right: 30px;
5780 5164 }
5781 5165
5782 5166 .frm_icon_font {
5783 5167 color: #A0A0A0;
@@ -5783,12 +5167,8 @@
5783 5167 color: #A0A0A0;
5784 5168 color: var(--grey);
5785 5169 }
5786 5170
5787 -.frm-fields label .frm_icon_font {
5788 - font-size: inherit;
5789 -}
5790 -
5791 5171 .misc-pub-revisions.frm_icon_font,
5792 5172 .misc-pub-revisions.frm_icon_font:hover {
5793 5173 color: inherit;
5794 5174 }
@@ -5869,16 +5249,16 @@
5869 5249 display: inline-block;
5870 5250 overflow: hidden;
5871 5251 text-overflow: ellipsis;
5872 5252 white-space: nowrap;
5873 - width: 80px;
5253 + width: 65px;
5874 5254 max-width: calc( 100% - 50px );
5875 5255 position: relative;
5876 5256 top: 2px;
5877 5257 }
5878 5258
5879 -.frm-field-action-icons > a {
5880 - font-size: var(--text-md);
5259 +.frm-field-action-icons a {
5260 + font-size: 16px;
5881 5261 width: 17px;
5882 5262 }
5883 5263
5884 5264 .frm-field-action-icons a:hover {
@@ -5888,26 +5268,21 @@
5888 5268 .frm-field-action-icons .dropdown {
5889 5269 display: inline-block;
5890 5270 }
5891 5271
5892 -.frm-field-action-icons > a .frmsvg {
5893 - color: var(--grey-500) !important;
5272 +.frm-field-action-icons a .frmsvg {
5273 + color: #9EA9B8 !important;
5894 5274 font-size: 17px;
5895 5275 width: 17px;
5896 5276 height: 17px;
5897 5277 }
5898 5278
5899 -.frm-field-action-icons > a .frmsvg,
5900 -.frm-field-action-icons > div > a .frmsvg {
5901 - vertical-align: baseline;
5902 -}
5903 -
5904 5279 .edit_field_type_end_divider .frm-field-action-icons {
5905 5280 display: none !important;
5906 5281 }
5907 5282
5908 5283 .frm-move {
5909 - cursor: grab;
5284 + cursor: move;
5910 5285 }
5911 5286
5912 5287 span.howto {
5913 5288 display: inline;
@@ -5953,15 +5328,11 @@
5953 5328 margin-bottom: 10px;
5954 5329 }
5955 5330
5956 5331 .frm_no_entries_form .frm_no_entries_text {
5957 - line-height: var(--leading);
5332 + line-height: 200%;
5958 5333 }
5959 5334
5960 -#form_entries_page #the-list .no-items {
5961 - height: 240px; /* Equals to the max height of search dropdown */
5962 -}
5963 -
5964 5335 /* Reports Page */
5965 5336 #form_reports_page img.frm_no_reports {
5966 5337 max-width: 100%;
5967 5338 }
@@ -5984,10 +5355,9 @@
5984 5355 }
5985 5356
5986 5357 .frm_wrap .google-visualization-table-tr-head,
5987 5358 .frm_wrap .google-visualization-table-tr-head th {
5988 - white-space: pre-wrap;
5989 - font-size: var(--text-md);
5359 + font-size: 16px;
5990 5360 font-weight: 400 !important;
5991 5361 text-align: left;
5992 5362 }
5993 5363
@@ -6003,8 +5373,12 @@
6003 5373 width: 20%;
6004 5374 min-width: 175px;
6005 5375 }
6006 5376
5377 +#form_reports_page h2 {
5378 + margin-top: 2em !important;
5379 +}
5380 +
6007 5381 /* Views Page */
6008 5382 #form_views_page img.frm_no_views {
6009 5383 max-width: 100%;
6010 5384 }
@@ -6114,9 +5488,9 @@
6114 5488 }
6115 5489
6116 5490 #frm-show-fields {
6117 5491 min-height: 350px;
6118 - padding: 0 0 35px;
5492 + padding: 10px 0 35px;
6119 5493 margin: 0;
6120 5494 position: relative;
6121 5495 }
6122 5496
@@ -6123,10 +5497,16 @@
6123 5497 .frm-has-fields #frm-show-fields {
6124 5498 min-height: 50px;
6125 5499 }
6126 5500
5501 +#frm-show-fields .frm6 .frm-dropdown-menu {
5502 + max-width: unset;
5503 + min-width: 160px;
5504 +}
5505 +
6127 5506 #frm_builder_page #frm_field_group_controls {
6128 5507 position: absolute;
5508 + background: rgba(65, 153, 253, 0.07);
6129 5509 padding: 5px;
6130 5510 border-radius: 4px 4px 0 0;
6131 5511 text-align: right;
6132 5512 box-sizing: border-box;
@@ -6135,19 +5515,8 @@
6135 5515 height: 28px;
6136 5516 z-index: 3; /* section dividers use z-index: 2; position above that to avoid it taking over hover control. */
6137 5517 }
6138 5518
6139 -.frm-field-group-hover-target,
6140 -.frm-has-open-field-group-popup,
6141 -#frm_builder_page #frm_field_group_controls,
6142 -.frm-selected-field-group {
6143 - background: rgba(65, 153, 253, 0.04);
6144 -}
6145 -
6146 -.frm-selected-field-group {
6147 - position: relative;
6148 -}
6149 -
6150 5519 #frm_builder_page #frm_field_group_controls > span:first-child {
6151 5520 margin-right: 5px;
6152 5521 }
6153 5522
@@ -6162,16 +5531,13 @@
6162 5531 .frm-field-group-hover-target #frm_field_group_controls {
6163 5532 visibility: visible;
6164 5533 }
6165 5534
6166 -#frm_field_group_controls .dropdown-item a span {
6167 - color: var(--grey-700);
5535 +.frm-field-group-hover-target,
5536 +.frm-has-open-field-group-popup {
5537 + background: rgba(65, 153, 253, 0.07);
6168 5538 }
6169 5539
6170 -#frm_field_group_controls .dropdown-item a:hover {
6171 - text-decoration: none;
6172 -}
6173 -
6174 5540 .frm_sorting .no_repeat_section li.ui-state-default.edit_field_type_end_divider {
6175 5541 display: none !important;
6176 5542 }
6177 5543
@@ -6178,9 +5544,10 @@
6178 5544 .frm-right-panel .ui-state-default,
6179 5545 #postbox-container-1 .ui-state-default,
6180 5546 .frm_sorting > li.ui-state-default,
6181 5547 .frm_sorting .no_repeat_section li.ui-state-default.edit_field_type_end_divider:hover {
6182 - border: 1px solid transparent;
5548 + border: 2px solid transparent;
5549 + border-radius: 4px;
6183 5550 font-weight: normal !important;
6184 5551 background-color: transparent;
6185 5552 background-image: none;
6186 5553 padding: 5px;
@@ -6281,16 +5648,15 @@
6281 5648 }
6282 5649
6283 5650 .frm-page-collapsed .frm_clone_icon,
6284 5651 .frm-page-collapsed .frm_delete_field,
6285 -.frm-page-collapsed .frm_clone_field,
6286 -.frm-section-collapsed .frm_clone_icon {
5652 +.frm-section-collapsed .frm_clone_icon,
5653 +.frm-section-collapsed .frm_delete_field {
6287 5654 opacity: .5;
6288 5655 cursor: not-allowed;
6289 5656 }
6290 5657
6291 -/* Hide the Duplicate summary option because we are missing the logic that also adds a new page */
6292 -.edit_field_type_summary .frm_more_options_li:nth-child(2) {
5658 +.edit_field_type_summary .frm_clone_field {
6293 5659 display: none !important;
6294 5660 }
6295 5661
6296 5662 .frm_no_section_fields:not(.frm_block) + ul.start_divider {
@@ -6322,9 +5688,9 @@
6322 5688 content: '';
6323 5689 display: block;
6324 5690 padding: 2px 0;
6325 5691 line-height: 1px;
6326 - border-top: 2px solid var(--grey-300);
5692 + border-top: 2px solid var(--grey-border);
6327 5693 top: -2px;
6328 5694 position: absolute;
6329 5695 width: 100%;
6330 5696 transition: .5s border-color ease-in-out;
@@ -6336,9 +5702,8 @@
6336 5702 }
6337 5703
6338 5704 .frm-section-collapsed .divider_section_only:hover:after,
6339 5705 li.selected.frm-section-collapsed .divider_section_only:before,
6340 -li.selected.frm-section-collapsed .divider_section_only:after,
6341 5706 .divider_section_only:hover:before,
6342 5707 li.selected .divider_section_only:before {
6343 5708 border-color: transparent;
6344 5709 }
@@ -6346,10 +5711,10 @@
6346 5711 .frm_sorting li.ui-state-default.edit_field_type_divider {
6347 5712 overflow: visible;
6348 5713 position: relative;
6349 5714 padding: 0 0 0 20px;
6350 - margin: 25px 0 0 -5px;
6351 - border-left: 1px solid var(--primary-700);
5715 + margin: 25px 0 0 -20px;
5716 + border-left: 1px solid var(--primary-hover);
6352 5717 transition: border 0.7s ease-out;
6353 5718 }
6354 5719
6355 5720 .frm-section-collapsed {
@@ -6357,9 +5722,9 @@
6357 5722 }
6358 5723
6359 5724 .frm_sorting li.edit_field_type_end_divider,
6360 5725 .frm_sorting .no_repeat_section li.ui-state-default.edit_field_type_end_divider:hover {
6361 - margin: 0 0 var(--gap-sm);
5726 + margin: 0 0 15px;
6362 5727 }
6363 5728
6364 5729 .frm-first-page .frm_prev_page {
6365 5730 display: none;
@@ -6364,19 +5729,22 @@
6364 5729 .frm-first-page .frm_prev_page {
6365 5730 display: none;
6366 5731 }
6367 5732
6368 -#frm_builder_page .frm_remove_form_row.frm_button,
6369 -#frm_builder_page .frm_add_form_row.frm_button {
5733 +#frm-form-button button,
5734 +.frm_remove_form_row.frm_button,
5735 +.frm_add_form_row.frm_button,
5736 +.frm-white-body .frm-preview-buttons button {
6370 5737 border-radius: var(--small-radius);
6371 5738 border: 1px solid var(--blue-border);
5739 + color: var(--primary-color);
6372 5740 }
6373 5741
6374 -#frm_builder_page .frm_remove_form_row .frmsvg,
6375 -#frm_builder_page .frm_remove_form_row i:before,
5742 +.frm_wrap .frm_remove_form_row .frmsvg,
5743 +.frm_remove_form_row i:before,
6376 5744 .frm_wrap .frm_add_form_row .frmsvg,
6377 5745 .frm_add_form_row i:before {
6378 - color: var(--primary-700);
5746 + color: var(--primary-hover);
6379 5747 }
6380 5748
6381 5749 .frm-preview-buttons .frm_button_submit {
6382 5750 margin: 0 5px;
@@ -6382,10 +5750,10 @@
6382 5750 margin: 0 5px;
6383 5751 }
6384 5752
6385 5753 .frm-page-break {
6386 - border-top: 1px dashed var(--primary-700);
6387 - margin-top: var(--gap-lg);
5754 + border-top: 1px dashed var(--primary-hover);
5755 + margin-top: 30px;
6388 5756 position: relative;
6389 5757 }
6390 5758
6391 5759 .edit_field_type_divider:before,
@@ -6398,9 +5766,9 @@
6398 5766 width: 4px;
6399 5767 height: 4px;
6400 5768 background-color: #fff;
6401 5769 border-radius: 50%;
6402 - border: 1px solid var(--primary-700);
5770 + border: 1px solid var(--primary-hover);
6403 5771 text-rendering: auto;
6404 5772 -webkit-font-smoothing: antialiased;
6405 5773 }
6406 5774
@@ -6422,12 +5790,13 @@
6422 5790 width: 20px;
6423 5791 height: 20px;
6424 5792 left: -11px;
6425 5793 top: 0;
6426 - background: var(--primary-700);
5794 + background: var(--primary-hover);
6427 5795 text-align: center;
6428 5796 color: #fff;
6429 5797 font-size: 13px;
5798 + line-height: 22px;
6430 5799 }
6431 5800
6432 5801 .edit_field_type_divider:before{
6433 5802 font-family: 's11-fp';
@@ -6448,20 +5817,20 @@
6448 5817
6449 5818
6450 5819 .frm_sorting li.edit_field_type_divider:hover,
6451 5820 .frm_sorting li.edit_field_type_divider.selected {
6452 - border-left-color: var(--primary-500);
5821 + border-left-color: var(--primary-color);
6453 5822 }
6454 5823
6455 5824 .edit_field_type_divider.selected:before,
6456 5825 .edit_field_type_divider:hover:before {
6457 - border-color: var(--primary-500);
6458 - background: var(--primary-500);
5826 + border-color: var(--primary-color);
5827 + background: var(--primary-color);
6459 5828 }
6460 5829
6461 5830 .edit_field_type_divider.selected:after,
6462 5831 .edit_field_type_divider:hover:after {
6463 - border-color: var(--primary-500);
5832 + border-color: var(--primary-color);
6464 5833 }
6465 5834
6466 5835 .frm-section-collapsed:after {
6467 5836 border-color: transparent !important;
@@ -6469,11 +5838,19 @@
6469 5838 }
6470 5839
6471 5840 .frm-page-break .frm-collapse-page.button {
6472 5841 margin-left: 46%;
6473 - margin-top: calc( -28px / 2 );
5842 + margin-top: -15px;
5843 + background-color: #fff;
5844 + border-color: var(--primary-hover) !important;
5845 + color: var(--primary-hover);
6474 5846 }
6475 5847
5848 +#frm-fake-page .frm-collapse-page.button {
5849 + border-color: var(--grey) !important;
5850 + color: var(--grey);
5851 +}
5852 +
6476 5853 #frm-fake-page.frm-page-collapsed {
6477 5854 margin-bottom: 0;
6478 5855 }
6479 5856
@@ -6479,15 +5856,15 @@
6479 5856
6480 5857 .frm-page-collapsed {
6481 5858 position: relative;
6482 5859 overflow: visible !important;
6483 - margin-bottom: var(--gap-lg);
5860 + margin-bottom: 30px;
6484 5861 }
6485 5862
6486 5863 .frm-page-collapsed:after {
6487 5864 content: '';
6488 5865 display: block;
6489 - border: 1px dashed var(--grey-300);
5866 + border: 1px dashed var(--grey-border);
6490 5867 border-left: none;
6491 5868 border-right: none;
6492 5869 height: 6px;
6493 5870 position: absolute;
@@ -6494,40 +5871,31 @@
6494 5871 width: calc( 100% - 10px );
6495 5872 bottom: -15px;
6496 5873 }
6497 5874
6498 -.frm-collapse-page .frmsvg,
6499 5875 .frm-collapse-page .frm_arrowdown6_icon {
6500 - width: var(--text-sm);
6501 - height: var(--text-sm);
6502 - font-size: var(--text-sm);
5876 + width: 16px;
6503 5877 text-align: center;
6504 5878 margin-left: 2px;
6505 - color: currentColor;
5879 + color: var(--primary-hover);
6506 5880 }
6507 5881
6508 5882 #frm-fake-page .frm_arrowdown6_icon {
6509 - color: currentColor;
5883 + color: var(--grey);
6510 5884 }
6511 5885
5886 +#frm-fake-page .frm-collapse-page:hover,
5887 +#frm-fake-page .frm-collapse-page:hover .frm_arrowdown6_icon,
5888 +.frm-collapse-page:hover .frm_arrowdown6_icon {
5889 + color: #fff;
5890 +}
5891 +
6512 5892 .frm-collapsed i:before,
5893 +.frm-section-collapsed .frm_arrowdown6_icon:before,
6513 5894 .frm-page-collapsed .frm_arrowdown6_icon:before {
6514 5895 content: '\e913';
6515 5896 }
6516 5897
6517 -.frm-collapse-section svg {
6518 - fill: var(--primary-color);
6519 - transition: transform 0.2s ease-out, fill 0.2s ease-out;
6520 -}
6521 -
6522 -.frm-collapse-section:hover svg {
6523 - fill: var(--primary-700);
6524 -}
6525 -
6526 -.frm-section-collapsed .frm-collapse-section svg {
6527 - transform: rotate(-90deg);
6528 -}
6529 -
6530 5898 .open .widget-top .frm_arrow_right_icon:before {
6531 5899 content: '\e62a';
6532 5900 }
6533 5901
@@ -6569,14 +5937,14 @@
6569 5937 .frm_no_section_fields {
6570 5938 text-align: center;
6571 5939 position: absolute;
6572 5940 color: var(--medium-grey);
6573 - font-size: var(--text-md);
5941 + font-size: 16px;
6574 5942 box-sizing: border-box;
6575 - border: 1px dashed var(--grey-300);
5943 + border: 2px dashed var(--primary-color);
6576 5944 }
6577 5945
6578 -.ui-droppable-active ~ .frm_no_fields {
5946 +.drop-me + .frm_no_fields {
6579 5947 border-style: solid;
6580 5948 }
6581 5949
6582 5950 .frm_no_section_fields {
@@ -6608,9 +5976,9 @@
6608 5976 display: block;
6609 5977 }
6610 5978
6611 5979 .frm-large-plus.frmsvg {
6612 - color: var(--primary-700);
5980 + color: var(--primary-hover);
6613 5981 height: 45px;
6614 5982 width: 45px;
6615 5983 }
6616 5984
@@ -6730,12 +6098,10 @@
6730 6098
6731 6099 .frm-category-tabs > li a,
6732 6100 .frm-category-tabs > li a:active {
6733 6101 outline: none;
6102 + -webkit-box-shadow: none;
6734 6103 box-shadow: none;
6735 - display: flex;
6736 - gap: var(--gap-xs);
6737 - align-items: center;
6738 6104 }
6739 6105
6740 6106 .frm-category-tabs > li.active .frmsvg,
6741 6107 .frm-category-tabs > li.active i,
@@ -6740,15 +6106,15 @@
6740 6106 .frm-category-tabs > li.active .frmsvg,
6741 6107 .frm-category-tabs > li.active i,
6742 6108 .frm-category-tabs > li.active span,
6743 6109 .frm-category-tabs > li.active a {
6744 - color: var(--primary-500);
6110 + color: var(--primary-color);
6745 6111 }
6746 6112
6747 6113 .frm_wrap .manage-menus {
6748 6114 margin-top: 0;
6749 6115 border: none;
6750 - border-bottom: 1px solid var(--grey-300);
6116 + border-bottom: 1px solid var(--grey-border);
6751 6117 background: var(--lightest-grey);
6752 6118 }
6753 6119
6754 6120 .general_settings .postbox .manage-menus {
@@ -6784,9 +6150,9 @@
6784 6150 padding-top: 10px;
6785 6151 }
6786 6152
6787 6153 .frm-right-panel .ui-state-default, #postbox-container-1 .ui-state-default {
6788 - color: var(--grey-900);
6154 + color: var(--darkest-grey);
6789 6155 }
6790 6156
6791 6157 .no_repeat_section .frm_sorting > li.ui-state-default.edit_field_type_end_divider:hover {
6792 6158 box-shadow: none;
@@ -6791,9 +6157,8 @@
6791 6157 .no_repeat_section .frm_sorting > li.ui-state-default.edit_field_type_end_divider:hover {
6792 6158 box-shadow: none;
6793 6159 }
6794 6160
6795 -.frm-selected-field-group li.ui-state-default,
6796 6161 .start_divider.frm_sorting li.ui-state-default.frm_not_divider.selected,
6797 6162 .start_divider.frm_sorting li.ui-state-default.frm_not_divider:hover,
6798 6163 .frm_sorting li.ui-state-default.frm_not_divider:hover,
6799 6164 .frm_sorting li.ui-state-default.ui-sortable-helper,
@@ -6802,14 +6167,14 @@
6802 6167 .frm_sorting li.ui-state-default.selected.edit_field_type_divider .divider_section_only,
6803 6168 .frm_update_msg,
6804 6169 .frm_sorting li.ui-state-default.frm_not_divider.selected,
6805 6170 .frm_sorting li.ui-state-default.selected.edit_field_type_divider .divider_section_only {
6806 - border-color: var(--primary-500);
6171 + border-color: var(--primary-color);
6807 6172 transition: .5s border-color ease-in-out;
6808 6173 }
6809 6174
6810 6175 .frm_sorting li.ui-state-default.frm_not_divider.selected {
6811 - box-shadow: 0 0 1px 0 var(--primary-500);
6176 + box-shadow: 0 0 1px 0 var(--primary-color);
6812 6177 }
6813 6178
6814 6179 .frm_sorting li.ui-state-default {
6815 6180 transition: .7s box-shadow ease-in-out, .7s height linear;
@@ -6832,9 +6197,9 @@
6832 6197 font-weight: bold;
6833 6198 border: 1px solid #DFDFDF;
6834 6199 background-color: #EEEEEE;
6835 6200 padding: 3px 5px 2px;
6836 - font-size: var(--text-md);
6201 + font-size: 16px;
6837 6202 line-height: 20px;
6838 6203 }
6839 6204
6840 6205 .frm_update_msg {
@@ -6872,13 +6237,8 @@
6872 6237 .widefat .column-shortcode {
6873 6238 width: 9em;
6874 6239 }
6875 6240
6876 -.toplevel_page_formidable .column-shortcode div {
6877 - display: flex;
6878 - gap: var(--gap-xs);
6879 -}
6880 -
6881 6241 .widefat .column-entries, .widefat .column-link {
6882 6242 width: 10%;
6883 6243 text-align: center;
6884 6244 }
@@ -6886,22 +6246,23 @@
6886 6246 .widefat .column-form_key, .widefat .column-created_at {
6887 6247 width: 10%;
6888 6248 }
6889 6249
6890 -.frm-white-body .search-box,
6250 +.post-type-frm_display .search-box,
6891 6251 .frm_wrap .frm-search {
6892 6252 float: right;
6893 - margin: 0;
6253 + margin-bottom: 15px;
6894 6254 clear: right;
6895 6255 }
6896 6256
6897 -.frm-white-body .search-box,
6257 +#form_entries_page form .frm-search {
6258 + margin-top: 15px;
6259 +}
6260 +
6898 6261 .frm-search {
6899 - min-width: 32%;
6262 + width: 32%;
6263 + float: right;
6900 6264 position: relative;
6901 - display: flex;
6902 - gap: var(--gap-sm);
6903 - align-items: center;
6904 6265 }
6905 6266
6906 6267 .frm-inline-modal .frm-search,
6907 6268 #frm_adv_info .frm-search {
@@ -6907,9 +6268,9 @@
6907 6268 #frm_adv_info .frm-search {
6908 6269 float: none;
6909 6270 width: 100%;
6910 6271 clear: both;
6911 - margin: var(--gap-xs) 0;
6272 + margin: 5px 0 10px;
6912 6273 }
6913 6274
6914 6275 .frm-button-group a {
6915 6276 margin: 0 7px !important;
@@ -6926,9 +6287,9 @@
6926 6287
6927 6288 i.frm-show-box,
6928 6289 i.frm-show-inline-modal,
6929 6290 .frm-with-left-icon i,
6930 -.frm-with-right-icon i:not([class*=mce-]),
6291 +.frm-with-right-icon i,
6931 6292 .frmsvg.frm-show-box,
6932 6293 .frmsvg.frm-show-inline-modal,
6933 6294 .frm-with-left-icon .frmsvg,
6934 6295 .frm-with-right-icon .frmsvg,
@@ -6934,17 +6295,18 @@
6934 6295 .frm-with-right-icon .frmsvg,
6935 6296 .frm-search > .frmsvg,
6936 6297 .frm-search span:not(.multiselect-selected-text):not(.multiselect-native-select) {
6937 6298 position: absolute;
6938 - padding: 0 14px;
6299 + padding: 7px 10px;
6939 6300 pointer-events: none;
6940 6301 left: 0;
6941 - color: var(--grey-400);
6942 - font-size: var(--text-xs);
6302 + color: var(--grey);
6303 + opacity: .5;
6304 + font-size: 18px;
6943 6305 }
6944 6306
6945 6307 .frm-with-right-icon .frmsvg,
6946 -.frm-with-right-icon i:not([class*=mce-]) {
6308 +.frm-with-right-icon i {
6947 6309 right: 0;
6948 6310 top: -3px;
6949 6311 left: auto;
6950 6312 padding: 0 10px 0 5px;
@@ -6949,35 +6311,20 @@
6949 6311 left: auto;
6950 6312 padding: 0 10px 0 5px;
6951 6313 }
6952 6314
6953 -.frm_form_settings .frm-with-right-icon .frmsvg {
6954 - top: 0;
6955 -}
6956 -
6957 -.frm_form_settings .wp-editor-container .frm-with-right-icon .frmsvg {
6958 - top: auto;
6959 - bottom: 0;
6960 -}
6961 -
6962 -.frm_form_settings .frm_has_textarea .frm-with-right-icon .frmsvg {
6963 - top: auto;
6964 - bottom: 6px;
6965 -}
6966 -
6967 6315 .frmsvg.frm-show-box,
6968 6316 .frmsvg.frm-show-inline-modal,
6969 6317 i.frm-show-box,
6970 6318 i.frm-show-inline-modal {
6971 - color: var(--primary-500);
6319 + color: var(--primary-color);
6972 6320 pointer-events: initial;
6973 6321 cursor: pointer;
6974 6322 z-index: 1;
6975 6323 opacity: 1;
6324 + right: 2px;
6976 6325 top: auto;
6977 - margin: calc( ( 36px - 18px ) / 2 ); /* input height - svg / 2 */
6978 - margin-bottom: 0;
6979 - padding: 0;
6326 + padding: 7px 10px;
6980 6327 }
6981 6328
6982 6329 .frm-open .frmsvg.frm-show-inline-modal,
6983 6330 .frm-open i.frm-show-inline-modal {
@@ -7000,9 +6347,9 @@
7000 6347
7001 6348 .frm_wrap .frm-with-right-icon textarea,
7002 6349 .frm_wrap .frm-with-right-icon input,
7003 6350 .frm_wrap .frm-with-right-icon input[type=text] {
7004 - padding-right: var(--gap-md);
6351 + padding-right: 35px;
7005 6352 }
7006 6353
7007 6354 #frm-show-fields .frm-with-left-icon .frmsvg,
7008 6355 #frm-show-fields .frm-with-left-icon i {
@@ -7008,29 +6355,43 @@
7008 6355 #frm-show-fields .frm-with-left-icon i {
7009 6356 padding-top: 10px;
7010 6357 }
7011 6358
6359 +.frm-search input.frm-search-input,
7012 6360 .frm-search input[name="s"],
6361 +.frm-search #search-submit {
6362 + border-color: var(--grey-border);
6363 + box-shadow: none;
6364 + margin: 0;
6365 + padding: 7px;
6366 + height: auto;
6367 + font-size: 13px;
6368 + line-height: normal;
6369 +}
6370 +
7013 6371 .frm-search .dropdown-toggle,
7014 6372 .frm-search input.frm-search-input {
7015 - border-radius: var(--small-radius);
6373 + border-radius: var(--border-radius);
7016 6374 padding-left: 33px !important;
7017 - border-color: var(--grey-300);
7018 6375 }
7019 6376
7020 -.frm_wrap .frm-search .frm-search-input,
7021 -.frm-modal .frm-search .frm-search-input,
7022 -.frm-white-body .search-box input[name="s"], /* Views search */
7023 -.frm_wrap .frm-search input[name="s"] {
7024 - padding-top: 3px;
7025 - padding-bottom: 3px;
7026 - flex: 1;
7027 - font-size: var(--text-sm);
6377 +.frm-search input[name="s"] {
6378 + width: 70%;
6379 + float: left;
6380 + border-radius: var(--border-radius) 0 0 var(--border-radius) !important;
6381 + border-right-width: 0;
6382 + padding-left: 33px;
7028 6383 }
7029 6384
7030 -.frm-search .dropdown-toggle {
6385 +.frm-search .dropdown-toggle,
6386 +.frm-search input.frm-auto-search {
7031 6387 width: 100%;
6388 + border-right-width: 1px;
6389 + border-radius: var(--border-radius) !important;
7032 6390 float: none;
6391 +}
6392 +
6393 +.frm-search .dropdown-toggle {
7033 6394 max-width: 200px;
7034 6395 background: transparent;
7035 6396 padding: 7px;
7036 6397 min-height: 32px;
@@ -7038,18 +6399,22 @@
7038 6399 overflow: hidden;
7039 6400 text-overflow: ellipsis;
7040 6401 }
7041 6402
7042 -span.multiselect-selected-text {
6403 +.frm-search span.multiselect-selected-text {
7043 6404 white-space: nowrap;
7044 - display: inline-block;
7045 - max-width: 90%;
7046 - text-overflow: ellipsis;
7047 - overflow: hidden;
6405 + display: inline-block;
7048 6406 }
7049 6407
6408 +.frm-search #search-submit {
6409 + width: 30%;
6410 + border-radius: 0 var(--border-radius) var(--border-radius) 0;
6411 + text-align: center;
6412 + background-color: var(--lightest-grey);
6413 +}
6414 +
7050 6415 .frm-search #search-submit a {
7051 - color: var(--grey-800);
6416 + color: var(--primary-color);
7052 6417 }
7053 6418
7054 6419 .frm-search #search-submit .caret {
7055 6420 opacity:.7;
@@ -7055,15 +6420,15 @@
7055 6420 opacity:.7;
7056 6421 }
7057 6422
7058 6423 .frm-not-set input {
7059 - color: var(--primary-500) !important;
6424 + color: var(--primary-color) !important;
7060 6425 font-size: 13px;
7061 6426 }
7062 6427
7063 6428 .frm-not-set .frmsvg,
7064 6429 .frm-not-set i {
7065 - color: var(--primary-700);
6430 + color: var(--primary-hover);
7066 6431 opacity: 1;
7067 6432 }
7068 6433
7069 6434 .post-type-frm_display select[name="m"] + #post-query-submit,
@@ -7131,9 +6496,9 @@
7131 6496
7132 6497 .post-type-frm_display #advanced-sortables h2.hndle,
7133 6498 .post-type-frm_display #side-sortables h2.hndle,
7134 6499 .post-type-frm_display #normal-sortables h2.hndle {
7135 - border-bottom: 1px solid var(--grey-300);
6500 + border-bottom: 1px solid var(--grey-border);
7136 6501 margin: 10px 0 0 !important;
7137 6502 padding: 0 25px 8px;
7138 6503 }
7139 6504
@@ -7142,9 +6507,9 @@
7142 6507 padding-top: 10px;
7143 6508 }
7144 6509
7145 6510 .post-type-frm_display #post-body-content {
7146 - margin-top: var(--gap-lg);
6511 + margin-top: 30px;
7147 6512 }
7148 6513
7149 6514 .post-type-frm_display.edit-php #wpbody-content > .wrap {
7150 6515 margin: 0;
@@ -7151,15 +6516,15 @@
7151 6516 }
7152 6517
7153 6518 .post-type-frm_display .postbox .hndle,
7154 6519 .post-type-frm_display .postbox {
7155 - border-color: var(--grey-300);
6520 + border-color: var(--grey-border);
7156 6521 }
7157 6522
7158 6523 .post-type-frm_display #postbox-container-1 .postbox,
7159 6524 .post-type-frm_display #postbox-container-2 .postbox {
7160 6525 border-radius: var(--small-radius);
7161 - border-color: var(--grey-300);
6526 + border-color: var(--grey-border);
7162 6527 box-shadow: none;
7163 6528 }
7164 6529
7165 6530 .post-type-frm_display #side-sortables .postbox {
@@ -7238,9 +6603,9 @@
7238 6603 background-color: transparent;
7239 6604 }
7240 6605
7241 6606 .post-type-frm_display #major-publishing-actions {
7242 - border-color: var(--grey-300);
6607 + border-color: var(--grey-border);
7243 6608 background: var(--sidebar-color);
7244 6609 }
7245 6610
7246 6611 .post-type-frm_display #frm_adv_info {
@@ -7294,9 +6659,9 @@
7294 6659 .settings-lite-cta ul,
7295 6660 .settings-lite-cta p,
7296 6661 .settings-lite-cta {
7297 6662 color: #666;
7298 - font-size: var(--text-md);
6663 + font-size: 16px;
7299 6664 box-shadow: none !important;
7300 6665 }
7301 6666
7302 6667 .frm-info-modal h3,
@@ -7310,9 +6675,8 @@
7310 6675
7311 6676 .frm-info-modal .postbox .inside,
7312 6677 .settings-lite-cta .postbox .inside {
7313 6678 padding: 20px 40px;
7314 - margin: 0;
7315 6679 }
7316 6680
7317 6681 .cta-inside a {
7318 6682 color: var(--orange)
@@ -7318,15 +6682,25 @@
7318 6682 color: var(--orange)
7319 6683 }
7320 6684
7321 6685 .info-modal-inside a.frm-standard-link {
7322 - color: var(--primary-500);
6686 + color: var(--primary-color);
7323 6687 }
7324 6688
7325 6689 .info-modal-inside a.frm-standard-link:hover {
7326 - color: var(--primary-700);
6690 + color: var(--primary-hover);
7327 6691 }
7328 6692
6693 +.frm-caution {
6694 + text-transform: uppercase;
6695 + font-weight: bold;
6696 + color: var(--dark-grey);
6697 +}
6698 +
6699 +.field_type_list > li {
6700 + width: 50%;
6701 +}
6702 +
7329 6703 .frm_no_p_margin > p {
7330 6704 margin: 0;
7331 6705 }
7332 6706
@@ -7336,12 +6710,14 @@
7336 6710 font-size: 11px;
7337 6711 overflow: hidden;
7338 6712 }
7339 6713
6714 +.frm_code_list.frm-full-hover {
6715 + margin: 0 -20px;
6716 +}
6717 +
7340 6718 #frm-navbarDrop + .frm_code_list.frm-full-hover {
7341 - margin: var(--gap-xs) 0 0;
7342 - min-width: 300px;
7343 - max-height: calc( ( 40px * 5 ) + 56px );
6719 + margin: 4px 0 0;
7344 6720 }
7345 6721
7346 6722 .frm_code_list.frm-full-hover li {
7347 6723 margin: 0;
@@ -7346,28 +6722,33 @@
7346 6722 .frm_code_list.frm-full-hover li {
7347 6723 margin: 0;
7348 6724 }
7349 6725
7350 -.frm-select-list-item,
7351 -.frm_wrap .ui-autocomplete li > div,
7352 -.multiselect-container button.multiselect-option,
7353 -.frm-dropdown-menu > .dropdown-item > a,
7354 -.frm-dropdown-menu > .dropdown-item > a:visited,
7355 -.frm-dropdown-menu > .dropdown-item > a:link, /* Override jQuery UI */
6726 +.frm-dropdown-menu > li > a,
7356 6727 .frm-dropdown-menu .frm_dropdown_li,
7357 6728 .frm_code_list.frm-full-hover a {
7358 - display: flex;
7359 - color: var(--grey-700);
6729 + display: block;
6730 + color: var(--dark-grey);
6731 + padding: 3px 25px;
6732 + font-size: 15px;
6733 +}
6734 +
6735 +.frm-field-action-icons .frm-dropdown-menu .frm_dropdown_li {
7360 6736 padding: 5px 10px;
7361 - font-size: var(--text-md);
7362 - gap: var(--gap-xs);
7363 - align-items: center;
6737 + color: rgba(40, 47, 54, 0.85);
6738 + cursor: pointer;
7364 6739 }
7365 6740
6741 +.frm-field-action-icons .frm-dropdown-menu .frm_dropdown_li:hover {
6742 + background: #F6F7FB;
6743 +}
6744 +
7366 6745 .frm_code_list.frm-full-hover a span {
6746 + color: var(--grey);
6747 + float: right;
6748 + font-size: 14px;
7367 6749 max-width: 83px;
7368 6750 text-align: right;
7369 - margin-left: auto;
7370 6751 }
7371 6752
7372 6753 .frm_code_list.frm-full-hover a,
7373 6754 .frm_code_list.frm-full-hover a span {
@@ -7375,54 +6756,24 @@
7375 6756 overflow: hidden;
7376 6757 text-overflow: ellipsis;
7377 6758 }
7378 6759
7379 -.frm_code_list.frm-full-hover.frmcenter a {
7380 - display: block;
7381 -}
7382 -
7383 -#frm-layout-classes frm-full-hover a span {
7384 - max-width: 45%;
7385 -}
7386 -
7387 -.frm-select-list-item.active,
7388 -.frm-select-list-item:hover,
7389 -.frm_wrap .ui-autocomplete li div.ui-state-active,
7390 -.frm_wrap .ui-autocomplete li.ui-state-focus,
7391 -.multiselect-container button.multiselect-option.active,
7392 -.multiselect-container button.multiselect-option:hover,
7393 -.frm-dropdown-menu > .dropdown-item > a:hover,
6760 +.frm-dropdown-menu > li > a:hover,
7394 6761 .frm_code_list.frm-full-hover a:hover span,
7395 6762 .frm_code_list.frm-full-hover a:hover {
7396 - background: var(--primary-25);
7397 - color: var(--primary-500);
7398 - border-radius: var(--small-radius);
6763 + background: var(--sidebar-color);
6764 + color: var(--primary-color);
7399 6765 }
7400 6766
7401 -.frm-select-list-item .frmsvg,
7402 -.frm-dropdown-menu > .dropdown-item > a .frmsvg {
7403 - opacity: .8;
7404 -}
7405 -
7406 -.frm-select-list-item:hover .frmsvg,
7407 -.frm-dropdown-menu > .dropdown-item > a:hover .frmsvg {
7408 - opacity: 1;
7409 -}
7410 -
7411 6767 .frm-dropdown-menu.frm_code_list > li > a {
7412 6768 padding: 3px 15px;
7413 6769 width: 300px;
7414 6770 }
7415 6771
7416 -#frm_edit_box_content_modal .frm-with-search, /* Temp. Add .frm-dropdown-menu in Views */
7417 -.frm-dropdown-menu .frm-with-search {
7418 - padding: var(--gap-xs) 10px 0;
6772 +.frm-dropdown-menu.frm_code_list .frm-with-search {
6773 + padding: 3px 10px;
7419 6774 }
7420 6775
7421 -.frm-dropdown-menu .subsubsub {
7422 - padding: 0 10px;
7423 -}
7424 -
7425 6776 .frm_grid_container {
7426 6777 overflow: visible;
7427 6778 }
7428 6779
@@ -7438,16 +6789,16 @@
7438 6789 .frm_code_list.frm_grid_container a {
7439 6790 padding: 5px 0;
7440 6791 text-align: center;
7441 6792 background-color: var(--light-blue);
7442 - border: 1px solid var(--primary-500);
7443 - color: var(--primary-500);
6793 + border: 1px solid var(--primary-color);
6794 + color: var(--primary-color);
7444 6795 display: block;
7445 6796 border-radius: var(--small-radius);
7446 6797 }
7447 6798
7448 6799 .frm_code_list.frm_grid_container a:hover {
7449 - background-color: var(--primary-700);
6800 + background-color: var(--primary-hover);
7450 6801 color: #fff;
7451 6802 }
7452 6803
7453 6804 .frm_field_list #frm-insert-fields .button a {
@@ -7455,22 +6806,18 @@
7455 6806 max-width: 95%;
7456 6807 overflow: hidden;
7457 6808 }
7458 6809
7459 -.field_type_list.frm_grid_container {
7460 - gap: var(--gap-xs) var(--gap-sm);
7461 - margin: var(--gap-xs);
7462 -}
7463 -
7464 6810 .field_type_list li {
7465 - margin: 0;
6811 + margin: 0 0 10px;
7466 6812 padding: 0;
6813 + clear: both;
6814 + float: left;
7467 6815 }
7468 6816
7469 -#frm-insert-fields .frm-search {
7470 - float: none;
7471 - margin: 15px 20px;
7472 - width: auto;
6817 +.field_type_list li:nth-child(2n) {
6818 + float: right;
6819 + clear: none;
7473 6820 }
7474 6821
7475 6822 #frm-insert-fields li,
7476 6823 #frm-insert-fields li a {
@@ -7475,13 +6822,22 @@
7475 6822 #frm-insert-fields li,
7476 6823 #frm-insert-fields li a {
7477 6824 text-decoration: none;
7478 6825 font-weight: normal;
7479 - font-size: var(--text-md) !important;
7480 - color: var(--grey-900);
6826 + font-size: 15px !important;
6827 + color: var(--dark-grey);
7481 6828 }
7482 6829
6830 +#frm-insert-fields li a {
6831 + padding: 5px 20px;
6832 + display: block;
6833 + border-radius: 0 var(--border-radius) var(--border-radius) 0;
6834 +}
6835 +
7483 6836 #frm-insert-fields li.frm_show_upgrade {
6837 + margin: 0 0 10px;
6838 + padding: 5px 20px;
6839 + box-sizing: border-box;
7484 6840 cursor: pointer;
7485 6841 opacity: .5;
7486 6842 }
7487 6843
@@ -7488,11 +6844,14 @@
7488 6844 #frm-insert-fields li a span {
7489 6845 vertical-align: middle;
7490 6846 }
7491 6847
7492 -.frmbutton.ui-draggable-dragging a,
6848 +#frm-insert-fields li:nth-child(2n) a {
6849 + border-radius: var(--border-radius) 0 0 var(--border-radius);
6850 +}
6851 +
7493 6852 #frm-insert-fields li a:not(.disabled):hover {
7494 - background: var(--grey-100);
6853 + background: var(--sidebar-hover);
7495 6854 }
7496 6855
7497 6856 #frm-insert-fields li a.disabled:hover {
7498 6857 cursor: not-allowed;
@@ -7514,9 +6873,9 @@
7514 6873 .frmsvg {
7515 6874 fill: currentColor;
7516 6875 width: 18px;
7517 6876 height: 18px;
7518 - vertical-align: middle;
6877 + vertical-align: text-bottom;
7519 6878 }
7520 6879
7521 6880 input[disabled],
7522 6881 .frmsvg svg {
@@ -7542,27 +6901,40 @@
7542 6901 width: 13px;
7543 6902 height: 13px;
7544 6903 }
7545 6904
6905 +.frm_code_list a .frmsvg,
7546 6906 .frmbutton.ui-sortable-helper .frmsvg,
7547 6907 .field_type_list li.frmbutton .frmsvg,
6908 +.frm_code_list a i,
7548 6909 .frmbutton.ui-sortable-helper i,
7549 -.field_type_list li.frmbutton i,
7550 -.frm_code_list a .frmsvg,
7551 -.frm_code_list a i {
7552 - color: var(--grey-500);
6910 +.field_type_list li.frmbutton i {
6911 + margin: .15em .2em;
6912 + color: var(--grey);
7553 6913 display: inline-block;
7554 6914 vertical-align: middle;
7555 - width: var(--text-md);
7556 - font-size: var(--text-md);
6915 + width: 20px;
6916 + height: 20px;
6917 + padding-right: 15px;
6918 + text-align: left;
6919 + font-size: 18px;
7557 6920 }
7558 6921
7559 -/* Standardize icon size for field buttons in the builder */
7560 -.field_type_list li.frmbutton .frmsvg {
7561 - width: var(--text-xl);
7562 - font-size: var(--text-xl);
6922 +/* Icon for Name field is larger */
6923 +.field_type_list li.frm_tname.frmbutton .frmsvg {
6924 + width: 24px;
6925 + height: 24px;
6926 + padding-right: 11px;
7563 6927 }
7564 6928
6929 +.frm_code_list a .frmsvg,
6930 +.frm_code_list a i {
6931 + margin: 0 5px 0 0;
6932 + padding: 0;
6933 + width: 15px;
6934 + font-size: 15px;
6935 +}
6936 +
7565 6937 .frm_code_list i:before {
7566 6938 font-size: inherit;
7567 6939 }
7568 6940
@@ -7567,36 +6939,40 @@
7567 6939 }
7568 6940
7569 6941 #frm-insert-fields li a:not(.disabled):hover .frmsvg,
7570 6942 #frm-insert-fields li a:not(.disabled):hover i {
7571 - color: var(--grey-600);
6943 + color: var(--dark-grey);
7572 6944 }
7573 6945
7574 -/* Icon while dragging */
7575 6946 .frmbutton.ui-draggable-dragging {
7576 - pointer-events: none;
6947 + width: auto !important;
7577 6948 }
7578 6949
7579 -#frm-insert-fields li.frm_show_upgrade,
7580 -#frm-insert-fields li a,
6950 +/* Icon while dragging */
6951 +.frmbutton.ui-draggable-dragging,
7581 6952 .frmbutton.ui-draggable-dragging a {
7582 - text-decoration: none;
7583 - display: inline-flex !important;
7584 - gap: var(--gap-xs);
7585 - align-items: center;
7586 - border-radius: var(--border-radius) !important;
7587 - padding: var(--gap-xs) var(--gap-sm) !important;
7588 - color: var(--grey-900) !important;
6953 + cursor: move;
7589 6954 }
7590 6955
7591 -/* Adjust field button size to full width in builder */
7592 -#frm-insert-fields li a {
7593 - display: flex !important;
6956 +.frmbutton.ui-sortable-helper a,
6957 +.frmbutton.ui-draggable-dragging a:hover,
6958 +.frmbutton.ui-draggable-dragging a {
6959 + text-decoration: none;
6960 + height: 25px !important;
6961 + width: 180px;
6962 + text-align: center;
6963 + display: block !important;
6964 + background-color: var(--primary-hover) !important;
6965 + border-radius: 35px !important;
6966 + padding: 5px 20px !important;
6967 + color: #fff !important;
7594 6968 }
7595 6969
7596 -.frmbutton.ui-draggable-dragging a {
7597 - border: 1px solid var(--grey-300);
7598 - box-shadow: var(--box-shadow-md);
6970 +.frmbutton.ui-draggable-dragging:not(.ui-sortable-helper) a {
6971 + /* When the new field is held outside of a dropzone */
6972 + cursor: not-allowed;
6973 + background: var(--sidebar-color) !important;
6974 + color: var(--dark-grey) !important;
7599 6975 }
7600 6976
7601 6977 .frmbutton.ui-draggable-dragging span {
7602 6978 font-size: 15px;
@@ -7602,18 +6978,23 @@
7602 6978 font-size: 15px;
7603 6979 }
7604 6980
7605 6981 #frm-show-fields .frmbutton.ui-sortable-helper i,
6982 +.frmbutton.ui-sortable-helper span,
7606 6983 .frmbutton.ui-draggable-dragging i,
7607 6984 .frmbutton.ui-draggable-dragging .frmsvg {
7608 6985 color: #fff !important;
7609 6986 }
7610 6987
7611 -.frmbutton.ui-draggable-dragging i,
7612 -.frmbutton.ui-draggable-dragging .frmsvg {
7613 - color: var(--grey-700) !important;
6988 +.frmbutton.ui-draggable-dragging:not(.ui-sortable-helper) i,
6989 +.frmbutton.ui-draggable-dragging:not(.ui-sortable-helper) .frmsvg {
6990 + color: var(--dark-grey) !important;
7614 6991 }
7615 6992
6993 +.frmbutton.ui-draggable-dragging .frm-dropdown-menu {
6994 + display: none;
6995 +}
6996 +
7616 6997 .frm_sorting li.ui-state-default.ui-sortable-helper,
7617 6998 .frmbutton.ui-sortable-helper {
7618 6999 transition: opacity .2s;
7619 7000 opacity: 1;
@@ -7618,13 +6999,10 @@
7618 6999 transition: opacity .2s;
7619 7000 opacity: 1;
7620 7001 }
7621 7002
7622 -.frm-field-group-count {
7623 - background-color: var(--sidebar-hover);
7624 - padding: 5px;
7625 - color: #fff !important;
7626 - border-radius: 10px;
7003 +.frmbutton.ui-sortable-helper:not(.ui-draggable-dragging) {
7004 + opacity: 0;
7627 7005 }
7628 7006
7629 7007 /* End dragging */
7630 7008
@@ -7650,64 +7028,13 @@
7650 7028 .frm_noallow a {
7651 7029 color: inherit;
7652 7030 }
7653 7031
7654 -#frm_upgrade_modal_image {
7655 - max-width: 200px;
7656 -}
7657 -
7658 -.frm-tab-message {
7659 - max-width: 600px;
7660 - margin: 20px auto;
7661 - color: rgba(63, 75, 91, 0.8);
7662 -}
7663 -
7664 -.frm-settings-screenshot-toolbar {
7665 - min-height: 39px;
7666 - display: flex;
7667 -}
7668 -
7669 -.frm-settings-screenshot-toolbar .frm-minmax-icon {
7670 - height: 8px;
7671 - width: 8px;
7672 - border-radius: 50%;
7673 - align-self: center;
7674 - margin-left: 10px;
7675 -}
7676 -
7677 -.frm-settings-screenshot-toolbar .frm-minmax-icon:first-of-type {
7678 - margin-left: 20px;
7679 -}
7680 -
7681 -.frm-settings-screenshot-toolbar img {
7682 - object-fit: contain;
7683 - align-self: flex-end;
7684 - margin-left: 25px;
7685 -}
7686 -
7687 -.frm-settings-screenshot-toolbar + div {
7688 - background: #fff;
7689 - padding-top: 25px;
7690 - border-radius: 0 0 16px 16px;
7691 -}
7692 -
7693 -.frm-settings-screenshot-toolbar + div img {
7694 - max-width: calc( 100% - 40px );
7695 -}
7696 -
7697 -.frm-settings-screenshot-wrapper {
7698 - max-width: 700px;
7699 - margin: 50px auto 0;
7700 - box-shadow: 0px 4px 4px rgba(189, 196, 205, 0.25), 0px 12px 56px rgba(42, 57, 75, 0.25);
7701 - border-radius: 16px;
7702 - background: #EBECF1;
7703 -}
7704 -
7705 7032 .frm-dialog {
7706 7033 z-index: 100;
7707 7034 padding: 0 !important;
7708 - border-radius: 16px;
7709 - border: none;
7035 + border-radius: 10px;
7036 + border: 1px solid var(--grey);
7710 7037 background-color: #fff;
7711 7038 max-width: 100% !important;
7712 7039 }
7713 7040
@@ -7714,14 +7041,20 @@
7714 7041 .frm-dialog .postbox {
7715 7042 background: transparent;
7716 7043 box-shadow: none;
7717 7044 border: none;
7718 - line-height: var(--leading);
7719 7045 }
7720 7046
7047 +.frm-dialog .frm-sub-label,
7048 +.frm-dialog label {
7049 + color: var(--dark-grey);
7050 + font-size: 17px;
7051 + font-weight: 300;
7052 +}
7053 +
7721 7054 .frm-dialog input[type=text],
7722 7055 .frm-dialog textarea {
7723 - font-size: var(--text-md);
7056 + font-size: 16px;
7724 7057 }
7725 7058
7726 7059 .frm-dialog textarea {
7727 7060 height: 75px;
@@ -7734,16 +7067,14 @@
7734 7067 .frm-dialog .frm-sub-label,
7735 7068 .frm-sub-label {
7736 7069 color: var(--grey);
7737 7070 text-transform: none;
7738 - padding-left: 8px;
7739 7071 }
7740 7072
7741 7073 h2 .frm-sub-label {
7742 - font-size: var(--text-md);
7074 + font-size: 16px;
7743 7075 }
7744 7076
7745 -.frm-views-editor-body .ui-widget-overlay,
7746 7077 .frm-white-body .ui-widget-overlay,
7747 7078 .toplevel_page_formidable .ui-widget-overlay {
7748 7079 position: fixed;
7749 7080 width: 100%;
@@ -7751,10 +7082,9 @@
7751 7082 top: 0;
7752 7083 left: 0;
7753 7084 right: 0;
7754 7085 bottom: 0;
7755 - background: var(--grey-500);
7756 - opacity: .5;
7086 + background: var(--grey-border);
7757 7087 z-index: 2;
7758 7088 }
7759 7089
7760 7090 #frm_upgrade_modal {
@@ -7769,15 +7099,15 @@
7769 7099 color: #c4c4c4;
7770 7100 padding-bottom: 20px;
7771 7101 }
7772 7102
7773 -.frm-upgrade-message img {
7103 +#frm-upgrade-message img {
7774 7104 max-width: 100%;
7775 7105 }
7776 7106
7777 7107 a.frm-link-secondary {
7778 7108 color: #c4c4c4;
7779 - font-size: var(--text-sm);
7109 + font-size: 14px;
7780 7110 text-decoration: underline;
7781 7111 }
7782 7112
7783 7113 .field_type_list li.button.frm_noallow,
@@ -7793,136 +7123,132 @@
7793 7123 min-height: 150px;
7794 7124 }
7795 7125
7796 7126 /*!
7797 - * Bootstrap v4.6.1
7127 + * Bootstrap v3.0.2
7798 7128 */
7799 7129
7800 7130 .tooltip {
7801 - /* Copied from Bootstrap */
7802 7131 position: absolute;
7132 + z-index: 9999999;
7803 7133 display: block;
7804 - margin: 0;
7805 - font-style: normal;
7806 - font-weight: 400;
7807 - line-height: 1.5;
7808 - text-align: left;
7809 - text-align: start;
7810 - text-decoration: none;
7811 - text-shadow: none;
7812 - text-transform: none;
7813 - letter-spacing: normal;
7814 - word-break: normal;
7815 - word-spacing: normal;
7816 - white-space: normal;
7817 - line-break: auto;
7818 - font-size: 0.875rem;
7819 - word-wrap: break-word;
7134 + visibility: visible;
7135 + font-size: 14px;
7136 + line-height: 1.4;
7820 7137 opacity: 0;
7821 -
7822 - /* Custom rules */
7823 - z-index: 9999999;
7824 - pointer-events: none;
7138 + filter: alpha(opacity=0);
7825 7139 }
7826 7140
7827 -.tooltip.show {
7828 - opacity: 0.9;
7141 +.tooltip.in {
7142 + opacity: 1;
7143 + filter: alpha(opacity=100);
7829 7144 }
7830 7145
7831 -.tooltip .arrow {
7832 - position: absolute;
7833 - display: block;
7834 - width: 0.8rem;
7835 - height: 0.4rem;
7836 - margin-left: 0 !important;
7146 +.tooltip.top {
7147 + margin-top: -3px;
7148 + padding: 5px 0;
7837 7149 }
7838 7150
7839 -.tooltip .arrow::before {
7840 - position: absolute;
7841 - content: "";
7842 - border-color: transparent;
7843 - border-style: solid;
7151 +.tooltip.right {
7152 + margin-left: 3px;
7153 + padding: 0 5px;
7844 7154 }
7845 7155
7846 -.bs-tooltip-top, .bs-tooltip-auto[x-placement^="top"] {
7847 - padding: 0.4rem 0;
7156 +.tooltip.bottom {
7157 + margin-top: 3px;
7158 + padding: 5px 0;
7848 7159 }
7849 7160
7850 -.bs-tooltip-top .arrow, .bs-tooltip-auto[x-placement^="top"] .arrow {
7851 - bottom: 0;
7161 +.tooltip.left {
7162 + margin-left: -3px;
7163 + padding: 0 5px;
7852 7164 }
7853 7165
7854 -.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before {
7855 - top: 0;
7856 - border-width: 0.4rem 0.4rem 0;
7857 - border-top-color: #000;
7166 +.tooltip-inner {
7167 + max-width: 200px;
7168 + padding: 10px;
7169 + color: #fff;
7170 + text-align: left;
7171 + text-decoration: none;
7172 + background-color: var(--dark-grey);
7173 + border-radius: 4px;
7174 + z-index: 99999999;
7175 + text-transform: none;
7858 7176 }
7859 7177
7860 -.bs-tooltip-right, .bs-tooltip-auto[x-placement^="right"] {
7861 - padding: 0 0.4rem;
7178 +.tooltip.right .tooltip-inner {
7179 + min-width: 150px;
7180 + max-width: 300px;
7862 7181 }
7863 7182
7864 -.bs-tooltip-right .arrow, .bs-tooltip-auto[x-placement^="right"] .arrow {
7865 - left: 0;
7866 - width: 0.4rem;
7867 - height: 0.8rem;
7183 +.tooltip-arrow {
7184 + position: absolute;
7185 + width: 0;
7186 + height: 0;
7187 + border-color: transparent;
7188 + border-style: solid;
7868 7189 }
7869 7190
7870 -.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before {
7871 - right: 0;
7872 - border-width: 0.4rem 0.4rem 0.4rem 0;
7873 - border-right-color: #000;
7191 +.tooltip.top .tooltip-arrow {
7192 + bottom: 0;
7193 + left: 50%;
7194 + margin-left: -5px;
7195 + border-width: 5px 5px 0;
7196 + border-top-color: var(--dark-grey);
7874 7197 }
7875 7198
7876 -.bs-tooltip-bottom, .bs-tooltip-auto[x-placement^="bottom"] {
7877 - padding: 0.4rem 0;
7199 +.tooltip.top-left .tooltip-arrow {
7200 + bottom: 0;
7201 + left: 5px;
7202 + border-width: 5px 5px 0;
7203 + border-top-color: var(--dark-grey);
7878 7204 }
7879 7205
7880 -.bs-tooltip-bottom .arrow, .bs-tooltip-auto[x-placement^="bottom"] .arrow {
7881 - top: 0;
7882 -}
7883 -
7884 -.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
7206 +.tooltip.top-right .tooltip-arrow {
7885 7207 bottom: 0;
7886 - border-width: 0 0.4rem 0.4rem;
7887 - border-bottom-color: #000;
7208 + right: 5px;
7209 + border-width: 5px 5px 0;
7210 + border-top-color: var(--dark-grey);
7888 7211 }
7889 7212
7890 -.bs-tooltip-left, .bs-tooltip-auto[x-placement^="left"] {
7891 - padding: 0 0.4rem;
7213 +.tooltip.right .tooltip-arrow {
7214 + top: 50%;
7215 + left: 0;
7216 + margin-top: -5px;
7217 + border-width: 5px 5px 5px 0;
7218 + border-right-color: var(--dark-grey);
7892 7219 }
7893 7220
7894 -.bs-tooltip-left .arrow, .bs-tooltip-auto[x-placement^="left"] .arrow {
7221 +.tooltip.left .tooltip-arrow {
7222 + top: 50%;
7895 7223 right: 0;
7896 - width: 0.4rem;
7897 - height: 0.8rem;
7224 + margin-top: -5px;
7225 + border-width: 5px 0 5px 5px;
7226 + border-left-color: var(--dark-grey);
7898 7227 }
7899 7228
7900 -.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before {
7901 - left: 0;
7902 - border-width: 0.4rem 0 0.4rem 0.4rem;
7903 - border-left-color: #000;
7229 +.tooltip.bottom .tooltip-arrow {
7230 + top: 0;
7231 + left: 50%;
7232 + margin-left: -5px;
7233 + border-width: 0 5px 5px;
7234 + border-bottom-color: var(--dark-grey);
7904 7235 }
7905 7236
7906 -.tooltip-inner {
7907 - max-width: 200px;
7908 - padding: 0.25rem 0.5rem;
7909 - color: #fff;
7910 - text-align: center;
7911 - background-color: #000;
7912 - border-radius: 0.25rem;
7237 +.tooltip.bottom-left .tooltip-arrow {
7238 + top: 0;
7239 + left: 5px;
7240 + border-width: 0 5px 5px;
7241 + border-bottom-color: var(--dark-grey);
7913 7242 }
7914 7243
7915 -.frm-dropdown-menu.show {
7916 - display: block;
7244 +.tooltip.bottom-right .tooltip-arrow {
7245 + top: 0;
7246 + right: 5px;
7247 + border-width: 0 5px 5px;
7248 + border-bottom-color: var(--dark-grey);
7917 7249 }
7918 7250
7919 -/* End Bootstrap */
7920 -
7921 -.preview.dropdown .dropdown-menu {
7922 - min-width: 205px;
7923 -}
7924 -
7925 7251 .frm_clear {
7926 7252 clear: both;
7927 7253 }
7928 7254
@@ -7960,8 +7286,10 @@
7960 7286 transition: width 0.6s ease;
7961 7287 background-color: #04A4CC;
7962 7288 }
7963 7289
7290 +/* End Bootstrap */
7291 +
7964 7292 .tooltip.frm_tooltip {
7965 7293 position: fixed;
7966 7294 top: auto !important;
7967 7295 bottom: 0 !important;
@@ -7982,25 +7310,93 @@
7982 7310 box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.5);
7983 7311 padding: 10px 40px;
7984 7312 border-top-color: #ccc;
7985 7313 background: var(--sidebar-color);
7986 - color: var(--grey-700);
7314 + color: var(--dark-grey);
7987 7315 border-radius: 0;
7988 7316 opacity: 1;
7989 - font-size: var(--text-sm);
7317 + font-size: 14px;
7990 7318 }
7991 7319
7320 +#frm_styling_form #post-body {
7321 + padding: 20px;
7322 +}
7323 +
7324 +.ui-datepicker-inline.ui-datepicker {
7325 + max-width: 19em;
7326 +}
7327 +
7328 +.default-style-box.howto {
7329 + margin-left: 20px;
7330 + font-style: normal;
7331 +}
7332 +
7992 7333 #frm_custom_css_box {
7993 7334 width: 100%;
7994 7335 }
7995 7336
7337 +#frm_styling_form .wp-picker-container .wp-color-result.button {
7338 + width: 100%;
7339 + overflow: hidden;
7340 + margin: 0 !important;
7341 + height: 32px !important;
7342 + padding: 0 0 0 30px !important;
7343 + border-radius: var(--small-radius);
7344 + border-color: var(--grey-border);
7345 +}
7346 +
7347 +#frm_styling_form .wp-color-result-text {
7348 + line-height: 30px !important;
7349 + font-size: 15px;
7350 + background: #fff !important;
7351 +}
7352 +
7353 +.wp-picker-open + .wp-picker-input-wrap {
7354 + position: absolute;
7355 + margin-left: -87px;
7356 + margin-top: 1px;
7357 + width: 86px;
7358 +}
7359 +
7360 +.wp-picker-container input[type="text"].wp-color-picker {
7361 + border: none;
7362 + padding: 3px;
7363 + font-family: inherit;
7364 + color: var(--dark-grey);
7365 + font-size: 15px;
7366 + width: 100%;
7367 + line-height: 1;
7368 + text-align: center;
7369 +}
7370 +
7371 +.wp-picker-input-wrap .wp-picker-clear {
7372 + display: none !important;
7373 +}
7374 +
7375 +.wp-picker-holder {
7376 + position: absolute;
7377 + z-index: 999;
7378 +}
7379 +
7380 +.frm_end .wp-picker-holder {
7381 + margin-left: -145px;
7382 +}
7383 +
7384 +.frm_end.frm6 .wp-picker-holder {
7385 + margin-left: -86px;
7386 +}
7387 +
7388 +#frm_styling_form div.tabs-panel {
7389 + padding-left: 5px;
7390 + padding-right: 5px;
7391 +}
7392 +
7996 7393 /*form inputs/selects */
7997 7394 .frm_form_field.frm_scroll_box .frm_opt_container,
7998 -.frm-white-body .wrap input[type="text"], /* Cover Views pages */
7999 -.frm-white-body .wrap input[type="search"],
8000 -.frm-white-body .wrap input[type="number"],
8001 -.frm-white-body .wrap select,
8002 -.frm-white-body .wrap textarea,
7395 +#postbox-container-2 input[type="text"],
7396 +#postbox-container-2 input[type="number"],
7397 +#postbox-container-2 select,
7398 +#postbox-container-2 textarea,
8003 7399 button.frm_choose_image_box,
8004 7400 #titlediv input[type="text"],
8005 7401 .frm-fields button.btn,
8006 7402 .frm_wrap textarea,
@@ -8005,11 +7401,9 @@
8005 7401 .frm-fields button.btn,
8006 7402 .frm_wrap textarea,
8007 7403 .frm_wrap input[type="tel"],
8008 7404 .frm_wrap input[type="text"],
8009 -.frm_wrap input[type=search],
8010 7405 .frm_wrap input[type="number"],
8011 -.frm_wrap input[type="date"],
8012 7406 .frm_wrap select,
8013 7407 .wp-admin .frm_wrap select,
8014 7408 .field-group textarea,
8015 7409 .field-group input[type="text"],
@@ -8016,33 +7410,17 @@
8016 7410 .field-group select {
8017 7411 outline: 0;
8018 7412 box-shadow: none;
8019 7413 border-radius: var(--small-radius);
8020 - padding: 5px 14px;
8021 - border-color: var(--grey-300);
8022 - color: var(--grey-800);
8023 - font-size: var(--text-md);
7414 + padding: 6px 9px;
7415 + border-color: var(--grey-border);
7416 + color: var(--dark-grey);
7417 + font-size: 15px;
8024 7418 margin: 0;
8025 7419 background-color: #fff;
8026 - line-height: var(--leading);
7420 + line-height: 1;
8027 7421 }
8028 7422
8029 -.frm_wrap ::-webkit-datetime-edit {
8030 - line-height: var(--leading);
8031 -}
8032 -
8033 -.frm-white-body textarea:focus,
8034 -.frm-white-body input:focus,
8035 -.frm-white-body select:focus,
8036 -.frm_wrap input:focus,
8037 -.frm_wrap select:focus,
8038 -.wp-core-ui .frm_wrap select:focus,
8039 -.frm-btn-group .multiselect.dropdown-toggle:focus,
8040 -.frm_wrap textarea:focus {
8041 - border-color: var(--primary-500) !important;
8042 - box-shadow: none !important;
8043 -}
8044 -
8045 7423 #postbox-container-2 textarea,
8046 7424 .frm_wrap textarea,
8047 7425 .field-group textarea {
8048 7426 line-height: 2;
@@ -8059,12 +7437,19 @@
8059 7437 .wp-admin .frm_wrap select {
8060 7438 max-width: 100%;
8061 7439 }
8062 7440
8063 -.frm_form_field.frm_scroll_box .frm_opt_container {
7441 +.frm_form_field.frm_scroll_box .frm_opt_container,
7442 +.frm_wrap .frm_form_builder textarea,
7443 +.frm_wrap .frm_form_builder input[type="tel"],
7444 +.frm_wrap .frm_form_builder input[type="text"] {
8064 7445 padding: 10px 12px;
8065 7446 }
8066 7447
7448 +.frm_wrap .frm_form_builder input[type="text"].frm_other_input {
7449 + padding: 6px 9px;
7450 +}
7451 +
8067 7452 .frm_wrap input[disabled],
8068 7453 .frm_wrap select[disabled],
8069 7454 .frm_wrap textarea[disabled],
8070 7455 .frm_wrap input[readonly],
@@ -8070,23 +7455,37 @@
8070 7455 .frm_wrap input[readonly],
8071 7456 .frm_wrap select[readonly],
8072 7457 .frm_wrap textarea[readonly],
8073 7458 .frm_wrap input::placeholder {
8074 - color: var(--grey-500);
7459 + color: var(--grey);
8075 7460 }
8076 7461
7462 +#postcustomstuff table input {
7463 + width: 100% !important;
7464 + margin: 0 !important;
7465 +}
7466 +
7467 +#postcustomstuff table td {
7468 + padding: 7px 0 7px 7px !important;
7469 + line-height: 30px;
7470 +}
7471 +
8077 7472 #postcustomstuff table td > div {
8078 7473 /* To override some inline css in add-on */
8079 7474 padding-top: 0 !important;
8080 7475 }
8081 7476
8082 -.wp-admin .frm_wrap .form-table select {
7477 +.wp-admin .frm_wrap .form-table select,
7478 +#postbox-container-2 select,
7479 +.wp-admin .frm_wrap select {
7480 + line-height: 32px;
7481 + height: 32px;
8083 7482 vertical-align: top;
8084 7483 }
8085 7484
8086 7485 .frm_wrap .frm_form_builder select {
8087 - line-height: var(--leading);
8088 - height: var(--text-md);
7486 + line-height: 40px;
7487 + height: 40px;
8089 7488 width: 100%;
8090 7489 }
8091 7490
8092 7491 #postbox-container-2 select,
@@ -8092,25 +7491,11 @@
8092 7491 #postbox-container-2 select,
8093 7492 .wp-admin .frm_wrap select,
8094 7493 .frm_wrap .frm_form_builder select {
8095 7494 height: auto;
8096 - background-position: right 11px top 55%;
7495 + padding: 0 24px 0 12px;
8097 7496 }
8098 7497
8099 -.frm-white-body .tablenav select,
8100 -.frm-white-body .tablenav input[type="text"],
8101 -.wp-admin .frm_wrap .tablenav select,
8102 -.frm_wrap .tablenav input[type="date"],
8103 -.frm_wrap .tablenav input[type="text"] {
8104 - padding-top: 0;
8105 - padding-bottom: 0;
8106 - line-height: 1;
8107 -}
8108 -
8109 -.frm_wrap .tablenav ::-webkit-datetime-edit {
8110 - line-height: 1;
8111 -}
8112 -
8113 7498 .frm-fields button.btn,
8114 7499 .frm-fields textarea,
8115 7500 .frm-fields input[type="text"],
8116 7501 .frm-fields select,
@@ -8122,9 +7507,10 @@
8122 7507 outline: 0;
8123 7508 }
8124 7509
8125 7510 .frm-fields button.btn {
8126 - height: var(--h-md);
7511 + line-height: normal;
7512 + height: auto;
8127 7513 text-align: inherit;
8128 7514 }
8129 7515
8130 7516 .global-font .field-group input[type="text"] {
@@ -8130,53 +7516,8 @@
8130 7516 .global-font .field-group input[type="text"] {
8131 7517 width: auto;
8132 7518 }
8133 7519
8134 -/* Image Options */
8135 -
8136 -.frm_images_dropdown .frm_image_option {
8137 - margin: 0 !important;
8138 -}
8139 -
8140 -.frm_images_dropdown .frm_radio input[type=radio] {
8141 - opacity: 0;
8142 - position: absolute;
8143 - z-index: -1;
8144 -}
8145 -
8146 -.frm_images_dropdown__image .frmsvg {
8147 - width: 100%;
8148 - max-width: 102px;
8149 - fill: none;
8150 - margin: 0;
8151 -}
8152 -
8153 -.frm_images_dropdown .frm_noallow .frm_image_option_container {
8154 - opacity: .5;
8155 -}
8156 -
8157 -.frm_images_dropdown .frm_image_option_container {
8158 - border-radius: var(--small-radius);
8159 - border: 2px solid transparent;
8160 - align-items: center;
8161 -}
8162 -
8163 -.frm_images_dropdown .frm_image_option_container:hover {
8164 - background: #fff !important;
8165 -}
8166 -
8167 -.frm_images_dropdown input[type="radio"]:checked + .frm_image_option_container {
8168 - background: #fff !important;
8169 - border-color: var(--primary-500);
8170 -}
8171 -
8172 -.frm_images_dropdown .frm_text_label_for_image {
8173 - padding: 0;
8174 - text-align: left;
8175 -}
8176 -
8177 -/* End Image Options */
8178 -
8179 7520 /* Welcome page */
8180 7521
8181 7522 .wp-core-ui .frm_grey.frm-button-primary.disabled,
8182 7523 .wp-core-ui .frm_grey.frm-button-primary,
@@ -8195,9 +7536,9 @@
8195 7536 }
8196 7537
8197 7538 .windows::-webkit-scrollbar-thumb,
8198 7539 .windows ::-webkit-scrollbar-thumb {
8199 - background: var(--grey-300);
7540 + background: var(--grey-border);
8200 7541 -webkit-border-radius: var(--border-radius);
8201 7542 -webkit-box-shadow: none;
8202 7543 }
8203 7544
@@ -8219,9 +7560,8 @@
8219 7560 .rtl #frm_top_bar #frm_bs_dropdown {
8220 7561 padding-left: 15px;
8221 7562 }
8222 7563
8223 -.rtl .frm-full-close,
8224 7564 .rtl .frm_wrap .columns-2 .frm-right-panel,
8225 7565 .rtl .frm-right-panel {
8226 7566 border-right-width: 1px;
8227 7567 border-left-width: 0;
@@ -8226,14 +7566,9 @@
8226 7566 border-right-width: 1px;
8227 7567 border-left-width: 0;
8228 7568 }
8229 7569
8230 -.rtl .frm-full-close {
8231 - padding-left: 0;
8232 - padding-right: var(--gap-md);
8233 -}
8234 -
8235 -.rtl .frm-text-right {
7570 +.rtl .frm_right_text {
8236 7571 text-align: left;
8237 7572 }
8238 7573
8239 7574 .rtl .frm_wrap #frm_adv_info ul.category-tabs li:first-child {
@@ -8278,39 +7613,22 @@
8278 7613 right: unset;
8279 7614 left: 2px;
8280 7615 }
8281 7616
7617 +.rtl #frm_upgrade_modal .dismiss i,
7618 +.rtl .frm-inline-modal i,
7619 +.rtl #frm-bulk-modal i,
8282 7620 .rtl .frm_has_shortcodes > i {
8283 7621 right: auto;
8284 7622 left: 5px;
8285 7623 }
8286 7624
7625 +.rtl .frm_code_list.frm-full-hover a span,
8287 7626 .rtl .frm_reply_to_container,
8288 7627 .rtl .frm_bcc_cc_container {
8289 7628 float: left;
8290 7629 }
8291 7630
8292 -.rtl .frm-default-switcher {
8293 - float: left;
8294 - position: relative;
8295 -}
8296 -
8297 -.rtl .frm-with-right-icon .frmsvg {
8298 - right: auto;
8299 - left: 0;
8300 -}
8301 -
8302 -.rtl .frm-inline-modal > a.dismiss {
8303 - left: 13px;
8304 - right: auto;
8305 -}
8306 -
8307 -.rtl.wp-admin .frm_wrap select {
8308 - padding-left: var(--gap-lg) !important;
8309 - padding-right: 5px !important;
8310 - background-position: left 11px top 55%;
8311 -}
8312 -
8313 7631 /* ---------------------------------------------------------------
8314 7632 Clearfix
8315 7633 --------------------------------------------------------------- */
8316 7634 span.clear {
@@ -8352,12 +7670,15 @@
8352 7670 @media only screen and (max-width: 1200px) {
8353 7671 .frm-addons {
8354 7672 grid-template-columns: 1fr 1fr;
8355 7673 }
7674 +
7675 + ul.frm_form_nav > li {
7676 + margin-right: 2.5%;
7677 + }
8356 7678 }
8357 7679
8358 7680 @media only screen and (max-width: 1050px) {
8359 - .frm-white-body,
8360 7681 .frm_wrap {
8361 7682 --biggest-sidebar: 390px;
8362 7683 }
8363 7684
@@ -8367,18 +7688,15 @@
8367 7688
8368 7689 .frm_actions_list {
8369 7690 margin-left: 0;
8370 7691 }
7692 +
7693 + ul.frm_form_nav > li {
7694 + margin-right: 1.5%;
7695 + }
8371 7696 }
8372 7697
8373 7698 @media only screen and (max-width: 960px) {
8374 - .frm-white-body,
8375 - .frm_wrap {
8376 - --gap-sm: 8px;
8377 - --gap-md: 16px;
8378 - --gap-2xl: 24px;
8379 - }
8380 -
8381 7699 .auto-fold #adminmenuwrap {
8382 7700 width: 36px;
8383 7701 }
8384 7702
@@ -8389,32 +7707,36 @@
8389 7707 p.howto {
8390 7708 display: inline-block;
8391 7709 }
8392 7710
8393 - /* Fix: Issue where the admin page content had extra white space to the left on small screens */
8394 - .auto-fold.frm-admin-page-styles:not(.frm-full-screen) .frm_page_container,
8395 - .auto-fold:not(.frm-full-screen) .frm_wrap .frm_page_container {
8396 - left: 36px;
7711 + ul.frm_form_nav {
7712 + clear: left;
7713 + padding-top: 0;
8397 7714 }
7715 +
7716 + ul.frm_form_nav > li {
7717 + margin-right: 3.5%;
7718 + }
7719 +
7720 + .frm-full-screen #frm_top_bar {
7721 + padding: 0 10px !important;
7722 + }
7723 +
7724 + .frm-full-close {
7725 + padding: 15px 0 10px 10px;
7726 + }
7727 +
7728 + .frm-full-close .frmsvg {
7729 + padding: 0;
7730 + }
8398 7731 }
8399 7732
8400 7733 @media only screen and (max-width: 850px) {
8401 - #frm_bs_dropdown {
8402 - /* There isn't enough room for the title on a screen this size so just hide it. */
8403 - display: none;
8404 - }
8405 -
8406 - .frm-white-body,
8407 7734 .frm_wrap {
8408 7735 --biggest-sidebar: 350px;
8409 7736 --big-sidebar: 350px;
8410 7737 }
8411 7738
8412 - #frm_bs_dropdown .frm_bstooltip {
8413 - /* There isn't enough room for the title on a screen this size so just hide it. */
8414 - display: none !important;
8415 - }
8416 -
8417 7739 .frm_col_one {
8418 7740 clear: none;
8419 7741 }
8420 7742
@@ -8423,9 +7745,10 @@
8423 7745 display: block;
8424 7746 margin: 5px 0;
8425 7747 }
8426 7748
8427 - #frm_top_bar h1 {
7749 + .post-type-frm_display #frm_top_bar h1,
7750 + .frm_page_container #frm_top_bar h1 {
8428 7751 width: auto;
8429 7752 max-width: 200px;
8430 7753 }
8431 7754
@@ -8495,9 +7818,8 @@
8495 7818 }
8496 7819 }
8497 7820
8498 7821 @media only screen and (max-width: 782px) {
8499 - .frm-white-body,
8500 7822 .frm_wrap {
8501 7823 --small-sidebar: 20%;
8502 7824 --medium-sidebar: 35%
8503 7825 }
@@ -8511,9 +7833,9 @@
8511 7833 .frm_wrap #publishing-action {
8512 7834 line-height: normal;
8513 7835 }
8514 7836
8515 - .frm-white-body #screen-meta-links {
7837 + .frm-full-screen #screen-meta-links {
8516 7838 display: none;
8517 7839 }
8518 7840
8519 7841 .frm_wrap .misc-pub-section {
@@ -8572,13 +7894,8 @@
8572 7894 .with_frm_style .frm_checkbox input[type=checkbox] {
8573 7895 width: 25px !important;
8574 7896 }
8575 7897
8576 - .frm_single_entry_page .with_frm_style .frm_radio input[type=radio],
8577 - .frm_single_entry_page .with_frm_style .frm_checkbox input[type=checkbox] {
8578 - width: 18px !important;
8579 - }
8580 -
8581 7898 .wp-list-table.toplevel_page_formidable .column-entries,
8582 7899 .wp-list-table.toplevel_page_formidable .column-form_key,
8583 7900 .wp-list-table.toplevel_page_formidable .column-shortcode,
8584 7901 .wp-list-table.toplevel_page_formidable .column-created_at {
@@ -8592,13 +7909,27 @@
8592 7909 padding: 3px 8px 3px 35%;
8593 7910 text-align: left;
8594 7911 }
8595 7912
7913 + .wp-list-table.toplevel_page_formidable td.column-title:before,
7914 + .wp-list-table.toplevel_page_formidable td.column-id:before {
7915 + display: none !important;
7916 + }
7917 +
7918 + .wp-list-table.toplevel_page_formidable td.column-title,
7919 + .wp-list-table.toplevel_page_formidable td.column-id {
7920 + display: table-cell !important;
7921 + }
7922 +
8596 7923 #form_entries_page .wp-list-table th.frm_hidden,
8597 7924 #form_entries_page .wp-list-table td.frm_hidden {
8598 7925 display: none !important;
8599 7926 }
8600 7927
7928 + ul.frm_form_nav > li {
7929 + margin-right: 15px;
7930 + }
7931 +
8601 7932 .frm-white-body.auto-fold #wpcontent {
8602 7933 padding-left: 0;
8603 7934 }
8604 7935
@@ -8609,13 +7940,11 @@
8609 7940 .frm-addons {
8610 7941 grid-template-columns: 1fr;
8611 7942 }
8612 7943
8613 - .frm-admin-page-styles .frm_page_container,
8614 - .frm_wrap .frm_page_container {
8615 - left: 0 !important;
8616 - top: 46px !important;
8617 - height: calc( 100vh - 46px ) !important;
7944 + .frm_single_entry_page.frm_wrap .frm_page_container {
7945 + height: auto;
7946 + display: block;
8618 7947 }
8619 7948
8620 7949 .frm_single_entry_page.frm_wrap .columns-2 {
8621 7950 display: block;
@@ -8633,14 +7962,13 @@
8633 7962 border-radius: 6px;
8634 7963 }
8635 7964
8636 7965 #wp-content-media-buttons a.frm_insert_form {
8637 - padding: 0 var(--gap-sm);
7966 + padding: 0 15px;
8638 7967 }
8639 7968 }
8640 7969
8641 7970 @media only screen and (max-width: 700px) {
8642 - .frm-white-body,
8643 7971 .frm_wrap {
8644 7972 --biggest-sidebar: 50%;
8645 7973 --big-sidebar: 50%;
8646 7974 }
@@ -8646,9 +7974,8 @@
8646 7974 }
8647 7975 }
8648 7976
8649 7977 @media only screen and (max-width: 600px) {
8650 - .frm-white-body,
8651 7978 .frm_wrap {
8652 7979 --small-sidebar: 45px;
8653 7980 }
8654 7981
@@ -8654,9 +7981,9 @@
8654 7981
8655 7982 .frm-form-setting-tabs a {
8656 7983 visibility: collapse;
8657 7984 font-size: 0;
8658 - padding: 0 var(--gap-sm);
7985 + padding: 0 15px;
8659 7986 }
8660 7987
8661 7988 .frm-form-setting-tabs a .frmsvg,
8662 7989 .frm-form-setting-tabs a i {
@@ -8728,12 +8055,8 @@
8728 8055 .rtl #frm_builder_page .frm_actions_dropdown > .frm-dropdown-menu {
8729 8056 right: auto;
8730 8057 left: 0;
8731 8058 }
8732 -
8733 - .frm_on_submit_type svg {
8734 - display: none;
8735 - }
8736 8059 }
8737 8060
8738 8061 @media only screen and (max-width: 475px) {
8739 8062 #frm_bs_dropdown {
@@ -8749,18 +8072,8 @@
8749 8072 margin-right: 0;
8750 8073 }
8751 8074 }
8752 8075
8753 -/* Firefox */
8754 -@-moz-document url-prefix() {
8755 - .frm-white-body .tablenav select,
8756 - .frm-white-body .tablenav input[type="text"],
8757 - .wp-admin .frm_wrap .tablenav select,
8758 - .frm_wrap .tablenav input[type="text"] {
8759 - padding-top: 5px;
8760 - }
8761 -}
8762 -
8763 8076 /* PRINT */
8764 8077 @media print {
8765 8078 a, .misc-pub-section a {
8766 8079 color: #000 !important;
@@ -8811,9 +8124,9 @@
8811 8124 display: block;
8812 8125 padding: 20px;
8813 8126 }
8814 8127
8815 - .frm_wrap .columns-2,
8128 + .frm_page_container .columns-2,
8816 8129 .frm_wrap .frm_page_container {
8817 8130 height: auto;
8818 8131 display: block;
8819 8132 }
@@ -8850,10 +8163,9 @@
8850 8163 width: 100%;
8851 8164 }
8852 8165 }
8853 8166
8854 -.frm-admin-page-styles #frm-publishing #save_menu_header,
8855 -.frm-admin-page-styles2 #frm-publishing #save_menu_header {
8167 +.frm-admin-page-styles #frm-publishing #save_menu_header {
8856 8168 display: inline-block;
8857 8169 }
8858 8170
8859 8171 /* Change the order of subfields of the Name field in the backend */
@@ -8860,12 +8172,16 @@
8860 8172 .edit_form_item .frm_combo_inputs_container[data-name-layout="last_first"] .frm_form_subfield-first {
8861 8173 order: 2;
8862 8174 }
8863 8175
8176 +.frm-video-wrapper {
8177 + padding: 0 20px;
8178 +}
8179 +
8864 8180 .frm-video-wrapper iframe {
8865 8181 width: 100%;
8866 8182 max-width: 843px;
8867 - border-radius: var(--border-radius);
8183 + border-radius: 10px;
8868 8184 }
8869 8185
8870 8186 #frm_field_group_popup {
8871 8187 position: absolute;
@@ -8928,9 +8244,9 @@
8928 8244 }
8929 8245
8930 8246 #frm_field_group_popup .frm-row-layout-option.frm-active-row-layout,
8931 8247 #frm_field_group_popup .frm-row-layout-option:hover {
8932 - outline: 1px solid var(--primary-500);
8248 + outline: 1px solid #4199FD;
8933 8249 }
8934 8250
8935 8251 .frm-custom-field-group-layout,
8936 8252 .frm-break-field-group {
@@ -8935,9 +8251,9 @@
8935 8251 .frm-custom-field-group-layout,
8936 8252 .frm-break-field-group {
8937 8253 padding: 5px 15px;
8938 8254 cursor: pointer;
8939 - font-size: var(--text-sm);
8255 + font-size: 14px;
8940 8256 line-height: 19px;
8941 8257 color: rgba(40, 47, 54, 0.85);
8942 8258 }
8943 8259
@@ -8950,8 +8266,13 @@
8950 8266 .frm-break-field-group svg {
8951 8267 margin-right: 5px;
8952 8268 }
8953 8269
8270 +.frm-selected-field-group {
8271 + background: rgba(65, 153, 253, 0.07);
8272 + position: relative;
8273 +}
8274 +
8954 8275 #frm_field_multiselect_popup {
8955 8276 background: white;
8956 8277 height: 48px;
8957 8278 position: fixed;
@@ -9004,134 +8325,9 @@
9004 8325 top: 6px;
9005 8326 background: #C4C4C4;
9006 8327 }
9007 8328
8329 +
9008 8330 .frm-sortable-helper,
9009 8331 .frm-multiselect-key-is-down li.form-field:not(.edit_field_type_divider) {
9010 8332 pointer-events: none;
9011 8333 }
9012 -
9013 -.frm-sortable-helper {
9014 - /* Make sure the item being dragged appears above other form builder fields */
9015 - z-index: 99;
9016 -}
9017 -
9018 -#frm_banner {
9019 - width: 100%;
9020 - color: #fff;
9021 - background: var(--primary-500);
9022 - height: 40px;
9023 - line-height: 40px;
9024 - text-align: center;
9025 - position: relative;
9026 -}
9027 -
9028 -.frm-banner-emoji {
9029 - font-size: 19px;
9030 -}
9031 -
9032 -.frm-banner-emoji,
9033 -.frm-banner-title {
9034 - margin-right: 5px;
9035 - vertical-align: top;
9036 -}
9037 -
9038 -.frm-banner-cta a {
9039 - text-decoration: underline !important;
9040 -}
9041 -
9042 -.frm-banner-dismiss {
9043 - cursor: pointer;
9044 - position: absolute;
9045 - right: 10px;
9046 - top: 50%;
9047 - transform: translateY( -50% );
9048 -}
9049 -
9050 -.frm-banner-dismiss .frmsvg {
9051 - vertical-align: top;
9052 -}
9053 -
9054 -.frm-ready-made-solution:not(.frm-search-result) {
9055 - display: none !important;
9056 -}
9057 -
9058 -#frm_new_form_modal .frm-ready-made-solution {
9059 - padding: var(--gap-xs) !important;
9060 - margin: var(--gap-xs) 0 var(--gap-sm);
9061 - display: flex;
9062 - gap: var(--gap-sm);
9063 - position: relative;
9064 - overflow: visible !important;
9065 -}
9066 -
9067 -#frm_new_form_modal .frm-ready-made-solution:after {
9068 - width: 100%;
9069 - height: 1px;
9070 - background: var(--grey-300);
9071 - content: '';
9072 - position: absolute;
9073 - bottom: -10px;
9074 - left: 0;
9075 -}
9076 -
9077 -#frm_new_form_modal .frm-ready-made-solution.frm-search-result:last-of-type::after {
9078 - content: none;
9079 -}
9080 -
9081 -#frm_new_form_modal .frm-solution-details {
9082 - flex: 1;
9083 - display: flex;
9084 - gap: var(--gap-2xs);
9085 - flex-direction: column;
9086 -}
9087 -
9088 -#frm_new_form_modal .frm-ready-made-solution > div:first-child {
9089 - width: 30%;
9090 - text-align: center;
9091 -}
9092 -
9093 -.frm-ready-made-solution h3 ~ a {
9094 - color: var(--primary-500);
9095 -}
9096 -
9097 -.frm-ready-made-solution img {
9098 - max-width: 100%;
9099 - display: block;
9100 - box-shadow: var(--box-shadow-lg);
9101 -}
9102 -
9103 -/* On Submit action */
9104 -.frm_single_on_submit_settings .frm_form_field {
9105 - margin: 8px 0;
9106 -}
9107 -
9108 -.frm_on_submit_type_setting {
9109 - padding: 8px 0;
9110 -}
9111 -
9112 -.frm_on_submit_type label {
9113 - display: flex;
9114 - border: 1px solid var(--grey-border);
9115 - border-radius: var(--small-radius);
9116 - gap: 16px;
9117 - padding: 16px;
9118 - align-items: center;
9119 - justify-content: center;
9120 -}
9121 -
9122 -.frm_on_submit_type input {
9123 - opacity: 0 !important;
9124 - position: absolute;
9125 - z-index: -1;
9126 -}
9127 -
9128 -.frm_on_submit_type input[type="radio"]:checked + label {
9129 - border-color: var(--primary-color);
9130 - box-shadow: 0 0 0 1px var(--primary-color);
9131 -}
9132 -
9133 -#form_settings_page .frm_on_submit_type label:hover,
9134 -.frm_on_submit_type input[type="radio"]:checked + label svg {
9135 - color: var(--primary-color);
9136 -}
9137 -/* End On Submit action */