<!doctype html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">

  <style>
    #outlook a {
      padding: 0;
    }

    body {
      margin: 0;
      padding: 0;
      -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%
    }

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

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

    p {
      font-family: system-ui, sans-serif;
      font-size: 18px;
      line-height: 26px;
      font-weight: 400;
      text-align: center;
      margin: 0 0 0 0;
    }

    .booking p {
      text-align: left;
    }

    h1 {
      font-family: system-ui, sans-serif;
      font-size: 32px;
      line-height: 1.2;
      margin: 0 0 0 0;
      font-weight: bold;
    }

    h2 {
      font-family: system-ui, sans-serif;
      font-size: 24px;
      line-height: 1.2;
      margin: 0 0 0 0;
      font-weight: bold;
    }

    h3 {
      font-family: system-ui, sans-serif;
      font-size: 18px;
      line-height: 1.2;
      margin: 1em 0 0 0;
      font-weight: bold;
    }

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

    a.btn {
      font-family: system-ui, sans-serif;
      color: #FFFFFF;
      background-color: #FF4F32;
      text-decoration: none;
      text-transform: uppercase;
      padding: 9px 40px 9px 40px;
    }
    

    .column-px-320 {
      width: 320px !important;
      max-width: 320px
    }
  </style>
</head>

<body>

  <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tbody>
      <tr>
        <td align="center" valign="top" style="padding: 40px 20px 0 20px;">
          <table border="0" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 480px;">
            <tbody>
              <tr>
                <td align='center' style="height: 58px; text-align: left; padding: 0 0 40px 0">
                  <%# link_to image_tag('den-hirschsprungske-samling.png', size: "180x58" , alt: I18n.t(:client_name)),
                    root_url, title: I18n.t(:client_name) %>
                  <h1>
                    Two-factor authentication
                  </h1>  
                </td>
              </tr>
              <%= yield %>
            </tbody>
          </table>
        </td>
      </tr>

  </table>

</body>

</html>