PluginProbe
Mailchimp List Subscribe Form / 2.0.1
Mailchimp List Subscribe Form v2.0.1
1.2.4 1.2.5 1.2.6 1.2.7 1.2.8 1.2.9 1.3 1.4 1.4.1 1.4.2 1.4.3 1.4.4 1.4.5 1.5 1.5.1 1.5.2 1.5.3 1.5.4 1.5.5 1.5.6 1.5.7 1.5.8 1.5.9 1.6.0 1.6.1 All 55 releases
mailchimp / assets / css / admin.css

admin.css in Mailchimp List Subscribe Form 2.0.1, at assets/css/admin.css

1,678 lines 34.4 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /* Import fonts */
2 @import url('../fonts/Means/fonts.css');
3 @import url('../fonts/graphik/fonts.css');
4
5 :root {
6 --mailchimp-color-text: #21262a;
7 --mailchimp-color-text-gray: #757575;
8 --mailchimp-color-white: #fff;
9 --mailchimp-color-border: #ffe01b;
10 --mailchimp-color-header-bg: #fbeeca;
11 --mailchimp-color-link: #017e89;
12 --mailchimp-color-link-hover: #006771;
13 --mailchimp-color-text-light: #373737;
14 --mailchimp-color-text-lightest: #5d5c5d;
15 --mailchimp-border-color: #D3D0C8;
16 --mailchimp-max-width: 56.25rem; /* 900 pixels */
17 }
18
19 .error_msg,
20 .success_msg,
21 .notes_msg,
22 table.mc-user,
23 .mc-list-row,
24 .mc-list-note,
25 .mc-section,
26 .mailchimp-sf-nav-tab-wrapper {
27 max-width: 900px;
28 width: 100%;
29 }
30
31 /* Header */
32 .mailchimp-header {
33 align-items: center;
34 background-color: var(--mailchimp-color-white);
35 border-top: 2px solid var(--mailchimp-color-border);
36 box-sizing: border-box;
37 display: flex;
38 gap: 1rem;
39 justify-content: space-between;
40 max-width: var(--mailchimp-max-width);
41 padding: 0.75rem 1rem;
42 }
43
44 /* Sections */
45 table.mc-widefat {
46 background: var(--mailchimp-color-white);
47 border: 2px solid var(--mailchimp-color-header-bg) !important;
48 border-radius: 6px;
49 margin: 2.75rem 0 2.25rem;
50 }
51
52 /* Buttons */
53 #wpbody .button-secondary {
54 border-color: var(--mailchimp-color-link);
55 color: var(--mailchimp-color-link);
56 }
57
58 .error_msg {
59 --mailchimp-error-bg: #fadbd5;
60 --mailchimp-error-border: #db3a1b;
61 background: var(--mailchimp-error-bg);
62 border: 1px solid var(--mailchimp-error-border);
63 border-radius: 6px;
64 box-sizing: border-box;
65 color: var(--mailchimp-color-text);
66 font-size: 0.75rem;
67 line-height: 1;
68 margin: 12px 0;
69 padding: 9px;
70 }
71
72 .success_msg,
73 .notes_msg {
74 background: var(--mailchimp-color-header-bg);
75 border-radius: 6px;
76 box-sizing: border-box;
77 color: var(--mailchimp-color-text-light);
78 font-size: 0.75rem;
79 line-height: 1;
80 margin: 12px 0;
81 padding: 9px;
82 }
83
84 /* User */
85 table.mc-user {
86 margin-top: 19px;
87 }
88
89 table.mc-user tr {
90 border: 1px solid var(--mailchimp-color-link);
91 border-radius: 38px;
92 float: right;
93 padding: 0px 11px;
94 }
95
96 .mc-user td:first-of-type {
97 font-weight: 400 !important;
98 padding-right: 1rem;
99 }
100
101 .mc-user td:last-of-type {
102 min-width: 75px;
103 }
104
105 .mc-user h3 {
106 font-weight: 400;
107 text-indent: 9px;
108 }
109
110 /* List Selection */
111 .mc-list-row {
112 margin-bottom: 12px;
113 }
114
115 .mc-list-row td:first-of-type {
116 min-width: 200px;
117 padding: 12px 12px 12px 0;
118 }
119
120 .mc-list-row td:last-of-type {
121 padding: 12px 12px 12px 0;
122 width: 80px;
123 }
124
125 .mc-list-note {
126 border-bottom: 2px solid var(--mailchimp-color-text);
127 color: var(--mailchimp-color-text-lightest);
128 font-size: 0.8125rem;
129 font-weight: 400;
130 margin-bottom: 8px;
131 margin-top: 7px;
132 padding: 0 0 18px;
133 }
134
135 table.mc-list-select {
136 margin-bottom: -40px;
137 }
138
139 /* Headings */
140 .mailchimp-header h1 {
141 font-weight: 600;
142 margin: 0.75em 0;
143 padding: 0;
144 }
145
146 .mailchimp-header h1,
147 .mc-h2,
148 .mc-h3,
149 .mc-p {
150 color: var(--mailchimp-color-text);
151 }
152
153 .mc-h2 {
154 font-size: 1.625rem;
155 margin-bottom: 0;
156 font-weight: 400;
157 }
158
159 .mc-h3 {
160 border-bottom: 2px solid var(--mailchimp-color-text);
161 font-size: 1.125rem;
162 margin-bottom: 12px;
163 margin-top: 36px;
164 padding-bottom: 12px;
165 }
166
167 .mc-p {
168 font-size: 1rem;
169 font-weight: 400;
170 margin-bottom: 0;
171 }
172
173 .mc-p a {
174 color: var(--mailchimp-color-link);
175 font-weight: 400;
176 }
177
178 /* Table */
179 table.mc-widefat td,
180 table.mc-widefat th {
181 padding: 18px;
182 text-align: left;
183 text-shadow: none;
184 }
185
186 table.mc-widefat .last-row td,
187 table.mc-widefat .last-row th {
188 border-bottom: none !important;
189 }
190
191 table.mc-widefat th {
192 color: var(--mailchimp-color-text-light) !important;
193 font-weight: 500;
194 width: 130px;
195 }
196
197 table.mc-widefat td label {
198 display: block;
199 font-size: 0.75rem;
200 font-style: normal;
201 margin-top: -17px;
202 padding-left: 24px;
203 }
204
205 table.mc-widefat td {
206 color: var(--mailchimp-color-text-lightest) !important;
207 font-size: 0.75rem;
208 line-height: 1.125 !important;
209 }
210
211 table.mc-widefat td input {
212 display: inline-block;
213 font-style: normal;
214 }
215
216 table.mc-widefat.mc-api {
217 border-radius: 6px;
218 margin-bottom: 19px;
219 margin-top: 19px;
220 }
221
222 table.mc-widefat.mc-api td,
223 table.mc-widefat.mc-api th {
224 border-bottom: none !important;
225 }
226
227 table.mc-widefat.mc-api tr:first-child {
228 background: var(--mailchimp-color-header-bg) !important;
229 }
230
231 .mailchimp-sf-settings-table table.widefat.mailchimp-sf-user-sync-errors-table {
232 table-layout: fixed;
233 }
234
235 .mailchimp-sf-settings-table table.widefat.mailchimp-sf-user-sync-errors-table tr th:first-child,
236 .mailchimp-sf-settings-table table.widefat.mailchimp-sf-user-sync-errors-table trtd:first-child {
237 width: 48px;
238 }
239
240 .mailchimp-sf-settings-table table.widefat.mailchimp-sf-user-sync-errors-table tr th:last-child,
241 .mailchimp-sf-settings-table table.widefat.mailchimp-sf-user-sync-errors-table tr td:last-child {
242 width: 120px;
243 }
244
245 .mailchimp-sf-settings-table table.widefat.mailchimp-sf-user-sync-errors-table tr th {
246 margin: 0px;
247 padding: 12px;
248 border-radius: 0px;
249 }
250
251 .mailchimp-sf-settings-table table.widefat.mailchimp-sf-user-sync-errors-table tr td {
252 font-size: 14px;
253 padding: 12px;
254 word-wrap: break-word;
255 }
256
257 .mailchimp-sf-settings-table table.widefat.mailchimp-sf-user-sync-errors-table tr td strong {
258 word-wrap: break-word;
259 }
260
261 a.mc-api-key {
262 color: var(--mailchimp-color-white);
263 display: block;
264 margin-top: 3px;
265 }
266
267 a.mc-api-key:hover {
268 color: var(--mailchimp-color-white);
269 text-decoration: underline;
270 }
271
272 .mc-api-submit {
273 margin-bottom: 19px;
274 }
275
276 .mc-submit {
277 clear: both;
278 float: right;
279 }
280
281 th.mailchimp-connect {
282 width: 100% !important;
283 }
284
285 #mc-message {
286 margin-top: 26px;
287 }
288
289 /**
290 * Navigation
291 */
292 .mailchimp-sf-nav-tab-wrapper {
293 margin-top: 1em;
294 }
295
296 .mailchimp-sf-nav-tab-wrapper a.nav-tab {
297 border: 0px;
298 background: transparent;
299 color: #000;
300 margin-left: 0;
301 font-weight: 500;
302 padding: 5px 12px;
303 }
304
305 .mailchimp-sf-nav-tab-wrapper a.nav-tab:hover {
306 color: var(--mailchimp-color-link);
307 }
308
309 .mailchimp-sf-nav-tab-wrapper a.nav-tab.nav-tab-active {
310 border-bottom: 2px solid var(--mailchimp-color-link);
311 color: var(--mailchimp-color-link);
312 }
313
314 /**
315 * Mailchimp OAuth CSS
316 */
317 .mailchimp-sf-oauth-error {
318 color: #a73205;
319 margin-bottom: 0px;
320 font-size: 14px;
321 font-weight: 500;
322 }
323
324 .mailchimp-sf-oauth-connect-wrapper {
325 display: flex;
326 gap: 16px;
327 }
328
329 #mailchimp-sf-settings-page {
330 font-family: 'Graphik Mailchimp Web', ui-sans-serif, system-ui, sans-serif;
331 }
332
333 #mailchimp-sf-settings-page .flex {
334 display:flex;
335 }
336
337 #mailchimp-sf-settings-page .gap-x-6 {
338 column-gap: 32px;
339 }
340
341 #mailchimp-sf-settings-page .gap-x-2 {
342 column-gap: 8px;
343 }
344
345 #mailchimp-sf-settings-page .justify-between {
346 justify-content: space-between;
347 }
348
349 #mailchimp-sf-settings-page .items-center {
350 align-items: center;
351 }
352
353 #mailchimp-sf-settings-page .opacity-25 {
354 opacity: 0.25;
355 }
356
357 #mailchimp-sf-settings-page .opacity-75 {
358 opacity: 0.75;
359 }
360
361 #mailchimp-sf-settings-page .mailchimp-sf-loading {
362 animation: spin 1s linear infinite;
363 }
364
365 #mailchimp-sf-settings-page .mailchimp-sf-loading svg {
366 display: block;
367 }
368
369 #mailchimp-sf-settings-page .wizard-steps {
370 color: rgba(36, 28, 21);
371 font-size: 14px;
372 line-height: 18px;
373 }
374
375 #mailchimp-sf-settings-page .wizard-steps .deselected {
376 color: rgba(36, 28, 21, 0.3);
377 }
378
379 #mailchimp-sf-settings-page .wizard-steps .current {
380 color: rgba(36, 28, 21);
381 border-bottom: 2px solid rgb(0, 124, 137);
382 }
383
384 #mailchimp-sf-settings-page .wizard-steps .chevron {
385 margin: 0 5px;
386 }
387
388 #mailchimp-sf-settings-page .wizard-steps .chevron svg {
389 display: block;
390 }
391
392 @keyframes spin {
393 from {
394 transform: rotate(0deg);
395 }
396 to {
397 transform: rotate(360deg);
398 }
399 }
400
401 .mailchimp-sf-header {
402 padding: 14px 36px;
403 background: #fff;
404 border-top: 4px solid var(--mailchimp-color-border);
405 border-bottom: 1px solid var(--mailchimp-border-color);
406 column-gap: 34px;
407 margin-left: -20px;
408 }
409
410 .toplevel_page_mailchimp_sf_options .mailchimp-sf-header {
411 column-gap: unset;
412 }
413
414 .mailchimp-sf-header h3,
415 .mailchimp-sf-user-sync-settings-field-label {
416 font-family: "Means Web", serif;
417 margin-bottom: 0px;
418 margin-top: 0px;
419 font-weight: 300;
420 font-size: 20px;
421 line-height: 1.2em;
422 letter-spacing: -0.72px;
423 }
424
425 .mailchimp-sf-user-sync-settings-field-label {
426 margin-bottom: 24px;
427 line-height: 1.25em;
428 }
429
430 .mailchimp-user-sync-subscriber-status .mailchimp-sf-user-sync-settings-field-label,
431 .mailchimp-user-sync-user-roles .mailchimp-sf-user-sync-settings-field-label,
432 .mailchimp-user-sync-user-sync-errors .mailchimp-sf-user-sync-settings-field-label {
433 border-bottom: 1px solid var(--mailchimp-border-color);
434 padding-bottom: 20px;
435 }
436
437 .mailchimp-sf-header .logo {
438 margin: 6px 0px;
439 }
440
441 .mailchimp-sf-header .mailchimp-sf-create-account-plus {
442 margin: 0px 10px;
443 font-family: "Means Web", serif;
444 font-size: 44px;
445 color: #8C8C8C;
446 font-weight: 300;
447 }
448
449 body.admin_page_mailchimp_sf_create_account {
450 background-color: #F6F6F4;
451 font-family: 'Graphik Mailchimp Web', ui-sans-serif, system-ui, sans-serif;
452 }
453
454 body.toplevel_page_mailchimp_sf_options {
455 background-color: #fff;
456 font-family: 'Graphik Mailchimp Web', ui-sans-serif, system-ui, sans-serif;
457 }
458
459 body.admin_page_mailchimp_sf_create_account a,
460 body.toplevel_page_mailchimp_sf_options a {
461 color: var(--mailchimp-color-link);
462 }
463
464 body.admin_page_mailchimp_sf_create_account a:hover,
465 body.toplevel_page_mailchimp_sf_options a:hover {
466 color: var(--mailchimp-color-link-hover);
467 }
468
469 body.admin_page_mailchimp_sf_create_account #footer-upgrade,
470 body.toplevel_page_mailchimp_sf_options #footer-upgrade {
471 display: none;
472 }
473
474 .mailchimp-sf-create-account__body-inner {
475 max-width: 600px;
476 margin: 0 auto;
477 padding: 70px 12px 120px 12px;
478 }
479
480 .mailchimp-sf-content-box-wrapper {
481 width: 100%;
482 max-width: 504px;
483 margin: 0 auto;
484 padding-top: 48px;
485 padding-bottom: 120px;
486 }
487
488 .mailchimp-sf-content-box {
489 background-color: #ffffff;
490 border-radius: 12px;
491 border: 1px solid rgba(36, 28, 21, 0.15);
492 padding: 52px 64px;
493 }
494
495 #mailchimp-sf-settings-page .email-opener {
496 font-size: 16px;
497 line-height: 24px;
498 font-weight: 500;
499 text-decoration: underline;
500 }
501
502 #mailchimp-sf-settings-page .h4 {
503 font-size: 16px;
504 margin: 0;
505 margin-bottom: 32px;
506 font-weight: 400;
507 }
508
509 #mailchimp-sf-settings-page .mailchimp-sf-email {
510 font-weight: 500;
511 }
512
513 #mailchimp-sf-settings-page .title {
514 font-family: "Means Web", serif;
515 font-size: 32px;
516 font-weight: 400;
517 line-height: 1.25em;
518 margin-bottom: 32px;
519 }
520
521 #mailchimp-sf-settings-page .mailchimp-sf-content-box .title {
522 margin-bottom: 16px;
523 }
524
525 #mailchimp-sf-settings-page .subtitle {
526 font-family: "Means Web", serif;
527 font-size: 20px;
528 line-height: 1.2em;
529 font-weight: 400;
530 padding-left: 0;
531 margin-bottom: 16px;
532 color: #000;
533 }
534
535 .mailchimp-sf-create-account-step {
536 padding: 4px 0px 10px 0px;
537 }
538
539 #mailchimp-sf-business-address {
540 margin-top: 36px;
541 }
542
543 .button.mailchimp-sf-button.button-secondary {
544 color: var(--mailchimp-color-link);
545 background-color: #fff;
546 border: 1px solid var(--mailchimp-color-link);
547 }
548
549 .button.mailchimp-sf-button:hover,
550 .button.mailchimp-sf-button:focus,
551 .button.mailchimp-sf-button:active {
552 color: #ffffff;
553 background-color: var(--mailchimp-color-link-hover);
554 text-decoration: none;
555 }
556
557 .button.mailchimp-sf-button:focus {
558 box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--mailchimp-color-link-hover);
559 }
560
561 .button.mailchimp-sf-button.button-secondary:hover,
562 .button.mailchimp-sf-button.button-secondary:focus,
563 .button.mailchimp-sf-button.button-secondary:active,
564 .button.mailchimp-sf-button.button-secondary.small:hover,
565 .button.mailchimp-sf-button.button-secondary.small:focus,
566 .button.mailchimp-sf-button.button-secondary.small:active {
567 color: var(--mailchimp-color-link);
568 background-color: #f6f7f7;
569 }
570
571 .button.mailchimp-sf-button[disabled] {
572 cursor: not-allowed;
573 }
574
575 .button.mailchimp-sf-button.small,
576 .button.mailchimp-sf-button.user-sync-settings-submit {
577 padding: 8px 16px;
578 line-height: 14px;
579 float: right;
580 clear: both;
581 }
582
583 .migrate-to-oauth-wrapper {
584 margin: 1em 0;
585 }
586
587 .migrate-to-oauth-wrapper .button.mailchimp-sf-button {
588 padding: 9px 16px;
589 line-height: 14px;
590 }
591
592 .migrate-to-oauth-wrapper button.button.mailchimp-sf-button:disabled {
593 padding: 6px 16px;
594 }
595
596 .migrate-to-oauth-wrapper button.button.mailchimp-sf-button svg {
597 width: 20px;
598 height: 20px;
599 }
600
601 .button.mailchimp-sf-button.button-secondary.small {
602 background-color: transparent;
603 }
604
605 .mailchimp-sf-create-account__body .mailchimp-sf-confirm-email a {
606 color: var(--mailchimp-color-link);
607 }
608
609 .mailchimp-sf-create-account__body .terms a {
610 color: var(--mailchimp-color-link);
611 font-weight: 500;
612 text-decoration: none;
613 }
614
615 .mailchimp-sf-create-account__body .terms p {
616 font-size: 16px;
617 line-height: 1.25em;
618 font-weight: 400;
619 color: var(--mailchimp-color-text);
620 }
621
622 .mailchimp-sf-create-account__body .terms p:last-child {
623 margin-bottom: 32px;
624 }
625
626 .mailchimp-sf-create-account__body .terms a:hover {
627 text-decoration: underline;
628 }
629
630 .mailchimp-sf-form-wrapper fieldset{
631 background: transparent;
632 width: 100%;
633 }
634
635 .mailchimp-sf-form-wrapper span.optional,
636 .mailchimp-sf-form-wrapper p.help-text {
637 font-size: 16px;
638 line-height: 1.5em;
639 font-weight: 400;
640 color: rgba(36, 28, 21, 0.65);
641 margin-bottom: 0px;
642 }
643
644 .mailchimp-sf-form-wrapper label {
645 display: block;
646 font-family: 'Graphik Mailchimp Web', ui-sans-serif, system-ui, sans-serif;
647 font-size: 16px;
648 font-weight: 500;
649 line-height: 1.5em;
650 width: 100%;
651 color: var(--mailchimp-color-text);
652 margin-bottom: 8px;
653 }
654
655 .mailchimp-sf-form-wrapper .box.box-half {
656 float: left;
657 clear: none;
658 width: 50%;
659 }
660
661 .mailchimp-sf-form-wrapper .form-row {
662 display: flex;
663 column-gap: 16px;
664 }
665
666 .mailchimp-sf-form-wrapper .form-row:not(:last-child) {
667 margin-bottom: 16px;
668 }
669
670 .mailchimp-sf-form-wrapper .form-row .box {
671 width: 100%;
672 }
673
674 .mailchimp-sf-form-wrapper .form-row .box-half {
675 width: calc(50% - 8px);
676 }
677
678 .mailchimp-sf-form-wrapper fieldset input[type="text"],
679 .mailchimp-sf-form-wrapper fieldset input[type="password"],
680 .mailchimp-sf-form-wrapper fieldset input[type="email"],
681 .mailchimp-sf-form-wrapper fieldset textarea {
682 box-sizing: border-box;
683 height: 44px;
684 border: 1px solid rgba(36, 28, 21, 0.65);
685 border-radius: 4px;
686 padding: 10px 16px;
687 width: 100%;
688 font-family: 'Graphik Mailchimp Web', ui-sans-serif, system-ui, sans-serif;
689 font-size: 16px;
690 color: #000;
691 line-height: 1.5em;
692 font-weight: 400;
693 }
694
695 .mailchimp-sf-form-wrapper fieldset input[type="text"]:focus,
696 .mailchimp-sf-form-wrapper fieldset input[type="password"]:focus,
697 .mailchimp-sf-form-wrapper fieldset input[type="email"]:focus,
698 .mailchimp-sf-form-wrapper fieldset textarea:focus {
699 border-color: var(--mailchimp-color-link);
700 box-shadow: inset 0 0 0 1px var(--mailchimp-color-link);
701 }
702
703 .mailchimp-sf-form-wrapper .mailchimp-select-wrapper select {
704 font-size: 16px;
705 line-height: 1.5em;
706 font-family: 'Graphik Mailchimp Web', ui-sans-serif, system-ui, sans-serif;
707 font-weight: 400;
708 -webkit-appearance: none;
709 box-shadow: none;
710 outline: none;
711 width: 100% !important;
712 max-width: 100%;
713 border: 1px solid rgba(36, 28, 21, 0.65);
714 color: #000;
715 padding: 10px 14px;
716 -webkit-border-radius: 4px;
717 -moz-border-radius: 4px;
718 border-radius: 4px;
719 background-color: white;
720 height: 44px;
721 background-size: auto;
722 }
723
724 .mailchimp-sf-form-wrapper .mailchimp-select-wrapper select option{
725 outline: none;
726 }
727
728 .mailchimp-sf-form-wrapper fieldset select:focus {
729 outline: none;
730 }
731
732
733 .mailchimp-sf-form-wrapper .box.form-error label,
734 .mailchimp-sf-form-wrapper .box.form-error {
735 color: #a73205;
736 }
737 .mailchimp-sf-form-wrapper .box.form-error p.error-field {
738 margin-bottom: 0px;
739 font-size: 14px;
740 font-weight: 500;
741 }
742
743 .mailchimp-sf-form-wrapper .box.form-error input,
744 .mailchimp-sf-form-wrapper .box.form-error select {
745 border-color: #a73205;
746 box-shadow: inset 0 0 0 1px #a73205;
747 }
748
749 .mailchimp-sf-form-wrapper .error-field:empty, #mailchimp-sf-settings-page p.error-message:empty {
750 display: none !important;
751 }
752
753 .mailchimp-sf-confirm-email .email-opener-wrapper {
754 margin-bottom: 120px;
755 }
756
757 .mailchimp-sf-confirm-email .mailchimp-sf-confirm-email-footer p{
758 font-size: 16px;
759 font-weight: 500;
760 line-height: 24px;
761 color: var(--mailchimp-color-text);
762 }
763
764 #mailchimp-sf-popup-blocked-modal {
765 padding: 10px 28px;
766 }
767
768 #mailchimp-sf-popup-blocked-modal p {
769 font-size: 16px;
770 font-weight: 400;
771 line-height: 24px;
772 color: var(--mailchimp-color-text);
773 font-family: 'Graphik Mailchimp Web', ui-sans-serif, system-ui, sans-serif;
774 }
775
776 .mailchimp-sf-ui-dialog {
777 border-radius: 12px;
778 border: 1px solid rgba(36, 28, 21, 0.15);
779 }
780
781 .mailchimp-sf-ui-dialog-titlebar {
782 font-family: "Means Web", serif;
783 font-weight: 500;
784 padding: 10px 28px;
785 font-size: 24px;
786 height: auto;
787 }
788
789 @media screen and (max-width: 782px) {
790 .mailchimp-sf-header,
791 .mailchimp-sf-settings-page-hero-wrapper {
792 margin-left: -10px;
793 }
794 }
795
796 @media screen and (max-width: 480px) {
797 .mailchimp-sf-form-wrapper .form-row {
798 flex-flow: column;
799 row-gap: 16px;
800 }
801
802 .mailchimp-sf-form-wrapper .form-row .box.box-half {
803 width: 100%;
804 }
805
806 .mailchimp-sf-header {
807 column-gap: 16px;
808 }
809 }
810
811 .mailchimp-sf-user-sync-page {
812 max-width: 900px;
813 }
814
815 .mailchimp-sf-user-sync-page .subscribe_status_label {
816 font-weight: 500;
817 }
818
819 .mailchimp-sf-user-sync-page p.description_small {
820 font-size: 0.9em;
821 margin-bottom: 10px;
822 }
823
824 .mailchimp-sf-user-sync-status {
825 margin: 15px 0;
826 padding: 10px;
827 background: #fff;
828 border: 1px solid #ccd0d4;
829 border-radius: 4px;
830 }
831 .mailchimp-sf-user-sync-status .mailchimp-sf-sync-progress {
832 display: flex;
833 align-items: center;
834 flex-direction: row;
835 }
836 .mailchimp-sf-user-sync-status .sync-status-text {
837 font-size: 14px;
838 line-height: 1.4;
839 }
840
841 a.mailchimp-sf-button.mailchimp-cancel-user-sync-button {
842 margin-left: auto;
843 color: var(--mailchimp-color-text);
844 }
845
846 a.mailchimp-sf-button.mailchimp-cancel-user-sync-button:hover {
847 color: var(--mailchimp-color-text);
848 }
849
850 @media screen and (max-width: 480px) {
851 .mailchimp-sf-user-sync-status .mailchimp-sf-sync-progress {
852 flex-direction: column;
853 align-items: flex-start;
854 }
855
856 .mailchimp-cancel-user-sync-button {
857 margin-left: 0px;
858 margin-top: 10px;
859 }
860 }
861
862 .mailchimp-sf-user-sync-errors {
863 margin-top: 2rem;
864 }
865
866 .mailchimp-sf-user-sync-errors-footer {
867 display: block;
868 margin: 1em 0;
869 text-align: right;
870 }
871
872 .mailchimp-sf-user-sync-error-action {
873 min-width: 120px;
874 text-align: right;
875 display: flex;
876 align-items: center;
877 }
878
879 .mailchimp-sf-start-user-sync-wrapper {
880 width: 100%;
881 margin-top: 2em;
882 background-color: #ffffff;
883 border: 1px solid #ccd0d4;
884 border-radius: 6px;
885 }
886
887 .mailchimp-sf-start-user-sync-box {
888 display: flex;
889 justify-content: space-between;
890 align-items: center;
891 padding: 1rem;
892 }
893
894 .mailchimp-sf-start-user-sync-box h2 {
895 margin: 0;
896 }
897
898 .mailchimp-sf-start-user-sync-box p {
899 margin-top: 0.5rem;
900 }
901
902 .mailchimp-sf-start-user-sync-box .mailchimp-sf-button {
903 float: none;
904 margin-right: 8px;
905 }
906
907 .mailchimp-sf-start-user-sync-box a {
908 text-decoration: none;
909 }
910
911 #mailchimp-sf-settings-page .user-profile-wrapper {
912 display: flex;
913 flex-direction: row;
914 justify-content: flex-end;
915 align-items: center;
916 padding: 0px;
917 gap: 24px;
918 margin-left: auto;
919 }
920
921 #mailchimp-sf-settings-page .user-profile-wrapper form {
922 margin: 0px;
923 }
924
925 #mailchimp-sf-settings-page .user-profile {
926 display: flex;
927 flex-direction: row;
928 align-items: center;
929 padding: 0px;
930 gap: 8px;
931 }
932
933 #mailchimp-sf-settings-page .user-profile-avatar {
934 height: 40px;
935 line-height: 1;
936 }
937
938 #mailchimp-sf-settings-page .user-profile-avatar img {
939 width: 40px;
940 height: 40px;
941 border-radius: 50%;
942 border: 1px solid var(--mailchimp-border-color);
943 box-sizing: border-box;
944 }
945
946 #mailchimp-sf-settings-page .user-profile-details {
947 display: flex;
948 flex-direction: column;
949 justify-content: center;
950 align-items: flex-start;
951 padding: 0px;
952 gap: 2px;
953 }
954
955 #mailchimp-sf-settings-page .user-profile-details .user-profile-name {
956 font-size: 16px;
957 font-weight: 500;
958 line-height: 18px;
959 color: var(--mailchimp-color-text);
960 }
961
962 #mailchimp-sf-settings-page .user-profile-details .user-profile-email {
963 font-size: 14px;
964 font-weight: 400;
965 line-height: 16px;
966 color: var(--mailchimp-color-text);
967 }
968
969 /* Settings Page Hero */
970 .mailchimp-sf-settings-page-hero-wrapper {
971 margin-left: -20px;
972 background-color: #fff;
973 border-bottom: 1px solid rgba(36, 28, 21, 0.15);
974 }
975
976 #mailchimp-sf-settings-page .mailchimp-sf-settings-page-hero {
977 display: flex;
978 flex-direction: row;
979 align-items: center;
980 justify-content: space-between;
981 max-width: 1200px;
982 margin: 0 auto;
983 padding: 32px 40px;
984 gap: 32px;
985 }
986
987 .mailchimp-sf-settings-page-hero-title-wrapper,
988 .mailchimp-sf-settings-page-hero-content-wrapper {
989 flex: 1;
990 }
991
992 .mailchimp-sf-settings-page-hero-title {
993 font-family: "Means Web", serif;
994 font-size: 36px;
995 line-height: 1.1em;
996 margin-bottom: 24px;
997 margin-top: 0px;
998 font-weight: 300;
999 letter-spacing: -0.72px;
1000 }
1001
1002 .mailchimp-sf-settings-page-hero-description,
1003 .mailchimp-sf-settings-list-note {
1004 font-size: 16px;
1005 font-weight: 500;
1006 line-height: 18px;
1007 color: var(--mailchimp-color-text);
1008 }
1009
1010 .mailchimp-sf-settings-list-note {
1011 margin-top: 0px;
1012 margin-bottom: 8px;
1013 }
1014
1015 .mailchimp-sf-settings-page-hero-content h3 {
1016 font-family: "Means Web", serif;
1017 font-size: 20px;
1018 line-height: 1.25em;
1019 font-weight: 300;
1020 letter-spacing: -0.72px;
1021 }
1022
1023 .mailchimp-sf-settings-page-hero-content p,
1024 .mailchimp-sf-settings-list-description {
1025 font-weight: 400;
1026 line-height: 1.35em;
1027 color: var(--mailchimp-color-text);
1028 }
1029
1030 .mailchimp-sf-settings-list-description {
1031 font-size: 14px;
1032 margin-top: 0px;
1033 color: var(--mailchimp-color-text-gray);
1034 }
1035
1036 .mailchimp-sf-settings-page-hero-content-wrapper {
1037 display: flex;
1038 flex-direction: row;
1039 justify-content: center;
1040 align-items: center;
1041 padding: 0px 24px;
1042 gap: 24px;
1043 background: #EEEEEA;
1044 border-radius: 8px;
1045 box-sizing: border-box;
1046 }
1047
1048 .mailchimp-sf-settings-page-hero-content,
1049 .mailchimp-sf-settings-page-hero-content-image {
1050 flex: 1;
1051 }
1052
1053 .mailchimp-sf-settings-page-hero-content-image {
1054 line-height: 0;
1055 margin-top: 24px;
1056 align-self: end;
1057 }
1058
1059 .mailchimp-sf-settings-page-hero-content-image img {
1060 width: 100%;
1061 height: auto;
1062 }
1063
1064 /* Settings List Select */
1065 .mailchimp-sf-settings-list-select-wrapper {
1066 display: flex;
1067 flex-direction: row;
1068 align-items: center;
1069 gap: 8px;
1070 margin-bottom: 16px;
1071 }
1072
1073 /* Buttons */
1074 .mailchimp-sf-button,
1075 .button.mailchimp-sf-button {
1076 all: unset;
1077 box-sizing: border-box;
1078 display: inline-flex;
1079 align-items: center;
1080 gap: 10px;
1081 padding: 0 18px;
1082 position: relative;
1083 background-color: #f0f4f6;
1084 border-radius: 6px;
1085 font-weight: 400;
1086 color: var(--mailchimp-color-text);
1087 font-size: 16px;
1088 line-height: 16px;
1089 text-align: center;
1090 letter-spacing: 0;
1091 white-space: nowrap;
1092 cursor: pointer;
1093 text-align: center;
1094 vertical-align: middle;
1095 -ms-transition: all 0.2s;
1096 transition: all 0.2s;
1097 height: 40px;
1098 border: 1px solid transparent;
1099 white-space: nowrap;
1100 justify-content: center;
1101 }
1102
1103 .mailchimp-sf-button:hover, .mailchimp-sf-button:active {
1104 background-color: #d5dee3
1105 }
1106
1107 .mailchimp-sf-button:focus {
1108 background-color: #d5dee3;
1109 outline: 2px solid var(--mailchimp-color-link);
1110 }
1111
1112 .mailchimp-sf-button[disabled] {
1113 pointer-events: none;
1114 opacity: .4;
1115 }
1116
1117 .mailchimp-sf-button.button-primary,
1118 .mailchimp-sf-button.btn-primary {
1119 background-color: var(--mailchimp-color-link);
1120 border-color: var(--mailchimp-color-link);
1121 color: #fff;
1122 }
1123
1124 body.toplevel_page_mailchimp_sf_options a.mailchimp-sf-button.button-primary:hover,
1125 body.toplevel_page_mailchimp_sf_options a.mailchimp-sf-button.btn-primary:hover {
1126 color: #fff;
1127 }
1128
1129 .mailchimp-sf-button.button-primary:hover,
1130 .mailchimp-sf-button.button-primary:active,
1131 .mailchimp-sf-button.btn-primary:hover,
1132 .mailchimp-sf-button.btn-primary:active {
1133 background-color: var(--mailchimp-color-link-hover);
1134 }
1135
1136 .mailchimp-sf-button.button-primary:focus,
1137 .mailchimp-sf-button.btn-primary:focus {
1138 background-color: var(--mailchimp-color-link-hover);
1139 border-color: var(--mailchimp-color-link-hover);
1140 outline: 2px solid var(--mailchimp-color-link-hover);
1141 box-shadow: none;
1142 }
1143
1144 .mailchimp-sf-button.btn-small {
1145 font-size: 14px;
1146 height: 36px;
1147 }
1148
1149 .mailchimp-sf-section-footer {
1150 text-align: right;
1151 }
1152
1153 .mailchimp-sf-section-footer p.submit {
1154 margin: 0px;
1155 padding: 0px;
1156 text-align: right;
1157 }
1158
1159 .mailchimp-sf-section-footer .mailchimp-sf-button {
1160 margin: 16px 0px;
1161 }
1162
1163 /* Settings Page */
1164 .mailchimp-sf-settings-page {
1165 max-width: 1200px;
1166 margin: 0 auto;
1167 padding: 32px 20px;
1168 }
1169
1170 .mailchimp-sf-settings-list-wrapper {
1171 margin-bottom: 20px;
1172 }
1173
1174 /* Main Settings */
1175 .mailchimp-sf-main-settings-wrapper {
1176 display: flex;
1177 flex-direction: row;
1178 align-items: center;
1179 justify-content: space-between;
1180 }
1181
1182 .mailchimp-sf-main-setings-wrapper,
1183 .mailchimp-sf-user-sync-page-wrapper {
1184 display: flex;
1185 flex-direction: row;
1186 align-items: flex-start;
1187 justify-content: space-between;
1188 gap: 16px;
1189 }
1190
1191 .mailchimp-sf-main-setings-wrapper .mailchimp-sf-main-settings,
1192 .mailchimp-sf-user-sync-page-wrapper .mailchimp-sf-user-sync-page {
1193 flex: 3;
1194 }
1195
1196 .mailchimp-sf-main-setings-wrapper .mailchimp-sf-settings-form-previewer,
1197 .mailchimp-sf-user-sync-page-wrapper .mailchimp-sf-user-sync-settings-column {
1198 flex: 1;
1199 width: 100%;
1200 }
1201
1202 .mailchimp-sf-user-sync-page-wrapper .mailchimp-sf-user-sync-settings-column {
1203 min-width: 250px;
1204 }
1205
1206 .mailchimp-sf-main-settings,
1207 .mailchimp-sf-user-sync-page {
1208 max-width: 800px;
1209 }
1210
1211 table.widefat.mailchimp-sf-settings-table {
1212 margin-top: 16px;
1213 width: 100%;
1214 border-radius: 8px;
1215 border: 1px solid var(--mailchimp-border-color);
1216 }
1217
1218 .mailchimp-sf-settings-table thead tr th {
1219 background-color: var(--mailchimp-color-header-bg);
1220 padding: 24px;
1221 border-top-left-radius: 8px;
1222 border-top-right-radius: 8px;
1223 }
1224
1225 .mailchimp-sf-settings-form-previewer .mailchimp-sf-settings-table thead tr th {
1226 background-color: #EEEEEA;
1227 }
1228
1229 .mailchimp-sf-settings-table thead tr th h2 {
1230 color: var(--mailchimp-color-text);
1231 font-family: "Means Web", serif;
1232 font-weight: 300;
1233 letter-spacing: -0.72px;
1234 font-size: 24px;
1235 line-height: 1.25em;
1236 margin: 0;
1237 }
1238
1239 .mailchimp-sf-settings-table tbody tr th {
1240 padding: 24px 0px 0px 24px;
1241 }
1242
1243 .mailchimp-sf-settings-table tr th.mailchimp-sf-option-header {
1244 width: 145px;
1245 }
1246
1247 .mailchimp-sf-settings-table tbody tr:last-child th {
1248 padding-bottom: 24px;
1249 }
1250
1251 .mailchimp-sf-settings-table tbody tr td {
1252 padding: 24px 24px 0px 24px;
1253 }
1254
1255 .mailchimp-sf-settings-table tbody tr:last-child td {
1256 padding-bottom: 24px;
1257 }
1258
1259 .mailchimp-sf-settings-table tbody tr th,
1260 .mailchimp-sf-settings-table tbody tr th label {
1261 font-weight: 500;
1262 font-size: 16px;
1263 line-height: 18px;
1264 color: var(--mailchimp-color-text);
1265 word-wrap: normal;
1266 }
1267
1268 .mailchimp-sf-settings-table tbody tr td p.description {
1269 font-size: 12px;
1270 font-weight: 400;
1271 line-height: 1.35em;
1272 color: var(--mailchimp-color-text-gray);
1273 margin: 0px;
1274 }
1275
1276 .mailchimp-sf-settings-table tbody tr td,
1277 p.mailchimp-sf-settings-table-description {
1278 font-size: 16px;
1279 font-weight: 400;
1280 line-height: 1.35em;
1281 color: var(--mailchimp-color-text);
1282 word-wrap: normal;
1283 }
1284
1285 .mailchimp-sf-settings-table tbody tr td strong {
1286 word-wrap: normal;
1287 }
1288
1289 p.mailchimp-sf-settings-table-description {
1290 padding: 0px;
1291 margin: 0px;
1292 margin-top: 12px;
1293 }
1294
1295 table.widefat.mailchimp-sf-settings-table ul {
1296 margin: 0px;
1297 padding: 0px;
1298 }
1299
1300 .mailchimp-sf-user-sync-settings-fields {
1301 display: flex;
1302 flex-direction: column;
1303 gap: 24px;
1304 }
1305
1306 /* Input fields */
1307 #mailchimp-sf-settings-page select {
1308 font-size: 14px;
1309 padding: 10px 32px 10px 10px;
1310 height: 40px;
1311 background-color: #fff;
1312 border-radius: 6px;
1313 border: 1px solid #c3ced5;
1314 color: var(--mailchimp-color-text);
1315 line-height: 1.2em;
1316 font-family: 'Graphik Mailchimp Web', ui-sans-serif, system-ui, sans-serif;
1317 font-weight: 400;
1318 transition: all 0.2s;
1319 min-width: 200px;
1320 }
1321
1322 #mailchimp-sf-settings-page select:hover {
1323 background-color: #f8fafb;
1324 border-color: #3c4348;
1325 }
1326
1327 #mailchimp-sf-settings-page select:focus {
1328 background-color: #fff;
1329 border-color: var(--mailchimp-color-link);
1330 -webkit-box-shadow: none;
1331 box-shadow: none;
1332 outline-offset: -2px;
1333 outline: 2px solid var(--mailchimp-color-link);
1334 }
1335
1336 #mailchimp-sf-settings-page input[type="text"],
1337 #mailchimp-sf-settings-page input[type="tel"] {
1338 font-size: 16px;
1339 padding: 10px 12px;
1340 height: 40px;
1341 background-color: #fff;
1342 border-radius: 4px;
1343 border: 1px solid var(--mailchimp-border-color);
1344 color: var(--mailchimp-color-text);
1345 line-height: 1.35em;
1346 font-family: 'Graphik Mailchimp Web', ui-sans-serif, system-ui, sans-serif;
1347 font-weight: 400;
1348 transition: all 0.2s;
1349 }
1350
1351 #mailchimp-sf-settings-page input[type="text"]:hover,
1352 #mailchimp-sf-settings-page input[type="tel"]:hover {
1353 background-color: #f8fafb;
1354 border-color: #3c4348;
1355 outline: none;
1356 }
1357
1358 #mailchimp-sf-settings-page input[type="text"]:focus,
1359 #mailchimp-sf-settings-page input[type="tel"]:focus {
1360 outline-offset: -2px;
1361 outline: 2px solid var(--mailchimp-color-link);
1362 }
1363
1364 #mailchimp-sf-settings-page textarea {
1365 font-size: 16px;
1366 padding: 10px 12px;
1367 background-color: #fff;
1368 border-radius: 4px;
1369 border: 1px solid var(--mailchimp-border-color);
1370 color: var(--mailchimp-color-text);
1371 line-height: 1.35em;
1372 font-family: 'Graphik Mailchimp Web', ui-sans-serif, system-ui, sans-serif;
1373 font-weight: 400;
1374 transition: all 0.2s;
1375 min-width: 200px;
1376 }
1377
1378 #mailchimp-sf-settings-page textarea:hover {
1379 background-color: #f8fafb;
1380 border-color: #3c4348;
1381 outline: none;
1382 }
1383
1384 #mailchimp-sf-settings-page textarea:focus {
1385 outline-offset: -2px;
1386 outline: 2px solid var(--mailchimp-color-link);
1387 }
1388
1389 .mailchimp-sf-ch-wrapper {
1390 display: inline-block;
1391 margin: 0.5rem;
1392 }
1393
1394 input[type=checkbox].mailchimp-sf-checkbox {
1395 appearance: none;
1396 width: 24px;
1397 height: 24px;
1398 border: 1px solid var(--mailchimp-border-color);
1399 border-radius: 6px;
1400 cursor: pointer;
1401 position: relative;
1402 transition: all 0.2s;
1403 box-shadow: none;
1404 margin: 0px;
1405 }
1406
1407 input[type=checkbox].mailchimp-sf-checkbox:focus {
1408 outline: 2px solid var(--mailchimp-color-link);
1409 }
1410
1411 input[type=checkbox].mailchimp-sf-checkbox:checked {
1412 background-color: var(--mailchimp-color-link);
1413 border-color: var(--mailchimp-color-link);
1414 }
1415
1416 input[type=checkbox].mailchimp-sf-checkbox:checked::before {
1417 content: "";
1418 width: auto;
1419 height: auto;
1420 }
1421
1422 input[type=checkbox].mailchimp-sf-checkbox:checked:after {
1423 content: "";
1424 width: 12px;
1425 height: 5px;
1426 border-radius: 0.5px;
1427 transform: rotate(-45deg);
1428 border-left: 2px solid #fff;
1429 border-bottom: 2px solid #fff;
1430 margin: 6px 4px;
1431 display: block;
1432 }
1433
1434 input[type=checkbox].mailchimp-sf-checkbox[disabled] {
1435 opacity: 0.3;
1436 cursor: not-allowed;
1437 }
1438
1439 input[type=radio].mailchimp-sf-radio {
1440 appearance: none;
1441 width: 28px;
1442 height: 28px;
1443 border: 1px solid var(--mailchimp-border-color);
1444 border-radius: 50%;
1445 cursor: pointer;
1446 position: relative;
1447 box-shadow: none;
1448 }
1449
1450 input[type=radio].mailchimp-sf-radio:checked {
1451 border: 2px solid var(--mailchimp-color-link);
1452 }
1453
1454 input[type=radio].mailchimp-sf-radio:checked:before {
1455 display: none;
1456 }
1457
1458 input[type=radio].mailchimp-sf-radio:checked:after {
1459 content: "";
1460 display: block;
1461 width: 16px;
1462 height: 16px;
1463 background-color: var(--mailchimp-color-link);
1464 border-radius: 50%;
1465 margin: 4px;
1466 }
1467
1468 .widefat td p.radio-description {
1469 font-size: 16px;
1470 font-weight: 400;
1471 line-height: 1.35em;
1472 color: var(--mailchimp-color-text-gray);
1473 margin-top: 8px;
1474 margin-left: 36px;
1475 margin-bottom: 24px;
1476 }
1477
1478 .mailchimp-sf-user-sync-user-roles {
1479 display: flex;
1480 flex-wrap: wrap;
1481 gap: 24px;
1482 }
1483
1484 .mailchimp-sf-user-sync-user-roles .input-checkbox-wrapper{
1485 flex: 1 1 45%;
1486 }
1487
1488 span.mailchimp-sf-last-sync-time {
1489 vertical-align: middle;
1490 margin-left: 12px;
1491 color: var(--mailchimp-color-text-gray);
1492 }
1493
1494 .mailchimp-sf-toggle-switch {
1495 position: relative;
1496 display: inline-block;
1497 width: 40px;
1498 height: 24px;
1499 min-width: 40px;
1500 }
1501
1502 .mailchimp-sf-toggle-switch input[type="checkbox"] {
1503 opacity: 0;
1504 width: 0;
1505 height: 0;
1506 }
1507
1508 .mailchimp-sf-toggle-slider {
1509 position: absolute;
1510 cursor: pointer;
1511 top: 0;
1512 left: 0;
1513 right: 0;
1514 bottom: 0;
1515 background-color: var(--mailchimp-border-color);
1516 transition: .4s;
1517 border-radius: 24px;
1518 }
1519
1520 .mailchimp-sf-toggle-slider:before {
1521 position: absolute;
1522 content: "";
1523 height: 20px;
1524 width: 20px;
1525 left: 2px;
1526 bottom: 2px;
1527 background-color: white;
1528 transition: .4s;
1529 border-radius: 50%;
1530 }
1531
1532 input:checked + .mailchimp-sf-toggle-slider {
1533 background-color: var(--mailchimp-color-link);
1534 }
1535
1536 input:checked + .mailchimp-sf-toggle-slider:before {
1537 transform: translateX(16px);
1538 }
1539
1540 #mailchimp-sf-settings-page .input-checkbox-wrapper {
1541 display: flex;
1542 flex-direction: row;
1543 align-items: center;
1544 gap: 8px;
1545 }
1546
1547 #mailchimp-sf-settings-page .input-checkbox-wrapper label {
1548 font-size: 14px;
1549 font-weight: 400;
1550 line-height: 1.35em;
1551 color: var(--mailchimp-color-text-gray);
1552 margin: 0px;
1553 }
1554
1555 #mailchimp-sf-settings-page .mailchimp-sf-user-sync-settings-fields .input-checkbox-wrapper label {
1556 font-size: 16px;
1557 }
1558
1559 .mailchimp-sf-settings-table tbody tr td.mailchimp-sf-note {
1560 font-size: 12px;
1561 font-weight: 400;
1562 line-height: 1.35em;
1563 color: var(--mailchimp-color-text-gray);
1564 margin: 0px;
1565 }
1566
1567 .mailchimp-sf-form-preview-content {
1568 position: relative;
1569 }
1570
1571 .toplevel_page_mailchimp_sf_options .notice {
1572 display: none;
1573 }
1574
1575 .toplevel_page_mailchimp_sf_options .mailchimp-sf-settings-page .notice {
1576 display: block;
1577 }
1578
1579 @media screen and (max-width: 992px) {
1580 .mailchimp-sf-main-setings-wrapper,
1581 .mailchimp-sf-user-sync-page-wrapper {
1582 flex-direction: column;
1583 }
1584
1585 .mailchimp-sf-main-setings-wrapper .mailchimp-sf-main-settings,
1586 .mailchimp-sf-user-sync-page-wrapper .mailchimp-sf-user-sync-page {
1587 flex: 1;
1588 }
1589 }
1590
1591 @media screen and (max-width: 782px) {
1592 #mailchimp-sf-settings-page .mailchimp-sf-settings-page-hero {
1593 flex-direction: column;
1594 padding: 32px 20px 32px 30px;
1595 }
1596
1597 .mailchimp-sf-settings-page {
1598 padding: 32px 10px;
1599 }
1600
1601 .mailchimp-sf-header {
1602 padding: 14px 20px;
1603 }
1604 }
1605
1606 @media screen and (max-width: 480px) {
1607 .mailchimp-sf-header {
1608 flex-direction: column;
1609 gap: 8px;
1610 }
1611
1612 .mailchimp-sf-settings-list-select-wrapper {
1613 flex-direction: column;
1614 align-items: flex-start;
1615 }
1616
1617 .mailchimp-sf-settings-list-select-wrapper .mailchimp-sf-settings-list-select,
1618 .mailchimp-sf-settings-list-select-wrapper .mailchimp-sf-settings-list-select select,
1619 .mailchimp-sf-settings-list-select-wrapper .mailchimp-sf-settings-list-select-button,
1620 .mailchimp-sf-settings-list-select-wrapper .mailchimp-sf-settings-list-select-button input {
1621 width: 100%;
1622 }
1623
1624 .mailchimp-sf-settings-list-select-wrapper .mailchimp-sf-settings-list-select select {
1625 max-width: 100%;
1626 }
1627
1628 #mailchimp-sf-settings-page .user-profile-wrapper {
1629 margin: 0 auto;
1630 gap: 12px;
1631 }
1632
1633 .mailchimp-sf-user-sync-user-roles .input-checkbox-wrapper{
1634 flex: 1 1 100%;
1635 }
1636
1637 .mailchimp-sf-user-sync-error-action {
1638 flex-direction: column;
1639 min-width: 0;
1640 }
1641
1642 #mailchimp-sf-settings-page .mailchimp-sf-list-settings .input-checkbox-wrapper {
1643 flex-direction: column;
1644 align-items: flex-start;
1645 }
1646
1647 .mailchimp-sf-settings-table tbody tr th {
1648 padding-left: 16px;
1649 }
1650
1651 .mailchimp-sf-settings-table tbody tr td {
1652 padding: 24px 16px 0px 16px;
1653 }
1654
1655 .mailchimp-sf-settings-table tr th.mailchimp-sf-option-header {
1656 width: auto;
1657 }
1658
1659 span.mailchimp-sf-last-sync-time {
1660 display: block;
1661 margin-left: 0px;
1662 margin-top: 12px;
1663 }
1664
1665 .mailchimp-sf-user-sync-page table.widefat.mailchimp-sf-settings-table {
1666 table-layout: fixed;
1667 }
1668
1669 .mailchimp-sf-settings-table table.widefat.mailchimp-sf-user-sync-errors-table {
1670 table-layout: auto;
1671 }
1672
1673 .mailchimp-sf-user-sync-errors {
1674 width: 100%;
1675 overflow-x: scroll;
1676 }
1677 }
1678