@font-face {
  font-family: "Roboto Slab";
  font-style: normal;
  font-weight: 200;
  src: url(/_static/fonts/Roboto_Slab/static/RobotoSlab-ExtraLight.ttf);
}
@font-face {
  font-family: "Roboto Slab";
  font-style: normal;
  font-weight: 400;
  src: url(/_static/fonts/Roboto_Slab/static/RobotoSlab-Regular.ttf);
}
@font-face {
  font-family: "Roboto Slab";
  font-style: normal;
  font-weight: 500;
  src: url(/_static/fonts/Roboto_Slab/static/RobotoSlab-Medium.ttf);
}
@font-face {
  font-family: "Roboto Slab";
  font-style: normal;
  font-weight: 700;
  src: url(/_static/fonts/Roboto_Slab/static/RobotoSlab-Bold.ttf);
}

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 300;
  src: url(/_static/fonts/Lato/Lato-Light.ttf);
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  src: url(/_static/fonts/Lato/Lato-Regular.ttf);
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  src: url(/_static/fonts/Lato/Lato-Bold.ttf);
}
@font-face {
  font-family: "Lato";
  font-style: italic;
  font-weight: 300;
  src: url(/_static/fonts/Lato/Lato-LightItalic.ttf);
}
@font-face {
  font-family: "Lato";
  font-style: italic;
  font-weight: 400;
  src: url(/_static/fonts/Lato/Lato-Italic.ttf);
}
@font-face {
  font-family: "Lato";
  font-style: italic;
  font-weight: 700;
  src: url(/_static/fonts/Lato/Lato-BoldItalic.ttf);
}

html[data-theme="light"],
html[data-theme="dark"] {
  --pst-font-family-base: Lato, var(--pst-font-family-base-system);
  --pst-font-family-heading: "Roboto Slab", var(--pst-font-family-base-system);
  --pst-font-family-monospace: Courier, var(--pst-font-family-monospace-system);
}

html[data-theme="light"] {
  --pst-color-primary: #533485;
  --pst-color-warning: #fdbf32;
}

html[data-theme="dark"] {
  --pst-color-primary: #fdbf32;
}

h3.popover-header {
  margin-top: 0px;
}

div.popover {
  background-color: var(--pst-color-surface);
}

div.popover.hash-popover {
  max-width: 100%;
}

li.nav-item > a.nav-link,
.nav-item.dropdown > .btn.nav-item {
  font-family: var(--pst-font-family-heading);
  font-size: 0.9rem;
}

nav.bd-links p.caption {
  color: var(--pst-color-primary);
}

nav.bd-links p.bd-links__title {
  color: var(--pst-color-primary);
}

.bd-sidebar {
  font-family: var(--pst-font-family-heading);
}

.bd-sidebar-secondary {
  font-family: var(--pst-font-family-heading);
}

.bd-sidebar-secondary .onthispage {
  color: var(--pst-color-primary);
}

.admonition-title {
  font-family: var(--pst-font-family-heading);
}

.sd-card-text {
  font-family: var(--pst-font-family-heading);
}

.sd-material-icon {
  float: right;
}

.docs-version {
  float: right;
}

.git-commit-id {
  color: var(--pst-color-primary);
}

#logbot-container img {
  background: unset;
}

.navbar-brand.logo img {
  height: 80%;
  margin-top: 14px;
}

@media (min-width: 960px) {
  .bd-page-width {
    max-width: 1800px;
  }
}

button.btn.version-switcher__button {
  margin-bottom: unset;
}

.bd-main .bd-content .bd-article-container {
  max-width: 100%;
}

.bd-sidebar-primary {
  max-width: 380px;
}

div.docutils {
  position: relative;
}

/* Show the copybutton */
div.docutils:hover button.copybtn,
button.copybtn.success {
  opacity: 1;
}

div.docutils button.copybtn:hover {
  background-color: rgb(235, 235, 235);
}

div.docutils button.copybtn:active {
  background-color: rgb(187, 187, 187);
}

/*

BEGIN DYNAMIC NAVBAR LINKS

In `dynamic-navbar.html`, we create 8 different navbars.

Each navbar `N` shows `N` links, and puts the remaining `8 - N` links in the "More" dropdown.

The styles below use media queries to dictate which of the 8 navbars will show given the width of the page.
*/

/* By default, none of the 8 navbars are displayed. */
.bd-header .navbar-nav.default-hidden-nav {
  display: none;
}

/* When we've collapsed to the hamburger menu, only show the navbar that contains all 8 links */
@media (width < 960px) {
  #nav-1,
  #nav-2,
  #nav-3,
  #nav-4,
  #nav-5,
  #nav-6,
  #nav-7 {
    display: none;
  }
}

/* Depending on the width of the page, we decide which nav to show */

@media (960px <= width < 1035px) {
  #nav-2 {
    display: inherit;
  }
}
@media (1035px <= width < 1240px) {
  #nav-3 {
    display: inherit;
  }
}
@media (1240px <= width < 1305px) {
  #nav-4 {
    display: inherit;
  }
}
@media (1305px <= width < 1430px) {
  #nav-5 {
    display: inherit;
  }
}
@media (1430px <= width < 1480px) {
  #nav-6 {
    display: inherit;
  }
}
@media (1480px <= width < 1530px) {
  #nav-7 {
    display: inherit;
  }
}
@media (min-width: 1530px) {
  #nav-8 {
    display: inherit;
  }
}

/* END DYNAMIC NAVBAR LINKS */