diff --git a/app/views/layouts/mailer.html.erb b/app/views/layouts/mailer.html.erb
index 4093e5e7d..57f396944 100644
--- a/app/views/layouts/mailer.html.erb
+++ b/app/views/layouts/mailer.html.erb
@@ -79,6 +79,25 @@ table, td, th {
color: #2b8a3e; /* oc-green-9 */
border: 1px solid #2b8a3e;
}
+
+.markdown-alert {
+ border-left: 4px solid;
+ padding-left: 0.6em;
+ margin: 1em 0;
+}
+.markdown-alert-title { font-weight: bold;}
+.markdown-alert-title svg { display: none; }
+
+.markdown-alert-tip { border-color: #37b24d; /* oc-green-7 */}
+.markdown-alert-tip .markdown-alert-title { color: #2b8a3e; /* oc-green-9 */ }
+.markdown-alert-important { border-color: #ae3ec9; /* oc-grape-7 */ }
+.markdown-alert-important .markdown-alert-title { color: #862e9c; /* oc-grape-9 */ }
+.markdown-alert-caution { border-color: #f03e3e; /* oc-red-7 */ }
+.markdown-alert-caution .markdown-alert-title { color: #c92a2a; /* oc-red-9 */ }
+.markdown-alert-warning { border-color: #f59f00; /* oc-yellow-7 */ }
+.markdown-alert-warning .markdown-alert-title { color: #e67700; /* oc-yellow-9 */ }
+.markdown-alert-note { border-color: #4263eb; /* oc-indigo-7 */ }
+.markdown-alert-note .markdown-alert-title { color: #364fc7; /* oc-indigo-9 */ }