I try to hide or remove a border that is displayed between 2 call-to-actions in Outlook 2007.
This border isn't displayed over the background image of my email but appears over the background color in Outlook 2007 (Outlook doesn't support the bg img) and I'v tried many things to put it off.
Here is the screen :
http://i.stack.imgur.com/vC5cV.gif
And this is my source code for this part :
<table class="table-inner" width="50%" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td data-link-style="text-decoration:none; color:#FFFFFF;" align="center" height="36" style="border-radius: 20px; border: 2px solid #FFFFFF; padding-left: 15px; padding-right: 15px; font-family: 'Open Sans', Arial, sans-serif; color: #ffffff; font-size: 14px; font-weight: bold; background-color: rgb(1, 119, 181);">
<a href="" style="color:#FFFFFF;" target="_blank">
Link 1
</a>
</td>
<td width="25">
</td>
<td align="center" height="36" bgcolor="#5eaade" style="border-radius: 20px; border: 2px solid #FFFFFF; padding-left: 15px; padding-right: 15px; font-family: 'Open Sans', Arial, sans-serif; color: rgb(255, 255, 255); font-size: 14px; font-weight: bold; background-color: rgb(94, 170, 222);">
<a href="" style="color:#ffffff;" target="_blank">
Link 2
</a>
</td>
</tr>
</tbody>
Please help me to remove this awful "bottom" line between the 2 buttons ?
Regards
Fixed !
In the css head I changed :
table td{
border-collapse:collapse;
}
for :
table td{
border-collapse:separate;
}
But 2 other buttons below did not display correctly anymore... So I forced a :
style="border-collapse:collapse;"
directly in their <td> code.
:)
Related
I was wondering if it is possible to do the border with the same padding as the button above. The solution might seem like it is when I add the border to the td but I can not do that because in other client the border has border-radius which is not visible here. Any ideas? Thanks
code for the second button:
<!-- BUTTON -->
<table bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" class="fluid"
role="presentation" width="600">
<tr>
<td align="center" bgcolor="#ffffff" style="padding: 0 0 40px 0;"
valign="top">
<table align="center" border="0" cellpadding="0" cellspacing="0"
class="main-button-mob-width" role="presentation"
style="max-width: 80%; min-width: auto;">
<tr>
<td align="center" bgcolor="#ffffff"
class="out-main-button-padding"
style="border-radius: 50px; padding: 0; font-family:
'Arial Black', Gadget, Arial,
Helvetica, sans-serif; font-size: 18px; font-weight: bold;
line-height: 22px; mso-text-raise: 4px;"
valign="top">
<a class="out-main-button-a"
href="#" style="display: block;
border-radius: 50px; background-color: #ffffff;
border: 3px solid #061539;
mso-border-alt: 8px solid #061539;
padding: 15px 35px 15px 35px; mso-padding-alt: 4px;
color: #061539; text-decoration: none;"
target="_blank" title="">
<span style="color: #061539; text-decoration: none;
background-color: #ffffff">INVITA A TUS AMIGOS
</span>
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- BUTTON end -->
In Outlook you cannot change an inline element such as <a> to a block element (display:block). So it ignores padding, margins and such because these are block element styles.
Therefore, for cross-email compatibility, you either need to put padding on the <td> (which doesn't extend the clickable part, but only makes it look like the button is bigger, or, you can apply a hack as described by Mark Robbins.
Solution 1: (Easiest) TD button
<td align="center" bgcolor="#ffffff"
class="out-main-button-padding"
style="border-radius: 50px; padding: 15px 35px 15px 35px;
border-radius: 50px; background-color: #ffffff;
border: 3px solid #061539;
mso-border-alt: 8px solid #061539;
mso-padding-alt: 4px; font-family:
NIVEaBrandType-Bold, 'Arial Black', Gadget, Arial,
Helvetica, sans-serif; font-size: 18px; font-weight: bold;
line-height: 22px; mso-text-raise: 4px;"
valign="top">
<a class="out-main-button-a"
href="https://nivea.com" style="display: block;
color: #061539; text-decoration: none;"
target="_blank" title="">
<span style="color: #061539; text-decoration: none;
background-color: #ffffff">INVITA A TUS AMIGOS
</span>
</a>
</td>
All I've done is move the block-level styles from the <a> to the <td>. You can still leave the display:block on the <a> to make the clickable area bigger for those email clients that support this.
Solution 2: Mark Robbin's A button
<a href="https://example.com/" style="background: #333; border: 2px solid #f00; text-decoration: none; padding: 15px 25px; color: #fff; border-radius: 4px; display:inline-block; mso-padding-alt:0;text-underline-color:#333"><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%;mso-text-raise:30pt" hidden> </i><![endif]--><span style="mso-text-raise:15pt;">Link Text</span><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%" hidden> </i><![endif]-->
</a>
Change the left and right padding by changing the letter-spacing value (on the left and right of the link text).
Change the bottom padding by changing the mso-text-raise value in the <span>.
Change the top padding by changing the mso-text-raise value in the <i>.
(Detailed explanation on https://www.goodemailcode.com/email-code/link-button)
The first span with border 1px solid #333; not showing in outlook 365, but showing in outlook live and gmail. I've tried outline and box-shadow as well it's not working in any way.The first span with border 1px solid #333; not showing in outlook 365, but showing in outlook live and gmail. I've tried outline and box-shadow as well it's not working in any way.I
<table cellpadding="0" cellspacing="0" width="100%" role="presentation" style=" mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse; border-spacing: 0px; ">
<tr>
<td align="right" style="padding: 0; margin: 0">
<span class="es-button-border" bordercolor="#333" border="1" style=" mso-border-right-alt: 1px solid #333333; mso-border-bottom-alt: 1px solid #333333; mso-border-left-alt: 1px solid #333333; mso-border-top-alt: 1px solid #333333; border-style: solid; border-color: #333333; border-width: 1px; border: 1px solid #333333; display: inline-block; border-radius: 0px; width: auto; ">
<span class="es-button" target="_blank" style=" mso-style-priority: 100 !important; text-decoration: none; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; mso-line-height-rule: exactly; color: #333333; font-size: 12px; border-style: solid; border-color: #fff; border-width: 10px 20px 10px 20px; display: inline-block; background: #fff; border-radius: 0px; font-family: roboto, 'helvetica neue', helvetica, arial, sans-serif; font-weight: normal; font-style: normal; line-height: 14px; width: auto; text-align: center; " >
<span id="price1">Per person:</span>
INR 98298 (CHF 1192)
</span>
</span>
</td>
</tr>
</table>
The problem is you're using a span as a block element, which it isn't naturally and on top of that - trying to force it with the use of display:inline-block won't always work in Outlook clients.
Your best bet is to use block level elements for borders. These include: table cells & divs.
You could convert all of your span tags to divs to make this work, however because divs are block elements, they'll go full width by default.
You can define widths to fix this, however Outlook won't respect those without mso specific code.
Below is your code and then the row below that is what I'd do:
<table cellpadding="0" cellspacing="0" width="100%" role="presentation" style=" mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse;">
<tr>
<td align="right">
<span class="es-button-border" style="border: 1px solid #333333; display: inline-block;">
<span class="es-button" style="mso-style-priority: 100 !important; text-decoration: none; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; mso-line-height-rule: exactly; color: #333333; font-size: 12px; border-style: solid; border-color: #fff; border-width: 10px 20px 10px 20px; display: inline-block; background: #fff; border-radius: 0px; font-family: roboto, 'helvetica neue', helvetica, arial, sans-serif; font-weight: normal; font-style: normal; line-height: 14px; width: auto; text-align: center;">
<span id="price1">Per person:</span>INR 98298 (CHF 1192)
</span>
</span>
</td>
</tr>
<tr>
<td style="padding-top:10px;">
<table align="right" role="presentation" border="0" cellpadding="0" cellspacing="0" style="border: 1px solid #333333;">
<tr>
<td class="es-button-border" style="text-decoration: none; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; mso-line-height-rule: exactly; color: #333333; font-family: roboto, 'helvetica neue', helvetica, arial, sans-serif; font-size: 12px; line-height: 14px; text-align: center;">
<div style="border-style: solid; border-color: #fff; border-width: 10px 20px 10px 20px;">
<span id="price1">Per person:</span>INR 98298 (CHF 1192)
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
I am trying to add a hyperlink button to an Email template I am making and for some reason when opening this email via Outlook the button is empty with boarders only and non of the graphic style included.
When opening this in a Web Browser everything looks fine even on Gmail, not sure where is the problem, I hope someone can help.
This is the code line for the button:
<div align="center" class="button-container center " style="padding-right: 10px; padding-left: 10px; padding-top:10px; padding-bottom:10px;"><!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-spacing: 0; border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"><tr><td style="padding-right: 10px; padding-left: 10px; padding-top:10px; padding-bottom:10px;" align="center"><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="" style="height:27pt; v-text-anchor:middle; width:129pt;" arcsize="17%" strokecolor="#59B5EB" fillcolor="#FFFFFF"><w:anchorlock/><v:textbox inset="0,0,0,0"><center style="color:#59B5EB; font-family:Roboto, 'Helvetica Neue', Helvetica, sans-serif; font-size:16px;"><![endif]-->
<div style="color: #59B5EB; background-color: #FF0000; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; max-width: 172px; width: 132px;width: auto; border-top: 2px solid #FFFFFF; border-right: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF; border-left: 2px solid #FFFFFF; padding-top: 5px; padding-right: 20px; padding-bottom: 0px; padding-left: 20px; font-family: Roboto, 'Helvetica Neue', Helvetica, sans-serif; text-align: center; mso-border-alt: none;"><span style="font-size:18px;line-height:40px;">Join Team</span></div>
<!--[if mso]></center></v:textbox></v:roundrect></td></tr></table><![endif]--></div>
This is an example of a button that will work in Outlook and other email clients:
<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" style="margin: auto;">
<tr>
<td style="border-radius: 6px; background: #ff0000;">
Join Team
</td>
</tr>
</table>
Nearly everything in your code example will have issues with Outlook and other email clients.
For example, Outlook does not work well with <div>. Outlook does not work well with padding. Outlook will not work with Google fonts like Roboto or fonts with two names like Helvetica Neue. It's not going to work with rounded corners, so border-radius: 6px; will be ignored. Maybe arcsize="17%" will work, but I don't have to test it. I just wanted to give you a way to go forward.
Good luck.
How can I have an image (little arrow on the right) set next to an anchor tag <a> and keep them both aligned vertically and horizontally. I've been trying this in multiple ways but came across errors with every method I tried. either the <a> tag wont work (not clickable) in html emails or the arrow would be outside the clickable area. I only need one of these following codes .Here's some what Iv'e tried:
First code: the problem here is: if the user clicked on the arrow it wont response, because it's not inside the <a> tag, but this is working
<table cellpadding="0" cellspacing="0" border="0" width="33%" align="right" style="font-family: Arial, Helvetica, sans-serif; text-align: center;">
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color:#007cb0; font-weight: normal;text-align: center;">
<tr>
<td align="left" style="padding: 15px 0px 15px 30px; text-decoration: none; font-size: 11px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; vertical-align: top; line-height: normal !important;">
<a style="font-size: 16px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; cursor: pointer;">Go to Link</a>
</td>
<td align="right" style="text-align: left; color: #FFFFFF; font-weight: 700;"><img src="https://png.icons8.com/metro/50/ffffff/forward.png" width="15"></td>
<td><img src="http://via.placeholder.com/5/007cb0" width="5" /></td>
</tr>
</table>
</td>
</tr>
</table>
Second code: I couldn't get the text vertical aligned within the <td>
<table cellpadding="0" cellspacing="0" border="0" width="33%" align="right" style="font-family: Arial, Helvetica, sans-serif; text-align: center;">
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color:#007cb0; font-weight: normal;text-align: center;">
<tr>
<td height="50" align="left" style="text-decoration: none; font-size: 11px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; vertical-align: top; line-height: 100% !important;">
<a style="height:100%;font-size: 16px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; cursor: pointer; display: block">Go to Link <img src="https://png.icons8.com/metro/50/ffffff/forward.png" width="20" style="vertical-align: middle;"></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
Third code The problem here is: It didn't work in any email client and the link is not clickable.
<table class="mobile" cellpadding="0" cellspacing="0" border="0" width="33%" align="right" style="font-family: Arial, Helvetica, sans-serif;">
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color:#007cb0; font-weight: normal;">
<tr>
<td>
<a style="border: 1px solid red; padding: 20px;display: block; font-size: 16px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; cursor: pointer;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="font-size: 16px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; cursor: pointer;">
<tr style="font-size: 16px; text-align: left; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; cursor: pointer;">
<td align="left" style="text-decoration: none; font-size: 16px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; vertical-align: top; line-height: normal !important;">
GET VERSATILE
</td>
<td align="right" style="text-align: center; color: #FFFFFF; font-weight: 700;"><img src="https://png.icons8.com/metro/50/ffffff/forward.png" width="15" /></td>
</tr>
</table>
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
Summaries:
I need this <a> tag to have an arrow next to it and to be Clickable all around the blue area.
Thanks for the help.
This is working in most of email clients, and even if I changed the text inside the anchor tag.
hope that would help.
<table class="mobile" cellpadding="0" cellspacing="0" border="0" width="33%" align="right" style="font-family: Arial, Helvetica, sans-serif;">
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color:#007cb0;font-family: Arial, Helvetica, sans-serif;font-weight: bold;">
<tr>
<td class="links" style="padding: 10px; color: #ffffff; vertical-align: middle; text-align: center; font-family: Arial, Helvetica, sans-serif;font-weight: bold;"><a style="text-align: center; display: block;cursor: pointer;font-family: Arial, Helvetica, sans-serif; color: #ffffff !important; text-decoration: none; font-size: 16px; line-height: 20px; font-weight: bold;" pm-link="landingpage1" pm-link-default-url="global_landingpage">GO TO LINK<img src="http://via.placeholder.com/15/007cb0" width="15" alt="" /><img src="https://png.icons8.com/metro/50/ffffff/forward.png" width="20" style="vertical-align: middle;padding: 0 0 4px 0;max-width: 20px" /></a></td>
</tr>
</table>
</td>
</tr>
</table>
Not sure if you have thought of this but it should be as easy as adding an a tag around the image for the first question.
Try this below and see if it works for you. I have just added your a tag from the sibling td just to give you an idea.
<table cellpadding="0" cellspacing="0" border="0" width="33%" align="right" style="font-family: Arial, Helvetica, sans-serif; text-align: center;">
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color:#007cb0; font-weight: normal;text-align: center;">
<tr>
<td align="left" style="padding: 15px 0px 15px 30px; text-decoration: none; font-size: 11px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; vertical-align: top; line-height: normal !important;">
<a style="font-size: 16px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; cursor: pointer;">Go to Link</a>
</td>
<td align="right" style="text-align: left; color: #FFFFFF; font-weight: 700;"><img src="https://png.icons8.com/metro/50/ffffff/forward.png" width="15"></td>
<td><a style="font-size: 16px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; cursor: pointer;"><img src="http://via.placeholder.com/5/007cb0" width="5" /></a></td>
</tr>
</table>
</td>
</tr>
</table>
Hope this answer works for you.
Edited
Now that I know you're making a button that aligns to the right, I have a better approach for you.
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="right">
<tr>
<td><!-- The button code -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="background: #007cb0; text-align: center;">
<a href="#" target="_blank" style="background: #007cb0;
border: 15px solid #007cb0; font-family: sans-serif; font-size: 16px;
line-height: 110%; text-align: center; text-decoration: none !important;
display: block; font-weight: 700;"><span style="color:#ffffff;"> Go to Link <img src="https://png.icons8.com/metro/50/ffffff/forward.png" width="15">
</span></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
This code will right-align and look presentable in every email client. It does not quite look perfect in Outlook. To do that, you need to add a spacer table specifically for Outlook.
I am deleting the older post and code, but honestly, it's the same thing I posted yesterday with added which gives you a reliable form of padding.
Could you tell why are you using table formatting for making button-styled links? Is that specific for html-email? This seems easier and after some customizing will give the same look:
a {
display: inline-block;
border: 1px solid black;
padding: 10px;
}
Link <span> ❯</span>
OK then just add/adjust margin and padding to make clickable area larger
a{
display: inline-block;
position: relative;
z-index: 1;
padding: 1em;
margin: -1em;
}
td img{
padding-bottom: 5px;
}
https://jsfiddle.net/33q09cy0/
and add the image inside the a tag reference.
<td align="left" style="padding: 15px 0px 15px 30px; text-decoration: none; font-size: 11px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; vertical-align: top; line-height: normal !important;">
<a style="font-size: 16px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; cursor: pointer;">Go to Link</a>
<img src="https://png.icons8.com/metro/50/ffffff/forward.png" width="15">
</td>
I took a template and customized it. I have added a background color, it shows up in Chrome when I load the .html file in Chrome, but when I try and load this with outlook the background color does not appear. I have looked around but I am new to HTML so I didn't quiet understand how to apply those answers to my specific situation, especially because i did not write all of this code, I was given this to work on.
${config_styles_link(color: #227700; text-decoration: none !important)}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body>
<table cellpadding="0" border="0" style="line-height: 1.2em; font-family:
'Helvetica Neue', Helvetica, Arial, sans-serif; border-spacing: 0px; font-
size: 100%; font-color: white; border: 0; background-color: #fff;"
cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0" width="650"
align="center" style="line-height: 1.2em; font-family: 'Helvetica Neue',
Helvetica, Arial, sans-serif; border-spacing: 0px; font-size: 100%;
background-color: 252734; border: 1px solid #ccc; margin-top: 5px; margin-
bottom: 5px;" >
<tbody>
<tr>
<td style="padding: 16px 16px 0px 20px; vertical-align: middle;
font-size: 18px; color: grey;" align="left">
</td>
<td width="200" style="padding:16px 16px 0px 14px;vertical-
align:middle; line-height:12px;" align="right">
</td>
</tr>
<tr>
<td colspan="2" style="padding: 8px 16px 8px 20px;">
<imgsrc="static.pexels.com/photos/11406/c12ee0f379643a278198b2086afd3b9c.jp"
style="width:600px;height:142px;">
<p style= "color: D2D5EB">Hello ${user_first_name},</p>
<p style= "color: D2D5EB">
We are looking forward to your participation in ${webcast_title}.
<div style="border:1px white; height: 60px; width: 180px; margin-left: 80px;
font-family: arial; font-size: 17px; font-weight: 600; color: D2D5EB;
background-color: 252734; clear:both;">
${webcast_details}
</div>
<img src="https://thumbs.dreamstime.com/z/skull-human-size-robot-isolated-
black-35652577.jpg" style="width:104px;height:142px;">
</p>
<hr style="clear:both;">
<p> </p>
<p style ="clear:both; color: D2D5EB;">You can test your system now to make
sure you can view our webinars and videos: ${help_viewers_systemtest}.</p>
<p style="color: D2D5EB;">${channel_webcasts}</p>
<p style ="font-family: arial; font-size: 11px; font-weight: 600; color:
grey; text-align: center;"> In the meantime you can check out our website by
clicking here for more
information about what we do, future events and to check out our blog!</p>
<p style="font-family: arial, sans-serif; font-size: 12px; color:
D2D5EB;">Thank you,<br />
${webcast_channel_title}</p>
</td>
</tr>
<tr>
<td style="padding: 0px 16px 0px 20px; font-family:
Arial,Helvetica,sans-serif; color: #000; font-size: 11px; color: D2D5EB;">
<p>You received this email because you are subscribed to <a
style="color: D2D5EB;; text-decoration: none !important"
href="${webcast_channel_url}&utm_content=channel">${webcast_channel_title}
</a> on BrightTALK.</p>
</td>
<td width="120" style="padding:4px 16px 0px 0px;vertical-
align:top;" align="right">
<img title="BrightTALK"
src="https://p.brighttalk.com/platform_email/brighttalklogo.png"
alt="BrightTALK" width="120" height="34" />
</td>
</tbody>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="650"
align="center" style="padding: 0px 0px; line-height: 1em;">
<tbody>
<tr>
<td style="padding-top: 0px; font-family: Arial,Helvetica,sans-
serif; color: #000; font-size: 11px; background-color: 252734;">
<p style="font-size:11px; color: D2D5EB">All times are shown in your time
zone: ${user_timezone_alias}</p>
<p style="color: D2D5EB;">To update your email preferences,
please visit: ${user_link_preferences}<br />
Should you wish to unsubscribe from this channel please
visit: ${user_link_mybrighttalk}</p>
<p style="color: D2D5EB;">
For more information, please visit us at <a style="color:
#227700; text-decoration: none !important"
href="http://www.brighttalk.com">www.brighttalk.com</a> <br />
BrightTALK™, 501 Folsom Street, 2nd Floor, San
Francisco, CA 94105</p>
<p style="color: D2D5EB;">${email_unsubscribe_link}</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
The background appears white in outlook, everything else turns up fine. I want the background color to be a navy-ish color.
The background appears white because you have the
background-color: #fff;
Change the #fff white colour for another colour you want.
Try, for example:
background-color: #0E061C;