html {
  background-color: #ffffff !important;
}

h1, h2, h3, h4, h5, h6, p, li {
  color: #000000 !important;
}

.mermaid {
  background-color: #ffffff !important;
  color: #000000 !important;
  font-size: 12px !important;
}

.mermaid rect {
  fill: #f8f8f8 !important;
  stroke: #333333 !important;
}

.mermaid p {
  color: #000000 !important;
}

.mermaid path {
  stroke: #555555 !important;
}

.mermaid p {
  background-color: #f8f8f8 !important;
  color: #000000 !important;
}

.mermaid p, .mermaid text, .mermaid text > tspan {
  color: #000000 !important;
  fill: #000000 !important;
}

.mermaid line {
  stroke: #333333 !important;
}

.mermaid .note {
  fill: #ffffcc !important;
  stroke: #999999 !important;
  color: #000000 !important;
}

.docucod-mdx-code {
  background-color: #f8f8f8 !important;
}

body.dark {
  background-color: #1e1e1e !important;

  #container {
    background-color: #1e1e1e !important;
  }

  h1, h2, h3, h4, h5, h6, p, li, th, td {
    color: #ffffff !important;
  }

  .mermaid {
    background-color: #1e1e1e !important; 
    color: #ffffff !important;
  }
  
  .mermaid rect {
    fill: #2a2a2a !important;
    stroke: #aaaaaa !important;
  }
  
  .mermaid p {
    color: #ffffff !important;
  }
  
  .mermaid path {
    stroke: #cccccc !important;
  }
  
  .mermaid p {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
  }
  
  .mermaid rect,
  .mermaid polygon,
  .mermaid circle,
  .mermaid ellipse {
    fill: #2a2a2a !important;
    stroke: #444444 !important;
  }

  .mermaid p, .mermaid text, .mermaid text > tspan {
    color: #ffffff !important;
    fill: #ffffff !important;
  }

  .mermaid line {
    stroke: #444444 !important;
  }

  .mermaid .note {
    fill: #2a2a2a !important;
    stroke: #444444 !important;
    color: #ffffff !important;
  }
  
  .docucod-mdx-code {
    background-color: #2a2a2a !important;
  }

  .docucod-mdx-code-group {
    background-color: #2a2a2a !important;
  }

  .docucod-mdx-code-group-header {
    background-color: #2a2a2a !important;
  }

  .prism-code {
    background-color: transparent !important;
  }
}