<html>
  <head>
    <title></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">
      /* FONTS */
      @media screen {
        .font-loat
        {
          font-family: 'Lato', Helvetica, Arial, sans-serif;
        }
        @font-face {
          font-family: 'Lato';
          font-style: normal;
          font-weight: 400;
          src: local('Lato Regular'), local('Lato-Regular'),
            url(https://fonts.gstatic.com/s/lato/v11/qIIYRU-oROkIk8vfvxw6QvesZW2xOQ-xsNqO47m55DA.woff)
              format('woff');
        }

        @font-face {
          font-family: 'Lato';
          font-style: normal;
          font-weight: 700;
          src: local('Lato Bold'), local('Lato-Bold'),
            url(https://fonts.gstatic.com/s/lato/v11/qdgUG4U09HnJwhYI-uK18wLUuEpTyoUstqEm5AMlJo4.woff)
              format('woff');
        }

        @font-face {
          font-family: 'Lato';
          font-style: italic;
          font-weight: 400;
          src: local('Lato Italic'), local('Lato-Italic'),
            url(https://fonts.gstatic.com/s/lato/v11/RYyZNoeFgb0l7W3Vu1aSWOvvDin1pK8aKteLpeZ5c0A.woff)
              format('woff');
        }

        @font-face {
          font-family: 'Lato';
          font-style: italic;
          font-weight: 700;
          src: local('Lato Bold Italic'), local('Lato-BoldItalic'),
            url(https://fonts.gstatic.com/s/lato/v11/HkF_qI1x_noxlxhrhMQYELO3LdcAZYWl9Si6vvxL-qU.woff)
              format('woff');
        }
      }
      @media (min-width: 390px) and (max-width:767px) {
        .main_content{
            width: 100%;
            margin-left: auto; 
            margin-right: auto; 
        }
        .header_content{
            background-color: white;
            width: 100%;
            margin-left: auto; 
            margin-right: auto; 
            margin-top: 20px;
        }
       }
       @media (min-width: 768px) and (max-width:1023px) {
        .main_content{
            width: 80%;
            margin-left: auto; 
            margin-right: auto; 
        }
        .header_content{
            width: 80%;
            margin-left: auto; 
            margin-right: auto; 
            margin-top: 20px;
        }
    }
       @media (min-width: 1024px) {
        .main_content{
            width: 50%;
            margin-left: auto; 
            margin-right: auto; 
        }
        .header_content{
            width: 50%;
            margin-left: auto; 
            margin-right: auto; 
            margin-top: 20px;
        }
       }

      /* CLIENT-SPECIFIC STYLES */
      body,
      table,
      td,
      a {
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
      }
      table,
      td {
        mso-table-lspace: 0pt;
        mso-table-rspace: 0pt;
      }
      img {
        -ms-interpolation-mode: bicubic;
      }

      /* 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;
      }

      /* ANDROID CENTER FIX */
      div[style*='margin: 16px 0;'] {
        margin: 0 !important;
      }
    </style>
  </head>
  <body
    style="
      background-color: #f4f4f4;
      margin: 0 !important;
      padding: 0 !important;
    "
  >
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
      <!-- LOGO -->
      <table style="font-size: 10px; padding: 0px 10px 0px 10px;" border="0" class="header_content">
        <tbody>
          <tr>
            <td rowspan="6" width="17%">
              <img
                src="<%=practiceLogo%>"
                alt="<%=practiceName%>"
                width="150"
                height="100"
              />
            </td>
            <td align="right" style="font-size: 12px">
              <b><%=practiceName%></b>
            </td>
          </tr>
          <tr>
            <td align="right"><%=headerAddress%></td>
          </tr>
          <tr>
            <td align="right"><%=headerCity%></td>
          </tr>
          <tr>
            <td align="right"><strong>T&nbsp;</strong><%=headerPhone%></td>
          </tr>
          <tr>
            <td align="right"><strong>F&nbsp;</strong><%=headerFax%></td>
          </tr>
          <tr>
            <td align="right"><%=headerWeb%></td>
          </tr>
        </tbody>
      </table>
      <!-- HERO -->
      <div
        style="
          width: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        "
      >
        <div
        class="main_content"
          style="
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
          "
        >
          <tr>
            <td align="center">
              <table border="0" cellpadding="0" cellspacing="0" class="main_content">
                <tr>
                  <td
                    bgcolor="#ffffff"
                    align="center"
                    valign="top"
                    class="font-loat"
                    style="
                      padding: 40px 20px 20px 20px;
                      border-radius: 4px 4px 0px 0px;
                      color: #111111;
                      font-size: 48px;
                      font-weight: 400;
                      letter-spacing: 4px;
                      line-height: 48px;
                    "
                  >
                    <h1 style="font-size: 32px; font-weight: 400; margin: 0; color: #1c3868;">
                      <%= heading %>
                    </h1>
                    <% if(heading == 'Payment Received'){ %>
                      <p style="line-height: 40px; font-weight: 500; font-size: 18px; text-align: justify; letter-spacing: 2px; ">Hi <%= name %>,<br>
                        Thank you for making the payment towards your bill. <br>
                        Total amount received $<%= amount %>
                    </p>
                    <% } %>     
                  </td>
                </tr>
              </table>
            </td>
          </tr>

  <!-- extra -->
  <% if(remider == 'email'){ %>
          <tr>
            <td align="center">
              <table border="0" cellpadding="0" cellspacing="0" class="main_content">
                <tr>
                  <td
                    bgcolor="#ffffff"
                    align="start"
                    valign="top"
                    class="font-loat"
                    style="
                      padding: 40px 20px 20px 20px;
                      border-radius: 4px 4px 0px 0px;
                      color: #111111;
                      font-size: 48px;
                      font-weight: 400;
                      letter-spacing: 4px;
                      line-height: 48px;
                    "
                  >
                    <h4 style="font-size: 20px; font-weight: 250; margin: 0">
                      Dear  <%= patient.first_name  %>  <%= patient.last_name  %>
                    </h4>
                    <p style="line-height: 25px; font-weight: 400; font-size: 15px; text-align: justify; letter-spacing: 2px; ">
                      We would like to remind you about the outstanding balance on your account with  <%= practiceName  %>
                    </p>
                      
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <% } %> 
          <!-- COPY BLOCK -->
          <tr>
            <td
              bgcolor="#f4f4f4"
              align="center"
            
            >
              <table border="0" cellpadding="0" cellspacing="0" class="main_content">
                <!-- COPY -->
                <tr>
                  <td
                    bgcolor="#ffffff"
                    align="center"
                    class="font-loat"
                    style="
                      padding: 0px 30px 0px 30px;
                      color: #666666;
                      font-size: 18px;
                      font-weight: 400;
                      line-height: 25px;
                    "
                  >
                    <p style="margin: 0"><%= paragraph %></p>
                  </td>
                </tr>
                <!-- BULLETPROOF BUTTON -->
                <tr style="<%=buttonHide%>">
                  <td bgcolor="#ffffff" align="center">
                    <table
                    class="main_content"
                      border="0"
                      cellspacing="0"
                      cellpadding="0"
                    >
                      <tr>
                        <td
                          bgcolor="#ffffff"
                          align="center"
                          style="padding: 3px 30px 20px 30px"
                        >
                          <table border="0" cellspacing="0" cellpadding="0">
                            <tr>
                              <td
                                align="center"
                                style="border-radius: 3px"
                                bgcolor="#3096de"
                              >
                              <% if(smtpPayGateWay == 1){ %>
                                <!-- <h4 style="font-size: 20px; font-weight: 250; margin: 0">
                                  Please use the link below to make payment
                                </h4> -->
                               
                                <a
                                  href="<%= link %>"
                                  target="_blank"
                                  style="
                                    font-size: 20px;
                                    font-family: Helvetica, Arial, sans-serif;
                                    background-color: #1c3868;
                                    text-decoration: none;
                                    color: #ffffff;
                                    text-decoration: none;
                                    padding: 15px 25px;
                                    border-radius: 2px;
                                    border: 1px solid;
                                    display: inline-block;
                                  "
                                  ><%= btnTitle %></a
                                >
                              <% } %> 
                              
                              </td>
                            </tr>
                          </table>
                        </td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>
            </td>
          </tr>

                <!-- extra -->
    <% if(remider == 'email'){ %>
          <tr>
            <td align="center">
              <table border="0" cellpadding="0" cellspacing="0" class="main_content">
                <tr>
                  <td
                    bgcolor="#ffffff"
                    align="start"
                    valign="top"
                    class="font-loat"
                    style="
                      padding: 1px 20px 20px 20px;
                      border-radius: 4px 4px 0px 0px;
                      color: #111111;
                      font-size: 48px;
                      font-weight: 400;
                      letter-spacing: 4px;
                      line-height: 48px;
                    "
                  >
                   
                    <p style="line-height: 25px; font-weight: 400; font-size: 15px; text-align: justify; letter-spacing: 2px; ">
                      If you would like to review the invoice before making the payment, you can access it directly through our patient portal. Simply log in to your patient account at <a href="<%= url %>"><%= url %></a> using your credentials. 
                    </p>

                    <% if(remider=='email' ){ %>
                      <div align="center" style="border-radius: 3px" bgcolor="#3096de">
                        <a href="<%= invoiceLink %>" target="_blank" style="
                      font-size: 20px;
                      font-family: Helvetica, Arial, sans-serif;
                      background-color: #1c3868;
                      text-decoration: none;
                      color: #ffffff;
                      text-decoration: none;
                      padding: 2px 12px;
                      border-radius: 2px;
                      border: 1px solid;
                      display: inline-block;
                      ">
                          <%= invoiceBtnTitle %>
                        </a>
                        <% } %>

                    <p style="line-height: 25px; font-weight: 400; font-size: 15px; text-align: justify; letter-spacing: 2px; ">
                      If you have any questions or need assistance regarding your billing, please feel free to reach out to our billing department at  <%= headerPhone %>

                     
                    </p>
                    <h4 style="font-size: 20px; font-weight: 250; margin: 0">
                      Best regards, <br>
                      <%=practiceName%>

                    </h4>
                      
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <% } %> 
          <!-- FOOTER -->
          <tr>
            <td
              bgcolor="#f4f4f4"
              align="center"
            
            >
              <table border="0" cellpadding="0" cellspacing="0" class="main_content">
                <!-- PERMISSION REMINDER -->
                <tr>
                  <td
                    bgcolor="#f4f4f4"
                    align="left"
                    align="center"
                    class="font-loat"
                    style="
                      padding: 15px 30px 30px 30px;
                      color: #666666;
                      font-size: 14px;
                      font-weight: 400;
                      line-height: 18px;
                    "
                  >
                    <p style="margin: 0;text-align: center;
                    color: black;
                    font-weight: 600;">
                      <%= footer %>
                      <!-- <a
                        href="mailto:<%=mail%>"
                        target="_blank"
                        style="color: #111111; font-weight: 700"
                        >Rao Dermatology</a> -->
                      
                      <%=contact%> <br> 
                      <%=billingContact%>
                      
                    </p>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </div>
      </div>
    </table>
  </body>
</html>
