:root > * {
  /* The primary color of KPOps docs */
  --md-primary-fg-color: #a599ff;

  /* The second color of KPOps docs */
  --md-accent-fg-color: #b0a5ff;

  /* Create custom color variable to use for the buttons */
  --kpops-button-color: #7068ad;

  /* The footer color needs to be set sparately */
  --md-footer-bg-color: var(--md-primary-fg-color);

  /* Color the links with the primary color */
  --md-typeset-a-color: var(--md-primary-fg-color);

  --md-admonition-icon--wip: url("data:image/svg+xml;charset=utf-8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"m13.78 15.3 6 6 2.11-2.16-6-6-2.11 2.16m3.72-5.2c-.39 0-.81-.05-1.14-.19L4.97 21.25l-2.11-2.11 7.41-7.4L8.5 9.96l-.72.7-1.45-1.41v2.86l-.7.7-3.52-3.56.7-.7h2.81l-1.4-1.41 3.56-3.56a2.976 2.976 0 0 1 4.22 0L9.89 5.74l1.41 1.4-.71.71 1.79 1.78 1.82-1.88c-.14-.33-.2-.75-.2-1.12a3.49 3.49 0 0 1 3.5-3.52c.59 0 1.11.14 1.58.42L16.41 6.2l1.5 1.5 2.67-2.67c.28.47.42.97.42 1.6 0 1.92-1.55 3.47-3.5 3.47Z\"/></svg>");
}

.md-typeset .md-button, .md-button--primary {
  background-color: var(--kpops-button-color);
}

.md-typeset .md-button:hover, .md-button--primary:hover {
  border-color: white;
}

.md-typeset .admonition.wip, .md-typeset details.wip {
  border-color: rgb(160, 45, 0);
}
.md-typeset .wip > .admonition-title, .md-typeset .wip > summary {
  background-color: rgb(255, 195, 172);
}
.md-typeset .wip > .admonition-title::before,
.md-typeset .wip > summary::before {
  background-color: rgb(255, 77, 6);
  -webkit-mask-image: var(--md-admonition-icon--wip);
  mask-image: var(--md-admonition-icon--wip);
}

.md-typeset .admonition.wip, .md-typeset details.wip {
  border-color: rgb(160, 45, 0);
}
.md-typeset .wip > .admonition-title, .md-typeset .wip > summary {
  background-color: rgb(255, 195, 172);
}
.md-typeset .wip > .admonition-title::before,
.md-typeset .wip > summary::before {
  background-color: rgb(255, 77, 6);
  -webkit-mask-image: var(--md-admonition-icon--wip);
  mask-image: var(--md-admonition-icon--wip);
}

.md-typeset .admonition.wip, .md-typeset details.wip {
  border-color: rgb(160, 45, 0);
}
.md-typeset .wip > .admonition-title, .md-typeset .wip > summary {
  background-color: rgb(255, 195, 172);
}
.md-typeset .wip > .admonition-title::before,
.md-typeset .wip > summary::before {
  background-color: rgb(255, 77, 6);
  -webkit-mask-image: var(--md-admonition-icon--wip);
  mask-image: var(--md-admonition-icon--wip);
}