/* Colours inspired by Material Design Lite:
 * https://getmdl.io/customize/index.html
 */

:root {
  --headline-font: 'Fira Sans', sans-serif;
  --body-text-color: #444;
  --content-width: 900px;
}



html, body, .uk-container {
  margin: 0;
  padding: 0;
}

html {
  color: var(--body-text-color);
}

h1 {
  font-family: var(--headline-font);
  font-size: 8em;
  /* color: darkmagenta; */
  color: black;
  padding: 0;
  max-width: var(--content-width);
  margin: 1em auto 0.2em auto;
  text-align: center;
}

em {
  /* color: inherit; */
  /* color: rgb(69, 90, 100); */
  /* color: rgb(48, 63, 159); */
  /* color: rgb(230, 74, 25); */
  color: rgb(184, 55, 16);
}

a, a:hover, a:visited, a:active {
  color: rgb(48, 63, 159);
}



.uk-container {
  /* margin-left: auto; */
  /* margin-right: auto; */
  max-width: unset;
}

h1 + p.authors {
  max-width: var(--content-width);
  margin: 2.25em auto 2em auto;
  text-align: center;
  font-family: var(--headline-font);
  font-size: 1.75em;
}

h1 + p.authors > a, h1 + p.authors > a:active, h1 + p.authors > a:visited {
  color: inherit;
}

h1 + p.authors > a:hover {
  text-decoration: underline;
  text-decoration-color: var(--body-text-color);
}

.article > .title {
  min-height: 6em;
  /* padding-top: 4em; */
  background:
    linear-gradient(135deg, hsla(251.6, 95.12%, 43.13%, 1) 0%, hsla(251.6, 95.12%, 43.13%, 0) 70%),
    linear-gradient(25deg, hsla(163.31, 98.58%, 44.51%, 1) 10%, hsla(163.31, 98.58%, 44.51%, 0) 80%),
    linear-gradient(315deg, hsla(58.16, 99.44%, 45.82%, 1) 15%, hsla(58.16, 99.44%, 45.82%, 0) 80%),
    linear-gradient(245deg, hsla(272.34, 95.12%, 45.92%, 1) 100%, hsla(272.34, 95.12%, 45.92%, 0) 70%);
}

.article > .title > h2,
.footer > .title > h2 {
  font-family: var(--headline-font);
  font-size: 4em;
  color: white;
  max-width: var(--content-width);
  margin: 3em auto 0.75em auto;
}

.article > .title > h2 {
  padding: 2em 0em 0.75em 2em;
  text-indent: -1em;
}

.article[article-index="1"] > .title > h2 {
  margin-top: 0;
}

/* .article > .title > h2 > div {
  margin-left: 1em;
} */

.article > .content {
  max-width: var(--content-width);
  margin-left: auto;
  margin-right: auto;  
}



/* #toc-nav-wrapper-1 {
  max-width: var(--content-width);
  margin-left: auto;
  margin-right: auto;
}

#toc-nav-wrapper-2 {
  float: right;
  width: 4em;
} */

/* #toc {
  max-width: var(--content-width);
  margin-left: auto;
  margin-right: auto;
} */

#toc-nav-wrapper {
  /* display: none; */
  display: list-item; /* Results in box floating over chapter box */
  list-style-type: none;
  max-width: var(--content-width);
  margin-left: auto;
  margin-right: auto;
  /* overflow: hidden; */
  position: sticky;
  top: 2em;
  z-index: 999;
}

#toc-nav {
  background-color: var(--body-text-color);
  background-color: #eee;
  /* opacity: 15%; */
  /* background-color: red; */
  color: var(--body-text-color);
  /* font-weight: bold; */
  /* position: sticky; */
  /* top: 1em; */
  /* width: 4em; */
  min-width: 3em;  /* Matches dimensions of ... */
  min-height: 3em; /* ... the nested  SVG tag */
  width: max-content;
  float: right;
  /* border: 2px solid red; */
  border-radius: 0 0 5px 5px;
  box-shadow: 0 0 8px 2px var(--body-text-color);  
  /* box-shadow: 10px 5px 5px var(--body-text-color); */
}

#toc-nav > svg {
  background-color: #ccc;
  border-radius: 0 0 5px 5px;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
  /* width: 3em;
  height: 3em; */
}

#toc-nav > ol {
  display: none;
  background-color: #eee;
  /* padding: 0.5em; */
  margin: 0.5em;
}

/* #toc-nav > ol > li {
  margin: 0.5em;
} */

#toc-nav-wrapper.visible {
  opacity: 1;
  transition:opacity 500ms ease-out;
}

#toc-nav-wrapper.invisible {
  opacity: 0;
  transition:opacity 500ms ease-out;
}



.todo {
  display: inline-block;
  padding-right: 1em;
  background-color: #f3f3f3;
  /* color: blueviolet; */
  color: #990000;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
}

.todo > ul {
  margin: 0.1em 0 0.2em 0;
}

/* .todo > ul > li {
  list-style: none;
} */

.todo > ul > li::after {
  content: "todo";
  /* opacity: 0.75; */
  background-color: #990000;
  color: white;
  margin-left: 1em;
  padding: 0 0.2em;
  border-radius: 3px;  
  font-size: 80%;
  /* display: inline; */
  /* vertical-align: middle; */
}



.centered-no-margins {
  margin: 0px;
  text-align: center;
}



footer {
  margin-bottom: 2em;
}

footer > .title {
  background: var(--body-text-color);
}

footer > .title > h2 {
  text-align: center;
  padding: 0.75em 0;
  margin-bottom: 0.5em !important;
}

footer > .content {
  padding: 0em 1em;
  text-align: center;
  font-size: 0.75em;
}



.inline-list {
  list-style: none;
  padding: 0;
}

.inline-list > li {
  display: inline;
  padding: 0 0.5em;
  margin: 0;  
}

.inline-list > li:not(:last-child) {
  border-right: 1pt solid var(--body-text-color);  
}



:not(pre) > code,
:not(pre) > kbd,
:not(pre) > samp {
  /* color: #3e6186; */
  /* color: #444; */
  color: inherit;
  background: #f3f3f3;
  border-radius: 3px;
}

pre {
  color: var(--body-text-color);
}

.code-listing {
  position: relative;
  /* border: 1px dashed #3e6186; */
}

.cl-title {
  position: absolute;
  top: 0;
  left: 0;
  text-transform: none;
}

.code-listing .cl-title[cl-lang="c++"] {
  /* background-color: #859900; */
  /* background-color: rgb(63,81,181); */
  /* background-color: rgb(25, 118, 210); */
  background-color: rgb(93, 64, 55);
}

.code-listing .cl-title[cl-lang="py"] {
  /* background-color: #D33682; */
  /* background-color: #CB4B16; */
  /* background-color: rgb(121,85,72); */
  /* background-color: rgb(230, 74, 25); */
  /* background-color: rgb(0, 121, 107); */
  /* background-color: rgb(123, 31, 162); */
  /* background-color: rgb(56, 142, 60); */
  background-color: rgb(25, 118, 210);
}

.code-listing .highlight {
  margin: 0;
  padding: 0;
}

.code-listing .highlight pre {
  padding-top: 2em;
}



/* The admonition-related styles defined next are originally from
 * https://myyasuda.github.io/sphinx_materialdesign_theme/examples/reStructuredText/directives/admonitions.html,
 * and have been slightly modified.
 *
 * SVG icons are coloured via filters; the latter have been computed via
 * https://codepen.io/sosuke/pen/Pjoqqp.
 * See https://css-tricks.com/change-color-of-svg-on-hover/ for details.
 */

.admonition {
  padding: 16px 32px;
  margin-top: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
}

.admonition.attention {
  /* border-left: 4px solid #ffc107; */
  border-left: 4px solid #FA6900;
  background-color: rgba(255,193,7,.1);
}

.admonition.attention .admonition-title {
  font-size: 18px;
  font-weight: 700;
  /* color: #ffc107; */
  color: #FA6900;
}

.admonition.attention .admonition-title::before {
  position: relative;
  margin-right: 5px;
  top: 5px;
  content: url(../mdi/alert.svg);
  /* filter: #ffc107 invert(78%) sepia(73%) saturate(1942%) hue-rotate(351deg) brightness(102%) contrast(105%); */
  filter: invert(50%) sepia(39%) saturate(4750%) hue-rotate(1deg) brightness(97%) contrast(105%);
}

.admonition.note {
  /* border-left: 4px solid #ffc107; */
  border-left: 4px solid #448aff;
  background-color: rgba(255,193,7,.1);
}

.admonition.note .admonition-title {
  font-size: 18px;
  font-weight: 700;
  /* color: #ffc107; */
  color: #448aff;
}

.admonition.note .admonition-title::before {
  position: relative;
  margin-right: 5px;
  top: 5px;
  content: url(../mdi/information.svg);
  filter: invert(45%) sepia(98%) saturate(2045%) hue-rotate(201deg) brightness(101%) contrast(105%);
}



.code-expert-hintbox {
  display: flex; 
  align-items: center;
  background-color: #eee;
  border-radius: 5px;
  padding: 0.25em 0.5em 0.25em 0.5em;
  margin-top: 2em;  
}

.code-expert-hintbox img {
  height: 50px; 
  margin-right: 1em;
}

.code-expert-hintbox p { /* TODO: Remove once p no longer generated by code_expert_generator */
  margin: 0 !important;
}



.inl-hilite-attention {
  font-size: 120%;
  font-weight: bold;
  color: #FA6900;
  background-color: #FFE97F;
  border-radius: 5px;
}



.uk-slider-items {
  padding-bottom: 4em !important;
}

.uk-slidenav[uk-slider-item] {
  position: absolute;
  z-index: 1;
  border-radius: 100%;
  width: 40px;
  height: 40px;
  text-align: center;
  transition: none;
}

.uk-slidenav[uk-slider-item]:hover {
  /* background-color: #E5D04F; */
  /* background-color: rgba(102,102,102,.5); */
  background-color: #666;
  color: white;
}

.uk-slidenav[uk-slider-item="previous"] { left: 1em; }
.uk-slidenav[uk-slider-item="next"] { right: 1em; }

.uk-slidenav[uk-slider-item="previous"] > svg > polyline { stroke-width: 4; }
.uk-slidenav[uk-slider-item="next"] > svg > polyline { stroke-width: 4; }


.uk-dotnav {
  /* scale:2; */
  margin-top: 1em;
  margin-bottom: 2em;
}

.uk-dotnav > li > a {
  color: var(--body-text-color);
  display: table-cell;
  width: 1.5em;
  height: 1.5em;
  font-size: 1em;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  /* transition: none; */
  box-sizing: initial;
  text-indent: initial;
  overflow: initial;
}

.uk-dotnav > li > a:hover {
  text-decoration: none;
  color: white;
}

.uk-dotnav > li.uk-active > a {
  color: white;
}