.callout::before {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiMwMTUzODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bTEgMTVoLTJ2LTZoMnY2em0wLThoLTJWN2gydjJ6Ii8+PC9zdmc+");
  background-repeat: no-repeat;
  content: "";
  width: 1.2em;
  height: 1.2em;
  left: 8px;
  inset-inline-start: 8px;
  inset-inline-end: unset;
  top: 50%;
  margin-top: -9px;
  display: inline-block;
  position: absolute;
  line-height: 1;
  opacity: .8;
}
.callout {
  border-left: 3px solid #bbb;
    border-left-color: rgb(187, 187, 187);
  border-inline-start: 3px solid #bbb;
  border-inline-end: none;
  background-color: #eee;
  padding: 12px;
    padding-left: 12px;
  padding-left: 32px;
  padding-inline-start: 32px;
  padding-inline-end: 12px;
  display: block;
  position: relative;
  overflow: auto;
}


.callout.info {
  color: #01466c;
}
.callout.info {
  background-color: #d3efff;
}
.callout.info {
  border-color: #0288d1;
}


.callout.warning::before {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNiNjUzMWMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEgMjFoMjJMMTIgMiAxIDIxem0xMi0zaC0ydi0yaDJ2MnptMC00aC0ydi00aDJ2NHoiLz48L3N2Zz4=");
}
.callout.warning {
  color: #6a2802;
}
.callout.warning {
  background-color: #fee3d3;
}
.callout.warning {
  border-color: #cf4d03;
}

.mainContent .callout a{
    color: inherit;
    text-decoration-color: inherit;
}