:root {
    --md-admonition-icon-outage: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2M7 9.5C7 8.7 7.7 8 8.5 8s1.5.7 1.5 1.5S9.3 11 8.5 11 7 10.3 7 9.5m5 7.73c-1.75 0-3.29-.73-4.19-1.81L9.23 14c.45.72 1.52 1.23 2.77 1.23s2.32-.51 2.77-1.23l1.42 1.42c-.9 1.08-2.44 1.81-4.19 1.81M15.5 11c-.8 0-1.5-.7-1.5-1.5S14.7 8 15.5 8s1.5.7 1.5 1.5-.7 1.5-1.5 1.5Z"/></svg>'));
    --md-status--happy: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2M7 9.5C7 8.7 7.7 8 8.5 8s1.5.7 1.5 1.5S9.3 11 8.5 11 7 10.3 7 9.5m5 7.73c-1.75 0-3.29-.73-4.19-1.81L9.23 14c.45.72 1.52 1.23 2.77 1.23s2.32-.51 2.77-1.23l1.42 1.42c-.9 1.08-2.44 1.81-4.19 1.81M15.5 11c-.8 0-1.5-.7-1.5-1.5S14.7 8 15.5 8s1.5.7 1.5 1.5-.7 1.5-1.5 1.5Z"/></svg>')
  }
  
  .md-status--happy::after {
    mask-image: var(--md-status--happy);
    -webkit-mask-image: var(--md-status--happy);
  }

.md-typeset .admonition.outage,
.md-typeset details.outage {
    border-color: rgb(255, 0, 0);
}

.md-typeset .outage > .admonition-title,
.md-typeset .outage > summary {
    font-size:large;
    background-color: rgb(255, 0, 0);
    color: rgb(255, 0, 4);
}

.md-typeset .outage > p {
    font-size:large;
    color: rgb(255, 255, 255);
}


.md-typeset .outage > .admonition-title::before,
.md-typeset .outage > summary::before {
  background-color: rgb(255, 255, 255);
  -webkit-mask-image: var(--md-admonition-icon--outage);
          mask-image: var(--md-admonition-icon--outage);

}

:root {
    --md-admonition-icon-resolved: url('../images/resolved.svg'););
}

.md-typeset .admonition.resolved,
.md-typeset details.outage {
    border-color: rgb(255, 0, 0);
}

.md-typeset .outage > .admonition-title,
.md-typeset .outage > summary {
    font-size:large;
    background-color: rgb(255, 0, 0);
    color: rgb(255, 255, 255);
}

.md-typeset .outage > p {
    font-size:large;
    color: rgb(255, 255, 255);
}


.md-typeset .outage > .admonition-title::before,
.md-typeset .outage > summary::before {
  background-color: rgb(255, 255, 255);
  -webkit-mask-image: var(--md-admonition-icon--pied-piper);
          mask-image: var(--md-admonition-icon--pied-piper);

}