:root {
  /* -------------------------------  BFH COLORS ------------------------------- */
  --bfh-Gray: rgba(105, 125, 145, 1);
  --bfh-Orange: rgba(250, 195, 0, 1);
  --bfh-DarkGreen: rgba(85, 100, 85, 1);
  --bfh-MediumGreen: rgb(105, 150, 115);
  --bfh-LightGreen: rgb(140, 175, 130);
  --bfh-DarkBlue: rgb(80, 110, 150);
  --bfh-MediumBlue: rgb(105, 155, 190);
  --bfh-LightBlue: rgb(135, 185, 200);
  --bfh-DarkPurple: rgb(100, 80, 120);
  --bfh-MediumPurple: rgb(130, 90, 125);
  --bfh-LightPurple: rgb(160, 135, 170);
  --bfh-DarkOcher: rgb(120, 100, 80);
  --bfh-MediumOcher: rgb(150, 130, 95);
  --bfh-LightOcher: rgba(185, 145, 100, 1);
  --bfh-SilentOcher: rgba(185, 145, 100, .1);
  --bfh-DarkRed: rgb(180, 20, 40);
  --bfh-MediumRed: rgb(210, 90, 80);
  --bfh-LightRed: rgb(255, 145, 125);

  /* -------------------------- BFH ADMONITION STYLES -------------------------- */

  /* For more icons see: https://fontawesome.com/search */

  /* Exercises */
  --exercise-background-color: color-mix(in srgb, var(--bfh-LightOcher), transparent 90%);
  --exercise-border-color: var(--bfh-DarkOcher);
  --exercise-icon: "\f044";

  /* Optional exercise */
  --optional-background-color: color-mix(in srgb, var(--bfh-LightPurple), transparent 90%);
  --optional-border-color: var(--bfh-DarkPurple);
  --optional-icon: var(--exercise-icon);

  /* Solution */
  --solution-background-color: color-mix(in srgb, var(--bfh-MediumGreen), transparent 90%);
  --solution-border-color: color-mix(in srgb, var(--bfh-MediumGreen), transparent 0%);
  --solution-icon: "\f058";

  /* Attention, caution, Warning*/
  --attention-background-color: color-mix(in srgb, var(--bfh-Orange), transparent 90%);
  --attention-border-color: color-mix(in srgb, var(--bfh-Orange), transparent 0%);
  --attention-icon: "\f071";

  /* Danger, error */
  --danger-background-color: color-mix(in srgb, var(--bfh-MediumRed), transparent 90%);
  --danger-border-color: color-mix(in srgb, var(--bfh-MediumRed), transparent 0%);
  --danger-icon: "\f06a"; 

  /* Hint */
  --hint-background-color: color-mix(in srgb, var(--bfh-LightBlue), transparent 90%);
  --hint-border-color: color-mix(in srgb, var(--bfh-LightBlue), transparent 0%);
  --hint-icon: "\f0eb";

  /* Important */
  --important-background-color: color-mix(in srgb, var(--bfh-DarkBlue), transparent 90%);
  --important-border-color: color-mix(in srgb, var(--bfh-DarkBlue), transparent 0%);
  --important-icon: "\f06a";

  /* Note */
  --note-background-color: color-mix(in srgb, var(--bfh-MediumBlue), transparent 90%);
  --note-border-color: color-mix(in srgb, var(--bfh-MediumBlue), transparent 0%);
  --note-icon: "\f05a";

  /* Tip */
  --tip-background-color: color-mix(in srgb, var(--bfh-LightBlue), transparent 90%);
  --tip-border-color: color-mix(in srgb, var(--bfh-LightBlue), transparent 0%);
  --tip-icon: "\f084";

  /* Demo */
  --demo-background-color: color-mix(in srgb, var(--bfh-MediumBlue), transparent 90%);
  --demo-border-color: color-mix(in srgb, var(--bfh-MediumBlue), transparent 0%);
  --demo-icon: "\f04b";

  /* Type along */
  --typeAlong-background-color: color-mix(in srgb, var(--bfh-MediumBlue), transparent 90%);
  --typeAlong-border-color: color-mix(in srgb, var(--bfh-MediumBlue), transparent 0%);
  --typeAlong-icon: "\f11c";

  /* Homework */
  --homework-background-color: color-mix(in srgb, var(--bfh-LightOcher), transparent 90%);
  --homework-border-color: color-mix(in srgb, var(--bfh-DarkOcher), transparent 0%);
  --homework-icon: "\f015";

  /* Discussion */
  --discussion-background-color: color-mix(in srgb, var(--bfh-LightGreen), transparent 90%);
  --discussion-border-color: color-mix(in srgb, var(--bfh-LightGreen), transparent 0%);
  --discussion-icon: "\f086";

  /* Prerequisites */
  --prerequisites-background-color: color-mix(in srgb, var(--bfh-LightOcher), transparent 90%);
  --prerequisites-border-color: color-mix(in srgb, var(--bfh-DarkOcher), transparent 0%);
  --prerequisites-icon: "\02699";

  /* Checklist */
  --checklist-background-color: color-mix(in srgb, var(--bfh-MediumBlue), transparent 90%);
  --checklist-border-color: color-mix(in srgb, var(--bfh-MediumBlue), transparent 0%);
  --checklist-icon: "\2611";

  /* Questions */
  --questions-background-color: color-mix(in srgb, var(--bfh-LightOcher), transparent 90%);
  --questions-border-color: color-mix(in srgb, var(--bfh-MediumOcher), transparent 0%);
  --questions-icon: "\003F";

  /* See also */
  --seeAlso-background-color: color-mix(in srgb, var(--bfh-LightBlue), transparent 90%);
  --seeAlso-border-color: color-mix(in srgb, var(--bfh-LightBlue), transparent 0%);
  --seeAlso-icon: "\21AA";

  /* Objectives */
  --objectives-background-color: color-mix(in srgb, var(--bfh-), transparent 90%);
  --objectives-border-color: color-mix(in srgb, var(--bfh-LightBlue), transparent 0%);
  --objectives-icon: "\f022";


}

.wy-nav-content {
    max-width: 1200px !important;
}

.wy-nav-top,
.wy-side-nav-search {
  background-color: var(--bfh-Gray) !important;
}

.wy-menu-vertical header,
.wy-menu-vertical p.caption {
  color: var(--bfh-Gray) !important;
}

.wy-text-warning {
  color: color-mix(in srgb, var(--bfh-Orange), transparent 0%) !important;
}

a.wy-text-warning:hover {
  color: color-mix(in srgb, var(--bfh-Orange), transparent 50%) !important;
}

.wy-text-info {
  color: color-mix(in srgb, var(--bfh-DarkBlue), transparent 0%) !important;
}

a.wy-text-info:hover {
  color: color-mix(in srgb, var(--bfh-DarkBlue), transparent 50%) !important;
}

.wy-text-success {
  color: color-mix(in srgb, var(--bfh-MediumGreen), transparent 0%) !important;
}

a.wy-text-success:hover {
  color: color-mix(in srgb, var(--bfh-MediumGreen), transparent 50%) !important;
}

.wy-text-danger {
  color: color-mix(in srgb, var(--bfh-MediumRed), transparent 0%) !important;
}

a.wy-text-danger:hover {
  color: color-mix(in srgb, var(--bfh-MediumRed), transparent 50%) !important;
}

.wy-text-neutral {
  color: var(--bfh-Gray) !important;
}

a.wy-text-neutral:hover {
  color: #595959 !important;
}


.wy-menu-vertical li.toctree-l2 a,
.wy-menu-vertical li.toctree-l3 a,
.wy-menu-vertical li.toctree-l4 a,
.wy-menu-vertical li.toctree-l5 a,
.wy-menu-vertical li.toctree-l6 a,
.wy-menu-vertical li.toctree-l7 a,
.wy-menu-vertical li.toctree-l8 a,
.wy-menu-vertical li.toctree-l9 a,
.wy-menu-vertical li.toctree-l10 a {
  color: var(--bfh-DarkBlue) !important;
}

.rst-content .exercise {
  background: var(--exercise-background-color) !important;
  background-color: var(--exercise-background-color) !important;
  border-color: var(--exercise-border-color) !important;

  .admonition-title::before {
    content: var(--exercise-icon) !important;
  }

  .admonition-title {
    background-color: var(--exercise-border-color) !important;
  }
}

.rst-content .optional {
  background: var(--optional-background-color) !important;
  background-color: var(--optional-background-color) !important;
  border-color: var(--optional-border-color) !important;

  .admonition-title {
    background-color: var(--optional-border-color) !important;
  }

  .admonition-title::before {
    content: var(--optional-icon) !important;
  }
}

.rst-content .solution {
  background: var(--solution-background-color) !important;
  background-color: var(--solution-background-color) !important;
  border-color: var(--solution-border-color) !important;

  .admonition-title {
    background-color: var(--solution-border-color) !important;
  }

  .admonition-title::before {
    content: var(--solution-icon) !important;
  }
}

.rst-content .caution,
.rst-content .attention,
.rst-content .warning {
  background: var(--attention-background-color) !important;
  background-color: var(--attention-background-color) !important;
  border-color: var(--attention-border-color) !important;

  .admonition-title::before {
    content: var(--attention-icon) !important;
  }

  .admonition-title {
    background-color: var(--attention-border-color) !important;
  }
}


.rst-content .danger,
.rst-content .error {
  background: var(--danger-background-color) !important;
  background-color: var(--danger-background-color) !important;
  border-color: var(--danger-border-color) !important;

  .admonition-title::before {
    content: var(--danger-icon) !important;
  }

  .admonition-title {
    background-color: var(--danger-border-color) !important;
  }
}

.rst-content .hint {
  background: var(--hint-background-color) !important;
  background-color: var(--hint-background-color) !important;
  border-color: var(--hint-border-color) !important;

  .admonition-title::before {
    content: var(--hint-icon) !important;
  }

  .admonition-title {
    background-color: var(--hint-border-color) !important;
  }
}

/* IMPORTANT CAN NOT BE USED BECAUSE THE CLASSES EXERCISE, OPTIONAL AND SOLUTION INHERIT FROM THIS AND WILL BE OVERWRITTEN*/ 
.rst-content .important {
  background: var(--important-background-color);
  background-color: var(--important-background-color);
  border-color: var(--important-border-color);

 .admonition-title::before {
    content: var(--important-icon);
  } 

  .admonition-title {
    background-color: var(--important-border-color);
  } 
}


 .rst-content .note {
  background: var(--note-background-color) !important;
  background-color: var(--note-background-color) !important;
  border-color: var(--note-border-color) !important;

  .admonition-title::before {
    content: var(--note-icon) !important;
  }

  .admonition-title {
    background-color: var(--note-border-color) !important;
  }
}

.rst-content .tip {
  background: var(--tip-background-color) !important;
  background-color: var(--tip-background-color) !important;
  border-color: var(--tip-border-color) !important;

  .admonition-title::before {
    content: var(--tip-icon) !important;
  }

  .admonition-title {
    background-color: var(--tip-border-color) !important;
  }
}

.rst-content .demo {
  background: var(--demo-background-color) !important;
  background-color: var(--demo-background-color) !important;
  border-color: var(--demo-border-color) !important;

  .admonition-title::before {
    content: var(--demo-icon) !important;
  }

  .admonition-title {
    background-color: var(--demo-border-color) !important;
  }
}

.rst-content .type-along {
  background: var(--typeAlong-background-color) !important;
  background-color: var(--typeAlong-background-color) !important;
  border-color: var(--typeAlong-border-color) !important;

  .admonition-title::before {
    content: var(--typeAlong-icon) !important;
  }

  .admonition-title {
    background-color: var(--typeAlong-border-color) !important;
  }
}

.rst-content .homework {
  background: var(--homework-background-color) !important;
  background-color: var(--homework-background-color) !important;
  border-color: var(--homework-border-color) !important;

  .admonition-title::before {
    content: var(--homework-icon) !important;
  }

  .admonition-title {
    background-color: var(--homework-border-color) !important;
  }
}

.rst-content .discussion {
  background: var(--discussion-background-color) !important;
  background-color: var(--discussion-background-color) !important;
  border-color: var(--discussion-border-color) !important;

  .admonition-title::before {
    content: var(--discussion-icon) !important;
  }

  .admonition-title {
    background-color: var(--discussion-border-color) !important;
  }
}

.rst-content .prerequisites {
  background: var(--prerequisites-background-color) !important;
  background-color: var(--prerequisites-background-color) !important;
  border-color: var(--prerequisites-border-color) !important;

  .admonition-title::before {
    content: var(--prerequisites-icon) !important;
  }

  .admonition-title {
    background-color: var(--prerequisites-border-color) !important;
  }
}

.rst-content .checklist {
  background: var(--checklist-background-color) !important;
  background-color: var(--checklist-background-color) !important;
  border-color: var(--checklist-border-color) !important;

  .admonition-title::before {
    content: var(--checklist-icon) !important;
  }

  .admonition-title {
    background-color: var(--checklist-border-color) !important;
  }
}

.rst-content .questions {
  background: var(--questions-background-color) !important;
  background-color: var(--questions-background-color) !important;
  border-color: var(--questions-border-color) !important;

  .admonition-title::before {
    content: var(--questions-icon) !important;
  }

  .admonition-title {
    background-color: var(--questions-border-color) !important;
  }
}


.rst-content .seealso {
  background: var(--seeAlso-background-color) !important;
  background-color: var(--seeAlso-background-color) !important;
  border-color: var(--seeAlso-border-color) !important;

  .admonition-title::before {
    content: var(--seeAlso-icon) !important;
  }

  .admonition-title {
    background-color: var(--seeAlso-border-color) !important;
  }
} 

.rst-content .objectives {
  background: var(--objectives-background-color) !important;
  background-color: var(--objectives-background-color) !important;
  border-color: var(--objectives-border-color) !important;

  .admonition-title::before {
    content: var(--objectives-icon) !important;
  }

  .admonition-title {
    background-color: var(--objectives-border-color) !important;
  }
} 


/* ------------------------------- BFH- Two Columns ------------------------------- */
div.leftside {
  width: 43%;
  padding: 0px 3px 0px 0px;
  float: left;
}

div.rightside {
  margin-left: 45%;
  /* float: right; */
}

.twocol {
  overflow:hidden;
}

/* ------------------------------- BFH- DROPDOWN BUTTON ------------------------------- */
/* General button style and position*/
button.toggle-button {
  /**
   * Background and shape. By default there's no background
   * but users can style as they wish
   */
  background: none;
  border: none;
  outline: none;

  /* Positioning just inside the admonition title */
  position: absolute;
  top: 1px !important;
  right: 0.5em;
  padding: 0px;
  border: none;
  outline: none;
}

/* Display the toggle hint on wide screens */
@media (min-width: 640px) {
  button.toggle-button.toggle-button-hidden:before {
    content: attr(data-toggle-hint);
    /* This will be filled in by JS */
    font-size: .8em;
    align-self: center;
    position: relative !important;
    /*
      text-align: left; */
    bottom: 6px !important;
  }
}

/* ------------------------------- BFH-TABLES ------------------------------- */
/* TABLE ELEMENT BORDER   */
.rst-content table.docutils, .wy-table-bordered-all {
  border: 2px solid #ffffff !important;
}

 /* TABLE TITLE BORDER  */
.rst-content table.docutils th {
  border: 1px solid #ffffff !important;
  border-bottom-width: 2px !important;
  background-color: color-mix(in srgb, var(--bfh-MediumGreen), transparent 40%) !important; 
}

/* USED TO CHANGE COLOR OF EVERY SECOND LINE */
/* .rst-content table.docutils:not(.field-list) tr:nth-child(2n-1) td,
.wy-table-backed,
.wy-table-odd td,
.wy-table-striped tr:nth-child(2n-1) td {
  background-color: var(--solution-border-color) !important;
} */

/* TABLE ELEMENT  */
.rst-content table.docutils td, 
.rst-content table.field-list td, 
.wy-table td {
  background-color: color-mix(in srgb, var(--bfh-MediumGreen), transparent 85%) !important; 
  vertical-align: right !important;
  border: 0px solid !important;
  border-bottom: 2px solid #ffffff !important;
}


/*
 * CSS hacks and small modification for my Sphinx website
 * :copyright: Copyright 2013-2016 Lilian Besson
 * :license: GPLv3, see LICENSE for details.
 */


/* Colors and text decoration.
 For example, :black:`text in black` or :blink:`text blinking` in rST. */

 .black {
  color: black;
}

.gray {
  color: gray;
}

.grey {
  color: gray;
}

.silver {
  color: silver;
}

.white {
  color: white;
}

.maroon {
  color: maroon;
}

.red {
  color: red;
}

.magenta {
  color: magenta;
}

.fuchsia {
  color: fuchsia;
}

.pink {
  color: pink;
}

.orange {
  color: orange;
}

.yellow {
  color: rgb(198, 198, 0);
}

.lime {
  color: lime;
}

.green {
  color: green;
}

.olive {
  color: olive;
}

.teal {
  color: teal;
}

.cyan {
  color: cyan;
}

.aqua {
  color: aqua;
}

.blue {
  color: blue;
}

.navy {
  color: navy;
}

.purple {
  color: purple;
}

.under {
  text-decoration: underline;
}

.over {
  text-decoration: overline;
}

.blink {
  text-decoration: blink;
}

.line {
  text-decoration: line-through;
}

.strike {
  text-decoration: line-through;
}

.it {
  font-style: italic;
}

.ob {
  font-style: oblique;
}

.small {
  font-size: small;
}

.large {
  font-size: large;
}

.smallpar {
  font-size: small;
}


/* Style pour les badges en bas de la page. */

div.supportBadges {
  margin: 1em;
  text-align: right;
}

div.supportBadges ul {
  padding: 0;
  display: inline;
}

div.supportBadges li {
  display: inline;
}

div.supportBadges a {
  margin-right: 1px;
  opacity: 0.6;
}

div.supportBadges a:hover {
  opacity: 1;
}


/* Details elements in the sidebar */

a.reference {
  border-bottom: none;
  text-decoration: none;
}

ul.details {
  font-size: 80%;
}

ul.details li p {
  font-size: 85%;
}

ul.externallinks {
  font-size: 85%;
}


/* Pour le drapeau de langue */

img.languageswitch {
  width: 50px;
  height: 32px;
  margin-left: 5px;
  vertical-align: bottom;
}

div.sphinxsidebar {
  overflow: hidden !important;
  font-size: 120%;
  word-wrap: break-word;
  width: 300px;
  max-width: 300px;
}

div.sphinxsidebar h3 {
  font-size: 125%;
}

div.sphinxsidebar h4 {
  font-size: 110%;
}

div.sphinxsidebar a {
  font-size: 85%;
}


/* Image style for scrollUp jQuery plugin */

#scrollUpLeft {
  bottom: 50px;
  left: 260px;
  height: 38px;
  width: 38px;
  background: url('//perso.crans.org/besson/_images/.top.svg');
  background: url('../_images/.top.svg');
}

@media screen and (max-width: 875px) {
  #scrollUpLeft {
      right: 50px;
      left: auto;
  }
}


/* responsive for font-size. */

@media (max-width: 875px) {
  body {
      font-size: 105%;
      /* Increase font size for responsive theme */
  }
}

@media (max-width: 1480px) and (min-width: 876px) {
  body {
      font-size: 110%;
      /* Increase font size for not-so-big screens */
  }
}

@media (min-width: 1481px) {
  body {
      font-size: 115%;
      /* Increase even more font size for big screens */
  }
}


/* Social Icons in the sidebar (available: twitter, facebook, linkedin, google+, bitbucket, github) */

.social-icons {
  display: inline-block;
  margin: 0;
  text-align: center;
}

.social-icons a {
  background: none no-repeat scroll center top #444444;
  border: 1px solid #F6F6F6;
  border-radius: 50% 50% 50% 50%;
  display: inline-block;
  height: 35px;
  width: 35px;
  margin: 0;
  text-indent: -9000px;
  transition: all 0.2s ease 0s;
  text-align: center;
  border-bottom: none;
}

.social-icons li {
  display: inline-block;
  list-style-type: none;
  border-bottom: none;
}
.social-icons li a {
  border-bottom: none;
}

.social-icons a:hover {
  background-color: #666666;
  transition: all 0.2s ease 0s;
  text-decoration: none;
}

.social-icons a.facebook {
  background-image: url('../_images/.facebook.png');
  background-image: url('//perso.crans.org/besson/_images/.facebook.png');
  display: block;
  margin-left: auto;
  margin-right: auto;
  background-size: 35px 35px;
}

.social-icons a.bitbucket {
  background-image: url('../_images/.bitbucket.png');
  background-image: url('//perso.crans.org/besson/_images/.bitbucket.png');
  display: block;
  margin-left: auto;
  margin-right: auto;
  background-size: 35px 35px;
}

.social-icons li a.github {
  background-image: url('../_images/.github.png');
  background-image: url('//perso.crans.org/besson/_images/.github.png');
  display: block;
  margin-left: auto;
  margin-right: auto;
  background-size: 35px 35px;
}

.social-icons li a.wikipedia {
  background-image: url('../_images/.wikipedia.png');
  background-image: url('//perso.crans.org/besson/_images/.wikipedia.png');
  display: block;
  margin-left: auto;
  margin-right: auto;
  background-size: 35px 35px;
}