:root {
    --md-admonition-icon--important: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2m0 2a8 8 0 0 0-8 8 8 8 0 0 0 8 8 8 8 0 0 0 8-8 8 8 0 0 0-8-8m0 3c.552 0 1 .448 1 1v4c0 .552-.448 1-1 1s-1-.448-1-1V8c0-.552.448-1 1-1m0 8c.552 0 1 .448 1 1s-.448 1-1 1-1-.448-1-1 .448-1 1-1"/></svg>')
  }
  .md-typeset .admonition.important,
  .md-typeset details.important {
    border-color: rgb(220, 53, 69);
  }
  .md-typeset .important > .admonition-title,
  .md-typeset .important > summary {
    background-color: rgba(220, 53, 69, 0.1);
  }
  .md-typeset .important > .admonition-title::before,
  .md-typeset .important > summary::before {
    background-color: rgb(220, 53, 69);
    -webkit-mask-image: var(--md-admonition-icon--important);
            mask-image: var(--md-admonition-icon--important);
  }

.banner {
  height: 24px;       /* Made slightly taller for the warning icon */
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;       /* Increased to ensure it stays above other elements */
  text-align: center;
  background-color: #856404;
  line-height: 24px;  /* Vertically center the text */
  font-weight: 500;   /* Make text slightly bolder */
}

.banner + .md-header {
    top: 24px;          /* Match the banner height */
}

/* Adjust the main content area when banner is present */
.banner ~ .md-main {
    height: calc(100vh - 88px);  /* Adjust for banner + header height */
}

.banner a:hover {
  color: #ffffff;
  text-decoration: none;
}