.callout {
  padding: 1.5em 3em 1.6em 3.7em;
  margin-bottom: 1.5em;
  overflow: auto;
  position: relative;
  border-width: 0 0 0 5px;
  border-style: solid;
  min-width: 170px;
}
.callout p {
  margin-bottom: 0.6em;
  margin-top: 0.5em;
}
.callout p:first-child {
  margin-top: 0;
}
.callout p:last-child {
  margin-bottom: 0;
}
.callout:before {
  content: "";
  font-family: "dashicons";
  position: absolute;
  font-size: 2em;
  top: 0.5em;
  left: 0.5em;
}
.callout .screen-reader-text + br {
  display: none;
}

.callout-info     { background: #e5f5fa; border-color: #00a0d2; }
.callout-tip      { background: #eff7ed; border-color: #64b450; }
.callout-alert    { background: #fff8e5; border-color: #ffb900; }
.callout-tutorial { background: #f2f0f7; border-color: #826eb4; }
.callout-warning  { background: #fbeaea; border-color: #dc3232; }

.callout-info:before     { content: "\f348"; color: #00a0d2; }
.callout-tip:before      { content: "\f339"; color: #64b450; }
.callout-alert:before    { content: "\f227"; color: #ffb900; }
.callout-tutorial:before { content: "\f308"; color: #826eb4; }
.callout-warning:before  { content: "\f153"; color: #dc3232; }