/* Your custom CSS resets for email */

/*! purgecss start ignore */

body {
  margin: 0;
  width: 100%;
  padding: 0;
  word-break: break-word;
  -webkit-font-smoothing: antialiased;
}

img {
  border: 0;
  max-width: 100%;
  vertical-align: middle;
  line-height: 100%;
}

/*! purgecss end ignore */

/* Tailwind components that are generated by plugins */

/**
 * @import here any custom components - classes that you'd want loaded
 * before the Tailwind utilities, so that the utilities could still
 * override them.
*/

.button {
  display: inline-block;
  color: #fff;
  text-decoration-line: none;
  background-color: #3869D4;
  border-top: 10px solid #3869D4;
  border-right: 18px solid #3869D4;
  border-bottom: 10px solid #3869D4;
  border-left: 18px solid #3869D4;
  border-radius: 3px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.16);
}

.button--green {
  background-color: #22BC66;
  border-top: 10px solid #22BC66;
  border-right: 18px solid #22BC66;
  border-bottom: 10px solid #22BC66;
  border-left: 18px solid #22BC66;
}

.button--red {
  background-color: #FF6136;
  border-top: 10px solid #FF6136;
  border-right: 18px solid #FF6136;
  border-bottom: 10px solid #FF6136;
  border-left: 18px solid #FF6136;
}

@media (max-width: 600px) {
  .button {
    width: 100% !important;
    text-align: center !important;
  }
}

.purchase_heading {
  border-bottom-width: 1px;
  border-bottom-color: #EAEAEC;
  border-bottom-style: solid;
}

.purchase_heading p {
  margin: 0;
  font-size: 12px;
  line-height: 24px;
  color: #85878E;
}

.purchase_footer {
  padding-top: 16px;
  vertical-align: middle;
  font-size: 16px;
  border-top-width: 1px;
  border-top-color: #EAEAEC;
  border-top-style: solid;
}

.body-sub {
  margin-top: 25px;
  border-top-width: 1px;
  padding-top: 25px;
  border-top-color: #EAEAEC;
  border-top-style: solid;
}

.discount {
  width: 100%;
  background-color: #F4F4F7;
  padding: 24px;
  border: 2px dashed #cbcccf;
}

/* Tailwind utility classes */

.m-0 {
  margin: 0;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.my-30 {
  margin-top: 30px;
  margin-bottom: 30px;
}

.mb-0 {
  margin-bottom: 0;
}

.mb-2 {
  margin-bottom: 2px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-6 {
  margin-bottom: 6px;
}

.mt-0 {
  margin-top: 0;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-2 {
  margin-top: 2px;
}

.mt-20 {
  margin-top: 20px;
}

.mt-6 {
  margin-top: 6px;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.table {
  display: table;
}

.h-auto {
  height: auto;
}

.w-1\/5 {
  width: 20%;
}

.w-2\/5 {
  width: 40%;
}

.w-3\/5 {
  width: 60%;
}

.w-4\/5 {
  width: 80%;
}

.w-570 {
  width: 570px;
}

.w-\[200px\] {
  width: 200px;
}

.w-full {
  width: 100%;
}

.rounded {
  border-radius: 0.25rem;
}

.rounded-full {
  border-radius: 9999px;
}

.border-b-0 {
  border-bottom-width: 0px;
}

.border-b-2 {
  border-bottom-width: 2px;
}

.border-b-4 {
  border-bottom-width: 4px;
}

.border-l-0 {
  border-left-width: 0px;
}

.border-l-8 {
  border-left-width: 8px;
}

.border-r-0 {
  border-right-width: 0px;
}

.border-r-8 {
  border-right-width: 8px;
}

.border-t {
  border-top-width: 1px;
}

.border-t-2 {
  border-top-width: 2px;
}

.border-t-4 {
  border-top-width: 4px;
}

.border-solid {
  border-style: solid;
}

.border-blue-100 {
  border-color: #e1effe;
}

.border-gray-200 {
  border-color: #e5e7eb;
}

.border-green-100 {
  border-color: #def7ec;
}

.border-green-400 {
  border-color: #31c48d;
}

.border-red-100 {
  border-color: #fde8e8;
}

.border-yellow-100 {
  border-color: #fdf6b2;
}

.bg-blue-100 {
  background-color: #e1effe;
}

.bg-gray-postmark-lighter {
  background-color: #F2F4F6;
}

.bg-gray-postmark-lightest {
  background-color: #F4F4F7;
}

.bg-green-100 {
  background-color: #def7ec;
}

.bg-red-100 {
  background-color: #fde8e8;
}

.bg-white {
  background-color: #fff;
}

.bg-yellow-100 {
  background-color: #fdf6b2;
}

.p-24 {
  padding: 24px;
}

.p-45 {
  padding: 45px;
}

.py-10 {
  padding-top: 10px;
  padding-bottom: 10px;
}

.py-35 {
  padding-top: 35px;
  padding-bottom: 35px;
}

.pb-8 {
  padding-bottom: 8px;
}

.pr-16 {
  padding-right: 16px;
}

.pt-25 {
  padding-top: 25px;
}

.pt-32 {
  padding-top: 32px;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.font-sans {
  font-family: "Nunito Sans", -apple-system, "Segoe UI", sans-serif;
}

.text-2xl {
  font-size: 24px;
}

.text-base {
  font-size: 16px;
}

.text-sm {
  font-size: 14px;
}

.text-xl {
  font-size: 20px;
}

.text-xs {
  font-size: 13px;
}

.font-bold {
  font-weight: 700;
}

.font-medium {
  font-weight: 500;
}

.leading-18 {
  line-height: 18px;
}

.leading-20 {
  line-height: 20px;
}

.leading-24 {
  line-height: 24px;
}

.leading-5 {
  line-height: 1.25rem;
}

.text-blue-700 {
  color: #1a56db;
}

.text-blue-postmark {
  color: #3869D4;
}

.text-gray-postmark-dark {
  color: #51545E;
}

.text-gray-postmark-darker {
  color: #333333;
}

.text-gray-postmark-meta {
  color: #85878E;
}

.text-green-700 {
  color: #046c4e;
}

.text-green-800 {
  color: #03543f;
}

.text-red-700 {
  color: #c81e1e;
}

.text-red-800 {
  color: #9b1c1c;
}

.text-yellow-700 {
  color: #8e4b10;
}

.text-yellow-800 {
  color: #723b13;
}

.underline {
  text-decoration-line: underline;
}

.no-underline {
  text-decoration-line: none;
}

/* Your custom utility classes */

.mso-leading-exactly {
  mso-line-height-rule: exactly;
}

.hover\:underline:hover {
  text-decoration-line: underline;
}

@media (max-width: 600px) {
  .sm\:w-full {
    width: 100%;
  }
}
