grafana/emails/assets/css/style.css

body, table.body, h1, h2, h3, h4, h5, h6, p, td {
  font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
}

h1 {font-size: 40px;}
h2 {font-size: 36px;}
h3 {
  font-size: 22px;
  margin-top: 10px;
  margin-bottom: 10px;
}
h4 {font-size: 20px;}
h5 {font-size: 18px;}
h6 {font-size: 16px;}

.emphasis {
  font-weight: 600;
}

a {
  color: #E67612;
  text-decoration: none;
}

a:hover {
  color: #ff8f2b !important;
}

a:active {
  color: #F2821E !important;
}

a:visited {
  color: #E67612 !important;
}

table.facebook td {
  background: #3b5998;
  border-color: #2d4473;
}

table.facebook:hover td {
  background: #2d4473 !important;
}

table.twitter td {
  background: #00acee;
  border-color: #0087bb;
}

table.twitter:hover td {
  background: #0087bb !important;
}

table.google-plus td {
  background-color: #DB4A39;
  border-color: #CC0000;
}

table.google-plus:hover td {
  background: #CC0000 !important;
}

.template-label {
  color: #ffffff;
  font-weight: bold;
  font-size: 11px;
}

.callout .wrapper {
  padding-bottom: 20px;
}

.callout .panel {
  background: #ECF8FF;
  border-color: #b9e5ff;
}

.header {
margin-top:25px;
margin-bottom: 25px;
}

.data {
  font-size: 16px;
}

.footer {
  background-color: #2e2e2e;
  color: #999999;
  margin-top: 20px;
}

@media only screen and (max-width: 600px) {
  table[class="body"] .right-text-pad {
    padding-left: 10px !important;
  }

  table[class="body"] .left-text-pad {
    padding-right: 10px !important;
  }

  .logo {
    margin-left: 10px;
  }
}

table.better-button {
  margin-top: 10px;
  margin-bottom: 20px;
}

table.columns td.better-button {
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  padding-bottom: 0px;
}

.better-button a {
  text-decoration: none;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;

  padding: 12px 25px;
  border: 1px solid #ff8f2b;
  display: inline-block;
  color: #FFF;
}

.better-button:hover a {
  color: #FFFFFF !important;
  background-color: #F2821E;
  border: 1px solid #F2821E;
}

.better-button:visited a {
  color: #FFFFFF !important;
}

.better-button:active a {
  color: #FFFFFF !important;
}

table.better-button-alt {
  margin-top: 10px;
  margin-bottom: 20px;
}

table.columns td.better-button-alt {
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  padding-bottom: 0px;
}

.better-button-alt a {
  text-decoration: none;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;

  padding: 12px 25px;
  border: 1px solid #ff8f2b;
  background-color: #EFEFEF;
  display: inline-block;
  color: #ff8f2b;
}

.better-button-alt:hover a {
  color: #ff8f2b !important;
  background-color: #DDDDDD;
  border: 1px solid #F2821E;
}

.better-button-alt:visited a {
  color: #ff8f2b !important;
}

.better-button-alt:active a {
  color: #ff8f2b !important;
}

.verification-code {
  background-color: #EEEEEE;
  padding: 3px;
  margin: 8px;
  display: inline-block;
  font-weight: bold;
  font-size: 20px;
}