/* CSS rules for custom admonitions */


:root {
  /* light mode */
  --admonition-background-color-light: rgb(255, 255, 255); 


  /* dark mode */
  --admonition-background-color-dark: #2632380e;
  /* --admonition-background-color-dark: rgba(0, 14, 49, 0.01); */
}

[data-mode="light"] .admonition.tip {
  background-color: var(--admonition-background-color-light) !important;
}
[data-mode="dark"] .admonition.tip {
  background-color: var(--admonition-background-color-dark) !important;
}

@media (prefers-color-scheme: light) {
  .admonition.tip {
    background-color: var(--admonition-background-color-light) !important;
  }
}
@media (prefers-color-scheme: dark) {
  .admonition.tip {
    background-color: var(--admonition-background-color-dark) !important;
  }
}





.admonition {
  border-radius: 16px !important;
}

.admonition-title {
  border-radius: 12px 12px 0 0 !important;
}

div.interactive {
  /* No visual changes for the web view */
  /* Created to flag interactive problems to be hidden for the printed edition */
  display: block;
}

div.noninteractive {
  display: none;
}

/* Stil for quiz */
div.quiz {
  border-left-color: rgb(128, 0, 85);
  background-color: rgba(128, 0, 85, 0);
}

div.quiz > .admonition-title {
  background-color: rgba(128, 0, 85, 0.1);
  display: flex;
  align-items: center;
}

[data-mode=light] div.quiz > .admonition-title::after {
  content: url("./icons/outline/light_mode/question.svg");
  width: 20px;
  height: 20px;
}

@media (prefers-color-scheme: light) {
  div.quiz > .admonition-title::after {
    content: url("./icons/outline/light_mode/question.svg");
    width: 20px;
    height: 20px;
  }
}

[data-mode=dark] div.quiz > .admonition-title::after {
  content: url("./icons/outline/dark_mode/question.svg");
  width: 20px;
  height: 20px;
}

@media (prefers-color-scheme: dark) {
  div.quiz > .admonition-title::after {
    content: url("./icons/outline/dark_mode/question.svg");
    width: 20px;
    height: 20px;
  }
}


[data-mode=light] div.quiz {
  background-color: white !important;
  background-color: var(--admonition-background-color-light);
}


@media (prefers-color-scheme: light) {
  div.quiz {
    background-color: var(--admonition-background-color-light);
  }
}

/* Dark modes for problem-level-3 */

[data-mode=dark] div.quiz {
  background-color: var(--admonition-background-color-dark) !important;
}

@media (prefers-color-scheme: dark) {
  div.quiz {
    background-color: var(--admonition-background-color-dark) !important;
  }
}


/* Stil for oppsummering */
div.reminder {
  border-left-color: rgb(128, 0, 85);
  background-color: rgba(128, 0, 85, 0.025);
}

div.reminder > .admonition-title {
  background-color: rgba(128, 0, 85, 0.1);
  display: flex;
  align-items: center;
}

[data-mode=light] div.reminder > .admonition-title::after {
  content: url("./icons/outline/light_mode/backward.svg");
  width: 20px;
  height: 20px;
}

@media (prefers-color-scheme: light) {
  div.reminder > .admonition-title::after {
    content: url("./icons/outline/light_mode/backward.svg");
    width: 20px;
    height: 20px;
  }
}

[data-mode=dark] div.reminder > .admonition-title::after {
  content: url("./icons/outline/dark_mode/backward.svg");
  width: 20px;
  height: 20px;
}

@media (prefers-color-scheme: dark) {
  div.reminder > .admonition-title::after {
    content: url("./icons/outline/dark_mode/backward.svg");
    width: 20px;
    height: 20px;
  }
}

[data-mode=light] div.reminder {
  background-color: white !important;
  background-color: var(--admonition-background-color-light);
}


@media (prefers-color-scheme: light) {
  div.reminder {
    background-color: var(--admonition-background-color-light);
  }
}

/* Dark modes for problem-level-3 */

[data-mode=dark] div.reminder {
  background-color: var(--admonition-background-color-dark) !important;
}

@media (prefers-color-scheme: dark) {
  div.reminder {
    background-color: var(--admonition-background-color-dark) !important;
  }
}




/* Stil for oppsummering */
div.summary {
  border-left-color: rgb(0, 128, 128);
}

div.summary > .admonition-title {
  background-color: rgba(0, 128, 128, 0.1);
    /* display: flex; */
    /* align-items: center; */
}

[data-mode=light] div.summary > .admonition-title::after {
  content: url("./icons/outline/light_mode/summary.svg");
  width: 20px;
  height: 20px;
}

@media (prefers-color-scheme: light) {
  div.summary > .admonition-title::after {
    content: url("./icons/outline/light_mode/summary.svg");
    width: 20px;
    height: 20px;
  }
}


[data-mode=dark] div.summary > .admonition-title::after {
  content: url("./icons/outline/dark_mode/summary.svg");
  width: 20px;
  height: 20px;
}

@media (prefers-color-scheme: dark) {
  div.summary > .admonition-title::after {
    content: url("./icons/outline/dark_mode/summary.svg");
    width: 20px;
    height: 20px;
  }
}

[data-mode=light] div.summary {
  background-color: white !important;
  background-color: var(--admonition-background-color-light);
}


@media (prefers-color-scheme: light) {
  div.summary {
    background-color: var(--admonition-background-color-light);
  }
}

/* Dark modes for problem-level-3 */

[data-mode=dark] div.summary {
  background-color: var(--admonition-background-color-dark) !important;
}

@media (prefers-color-scheme: dark) {
  div.summary {
    background-color: var(--admonition-background-color-dark) !important;
  }
}



/* Stil for teoriblokker */
div.theory {
  border-left-color: rgb(0, 80, 171);
  background-color: rgba(0, 80, 171, 0.1);
}
  

div.theory > .admonition-title {
  background-color: rgba(0, 80, 160, 0.1);
  position: relative; 
}
  

[data-mode=light] div.theory > .admonition-title::after {
  content: url("./icons/outline/light_mode/book.svg");
  width: 20px;
  height: 20px;
}

@media (prefers-color-scheme: light) {
  div.theory > .admonition-title::after {
    content: url("./icons/outline/light_mode/book.svg");
    width: 20px;
    height: 20px;
  }
}

[data-mode=dark] div.theory > .admonition-title::after {
  content: url("./icons/outline/dark_mode/book.svg");
  width: 20px;
  height: 20px;
}

@media (prefers-color-scheme: dark) {
  div.theory > .admonition-title::after {
    content: url("./icons/outline/dark_mode/book.svg");
    width: 20px;
    height: 20px;
  }
}


[data-mode=light] div.theory {
  background-color: white !important;
  background-color: var(--admonition-background-color-light);
}


@media (prefers-color-scheme: light) {
  div.theory {
    background-color: var(--admonition-background-color-light);
  }
}

/* Dark modes for problem-level-3 */

[data-mode=dark] div.theory {
  background-color: var(--admonition-background-color-dark) !important;
}

@media (prefers-color-scheme: dark) {
  div.theory {
    background-color: var(--admonition-background-color-dark) !important;
  }
}



/* Stil for eksempler */
[data-mode="dark"] div.explore {
  border-left-color: rgba(0, 207, 207, 0.6);
}

[data-mode="light"] div.explore {
  border-left-color: rgba(0, 131, 131, 0.6);
} 

@media (prefers-color-scheme: light) {
  div.explore {
    border-left-color: rgba(0, 131, 131, 0.6);
  }
}

@media (prefers-color-scheme: dark) {
  div.explore {
    border-left-color: rgba(0, 207, 207, 0.6);
  }
}

div.explore > .admonition-title {
  background-color: rgba(0, 128, 128, 0.3) !important;
}

div.explore > .admonition-title:before {
  color: rgba(0, 128, 128, 0.6);
}


[data-mode=light] div.explore > .admonition-title::after {
  content: url("./icons/outline/light_mode/magnifying.svg");
  width: 20px;
  height: 20px;
}

@media (prefers-color-scheme: light) {
  div.explore > .admonition-title::after {
    content: url("./icons/outline/light_mode/magniyfing.svg");
    width: 20px;
    height: 20px;
  }
}

[data-mode=dark] div.explore > .admonition-title::after {
  content: url("./icons/outline/dark_mode/magnifying.svg");
  width: 20px;
  height: 20px;
}

@media (prefers-color-scheme: dark) {
  div.explore > .admonition-title::after {
    content: url("./icons/outline/dark_mode/magnifying.svg");
    width: 20px;
    height: 20px;
  }
}


[data-mode=light] div.explore {
  background-color: white !important;
  background-color: var(--admonition-background-color-light);
}


@media (prefers-color-scheme: light) {
  div.explore {
    background-color: var(--admonition-background-color-light);
  }
}

/* Dark modes for problem-level-3 */

[data-mode=dark] div.explore {
  background-color: var(--admonition-background-color-dark) !important;
}

@media (prefers-color-scheme: dark) {
  div.explore {
    background-color: var(--admonition-background-color-dark) !important;
  }
}
    

/* Stil for eksempler */
div.example {
  border-left-color: #FFC107;
}
  
div.example > .admonition-title {
  background-color: #FFECB3 !important;
}
  
div.example > .admonition-title:before {
  color: #FFECB3;
}

[data-mode=dark] div.example > .admonition-title {
  background-color: #ff6f0013 !important;
}

@media (prefers-color-scheme: dark) {
  div.example > .admonition-title {
    background-color: #ff6f0013 !important;
  }
}

@media (prefers-color-scheme: light) {
  div.example > .admonition-title {
    background-color: #FFECB3 !important;
  }
}
  


[data-mode=light] div.example > .admonition-title::after {
  content: url("./icons/outline/light_mode/pencil_square.svg");
  width: 20px;
  height: 20px;
}
  
@media (prefers-color-scheme: light) {
  div.example > .admonition-title::after {
    content: url("./icons/outline/light_mode/pencil_square.svg");
    width: 20px;
    height: 20px;
  }
}
  
[data-mode=dark] div.example > .admonition-title::after {
  content: url("./icons/outline/dark_mode/pencil_square.svg");
  width: 20px;
  height: 20px;
}

@media (prefers-color-scheme: dark) {
  div.example > .admonition-title::after {
    content: url("./icons/outline/dark_mode/pencil_square.svg");
    width: 20px;
    height: 20px;
  }
}

[data-mode=light] div.example {
  background-color: white !important;
  background-color: var(--admonition-background-color-light);
}


@media (prefers-color-scheme: light) {
  div.example {
    background-color: var(--admonition-background-color-light);
  }
}

/* Dark modes for problem-level-3 */

[data-mode=dark] div.example {
  background-color: var(--admonition-background-color-dark) !important;
}

@media (prefers-color-scheme: dark) {
  div.example {
    background-color: var(--admonition-background-color-dark) !important;
  }
}







  
/* Stil for fasit */
div.answer {
  border-left-color: rgba(171, 86, 241, 0.6);
}

div.answer > .admonition-title {
  background-color: rgba(171, 86, 241, 0);
}

div.answer > .admonition-title::before {
  color: rgba(171, 86, 241, 0);
}


[data-mode=light] div.answer > .admonition-title::after {
  content: url("./icons/outline/light_mode/square_check.svg");
  width: 20px;
  height: 20px;
}

  
@media (prefers-color-scheme: light) {
  div.answer > .admonition-title::after {
    content: url("./icons/outline/light_mode/square_check.svg");
    width: 20px;
    height: 20px;
  }
}
  
[data-mode=dark] div.answer > .admonition-title::after {
  content: url("./icons/outline/dark_mode/square_check.svg");
  width: 20px;
  height: 20px;
}

@media (prefers-color-scheme: dark) {
  div.answer > .admonition-title::after {
    content: url("./icons/outline/dark_mode/square_check.svg");
    width: 20px;
    height: 20px;
  }
}




[data-mode=light] div.answer {
  background-color: var(--admonition-background-color-light) !important;
}

[data-mode=dark] div.answer > .admonition-title {
  background-color: rgba(33, 33, 60, 0.647) !important;
}

@media (prefers-color-scheme: dark) {
  div.answer > .admonition-title {
    background-color: rgba(33, 33, 60, 0.647) !important;
  }
}

[data-mode=light] div.answer > .admonition-title {
  background-color: white !important;
}

@media (prefers-color-scheme: light) {
  div.answer > .admonition-title {
    background-color: white !important;
  }
}

@media (prefers-color-scheme: light) {
  div.answer {
    background-color: var(--admonition-background-color-light);
  }
}


[data-mode=dark] div.answer {
  background-color: var(--admonition-background-color-dark) !important;
}

@media (prefers-color-scheme: dark) {
  div.answer {
    background-color: var(--admonition-background-color-dark) !important;
  }
}











/* Stil for løsningsforslag */
div.solution {
  border-left-color: rgba(171, 86, 241, 0.6);
}

div.solution > .admonition-title {
  background-color: rgba(171, 86, 241, 0);
}

div.solution > .admonition-title::before {
  color: rgba(171, 86, 241, 0);
}

div.solution > .admonition-title::after {
  content: url("./icons/outline/unlock.svg");
  width: 20px;
  height: 20px;
}


[data-mode=light] div.solution > .admonition-title::after {
  content: url("./icons/outline/light_mode/unlock.svg");
  width: 20px;
  height: 20px;
}
  
@media (prefers-color-scheme: light) {
  div.solution > .admonition-title::after {
    content: url("./icons/outline/light_mode/unlock.svg");
    width: 20px;
    height: 20px;
  }
}
  
[data-mode=dark] div.solution > .admonition-title::after {
  content: url("./icons/outline/dark_mode/unlock.svg");
  width: 20px;
  height: 20px;
}

@media (prefers-color-scheme: dark) {
  div.solution > .admonition-title::after {
    content: url("./icons/outline/dark_mode/unlock.svg");
    width: 20px;
    height: 20px;
  }
}


[data-mode=light] div.solution {
  background-color: var(--admonition-background-color-light) !important;
}

[data-mode=dark] div.solution > .admonition-title {
  background-color: rgba(33, 33, 60, 0.647) !important;
}

@media (prefers-color-scheme: dark) {
  div.solution > .admonition-title {
    background-color: rgba(33, 33, 60, 0.647) !important;
  }
}

[data-mode=light] div.solution > .admonition-title {
  background-color: white !important;
}

@media (prefers-color-scheme: light) {
  div.solution > .admonition-title {
    background-color: white !important;
  }
}

@media (prefers-color-scheme: light) {
  div.solution {
    background-color: var(--admonition-background-color-light);
  }
}

/* Dark modes for problem-level-3 */

[data-mode=dark] div.solution {
  background-color: var(--admonition-background-color-dark) !important;
}

@media (prefers-color-scheme: dark) {
  div.solution {
    background-color: var(--admonition-background-color-dark) !important;
  }
}








  
  
/* Stil for oppgaver: level 1 */
div.problem-level-1 {
  border-left-color: rgba(0, 98, 190, 0.6);
}

div.problem-level-1 > .admonition-title {
  background-color: rgba(0, 98, 190, 0.2);
  display: flex;
  align-items: center;
}

[data-mode=dark] div.problem-level-1 {
  border-left-color: rgb(0, 98, 190, 0.8);
}

@media (prefers-color-scheme: dark) {
  div.problem-level-1 {
    border-left-color: rgb(0, 98, 190, 0.8);
  }
}

/* div.problem-level-1 > .admonition-title::before {
  color: rgba(0, 195, 255, 0.2);
} */

div.problem-level-1 > .admonition-title::after {
  content: 
    url("./icons/outline/light_mode/fire.svg");
  width: 20px;
  height: 20px;
  display: inline-block;
  white-space: nowrap;
}

[data-mode=light] div.problem-level-1 > .admonition-title::after {
  content: 
    url("./icons/outline/light_mode/fire.svg");
  width: 20px;
  height: 20px;
  display: inline-block;
  white-space: nowrap;
}

[data-mode=dark] div.problem-level-1 > .admonition-title::after {
  content: 
    url("./icons/outline/dark_mode/fire.svg");
  width: 20px;
  height: 20px;
  display: inline-block;
  white-space: nowrap;
}

@media (prefers-color-scheme: light) {
  div.problem-level-1 > .admonition-title::after {
    content: 
      url("./icons/outline/light_mode/fire.svg");
    width: 20px;
    height: 20px;
    display: inline-block;
    white-space: nowrap;
  }
}

@media (prefers-color-scheme: dark) {
  div.problem-level-1 > .admonition-title::after {
    content: 
      url("./icons/outline/dark_mode/fire.svg");
    width: 20px;
    height: 20px;
    display: inline-block;
    white-space: nowrap;
  }
}


/* Light modes for problem-level-1 */

[data-mode=light] div.problem-level-1 {
  background-color: white !important;
  background-color: var(--admonition-background-color-light);
}


@media (prefers-color-scheme: light) {
  div.problem-level-1 {
    background-color: var(--admonition-background-color-light);
  }
}

/* Dark modes for problem-level-1 */

[data-mode=dark] div.problem-level-1 {
  background-color: var(--admonition-background-color-dark) !important;
}

@media (prefers-color-scheme: dark) {
  div.problem-level-1 {
    background-color: var(--admonition-background-color-dark) !important;
  }
}



  
  /* Stil for oppgaver: level 2 */
  div.problem-level-2 {
    border-left-color: rgba(0, 98, 190, 0.6);
  }
  
  div.problem-level-2 > .admonition-title {
    background-color: rgba(0, 98, 190, 0.2);
    padding-left: 1.35cm;
    display: flex;
    align-items: center;
  }


[data-mode=dark] div.problem-level-2 {
  border-left-color: rgb(0, 98, 190, 0.8);
}

@media (prefers-color-scheme: dark) {
  div.problem-level-2 {
    border-left-color: rgb(0, 98, 190, 0.8);
  }
}
  
  /* div.problem-level-2 > .admonition-title::before {
    color: rgba(0, 195, 255, 0.2);
  } */
  
div.problem-level-2 > .admonition-title::after {
  content: 
    url("./icons/outline/light_mode/fire.svg") ""
    url("./icons/outline/light_mode/fire.svg");
  width: 20px;
  height: 20px;
  display: inline-block;
  white-space: nowrap;
}

[data-mode=light] div.problem-level-2 > .admonition-title::after {
  content: 
    url("./icons/outline/light_mode/fire.svg") ""
    url("./icons/outline/light_mode/fire.svg");
  width: 20px;
  height: 20px;
  display: inline-block;
  white-space: nowrap;
}

[data-mode=dark] div.problem-level-2 > .admonition-title::after {
  content: 
    url("./icons/outline/dark_mode/fire.svg") ""
    url("./icons/outline/dark_mode/fire.svg");
  width: 20px;
  height: 20px;
  display: inline-block;
  white-space: nowrap;
}

@media (prefers-color-scheme: light) {
  div.problem-level-2 > .admonition-title::after {
    content: 
      url("./icons/outline/light_mode/fire.svg") ""
      url("./icons/outline/light_mode/fire.svg");
    width: 20px;
    height: 20px;
    display: inline-block;
    white-space: nowrap;
  }
}


@media (prefers-color-scheme: dark) {
  div.problem-level-2 > .admonition-title::after {
    content: 
      url("./icons/outline/dark_mode/fire.svg") ""
      url("./icons/outline/dark_mode/fire.svg");
    width: 20px;
    height: 20px;
    display: inline-block;
    white-space: nowrap;
  }
}




/* Light modes for problem-level-2 */

[data-mode=light] div.problem-level-2 {
  background-color: white !important;
  background-color: var(--admonition-background-color-light);
}


@media (prefers-color-scheme: light) {
  div.problem-level-2 {
    background-color: var(--admonition-background-color-light);
  }
}

/* Dark modes for problem-level-2 */

[data-mode=dark] div.problem-level-2 {
  background-color: var(--admonition-background-color-dark) !important;
}

@media (prefers-color-scheme: dark) {
  div.problem-level-2 {
    background-color: var(--admonition-background-color-dark) !important;
  }
}

  
  /* Stil for oppgaver: level 3 */
  div.problem-level-3 {
    border-left-color: rgba(0, 98, 190, 0.6);
  }
  
  div.problem-level-3 > .admonition-title {
    background-color: rgba(0, 98, 190, 0.2);
    padding-left: 1.85cm;
    display: flex;
    align-items: center;
  }
  

[data-mode=dark] div.problem-level-3 {
  border-left-color: rgb(0, 98, 190, 0.8);
}

@media (prefers-color-scheme: dark) {
  div.problem-level-3 {
    border-left-color: rgb(0, 98, 190, 0.8);
  }
}
  /* div.problem-level-3 > .admonition-title::before {
    color: rgba(0, 195, 255, 0.2);
  } */
  
div.problem-level-3 > .admonition-title::after {
  content: 
    url("./icons/outline/light_mode/fire.svg") ""
    url("./icons/outline/light_mode/fire.svg") ""
    url("./icons/outline/light_mode/fire.svg");
  width: 20px;
  height: 20px;
  display: inline-block;
  white-space: nowrap;
}

[data-mode=light] div.problem-level-3 > .admonition-title::after {
  content: 
    url("./icons/outline/light_mode/fire.svg") ""
    url("./icons/outline/light_mode/fire.svg") ""
    url("./icons/outline/light_mode/fire.svg");
  width: 20px;
  height: 20px;
  display: inline-block;
  white-space: nowrap;
}

[data-mode=dark] div.problem-level-3 > .admonition-title::after {
  content: 
    url("./icons/outline/dark_mode/fire.svg") ""
    url("./icons/outline/dark_mode/fire.svg") ""
    url("./icons/outline/dark_mode/fire.svg");
  width: 20px;
  height: 20px;
  display: inline-block;
  white-space: nowrap;
}

@media (prefers-color-scheme: light) {
  div.problem-level-3 > .admonition-title::after {
    content: 
      url("./icons/outline/light_mode/fire.svg") ""
      url("./icons/outline/light_mode/fire.svg") ""
      url("./icons/outline/light_mode/fire.svg");
    width: 20px;
    height: 20px;
    display: inline-block;
    white-space: nowrap;
  }
}


@media (prefers-color-scheme: dark) {
  div.problem-level-3 > .admonition-title::after {
    content: 
      url("./icons/outline/dark_mode/fire.svg") ""
      url("./icons/outline/dark_mode/fire.svg") ""
      url("./icons/outline/dark_mode/fire.svg");
    width: 20px;
    height: 20px;
    display: inline-block;
    white-space: nowrap;
  }
}


/* Light modes for problem-level-3 */

[data-mode=light] div.problem-level-3 {
  background-color: white !important;
  background-color: var(--admonition-background-color-light);
}


@media (prefers-color-scheme: light) {
  div.problem-level-3 {
    background-color: var(--admonition-background-color-light);
  }
}

/* Dark modes for problem-level-3 */

[data-mode=dark] div.problem-level-3 {
  background-color: var(--admonition-background-color-dark) !important;
}

@media (prefers-color-scheme: dark) {
  div.problem-level-3 {
    background-color: var(--admonition-background-color-dark) !important;
  }
}

/* Stil for eksempelkode */
div.examplecode {
  border-left-color: rgba(241, 130, 86, 0.6);
}
  
div.examplecode > .admonition-title {
  background-color: rgba(241, 130, 86, 0.3) !important;
}
  
div.examplecode > .admonition-title:before {
  color: rgba(241, 130, 86, 0.3);
}

div.examplecode > .admonition-title::after {
  content: "💻";
  white-space: nowrap;
  display: inline;
}
  
  
/* Stil for underveisoppgaver */


[data-mode=light] div.check {
  border-left-color: rgba(0, 35, 190, 0.6);
}
@media (prefers-color-scheme: light) {
  div.check { 
    border-left-color: rgba(0, 35, 190, 0.6);
  }
}

[data-mode=dark] div.check {
  border-left-color: rgb(0, 68, 255);
}

@media (prefers-color-scheme: dark) {
  div.check {
    border-left-color: rgb(0, 68, 255);
  }
}


div.check > .admonition-title {
  background-color: rgba(0, 35, 190, 0.2);
}

div.check > .admonition-title::after {
  content: url("./icons/solid/pencil_square.svg");
  width: 20px;
  height: 20px;
}

[data-mode=light] div.check > .admonition-title::after {
  content: url("./icons/solid/light_mode/pencil_square.svg");
  width: 20px;
  height: 20px;
}
  
@media (prefers-color-scheme: light) {
  div.check > .admonition-title::after {
    content: url("./icons/solid/light_mode/pencil_square.svg");
    width: 20px;
    height: 20px;
  }
}
  
[data-mode=dark] div.check > .admonition-title::after {
  content: url("./icons/solid/dark_mode/pencil_square.svg");
  width: 20px;
  height: 20px;
}

@media (prefers-color-scheme: dark) {
  div.check > .admonition-title::after {
    content: url("./icons/solid/dark_mode/pencil_square.svg");
    width: 20px;
    height: 20px;
  }
}


/* Light modes for underveisoppgaver */

[data-mode=light] div.check {
  background-color: white !important;
  background-color: var(--admonition-background-color-light);
}


@media (prefers-color-scheme: light) {
  div.check {
    background-color: var(--admonition-background-color-light);
  }
}

/* Dark modes for Underveisoppgaver */

[data-mode=dark] div.check {
  background-color: var(--admonition-background-color-dark) !important;
}

@media (prefers-color-scheme: dark) {
  div.check {
    background-color: var(--admonition-background-color-dark) !important;
  }
}



  
  /* Stil for diskusjonsspørsmål */
  div.discussion {
    border-left-color: rgba(15, 186, 3, 0.6);
  }
  
  div.discussion > .admonition-title {
    background-color: rgba(15, 186, 3, 0.2);
  }
  
  div.discussion > .admonition-title::before {
    color: rgba(15, 186, 3, 0.2);
  }
  
  div.discussion > .admonition-title::after {
    content: "💬";
  }
  
  
/* Stil for oppgaver med programmering */
div.progging {
  border-left-color: rgba(0, 144, 176, 0.6);
}

div.progging > .admonition-title {
  background-color: rgba(0, 144, 176, 0.2);
}

div.progging > .admonition-title::before {
  color: rgba(0, 255, 213, 0.2);
}

div.progging > .admonition-title::after {
  content: "💻";
}


/* Stil for side notes */
div.sidenote {
  border-left-color: rgba(0, 195, 255, 0.6);
}

div.sidenote > .admonition-title {
  background-color: rgba(0, 195, 255, 0.2);
}

div.sidenote > .admonition-title::before {
  color: rgba(0, 195, 255, 0);
}



[data-mode=light] div.sidenote > .admonition-title::after {
  content: url("./icons/solid/light_mode/scroll.svg");
  width: 20px;
  height: 20px;
}
  
@media (prefers-color-scheme: light) {
  div.sidenote > .admonition-title::after {
    content: url("./icons/solid/light_mode/scroll.svg");
    width: 20px;
    height: 20px;
  }
}
  
[data-mode=dark] div.sidenote > .admonition-title::after {
  content: url("./icons/solid/dark_mode/scroll.svg");
  width: 20px;
  height: 20px;
}

@media (prefers-color-scheme: dark) {
  div.sidenote > .admonition-title::after {
    content: url("./icons/solid/dark_mode/scroll.svg");
    width: 20px;
    height: 20px;
  }
}




  
  
/* Stil for hints */
div.hints {
  border-left-color: rgba(0, 195, 255, 0.6);
}

div.hints > .admonition-title {
  background-color: rgba(0, 195, 255, 0);
}

div.hints > .admonition-title::before {
  color: rgba(0, 195, 255, 0);
}


[data-mode=light] div.hints > .admonition-title::after {
  content: url("./icons/outline/light_mode/key.svg");
  width: 20px;
  height: 20px;
}
  
@media (prefers-color-scheme: light) {
  div.hints > .admonition-title::after {
    content: url("./icons/outline/light_mode/key.svg");
    width: 20px;
    height: 20px;
  }
}
  
[data-mode=dark] div.hints > .admonition-title::after {
  content: url("./icons/outline/dark_mode/key.svg");
  width: 20px;
  height: 20px;
}

@media (prefers-color-scheme: dark) {
  div.hints > .admonition-title::after {
    content: url("./icons/outline/dark_mode/key.svg");
    width: 20px;
    height: 20px;
  }
}



/* Stil for kodefeil */
div.pythonerror {
  border-left-color: rgba(217, 0, 255, 0.6);
}

div.pythonerror > .admonition-title {
  background-color: rgba(217, 0, 255, 0);
}

div.pythonerror > .admonition-title::before {
  color: rgba(217, 0, 255, 0);
}


[data-mode=light] div.pythonerror > .admonition-title::after {
  content: url("./icons/solid/light_mode/python.svg");
  width: 20px;
  height: 20px;
}
  
@media (prefers-color-scheme: light) {
  div.pythonerror > .admonition-title::after {
    content: url("./icons/solid/light_mode/python.svg");
    width: 20px;
    height: 20px;
  }
}
  
[data-mode=dark] div.pythonerror > .admonition-title::after {
  content: url("./icons/solid/dark_mode/python.svg");
  width: 20px;
  height: 20px;
}

@media (prefers-color-scheme: dark) {
  div.pythonerror > .admonition-title::after {
    content: url("./icons/solid/dark_mode/python.svg");
    width: 20px;
    height: 20px;
  }
}




/* Append an icon after the title in any admonition with the 'admonition-icon-write' class */
.admonition.admonition-icon-write > .admonition-title::after {
  content: url('/_static/icons/stickers/edit.svg'); /* Path to your SVG icon */
  display: inline-block;
  margin-left: 8px; /* Space between the title and the new icon */
  vertical-align: middle; /* Aligns the icon vertically with the title */
  width: 24px; /* Adjust the icon size */
  height: 24px;
}



[data-mode=light] blockquote {
  color: #007acc; /* Replace with any color code you prefer */
  background-color: rgba(183, 215, 255, 0.251); /* Replace with any color code you prefer */
  border-left: 5px solid #007acc; /* Optional: changes the left border color */
  padding-left: 10px; /* Optional: adds some padding */
}

@media (prefers-color-scheme: light) {
  blockquote {
    color: #007acc !important; /* Replace with any color code you prefer */
    background-color: rgba(183, 215, 255, 0.251) !important; /* Replace with any color code you prefer */
    border-left: 5px solid #007acc !important; /* Optional: changes the left border color */
    padding-left: 10px; /* Optional: adds some padding */
  }
}


[data-mode=dark] blockquote {
  color: #007acc !important; /* Replace with any color code you prefer */
  background-color: #007acc26 !important; /* Replace with any color code you prefer */
  border-left: 5px solid #007acc !important; /* Optional: changes the left border color */
  padding-left: 10px; /* Optional: adds some padding */
}

@media (prefers-color-scheme: dark) {
  blockquote {
    color: #007acc !important; /* Replace with any color code you prefer */
    background-color: #007acc26 !important; /* Replace with any color code you prefer */
    border-left: 5px solid #007acc !important; /* Optional: changes the left border color */
    padding-left: 10px; /* Optional: adds some padding */
  }
}





.admonition.dropdown.toggle-hidden { /* Replace with your actual class */
  height: 40px !important; /* Adjust as needed */
  overflow: hidden !important; /* Hide any overflow */
}











/* Stil for blandede oppgaver, eksamensoppgaver osv */


[data-mode=light] div.exercise {
  border-left-color: rgba(0, 98, 190, 0.6);
}

div.exercise > .admonition-title {
  background-color: rgba(0, 98, 190, 0.2);
  display: flex;
  align-items: center;
}


@media (prefers-color-scheme: light) {
  div.exercise { 
    border-left-color: rgba(0, 98, 190, 0.6);
  }
}

[data-mode=dark] div.exercise {
  border-left-color: rgb(0, 98, 190, 0.8);
}

@media (prefers-color-scheme: dark) {
  div.exercise {
    border-left-color: rgb(0, 98, 190, 0.8);
  }
}


div.exercise > .admonition-title::after {
  content: url("./icons/solid/pencil_square.svg");
  width: 20px;
  height: 20px;
}

[data-mode=light] div.exercise > .admonition-title::after {
  content: url("./icons/solid/light_mode/pencil_square.svg");
  width: 20px;
  height: 20px;
}
  
@media (prefers-color-scheme: light) {
  div.exercise > .admonition-title::after {
    content: url("./icons/solid/light_mode/pencil_square.svg");
    width: 20px;
    height: 20px;
  }
}
  
[data-mode=dark] div.exercise > .admonition-title::after {
  content: url("./icons/solid/dark_mode/pencil_square.svg");
  width: 20px;
  height: 20px;
}

@media (prefers-color-scheme: dark) {
  div.exercise > .admonition-title::after {
    content: url("./icons/solid/dark_mode/pencil_square.svg");
    width: 20px;
    height: 20px;
  }
}


/* Light modes for underveisoppgaver */

[data-mode=light] div.exercise {
  background-color: white !important;
  background-color: var(--admonition-background-color-light);
}


@media (prefers-color-scheme: light) {
  div.exercise {
    background-color: var(--admonition-background-color-light);
  }
}

/* Dark modes for Underveisoppgaver */

[data-mode=dark] div.exercise {
  background-color: var(--admonition-background-color-dark) !important;
}

@media (prefers-color-scheme: dark) {
  div.exercise {
    background-color: var(--admonition-background-color-dark) !important;
  }
}






/* Stil med RPG-fargekoding for hver vanskelighetsgrad: Common */


[data-mode=light] div.common {
  border-left-color: #26A69A;
}

[data-mode=light] div.common > .admonition-title {
  background-color: #E0F2F1;
  display: flex;
  align-items: center;
}


@media (prefers-color-scheme: light) {
  div.common { 
    border-left-color: #26A69A;
  }
  div.common > .admonition-title {
    background-color: #E0F2F1;
    display: flex;
    align-items: center;
  }
}

[data-mode=dark] div.common {
  border-left-color: #00897B;
}

[data-mode=dark] div.common > .admonition-title {
  background-color: #004d403f;
  display: flex;
  align-items: center;
}

@media (prefers-color-scheme: dark) {
  div.common {
    border-left-color: #26A69A;
  }

  div.common > .admonition-title {
    background-color: #004d403f;
    display: flex;
    align-items: center;
  }
}


div.common > .admonition-title::after {
  content: 
    url("./icons/outline/light_mode/fire.svg");
  width: 20px;
  height: 20px;
  display: inline-block;
  white-space: nowrap;
}

[data-mode=light] div.common > .admonition-title::after {
  content: 
    url("./icons/outline/light_mode/fire.svg");
  width: 20px;
  height: 20px;
  display: inline-block;
  white-space: nowrap;
}
  
@media (prefers-color-scheme: light) {
  div.common > .admonition-title::after {
    content: 
      url("./icons/outline/light_mode/fire.svg");
    width: 20px;
    height: 20px;
    display: inline-block;
    white-space: nowrap;
  }
}
  
[data-mode=dark] div.common > .admonition-title::after {
  content: 
    url("./icons/outline/dark_mode/fire.svg");
  width: 20px;
  height: 20px;
  display: inline-block;
  white-space: nowrap;
}

@media (prefers-color-scheme: dark) {
  div.common > .admonition-title::after {
    content: 
      url("./icons/outline/dark_mode/fire.svg");
    width: 20px;
    height: 20px;
    display: inline-block;
    white-space: nowrap;
  }
}


/* Light modes for underveisoppgaver */

[data-mode=light] div.common {
  background-color: white !important;
  background-color: var(--admonition-background-color-light);
}


@media (prefers-color-scheme: light) {
  div.common {
    background-color: var(--admonition-background-color-light);
  }
}

/* Dark modes for Underveisoppgaver */

[data-mode=dark] div.common {
  background-color: var(--admonition-background-color-dark) !important;
}

@media (prefers-color-scheme: dark) {
  div.common {
    background-color: var(--admonition-background-color-dark) !important;
  }
}









/* Stil med RPG-fargekoding for hver vanskelighetsgrad: Rare */
[data-mode=light] div.rare {
  border-left-color: #1E88E5;
}

div.rare > .admonition-title {
  padding-left: 1.35cm;
  display: flex;
  align-items: center;
}

[data-mode=light] div.rare > .admonition-title {
  background-color: #E3F2FD;
  padding-left: 1.35cm;
  display: flex;
  align-items: center;
}



@media (prefers-color-scheme: light) {
  div.rare { 
    border-left-color: #1E88E5;
  }

  div.rare > .admonition-title {
    background-color: #E3F2FD;
    padding-left: 1.35cm;
    display: flex;
    align-items: center;
  }
}


[data-mode=dark] div.rare {
  border-left-color: #1E88E5;
}

[data-mode=dark] div.rare > .admonition-title {
  background-color: #0d48a134;
}



@media (prefers-color-scheme: dark) {
  div.rare {
    border-left-color: #1E88E5;
  }

  div.rare > .admonition-title {
    background-color: #0d48a134;
  }
}


div.rare > .admonition-title::after {
  content: 
    url("./icons/outline/light_mode/fire.svg") ""
    url("./icons/outline/light_mode/fire.svg");
  width: 20px;
  height: 20px;
  display: inline-block;
  white-space: nowrap;
}

[data-mode=light] div.rare > .admonition-title::after {
  content: 
    url("./icons/outline/light_mode/fire.svg") ""
    url("./icons/outline/light_mode/fire.svg");
  width: 20px;
  height: 20px;
  display: inline-block;
  white-space: nowrap;
}
  
@media (prefers-color-scheme: light) {
  div.rare > .admonition-title::after {
    content: 
      url("./icons/outline/light_mode/fire.svg") ""
      url("./icons/outline/light_mode/fire.svg");
    width: 20px;
    height: 20px;
    display: inline-block;
    white-space: nowrap;
  }
}
  
[data-mode=dark] div.rare > .admonition-title::after {
  content: 
    url("./icons/outline/dark_mode/fire.svg") ""
    url("./icons/outline/dark_mode/fire.svg");
  width: 20px;
  height: 20px;
  display: inline-block;
  white-space: nowrap;
}

@media (prefers-color-scheme: dark) {
  div.rare > .admonition-title::after {
    content: 
      url("./icons/outline/dark_mode/fire.svg") ""
      url("./icons/outline/dark_mode/fire.svg");
    width: 20px;
    height: 20px;
    display: inline-block;
    white-space: nowrap;
  }
}


/* Light modes for underveisoppgaver */

[data-mode=light] div.rare {
  background-color: white !important;
  background-color: var(--admonition-background-color-light);
}


@media (prefers-color-scheme: light) {
  div.rare {
    background-color: var(--admonition-background-color-light);
  }
}

/* Dark modes for Underveisoppgaver */

[data-mode=dark] div.rare {
  background-color: var(--admonition-background-color-dark) !important;
}

@media (prefers-color-scheme: dark) {
  div.rare {
    background-color: var(--admonition-background-color-dark) !important;
  }
}












/* Stil med RPG-fargekoding for hver vanskelighetsgrad: Epic */
[data-mode=light] div.epic {
  border-left-color: #9C27B0;
}

[data-mode=light] div.epic > .admonition-title {
  background-color: #F3E5F5;
  padding-left: 1.85cm;
  display: flex;
  align-items: center;
}


@media (prefers-color-scheme: light) {
  div.epic { 
    border-left-color: #9C27B0;
  }
  div.epic > .admonition-title {
    background-color: #F3E5F5;
    padding-left: 1.85cm;
    display: flex;
    align-items: center;
  }
}

[data-mode=dark] div.epic{
  border-left-color: #9C27B0;
}

[data-mode=dark] div.epic > .admonition-title {
  background-color: #691b9a31;
  padding-left: 1.85cm;
  display: flex;
  align-items: center;
}

@media (prefers-color-scheme: dark) {
  div.epic {
    border-left-color: #9C27B0;
  }
  div.epic > .admonition-title {
    background-color: #691b9a31;
    padding-left: 1.85cm;
    display: flex;
    align-items: center;
  }
}


div.epic > .admonition-title::after {
  content: 
    url("./icons/outline/light_mode/fire.svg") ""
    url("./icons/outline/light_mode/fire.svg") ""
    url("./icons/outline/light_mode/fire.svg");
  width: 20px;
  height: 20px;
  display: inline-block;
  white-space: nowrap;
}

[data-mode=light] div.epic > .admonition-title::after {
  content: 
    url("./icons/outline/light_mode/fire.svg") ""
    url("./icons/outline/light_mode/fire.svg") ""
    url("./icons/outline/light_mode/fire.svg");
  width: 20px;
  height: 20px;
  display: inline-block;
  white-space: nowrap;
}
  
@media (prefers-color-scheme: light) {
  div.epic > .admonition-title::after {
    content: 
      url("./icons/outline/light_mode/fire.svg") ""
      url("./icons/outline/light_mode/fire.svg") ""
      url("./icons/outline/light_mode/fire.svg");
    width: 20px;
    height: 20px;
    display: inline-block;
    white-space: nowrap;
  }
}
  
[data-mode=dark] div.epic > .admonition-title::after {
  content: 
    url("./icons/outline/dark_mode/fire.svg") ""
    url("./icons/outline/dark_mode/fire.svg") ""
    url("./icons/outline/dark_mode/fire.svg");
  width: 20px;
  height: 20px;
  display: inline-block;
  white-space: nowrap;
}

@media (prefers-color-scheme: dark) {
  div.epic > .admonition-title::after {
    content: 
      url("./icons/outline/dark_mode/fire.svg") ""
      url("./icons/outline/dark_mode/fire.svg") ""
      url("./icons/outline/dark_mode/fire.svg");
    width: 20px;
    height: 20px;
    display: inline-block;
    white-space: nowrap;
  }
}


/* Light modes for underveisoppgaver */

[data-mode=light] div.epic {
  background-color: white !important;
  background-color: var(--admonition-background-color-light);
}


@media (prefers-color-scheme: light) {
  div.epic {
    background-color: var(--admonition-background-color-light);
  }
}

/* Dark modes for Underveisoppgaver */

[data-mode=dark] div.epic {
  background-color: var(--admonition-background-color-dark) !important;
}

@media (prefers-color-scheme: dark) {
  div.epic {
    background-color: var(--admonition-background-color-dark) !important;
  }
}






/* Stil med RPG-fargekoding for hver vanskelighetsgrad: Legendary */
div.legendary > .admonition-title {
  padding-left: 2.35cm;
  display: flex;
  align-items: center;
}



[data-mode=light] div.legendary {
  border-left-color: #FFA000;
}

[data-mode=light] div.legendary > .admonition-title {
  background-color:#FFF8E1;
  display: flex;
  align-items: center;
}


@media (prefers-color-scheme: light) {
  div.legendary { 
    border-left-color: #FF9700;
  }

  div.legendary > .admonition-title {
    background-color: #ffe0b2;
  }
}

[data-mode=dark] div.legendary {
  border-left-color: #FFA000;
}

[data-mode=dark] div.legendary > .admonition-title {
  background-color: #ff6f000c;
}

@media (prefers-color-scheme: dark) {
  div.legendary {
    border-left-color: #FFA000;
  }

  div.legendary > .admonition-title {
    background-color: #ff6f000c;
  }
}


[data-mode=light] div.legendary > .admonition-title::after {
  content: 
    url("./icons/outline/light_mode/fire.svg") ""
    url("./icons/outline/light_mode/fire.svg") ""
    url("./icons/outline/light_mode/fire.svg") ""
    url("./icons/outline/light_mode/fire.svg");
  width: 20px;
  height: 20px;
  display: inline-block;
  white-space: nowrap;
}
  
@media (prefers-color-scheme: light) {
  div.legendary > .admonition-title::after {
    content: 
      url("./icons/outline/light_mode/fire.svg") ""
      url("./icons/outline/light_mode/fire.svg") ""
      url("./icons/outline/light_mode/fire.svg") ""
      url("./icons/outline/light_mode/fire.svg");
    width: 20px;
    height: 20px;
    display: inline-block;
    white-space: nowrap;
  }
}
  
[data-mode=dark] div.legendary > .admonition-title::after {
  content: 
    url("./icons/outline/dark_mode/fire.svg") ""
    url("./icons/outline/dark_mode/fire.svg") ""
    url("./icons/outline/dark_mode/fire.svg") ""
    url("./icons/outline/dark_mode/fire.svg");
  width: 20px;
  height: 20px;
  display: inline-block;
  white-space: nowrap;
}

@media (prefers-color-scheme: dark) {
  div.legendary > .admonition-title::after {
    content: 
      url("./icons/outline/dark_mode/fire.svg") ""
      url("./icons/outline/dark_mode/fire.svg") ""
      url("./icons/outline/dark_mode/fire.svg") ""
      url("./icons/outline/dark_mode/fire.svg");
    width: 20px;
    height: 20px;
    display: inline-block;
    white-space: nowrap;
  }
}


/* Light modes for underveisoppgaver */

[data-mode=light] div.legendary {
  background-color: white !important;
  background-color: var(--admonition-background-color-light);
}


@media (prefers-color-scheme: light) {
  div.legendary {
    background-color: var(--admonition-background-color-light);
  }
}

/* Dark modes for Underveisoppgaver */

[data-mode=dark] div.legendary {
  background-color: var(--admonition-background-color-dark) !important;
}

@media (prefers-color-scheme: dark) {
  div.legendary {
    background-color: var(--admonition-background-color-dark) !important;
  }
}