<!DOCTYPE html>
<html lang="en">
  <head>
    <title>{{ projectName }} Email Service</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <style type="text/css" id="hs-inline-css">
      /*<![CDATA[*/

      /* CLIENT-SPECIFIC STYLES */
      body, table, td, a {
      	-webkit-text-size-adjust: 100%;
      	-ms-text-size-adjust: 100%;
      	-webkit-font-smoothing: antialiased;
      	}
      table,
      td {
        mso-table-lspace: 0pt;
        mso-table-rspace: 0pt;
      }
      img {
        -ms-interpolation-mode: bicubic;
      }
      s #content p {
        margin: 0;
      }
      /* RESET STYLES */
      img {
        border: 0;
        height: auto;
        line-height: 100%;
        outline: none;
        text-decoration: none;
      }
      table {
        border-collapse: collapse !important;
      }
      body {
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
      }

      /* iOS BLUE LINKS */
      a[x-apple-data-detectors] {
         color: inherit !important;
         text-decoration: none !important;
         font-size: inherit !important;
         font-family: inherit !important;
         font-weight: inherit !important;
         line-height: inherit !important;
      }
      body a {
          color: {{projectColor}};
          text-decoration: underline;
      }
      body p {
        color: #525252;
      }
      h1 {
        font-size: 28px;
        color: #171717;
        font-weight: 700;
        line-height: 32px;
        margin: 0;
        padding-bottom: 20px;
      }
      hr {
        margin: 0;
        width: 100%;
        border-top: 1px solid #d3dae4;
        border-bottom: none;
        border-left: none;
        border-right: none;
      }
      div.im,
      span.im {
        color: inherit !important;
      }

      /* MOBILE STYLES */
      @media screen and (max-width: 600px) {
       .img-max {
         width: 100% !important;
         max-width: 100% !important;
         height: auto !important;
       }

       .max-width {
         max-width: 100% !important;
       }

       #content {
          padding-top: 30px !important;
          padding-bottom: 30px !important;
        }
      }

      /* DARK MODE */
      /* @media (prefers-color-scheme: dark) {
        #background {
          background-color: #171717 !important;
        }
        #content {
          background-color: #171717 !important;
          color: #ffffff !important;
        }
        #footer {
          background-color: #171717 !important;
          color: #ffffff !important;
        }
        h1,
        h2 {
          color: #ffffff !important;
        }
        .link {
          color: #ff99dd !important;
        }
        body a {
          color: #ffffff !important;
        }
        body p {
          color: #e7e5e4 !important;
        }
        .button {
          background-color: #ffffff !important;
          color: #171717 !important;
          border-color: #171717 !important;
        }
        hr {
          border-color: #334155 !important;
        }
      } */

      /* ANDROID CENTER FIX */
      div[style*="margin: 16px 0;"] {
      	margin: 0 !important;
      }

      blockquote {
      	background: #f0f4f9 !important;
      	border-radius: 4px !important;
      	margin: 0 !important;
      	padding: 24px !important;
      }

      blockquote > p {
      	margin: 0 !important;
      }
      /*]]>*/
    </style>

    <meta name="generator" content="Directus" />
    <meta name="x-apple-disable-message-reformatting" />
    <meta name="robots" content="noindex,follow" />
  </head>
  <body
    style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; height:100% !important; width:100% !important; margin:0 !important; padding:0; !important background-color:#f6f6f6"
    bgcolor="#f6f6f6"
  >
    <!-- HIDDEN PREHEADER TEXT -->
    <div
      class="preview-text"
      style="
        display: none;
        font-size: 1px;
        color: #172940;
        line-height: 1px;
        max-height: 0px;
        max-width: 0px;
        opacity: 0;
        overflow: hidden;
      "
    >
      &nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌
    </div>

    <table
      role="presentation"
      border="0"
      cellpadding="0"
      cellspacing="0"
      width="100%"
      style="
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
        mso-table-lspace: 0pt;
        mso-table-rspace: 0pt;
        border-collapse: collapse !important;
      "
    >
      <tbody>
        <tr>
          <td
            id="background"
            align="center"
            valign="top"
            width="100%"
            bgcolor="#ffffff"
            style="
              -webkit-text-size-adjust: 100%;
              -ms-text-size-adjust: 100%;
              mso-table-lspace: 0pt;
              mso-table-rspace: 0pt;
              background-size: cover;
              padding: 30px 15px 0 15px;
              background-color: #ffffff;
            "
          >
            <!--[if (gte mso 9)|(IE)]>
					<table role="presentation" align="center" border="0" cellspacing="0" cellpadding="0" width="600">
					<tr>
					<td align="center" valign="top" width="600">
					<![endif]-->
            <table
              role="presentation"
              align="center"
              border="0"
              cellpadding="0"
              cellspacing="0"
              width="100%"
              style="
                -webkit-text-size-adjust: 100%;
                -ms-text-size-adjust: 100%;
                mso-table-lspace: 0pt;
                mso-table-rspace: 0pt;
                border-collapse: collapse !important;
                max-width: 600px;
              "
            >
              <tbody>
                <tr>
                  <td
                    align="left"
                    valign="top"
                    style="
                      -webkit-text-size-adjust: 100%;
                      -ms-text-size-adjust: 100%;
                      mso-table-lspace: 0pt;
                      mso-table-rspace: 0pt;
                      padding: 0 0 40px 0;
                    "
                  >
                    <table>
                      <tbody>
                        <tr>
                          <td align="center" valign="middle">
                            <img
                              id="logo"
                              src="{{ projectLogo }}"
                              alt="{{ projectName }} Logo"
                              width="40"
                              height="40"
                              border="0"
                              style="
                                -ms-interpolation-mode: bicubic;
                                border: 1px solid white;
                                border-radius: 8px;
                                height: 40px;
                                width: 40px;
                                line-height: 100%;
                                outline: none;
                                text-decoration: none;
                                display: block;
                                object-fit: contain;
                                padding: 10px;
                                background: {{ projectColor }}
                              "
                            />
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </td>
                </tr>
                <tr>
                  <td
                    id="content"
                    align="left"
                    valign="top"
                    style="
                      -webkit-text-size-adjust: 100%;
                      -ms-text-size-adjust: 100%;
                      mso-table-lspace: 0pt;
                      mso-table-rspace: 0pt;
                      font-family: -apple-system, BlinkMacSystemFont,
                        'HelveticaNeue-Light', 'Helvetica Neue Light',
                        'Helvetica Neue', Helvetica, Arial, 'Lucida Grande',
                        sans-serif;
                      font-size: 16px;
                      line-height: 26px;
                      letter-spacing: 0.32px;
                      margin: 0;
                      color: #171717;
                    "
                  >
                    <div
                      style="
                        color: inherit;
                        font-size: inherit;
                        line-height: inherit;
                      "
                    >
                      {% block content %}{{ html }}{% endblock %}
                    </div>

                    <p style="padding: 20px 0 10px 0">All the best,</p>
                    <table border="0" cellpadding="0" cellspacing="0">
                      <tr>
                        <td align="center" valign="middle" style="">
                          <img
                            id="logo"
                            src="{{ projectLogo }}"
                            alt=""
                            width="22"
                            height="22"
                            border="0"
                            style="
                              -ms-interpolation-mode: bicubic;
                              border: 0;
                              height: 22px;
                              width: 22px;
                              outline: none;
                              text-decoration: none;
                              display: block;
                              object-fit: contain;
                              padding: 11px;
                              border-radius: 100%;
                              border: 1px solid #ffffff;
                              background: {{ projectColor }};
                            "
                          />
                        </td>
                        <td>
                          <p
                            style="
                              display: inline-block;
                              line-height: 20px;
                              padding-left: 8px;
                              margin: 0;
                            "
                          >
                            The {{ projectName }} Team<br /><span
                              style="color: #737373"
                              >Administrator</span
                            >
                          </p>
                        </td>
                      </tr>
                    </table>
                    <hr style="margin: 40px 0 20px 0" width="100%" />
                  </td>
                </tr>
                <tr>
                  <td
                    align="left"
                    valign="middle"
                    style="
                      -webkit-text-size-adjust: 100%;
                      -ms-text-size-adjust: 100%;
                      mso-table-lspace: 0pt;
                      mso-table-rspace: 0pt;
                      padding: 0 0 20px 0;
                      font-family: Open Sans, Helvetica, Arial, sans-serif;
                    "
                  >
                    <p
                      style="
                        margin: 10px 0;
                        font-size: 13px;
                        line-height: 16px;
                        color: #171717;
                      "
                    >
                      Sent by the team at {{ projectName }}{% if projectUrl != '' %} —
                      <a
                        style="
                          -webkit-text-size-adjust: 100%;
                          -ms-text-size-adjust: 100%;
                          text-decoration: underline;
                          color: #171717;
                        "
                        href="{{ projectUrl }}"
                        target="_blank"
                        >Manage Your Account</a
                      >{% endif %}<br />
                      {% block footer %}{% endblock %}
                    </p>
                  </td>
                </tr>
              </tbody>
            </table>
            <!--[if (gte mso 9)|(IE)]>
					</td>
					</tr>
					</table>
					<![endif]-->
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
