:root {
    --tud-raspberry: rgb(165,0,52);
    --tud-raspberry-min: rgb(165,0,52,3%);
    --tud-raspberry-mid: rgb(165,0,52,20%);
    --tud-yellow: #FFB81C;
    --tud-yellow-min: #FFB81C05;
    --tud-yellow-mid: #FFB81C20;
    --tud-darkGreen: #009B77;
    --tud-darkGreen-min: #009B7710;
    --tud-darkGreen-mid: #009B7725;
    --tud-blue: #0076C2;
    --tud-blue-min: #0076C210;
    --tud-blue-mid: #0076C225;
    --tud-black: var(--pst-color-text-base);
    --tud-black-min: #56565605;
    --tud-black-mid: #56565625;
    --tud-orange: #EC6842;
    --tud-orange-min: #EC684210;
    --tud-orange-mid: #EC684225;
    --tud-cyan: #00A6D6;
    --tud-cyan-min: #00A6D610;
    --tud-cyan-mid: #00A6D625;
    --tud-gray: #7d7d7d;
    --tud-gray-min: #7d7d7d05;
    --tud-gray-mid: #7d7d7d20;
    --tud-purple: #6f1d77;
    --tud-purple-min: #6f1d7705;
    --tud-purple-mid: #6f1d7720;
    --tud-pink: #EF60A3;
    --tud-pink-min: #EF60A310;
    --tud-pink-mid: #EF60A325;
    --tud-red: #E03C31;
    --tud-red-min: #E03C3110;
    --tud-red-mid: #E03C3125;
    --tud-green: #6CC24A;
    --tud-green-min: #6CC24A10;
    --tud-green-mid: #6CC24A25;
    --tud-darkBlue: #0C2340;
    --tud-darkBlue-min: #0C234010;
    --tud-darkBlue-mid: #0C234025;
  }

  html[data-theme="dark"] {
    --tud-raspberry: #ffa7f5;
    --tud-raspberry-min: #ffa7f503;
    --tud-raspberry-mid: #ffa7f520;
    --tud-yellow: #a43a00;
    --tud-yellow-min: #a43a0005;
    --tud-yellow-mid: #a43a0020;
    --tud-darkGreen: #00bd87;
    --tud-darkGreen-min: #00bd8710;
    --tud-darkGreen-mid: #00bd8725;
    --tud-blue: #09baff;
    --tud-blue-min: #09baff10;
    --tud-blue-mid: #09baff25;
    --tud-orange: #ff581f;
    --tud-orange-min: #ff581f10;
    --tud-orange-mid: #ff581f25;
    --tud-cyan: #00a7ef;
    --tud-cyan-min: #00a7ef10;
    --tud-cyan-mid: #00a7ef25;
    --tud-gray: #828282;
    --tud-gray-min: #82828205;
    --tud-gray-mid: #82828220;
    --tud-purple: #ffa7ff;
    --tud-purple-min: #ffa7ff05;
    --tud-purple-mid: #ffa7ff20;
    --tud-pink: #ff47ab;
    --tud-pink-min: #ff47ab10;
    --tud-pink-mid: #ff47ab25;
    --tud-red: #ff7161;
    --tud-red-min: #ff716110;
    --tud-red-mid: #ff716125;
    --tud-green: #008000;
    --tud-green-min: #00800010;
    --tud-green-mid: #00800025;
    --tud-darkBlue: #c1e3ff;
    --tud-darkBlue-min: #c1e3ff10;
    --tud-darkBlue-mid: #c1e3ff25;
  }

  html {
    --pst-color-primary: var(--tud-cyan) !important;
    --pst-color-secondary: var(--tud-green) !important;
    --pst-color-table-row-hover-bg: var(--tud-raspberry-mid) !important;
}
  
  /* BLOCK COMPONENTS (admonitions, proofs, exercises) */

  /* Admonition */
  div.admonition {
    border-color: var(--tud-cyan);
    background-color: var(--tud-cyan-min);
  }
   div.admonition > .admonition-title {
    background-color: var(--tud-cyan-mid);
  }
   div.admonition > .admonition-title::after {
    color: var(--tud-cyan);
  }
  
  /* Grasple */
  div.grasple p.admonition-title::after {
    content: "\f12e";
    color: var(--tud-raspberry);
  }
  div.grasple p.admonition-title::before {
    content: "";
  }
  div.grasple {
    border-color: var(--tud-raspberry);
    background-color: var(--tud-raspberry-min);
  }
  div.grasple > p.admonition-title {
    background-color: var(--tud-raspberry-mid);
  }
  
   /* Exercise */
  div.exercise p.admonition-title::after {
    content: "\f12e";
    color: var(--tud-raspberry);
  }
  div.exercise p.admonition-title::before {
    content: "";
  }
  div.exercise {
    border-color: var(--tud-raspberry);
    background-color: var(--tud-raspberry-min);
  }
  div.exercise > p.admonition-title {
    background-color: var(--tud-raspberry-mid);
  }
  
  /* Definition */
  div.definition p.admonition-title::after {
    content: "\f02d";
    color: var(--tud-blue);
  }
  div.definition {
    border-color: var(--tud-blue);
    background-color: var(--tud-blue-min);
  }
  div.definition > p.admonition-title {
    background-color: var(--tud-blue-mid);
  }
  
  /* Axiom, Conjecture, Assumption */
  div.axiom  p.admonition-title::after,
  div.assumption  p.admonition-title::after,
  div.conjecture  p.admonition-title::after {
    content: "\f19c";
    color: var(--tud-red);
  }
  div.axiom, 
  div.assumption,
  div.conjecture{
    border-color: var(--tud-red);
    background-color: var(--tud-red-min);
  }
  div.axiom > p.admonition-title,
  div.assumption > p.admonition-title,
  div.conjecture > p.admonition-title{
    background-color: var(--tud-red-mid);
  }

  /* Property, Observation */
  div.property  p.admonition-title::after,
  div.admonition.observation > .admonition-title::after {
    content: "\f02b";
    color: var(--tud-orange);
  }
  div.property,
  div.admonition.observation{
    border-color: var(--tud-orange);
    background-color: var(--tud-orange-min);
  }
  div.property > p.admonition-title,
  div.admonition.observation > .admonition-title{
    background-color: var(--tud-orange-mid);
  }

  /* Theorem, Lemma, Preposition, Corollary, Criterion  */
  div.theorem  p.admonition-title::after,
  div.criterion p.admonition-title::after,
  div.lemma  p.admonition-title::after,
  div.proposition p.admonition-title::after,
  div.corollary p.admonition-title::after {
    content: "\f51b";
    color: var(--tud-darkGreen);
  }
  div.theorem, 
  div.criterion,
  div.lemma,
  div.proposition, 
  div.corollary {
    border-color: var(--tud-darkGreen);
    background-color: var(--tud-darkGreen-min);
  }
  div.theorem > p.admonition-title,
  div.criterion > p.admonition-title,
  div.lemma > p.admonition-title,
   div.proposition > p.admonition-title,
   div.corollary >p.admonition-title {
    background-color: var(--tud-darkGreen-mid);
  }
  
  /* Example */
  div.example {
    border-color: var(--tud-yellow);
    background-color: var(--tud-yellow-min);
  }
  div.example > p.admonition-title {
    background-color: var(--tud-yellow-mid);
    /* color: white; */
  }
  div.example p.admonition-title::after {
    content: "\f002";
    transform: scale(-1, 1);
    color: var(--tud-yellow);
  }
  
  /* Solution */
  div.admonition.solution {
    border-color: var(--tud-purple);
    background-color: var(--tud-purple-min);
  }
  div.admonition.solution > .admonition-title {
    background-color: var(--tud-purple-mid);
  }
  div.admonition.solution > .admonition-title::after {
    content: "\e5a0";
    color: var(--tud-purple);
  }
  
  /* TU Delft Proof */
  div.admonition.tudproof {
    border-color: var(--tud-darkGreen);
    background-color: var(--tud-gray-min);
  }
  div.admonition.tudproof > .admonition-title {
    background-color: var(--tud-gray-mid);
  }
  div.admonition.tudproof > .admonition-title::after {
    content: "\f51c";
    color: var(--tud-gray);
  }
  
  /* Algorithm */
  div.algorithm > .admonition-title::after {
    content: "\f051";
    color: var(--tud-darkBlue);
  }
  div.algorithm {
    border-color: var(--tud-darkBlue);
    background-color: var(--tud-darkBlue-min);
  }
  div.algorithm p.admonition-title {
    background-color: var(--tud-darkBlue-mid);
    border-top: .15rem solid var(--tud-darkBlue-mid);
    border-bottom: .15rem solid var(--tud-darkBlue-mid);
  }
  
  /* Bonus */
  div.admonition.bonus {
    border-color: var(--tud-gray);
    background-color: var(--tud-gray-min);
  }
  div.admonition.bonus > .admonition-title {
    background-color: var(--tud-gray-mid);
  }
  div.admonition.bonus > .admonition-title::after {
    content: "\f06b";
    color: var(--tud-gray);
  }
  
  /* Caution, Warning, Attention, Important */
  div.admonition.caution, div.admonition.warning, div.admonition.attention, div.admonition.important {
    border-color: var(--tud-orange);
    background-color: var(--tud-orange-min);
  }
  div.admonition.caution > .admonition-title,
   div.admonition.warning > .admonition-title,
    div.admonition.attention > .admonition-title,
     div.admonition.important > .admonition-title {
    background-color: var(--tud-orange-mid);
  }
  div.admonition.caution > .admonition-title::after,
   div.admonition.warning > .admonition-title::after,
    div.admonition.attention > .admonition-title::after,
     div.admonition.important > .admonition-title::after {
    color: var(--tud-orange);
  }
  
  /* Danger, Error */
  div.admonition.danger, 
  div.admonition.error {
    border-color: var(--tud-red);
    background-color: var(--tud-red-min);
  }
  div.admonition.danger > .admonition-title,
   div.admonition.error > .admonition-title {
    background-color: var(--tud-red-mid);
  }
  div.admonition.danger > .admonition-title::after,
   div.admonition.error > .admonition-title::after {
    color: var(--tud-red);
  }

  /* Hint, Note, SeeAlso, Tip, Remark */
  div.admonition.hint, 
  div.admonition.note, 
  div.admonition.seealso, 
  div.admonition.tip, 
  div.admonition.remark {
    border-color: var(--tud-green);
    background-color: var(--tud-green-min);
  }
  div.admonition.hint > .admonition-title,
   div.admonition.note > .admonition-title,
    div.admonition.seealso > .admonition-title,
     div.admonition.tip > .admonition-title,
      div.admonition.remark > .admonition-title  {
    background-color: var(--tud-green-mid);
  }
  div.admonition.hint > .admonition-title::after,
   div.admonition.note > .admonition-title::after,
    div.admonition.seealso > .admonition-title::after,
     div.admonition.tip > .admonition-title::after,
     div.admonition.remark > .admonition-title::after {
    color: var(--tud-green);
  }

  /* Sticky note for remark */
  div.admonition.remark > .admonition-title::after {
    content: "\f249";
  }

  /* Topic */
  aside.topic {
    background-color: var(--tud-gray-mid);
  }

  /* Version Added */
  div.versionadded {
    border-color: var(--tud-darkGreen);
    background-color: var(--tud-darkGreen-mid);
  }
  div.versionadded .versionmodified.added::before {
    color: var(--tud-darkGreen);
  }

  /* Version Changed */
  div.versionchanged {
    border-color: var(--tud-orange);
    background-color: var(--tud-orange-mid);
  }
  div.versionchanged .versionmodified.changed::before {
    color: var(--tud-orange);
  }

  /* Version Deprecated */
  div.deprecated {
    border-color: var(--tud-red);
    background-color: var(--tud-red-mid);
  }
  div.deprecated .versionmodified.deprecated::before {
    color: var(--tud-red);
  }

  /* BADGES */

  /* all badges */
  .sd-badge {
    padding: .35em .65em;
    font-size: 0.9em;
    font-weight: 700;
    line-height: 1;
    border-radius: .45rem;
  }

  /* primary */
  .sd-bg-primary{
    color: #FFFFFF !important;
    background-color: var(--tud-cyan) !important;
  }
  /* primary-line */
  .sd-outline-primary{
    color: var(--tud-cyan) !important;
    border-color: var(--tud-cyan) !important;
  }

  /* secondary */
  .sd-bg-secondary,
  .sd-btn-secondary{
    color: #FFFFFF !important;
    background-color: var(--tud-yellow) !important;
  }
  /* secondary-line */
  .sd-outline-secondary{
    color: var(--tud-yellow) !important;
    border-color: var(--tud-yellow) !important;
  }

  /* success */
  .sd-bg-success{
    color: #FFFFFF !important;
    background-color: var(--tud-darkGreen) !important;
  }
  /* success-line */
  .sd-outline-success{
    color: var(--tud-darkGreen) !important;
    border-color: var(--tud-darkGreen) !important;
  }

  /* info */
  .sd-bg-info{
    color: #FFFFFF !important;
    background-color: var(--tud-blue) !important;
  }
  /* info-line */
  .sd-outline-info{
    color: var(--tud-blue) !important;
    border-color: var(--tud-blue) !important;
  }

  /* warning */
  .sd-bg-warning{
    color: #FFFFFF !important;
    background-color: var(--tud-orange) !important;
  }
  /* warning-line */
  .sd-outline-warning{
    color: var(--tud-orange) !important;
    border-color: var(--tud-orange) !important;
  }

  /* danger */
  .sd-bg-danger{
    color: #FFFFFF !important;
    background-color: var(--tud-red) !important;
  }
  /* danger-line */
  .sd-outline-danger{
    color: var(--tud-red) !important;
    border-color: var(--tud-red) !important;
  }

  /* light */
  .sd-bg-light{
    color: var(--tud-black) !important;
    background-color: var(--tud-gray-mid) !important;
  }
  /* light-line */
  .sd-outline-light{
    color: var(--tud-gray) !important;
    border-color: var(--tud-gray) !important;
  }

  /* muted */
  .sd-bg-muted{
    color: #FFFFFF !important;
    background-color: var(--tud-purple) !important;
  }
  /* muted-line */
  .sd-outline-muted{
    color: var(--tud-purple) !important;
    border-color: var(--tud-purple) !important;
  }

  /* dark */
  .sd-bg-dark{
    color: #FFFFFF !important;
    background-color: var(--tud-darkBlue) !important;
  }
  /* dark-line */
  .sd-outline-dark{
    color: var(--tud-darkBlue) !important;
    border-color: var(--tud-darkBlue) !important;
  }

  /* white */
  .sd-bg-white{
    color: var(--tud-black) !important;
    background-color: #FFFFFF !important;
  }
  /* white-line */
  .sd-outline-white{
    color: #FFFFFF !important;
    border-color: #FFFFFF !important;
  }

  /* black */
  .sd-bg-black{
    color: #FFFFFF !important;
    background-color: var(--tud-black) !important;
  }
  /* black-line */
  .sd-outline-black{
    color: var(--tud-black) !important;
    border-color: var(--tud-black) !important;
  }

  /* BUTTONS */

  /* all buttons */
  .sd-btn{
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s, transform 0.3s;
    border: 0 !important;
  }
  .sd-btn:hover{
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    transform: scale(1.05);
    border: 0 !important;
  }

  /* primary */
  .sd-btn-primary,
  .sd-btn-info{
    color: #FFFFFF !important;
    background-color: var(--tud-cyan) !important;
    border-color: var(--tud-cyan) !important;
  }

  /* secondary */
  .sd-btn-secondary{
    color: #FFFFFF !important;
    background-color: var(--tud-yellow) !important;
    border-color: var(--tud-yellow) !important;
  }

  /* success */
  .sd-btn-success{
    color: #FFFFFF !important;
    background-color: var(--tud-darkGreen) !important;
    border-color: var(--tud-darkGreen) !important;
  }

   /* info */
   .sd-btn-info{
     color: #FFFFFF !important;
     background-color: var(--tud-blue) !important;
     border-color: var(--tud-blue) !important;
   }

  /* warning */
  .sd-btn-warning{
    color: #FFFFFF !important;
    background-color: var(--tud-orange) !important;
    border-color: var(--tud-orange) !important;
  }

  /* danger */
  .sd-btn-danger{
    color: #FFFFFF !important;
    background-color: var(--tud-red) !important;
    border-color: var(--tud-red) !important;
  }

  /* light */
  .sd-btn-light{
    color: var(--tud-black) !important;
    background-color: var(--tud-gray-mid) !important;
    border-color: var(--tud-gray) !important;
  }

  /* muted */
  .sd-btn-muted{
    color: #FFFFFF !important;
    background-color: var(--tud-purple) !important;
    border-color: var(--tud-purple) !important;
  }

  /* dark */
  .sd-btn-dark{
    color: #FFFFFF !important;
    background-color: var(--tud-darkBlue) !important;
    border-color: var(--tud-darkBlue) !important;
  }

  /* white */
  .sd-btn-white{
    color: var(--tud-black) !important;
    background-color: #FFFFFF !important;
    border-color: #FFFFFF !important;
  }

  /* black */
  .sd-btn-black{
    color: #FFFFFF !important;
    background-color: var(--tud-black) !important;
    border-color: var(--tud-black) !important;
  }

.tud-red {color: var(--tud-red);}
.tud-blue {color: var(--tud-blue);}
.tud-green {color: var(--tud-green);}
.tud-tud-raspberry {color: var(--tud-raspberry);}
.tud-yellow {color: var(--tud-yellow);}
.tud-darkGreen {color: var(--tud-darkGreen);}
.tud-orange {color: var(--tud-orange);}
.tud-cyan {color: var(--tud-cyan);}
.tud-gray {color: var(--tud-gray);}
.tud-purple {color: var(--tud-purple);}
.tud-pink {color: var(--tud-pink);}
.tud-darkBlue {color: var(--tud-darkBlue);}