PluginProbe
Mailchimp List Subscribe Form / trunk
Mailchimp List Subscribe Form vtrunk
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 trunk, at assets/css/admin.css

1,695 lines 34.9 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 .mailchimp-sf-settings-page-header-wrapper {
793 margin-left: -10px;
794 }
795 }
796
797 @media screen and (max-width: 480px) {
798 .mailchimp-sf-form-wrapper .form-row {
799 flex-flow: column;
800 row-gap: 16px;
801 }
802
803 .mailchimp-sf-form-wrapper .form-row .box.box-half {
804 width: 100%;
805 }
806
807 .mailchimp-sf-header {
808 column-gap: 16px;
809 }
810 }
811
812 .mailchimp-sf-user-sync-page {
813 max-width: 900px;
814 }
815
816 .mailchimp-sf-user-sync-page .subscribe_status_label {
817 font-weight: 500;
818 }
819
820 .mailchimp-sf-user-sync-page p.description_small {
821 font-size: 0.9em;
822 margin-bottom: 10px;
823 }
824
825 .mailchimp-sf-user-sync-status {
826 margin: 15px 0;
827 padding: 10px;
828 background: #fff;
829 border: 1px solid #ccd0d4;
830 border-radius: 4px;
831 }
832 .mailchimp-sf-user-sync-status .mailchimp-sf-sync-progress {
833 display: flex;
834 align-items: center;
835 flex-direction: row;
836 }
837 .mailchimp-sf-user-sync-status .sync-status-text {
838 font-size: 14px;
839 line-height: 1.4;
840 }
841
842 a.mailchimp-sf-button.mailchimp-cancel-user-sync-button {
843 margin-left: auto;
844 color: var(--mailchimp-color-text);
845 }
846
847 a.mailchimp-sf-button.mailchimp-cancel-user-sync-button:hover {
848 color: var(--mailchimp-color-text);
849 }
850
851 @media screen and (max-width: 480px) {
852 .mailchimp-sf-user-sync-status .mailchimp-sf-sync-progress {
853 flex-direction: column;
854 align-items: flex-start;
855 }
856
857 .mailchimp-cancel-user-sync-button {
858 margin-left: 0px;
859 margin-top: 10px;
860 }
861 }
862
863 .mailchimp-sf-user-sync-errors {
864 margin-top: 2rem;
865 }
866
867 .mailchimp-sf-user-sync-errors-footer {
868 display: block;
869 margin: 1em 0;
870 text-align: right;
871 }
872
873 .mailchimp-sf-user-sync-error-action {
874 min-width: 120px;
875 text-align: right;
876 display: flex;
877 align-items: center;
878 }
879
880 .mailchimp-sf-start-user-sync-wrapper {
881 width: 100%;
882 margin-top: 2em;
883 background-color: #ffffff;
884 border: 1px solid #ccd0d4;
885 border-radius: 6px;
886 }
887
888 .mailchimp-sf-start-user-sync-box {
889 display: flex;
890 justify-content: space-between;
891 align-items: center;
892 padding: 1rem;
893 }
894
895 .mailchimp-sf-start-user-sync-box h2 {
896 margin: 0;
897 }
898
899 .mailchimp-sf-start-user-sync-box p {
900 margin-top: 0.5rem;
901 }
902
903 .mailchimp-sf-start-user-sync-box .mailchimp-sf-button {
904 float: none;
905 margin-right: 8px;
906 }
907
908 .mailchimp-sf-start-user-sync-box a {
909 text-decoration: none;
910 }
911
912 #mailchimp-sf-settings-page .user-profile-wrapper {
913 display: flex;
914 flex-direction: row;
915 justify-content: flex-end;
916 align-items: center;
917 padding: 0px;
918 gap: 24px;
919 margin-left: auto;
920 }
921
922 #mailchimp-sf-settings-page .user-profile-wrapper form {
923 margin: 0px;
924 }
925
926 #mailchimp-sf-settings-page .user-profile {
927 display: flex;
928 flex-direction: row;
929 align-items: center;
930 padding: 0px;
931 gap: 8px;
932 }
933
934 #mailchimp-sf-settings-page .user-profile-avatar {
935 height: 40px;
936 line-height: 1;
937 }
938
939 #mailchimp-sf-settings-page .user-profile-avatar img {
940 width: 40px;
941 height: 40px;
942 border-radius: 50%;
943 border: 1px solid var(--mailchimp-border-color);
944 box-sizing: border-box;
945 }
946
947 #mailchimp-sf-settings-page .user-profile-details {
948 display: flex;
949 flex-direction: column;
950 justify-content: center;
951 align-items: flex-start;
952 padding: 0px;
953 gap: 2px;
954 }
955
956 #mailchimp-sf-settings-page .user-profile-details .user-profile-name {
957 font-size: 16px;
958 font-weight: 500;
959 line-height: 18px;
960 color: var(--mailchimp-color-text);
961 }
962
963 #mailchimp-sf-settings-page .user-profile-details .user-profile-email {
964 font-size: 14px;
965 font-weight: 400;
966 line-height: 16px;
967 color: var(--mailchimp-color-text);
968 }
969
970 /* Settings Page Hero */
971 .mailchimp-sf-settings-page-hero-wrapper,
972 .mailchimp-sf-settings-page-header-wrapper {
973 margin-left: -20px;
974 background-color: #fff;
975 border-bottom: 1px solid rgba(36, 28, 21, 0.15);
976 }
977
978 #mailchimp-sf-settings-page .mailchimp-sf-settings-page-hero,
979 #mailchimp-sf-settings-page .mailchimp-sf-settings-page-header {
980 display: flex;
981 flex-direction: row;
982 align-items: center;
983 justify-content: space-between;
984 max-width: 1200px;
985 margin: 0 auto;
986 padding: 32px 40px;
987 gap: 32px;
988 }
989
990 .mailchimp-sf-settings-page-hero-title-wrapper,
991 .mailchimp-sf-settings-page-header-title-wrapper,
992 .mailchimp-sf-settings-page-hero-content-wrapper {
993 flex: 1;
994 }
995
996 .mailchimp-sf-settings-page-hero-title,
997 .mailchimp-sf-settings-page-header-title {
998 font-family: "Means Web", serif;
999 font-size: 36px;
1000 line-height: 1.1em;
1001 margin-bottom: 24px;
1002 margin-top: 0px;
1003 font-weight: 300;
1004 letter-spacing: -0.72px;
1005 }
1006
1007 .mailchimp-sf-settings-page-header-title {
1008 margin-bottom: 0px;
1009 }
1010
1011 .mailchimp-sf-settings-page-hero-description,
1012 .mailchimp-sf-settings-list-note {
1013 font-size: 16px;
1014 font-weight: 500;
1015 line-height: 18px;
1016 color: var(--mailchimp-color-text);
1017 }
1018
1019 .mailchimp-sf-settings-list-note {
1020 margin-top: 0px;
1021 margin-bottom: 8px;
1022 }
1023
1024 .mailchimp-sf-settings-page-hero-content h3 {
1025 font-family: "Means Web", serif;
1026 font-size: 20px;
1027 line-height: 1.25em;
1028 font-weight: 300;
1029 letter-spacing: -0.72px;
1030 }
1031
1032 .mailchimp-sf-settings-page-hero-content p,
1033 .mailchimp-sf-settings-list-description {
1034 font-weight: 400;
1035 line-height: 1.35em;
1036 color: var(--mailchimp-color-text);
1037 }
1038
1039 .mailchimp-sf-settings-list-description {
1040 font-size: 14px;
1041 margin-top: 0px;
1042 color: var(--mailchimp-color-text-gray);
1043 }
1044
1045 .mailchimp-sf-settings-page-hero-content-wrapper {
1046 display: flex;
1047 flex-direction: row;
1048 justify-content: center;
1049 align-items: center;
1050 padding: 0px 24px;
1051 gap: 24px;
1052 background: #EEEEEA;
1053 border-radius: 8px;
1054 box-sizing: border-box;
1055 }
1056
1057 .mailchimp-sf-settings-page-hero-content,
1058 .mailchimp-sf-settings-page-hero-content-image {
1059 flex: 1;
1060 }
1061
1062 .mailchimp-sf-settings-page-hero-content-image {
1063 line-height: 0;
1064 margin-top: 24px;
1065 align-self: end;
1066 }
1067
1068 .mailchimp-sf-settings-page-hero-content-image img {
1069 width: 100%;
1070 height: auto;
1071 }
1072
1073 /* Settings List Select */
1074 .mailchimp-sf-settings-list-select-wrapper {
1075 display: flex;
1076 flex-direction: row;
1077 align-items: center;
1078 gap: 8px;
1079 margin-bottom: 16px;
1080 }
1081
1082 /* Buttons */
1083 .mailchimp-sf-button,
1084 .button.mailchimp-sf-button {
1085 all: unset;
1086 box-sizing: border-box;
1087 display: inline-flex;
1088 align-items: center;
1089 gap: 10px;
1090 padding: 0 18px;
1091 position: relative;
1092 background-color: #f0f4f6;
1093 border-radius: 6px;
1094 font-weight: 400;
1095 color: var(--mailchimp-color-text);
1096 font-size: 16px;
1097 line-height: 16px;
1098 text-align: center;
1099 letter-spacing: 0;
1100 white-space: nowrap;
1101 cursor: pointer;
1102 text-align: center;
1103 vertical-align: middle;
1104 -ms-transition: all 0.2s;
1105 transition: all 0.2s;
1106 height: 40px;
1107 border: 1px solid transparent;
1108 white-space: nowrap;
1109 justify-content: center;
1110 }
1111
1112 .mailchimp-sf-button:hover, .mailchimp-sf-button:active {
1113 background-color: #d5dee3
1114 }
1115
1116 .mailchimp-sf-button:focus {
1117 background-color: #d5dee3;
1118 outline: 2px solid var(--mailchimp-color-link);
1119 }
1120
1121 .mailchimp-sf-button[disabled] {
1122 pointer-events: none;
1123 opacity: .4;
1124 }
1125
1126 .mailchimp-sf-button.button-primary,
1127 .mailchimp-sf-button.btn-primary {
1128 background-color: var(--mailchimp-color-link);
1129 border-color: var(--mailchimp-color-link);
1130 color: #fff;
1131 }
1132
1133 body.toplevel_page_mailchimp_sf_options a.mailchimp-sf-button.button-primary:hover,
1134 body.toplevel_page_mailchimp_sf_options a.mailchimp-sf-button.btn-primary:hover {
1135 color: #fff;
1136 }
1137
1138 .mailchimp-sf-button.button-primary:hover,
1139 .mailchimp-sf-button.button-primary:active,
1140 .mailchimp-sf-button.btn-primary:hover,
1141 .mailchimp-sf-button.btn-primary:active {
1142 background-color: var(--mailchimp-color-link-hover);
1143 }
1144
1145 .mailchimp-sf-button.button-primary:focus,
1146 .mailchimp-sf-button.btn-primary:focus {
1147 background-color: var(--mailchimp-color-link-hover);
1148 border-color: var(--mailchimp-color-link-hover);
1149 outline: 2px solid var(--mailchimp-color-link-hover);
1150 box-shadow: none;
1151 }
1152
1153 .mailchimp-sf-button.btn-small {
1154 font-size: 14px;
1155 height: 36px;
1156 }
1157
1158 .mailchimp-sf-section-footer {
1159 text-align: right;
1160 }
1161
1162 .mailchimp-sf-section-footer p.submit {
1163 margin: 0px;
1164 padding: 0px;
1165 text-align: right;
1166 }
1167
1168 .mailchimp-sf-section-footer .mailchimp-sf-button {
1169 margin: 16px 0px;
1170 }
1171
1172 /* Settings Page */
1173 .mailchimp-sf-settings-page,
1174 .mailchimp-sf-analytics-page {
1175 max-width: 1200px;
1176 margin: 0 auto;
1177 padding: 32px 20px;
1178 }
1179
1180 .mailchimp-sf-analytics-page {
1181 padding: 22px 20px 32px 20px;
1182 }
1183
1184 .mailchimp-sf-settings-list-wrapper {
1185 margin-bottom: 20px;
1186 }
1187
1188 /* Main Settings */
1189 .mailchimp-sf-main-settings-wrapper {
1190 display: flex;
1191 flex-direction: row;
1192 align-items: center;
1193 justify-content: space-between;
1194 }
1195
1196 .mailchimp-sf-main-setings-wrapper,
1197 .mailchimp-sf-user-sync-page-wrapper {
1198 display: flex;
1199 flex-direction: row;
1200 align-items: flex-start;
1201 justify-content: space-between;
1202 gap: 16px;
1203 }
1204
1205 .mailchimp-sf-main-setings-wrapper .mailchimp-sf-main-settings,
1206 .mailchimp-sf-user-sync-page-wrapper .mailchimp-sf-user-sync-page {
1207 flex: 3;
1208 }
1209
1210 .mailchimp-sf-main-setings-wrapper .mailchimp-sf-settings-form-previewer,
1211 .mailchimp-sf-user-sync-page-wrapper .mailchimp-sf-user-sync-settings-column {
1212 flex: 1;
1213 width: 100%;
1214 }
1215
1216 .mailchimp-sf-user-sync-page-wrapper .mailchimp-sf-user-sync-settings-column {
1217 min-width: 250px;
1218 }
1219
1220 .mailchimp-sf-main-settings,
1221 .mailchimp-sf-user-sync-page {
1222 max-width: 800px;
1223 }
1224
1225 table.widefat.mailchimp-sf-settings-table {
1226 margin-top: 16px;
1227 width: 100%;
1228 border-radius: 8px;
1229 border: 1px solid var(--mailchimp-border-color);
1230 }
1231
1232 .mailchimp-sf-settings-table thead tr th {
1233 background-color: var(--mailchimp-color-header-bg);
1234 padding: 24px;
1235 border-top-left-radius: 8px;
1236 border-top-right-radius: 8px;
1237 }
1238
1239 .mailchimp-sf-settings-form-previewer .mailchimp-sf-settings-table thead tr th {
1240 background-color: #EEEEEA;
1241 }
1242
1243 .mailchimp-sf-settings-table thead tr th h2 {
1244 color: var(--mailchimp-color-text);
1245 font-family: "Means Web", serif;
1246 font-weight: 300;
1247 letter-spacing: -0.72px;
1248 font-size: 24px;
1249 line-height: 1.25em;
1250 margin: 0;
1251 }
1252
1253 .mailchimp-sf-settings-table tbody tr th {
1254 padding: 24px 0px 0px 24px;
1255 }
1256
1257 .mailchimp-sf-settings-table tr th.mailchimp-sf-option-header {
1258 width: 145px;
1259 }
1260
1261 .mailchimp-sf-settings-table tbody tr:last-child th {
1262 padding-bottom: 24px;
1263 }
1264
1265 .mailchimp-sf-settings-table tbody tr td {
1266 padding: 24px 24px 0px 24px;
1267 }
1268
1269 .mailchimp-sf-settings-table tbody tr:last-child td {
1270 padding-bottom: 24px;
1271 }
1272
1273 .mailchimp-sf-settings-table tbody tr th,
1274 .mailchimp-sf-settings-table tbody tr th label {
1275 font-weight: 500;
1276 font-size: 16px;
1277 line-height: 18px;
1278 color: var(--mailchimp-color-text);
1279 word-wrap: normal;
1280 }
1281
1282 .mailchimp-sf-settings-table tbody tr td p.description {
1283 font-size: 12px;
1284 font-weight: 400;
1285 line-height: 1.35em;
1286 color: var(--mailchimp-color-text-gray);
1287 margin: 0px;
1288 }
1289
1290 .mailchimp-sf-settings-table tbody tr td,
1291 p.mailchimp-sf-settings-table-description {
1292 font-size: 16px;
1293 font-weight: 400;
1294 line-height: 1.35em;
1295 color: var(--mailchimp-color-text);
1296 word-wrap: normal;
1297 }
1298
1299 .mailchimp-sf-settings-table tbody tr td strong {
1300 word-wrap: normal;
1301 }
1302
1303 p.mailchimp-sf-settings-table-description {
1304 padding: 0px;
1305 margin: 0px;
1306 margin-top: 12px;
1307 }
1308
1309 table.widefat.mailchimp-sf-settings-table ul {
1310 margin: 0px;
1311 padding: 0px;
1312 }
1313
1314 .mailchimp-sf-user-sync-settings-fields {
1315 display: flex;
1316 flex-direction: column;
1317 gap: 24px;
1318 }
1319
1320 /* Input fields */
1321 #mailchimp-sf-settings-page select {
1322 font-size: 14px;
1323 padding: 8px 32px 8px 10px;
1324 height: 40px;
1325 background-color: #fff;
1326 border-radius: 6px;
1327 border: 1px solid #c3ced5;
1328 color: var(--mailchimp-color-text);
1329 line-height: 1.2em;
1330 font-family: 'Graphik Mailchimp Web', ui-sans-serif, system-ui, sans-serif;
1331 font-weight: 400;
1332 transition: all 0.2s;
1333 min-width: 200px;
1334 }
1335
1336 #mailchimp-sf-settings-page select:hover {
1337 background-color: #f8fafb;
1338 border-color: #3c4348;
1339 }
1340
1341 #mailchimp-sf-settings-page select:focus {
1342 background-color: #fff;
1343 border-color: var(--mailchimp-color-link);
1344 -webkit-box-shadow: none;
1345 box-shadow: none;
1346 outline-offset: -2px;
1347 outline: 2px solid var(--mailchimp-color-link);
1348 }
1349
1350 #mailchimp-sf-settings-page input[type="text"],
1351 #mailchimp-sf-settings-page input[type="tel"] {
1352 font-size: 16px;
1353 padding: 10px 12px;
1354 height: 40px;
1355 background-color: #fff;
1356 border-radius: 4px;
1357 border: 1px solid var(--mailchimp-border-color);
1358 color: var(--mailchimp-color-text);
1359 line-height: 1.35em;
1360 font-family: 'Graphik Mailchimp Web', ui-sans-serif, system-ui, sans-serif;
1361 font-weight: 400;
1362 transition: all 0.2s;
1363 }
1364
1365 #mailchimp-sf-settings-page input[type="text"]:hover,
1366 #mailchimp-sf-settings-page input[type="tel"]:hover {
1367 background-color: #f8fafb;
1368 border-color: #3c4348;
1369 outline: none;
1370 }
1371
1372 #mailchimp-sf-settings-page input[type="text"]:focus,
1373 #mailchimp-sf-settings-page input[type="tel"]:focus {
1374 outline-offset: -2px;
1375 outline: 2px solid var(--mailchimp-color-link);
1376 }
1377
1378 #mailchimp-sf-settings-page textarea {
1379 font-size: 16px;
1380 padding: 10px 12px;
1381 background-color: #fff;
1382 border-radius: 4px;
1383 border: 1px solid var(--mailchimp-border-color);
1384 color: var(--mailchimp-color-text);
1385 line-height: 1.35em;
1386 font-family: 'Graphik Mailchimp Web', ui-sans-serif, system-ui, sans-serif;
1387 font-weight: 400;
1388 transition: all 0.2s;
1389 min-width: 200px;
1390 }
1391
1392 #mailchimp-sf-settings-page textarea:hover {
1393 background-color: #f8fafb;
1394 border-color: #3c4348;
1395 outline: none;
1396 }
1397
1398 #mailchimp-sf-settings-page textarea:focus {
1399 outline-offset: -2px;
1400 outline: 2px solid var(--mailchimp-color-link);
1401 }
1402
1403 .mailchimp-sf-ch-wrapper {
1404 display: inline-block;
1405 margin: 0.5rem;
1406 }
1407
1408 input[type=checkbox].mailchimp-sf-checkbox {
1409 appearance: none;
1410 width: 24px;
1411 height: 24px;
1412 border: 1px solid var(--mailchimp-border-color);
1413 border-radius: 6px;
1414 cursor: pointer;
1415 position: relative;
1416 transition: all 0.2s;
1417 box-shadow: none;
1418 margin: 0px;
1419 }
1420
1421 input[type=checkbox].mailchimp-sf-checkbox:focus {
1422 outline: 2px solid var(--mailchimp-color-link);
1423 }
1424
1425 input[type=checkbox].mailchimp-sf-checkbox:checked {
1426 background-color: var(--mailchimp-color-link);
1427 border-color: var(--mailchimp-color-link);
1428 }
1429
1430 input[type=checkbox].mailchimp-sf-checkbox:checked::before {
1431 content: "";
1432 width: auto;
1433 height: auto;
1434 }
1435
1436 input[type=checkbox].mailchimp-sf-checkbox:checked:after {
1437 content: "";
1438 width: 12px;
1439 height: 5px;
1440 border-radius: 0.5px;
1441 transform: rotate(-45deg);
1442 border-left: 2px solid #fff;
1443 border-bottom: 2px solid #fff;
1444 margin: 6px 4px;
1445 display: block;
1446 }
1447
1448 input[type=checkbox].mailchimp-sf-checkbox[disabled] {
1449 opacity: 0.3;
1450 cursor: not-allowed;
1451 }
1452
1453 input[type=radio].mailchimp-sf-radio {
1454 appearance: none;
1455 width: 28px;
1456 height: 28px;
1457 border: 1px solid var(--mailchimp-border-color);
1458 border-radius: 50%;
1459 cursor: pointer;
1460 position: relative;
1461 box-shadow: none;
1462 }
1463
1464 input[type=radio].mailchimp-sf-radio:checked {
1465 border: 2px solid var(--mailchimp-color-link);
1466 background-color: #fff;
1467 }
1468
1469 input[type=radio].mailchimp-sf-radio:checked:before {
1470 display: none;
1471 }
1472
1473 input[type=radio].mailchimp-sf-radio:checked:after {
1474 content: "";
1475 display: block;
1476 width: 16px;
1477 height: 16px;
1478 background-color: var(--mailchimp-color-link);
1479 border-radius: 50%;
1480 margin: 4px;
1481 }
1482
1483 .widefat td p.radio-description {
1484 font-size: 16px;
1485 font-weight: 400;
1486 line-height: 1.35em;
1487 color: var(--mailchimp-color-text-gray);
1488 margin-top: 8px;
1489 margin-left: 36px;
1490 margin-bottom: 24px;
1491 }
1492
1493 .mailchimp-sf-user-sync-user-roles {
1494 display: flex;
1495 flex-wrap: wrap;
1496 gap: 24px;
1497 }
1498
1499 .mailchimp-sf-user-sync-user-roles .input-checkbox-wrapper{
1500 flex: 1 1 45%;
1501 }
1502
1503 span.mailchimp-sf-last-sync-time {
1504 vertical-align: middle;
1505 margin-left: 12px;
1506 color: var(--mailchimp-color-text-gray);
1507 }
1508
1509 .mailchimp-sf-toggle-switch {
1510 position: relative;
1511 display: inline-block;
1512 width: 40px;
1513 height: 24px;
1514 min-width: 40px;
1515 }
1516
1517 .mailchimp-sf-toggle-switch input[type="checkbox"] {
1518 opacity: 0;
1519 width: 0;
1520 height: 0;
1521 }
1522
1523 .mailchimp-sf-toggle-slider {
1524 position: absolute;
1525 cursor: pointer;
1526 top: 0;
1527 left: 0;
1528 right: 0;
1529 bottom: 0;
1530 background-color: var(--mailchimp-border-color);
1531 transition: .4s;
1532 border-radius: 24px;
1533 }
1534
1535 .mailchimp-sf-toggle-slider:before {
1536 position: absolute;
1537 content: "";
1538 height: 20px;
1539 width: 20px;
1540 left: 2px;
1541 bottom: 2px;
1542 background-color: white;
1543 transition: .4s;
1544 border-radius: 50%;
1545 }
1546
1547 input:checked + .mailchimp-sf-toggle-slider {
1548 background-color: var(--mailchimp-color-link);
1549 }
1550
1551 input:checked + .mailchimp-sf-toggle-slider:before {
1552 transform: translateX(16px);
1553 }
1554
1555 #mailchimp-sf-settings-page .input-checkbox-wrapper {
1556 display: flex;
1557 flex-direction: row;
1558 align-items: center;
1559 gap: 8px;
1560 }
1561
1562 #mailchimp-sf-settings-page .input-checkbox-wrapper label {
1563 font-size: 14px;
1564 font-weight: 400;
1565 line-height: 1.35em;
1566 color: var(--mailchimp-color-text-gray);
1567 margin: 0px;
1568 }
1569
1570 #mailchimp-sf-settings-page .mailchimp-sf-user-sync-settings-fields .input-checkbox-wrapper label {
1571 font-size: 16px;
1572 }
1573
1574 .mailchimp-sf-settings-table tbody tr td.mailchimp-sf-note {
1575 font-size: 12px;
1576 font-weight: 400;
1577 line-height: 1.35em;
1578 color: var(--mailchimp-color-text-gray);
1579 margin: 0px;
1580 }
1581
1582 .mailchimp-sf-form-preview-content {
1583 position: relative;
1584 }
1585
1586 .toplevel_page_mailchimp_sf_options .notice {
1587 display: none;
1588 }
1589
1590 .toplevel_page_mailchimp_sf_options .mailchimp-sf-settings-page .notice {
1591 display: block;
1592 }
1593
1594 @media screen and (max-width: 992px) {
1595 .mailchimp-sf-main-setings-wrapper,
1596 .mailchimp-sf-user-sync-page-wrapper {
1597 flex-direction: column;
1598 }
1599
1600 .mailchimp-sf-main-setings-wrapper .mailchimp-sf-main-settings,
1601 .mailchimp-sf-user-sync-page-wrapper .mailchimp-sf-user-sync-page {
1602 flex: 1;
1603 }
1604 }
1605
1606 @media screen and (max-width: 782px) {
1607 #mailchimp-sf-settings-page .mailchimp-sf-settings-page-hero,
1608 #mailchimp-sf-settings-page .mailchimp-sf-settings-page-header {
1609 flex-direction: column;
1610 padding: 32px 20px 32px 30px;
1611 }
1612
1613 .mailchimp-sf-settings-page,
1614 .mailchimp-sf-analytics-page {
1615 padding: 32px 10px;
1616 }
1617
1618 .mailchimp-sf-header {
1619 padding: 14px 20px;
1620 }
1621 }
1622
1623 @media screen and (max-width: 480px) {
1624 .mailchimp-sf-header {
1625 flex-direction: column;
1626 gap: 8px;
1627 }
1628
1629 .mailchimp-sf-settings-list-select-wrapper {
1630 flex-direction: column;
1631 align-items: flex-start;
1632 }
1633
1634 .mailchimp-sf-settings-list-select-wrapper .mailchimp-sf-settings-list-select,
1635 .mailchimp-sf-settings-list-select-wrapper .mailchimp-sf-settings-list-select select,
1636 .mailchimp-sf-settings-list-select-wrapper .mailchimp-sf-settings-list-select-button,
1637 .mailchimp-sf-settings-list-select-wrapper .mailchimp-sf-settings-list-select-button input {
1638 width: 100%;
1639 }
1640
1641 .mailchimp-sf-settings-list-select-wrapper .mailchimp-sf-settings-list-select select {
1642 max-width: 100%;
1643 }
1644
1645 #mailchimp-sf-settings-page .user-profile-wrapper {
1646 margin: 0 auto;
1647 gap: 12px;
1648 }
1649
1650 .mailchimp-sf-user-sync-user-roles .input-checkbox-wrapper{
1651 flex: 1 1 100%;
1652 }
1653
1654 .mailchimp-sf-user-sync-error-action {
1655 flex-direction: column;
1656 min-width: 0;
1657 }
1658
1659 #mailchimp-sf-settings-page .mailchimp-sf-list-settings .input-checkbox-wrapper {
1660 flex-direction: column;
1661 align-items: flex-start;
1662 }
1663
1664 .mailchimp-sf-settings-table tbody tr th {
1665 padding-left: 16px;
1666 }
1667
1668 .mailchimp-sf-settings-table tbody tr td {
1669 padding: 24px 16px 0px 16px;
1670 }
1671
1672 .mailchimp-sf-settings-table tr th.mailchimp-sf-option-header {
1673 width: auto;
1674 }
1675
1676 span.mailchimp-sf-last-sync-time {
1677 display: block;
1678 margin-left: 0px;
1679 margin-top: 12px;
1680 }
1681
1682 .mailchimp-sf-user-sync-page table.widefat.mailchimp-sf-settings-table {
1683 table-layout: fixed;
1684 }
1685
1686 .mailchimp-sf-settings-table table.widefat.mailchimp-sf-user-sync-errors-table {
1687 table-layout: auto;
1688 }
1689
1690 .mailchimp-sf-user-sync-errors {
1691 width: 100%;
1692 overflow-x: scroll;
1693 }
1694 }
1695