/* GRASS documentation site style sheet
 *
 * send improvements to GRASS Developers list
 *
 *  (eg how to reach the same result on netscape, mozilla konqueror?)
 *
 * Fonts:
 *	http://www.w3.org/TR/REC-CSS2/fonts.html
 * Tables:
 *	http://www.w3.org/TR/REC-CSS2/tables.html
 */

 :root>* {

     /* GRASS Variables
  Use these variables to customize the GRASS theme.
  ----------------------------------------------------------------------------- */
     /* GRASS Font */
     --gs-grass-font: 'Fira Sans Regular', sans-serif;
     --gs-grass-font--medium: 'Fira Sans Medium', sans-serif;
     --gs-grass-font--bold: 'Fira Sans Bold', sans-serif;
     --gs-grass-font--light: 'Fira Sans ExtraLight', sans-serif;

     /* Primary Color */
     --gs-primary-color: rgb(76, 176, 91);
     --gs-primary-color--light: rgba(76, 176, 91, 0.541);
     --gs-primary-color--lighter: rgba(76, 176, 91, 0.322);
     --gs-primary-color--lightest: rgba(76, 176, 91, 0.071);

     /* Primary Alt Color */
     --gs-primary-alt-color: rgb(110, 208, 121);
     --gs-primary-alt-color--light: rgba(110, 208, 121, 0.541);
     --gs-primary-alt-color--lighter: rgba(110, 208, 121, 0.322);
     --gs-primary-alt-color--lightest: rgba(110, 208, 121, 0.071);

     /* Primary Light Color */
     --gs-primary-light-color: rgb(135, 233, 145);
     --gs-primary-light-color--light: rgba(135, 233, 145, 0.541);
     --gs-primary-light-color--lighter: rgba(138, 233, 145, 0.322);
     --gs-primary-light-color--lightest: rgba(138, 233, 145, 0.071);

     /* Primary Dark Color */
     --gs-primary-dark-color: rgb(8, 139, 54);
     --gs-primary-dark-color--light: rgba(8, 139, 54, 0.541);
     --gs-primary-dark-color--lighter: rgba(8, 139, 54, 0.322);
     --gs-primary-dark-color--lightest: rgba(8, 139, 54, 0.071);

     /* Secondary Color */
     --gs-secondary-color: rgb(0, 57, 63);
     --gs-secondary-color--light: rgba(0, 57, 63, 0.541);
     --gs-secondary-color--lighter: rgba(0, 57, 63, 0.322);
     --gs-secondary-color--lightest: rgba(0, 57, 63, 0.071);

     /* Secondary Alt Color */
     --gs-secondary-alt-color: rgb(39, 87, 92);
     --gs-secondary-alt-color--light: rgba(39, 87, 92, 0.541);
     --gs-secondary-alt-color--lighter: rgba(39, 87, 92, 0.322);
     --gs-secondary-alt-color--lightest: rgba(39, 87, 92, 0.071);

     /* Secondary Light Color */
     --gs-secondary-light-color: rgb(74, 120, 125);
     --gs-secondary-light-color--light: rgba(74, 121, 127, 0.541);
     --gs-secondary-light-color--lighter: rgba(74, 121, 127, 0.322);
     --gs-secondary-light-color--lightest: rgba(74, 121, 127, 0.071);

     /* Secondary Dark Color */
     --gs-secondary-dark-color: rgb(0, 32, 36);
     --gs-secondary-dark-color--light: rgba(0, 32, 36, 0.541);
     --gs-secondary-dark-color--lighter: rgba(0, 32, 36, 0.322);
     --gs-secondary-dark-color--lightest: rgba(0, 32, 36, 0.071);

     /* Special Colors */
     --gs-support-color: rgb(243, 57, 138);
     --gs-support-color--dark: rgba(243, 57, 138, 0.541);
     --gs-support-color--light: rgba(243, 57, 138, 0.322);
     --gs-yard-sign-color: rgb(116, 93, 2);

     /* White */
     --gs-white-base-color: rgb(255, 255, 255);
     --gs-white-color: rgb(247, 247, 247);
     --gs-white-color--light: rgba(247, 247, 247, 0.541);
     --gs-white-color--lighter: rgba(247, 247, 247, 0.322);
     --gs-white-color--lightest: rgba(247, 247, 247, 0.071);

     /* Black */
     --gs-black-base-color: rgb(0, 0, 0);
     --gs-black-color: rgb(2, 25, 5);
     --gs-black-color--light: rgba(2, 25, 5, 0.541);
     --gs-black-color--lighter: rgba(2, 25, 5, 0.322);
     --gs-black-color--lightest: rgba(2, 25, 5, 0.071);

     /* Grey */
     --gs-grey-color: rgb(145, 144, 143);
     --gs-grey-color-light: rgba(145, 144, 143, 0.541);
     --gs-grey-color-lighter: rgba(145, 144, 143, 0.322);
     --gs-grey-color-lightest: rgba(145, 144, 143, 0.071);

     /* Grey Alt */
     --gs-grey-alt-color: rgb(216, 216, 216);
     --gs-grey-alt-color--light: rgba(216, 216, 216, 0.541);
     --gs-grey-alt-color--lighter: rgba(216, 216, 216, 0.322);
     --gs-grey-alt-color--lightest: rgba(216, 216, 216, 0.071);

     /* Grey Light */
     --gs-grey-light-color: rgb(240, 240, 241);
     --gs-grey-light-color--light: rgba(240, 240, 241, 0.541);
     --gs-grey-light-color--lighter: rgba(240, 240, 241, 0.322);
     --gs-grey-light-color--lightest: rgba(240, 240, 241, 0.071);

     /* Grey Dark */
     --gs-grey-dark-color: rgb(78, 77, 76);
     --gs-grey-dark-color--light: rgba(78, 77, 76, 0.541);
     --gs-grey-dark-color--lighter: rgba(78, 77, 76, 0.322);
     --gs-grey-dark-color--lightest: rgba(78, 77, 76, 0.071);

     /* Images */
     --gs-grass-background-image: url("/images/logos/banner.jpg");

     /* Icons */
     --gs-grass-logo: url('_static/grass_logo.svg');
     --md-admonition-icon--grass-icon: url('_static/grass_logo.svg');


     /* Material MkDocs Variables
  Customization Docs:
    https://squidfunk.github.io/mkdocs-material/customization/
  Color Docs:
    https://squidfunk.github.io/mkdocs-material/setup/changing-the-colors/?h=colors
  Color Definitions for all CSS variables:
    https://github.com/squidfunk/mkdocs-material/blob/master/src/templates/assets/stylesheets/main/_colors.scss
  ----------------------------------------------------------------------------- */

     /* Default Colors */
     /* ----------------------------------------------------------------------------- */
     --md-text-font-family: var(--gs-grass-font);
     --md-text-font: var(--gs-grass-font);
     --md-code-font: var(--gs-grass-font);
     --md-default-fg-weight: 400;

     --md-hue: 225deg;
     --md-default-fg-color: var(--gs-black-color);
     --md-default-fg-color--light: var(--gs-black-color--light);
     --md-default-fg-color--lighter: var(--gs-black-color--lighter);
     --md-default-fg-color--lightest: var(--gs-black-color--lightest);

     --md-default-bg-color: var(--gs-white-color);
     --md-default-bg-color--light: var(--gs-white-color--light);
     --md-default-bg-color--lighter: var(--gs-white-color--lighter);
     --md-default-bg-color--lightest: var(--gs-white-color--lightest);

     /* Primary color shades */
     /* ----------------------------------------------------------------------------- */
     --md-primary-fg-color: var(--gs-primary-color);
     --md-primary-fg-color--light: var(--gs-primary-color--light);
     --md-primary-fg-color--dark: var(--gs-primary-dark-color);
     --md-primary-bg-color: var(--gs-white-color);
     /* Includes color for the navbar text */
     --md-primary-bg-color--light: var(--gs-white-color--light);

     /* Accent Colors */
     /* ----------------------------------------------------------------------------- */
     --md-accent-fg-color: var(--gs-primary-dark-color);
     /* Link color on hover */
     --md-accent-fg-color--transparent: var(--gs-primary-alt-color--light);
     --md-accent-bg-color: var(--gs-white-color);
     --md-accent-bg-color--light: var(--gs-primary-color--light);

     /* Footer */
     /* ----------------------------------------------------------------------------- */
     --md-footer-fg-color: var(--gs-secondary-color);
     --md-footer-fg-color--light: var(--gs-white-color);
     --md-footer-fg-color--lighter: var(--gs-white-color);
     --md-footer-bg-color: var(--gs-primary-light-color--lightest);
     --md-footer-bg-color--light: var(--gs-primary-light-color--light);
     --md-footer-bg-color--dark: var(--gs-secondary-color);

     /* Typeset Colors */
     /* ----------------------------------------------------------------------------- */
     --md-typeset-a-color: var(--gs-primary-color);
     --md-typeset-a-color--hover: var(--gs-primary-alt-color);
     --md-typeset-color: var(--md-default-fg-color);
     --md-typeset-del-color: #f5503d26;
     --md-typeset-ins-color: #0bd57026;
     --md-typeset-kbd-color: #fafafa;
     --md-typeset-kbd-accent-color: #fff;
     --md-typeset-kbd-border-color: #b8b8b8;
     --md-typeset-mark-color: #ffff0080;
     --md-typeset-table-color: var(--gs-grey-alt-color);
     --md-typeset-table-color--light: var(--gs-grey-alt-color--light);

     /* Mermaid colors */
     /* ----------------------------------------------------------------------------- */
     --md-mermaid-font-family: var(--md-text-font-family), sans-serif;
     --md-mermaid-edge-color: var(--md-code-fg-color);
     --md-mermaid-node-bg-color: var(--md-primary-fg-color--light);
     --md-mermaid-node-fg-color: var(--md-primary-fg-color);
     --md-mermaid-label-bg-color: var(--md-default-bg-color);
     --md-mermaid-label-fg-color: var(--md-code-fg-color);
     --md-mermaid-sequence-actor-bg-color: var(--md-mermaid-label-bg-color);
     --md-mermaid-sequence-actor-fg-color: var(--md-mermaid-label-fg-color);
     --md-mermaid-sequence-actor-border-color: var(--md-mermaid-node-fg-color);
     --md-mermaid-sequence-actor-line-color: var(--md-default-fg-color--lighter);
     --md-mermaid-sequence-actorman-bg-color: var(--md-mermaid-label-bg-color);
     --md-mermaid-sequence-actorman-line-color: var(--md-mermaid-node-fg-color);
     --md-mermaid-sequence-box-bg-color: var(--md-mermaid-node-bg-color);
     --md-mermaid-sequence-box-fg-color: var(--md-mermaid-edge-color);
     --md-mermaid-sequence-label-bg-color: var(--md-mermaid-node-bg-color);
     --md-mermaid-sequence-label-fg-color: var(--md-mermaid-node-fg-color);
     --md-mermaid-sequence-loop-bg-color: var(--md-mermaid-node-bg-color);
     --md-mermaid-sequence-loop-fg-color: var(--md-mermaid-edge-color);
     --md-mermaid-sequence-loop-border-color: var(--md-mermaid-node-fg-color);
     --md-mermaid-sequence-message-fg-color: var(--md-mermaid-edge-color);
     --md-mermaid-sequence-message-line-color: var(--md-mermaid-edge-color);
     --md-mermaid-sequence-note-bg-color: var(--md-mermaid-label-bg-color);
     --md-mermaid-sequence-note-fg-color: var(--md-mermaid-edge-color);
     --md-mermaid-sequence-note-border-color: var(--md-mermaid-label-fg-color);
     --md-mermaid-sequence-number-bg-color: var(--md-mermaid-node-fg-color);
     --md-mermaid-sequence-number-fg-color: var(--md-accent-bg-color);


     /* Code Highlighting */
     /* ----------------------------------------------------------------------------- */
     --md-code-fg-color: var(--gs-secondary-color);
     --md-code-bg-color: var(--gs-grey-light-color);
     --md-code-hl-color: var(--gs-secondary-light-color);
     --md-code-hl-color--light: var(--gs-grey-dark-color);
     --md-code-hl-number-color: var(--gs-primary-dark-color);
     --md-code-hl-special-color: var(--gs-secondary-light-color);
     --md-code-hl-function-color: var(--gs-secondary-alt-color);
     --md-code-hl-keyword-color: var(--gs-primary-color);
     --md-code-hl-string-color: var(--gs-primary-color);
     --md-code-hl-constant-color: var(--gs-primary-color);
     --md-code-hl-name-color: var(--gs-secondary-alt-color);
     --md-code-hl-operator-color: var(--gs-secondary-light-color);
     --md-code-hl-punctuation-color: var(--md-default-fg-color--light);
     --md-code-hl-comment-color: var(--gs-grey-color);
     --md-code-hl-generic-color: var(--md-default-fg-color--light);
     --md-code-hl-variable-color: var(--gs-secondary-alt-color);

     /* Admonition Colors */
     /* ----------------------------------------------------------------------------- */
     --md-admonition-fg-color: var(--md-default-fg-color);
     --md-admonition-bg-color: var(--md-default-bg-color);

     /* Warning Colors */
     /* ----------------------------------------------------------------------------- */
     --md-warning-fg-color: var(--gs-primary-alt-color);
     --md-warning-bg-color: var(--gs-primary-alt-color--light);

     /* Shadow Colors */
     /* ----------------------------------------------------------------------------- */
     --md-shadow-z1: 0 0.2rem 0.5rem var(--gs-black-color--light), 0 0 0.05rem var(--gs-black-color--lightest);
     --md-shadow-z2: 0 0.2rem 0.5rem var(--gs-black-color--lightest), 0 0 0.05rem var(--gs-black-color--lighter);
     --md-shadow-z3: 0 0.2rem 0.5rem var(--gs-black-color--lighter), 0 0 0.05rem var(--gs-black-color--light);
 }

body {
    background: var(--gs-white-color);
    color: var(--gs-black-color);
    font-family: var(--gs-grass-font);
}

code {
    font-family: var(--gs-grass-font);
}

 /* We need to override the default Material theme colors */
 [data-md-color-primary=grass-green] .md-header,
 [data-md-color-primary=grass-green] .md-hero,
 [data-md-color-primary=grass-green] .md-tabs {
    background-color: var(--gs-primary-color);
    color: var(--gs-white-color);
}

.md-header {
    font-weight: bold;
    background-color: var(--md-primary-bg-color);
}

.md-header__button.md-logo {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.md-header-nav__topic {
    color: var(--gs-white-base-color) !important;
}

.md-footer-nav {
    background-color: var(--md-footer-bg-color);
    color: var(--md-footer-fg-color);
}

.md-footer-meta {
    background-color: var(--md-footer-bg-color--dark);
}

.md-typeset h2[id] .headerlink:focus,
.md-typeset h2[id]:hover .headerlink:hover,
.md-typeset h2[id]:target .headerlink {
    color: var(--gs-secondary-alt-color);
}

.md-nav__link {
    display: block;
    margin-top: .625em;
    transition: color .125s;
    text-overflow: ellipsis;
    cursor: pointer;
    overflow: hidden;
    color: var(--gs-primary-color)
}

/* Changes the show source table of content link */
.md-nav__extra_link:focus,
.md-nav__extra_link:hover {
    color: var(--gs-primary-dark-color);
}

.md-tabs {
    background-color: var(--md-primary-fg-color);
    color: var(--gs-white-base-color);
    display: block;
    line-height: 1.3;
    overflow: auto;
    width: 100%;
    z-index: 3;
 }

/* Changes the header color of the table of contents */
.md-nav__title {
    color: var(--gs-secondary-alt-color);
    display: block;
    font-weight: 700;
    overflow: hidden;
    padding: 0 .6rem;
    text-overflow: ellipsis;
}

 /* Changes the header color of the nav bar */
.md-nav--lifted>.md-nav__list>.md-nav__item>[for] {
    color: var(--gs-secondary-alt-color);
}

.md-nav__link--active,
.md-nav__link:active {
    color: var(--gs-primary-dark-color);
}

/* Typesets */
.md-typeset h1 {
    color: var(--gs-secondary-alt-color);
    font-family: var(--gs-grass-font--bold);
    font-weight: bold;
    font-size: 2.25em;
    line-height: 1.3;
    margin: 0 0 1em;
}

.md-typeset h2 {
    font-family: var(--gs-grass-font--light);
    color: var(--gs-secondary-light-color);
    font-size: 2em;
    text-transform: capitalize;
    line-height: 1.4;
    margin: .64em 0 .64em;
}

.md-typeset h3 {
    color: var(--gs-secondary-light-color);
    font-size: 1.25em;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.5;
    margin: 1.6em 0 .8em;
}

.md-typeset a {
    color: var(--md-typeset-a-color);
    text-decoration: none;
}

.md-typeset a:focus,
.md-typeset a:hover,
.md-nav__link:focus,
.md-nav__link:hover {
    color: var(--md-accent-fg-color);
}

.md-typeset table:not([class]) tbody tr:hover {
    background-color: transparent;
}

.gs-icon-primary {
    color: var(--gs-primary-color);
}

.gs-icon-accent {
    color: var(--gs-secondary-color);
}

/* Custom GRASS support button style: */
.md-button.gs-support-button {
    color: var(--gs-support-color);
    margin: 0 0.25rem;
}

.md-button.gs-support-button:focus,
.md-button.gs-support-button:hover {
    background-color: var(--gs-support-color);
    border-color: var(--gs-support-color);
    color: var(--gs-white-color);
}

/* Custom GRASS admonition (callout) style: */
.md-typeset .admonition.grass-tip,
.md-typeset details.grass-tip {
    border-color: var(--gs-primary-light-color);
}

.md-typeset .grass-tip>.admonition-title,
.md-typeset .grass-tip>summary {
    background-color: var(--gs-primary-color--lightest);
}

.md-typeset .grass-tip>.admonition-title::before,
.md-typeset .grass-tip>summary::before {
    background-color: var(--gs-primary-color);
    -webkit-mask-image: var(--md-admonition-icon--grass-icon);
    mask-image: var(--md-admonition-icon--grass-icon);
}

span.sig-prename.descclassname {
    color: var(--gs-secondary-alt-color);
}

.highlight {
    background-color: var(--gs-grey-light-color);
}