From 6a91cfe5a66a3d93f4fc6388492141a9eecad7e3 Mon Sep 17 00:00:00 2001
From: Livio Amstutz <livio.a@gmail.com>
Date: Wed, 28 Oct 2020 15:26:20 +0100
Subject: [PATCH] fix: email styling (#918)

---
 .../templates/template 01 Tabelle black.mjml  |   43 +-
 .../static/templates/template.html            | 1179 +++++++----------
 2 files changed, 504 insertions(+), 718 deletions(-)

diff --git a/internal/notification/static/templates/template 01 Tabelle black.mjml b/internal/notification/static/templates/template 01 Tabelle black.mjml
index 8d514752eb..82cc467db3 100644
--- a/internal/notification/static/templates/template 01 Tabelle black.mjml	
+++ b/internal/notification/static/templates/template 01 Tabelle black.mjml	
@@ -1,46 +1,47 @@
 <mjml>
   <mj-head>
     <mj-attributes>
-      <mj-text align="center" color="#ffffff" font-family="Lato" />
+      <mj-font name="Lato" href="http://fonts.googleapis.com/css?family=Lato:200,300,400,600" />
+      <mj-text align="center" color="{{.SecondaryColor}}" font-family="Lato, Arial, Helvetica, sans-serif" />
       <mj-section padding="0" full-width="full-width" />
-      <mj-body background-color="#222324" />
+      <mj-body background-color="{{.PrimaryColor}}" width="800px" />
       <mj-image padding="0" />
       <mj-column padding="0" />
       <mj-wrapper padding-left="0" />
       <mj-wrapper full-width="full-width" />
-      <mj-class name="left" position="" />
     </mj-attributes>
+    <mj-style>
+      @media (max-width:480px) { .mobile_hidden { display:none !important; } }
+    </mj-style>
   </mj-head>
   <mj-body>
     <mj-wrapper background-url="https://static.zitadel.ch/zitadel-logo-outline-light.png" border="0" background-repeat="no-repeat">
       <mj-section>
         <mj-group>
           <mj-column>
-            <mj-image src="https://static.zitadel.ch/zitadel-logo-light.png" align="left" width="100px" padding="0" />
+            <mj-image src="https://static.zitadel.ch/zitadel-logo-light.png" align="left" width="150px" padding="20px 0 50px 20px" />
           </mj-column>
         </mj-group>
       </mj-section>
       <mj-section>
-        <mj-group>
-          <mj-column width="20%">
-            <mj-image src="https://static.zitadel.ch/flavor-spikes-small-opacity40.png" align="left" heigh="80%" width="80%" />
-          </mj-column>
-          <mj-column width="60%">
-            <mj-text font-size="2rem" font-weight="light">{{.Greeting}}</mj-text>
-            <mj-text font-size="1.25rem" font-weight="light">{{.Text}}</mj-text>
-            <mj-button href="{{.URL}}" background-color="#5282C1" font-size="16px">{{.ButtonText}}</mj-button>
-            <mj-text>
-              <a href="http://www.caos.ch" style="color:#e91e63; text-decoration: none;" target="_blank"> CAOS AG </a> | Teufener Strasse 19 | CH-9000 St. Gallen </mj-text>
-          </mj-column>
-          <mj-column width="20%">
-            <mj-image src="https://static.zitadel.ch/flavor-spikes-big-opacity40.png" align="right" />
-          </mj-column>
-        </mj-group>
+        <mj-column width="20%" css-class="mobile_hidden">
+          <mj-image src="https://static.zitadel.ch/flavor-spikes-small-opacity40.png" align="left" height="100%" width="80%" />
+        </mj-column>
+        <mj-column width="60%">
+          <mj-text font-size="2rem" font-weight="200">{{.Greeting}}</mj-text>
+          <mj-text font-size="1rem" line-height="1.5" font-weight="light">{{.Text}}</mj-text>
+          <mj-button href="{{.URL}}" background-color="#5282C1" font-size="16px">{{.ButtonText}}</mj-button>
+          <mj-text padding="30px 0">
+            <a href="http://www.caos.ch" style="color:#e91e63; text-decoration: none;" target="_blank"> CAOS AG </a> | Teufener Strasse 19 | CH-9000 St. Gallen </mj-text>
+        </mj-column>
+        <mj-column width="20%" css-class="mobile_hidden">
+          <mj-image src="https://static.zitadel.ch/flavor-spikes-big-opacity40.png" align="right" />
+        </mj-column>
       </mj-section>
       <mj-section>
         <mj-group>
-          <mj-column>
-            <mj-image src="https://static.zitadel.ch/logo_whitefont_transparentbg.png" align="right"  heigh="65%" width="65%" padding-right="20px" />
+          <mj-column padding="20px">
+            <mj-image src="https://static.zitadel.ch/logo_whitefont_transparentbg.png" align="right" heigh="65%" width="65%" />
           </mj-column>
         </mj-group>
       </mj-section>
diff --git a/internal/notification/static/templates/template.html b/internal/notification/static/templates/template.html
index 77319e45a0..3627215a1b 100644
--- a/internal/notification/static/templates/template.html
+++ b/internal/notification/static/templates/template.html
@@ -1,714 +1,499 @@
+<!doctype html>
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
 
-    <!doctype html>
-    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
-      <head>
-        <title>
-          
-        </title>
-        <!--[if !mso]><!-- -->
-        <meta http-equiv="X-UA-Compatible" content="IE=edge">
-        <!--<![endif]-->
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <style type="text/css">
-          #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:0pt;mso-table-rspace:0pt; }
-          img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }
-          p { display:block;margin:13px 0; }
-        </style>
-        <!--[if mso]>
-        <xml>
-        <o:OfficeDocumentSettings>
-          <o:AllowPNG/>
-          <o:PixelsPerInch>96</o:PixelsPerInch>
-        </o:OfficeDocumentSettings>
-        </xml>
-        <![endif]-->
-        <!--[if lte mso 11]>
-        <style type="text/css">
-          .mj-outlook-group-fix { width:100% !important; }
-        </style>
-        <![endif]-->
-        
-      <!--[if !mso]><!-->
-        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,500,700" rel="stylesheet" type="text/css">
-<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">
-        <style type="text/css">
-          @import url(https://fonts.googleapis.com/css?family=Lato:300,400,500,700);
-@import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);
-        </style>
-      <!--<![endif]-->
-
-    
-        
+<head>
+    <title> </title>
+    <!--[if !mso]><!-- -->
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <!--<![endif]-->
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <style type="text/css">
-      @media only screen and (min-width:480px) {
-        .mj-column-per-100 { width:100% !important; max-width: 100%; }
-.mj-column-per-20 { width:20% !important; max-width: 20%; }
-.mj-column-per-60 { width:60% !important; max-width: 60%; }
-      }
-    </style>
-    
-  
-        <style type="text/css">
-        
-        
+        #outlook a {
+            padding: 0;
+        }
 
-    @media only screen and (max-width:480px) {
-      table.mj-full-width-mobile { width: 100% !important; }
-      td.mj-full-width-mobile { width: auto !important; }
-    }
-  
-        </style>
-        
-        
-      </head>
-      <body style="background-color:{{.PrimaryColor}};">
-        
-        
-      <div
-         style="background-color:{{.PrimaryColor}};">
-        
-      <table
-         align="center" background="https://static.zitadel.ch/zitadel-logo-outline-light.png" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:url(https://static.zitadel.ch/zitadel-logo-outline-light.png) top center / auto no-repeat;width:100%;"
-      >
+        body {
+            margin: 0;
+            padding: 0;
+            -webkit-text-size-adjust: 100%;
+            -ms-text-size-adjust: 100%;
+        }
+
+        table,
+        td {
+            border-collapse: collapse;
+            mso-table-lspace: 0pt;
+            mso-table-rspace: 0pt;
+        }
+
+        img {
+            border: 0;
+            height: auto;
+            line-height: 100%;
+            outline: none;
+            text-decoration: none;
+            -ms-interpolation-mode: bicubic;
+        }
+
+        p {
+            display: block;
+            margin: 13px 0;
+        }
+    </style>
+    <!--[if mso]>
+          <xml>
+          <o:OfficeDocumentSettings>
+            <o:AllowPNG/>
+            <o:PixelsPerInch>96</o:PixelsPerInch>
+          </o:OfficeDocumentSettings>
+          </xml>
+          <![endif]-->
+    <!--[if lte mso 11]>
+          <style type="text/css">
+            .mj-outlook-group-fix { width:100% !important; }
+          </style>
+          <![endif]-->
+    <!--[if !mso]><!-->
+    <link href="https://fonts.googleapis.com/css?family=Lato:300,400,500,700" rel="stylesheet" type="text/css">
+    <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">
+    <style type="text/css">
+        @import url(https://fonts.googleapis.com/css?family=Lato:300,400,500,700);
+        @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);
+    </style>
+    <!--<![endif]-->
+    <style type="text/css">
+        @media only screen and (min-width:480px) {
+            .mj-column-per-100 {
+                width: 100% !important;
+                max-width: 100%;
+            }
+            .mj-column-per-20 {
+                width: 20% !important;
+                max-width: 20%;
+            }
+            .mj-column-per-60 {
+                width: 60% !important;
+                max-width: 60%;
+            }
+        }
+    </style>
+    <style type="text/css">
+        @media only screen and (max-width:480px) {
+            table.mj-full-width-mobile {
+                width: 100% !important;
+            }
+            td.mj-full-width-mobile {
+                width: auto !important;
+            }
+        }
+    </style>
+    <style type="text/css">
+        @media (max-width:480px) {
+            .mobile_hidden {
+                display: none !important;
+            }
+        }
+    </style>
+</head>
+
+<body style="background-color:{{.PrimaryColor}};">
+<div style="background-color:{{.PrimaryColor}};">
+    <table align="center" background="https://static.zitadel.ch/zitadel-logo-outline-light.png" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:url(https://static.zitadel.ch/zitadel-logo-outline-light.png) center top / auto no-repeat;background-position:center top;background-repeat:no-repeat;background-size:auto;width:100%;">
         <tbody>
-          <tr>
+        <tr>
             <td>
-              
-      <!--[if mso | IE]>
-        <v:rect  style="mso-width-percent:1000;" xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false">
-        <v:fill  origin="0.5, 0" position="0.5, 0" src="https://static.zitadel.ch/zitadel-logo-outline-light.png" type="tile" />
-        <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
-      
-      <table
-         align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600"
-      >
-        <tr>
-          <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
-      <![endif]-->
-    
-        
-      <div  style="margin:0px auto;max-width:600px;">
-        <div  style="line-height:0;font-size:0;">
-        <table
-           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
-        >
-          <tbody>
-            <tr>
-              <td
-                 style="border:0;direction:ltr;font-size:0px;padding:20px 0;padding-left:0;text-align:center;"
-              >
                 <!--[if mso | IE]>
-                  <table role="presentation" border="0" cellpadding="0" cellspacing="0">
-                
-            <tr>
-              <td
-                 class="" width="600px"
-              >
-          <![endif]-->
-            
-      <table
-         align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
-      >
-        <tbody>
-          <tr>
-            <td>
-              
-        
-      <!--[if mso | IE]>
-      <table
-         align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600"
-      >
-        <tr>
-          <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
-      <![endif]-->
-    
-        
-      <div  style="margin:0px auto;max-width:600px;">
-        
-        <table
-           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
-        >
-          <tbody>
-            <tr>
-              <td
-                 style="direction:ltr;font-size:0px;padding:0;text-align:center;"
-              >
-                <!--[if mso | IE]>
-                  <table role="presentation" border="0" cellpadding="0" cellspacing="0">
-                
-        <tr>
-      
-            <td
-               class="" style="width:600px;"
-            >
-          <![endif]-->
-            
-      <div
-         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0;line-height:0;text-align:left;display:inline-block;width:100%;direction:ltr;"
-      >
-        <!--[if mso | IE]>
-        <table
-           border="0" cellpadding="0" cellspacing="0" role="presentation"
-        >
-          <tr>
-        
-              <td
-                 style="vertical-align:top;width:600px;"
-              >
-              <![endif]-->
-                
-      <div
-         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
-      >
-        
-      <table
-         border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"
-      >
-        <tbody>
-          <tr>
-            <td  style="vertical-align:top;padding:0;">
-              
-      <table
-         border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%"
-      >
-        
-            <tr>
-              <td
-                 align="left" style="font-size:0px;padding:0;word-break:break-word;"
-              >
-                
-      <table
-         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"
-      >
-        <tbody>
-          <tr>
-            <td  style="width:100px;">
-              
-      <img
-         height="auto" src="https://static.zitadel.ch/zitadel-logo-light.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="100"
-      />
-    
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    
-              </td>
-            </tr>
-          
-      </table>
-    
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    
-      </div>
-    
-              <!--[if mso | IE]>
-              </td>
-              
-          </tr>
-          </table>
-        <![endif]-->
-      </div>
-    
-          <!--[if mso | IE]>
-            </td>
-          
-        </tr>
-      
-                  </table>
-                <![endif]-->
-              </td>
-            </tr>
-          </tbody>
-        </table>
-        
-      </div>
-    
-        
-      <!--[if mso | IE]>
-          </td>
-        </tr>
-      </table>
-      <![endif]-->
-    
-      
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    
-          <!--[if mso | IE]>
-              </td>
-            </tr>
-          
-            <tr>
-              <td
-                 class="" width="600px"
-              >
-          <![endif]-->
-            
-      <table
-         align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
-      >
-        <tbody>
-          <tr>
-            <td>
-              
-        
-      <!--[if mso | IE]>
-      <table
-         align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600"
-      >
-        <tr>
-          <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
-      <![endif]-->
-    
-        
-      <div  style="margin:0px auto;max-width:600px;">
-        
-        <table
-           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
-        >
-          <tbody>
-            <tr>
-              <td
-                 style="direction:ltr;font-size:0px;padding:0;text-align:center;"
-              >
-                <!--[if mso | IE]>
-                  <table role="presentation" border="0" cellpadding="0" cellspacing="0">
-                
-        <tr>
-      
-            <td
-               class="" style="width:600px;"
-            >
-          <![endif]-->
-            
-      <div
-         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0;line-height:0;text-align:left;display:inline-block;width:100%;direction:ltr;"
-      >
-        <!--[if mso | IE]>
-        <table
-           border="0" cellpadding="0" cellspacing="0" role="presentation"
-        >
-          <tr>
-        
-              <td
-                 style="vertical-align:top;width:120px;"
-              >
-              <![endif]-->
-                
-      <div
-         class="mj-column-per-20 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:20%;"
-      >
-        
-      <table
-         border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"
-      >
-        <tbody>
-          <tr>
-            <td  style="vertical-align:top;padding:0;">
-              
-      <table
-         border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%"
-      >
-        
-            <tr>
-              <td
-                 align="left" style="font-size:0px;padding:0;word-break:break-word;"
-              >
-                
-      <table
-         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"
-      >
-        <tbody>
-          <tr>
-            <td  style="width:80px;">
-              
-      <img
-         height="auto" src="https://static.zitadel.ch/flavor-spikes-small-opacity40.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="80"
-      />
-    
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    
-              </td>
-            </tr>
-          
-      </table>
-    
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    
-      </div>
-    
-              <!--[if mso | IE]>
-              </td>
-              
-              <td
-                 style="vertical-align:top;width:360px;"
-              >
-              <![endif]-->
-                
-      <div
-         class="mj-column-per-60 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:60%;"
-      >
-        
-      <table
-         border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"
-      >
-        <tbody>
-          <tr>
-            <td  style="vertical-align:top;padding:0;">
-              
-      <table
-         border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%"
-      >
-        
-            <tr>
-              <td
-                 align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"
-              >
-                
-      <div
-         style="font-family:Lato;font-size:2rem;font-weight:light;line-height:1;text-align:center;color:{{.SecondaryColor}};"
-      >{{.Greeting}}</div>
-    
-              </td>
-            </tr>
-          
-            <tr>
-              <td
-                 align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"
-              >
-                
-      <div
-         style="font-family:Lato;font-size:1.25rem;font-weight:light;line-height:1;text-align:center;color:{{.SecondaryColor}};"
-      >{{.Text}}</div>
-    
-              </td>
-            </tr>
-          
-            <tr>
-              <td
-                 align="center" vertical-align="middle" style="font-size:0px;padding:10px 25px;word-break:break-word;"
-              >
-                
-      <table
-         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;"
-      >
-        <tr>
-          <td
-             align="center" bgcolor="#5282C1" role="presentation" style="border:none;border-radius:3px;cursor:auto;mso-padding-alt:10px 25px;background:#5282C1;" valign="middle"
+            <v:rect  style="mso-width-percent:1000;" xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false">
+            <v:fill  origin="0.5, 0" position="0.5, 0" src="https://static.zitadel.ch/zitadel-logo-outline-light.png" type="tile" />
+            <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
+
+          <table
+             align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:800px;" width="800"
           >
-            <a
-               href="{{.URL}}" style="display:inline-block;background:#5282C1;color:{{.SecondaryColor}};font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:16px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:3px;" target="_blank"
-            >
-              {{.ButtonText}}
-            </a>
-          </td>
-        </tr>
-      </table>
-    
-              </td>
-            </tr>
-          
             <tr>
-              <td
-                 align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"
-              >
-                
-      <div
-         style="font-family:Lato;font-size:13px;line-height:1;text-align:center;color:{{.SecondaryColor}};"
-      ><a href="http://www.caos.ch" style="color:#e91e63; text-decoration: none;" target="_blank"> CAOS AG </a> | Teufener Strasse 19 | CH-9000 St. Gallen</div>
-    
-              </td>
-            </tr>
-          
-      </table>
-    
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    
-      </div>
-    
-              <!--[if mso | IE]>
-              </td>
-              
-              <td
-                 style="vertical-align:top;width:120px;"
-              >
-              <![endif]-->
-                
-      <div
-         class="mj-column-per-20 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:20%;"
-      >
-        
-      <table
-         border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"
-      >
-        <tbody>
-          <tr>
-            <td  style="vertical-align:top;padding:0;">
-              
-      <table
-         border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%"
-      >
-        
-            <tr>
-              <td
-                 align="right" style="font-size:0px;padding:0;word-break:break-word;"
-              >
-                
-      <table
-         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"
-      >
-        <tbody>
-          <tr>
-            <td  style="width:120px;">
-              
-      <img
-         height="auto" src="https://static.zitadel.ch/flavor-spikes-big-opacity40.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="120"
-      />
-    
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    
-              </td>
-            </tr>
-          
-      </table>
-    
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    
-      </div>
-    
-              <!--[if mso | IE]>
-              </td>
-              
-          </tr>
-          </table>
-        <![endif]-->
-      </div>
-    
-          <!--[if mso | IE]>
-            </td>
-          
-        </tr>
-      
-                  </table>
-                <![endif]-->
-              </td>
-            </tr>
-          </tbody>
-        </table>
-        
-      </div>
-    
-        
-      <!--[if mso | IE]>
-          </td>
-        </tr>
-      </table>
-      <![endif]-->
-    
-      
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    
-          <!--[if mso | IE]>
-              </td>
-            </tr>
-          
-            <tr>
-              <td
-                 class="" width="600px"
-              >
+              <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
           <![endif]-->
-            
-      <table
-         align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
-      >
-        <tbody>
-          <tr>
-            <td>
-              
-        
-      <!--[if mso | IE]>
-      <table
-         align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600"
-      >
-        <tr>
-          <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
-      <![endif]-->
-    
-        
-      <div  style="margin:0px auto;max-width:600px;">
-        
-        <table
-           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
-        >
-          <tbody>
-            <tr>
-              <td
-                 style="direction:ltr;font-size:0px;padding:0;text-align:center;"
-              >
+                <div style="margin:0px auto;max-width:800px;">
+                    <div style="line-height:0;font-size:0;">
+                        <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+                            <tbody>
+                            <tr>
+                                <td style="border:0;direction:ltr;font-size:0px;padding:20px 0;padding-left:0;text-align:center;">
+                                    <!--[if mso | IE]>
+                              <table role="presentation" border="0" cellpadding="0" cellspacing="0">
+
+                        <tr>
+                          <td
+                             class="" width="800px"
+                          >
+                      <![endif]-->
+                                    <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+                                        <tbody>
+                                        <tr>
+                                            <td>
+                                                <!--[if mso | IE]>
+                      <table
+                         align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:800px;" width="800"
+                      >
+                        <tr>
+                          <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
+                      <![endif]-->
+                                                <div style="margin:0px auto;max-width:800px;">
+                                                    <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+                                                        <tbody>
+                                                        <tr>
+                                                            <td style="direction:ltr;font-size:0px;padding:0;text-align:center;">
+                                                                <!--[if mso | IE]>
+                                        <table role="presentation" border="0" cellpadding="0" cellspacing="0">
+
+                              <tr>
+
+                                  <td
+                                     class="" style="width:800px;"
+                                  >
+                                <![endif]-->
+                                                                <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0;line-height:0;text-align:left;display:inline-block;width:100%;direction:ltr;">
+                                                                    <!--[if mso | IE]>
+                                <table
+                                   border="0" cellpadding="0" cellspacing="0" role="presentation"
+                                >
+                                  <tr>
+
+                                      <td
+                                         style="vertical-align:top;width:800px;"
+                                      >
+                                      <![endif]-->
+                                                                    <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                                                                        <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+                                                                            <tbody>
+                                                                            <tr>
+                                                                                <td style="vertical-align:top;padding:0;">
+                                                                                    <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%">
+                                                                                        <tr>
+                                                                                            <td align="left" style="font-size:0px;padding:20px 0 50px 20px;word-break:break-word;">
+                                                                                                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
+                                                                                                    <tbody>
+                                                                                                    <tr>
+                                                                                                        <td style="width:150px;"> <img height="auto" src="https://static.zitadel.ch/zitadel-logo-light.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="150"
+                                                                                                            /> </td>
+                                                                                                    </tr>
+                                                                                                    </tbody>
+                                                                                                </table>
+                                                                                            </td>
+                                                                                        </tr>
+                                                                                    </table>
+                                                                                </td>
+                                                                            </tr>
+                                                                            </tbody>
+                                                                        </table>
+                                                                    </div>
+                                                                    <!--[if mso | IE]>
+                                      </td>
+
+                                  </tr>
+                                  </table>
+                                <![endif]-->
+                                                                </div>
+                                                                <!--[if mso | IE]>
+                                  </td>
+
+                              </tr>
+
+                                        </table>
+                                      <![endif]-->
+                                                            </td>
+                                                        </tr>
+                                                        </tbody>
+                                                    </table>
+                                                </div>
+                                                <!--[if mso | IE]>
+                          </td>
+                        </tr>
+                      </table>
+                      <![endif]-->
+                                            </td>
+                                        </tr>
+                                        </tbody>
+                                    </table>
+                                    <!--[if mso | IE]>
+                          </td>
+                        </tr>
+
+                        <tr>
+                          <td
+                             class="" width="800px"
+                          >
+                      <![endif]-->
+                                    <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+                                        <tbody>
+                                        <tr>
+                                            <td>
+                                                <!--[if mso | IE]>
+                      <table
+                         align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:800px;" width="800"
+                      >
+                        <tr>
+                          <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
+                      <![endif]-->
+                                                <div style="margin:0px auto;max-width:800px;">
+                                                    <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+                                                        <tbody>
+                                                        <tr>
+                                                            <td style="direction:ltr;font-size:0px;padding:0;text-align:center;">
+                                                                <!--[if mso | IE]>
+                                        <table role="presentation" border="0" cellpadding="0" cellspacing="0">
+
+                              <tr>
+
+                                  <td
+                                     class="mobile_hidden-outlook" style="vertical-align:top;width:160px;"
+                                  >
+                                <![endif]-->
+                                                                <div class="mj-column-per-20 mj-outlook-group-fix mobile_hidden" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                                                                    <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+                                                                        <tbody>
+                                                                        <tr>
+                                                                            <td style="vertical-align:top;padding:0;">
+                                                                                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%">
+                                                                                    <tr>
+                                                                                        <td align="left" style="font-size:0px;padding:0;word-break:break-word;">
+                                                                                            <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
+                                                                                                <tbody>
+                                                                                                <tr>
+                                                                                                    <td style="width:80px;"> <img height="100" src="https://static.zitadel.ch/flavor-spikes-small-opacity40.png" style="border:0;display:block;outline:none;text-decoration:none;height:100%;width:100%;font-size:13px;"
+                                                                                                                                  width="80" /> </td>
+                                                                                                </tr>
+                                                                                                </tbody>
+                                                                                            </table>
+                                                                                        </td>
+                                                                                    </tr>
+                                                                                </table>
+                                                                            </td>
+                                                                        </tr>
+                                                                        </tbody>
+                                                                    </table>
+                                                                </div>
+                                                                <!--[if mso | IE]>
+                                  </td>
+
+                                  <td
+                                     class="" style="vertical-align:top;width:480px;"
+                                  >
+                                <![endif]-->
+                                                                <div class="mj-column-per-60 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                                                                    <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+                                                                        <tbody>
+                                                                        <tr>
+                                                                            <td style="vertical-align:top;padding:0;">
+                                                                                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%">
+                                                                                    <tr>
+                                                                                        <td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                                                                                            <div style="font-family:Lato, Arial, Helvetica, sans-serif;font-size:2rem;font-weight:200;line-height:1;text-align:center;color:{{.SecondaryColor}};">{{.Greeting}}</div>
+                                                                                        </td>
+                                                                                    </tr>
+                                                                                    <tr>
+                                                                                        <td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                                                                                            <div style="font-family:Lato, Arial, Helvetica, sans-serif;font-size:1rem;font-weight:light;line-height:1.5;text-align:center;color:{{.SecondaryColor}};">{{.Text}}</div>
+                                                                                        </td>
+                                                                                    </tr>
+                                                                                    <tr>
+                                                                                        <td align="center" vertical-align="middle" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                                                                                            <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
+                                                                                                <tr>
+                                                                                                    <td align="center" bgcolor="#5282C1" role="presentation" style="border:none;border-radius:3px;cursor:auto;mso-padding-alt:10px 25px;background:#5282C1;" valign="middle"> <a href="{{.URL}}" style="display:inline-block;background:#5282C1;color:#ffffff;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:16px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:3px;"
+                                                                                                                                                                                                                                                                                 target="_blank">
+                                                                                                            {{.ButtonText}}
+                                                                                                        </a> </td>
+                                                                                                </tr>
+                                                                                            </table>
+                                                                                        </td>
+                                                                                    </tr>
+                                                                                    <tr>
+                                                                                        <td align="center" style="font-size:0px;padding:30px 0;word-break:break-word;">
+                                                                                            <div style="font-family:Lato, Arial, Helvetica, sans-serif;font-size:13px;line-height:1;text-align:center;color:{{.SecondaryColor}};"><a href="http://www.caos.ch" style="color:#e91e63; text-decoration: none;" target="_blank"> CAOS AG </a> | Teufener Strasse 19 | CH-9000 St. Gallen</div>
+                                                                                        </td>
+                                                                                    </tr>
+                                                                                </table>
+                                                                            </td>
+                                                                        </tr>
+                                                                        </tbody>
+                                                                    </table>
+                                                                </div>
+                                                                <!--[if mso | IE]>
+                                  </td>
+
+                                  <td
+                                     class="mobile_hidden-outlook" style="vertical-align:top;width:160px;"
+                                  >
+                                <![endif]-->
+                                                                <div class="mj-column-per-20 mj-outlook-group-fix mobile_hidden" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                                                                    <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+                                                                        <tbody>
+                                                                        <tr>
+                                                                            <td style="vertical-align:top;padding:0;">
+                                                                                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%">
+                                                                                    <tr>
+                                                                                        <td align="right" style="font-size:0px;padding:0;word-break:break-word;">
+                                                                                            <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
+                                                                                                <tbody>
+                                                                                                <tr>
+                                                                                                    <td style="width:160px;"> <img height="auto" src="https://static.zitadel.ch/flavor-spikes-big-opacity40.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;"
+                                                                                                                                   width="160" /> </td>
+                                                                                                </tr>
+                                                                                                </tbody>
+                                                                                            </table>
+                                                                                        </td>
+                                                                                    </tr>
+                                                                                </table>
+                                                                            </td>
+                                                                        </tr>
+                                                                        </tbody>
+                                                                    </table>
+                                                                </div>
+                                                                <!--[if mso | IE]>
+                                  </td>
+
+                              </tr>
+
+                                        </table>
+                                      <![endif]-->
+                                                            </td>
+                                                        </tr>
+                                                        </tbody>
+                                                    </table>
+                                                </div>
+                                                <!--[if mso | IE]>
+                          </td>
+                        </tr>
+                      </table>
+                      <![endif]-->
+                                            </td>
+                                        </tr>
+                                        </tbody>
+                                    </table>
+                                    <!--[if mso | IE]>
+                          </td>
+                        </tr>
+
+                        <tr>
+                          <td
+                             class="" width="800px"
+                          >
+                      <![endif]-->
+                                    <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+                                        <tbody>
+                                        <tr>
+                                            <td>
+                                                <!--[if mso | IE]>
+                      <table
+                         align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:800px;" width="800"
+                      >
+                        <tr>
+                          <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
+                      <![endif]-->
+                                                <div style="margin:0px auto;max-width:800px;">
+                                                    <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+                                                        <tbody>
+                                                        <tr>
+                                                            <td style="direction:ltr;font-size:0px;padding:0;text-align:center;">
+                                                                <!--[if mso | IE]>
+                                        <table role="presentation" border="0" cellpadding="0" cellspacing="0">
+
+                              <tr>
+
+                                  <td
+                                     class="" style="width:800px;"
+                                  >
+                                <![endif]-->
+                                                                <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0;line-height:0;text-align:left;display:inline-block;width:100%;direction:ltr;">
+                                                                    <!--[if mso | IE]>
+                                <table
+                                   border="0" cellpadding="0" cellspacing="0" role="presentation"
+                                >
+                                  <tr>
+
+                                      <td
+                                         style="vertical-align:top;width:800px;"
+                                      >
+                                      <![endif]-->
+                                                                    <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                                                                        <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+                                                                            <tbody>
+                                                                            <tr>
+                                                                                <td style="vertical-align:top;padding:20px;">
+                                                                                    <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%">
+                                                                                        <tr>
+                                                                                            <td align="right" style="font-size:0px;padding:0;word-break:break-word;">
+                                                                                                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
+                                                                                                    <tbody>
+                                                                                                    <tr>
+                                                                                                        <td style="width:65px;"> <img height="auto" src="https://static.zitadel.ch/logo_whitefont_transparentbg.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;"
+                                                                                                                                      width="65" /> </td>
+                                                                                                    </tr>
+                                                                                                    </tbody>
+                                                                                                </table>
+                                                                                            </td>
+                                                                                        </tr>
+                                                                                    </table>
+                                                                                </td>
+                                                                            </tr>
+                                                                            </tbody>
+                                                                        </table>
+                                                                    </div>
+                                                                    <!--[if mso | IE]>
+                                      </td>
+
+                                  </tr>
+                                  </table>
+                                <![endif]-->
+                                                                </div>
+                                                                <!--[if mso | IE]>
+                                  </td>
+
+                              </tr>
+
+                                        </table>
+                                      <![endif]-->
+                                                            </td>
+                                                        </tr>
+                                                        </tbody>
+                                                    </table>
+                                                </div>
+                                                <!--[if mso | IE]>
+                          </td>
+                        </tr>
+                      </table>
+                      <![endif]-->
+                                            </td>
+                                        </tr>
+                                        </tbody>
+                                    </table>
+                                    <!--[if mso | IE]>
+                          </td>
+                        </tr>
+
+                              </table>
+                            <![endif]-->
+                                </td>
+                            </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
                 <!--[if mso | IE]>
-                  <table role="presentation" border="0" cellpadding="0" cellspacing="0">
-                
-        <tr>
-      
-            <td
-               class="" style="width:600px;"
-            >
-          <![endif]-->
-            
-      <div
-         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0;line-height:0;text-align:left;display:inline-block;width:100%;direction:ltr;"
-      >
-        <!--[if mso | IE]>
-        <table
-           border="0" cellpadding="0" cellspacing="0" role="presentation"
-        >
-          <tr>
-        
-              <td
-                 style="vertical-align:top;width:600px;"
-              >
-              <![endif]-->
-                
-      <div
-         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
-      >
-        
-      <table
-         border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"
-      >
-        <tbody>
-          <tr>
-            <td  style="vertical-align:top;padding:0;">
-              
-      <table
-         border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%"
-      >
-        
-            <tr>
-              <td
-                 align="right" style="font-size:0px;padding:0;padding-right:20px;word-break:break-word;"
-              >
-                
-      <table
-         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"
-      >
-        <tbody>
-          <tr>
-            <td  style="width:65px;">
-              
-      <img
-         height="auto" src="https://static.zitadel.ch/logo_whitefont_transparentbg.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="65"
-      />
-    
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    
               </td>
             </tr>
-          
-      </table>
-    
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    
-      </div>
-    
-              <!--[if mso | IE]>
-              </td>
-              
-          </tr>
           </table>
+
+            </v:textbox>
+          </v:rect>
         <![endif]-->
-      </div>
-    
-          <!--[if mso | IE]>
             </td>
-          
         </tr>
-      
-                  </table>
-                <![endif]-->
-              </td>
-            </tr>
-          </tbody>
-        </table>
-        
-      </div>
-    
-        
-      <!--[if mso | IE]>
-          </td>
-        </tr>
-      </table>
-      <![endif]-->
-    
-      
-            </td>
-          </tr>
         </tbody>
-      </table>
-    
-          <!--[if mso | IE]>
-              </td>
-            </tr>
-          
-                  </table>
-                <![endif]-->
-              </td>
-            </tr>
-          </tbody>
-        </table>
-        </div>
-      </div>
-    
-        
-      <!--[if mso | IE]>
-          </td>
-        </tr>
-      </table>
-      
-        </v:textbox>
-      </v:rect>
-    <![endif]-->
-    
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    
-      </div>
-    
-      </body>
-    </html>
-  
\ No newline at end of file
+    </table>
+</div>
+</body>
+
+</html>
\ No newline at end of file