Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

White lines appear in Gmail Mobile App on iPhone 13/14 #131

Open
ashleighalley-CNB opened this issue Jul 20, 2023 · 3 comments
Open

White lines appear in Gmail Mobile App on iPhone 13/14 #131

ashleighalley-CNB opened this issue Jul 20, 2023 · 3 comments
Labels
Gmail Webmail, iOS and Android apps

Comments

@ashleighalley-CNB
Copy link

ashleighalley-CNB commented Jul 20, 2023 •
edited
Loading

Hello,

I hoping to get some help with this issue since I am unable to replicate this issue myself and I am using an iPhone 14. On my devices and in Litmus, the white lines are not appearing, but my coworkers see what the screenshot shows.

This email has the blend-mode fixes applied, as well as a YahooAOL fix applied to the areas that are showing the white lines, this is to keep the background color the correct shade of blue, while keeping the text white in Dark Mode in the Gmail Mobile App.

Is there a fast fix to clear the white lines that are showing? Thank you in advance.

IMG_2272
@hteumeuleu hteumeuleu added the Gmail Webmail, iOS and Android apps label Jul 23, 2023
@hteumeuleu
Copy link
Owner

My impression is those lines come from the text-decoration property. Could you share your code?

@ashleighalley-CNB
Copy link
Author

ashleighalley-CNB commented Jul 23, 2023 •
edited
Loading

Here is the code of the entire email. Thank you in advance for the help here.

`

<title>Company Name</title> 
    <!--Help character display properly.-->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--Set the initial scale of the email.-->
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <!--Force Outlook clients to render with a better MS engine.-->
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <!--Help prevent blue links and autolinking-->
    <meta name="format-detection" content="telephone=no, date=no, address=no, email=no">
    <!--prevent Apple from reformatting and zooming messages.-->
    <meta name="x-apple-disable-message-reformatting">

    <!--target dark mode-->
    <meta name="color-scheme" content="light dark">
    <meta name="supported-color-schemes" content="light dark only">

    <!-- Allow for better image rendering on Windows hi-DPI displays. -->
    <!--[if mso]>
    <noscript>
        <xml>
          <o:OfficeDocumentSettings>
            <o:AllowPNG/>
            <o:PixelsPerInch>96</o:PixelsPerInch>
          </o:OfficeDocumentSettings>
        </xml>
    </noscript>
    <![endif]-->
    
    <!--to support dark mode meta tags-->
    <style type="text/css" media="all">
        :root {
          color-scheme: light dark;
          supported-color-schemes: light dark;
        }
     </style>
     
    <!--webfont code goes here-->
      <!--[if (gte mso 9)|(IE)]><!-->
      <!--webfont <link /> goes here-->
      <style>
        /*Web font over ride goes here
         h1, h2, h3, h4, h5, p, a, img, span, ul, ol, li { font-family: 'webfont name', Arial, Helvetica, sans-serif !important; } */
      </style>
    <!--<![endif]-->
    
    
    
    <style type="text/css">
        
        /* /\\//\\//\\//\\/ RESET STYLES /\\//\\//\\//\\/ */
        body, .body{
            height: 100% !important;
            margin: 0 auto !important;
            padding: 0 !important;
            width: 100% !important;
            -webkit-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
            -webkit-font-smoothing: antialiased;
            word-spacing: normal;
        }
    
        img{
            border:0 none;
            outline:none;
            text-decoration:none;
            line-height:100%;
            display:block;
            -ms-interpolation-mode:bicubic;
        }
    
        a img{
            border:0 none;
        }
    
        table, td{
        	border-collapse: collapse !important;
            border-collapse: collapse !important;
            mso-table-lspace: 0pt;
            mso-table-rspace: 0pt;
            -webkit-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
        }
        /* GMAIL BLUE LINKS */
        u + #body-fix a {
          color: inherit;
          text-decoration: none;
          font-size: inherit;
          font-family: inherit;
          font-weight: inherit;
          line-height: inherit;
        }
        
        /* GMAIL DARKMODE FIX */
        
        u + .body .screen {
        	background:#000000 !important; 
            mix-blend-mode:screen !important;
        }
        
        u + .body .difference {
        	background:#000000 !important; 
            mix-blend-mode:difference !important;
        }
        
        u + .body .white_text, u + .body .headline_text {
        	color:#fff !important;
        }
        
        u ~ .show_line {
                display:block !important;
                overflow:visible !important; 
                visibility:visible !important;
            }
        
        /* SAMSUNG MAIL BLUE LINKS */
        #MessageViewBody a {
          color: inherit;
          text-decoration: none;
          font-size: inherit;
          font-family: inherit;
          font-weight: inherit;
          line-height: inherit;
        }
        
        /*YAHOO-AOL*/
        .& .yahooAOLhide {
        	display:none!important;
        }
        
        .& .yahooAOLshow {
        	display:block!important;
        }
        
        /* /\\//\\//\\//\\/ CLIENT SPECIFIC STYLES /\\//\\//\\//\\/ */
        .ExternalClass{
            width:100%;
        }
        
        .ExternalClass,
        .ExternalClass p,
        .ExternalClass span,
        .ExternalClass font,
        .ExternalClass td,
        .ExternalClass div{
            line-height: 100%;
        }
        
        #outlook a{
            padding:0;
        }
        
        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;
        }
        
        table, td{
            mso-table-lspace:0pt;
            mso-table-rspace:0pt;
            -webkit-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
        }
        
        a {
        	-webkit-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
        }
        
        /* /\\//\\//\\//\\/ GENERAL RESPONSIVE /\\//\\//\\//\\/ */
        @media screen and (max-width: 600px){
            
            *[class=resize],
            *[class=dark_resize],
            *[class=dark_resize2],
            *[class=dark_resize3],
            *[class=preheader]{
                width: 100% !important;
                max-width: 100% !important;
            }
            
            *[class=resize],
            *[class=dark_resize],
            *[class=dark_resize2]{
            	border-radius: 0 !important;
            }
            
            *[class=dark_resize3] {
            	border-radius: 10px !important;
            }
            
            *[class=padding_off] {
            	padding-top:0 !important;
                padding-bottom:0 !important;
                padding-left:0 !important;
                padding-right:0 !important;
            }
            
            *[class=resize],
            *[class=dark_resize],
            *[class=dark_resize2]
            *[class=dark_resize3],
            *[class=preheader]{
                min-width: 100% !important;
            }
            
            *[class=left],
            *[class=right]{
                width: 48% !important;
                min-width: 48% !important;
            }
            
            *[class=cta_left],
            *[class=cta_right]{
                width: 100% !important;
                min-width: 100% !important;
            }
            
            *[class=jobCard]{
                width: 40% !important;
                min-width: 40% !important;
            }
            
            *[class=jobCard_cta]{
                width: 40% !important;
                min-width: 40% !important;
            }
            
            *[class=col]{
                width: 33% !important;
                min-width: 33% !important;
            }
            
            *[class=show_line],  {
            	display:block !important;
                overflow:visible !important; 
                visibility:visible !important;
            }
            
        }
        /* /\\//\\//\\//\\/ TAB PORTRAIT /\\//\\//\\//\\/ */
        @media only screen and (max-width: 585px){
        	*[class=jobCard], 
            *[class=jobCard_cta], 
            *[class=col]{
                width: 100% !important;
                min-width: 100% !important;
                float: none !important;
            }
            
            *[class=jc_hide] {
                display: none !important;
                visibility: hidden !important;
                overflow: hidden !important;
                width: 0px !important;
                height: 0px !important;
            }
            
            *[class=hide]{
            	display: none !important;
                visibility: hidden !important;
                overflow: hidden !important;
                width: 0px !important;
                height: 0px !important;
            }
         
            *[class=show] {
            	display:block !important;
                overflow:visible !important; 
                width:60px !important; 
                max-height:60px !important; 
                max-width:60px !important;
                visibility:visible !important;
                margin:0 auto !important;
            }
            
            *[class=headline_txt]{
                font-size:35px !important;
                line-height: 40px !important;
            }
            *[class=cta_resize]{
            	border-radius:10px !important;
                width:80% !important;
                max-width:80% !important;
            }
            *[class=cta_resize2]{
            	border-radius:10px !important;
                width:90% !important;
                max-width:90% !important;
            }
            
        }
        /* /\\//\\//\\//\\/ MOBILE PORTRAIT /\\//\\//\\//\\/ */
        @media only screen and (max-width: 414px){
            
            *[class=left],
            *[class=right], 
            *[class=col], 
            *[class=cta_left],
            *[class=cta_right],
            *[class=jobCard], 
            *[class=jobCard_cta]{
                width: 100% !important;
                min-width: 100% !important;
                float: none !important;
            }
            
            *[class=left], 
            *[class=col], 
            *[class=cta_left]{
                margin-bottom: 15px !important;
            }
            
            *[class=hide]{
                display: none !important;
            }
            
            *[class=hide],
            *[class=preheader]{
                visibility: hidden !important;
                overflow: hidden !important;
                width: 0px !important;
                height: 0px !important;
            }
         
            *[class=show] {
            	display:block !important;
                overflow:visible !important; 
                width:60px !important; 
                max-height:60px !important; 
                max-width:60px !important;
                visibility:visible !important;
            }
            
            *[class=mobile_padding],
            *[class=mobile_hidden_padding]{
                width: 10% !important;
            }
            
            *[class=mobile_center]{
            	text-align: center !important;
                margin: 0 auto !important;
            }
            
            *[class=headline_txt], .headline_txt{
                font-size:28px !important;
                line-height: 28px !important;
                min-width:300px !important;
            }
            
            *[class=cta_resize], *[class=cta_resize2] {
            	border-radius:10px !important;
                width:100% !important;
                max-width:100% !important;
            }

        }
        
        /* /\\//\\//\\//\\/ FOOTER IMAGE FIX /\\//\\//\\//\\/ */
        @media only screen and (max-width: 373px){
            *[class=footer_img_wrapper]{
                width: 100% !important;
            }
                            
            *[class=footer_img]{
                width: 95% !important;
                height: auto !important;
            }
            
            *[class=dark_img]{
                display:none !important; 
                overflow:hidden !important; 
                width:0px !important; 
                max-height:0px !important; 
                max-width:0px !important; 
                line-height:0px !important; 
                visibility:hidden !important;  
              }
        }
        
        /* /\\//\\//\\//\\/ DARK MODE /\\//\\//\\//\\/ */
        @media (prefers-color-scheme: dark) {
        	/* Shows Dark Mode-Only Content, Like Images */
              *[class=dark_img] {
                display: block !important;
                width: auto !important;
                overflow: visible !important;
                float: none !important;
                max-height: inherit !important;
                max-width: inherit !important;
                line-height: auto !important;
                margin-top: 0px !important;
                visibility: inherit !important;
              }

              /* Hides Light Mode-Only Content, Like Images */
              *[class=light_img]{
                display: none !important;
                visibility: none !important;  
              }

              /* Custom Dark Mode Background Color */
              .darkmode{
                background-color: #000000 !important;
              }
              .darkmode2, .dark_resize {
                background-color: #1f1f1f !important;
              }
              .darkmode3, .dark_resize2, .dark_resize3 {
                background-color: #020203 !important;
              }

              /* Custom Dark Mode Font Colors */
              h1,  h1 a, h2, h2 a, h3, h3 a, h4, h4 a, span, li, td {
                color: #fdfdfd !important;
              }
            
            *[class=dark_border] { border-right: 2px solid #ffffff !important; }
            *[class=dark_border2] { border-right: 2px solid #5c5c5c !important; }
            *[class=dark_divider] {border-bottom:1px solid #414141 !important;}
            
            *[class=dark_cta1] {
                border-radius:10px !important;
                background-color: #009CF0 !important;
            }
            *[class=dark_cta2] {
            	border: 2px solid #009CF0 !important;
                border-radius:10px !important;
                color:#ffffff !important;
            }
            *[class=hide_border] {
            	border:none !important;
            }
          
              /* Custom Dark Mode Text Link Color */
              .link { color: #3ebbff !important; } 

              .cta_copy { color: #ffffff !important; } 

              .footer a.link { color: #fdfdfd !important; }
            }

            /* Copy dark mode styles for android support */
            /* Shows Dark Mode-Only Content, Like Images */
            [data-ogsc] .dark_img,  [data-ogsb] .dark_img {
              display: block !important;
              width: auto !important;
              overflow: visible !important;
              float: none !important;
              max-height: inherit !important;
              max-width: inherit !important;
              line-height: auto !important;
              margin-top: 0px !important;
              visibility: inherit !important;
            }

            /* Hides Light Mode-Only Content, Like Images */
            [data-ogsc] .light_img, [data-ogsb] .light_img  {
              display: none !important;
            }

            /* Custom Dark Mode Background Color */
            
            [data-ogsb] .darkmode {
              background-color: #100E11 !important;
            }
            [data-ogsb] .darkmode2, [data-ogsb] .dark_resize2, [data-ogsb] .dark_resize3 {
              background-color: #020203 !important;
            }
            [data-ogsb] .darkmode3, [data-ogsb] .dark_resize3 {
              background-color: #1b181d !important;
            }

            /* Custom Dark Mode Font Colors */
            [data-ogsc] h1, [data-ogsc] h1 a, [data-ogsc] h2, [data-ogsc] h3, [data-ogsc] p, [data-ogsc] span, [data-ogsc] a, [data-ogsc] li {
              color: #fdfdfd !important;
            }
        
        
            [data-ogsc] .dark_border { 
                border-right: 2px solid #ffffff !important;
            }
        
            [data-ogsc] .dark_border2 { 
                border-right: 2px solid #5c5c5c !important; }
        
        
           [data-ogsc] .dark_cta1 {
                border-radius:10px !important;
                background-color: #009CF0 !important;
            }
        
            [data-ogsc] .dark_cta2  {
            	border: 2px solid #009CF0 !important;
                border-radius:10px !important;
                color:#ffffff !important;
            }
            
            [data-ogsc] .hide_border {
            	border:none !important;
            }

            /* Custom Dark Mode Text Link Color */
            [data-ogsc] .link { color: #009CF0 !important; }
            
            [data-ogsc] .cta_copy { color: #ffffff !important; }

            [data-ogsc] .footer a.link { color: #fdfdfd !important; }
        }
        
    </style>
*|MC_PREVIEW_TEXT|* 
<body class="body" id="body-fix" bgcolor="#ffffff" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%; background-color:#ffffff;">

<!-- START EMAIL WRAPPER -->
<table class="darkmode" width="100%" cellspacing="0" cellpadding="0" border="0" align="center" role="presentation" bgcolor="#f0f0f0" style="margin:0 auto; padding:0; border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
    <!-- Header Start -->
    <tr>
        <td class="padding_off" valign="top" style="border-collapse: collapse; padding-top:30px;padding-left:10px;padding-right:10px;">
            <!-- START MOD -->
            <table class="dark_resize" width="600" cellpadding="0" cellspacing="0" border="0" align="center" role="presentation" style="margin: 0 auto;padding: 0;width: 600px;max-width: 600px;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; background-color:#ffffff; border-radius: 10px 10px 0 0;">
                <tr>
                    <td colspan="3" style="height: 10px;line-height: 10px;font-size: 10px;border-collapse: collapse;mso-line-height-rule: exactly;margin:0; padding:0;">&nbsp;</td>
                </tr>
                <!--Dynamic Header Logo Start-->
                <tr>
                    <td valign="top" style="width: 20px;border-collapse: collapse;margin:0; padding:0;">&nbsp;</td>
                    <td valign="top" align="left" style="border-collapse: collapse; width:570px;margin:0; padding:0;">
                        <a id="logo" href="*|LINK|*" target="_blank" style="text-decoration: none; color: #FFFFFF; display: block; border:none;margin:0; padding:0;">
                            <img class="mobile_center" src="#" height="80" width="auto" alt="Company Logo" style="display:block; border: 0 none;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; color: #000000; font-family: Arial, sans-serif; text-align:center; font-weight:normal; font-size:14px; background-color:#ffffff; border-radius:10px; max-width:240px;">
                        </a>
                    </td>
                    <td valign="top" style="width: 20px;border-collapse: collapse;margin:0; padding:0;">&nbsp;</td>
                </tr>
                <!-- Dynamic Header Logo End-->
                <tr>
                    <td class="dark_divider" colspan="3" style="height: 10px;line-height: 10px;font-size: 10px;border-collapse: collapse; border-bottom: 1px solid #f5f5f5;mso-line-height-rule: exactly;margin:0; padding:0;">&nbsp;</td>
                </tr>
            </table>
            <!-- END MOD -->
         </td>
    </tr>
    <!-- Header End -->
    <!-- Body Start -->
    <!-- Job Card Mod Start -->
    <tr>
        <td class="padding_off" valign="top" style="border-collapse: collapse; padding-left:10px;padding-right:10px;margin:0;">
            <!-- START MOD -->
            <table class="dark_resize" cellpadding="0" cellspacing="0" border="0" width="600" align="center" role="presentation" style="width: 600px;max-width: 600px;margin: 0 auto;padding: 0;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;background-color:#1f4484; background-image:linear-gradient(#1f4484, #1f4484); color:#ffffff;">
                <tr>
                    <td valign="top" colspan="3" style="height: 30px;line-height: 30px;font-size: 30px;border-collapse: collapse;mso-line-height-rule: exactly;margin:0; padding:0;">&nbsp;</td>
                </tr>
                <tr>
                    <td rowspan="2" class="mobile_padding" valign="top" style="width: 30px;border-collapse: collapse;margin:0; padding:0;">&nbsp;</td>
                    <td valign="top" style="font-family: Arial, Helvetica, sans-serif;font-size: 14px;border-collapse: collapse; line-height:24px; font-size:16px;margin:0;padding:0;">
                        <!--Section 1 Headline Start-->
                        <table class="resize" cellpadding="0" cellspacing="0" border="0" width="540" role="presentation" style="width: 460px;max-width: 460px;margin: 0;padding: 0;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; color:#ffffff !important;">
                            <tr>
                                <td valign="top" style="border-collapse: collapse;padding-right:10px; text-decoration: none; margin:0; padding:0; color:#ffffff !important;">
                                    <!--[if !mso]><! -->
                                    <h1 class="yahooAOLhide" style="margin:0; padding:0; font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 2em;line-height:50px;font-weight: bold;color: #ffffff;mso-hide:all;outline:none;">
                                        <span class="screen" style="background:#000000; mix-blend-mode:screen;margin:0; padding:0;outline:none;">
                                         <span class="difference" style="background:#000000; mix-blend-mode:difference;margin:0; padding:0;outline:none;">
                                          Headline
                                         </span>
                                        </span>
                                    </h1>
                                    <!--<![endif]-->
                                    <!--[if mso]>
                                    <h1 style="margin:0; padding:0; font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 2em;line-height:50px;font-weight: bold;color: #ffffff;">
                                        Headline
                                    </h1>
                                    <![endif]-->
                                    <h1 class="yahooAOLshow" style="margin:0; padding:0; font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 2em;line-height:50px;font-weight: bold;color: #ffffff;mso-hide:all;display:none;">
                                        Headline
                                    </h1>
                                </td>
                            </tr>
                        </table>
                        <!--Section 1 Headline End-->
                        <!--Section 1 Body Copy Start-->
                        <table class="resize" width="540" cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 460px;max-width: 460px;margin: 0;padding: 0;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
                             <tr>
                                <td valign="top" style="height: 20px;line-height: 20px;font-size: 20px;border-collapse: collapse;mso-line-height-rule: exactly; margin:0;padding:0;">&nbsp;</td>
                            </tr>
                            <tr>
                                <td valign="top" style=";border-collapse: collapse; margin:0; padding:0;">
                                    <!--[if !mso]><! -->
                                    <p class="yahooAOLhide" style="font-family: Arial, Helvetica, sans-serif;font-size: 16px;border-collapse: collapse; line-height:24px; font-size:16px;color:#ffffff;margin:0; padding:0;">
                                        <span class="screen" style="background:#000; mix-blend-mode:screen; margin:0; padding:0;">
                                         <span class="difference" style="background:#000; mix-blend-mode:difference;margin:0; padding:0;">
                                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                                          </span> 
                                        </span>    
                                    </p>
                                    <!--<![endif]-->
                                    <!--[if mso]>
                                    <p style="font-family: Arial, Helvetica, sans-serif;font-size: 16px;border-collapse: collapse; line-height:24px; font-size:16px;color:#ffffff;margin:0; padding:0;">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.   
                                    </p>
                                    <![endif]-->
                                    <p class="yahooAOLshow" style="font-family: Arial, Helvetica, sans-serif;font-size: 16px;border-collapse: collapse; line-height:24px; font-size:16px;color:#ffffff;margin:0; padding:0;mso-hide:all;display:none;">
                                         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.   
                                    </p>
                                </td>
                            </tr>
                            <tr>
                                <td valign="top" style="height: 30px;line-height: 30px;font-size: 30px;border-collapse: collapse;mso-line-height-rule: exactly;margin:0;padding:0;">&nbsp;</td>
                            </tr>
                        </table>
                        <!--Section 1 Body Copy End-->
                        <!--Job Card Start-->
                        <!--Job Card Border Start -->
                        <table class="dark_resize3" width="539" cellpadding="0" cellspacing="0" border="0" align="center" role="presentation" style="width: 539px;border-radius: 10px; border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; margin:0; padding:0; background-color:#fdfeff;">
                            <tr>
                                <td rowspan="3" style="width:20px;line-height: 20px;font-size: 20px;border-collapse: collapse;max-width: 20px;max-width: 20px;min-width:20px;mso-line-height-rule: exactly;margin:0; padding:0;">&nbsp;</td>
                                <td style=" width:499px;height: 30px;line-height: 30px;font-size: 30px;border-collapse: collapse;mso-line-height-rule: exactly;margin:0; padding:0;">&nbsp;</td>
                                <td rowspan="3" style="width:20px;line-height: 20px;font-size: 20px;border-collapse: collapse;max-width: 20px;min-width:20px;mso-line-height-rule: exactly;margin:0; padding:0;">&nbsp;</td>
                            </tr>
                            <tr>
                                <td valign="top" width="499" height="110" align="left" style="border-collapse: collapse;width:499px; height:110px; margin:0;padding:0;">
                                    <!-- Job Icon and Title Start --> 
                                    <table class="jobCard" width="300" height="110" cellpadding="0" cellspacing="0" border="0" role="presentation" align="left" style="width: 300px;max-width: 300px;border-radius:10px;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; float:left; margin:0; padding:0;">
                                       <tr>
                                            <td valign="top" width="300" height="110" style="border-collapse: collapse; width:300px; height:110px;margin:0;padding:0;">
                                                <table class="resize" width="300" height="110" cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 300px;max-width: 300px; height: 110px;min-height: 110px;max-height: 110px; border-radius:10px;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; margin:0; padding:0;">
                                                    <tr>
                                                        <td valign="middle" width="68" height="110" style="border-collapse: collapse; margin:0; padding:0;">
                                                            <!--Dynamic Job Card Logo Start-->
                                                            <table class="resize" width="68" height="110" cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 68px;min-width: 68px;max-width: 68px; height: 110px;min-height: 110px;max-height: 110px; border-radius:10px;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; margin:0; padding:0;">
                                                                <tr>
                                                                    <td style="height: 20px;line-height: 20px;font-size: 20px;border-collapse: collapse; margin:0;padding:0;">&nbsp;</td>
                                                                </tr>
                                                                <tr>
                                                                    <td width="68" height="68" valign="middle" style="width:68px;font-family: Arial, Helvetica, sans-serif;font-size: 16px;font-weight: bold;color: #000000;text-align: center;border-collapse: collapse; margin:0 auto; padding:0; max-width:68px; min-width:68px; max-height:68px; min-height:68px;border-radius:10px;">
                                                                        <div style="width:68px; height:68px; border:2px solid #e6e6e3; border-radius:10px; vertical-align: middle; display:flex; align-items:center; justify-content: center;margin:0 auto; background-color:#ffffff;">
                                                                        <img src="#" width="68" height="auto" alt="Company Logo" style="display:block;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; color: #000000; font-family: Arial, sans-serif; text-align:center; font-weight:normal; font-size:14px; margin:auto; padding:auto 0;max-width:100%;background-color:#ffffff; border-radius:8px;">
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td style="height: 20px;line-height: 20px;font-size: 20px;border-collapse: collapse; margin:0;padding:0;">&nbsp;</td>
                                                                </tr>
                                                            </table>
                                                            <!--Dynamic Job Card Logo End-->
                                                        </td>
                                                        <td width="15" height="110" style="width: 15px; height:110px;border-collapse: collapse;margin:0; padding:0; max-width: 15px;min-width:15px;">&nbsp;</td>
                                                        <td valign="middle" width="185" height="110" style="margin:0; padding:0; border-collapse: collapse;max-width: 185px; overflow:hidden;">
                                                            <h3 style="font-family: Arial, Helvetica, sans-serif;font-size: 16px;font-weight:normal;color: #B32026;text-align: left; line-height:24px;margin:0; padding:0; color: #B32026; ">
                                                                <strong>*|COMPANYNAM|*</strong><br>*|JOBTITLE|*
                                                            </h3>
                                                        </td>
                                                        <td class="hide" width="8" height="110" style="width: 8px; height:110px; border-collapse: collapse; margin:0; padding:0;max-width: 8px;">&nbsp;</td>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr> 
                                    </table>
                                    <!-- Job Icon and Title End --> 
                                    <!-- Job Card CTA Section Start --> 
                                    <table class="jobCard_cta" cellpadding="0" cellspacing="0" border="0" role="presentation" align="center" style="width: 192px;max-width: 100%;margin: 0 auto;padding: 0;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
                                         <!--[if !mso]><! -->
                                        <tr>
                                            <td class="show" style="height: 20px;line-height: 20px;font-size: 20px;border-collapse: collapse;display:none; margin:0;padding:0;mso-line-height-rule: exactly;">&nbsp;</td>
                                        </tr>
                                         <!--<![endif]-->
                                        <tr>
                                            <td valign="top" style="border-collapse: collapse; margin:0;padding:0;">
                                                <!-- CTA 1 Start --> 
                                                <table class="cta_resize2" cellpadding="0" cellspacing="0" border="0" align="center" role="presentation" style="width: 100%;max-width: 192px; min-width: 192px;background-color: #009CF0;border-radius: 10px;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; margin:0 auto;padding:0;">
                                                    <tr>
                                                        <td valign="top" style="border-collapse: collapse;margin:0;padding:0;">
                                                            <div class="dark_cta1" valign="top" width="192" style="font-family: Arial, Helvetica, sans-serif;font-size: 16px;font-weight: bold;color: #FFFFFF;text-align: center;padding-top: 10px;padding-bottom: 10px; padding-left:10px; padding-right:10px;margin:0;border-collapse: collapse; background-color:#009CF0;border-radius:10px;border:1px solid #009CF0;">
                                                        <a class="cta_copy" href="*|DynApplicationLink|*" target="_blank" style="text-decoration: none; color: #FFFFFF; display: block;margin:0; padding:0;">
                                                            <!--[if !mso]><! -->
                                                            <span class="yahooAOLhide"  style="margin:0; padding:0;">
                                                                <span class="screen" style="background:#000; mix-blend-mode:screen;margin:0; padding:0;">
                                            	                    <span class="difference" style="background:#000; mix-blend-mode:difference;margin:0; padding:0;">
                                                                         Call to Action 1
                                                                    </span>
                                                                </span>
                                                            </span>
                                                            <!--<![endif]-->
                                                            <!--[if mso]>
                                                                 Call to Action 1
                                                            <![endif]-->
                                                            <span class="yahooAOLshow"  style="margin:0; padding:0;mso-hide:all;display:none;">
                                                                  Call to Action 1
                                                            </span>
                                                        </a>
                                                    </div>
                                                            
                                                        </td>
                                                    </tr>
                                                </table>
                                                <!-- CTA End --> 
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="3" style="height: 20px;line-height: 20px;font-size: 20px;border-collapse: collapse;margin:0; padding:0;mso-line-height-rule: exactly;">&nbsp;</td>
                                        </tr>
                                        <tr>
                                            <td valign="top" style="border-collapse: collapse;margin:0;padding:0;">
                                               <!-- CTA 2 Start --> 
                                                <table class="cta_resize2" cellpadding="0" cellspacing="0" border="0" align="center" role="presentation" style="width: 100%;max-width: 192px; min-width: 192px;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; margin:0 auto; padding"0;>
                                                    <tr>
                                                        <!--[if !mso]><! -->
                                                        <td valign="top" width="192" style="border-collapse: collapse;margin:0;padding:0;">
                                                            <div class="dark_cta2" valign="top" style="font-family: Arial, Helvetica, sans-serif;font-size: 16px;font-weight: bold;text-align: center;padding-top: 10px;padding-bottom: 10px;padding-left:10px; padding-right:10px;mso-padding-alt:10px; border-collapse: collapse; border: 1px solid #009CF0;mso-border-bottom-alt: 1px solid #009CF0; border-radius: 10px;">
                                                                <a class="cta_copy" href="tel:+*|DynamicPhoneNumber|*" title="Call to Action 2" style="text-decoration: none; display: block; color:#1F4484;">
                                                                    Call to Action 2
                                                                </a>
                                                            </div>
                                                        </td>
                                                         <!--<![endif]-->
                                                         <!--[if mso]>
                                                         <td class="dark_cta2" valign="top" width="180" style="border-collapse: collapse; font-family: Arial, Helvetica, sans-serif;font-size: 16px;font-weight: bold;text-align: center;padding-top: 10px;padding-bottom: 10px;padding-left:10px; padding-right:10px;mso-padding-alt:10px; border-collapse: collapse; border: 1px solid #009CF0;mso-border-bottom-alt: 1px solid #009CF0; border-radius: 10px;">
                                                            <a class="cta_copy" href="tel:*|URL:PHONEAPP|*" title=Call to Action 2" style="text-decoration: none; display: block; color:#1F4484;">
                                                                Call to Action 2
                                                            </a>
                                                        </td>           
                                                        <![endif]-->
                                                    </tr>
                                                </table>
                                                <!-- CTA End --> 
                                            </td>
                                        </tr>
                                    </table>
                                    <!-- Job Card CTA Section End -->
                                </td>
                            </tr>
                            <tr>
                                <td style="width:499px;height: 35px;line-height:35px;font-size: 35px;border-collapse: collapse;margin:0;padding:0; mso-line-height-rule: exactly;">&nbsp;</td>
                            </tr>
                        </table>
                    <!-- Job Card Border End-->
                    <!-- Job Card End -->
                    </td>
                    <td rowspan="2" class="mobile_padding" valign="top" style="width: 30px;border-collapse: collapse;margin:0;padding:0;">&nbsp;</td>
                </tr>
                <tr>
                    <td class="dark_divider" valign="top" style="border-collapse: collapse;height: 30px;line-height: 30px;font-size: 30px;margin:0;padding:0;mso-line-height-rule: exactly;">&nbsp;</td>
                </tr>
            </table>     
            <!-- END MOD -->
          </td>
        </tr> 
        <!-- Job Card Mod End -->     
        <!-- Route Type Mod Start -->  
        <tr>
            <td class="padding_off" valign="top" align="center" style="border-collapse: collapse; margin:0 auto; padding-left:10px;padding-right:10px;">
                <!-- START MOD -->
                <table class="dark_resize" width="600" cellpadding="0" cellspacing="0" border="0" align="center" role="presentation" style="width: 600px;max-width: 600px;margin: 0 auto;padding: 0;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;background-color: #ffffff;">
                    <tr>
                        <td colspan="3" style="border-collapse: collapse;mso-line-height-rule: exactly;margin:0;padding:0;">&nbsp;</td>
                    </tr>
                    <tr>
                        <td class="mobile_padding" valign="top" style="width: 70px;border-collapse: collapse;margin:0;padding:0;">&nbsp;</td>
                        <td valign="top" style="border-collapse: collapse;margin:0;padding:0;">
                            <table class="resize" cellpadding="0" cellspacing="0" border="0" width="460" role="presentation" style="width: 460px;max-width: 460px;margin: 0;padding: 0;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">    
                                <tr>
                                    <td colspan="3" style="height: 30px;line-height: 10px;font-size: 10px;border-collapse: collapse;mso-line-height-rule: exactly;margin:0;padding:0;">&nbsp;</td>
                                </tr>
                                <!-- Headline Start -->
                                <tr>
                                    <td align="center" valign="top" style="border-collapse: collapse; margin:0; padding:0;">
                                        <h2 class="headline_text" style="font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 24px;font-weight: bold;color:#1F4484; text-align:center; text-decoration:none;line-height:40px; margin:0; padding:0;">
                                            Headline 2
                                        </h2>
                                    </td>
                                </tr>
                                <!-- Headline End -->
                                <tr>
                                    <td colspan="3" style="height: 50px;line-height: 50px;font-size: 50px;border-collapse: collapse;mso-line-height-rule: exactly;margin:0;padding:0;">&nbsp;<br></td>
                                </tr>
                            </table>
                            <!-- Two Col Route Type Start-->
                            <table class="resize" width="460" cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 460px;max-width: 460px;margin: 0;padding: 0;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
                                <tr>
                                    <td valign="top" align="center" style="border-collapse: collapse;margin:0;padding:0;">
                                    <!-- Block 1 Start --> 
                                        <div class="two_col" style="display:inline-block; max-width:200px; vertical-align:top; width:100%; border:2px solid #dedede; border-radius:10px;margin:10px">
                                            <a href="*|LINK|*" style="text-decoration: none; color: #dedede; display: block;" target="_blank" onclick="window.open('*|LINK|*'); return false;"> 
                                                <table class="two_col" width="200" cellpadding="0" cellspacing="0" border="0" align="left" role="presentation" style="width: 200px;max-width: 200px;min-width: 200px; float: left;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;margin:0;padding:0;">
                                                    <tr>
                                                        <td colspan="3" style="height: 30px;line-height: 30px;font-size: 30px;border-collapse: collapse;mso-line-height-rule: exactly;margin:0;padding:0;">&nbsp;</td>
                                                    </tr>
                                                    <!--Top Icon Start-->
                                                    <tr>
                                                        <td colspan="3" valign="middle" align="center" style="border-collapse: collapse; margin:0 auto;padding:0;">
                                                            <a href="*|LINK|*" target="_blank" title="Local Route Type" style="text-decoration:none; border:none;">
                                                                <img class="light_img" src="#" width="60" height="60" alt="Icon 1" style="display:block; border: 0 none;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; color: #000000; font-family: Arial, sans-serif; text-align:center; font-weight:normal; font-size:14px;margin:0 auto; padding:0;">
                                                            </a>
                                                                <!--dark mode logo image-->
                                                                <!--[if !mso]><! -->
                                                                <div class="dark_img" style="display:none; overflow:hidden; width:0px; max-height:0px; max-width:0px; line-height:0px; visibility:hidden;">
                                                                    <a href="*|LINK|*" target="_blank" title="Icon 1" style="text-decoration:none; border:none;">
                                                                        <img class="dark_img" src="#" width="60" height="60" alt="Icon 1" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; color: #4a4a4a; font-family: Arial, sans-serif; text-align:center; font-weight:normal; font-size:14px; text-decoration: none; margin:0 auto; padding:0;">
                                                                    </a>
                                                                </div>
                                                                <!--<![endif]-->
                                                        </td>
                                                    </tr>
                                                    <!--Top Icon End--> 
                                                    <tr>
                                                        <td colspan="3" style="height: 15px;line-height: 15px;font-size: 15px;border-collapse: collapse;mso-line-height-rule: exactly;margin:0;padding:0;">&nbsp;</td>
                                                    </tr>
                                                    <!--SubHeadline Copy Start-->
                                                    <tr>
                                                        <td rowspan="3" valign="top" style="width: 20px; border-collapse: collapse;margin:0;padding:0;">&nbsp;</td>
                                                        <td valign="top" style="border-collapse: collapse;margin:0 auto; padding:0;">
                                                            <a href="*|LINK|*" target="_blank" title="Icon 1" style="text-decoration:none;color: #000000;">
                                                                <h4 style="font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 18px;font-weight: bold;color: #000000;text-align:center;margin:0;padding:0;">
                                                                    Subheadline
                                                                </h4>
                                                            </a>
                                                        </td>
                                                        <td rowspan="3" valign="top" style="width: 20px; border-collapse: collapse;margin:0;padding:0;">&nbsp;</td>
                                                    </tr>
                                                    <!--Subheadline Copy End-->
                                                    <tr>
                                                        <td style="height: 25px;line-height: 25px;font-size: 25px;border-collapse: collapse;mso-line-height-rule: exactly;margin:0;padding:0;">&nbsp;</td>
                                                    </tr>
                                                    <!--Dynamic Job # Body Copy Start-->
                                                    <tr>
                                                        <td valign="top" style="border-collapse: collapse; margin:0 auto; padding:0;font-family: Arial, Helvetica, sans-serif;font-size: 16px;font-weight: normal;color: #1d5093; text-align:center;">
                                                            <a class="link" href="*|LINK|*" target="_blank" title="Icon 1" style="color:#1d5093; text-decoration:underline;">
                                                                Lorem ipsum dolor
                                                            </a>
                                                        </td>
                                                    </tr>
                                                    <!--Dynamic Job # Body Copy End-->
                                                    <tr>
                                                        <td colspan="3"style="height: 35px;line-height: 35px;font-size: 35px;border-collapse: collapse;mso-line-height-rule: exactly;margin:0;padding:0;">&nbsp;</td>
                                                    </tr>
                                              </table> 
                                            </a> 
                                        </div>
                                        <!-- Block 1 End --> 
                                        <!-- Block 2 Start --> 
                                        <div class="two_col" style="display:inline-block; max-width:200px; vertical-align:top; width:100%; margin:10px; border:2px solid #dedede; border-radius:10px;">
                                            <a href="*|LINK|*" style="text-decoration: none; color: #dedede; display: block;" target="_blank" onclick="window.open('*|LINK|*'); return false;">
                                                <table class="two_col" width="200" cellpadding="0" cellspacing="0" border="0" align="right" role="presentation" style="width: 200px;max-width: 200px;min-width: 200px; float: right;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;margin:0;padding:0;">
                                                    <tr>
                                                        <td colspan="3" style="height: 30px;line-height: 30px;font-size: 30px;border-collapse: collapse;mso-line-height-rule: exactly;margin:0;padding:0;">&nbsp;</td>
                                                    </tr>
                                                    <!--Top Icon Start-->
                                                    <tr>
                                                        <td colspan="3" valign="middle" align="center" style="border-collapse: collapse; margin:0 auto;padding:0;">
                                                            <a href="*|LINK|*" target="_blank" title="Icon 2" style="text-decoration:none; border:none;">
                                                                <img class="light_img" src="#" width="60" height="60" alt="Icon 2" style="display:block; border: 0 none;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; color: #000000; font-family: Arial, sans-serif; text-align:center; font-weight:normal; font-size:14px;margin:0 auto; padding:0;">
                                                            </a>
                                                            <!--dark mode logo image-->
                                                            <!--[if !mso]><! -->
                                                            <div class="dark_img" style="display:none; overflow:hidden; width:0px; max-height:0px; max-width:0px; line-height:0px; visibility:hidden;">
                                                                <a href="*|LINK|*" target="_blank" title="Icon 2" style="text-decoration:none; border:none;">
                                                                    <img class="dark_img" src="#" width="60" height="60" alt="Icon 2" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; color: #4a4a4a; font-family: Arial, sans-serif; text-align:center; font-weight:normal; font-size:14px; text-decoration: none; margin:0 auto; padding:0;">
                                                                </a>
                                                            </div>
                                                            <!--<![endif]-->
                                                        </td>
                                                    </tr>
                                                    <!--Top Icon End--> 
                                                    <tr>
                                                        <td colspan="3" style="height: 15px;line-height: 15px;font-size: 15px;border-collapse: collapse;mso-line-height-rule: exactly;margin:0;padding:0;">&nbsp;</td>
                                                    </tr>
                                                    <!--SubHeadline Copy Start-->
                                                     <tr>
                                                        <td rowspan="3" valign="top" style="width: 20px; border-collapse: collapse;margin:0;padding:0;">&nbsp;</td>
                                                        <td valign="top" style="border-collapse: collapse;margin:0 auto; padding:0;">
                                                            <a href="*|LINK|*" target="_blank" title="Icon 2" style="text-decoration:none;color: #000000;">
                                                                <h4 style="font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 18px;font-weight: bold;color: #000000;text-align:center;margin:0;padding:0;">
                                                                    Subheadline
                                                                </h4>
                                                            </a>
                                                        </td>
                                                        <td rowspan="3" valign="top" style="width: 20px; border-collapse: collapse;margin:0;padding:0;">&nbsp;</td>
                                                    </tr>
                                                    <!--Subheadline Copy End-->
                                                    <tr>
                                                        <td style="height: 25px;line-height: 25px;font-size: 25px;border-collapse: collapse;mso-line-height-rule: exactly;margin:0;padding:0;">&nbsp;</td>
                                                    </tr>
                                                    <!--Body Copy Start-->
                                                    <!--Dynamic Job # Body Copy Start-->
                                                    <tr>
                                                        <td valign="top" style="border-collapse: collapse; margin:0 auto; padding:0;font-family: Arial, Helvetica, sans-serif;font-size: 16px;font-weight: normal;color: #1d5093; text-align:center;">
                                                            <a class="link" href="*|LINK|*" target="_blank" title="Icon 2" style="color:#1d5093; text-decoration:underline;">
                                                                Lorem ipsum dolor
                                                            </a>
                                                        </td>
                                                     </tr>
                                                    <!--Dynamic Job # Body Copy End-->
                                                     <tr>
                                                        <td colspan="3"style="height: 35px;line-height: 35px;font-size: 35px;border-collapse: collapse;mso-line-height-rule: exactly;margin:0;padding:0;">&nbsp;</td>
                                                    </tr>
                                                </table> 
                                            </a>
                                      </div>
                                      <!-- Block 2 End --> 
                                    </td>
                                </tr>
                            </table>
                            <!-- Two Col Route Type End-->
                            <!-- Bottom Col Route Type Start-->
                            <table class="resize" width="460" cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 460px;max-width: 460px;margin: 0;padding: 0;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
                                <tr>
                                    <td valign="top" align="center" style="border-collapse: collapse;margin:0;padding:0">
                                    <!-- Block 1 Start --> 
                                        <div class="two_col" style="display:inline-block; max-width:200px; vertical-align:top; width:100%; margin:10px; border:2px solid #dedede; border-radius:10px;">
                                            <a href="*|LINK|*" style="text-decoration: none; color: #dedede; display: block;" target="_blank" onclick="window.open('*|LINK|*'); return false;">
                                                <table class="two_col" width="200" cellpadding="0" cellspacing="0" border="0" align="left" role="presentation" style="width: 200px;max-width: 200px;min-width: 200px; float: left;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; margin:0;padding:0;">
                                                    <tr>
                                                        <td colspan="3" style="height: 30px;line-height: 30px;font-size: 30px;border-collapse: collapse;mso-line-height-rule: exactly;margin:0;padding:0;">&nbsp;</td>
                                                    </tr>
                                                    <!--Top Icon Start-->
                                                    <tr>
                                                        <td colspan="3" valign="middle" align="center" style="border-collapse: collapse; margin:0 auto;padding:0;">
                                                            <a href="*|LINK|*" target="_blank" title="Icon 3" style="text-decoration:none; border:none;">
                                                                <img class="light_img" src="#" width="60" height="60" alt="Icon 3" style="display:block; border: 0 none;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; color: #000000; font-family: Arial, sans-serif; text-align:center; font-weight:normal; font-size:14px;margin:0 auto; padding:0;">
                                                            </a>
                                                            <!--dark mode logo image-->
                                                            <!--[if !mso]><! -->
                                                            <div class="dark_img" style="display:none; overflow:hidden; width:0px; max-height:0px; max-width:0px; line-height:0px; visibility:hidden;">
                                                                <a href="*|LINK|*" target="_blank" title="Icon 3" style="text-decoration:none; border:none;">
                                                                    <img class="dark_img" src="#" width="60" height="60" alt="Icon 3" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; color: #4a4a4a; font-family: Arial, sans-serif; text-align:center; font-weight:normal; font-size:14px; text-decoration: none; margin:0 auto; padding:0;">
                                                                </a>
                                                            </div>
                                                            <!--<![endif]-->
                                                        </td>
                                                    </tr>
                                                    <!--Top Icon End--> 
                                                    <tr>
                                                        <td colspan="3" style="height: 15px;line-height: 15px;font-size: 15px;border-collapse: collapse;mso-line-height-rule: exactly;margin:0;padding:0;">&nbsp;</td>
                                                    </tr>
                                                    <!--SubHeadline Copy Start-->
                                                    <tr>
                                                        <td rowspan="3" valign="top" style="width: 20px; border-collapse: collapse;margin:0;padding:0;">&nbsp;</td>
                                                        <td valign="top" style="border-collapse: collapse;margin:0 auto; padding:0;">
                                                            <a href="*|LINK|*" target="_blank" title="OTR Long Haul Route Type" style="text-decoration:none;color: #000000;">
                                                                <h4 style="font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 18px;font-weight: bold;color: #000000;text-align:center;margin:0;padding:0;">
                                                                    Subheadline
                                                                </h4>
                                                            </a>
                                                        </td>
                                                        <td rowspan="3" valign="top" style="width: 20px; border-collapse: collapse;margin:0;padding:0;">&nbsp;</td>
                                                    </tr>
                                                    <!--Subheadline Copy End-->
                                                    <tr>
                                                        <td style="height: 25px;line-height: 25px;font-size: 25px;border-collapse: collapse;mso-line-height-rule: exactly;margin:0;padding:0;">&nbsp;</td>
                                                    </tr>
                                                    <!--Dynamic Job # Body Copy Start-->
                                                    <tr>
                                                        <td valign="top" style="border-collapse: collapse; margin:0 auto; padding:0;font-family: Arial, Helvetica, sans-serif;font-size: 16px;font-weight: normal;color: #1d5093; text-align:center;">
                                                            <a class="link" href="*|LINK|*" target="_blank" title="Icon 3" style="color:#1d5093; text-decoration:underline;">
                                                                Lorem ipsum dolor
                                                            </a>
                                                        </td>
                                                    </tr>
                                                    <!--Dynamic Job # Body Copy End-->
                                                    <tr>
                                                        <td colspan="3"style="height: 35px;line-height: 35px;font-size: 35px;border-collapse: collapse;mso-line-height-rule: exactly;margin:0;padding:0;">&nbsp;</td>
                                                    </tr>
                                                </table> 
                                            </a>
                                          </div>
                                         <!-- Block 1 End --> 
                                         <!-- Block 2 Start --> 
                                          <div class="two_col" style="display:inline-block; max-width:200px; vertical-align:top; width:100%; margin:10px; border:2px solid #dedede; border-radius:10px;">
                                            <a href="*|LINK|*" style="text-decoration: none; color: #dedede; display: block;" target="_blank" onclick="window.open('*|LINK|*'); return false;">
                                                <table class="two_col" width="200" cellpadding="0" cellspacing="0" border="0" align="right" role="presentation" style="width: 200px;max-width: 200px;min-width: 200px; float: right;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;margin:0;padding:0;">
                                                    <tr>
                                                        <td colspan="3" style="height: 30px;line-height: 30px;font-size: 30px;border-collapse: collapse;mso-line-height-rule: exactly;margin:0;padding:0;">&nbsp;</td>
                                                    </tr>
                                                    <!--Top Icon Start-->
                                                    <tr>
                                                        <td colspan="3" valign="middle" align="center" style="border-collapse: collapse; margin:0 auto;padding:0;">
                                                            <a href="*|LINK|*" target="_blank" title="Icon 4" style="text-decoration:none; border:none;">
                                                                <img class="light_img" src="#" width="60" height="60" alt="Icon 4" style="display:block; border: 0 none;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; color: #000000; font-family: Arial, sans-serif; text-align:center; font-weight:normal; font-size:14px;margin:0 auto; padding:0;">
                                                            </a>
                                                            <!--dark mode logo image-->
                                                            <!--[if !mso]><! -->
                                                            <div class="dark_img" style="display:none; overflow:hidden; width:0px; max-height:0px; max-width:0px; line-height:0px; visibility:hidden;">
                                                                <a href="*|LINK|*" target="_blank" title="Icon 4" style="text-decoration:none; border:none;">
                                                                    <img class="dark_img" src="#" width="60" height="60" alt="Icon 4" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; color: #4a4a4a; font-family: Arial, sans-serif; text-align:center; font-weight:normal; font-size:14px; text-decoration: none; margin:0 auto; padding:0;">
                                                                </a>
                                                            </div>
                                                            <!--<![endif]-->
                                                        </td>
                                                    </tr>
                                                    <!--Top Icon End--> 
                                                    <tr>
                                                        <td colspan="3" style="height: 15px;line-height: 15px;font-size: 15px;border-collapse: collapse;mso-line-height-rule: exactly;margin:0;padding:0;">&nbsp;</td>
                                                    </tr>
                                                    <!--SubHeadline Copy Start-->
                                                    <tr>
                                                        <td rowspan="3" valign="top" style="width: 20px; border-collapse: collapse;margin:0;padding:0;">&nbsp;</td>
                                                        <td valign="top" style="border-collapse: collapse;margin:0 auto; padding:0;">
                                                            <a href="*|LINK|*" target="_blank" title="Icon 4" style="text-decoration:none;color: #000000;">
                                                                <h4 style="font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 18px;font-weight: bold;color: #000000;text-align:center;margin:0;padding:0;">
                                                                    Subheadline
                                                                </h4>
                                                            </a>
                                                        </td>
                                                        <td rowspan="3" valign="top" style="width: 20px; border-collapse: collapse;margin:0;padding:0;">&nbsp;</td>
                                                    </tr>
                                                    <!--Subheadline Copy End-->
                                                    <tr>
                                                        <td style="height: 25px;line-height: 25px;font-size: 25px;border-collapse: collapse;mso-line-height-rule: exactly;margin:0;padding:0;">&nbsp;</td>
                                                    </tr>
                                                    <!--Dynamic Job # Body Copy Start-->
                                                    <tr>
                                                        <td valign="top" style="border-collapse: collapse; margin:0 auto; padding:0;font-family: Arial, Helvetica, sans-serif;font-size: 16px;font-weight: normal;color: #1d5093; text-align:center;">
                                                            <a class="link" href="*|LINK|*" target="_blank" title="Icon 4" style="color:#1d5093; text-decoration:underline;">
                                                                Lorem ipsum dolor
                                                            </a>
                                                        </td>
                                                    </tr>
                                                    <!--Dynamic Job # Body Copy End-->
                                                    <tr>
                                                        <td colspan="3"style="height: 35px;line-height: 35px;font-size: 35px;border-collapse: collapse;mso-line-height-rule: exactly;margin:0;padding:0;">&nbsp;</td>
                                                    </tr>
                                              </table> 
                                            </a>
                                          </div>
                                         <!-- Block 2 End --> 
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="3" style="height: 50px;line-height: 50px;font-size: 50px;border-collapse: collapse;mso-line-height-rule: exactly;margin:0;padding:0;">&nbsp;</td>
                                    </tr>
                                </table>
                                <!-- Bottom Col Route Type End-->
                                <!--CTA Section Start-->
                                 <table class="resize" width="540" cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 460px;max-width: 460px;margin: 0;padding: 0;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
                                    <tr>
                                     <td class="hide" valign="top" style="width: 115px;border-collapse: collapse;margin:0;padding:0;">&nbsp;</td>
                                     <td valign="top" style="border-collapse: collapse;margin:0;padding:0;">
                                        <!-- CTA 1 Start --> 
                                        <table class="cta_resize" cellpadding="0" cellspacing="0" border="0" align="center" width="250" role="presentation" style="margin: 0 auto;padding: 0;width: 250px; max-width: 250px;min-width: 250px;background-color:#009CF0;border-radius:10px; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
                                            <tr>
                                                <td valign="top" style="border-collapse: collapse;margin:0; padding:0;">
                                                    <div class="dark_cta1" valign="top" style="font-family: Arial, Helvetica, sans-serif;font-size: 16px;font-weight: bold;color: #FFFFFF;text-align: center;padding-top: 15px;padding-bottom: 15px; margin:0;border-collapse: collapse; background-color:#009CF0;border-radius:10px;border:1px solid #009CF0;">
                                                        <a class="cta_copy" href="*|LINK|*" target="_blank" style="text-decoration: none; color: #FFFFFF; display: block;margin:0; padding:0;">
                                                            <!--[if !mso]><! -->
                                                            <span class="yahooAOLhide"  style="margin:0; padding:0;">
                                                                <span class="screen" style="background:#000; mix-blend-mode:screen;margin:0; padding:0;">
                                            	                    <span class="difference" style="background:#000; mix-blend-mode:difference;margin:0; padding:0;">
                                                                         Call to Action 3
                                                                    </span>
                                                                </span>
                                                            </span>
                                                            <!--<![endif]-->
                                                            <!--[if mso]>
                                                                Call to Action 3
                                                            <![endif]-->
                                                            <span class="yahooAOLshow"  style="margin:0; padding:0;mso-hide:all;display:none;">
                                                                 Call to Action 3
                                                            </span>
                                                        </a>
                                                    </div>
                                                </td>
                                            </tr>
                                        </table>
                                        <!-- CTA End --> 
                                    </td>
                                    <td class="hide" valign="top" style="width: 115px;border-collapse: collapse;margin:0;padding:0;">&nbsp;</td>
                                </tr>
                                <tr>
                                    <td colspan="3" style="height: 50px;border-collapse: collapse;mso-line-height-rule: exactly;margin:0;padding:0;">&nbsp;</td>
                                </tr>
                            </table>
                            <!--CTA Section End-->    
                        </td>
                        <td class="mobile_padding" valign="top" style="width: 70px;border-collapse: collapse;margin:0;padding:0;">&nbsp;</td>
                    </tr>
                    <tr>
                        <td class="dark_divider" colspan="3" style="border-bottom: 1px solid #f5f5f5;border-collapse: collapse;mso-line-height-rule: exactly;margin:0;padding:0;">&nbsp;</td>
                    </tr>
                </table>
            </td>
        </tr>
        <!-- Route Type Mod End -->
        <!-- Body End -->
        <!-- START FOOTER -->
        <tr>
            <td class="padding_off" class="bottom_padding" valign="top" align="center" style="border-collapse: collapse; margin:0 auto; padding-bottom:30px;padding-left:10px;padding-right:10px;">
                <!-- START MOD -->
                <table class="dark_resize" width="600" cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 600px;margin: 0;padding: 0;background-color: #e6e6e3;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-radius:0 0 10px 10px;">
                    <tr>
                        <td colspan="3" style="height: 30px;line-height: 30px;font-size: 30px;border-collapse: collapse;mso-line-height-rule: exactly;margin:0;padding:0;">&nbsp;</td>
                    </tr>
                    <tr>
                        <td style="width: 10%;border-collapse: collapse;margin:0;padding:0;">&nbsp;</td>
                        <td align="center" valign="top" style="border-collapse: collapse;margin:0;padding:0;">
                            <p class="cta_copy" style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; color: #656565; text-align:center; margin:0; padding:0; text-decoration:none;line-height:17px;">
                                <i>Copyright &copy; *|CURRENT_YEAR|* Company Name, All rights reserved.</i>
                                <br><br>
                                <strong>Our mailing address is:</strong><br>
                                
                                <br><br>
                                <span style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; color: #656565;">Please review our <a class="cta_copy" href="#" target="_blank" style="color:#414141;text-decoration:underline;">Privacy Policy</a>. 
                                <br><br>
                                This is an automated email. Want to change how you receive these emails?<br>
                                You can <a class="cta_copy" href="*|UNSUB|*" target="_blank" style="color:#414141;text-decoration:underline;">unsubscribe from this list</a>.</span>
                            </p> 
                        </td>
                        <td style="width: 10%;border-collapse: collapse;margin:0;padding:0;">&nbsp;</td>
                    </tr>
                    <tr>
                        <td colspan="3" style="height: 30px;line-height: 30px;font-size: 30px;border-collapse: collapse;mso-line-height-rule: exactly;margin:0;padding:0;">&nbsp;</td>
                    </tr>
                </table>
                <!-- END MOD --> 
            </td>
        </tr>
        <!-- END FOOTER -->
        <!-- START DISCLAIMER
        <tr>
            <td valign="top" align="center" style="border-collapse: collapse;">
                <table class="resize" width="600" cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 600px;margin: 0;padding: 0; border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
                    <tr>
                        <td class="hide" style="height: 30px;border-collapse: collapse;">&nbsp;</td>
                    </tr>
                </table>
            </td>
        </tr>
         END DISCLAIMER -->
    </table>
    <!-- END EMAIL WRAPPER -->
</body>
`

@sidhantsuvagiya
Copy link

Hi @ashleighalley-CNB!
I'm also facing the same issue. have you found any solutions?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Gmail Webmail, iOS and Android apps
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@hteumeuleu @sidhantsuvagiya @ashleighalley-CNB