:root{
  --icon-green:#31e981;
  --icon-orange:#ffa21a;
  --icon-red:#ff5263;
  --icon-teal:#3ee6d7;
}
.metric-icon{
  width:56px;
  height:56px;
  flex:0 0 56px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.035);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.metric-icon img{
  display:block;
  width:30px;
  height:30px;
  object-fit:contain;
}
.metric-icon--green{background:rgba(49,233,129,.105)}
.metric-icon--orange{background:rgba(255,162,26,.115)}
.metric-icon--red{background:rgba(255,82,99,.115)}
.metric-icon--teal{background:rgba(62,230,215,.105)}

.push-rule-icon{
  width:34px;
  height:34px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  vertical-align:middle;
}
.push-rule-icon img{width:19px;height:19px;object-fit:contain}

/* v1.4.7 compatibility with the existing Ajax Monitoring cards. */
.summary-card .summary-icon.metric-icon--green{background:rgba(49,233,129,.105)}
.summary-card .summary-icon.metric-icon--orange{background:rgba(255,162,26,.115)}
.summary-card .summary-icon.metric-icon--red{background:rgba(255,82,99,.115)}
.summary-card .summary-icon.metric-icon--teal{background:rgba(62,230,215,.105)}
.summary-icon.metric-icon img{display:block;width:30px;height:30px;object-fit:contain}
.notify-symbol.push-rule-icon{font-size:0;flex:0 0 34px}
.notify-symbol.push-rule-icon img{display:block;width:19px;height:19px;object-fit:contain}