Email format is wrongly shown in Outlook using html template

Hi All,

I have used HTML template in designing EMail body.

"This message was sent by the Appian - PRTRR (Request to Retain or Retire) process.<br/><br/>" &

if(rule!APN_isBlank(ri!group_txt),

  if(

    rule!APN_isBlank(ri!district_txt),

    "AMU: " & ri!AMU_txt,

    "District: " & ri!district_txt

  ),

  "Group: " & ri!group_txt

)

& "<br/><br/>" & if(

  rule!APN_isEmpty(

    ri!PRTRR_PipelineList

  ),

  {},

  "<br/><br/>Please review the following list of pipelines requiring attention. A decision must be made on each pipeline outlined in the table below.<br/><br/>"

  &regexreplaceall("<tr bgcolor='red'><td></td><td></td><td></td><td></td><td></td><td></td><td>0</td></tr>",regexreplaceall(";",rule!PRTRR_createEmailSectionRequireAttention(PRTRR_PipelineList: ri!PRTRR_PipelineList),""),"")

  &"<style>.foo {float: left;width: 20px;height: 20px;margin: 5px;border: 1px solid black;}.red {background: 'red';}.orange {background: 'orange';}.yellow {background: 'yellow';}</style>"

&"<div class='foo red'></div><font>Non-Compliant Pipelines</font></br></br>"&

"<div class='foo orange'></div><font>Non-Compliance Imminent</font></br></br>"&

"<div class='foo yellow'></div><font>Inactive Lines Requiring a Decision</font>"

)

Attached both browser and email

The above div tags with color boxes are displaying in browser but not in email.

Can an one suggest ? I have requirement to display the colors as boxes with black border.

Thanks in advance.