.callout {
  padding: 1em 3em 1em 3.7em;
  margin-bottom: 1.5em;
  overflow: auto;
  position: relative;
  border-width: 1px 1px 3px 1px;
  border-style: solid;
}
.callout p {
  margin-bottom: 0.6em;
  margin-top: 0.5em;
}
.callout p ~ p {
  margin-top: 1em;
}
.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-info:before {
  content: "\f348";
  color: #00a0d2 ;
}
.callout-tip {
  background: #eff7ed;
  border: 1px solid #64b450;
  border-bottom: 3px solid #64b450;
}
.callout-tip:before {
  content: "\f339";
  color: #64b450;
}
.callout-alert {
  background: #fff8e5;
  border: 1px solid #ffb900;
  border-bottom: 3px solid #ffb900;
}
.callout-alert:before {
  content: "\f227";
  color: #ffb900;
}
.callout-tutorial {
  background: #f2f0f7;
  border: 1px solid #826eb4;
  border-bottom: 3px solid #826eb4;
}
.callout-tutorial:before {
  content: "\f308";
  color: #826eb4;
}
.callout-warning {
  background: #fbeaea;
  border: 1px solid #dc3232;
  border-bottom: 3px solid #dc3232;
}
.callout-warning:before {
  content: "\f153";
  color: #dc3232;
}