/* Fonts */
@font-face {
  font-family: "Cutive";
  src: url("../fonts/Cutive.woff2");
}

/*----------------------------------------------------
  Build BeeWare header
 --------------------------------------------------- */
.navbar {
    font-family: 'Cutive', serif;
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 15px 16px 8px 16px;
    line-height: 1.5;
}

.navbar > .container,
.navbar > .container-fluid {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.navbar-dark .navbar-brand {
    color: white;
}

.navbar-dark .navbar-brand:hover, .navbar-dark .navbar-brand:focus {
    color: white;
}

.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.5);
}

.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {
    color: rgba(255, 255, 255, 0.75);
}

.navbar-dark .navbar-nav .nav-link.disabled {
    color: rgba(255, 255, 255, 0.25);
}

.navbar-dark .navbar-nav .show > .nav-link,
.navbar-dark .navbar-nav .active > .nav-link,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .nav-link.active {
    color: white;
}

.navbar-dark .navbar-toggler {
    color: rgba(255, 255, 255, 0.5);
    border-color: rgba(255, 255, 255, 0.1);
}

.navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.navbar-dark .navbar-text {
    color: rgba(255, 255, 255, 0.5);
}

.navbar-dark .navbar-text a {
    color: white;
}

.navbar-dark .navbar-text a:hover, .navbar-dark .navbar-text a:focus {
    color: white;
}

.bg-dark {
    background-color: #343a40 !important;
}

@media (max-width: 862.99px) {
    .navbar-collapse li {
        border-bottom: 1px solid #666;
        padding: 8px 16px 6.4px;
    }

    .navbar {
        padding: 0 !important;
    }

    .navbar-brand-block {
        position: absolute;
        margin-top: -40px;
        padding: 1px 14px 2px;
        right: 10px;
    }

    .nav-top {
        margin: 16px 14px;
    }

    .navbar-collapse {
        background-color: #343a40;
        padding-top: 12px;
    }

    .navbar-collapse .header-button li.nav-item {
        border-bottom: 0
    }

    .navbar-collapse .header-button {
        border-bottom: 1px solid #666;
    }

    .navbar-expand-md > .container,
    .navbar-expand-md > .container-fluid {
        padding-right: 0;
        padding-left: 0;
    }
}

@media (min-width: 863px) {
    .navbar-expand-md {
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }

    .navbar-expand-md .navbar-nav {
        -ms-flex-direction: row;
        flex-direction: row;
        font-size: 16px;
        padding-left: 14px;
    }

    .navbar-expand-md .navbar-nav .dropdown-menu {
        position: absolute;
    }

    .navbar-expand-md .navbar-nav .nav-link {
        padding-right: 8px;
        padding-left: 8px;
    }

    .navbar-expand-md > .container,
    .navbar-expand-md > .container-fluid {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }

    .navbar-expand-md .navbar-collapse {
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
        height: 42.9px;
    }

    .navbar-expand-md .navbar-toggler {
        display: none;
    }

    .navbar-brand-block {
        padding-top: 2px;
    }

    /* Search and header light-dark mode button are too low by default on wide screen */
    .md-search, .md-header__button[for="__search"] {
        margin-top: -7.2px;
    }
}

.fixed-top {
    position: relative;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}

.navbar-toggler {
    padding: 4px 12px 4px 12px;
    font-size: 16px;
    line-height: 1;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    margin-left: 2px;
}

.navbar-toggler:hover, .navbar-toggler:focus {
    text-decoration: none;
}

.navbar-toggler:not(:disabled):not(.disabled) {
    cursor: pointer;
}

.navbar-toggler-icon {
    display: inline-block;
    width: 30px;
    height: 30px;
    vertical-align: middle;
    content: "";
    background: no-repeat center center;
    background-size: 100% 100%;
}

.navbar-brand {
    display: inline-block;
    padding: 3px 2px 5px 0;
    font-size: 20px;
    line-height: inherit;
    white-space: nowrap;
    text-decoration: none;
}

.navbar-brand:hover, .navbar-brand:focus {
    text-decoration: none;
}

.navbar-brand img {
    max-width: initial;
    margin-right: 8px;
    margin-left: 8px;
    vertical-align: middle;
}

.navbar-collapse {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-align: center;
    align-items: center;
}

.navbar-nav {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 3px;
    list-style: none;
}

.navbar-nav .nav-link {
    padding-right: 0;
    padding-left: 0;
    text-decoration: none;
}

.navbar-nav .dropdown-menu {
    position: static;
    float: none;
}

.mr-auto,
.mx-auto {
    margin-right: auto;
}

.collapse:not(.show) {
    display: none;
}

/*----------------------------------------------------
  Material CSS overrides
 --------------------------------------------------- */
:root {
    color-scheme: light dark;
}

[data-md-color-primary=indigo] {
    --md-primary-fg-color: #343A40;
    --md-primary-fg-color--light: #343A40;
    --md-primary-fg-color--dark:  #343A40;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
    font-family: 'Cutive', serif;
    color: var(--md-typeset-color);
}

/* Fix issue with spacing when title is exactly the width of the article column */
.md-typeset h1 a.headerlink {
    display: none;
}

/* Link colors */
.md-typeset a, .md-nav__link {
    color: light-dark(#084AFF, #526CFE);
}

.md-nav__item .md-nav__link--active {
    color: light-dark(#30314B, #96ACEE)
}

/* Unsticky header, add margin to deal with sidebar top margin changes */
.md-header {
    position: unset;
}

/* Disable header shadow */
.md-header--shadow {
    box-shadow: unset;
}

/* Sidebar title and GitHub links font and color */
.md-nav__title {
    font-family: 'Cutive', serif;
}

.md-nav__title {
    color: unset;
}

/* Version number */
.version-number {
    overflow-wrap: anywhere;
    font-size: 12px;
    font-weight: normal;
    margin-top: 0.2rem;
}

/* GitHub sidebar links */
.github-links {
    font-weight: normal;
}

.github-link-block a {
    color: light-dark(#084AFF, #526CFE);
}

.github-link-block a:first-child .github-links {
    margin-top: 0.8rem;
    margin-bottom: 0.2rem;
}

.github-link-block a:last-child .github-links {
    margin-bottom: 0.6rem;
}

.small .github-link-block a:first-child .github-links {
    margin-top: 0.4rem;
}

.small .github-link-block a:last-child .github-links {
    margin-bottom: 0.4rem;
}

/* Shows the logo in the sidebar */
.md-nav__title .md-nav__button {
    display: unset;
}

/* Style the sidebar title block on primary pages and in sidebar drawer */
.small .sidebar-title-block {
    display: flex;
    flex-flow: nowrap row;
    align-items: center;
}

.small .sidebar-title-block-name {
    align-items: start;
}

.sidebar-logo {
    margin-bottom: 0.8em;
    margin-top: 0.8em;
    margin-right: 0.2rem;
}

.small .site-name {
    font-size: 24px;
}

/* Embiggen homepage logo */
.md-nav__title .md-nav__button.md-logo img {
    height: unset;
}

/* Embiggen sidebar drawer logo and match sidebar */
.md-nav__title.small .md-nav__button.md-logo img {
    height: unset;
    max-width: unset;
    width: 74px;
}

/* The menu button for the sidebar drawer to display the sidebar on smaller displays */
.mobile-drawer-button-site-name {
    font-family: Cutive, "serif";
    font-size: 16px;
    display: inline-block;
    vertical-align: middle;
}

.mobile-drawer-button-version-number {
    font-size: 12px;
    display: inline-block;
    vertical-align: middle;
    padding-top: 4px;
    padding-left: 4px;
}

.mobile-sidebar-drawer-menu-bar {
    color: light-dark(#000000, #FFFFFF);
    background-color: light-dark(#F8F9FB, #4E4F52);
}

/* Adjustments for larger displays */
@media screen and (min-width: 1220px) {
    /* Hide menu bar when not needed */
    .mobile-sidebar-drawer-menu-bar {
        display: none;
    }

    .sidebar-title-block-name {
        display: flex;
        flex-flow: nowrap column;
        align-items: center;
    }

    .small .site-name {
        text-align: start;
    }

    /* Site name */
    .site-name {
        font-size: 20px;
        text-align: center;
    }
}

/* Site name font size on mid-sized displays */
@media screen and (max-width: 1599.99px)
and (min-width: 1220px) {
    .site-name {
        font-size: 19px;
    }
}

@media screen and (max-width: 1999.99px)
and (min-width: 1600px) {
    .site-name {
        font-size: 21px;
    }
}

@media screen and (min-width: 2000px) {
    .site-name {
        font-size: 22px;
    }
}

/* Adjustments for smaller displays */
@media screen and (max-width: 1219.99px) {
    .md-nav--primary .md-nav__title[for="__drawer"] {
        height: initial;
        white-space: unset;
        line-height: 1.3;
        color: light-dark(#000000, #FFFFFF);
        background-color: light-dark(#F8F9FB, #4E4F52);
    }

    .md-nav--primary .md-nav__title {
        padding-top: 16px;
    }

    .md-nav--primary .md-nav__title .md-logo {
        position: unset;
        padding: 0;
    }

    /* Position of left sidebar */
    .md-sidebar.md-sidebar--secondary {
        top: 66px !important;
    }

    /* Sidebar drawer header styling */
    .sidebar-logo {
        margin-right: 0.2rem;
    }

    .sidebar-title-block {
        display: flex;
        flex-flow: nowrap row;
        align-items: center;
    }

    .site-name {
        font-size: 24px;
    }

    .md-nav__title .md-nav__button.md-logo img {
        height: unset;
        max-width: unset;
        width: 74px;
    }
}

/* Setting the font size on the body is an accessibility issue, as well as interfering
   with the header font size. This resolves both. */
body {
    font-size: 1rem;
}

/* Removes padding and margins to regain screen-space on pages with short content.
   There is JS setting `top: 68px` on the sidebars that is eating up a huge amount
   of space. Overriding `top` causes a significant gap at the bottom between the end
   of the sidebar and the footer. Therefore the following margin changes are needed.
*/
.md-main__inner {
    margin-top: 0;
    padding-top: 12px;
}

.md-header {
    margin-bottom: 72px;
}

.md-sidebar {
    padding-top: 12px;
}

.md-content__inner {
    padding-top: 8px;
    margin-top: -69px;
}

.md-content__inner::before {
    height: 0;
}

.md-footer {
    position: relative;
    margin-top: 69px;
}

@media screen and (min-width: 60em) {
    .md-sidebar__scrollwrap {
        margin-top: -64px;
    }
}

/* Fix "Made with" hover link color in light mode */
html .md-footer-meta.md-typeset a:hover {
    color: light-dark(#084AFF, #526CFE)
}

/* Read the Docs elements font size fix */
readthedocs-flyout,
readthedocs-notification,
readthedocs-search,
readthedocs-hotkeys,
readthedocs-filetreediff,
readthedocs-docdiff {
    font-size: small;
}

/* 404 page text */
#not-found-text {
    float: right;
}

/* Tabbed content outlines */
.md-typeset .tabbed-labels > label:first-of-type {
    margin-left: 1rem;
}

.md-typeset .tabbed-labels {
    box-shadow: unset;
}

.tabbed-content .tabbed-block {
    border: 2px solid #777777;
    padding: 0.5rem;
    border-radius: 8px;
}

/* Forces only highlighting the important bits of codeblocks */
.highlight .gp, .highlight .go, .highlight .w {
    user-select: none;
}

/* Codeblock copy button styling */
.copy-button, .copy-button-copied {
    position: absolute;
    display: flex;
    float: right;
    right: 0;
    top: 0;
    font-family: var(--md-text-font-family), serif;
    /* The following two styles are included to deal with code block content
       that exceeds the width of the main content block. Without this styling
       the code shows behind the button, making it difficult to see. */
    background-color: var(--md-code-bg-color);
    padding: 14px 14px 5px 5px;
}

svg.copy-icon {
    height: 1em;
}

.copy-button svg.copy-icon {
    fill: #777777;
}

.copy-button-copied svg.copy-icon {
    fill: #009900;
    padding-left: 8px;
}

/* Search */
input.md-search__input, .md-search__suggest, .md-search-result__meta {
    font-family: 'Cutive', serif;
}

.md-search__suggest {
    padding-top: 1px;
}

/* Footer and footer navigation color */
.md-footer, .md-footer-meta {
    background-color: light-dark(#f5f5f5, #343A40);
}

footer.md-footer *, html .md-footer-meta.md-typeset a  {
    color: light-dark(#343A40, #E2E4E9);
}

/* Footer navigation */
.md-footer__inner {
    padding: 0;
}

.md-footer__inner .md-footer__title .md-ellipsis {
    overflow: unset;
}

.md-footer__link {
    margin-bottom: 0;
    margin-top: 0.5rem;
}

.md-footer__title {
    font-size: .6rem;
}

.md-footer__direction {
    font-size: .6rem
}

.md-footer__button {
    margin: 0 0 0.2rem 0;
}