/* Base CSS rules to be applied to all emails */
/* Created based on original MailPoet template for rendering emails */
/* StyleLint is disabled because some rules contain properties that linter marks as unknown, but they are valid for email rendering */
/* stylelint-disable property-no-unknown */

/* Base CSS resets to fix Browser quirks and ensure consistent display between email editor and email preview */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  border: 0;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%; /* From MJMJ - Automatic test adjustment on mobile max to 100% */
  -ms-text-size-adjust: 100%; /* From MJMJ - Automatic test adjustment on mobile max to 100% */
}

.email_layout_wrapper {
  margin: 0 auto;
  padding: 20px 0;
  width: 100%;
}

table,
td {
  border-collapse: collapse;
  mso-table-lspace: 0;
  mso-table-rspace: 0;
}

img {
  border: 0;
  height: auto;
  -ms-interpolation-mode: bicubic;
  line-height: 100%;
  max-width: 100%;
  outline: none;
  text-decoration: none;
}

p {
  display: block;
  margin: 0;
}

/* Wa want ensure the same design for all email clients */
ul,
ol {
  /* When margin attribute is set to zero, Outlook doesn't render the list properly. As a possible workaround, we can reset only margin for top and bottom */
  margin-bottom: 0;
  margin-top: 0;
  padding: 0 0 0 40px;
}

/* https://www.emailonacid.com/blog/article/email-development/tips-for-coding-email-preheaders */
.email_preheader,
.email_preheader * {
  color: #fff;
  display: none;
  font-size: 1px;
  line-height: 1px;
  max-height: 0;
  max-width: 0;
  mso-hide: all;
  opacity: 0;
  overflow: hidden;
  visibility: hidden;
}

@media screen and (max-width: 660px) {
  .email_column {
    max-width: 100% !important;
  }
  .block {
    display: block;
    width: 100% !important;
  }

  /* Flex Layout */
  .layout-flex-wrapper,
  .layout-flex-wrapper tbody,
  .layout-flex-wrapper tr {
    display: block !important;
    width: 100% !important;
  }

  .layout-flex-item {
    display: block !important;
    padding-bottom: 8px !important; /* Half of the flex gap between blocks */
    padding-left: 0 !important;
    width: 100% !important;
  }

  .layout-flex-item table,
  .layout-flex-item td {
    display: block !important;
    width: 100% !important;
  }
  /* Flex Layout End */
}
/* stylelint-enable property-no-unknown */