:root>* {
    --md-primary-fg-color: rgba(0, 0, 113, 1); /* dark blue */
    --md-primary-fg-color--light: rgba(70, 90, 255, 1); /* medium blue */
    --md-primary-fg-color--dark: rgba(185, 0, 255, 1); /* purple */
    --gx-turquoise: rgba(70, 218, 255, 1); /* turquoise */
}

/* Tables */
table {
    border-top: 6px solid rgb(185, 0, 255) !important;
    border-bottom: 4px solid rgb(185, 0, 255) !important;
}

tr:nth-child(even) {
    background-color: #efefef;
}

th {
    background-color: #ECECEC;
}

/* Headers */
h1 {
    border-bottom: 2px solid rgba(185, 0, 255, 1.0) !important;
}

h2 {
    border-bottom: 1px solid rgba(185, 0, 255, 0.5) !important;
}

h3 {
    border-bottom: 0.5px solid rgba(185, 0, 255, 0.2) !important;
}

.feedback_context_menu {
    display: none;
    position: absolute;
    border: solid 1px grey;
    padding: 5px;
    border-radius: 5px;
    background: white;
    font-size: .7rem;
    line-height: 1.6;
    box-shadow: 5px 5px 5px lightgray;
    cursor: pointer;

}

/* Header nav tabs - horizontal scroll affordance.
   Material hides the tab bar scrollbar, so with more chapter titles than fit
   the window nothing shows that the list scrolls. assets/nav_tabs_scroll.js
   toggles the classes below; without JS the tab bar is unchanged.

   The fades sit against .md-grid, the 61rem content column the titles are
   laid out in - anchoring them to .md-tabs would strand the arrows out at
   the window edges on a wide screen. */
.md-tabs .md-grid {
    position: relative;
}

.md-tabs__fade {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    width: 3.6rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
}

/* Two stacked layers per edge: a white glow over a fade to the header colour,
   so a cut-off title reads as passing under the edge rather than just
   stopping. The glow is listed first, so it paints on top. Both layers use
   several stops to approximate an ease-out falloff - a plain two-stop
   gradient leaves a visible band where it lands on the header colour. */
.md-tabs__fade--left {
    left: 0;
    justify-content: flex-start;
    background:
        linear-gradient(to right,
            rgba(255, 255, 255, .30) 0%,
            rgba(255, 255, 255, .23) 22%,
            rgba(255, 255, 255, .14) 45%,
            rgba(255, 255, 255, .06) 68%,
            rgba(255, 255, 255, .02) 85%,
            rgba(255, 255, 255, 0) 100%),
        linear-gradient(to right,
            var(--md-primary-fg-color) 0%,
            var(--md-primary-fg-color) 26%,
            rgba(0, 0, 113, .70) 46%,
            rgba(0, 0, 113, .36) 66%,
            rgba(0, 0, 113, .12) 84%,
            rgba(0, 0, 113, 0) 100%);
}

.md-tabs__fade--right {
    right: 0;
    justify-content: flex-end;
    background:
        linear-gradient(to left,
            rgba(255, 255, 255, .30) 0%,
            rgba(255, 255, 255, .23) 22%,
            rgba(255, 255, 255, .14) 45%,
            rgba(255, 255, 255, .06) 68%,
            rgba(255, 255, 255, .02) 85%,
            rgba(255, 255, 255, 0) 100%),
        linear-gradient(to left,
            var(--md-primary-fg-color) 0%,
            var(--md-primary-fg-color) 26%,
            rgba(0, 0, 113, .70) 46%,
            rgba(0, 0, 113, .36) 66%,
            rgba(0, 0, 113, .12) 84%,
            rgba(0, 0, 113, 0) 100%);
}

/* Each side appears only while it has something left to reveal. */
.md-tabs--scrollable:not(.md-tabs--at-start) .md-tabs__fade--left,
.md-tabs--scrollable:not(.md-tabs--at-end) .md-tabs__fade--right {
    opacity: 1;
    pointer-events: auto;
}

/* The tab bar collapses on scroll down; the arrows go with it. */
.md-tabs[hidden] .md-tabs__fade {
    opacity: 0;
    pointer-events: none;
}

.md-tabs__scroll-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    padding: 0;
    border-radius: 50%;
    color: var(--md-primary-bg-color);
    cursor: pointer;
    opacity: .8;
    transition: opacity .25s, background-color .25s;
}

/* Solid white circle on hover, chevron stays dark so it keeps its contrast. */
.md-tabs__scroll-btn:hover {
    background-color: var(--md-primary-bg-color);
    color: var(--md-primary-fg-color);
    opacity: 1;
}

.md-tabs__scroll-btn svg {
    width: 1rem;
    height: 1rem;
}

.md-tabs__fade--left .md-tabs__scroll-btn svg {
    transform: rotate(180deg);
}

/* Print-specific styling */
@media print {
    /*----Fonts----*/
    @font-face {
        font-family: TitiliumRegular;
        font-weight: 400;
        src: url('./fonts/TitilliumWeb-Regular.ttf') format('ttf');
    }

    body {
        font-family: TitiliumRegular;
        color: #6e6e6d;
        width: auto;
    }

    @font-face {
        font-family: TitiliumSemiBold;
        font-weight: 400;
        src: url('./fonts/TitilliumWeb-Bold.ttf') format('ttf');
    }

    @font-face {
        font-family: TitiliumItalic;
        font-weight: 400;
        src: url('./fonts/TitilliumWeb-Italic.ttf') format('ttf');
    }

    /* page options */
    @page {
        size: A4;
        margin: 1.3cm;
        @top-right {
            color: rgb(185, 0, 255);
            font-weight: 900;
            font-size: small;
            content: counter(page);
            height: 0.5cm;
            text-align: center;
            width: 0.5cm;
        }
    }

    @page :blank {
        @top-left {
            background: none;
            content: ''
        }

        @top-center {
            content: none
        }

        @top-right {
            content: none
        }
    }

    @page no-chapter {
        @top-left {
            background: none;
            content: none
        }

        @top-center {
            content: none
        }

        @top-right {
            content: none
        }
    }

    @page first {
        @top-left {
            background: url('./background-title-with-logo.png') no-repeat center;
        }
    }

    @page chapter {
        @top-left {
            background: url('./background-all.png') no-repeat center;
        }

        @top-right {
            content: none
        }
    }

    /*----Cover Page----*/
    #print-site-cover-page {
        break-after: always;
        page: first;
        text-align: left;
        font-family: TitiliumSemiBold;
        color: white;
        font-size: 70px;
    }

    /*----Table of Contents----*/
    .toc+ul,
    .toc+ul li {
        list-style-type: none;
    }

    .toc+ul li a {
        text-decoration: none;
        color: #6e6e6d;
    }

    .toc+ul>li>a {
        font-family: TitiliumSemiBold;
        color: #000094;
    }

    .toc ul {
        margin-bottom: 24px;
    }

    .toc+ul li a::after {
        color: #6e6e6d;
        content: target-counter(attr(href), page);
        float: right;
    }

    /*----Titles----*/
    h1 {
        color: aliceblue;
        padding-top: 35%;
        font-size: 3rem;
        font-weight: 300;
        z-index: 1;
    }

    h1:not(.first-title) {
        page: chapter;
        break-after: always;
    }

    h1 span {
        display: block;
        margin-bottom: 12pt;
        font-size: 8rem;
        color: rgb(185, 0, 255);
    }

    h2 {
        margin-top: 42px;
        border-bottom: 1px solid rgb(185, 0, 255);
        padding-bottom: 12px;
    }

    h2,
    h3,
    h4 {
        color: #000094d8;
    }

    h2,
    h3 {
        font-size: 13pt;
    }


    /*----Content----*/
    img {
        max-width: 100%;
        transform: translate(-50%, 0);
        margin: 2rem 0 2rem 50%;
    }

    p,
    ul,
    li,
    a {
        font-size: 11pt;
    }

    ul {
        list-style-type: circle;
    }

    em {
        font-family: TitiliumItalic;
    }

    strong {
        font-family: TitiliumSemiBold;
    }

    table {
        border-top: 4px solid rgb(185, 0, 255) !important;
        border-bottom: 4px solid rgb(185, 0, 255) !important;
    }

    td,
    th {
        /* border: 5px solid #fff !important; */
        border: 3px solid #fff !important;
        /* font-style:normal; */
        color: #000094;
        padding: 1em;
    }

    tr:nth-child(2n+1) {
        background-color: #f3f6f6;
        border: 1px solid #ffffff;
    }

    thead th {
        font-size: 11pt;
        font-family: TitiliumSemiBold;
        background-color: #ECECEC;
        text-align: center;
    }

    tbody,
    tbody a {
        font-size: 10pt;
        font-family: TitiliumRegular;
    }

    td code {
        color: #E74C3C;
        white-space: pre-wrap;
        word-wrap: break-word;
        background-color: #ffffff;
        padding: 5px 5px;
        border: solid 1px #e1e4e5;
        font-size: 75%;
    }

    pre {
        background-color: rgb(248, 248, 248);
        border-bottom: rgb(225, 228, 229);
        padding: 12px;
    }

    pre code {
        font-family: TitiliumRegular;
        white-space: pre;
        word-wrap: normal;
    }

    p code,
    li code {
        color: #E74C3C;
        white-space: pre-wrap;
        word-wrap: break-word;
        background-color: #ffffff;
        padding: 5px 5px;
        border: solid 1px #e1e4e5;
        font-size: 75%;
    }

    .language-text {
        font-family: TitiliumRegular;
        white-space: pre-wrap;
        word-wrap: break-word;
    }

    /* emojis rendering */
    .emojione {
        width: 16px;
    }

    /* Specific handling for !!! example blocks */
    .admonition.example {
        page-break-inside: avoid;
        page-break-before: auto;
    }

    /* Avoid breaking inside tables */
    table, tr, td, th {
        page-break-inside: avoid !important;
    }

    /* Prevent breaks in Plotly charts */
    .js-plotly-plot, .plot-container, .svg-container, svg.main-svg {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        overflow: visible !important;
    }

    /* Hide Plotly toolbar in PDF */
    .plotly .modebar {
        page-break-inside: avoid !important;
        display: none !important;
    }
}