为什么我的html在电子邮件中不能正常工作？

我正在使用应用程序脚本和创建Html模板发送该模板到电子邮件。模板如下所示

但当我通过应用程序脚本发送它时，它会变成这样：

如你所见，盒子不见了。甚至连图标都不见了。有什么特别的原因和解决办法吗

GS代码

var emailTemp = HtmlService.createHtmlOutputFromFile("Approved-email").getContent();
  var mailAddress = sheet.getRange(2,2).getValue();
  
      MailApp.sendEmail(mailAddress,"Leave Status",'',{
        htmlBody:emailTemp
      });

由于某种原因，堆栈溢出不允许我在这里编写HTML代码

.卡片{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
宽度：300px；
最小高度：400px；
背景：#fff；
盒影：0 20px 50px rgba（0,0,0,1）；
边界半径：10px；
过渡：0.5s；
边框样式：虚线；
}
.卡：悬停{
盒影：0 30px 70px rgba（0,0,0,2）；
}
.卡片.盒子{
位置：绝对位置；
最高：50%；
左：0；
转化：translateY（-50%）；
文本对齐：居中；
填充：20px；
框大小：边框框；
宽度：100%；
}
.card.box.img{
宽度：120px；
高度：120px；
保证金：0自动；
边界半径：10%；
溢出：隐藏；
}
.card.box.img img{
宽度：100%；
身高：100%；
}
.卡片.信箱h2{
字体大小：20px；
颜色：#262626；
保证金：20px自动；
}
.card.box h2 span{
字体大小：14px；
背景：#e91e63；
颜色：#fff；
显示：内联块；
填充：4px10px；
边界半径：10px；
}
.卡片.信箱p{
颜色：#262626；
}
.card.box span{
显示：内联flex；
}
.卡.盒ul{
保证金：0；
填充：0；
}
.卡.箱{
列表样式：无；
浮动：左；
}
.卡.箱ul li a{
显示：块；
颜色：#aaa；
利润率：0.10px；
字体大小：20px；
过渡：0.5s；
文本对齐：居中；
}
.card.box ul li:将鼠标悬停在a上{
颜色：#e91e63；
变换：旋转（360度）；
}
你好约翰同意了
细节

---

谢谢你的html？

​@TheMaster我编辑了我的html。看一看，希望对你有帮助。如果遇到其他问题，请随意提出更具体的问题。