/* Define base colors according to FW theme. Colors based on
https://flywheel.io */
:root {
    /* Deifne primary colors */
    --fw-primary--blue: #0d6efd;
    --fw-primary--indigo: #6610f2;
    --fw-primary--purple: #6f42c1;
    --fw-primary--purple-hsl: hsla(261, 51%, 51%, 0.1);
    --fw-primary--pink: #d63384;
    --fw-primary--red: #dc3545;
    --fw-primary--orange: #fd7e14;
    --fw-primary--yellow: #ffc107;
    --fw-primary--green: #198754;
    --fw-primary--teal: #20c997;
    --fw-primary--cyan: #0dcaf0;
    --fw-primary--white: #fff;
    --fw-primary--gray: #6c757d;
    --fw-primary--gray-dark: #343a40;
    --fw-primary--gray-100: #f8f9fa;
    --fw-primary--gray-200: #e9ecef;
    --fw-primary--gray-300: #dee2e6;
    --fw-primary--gray-400: #ced4da;
    --fw-primary--gray-500: #adb5bd;
    --fw-primary--gray-600: #6c757d;
    --fw-primary--gray-700: #495057;
    --fw-primary--gray-800: #343a40;
    --fw-primary--gray-900: #212529;
    --fw-primary--primary: #0d6efd;
    --fw-primary--secondary: #6c757d;
    --fw-primary--success: #198754;
    --fw-primary--info: #0dcaf0;
    --fw-primary--warning: #ffc107;
    --fw-primary--danger: #dc3545;
    --fw-primary--light: #f8f9fa;
    --fw-primary--dark: #212529;
    --fw-primary--primary-rgb: rgb(13,110,253);
    --fw-primary--primary-hsl: hsl(216, 98%, 52%, 0.1);
    --fw-primary--secondary-rgb: rgb(108,117,125);
    --fw-primary--success-rgb: rgb(25,135,84);
    --fw-primary--info-rgb: rgb(13,202,240);
    --fw-primary--warning-rgb: rgb(255,193,7);
    --fw-primary--danger-rgb: rgb(220,53,69);
    --fw-primary--light-rgb: rgb(248,249,250);
    --fw-primary--dark-rgb: rgb(33,37,41);
    --fw-primary--white-rgb: rgb(255,255,255);
    --fw-primary--black-rgb: rgb(0,0,0);
    --fw-primary--body-color-rgb: (33,37,41);
    --fw-primary--body-bg-rgb: rgb(255,255,255);
    --fw-primary--body-color: #212529;
    --fw-primary--body-bg: #fff;

    /* Define accent colors */
    --fw-accent-color--black: #000;
    --fw-accent-color--cyan-bluish-gray: #abb8c3;
    --fw-accent-color--white: #fff;
    --fw-accent-color--pale-pink: #f78da7;
    --fw-accent-color--vivid-red: #cf2e2e;
    --fw-accent-color--luminous-vivid-orange: #ff6900;
    --fw-accent-color--luminous-vivid-amber: #fcb900;
    --fw-accent-color--light-green-cyan: #7bdcb5;
    --fw-accent-color--vivid-green-cyan: #00d084;
    --fw-accent-color--pale-cyan-blue: #8ed1fc;
    --fw-accent-color--vivid-cyan-blue: #0693e3;
    --fw-accent-color--vivid-purple: #9b51e0;
    --fw-accent-color--alto: #ddd;
    --fw-accent-color--blue: #21759b;
    --fw-accent-color--cod-gray: #111;
    --fw-accent-color--dove-gray: #666;
    --fw-accent-color--gallery: #eee;
    --fw-accent-color--gray: #808080;
    --fw-accent-color--gray-alt: #929292;
    --fw-accent-color--light-yellow: #fff9c0;
    --fw-accent-color--mineshaft: #333;
    --fw-accent-color--silver: #ccc;
    --fw-accent-color--silver-chalice: #aaa;
    --fw-accent-color--whitesmoke: #f1f1f1;

    --fw--code--color--purple-dark: #6A1FAF;
    --fw--code--color--red-dark: #AF221F;
    --fw--code--color--green-dark: #65AF1F;
    --fw--code--color--cyan-dark: #1FADAF;
    --fw--code--color--purple-light: #AF73E6;
    --fw--code--color--red-light: #E67573;
    --fw--code--color--green: #ABE673;
    --fw--code--color--cyan-light: #73E4E6;

    --fw-accent-gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);
    --fw-accent-gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);
    --fw-accent-gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);
    --fw-accent-gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);
    --fw-accent-gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);
    --fw-accent-gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);
    --fw-accent-gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);
    --fw-accent-gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);
    --fw-accent-gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);
    --fw-accent-gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);
    --fw-accent-gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);
    --fw-accent-gradient-midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);

    /* Define shadows */
    --fw-shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
    --fw-shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
    /* --fw-shadow--sharp: 0.0rem 0.45rem 0.9rem rgba(0, 0, 0, 0.2); */
    --fw-shadow--sharp: 0.0em 0.4rem 0.2rem rgba(0, 0, 0, 0.2);
    --fw-shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);
    --fw-shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);
}

[data-md-color-scheme="flywheel-light"] {
    /* Default color shades */
    --md-default-fg-color:               var(--fw-primary--body-color);
    --md-default-fg-color--light:        var(--fw-primary--gray-900);
    --md-default-fg-color--lighter:      var(--fw-primary--gray-800);
    --md-default-fg-color--lightest:     var(--fw-primary--gray-700);
    --md-default-bg-color:               var(--fw-primary--body-bg);
    --md-default-bg-color--light:        var(--fw-primary--gray-100);
    --md-default-bg-color--lighter:      var(--fw-primary--gray-300);
    --md-default-bg-color--lightest:     var(--fw-primary--gray-500);

    /* Accent color shades. Also controls rendering of Mermaid diagrams */
    --md-accent-fg-color:                var(--fw-primary--purple);
    --md-accent-fg-color--transparent:   var(--fw-primary--purple-hsl); /* Controls mermaid block background */
    --md-accent-bg-color:                var(--fw-primary--white-rgb);
    --md-accent-bg-color--light:         hsla(#{rgb2hsl(var(--fw-primary--white-rgb))}, 0.7);
  
    /* Code color shades */
    --md-code-fg-color:                  var(--fw-primary--gray-700);
    --md-code-bg-color:                  var(--fw-primary--gray-100);
  
    /* Code highlighting color shades */
    --md-code-hl-color:                  hsla(#{rgb2hsl(var(--fw-primary--primary-rgb))}, 0.5);
    --md-code-hl-number-color:           var(--fw-primary--red);
    --md-code-hl-special-color:          var(-fw--code--color--cyan-dark);
    --md-code-hl-function-color:         var(--fw--code--color--green-dark);
    --md-code-hl-constant-color:         var(---fw--code--color--red-dark);
    --md-code-hl-keyword-color:          var(--fw--code--color--purple-dark);
    --md-code-hl-string-color:           var(--md-code-fg-color);
    --md-code-hl-name-color:             var(--md-code-fg-color);
    --md-code-hl-operator-color:         var(--md-default-fg-color--light);
    --md-code-hl-punctuation-color:      var(--md-default-fg-color--light);
    --md-code-hl-comment-color:          var(--md-default-fg-color--light);
    --md-code-hl-generic-color:          var(--md-default-fg-color--light);
    --md-code-hl-variable-color:         var(--md-default-fg-color--light);
  
    /* Typeset color shades */
    --md-typeset-color:                  var(--md-default-fg-color);
  
    /* Typeset `a` color shades */
    --md-typeset-a-color:                var(--fw-primary--indigo);
  
    /* Typeset `mark` color shades */
    --md-typeset-mark-color:             hsla(#{hex2hsl($clr-yellow-a200)}, 0.5);
  
    /* Typeset `del` and `ins` color shades */
    --md-typeset-del-color:              hsla(6, 90%, 60%, 0.15);
    --md-typeset-ins-color:              hsla(150, 90%, 44%, 0.15);
  
    /* Typeset `kbd` color shades */
    --md-typeset-kbd-color:              hsla(0, 0%, 98%, 1);
    --md-typeset-kbd-accent-color:       hsla(0, 100%, 100%, 1);
    --md-typeset-kbd-border-color:       hsla(0, 0%, 72%, 1);
  
    /* Typeset `table` color shades */
    --md-typeset-table-color:            hsla(0, 0%, 0%, 0.12);
    --md-typeset-table-color--light:     hsla(0, 0%, 0%, 0.035);
  
    /* Admonition color shades */
    --md-admonition-fg-color:            var(--md-default-fg-color);
    --md-admonition-bg-color:            var(--md-default-bg-color);
  
    /* Warning color shades */
    --md-warning-fg-color:              hsla(0, 0%, 0%, 0.87);
    --md-warning-bg-color:              hsla(60, 100%, 80%, 1);
  
    /* Footer color shades */
    --md-footer-fg-color:                hsla(0, 0%, 100%, 1);
    --md-footer-fg-color--light:         hsla(0, 0%, 100%, 0.7);
    --md-footer-fg-color--lighter:       hsla(0, 0%, 100%, 0.45);
    --md-footer-bg-color:                hsla(0, 0%, 0%, 0.87);
    --md-footer-bg-color--dark:          hsla(0, 0%, 0%, 0.32);
  
    /* Shadow depth 1 */
    --md-shadow-z1:                        var(--fw-shadow--natural);
  
    /* Shadow depth 2 */
    --md-shadow-z2:                         var(--fw-shadow--sharp);
  
    /* Shadow depth 3 */
    --md-shadow-z3:                         var(--fw-shadow--deep);
}


[data-md-color-scheme="flywheel-light"] .md-tag-icon {
    background-color: var(--fw-primary--purple);
    color: var(--fw-primary--white);
}

[data-md-color-scheme="flywheel-light"] .md-tag-icon::before {
    background-color: var(--fw-primary--white);
}

/* color highlighting for search bar results */
[data-md-color-scheme="flywheel-light"] article span mark {
    color: var(--fw-primary--white);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    text-decoration: underline;
    word-break: break-word;

}

[data-md-color-scheme="flywheel-dark"] {
    /* Default color shades */
    --md-default-fg-color:               var(--fw-primary--gray-400);
    --md-default-fg-color--light:        var(--fw-primary--gray-500);
    --md-default-fg-color--lighter:      var(--fw-primary--gray-600);
    --md-default-fg-color--lightest:     var(--fw-primary--gray-700);
    --md-default-bg-color:               var(--fw-primary--dark-rgb);
    --md-default-bg-color--light:        var(--fw-primary--gray-500);
    --md-default-bg-color--lighter:      var(--fw-primary--gray-300);
    --md-default-bg-color--lightest:     var(--fw-primary--gray-100);

    /* Accent color shades */
    --md-accent-fg-color:                var(--fw-primary--primary-rgb);
    --md-accent-fg-color--transparent:   hsla(#{rgb2hsl(var(--fw-primary--primary-rgb))}, 0.7);
    --md-accent-bg-color:                var(--fw-primary--white-rgb);
    --md-accent-bg-color--light:         hsla(#{rgb2hsl(var(--fw-primary--white-rgb))}, 0.7);
  
    /* Code color shades */
    --md-code-fg-color:                  var(--fw-primary--gray-400);
    --md-code-bg-color:                  var(--fw-accent-color--cod-gray);
  
    /* Code highlighting color shades */
    --md-code-hl-color:                  hsla(#{rgb2hsl(var(--fw-primary--primary-rgb))}, 0.5);
    --md-code-hl-number-color:           var(--fw-primary--red);
    --md-code-hl-special-color:          var(-fw--code--color--cyan-light);
    --md-code-hl-function-color:         var(--fw--code--color--green-light);
    --md-code-hl-constant-color:         var(---fw--code--color--red-light);
    --md-code-hl-keyword-color:          var(--fw--code--color--purple-light);
    --md-code-hl-string-color:           var(--md-code-fg-color);
    --md-code-hl-name-color:             var(--md-code-fg-color);
    --md-code-hl-operator-color:         var(--md-default-fg-color--light);
    --md-code-hl-punctuation-color:      var(--md-default-fg-color--light);
    --md-code-hl-comment-color:          var(--md-default-fg-color--light);
    --md-code-hl-generic-color:          var(--md-default-fg-color--light);
    --md-code-hl-variable-color:         var(--md-default-fg-color--light);
  
    /* Typeset color shades */
    --md-typeset-color:                  var(--md-default-fg-color);
  
    /* Typeset `a` color shades */
    --md-typeset-a-color:                var(--fw-primary--blue);
  
    /* Typeset `mark` color shades */
    --md-typeset-mark-color:             hsla(#{hex2hsl($clr-yellow-a200)}, 0.5);
  
    /* Typeset `del` and `ins` color shades */
    --md-typeset-del-color:              hsla(6, 90%, 60%, 0.15);
    --md-typeset-ins-color:              hsla(150, 90%, 44%, 0.15);
  
    /* Typeset `kbd` color shades */
    --md-typeset-kbd-color:              hsla(0, 0%, 98%, 1);
    --md-typeset-kbd-accent-color:       hsla(0, 100%, 100%, 1);
    --md-typeset-kbd-border-color:       hsla(0, 0%, 72%, 1);
  
    /* Typeset `table` color shades */
    --md-typeset-table-color:            hsla(0, 0%, 98%, 0.12);
    --md-typeset-table-color--light:     hsla(0, 0%, 0%, 0.035);
  
    /* Admonition color shades */
    --md-admonition-fg-color:              var(--md-default-fg-color);
    --md-admonition-bg-color:              var(--md-default-bg-color);
  
    /* Warning color shades */
    --md-warning-fg-color:               hsla(0, 0%, 0%, 0.87);
    --md-warning-bg-color:               hsla(60, 100%, 80%, 1);
  
    /* Footer color shades */
    --md-footer-fg-color:                hsla(0, 0%, 100%, 1);
    --md-footer-fg-color--light:         hsla(0, 0%, 100%, 0.7);
    --md-footer-fg-color--lighter:       hsla(0, 0%, 100%, 0.45);
    --md-footer-bg-color:                hsla(0, 0%, 0%, 0.87);
    --md-footer-bg-color--dark:          hsla(0, 0%, 0%, 0.32);
  
    /* Shadow depth 1 */
    --md-shadow-z1:                        var(--fw-shadow--natural);
  
    /* Shadow depth 2 */
    --md-shadow-z2:                        var(--fw-shadow--sharp);
  
    /* Shadow depth 3 */
    --md-shadow-z3:                        var(--fw-shadow--deep);

    /* Tags */
    
}


[data-md-color-scheme="flywheel-dark"] .md-typeset li a{
    color: var(--fw-primary--gray-200);
    text-decoration: underline;
    text-decoration-color: var(--fw-primary--gray-600);
}

[data-md-color-scheme="flywheel-dark"] .md-typeset li a:hover{
    color: var(--fw-primary--gray-200);
    text-decoration: underline;
    text-decoration-color: var(--fw-primary--gray-200);
}

[data-md-color-scheme="flywheel-dark"] .md-tag-icon {
    background-color: var(--md-default-fg-color--lightest);
}

.md-header,.md-tabs,.md-footer-nav {
    background-image: var(--fw-accent-gradient-midnight);
}

/* Keep the sticky tabs bar visually continuous with the header gradient
   instead of falling back to the default solid primary color. */
.md-tabs {
    background-color: transparent;
}

/* On narrow screens the nav tabs collapse into a slide-out drawer; give its
   header the same midnight gradient as the main header for consistency. */
.md-nav--primary .md-nav__title {
    background-image: var(--fw-accent-gradient-midnight);
    background-color: transparent;
}

/* The feedback banner and the "Was this page helpful?" widget belong on the
   production site only. overrides/main.html marks local previews and review
   apps with data-fw-preview. */
[data-fw-preview] [data-md-component="announce"],
[data-fw-preview] .md-feedback {
    display: none;
}

/* Zensical renders the header's repository-link block even without a repo_url
   (deliberately unset in zensical.toml), and the empty block still takes up
   width, so search no longer reaches the right edge. Hide it, and widen search
   from Zensical's 8.9rem to the 11.7rem the site has always used. */
.md-header__source {
    display: none;
}

@media screen and (min-width: 60em) {
    .md-search__button {
        width: 11.7rem;
    }
}

.md-footer {
    background-image: var(--fw-accent-gradient-midnight);
}

/* Card grids (e.g. the home page): more breathing room between cards, and a
   cleaner hover (subtle lift + shadow) instead of the default accent-colored
   border, which looks odd around full-bleed image cards. */
.md-typeset .grid.cards {
    gap: 1.5rem;
}

.md-typeset .grid.cards > ul > li,
.md-typeset .grid.cards > ol > li {
    border: none;
    box-shadow: none;
    padding: 1rem;
    transition: box-shadow .25s, transform .25s;
}

.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid.cards > ul > li:focus-within,
.md-typeset .grid.cards > ol > li:hover,
.md-typeset .grid.cards > ol > li:focus-within {
    box-shadow: 0 .25rem .6rem rgba(0, 0, 0, .12);
    transform: translateY(-.15rem);
}

/* tag images with #center at the source to center them*/
img[src$="#center"] {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* tag images with #center at the source to center them*/
img[src$="#center-75"] {
    width: 75%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* tag images with #center at the source to center them*/
img[src$="#center-50"] {
    width: 50%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* tag images with #center at the source to center them*/
img[src$="#center-25"] {
    width: 25%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Reference: https://zensical.org/docs/authoring/icons-emojis/#with-animations */
@keyframes pulse {
    0%, 40%, 80%, 100% {
        transform: scale(1);
    }
    20%, 60% {
        transform: scale(1.15);
    }
}

.pulse {
    animation: pulse 1000ms infinite;
}