html[data-theme="light"] {
    --sd-color-primary: #1f5aff;
    --sd-color-primary-highlight: #4c7cff;
    --pst-color-primary: #1f5aff;
    --pst-color-secondary: #1f5aff;
    --pst-color-text-base: #22252A;
    --pst-color-text-muted: #22252A;
    --pst-icon-external-link: "";
    --border: 1px solid rgba(204, 206, 210);
    --blue: 31, 90, 255;
    --text-blue: 24, 72, 205;
    --light-blue: 76, 124, 255;
    --red: 217, 62, 0;

    /* Code highlight */
    --pst-color-inline-code: var(--text-blue);

    .highlight .kn, .highlight .nb, .highlight .k, .highlight .mi, .highlight .kc, code.xref, a code {
        color: rgb(var(--pst-color-inline-code));
        font-weight: inherit;
        text-decoration: none !important;
    }

    .highlight .kn, .highlight .o, .highlight .nb {
        color: rgb(var(--text-blue));
        font-weight: 400;
    }

    .highlight .nt {
        font-weight: 400;
    }
   
    .highlight .c1 {
        color: rgb(var(--text-grey));
        font-style: italic;
    }

    .highlight .nf, .highlight .nn, .highlight .n, .highlight .p, .highlight .mf, .highlight .nb {
        color: var(--pst-color-text-base) !important;
    }

    .highlight .nd {
        color: #5c35cc;
        font-weight: bold;
    }

    .highlight .ow {
        color: #204a87;
        font-weight: bold;
    }

    .highlight .s2 {
        color: rgb(var(--text-blue));
    }

    .highlight .ne {
        color: rgb(var(--text-blue));
    }

}

:root {
    --sd-btn-primary: #1f5aff;
    --sd-btn-primary-highlight: #4c7cff;
    --pst-header-height: 80px;

    /* Colors they are being added inside a `rgb()` tag that's why they look like this
    also this pattern is being used by the theme under the hood, it's not because I really
    like to use this rather weird pattern :)
    */
    --pst-color-link: var(--pst-color-text-base);
    --pst-color-secondary: #31f5aff;
    --pst-color-text-base: var(--pst-color-primary);
    --pst-color-preformatted-background: 247, 248, 252;
    --pst-color-inline-code: var(--text-blue);
    --pst-color-sidebar-link-active: var(--text-blue);
    --pst-color-sidebar-link-hover: var(--text-blue);
    --pst-color-toc-link-active: var(--pst-color-text-base);
    --pst-color-toc-link-hover: var(--blue);
    --pst-color-link-hover: var(--text-blue);
    --pst-color-toc-link: 144, 142, 137;
    --pst-color-navbar-link: 255, 255, 255;
    --pst-color-navbar-link-hover: var(--light-blue);
    --pst-color-admonition-note: 166, 227, 255;
    --pst-color-on-background: transparent;
    --border: 1px solid rgba(204, 206, 210);
    --blue: 31, 90, 255;
    --text-blue: 24, 72, 205;
    --light-blue: 76, 124, 255;
    --red: 217, 62, 0;
    --transition: all .2s ease-in-out;
    --pst-font-family-base: Inter;
    --pst-font-family-heading: Inter;
    --pst-font-family-monospace: Roboto Mono, monospace;
    --pst-font-size-h1: 2rem;
    --pst-font-size-h2: 1.3rem;
    --pst-font-size-h3: 1.1rem;
    --pst-font-size-h4: 1rem;
    --text-grey: 117, 117, 117;
}

.admonition {
    border: var(--border) !important;
}

.admonition .admonition-title {
    background-color: #fff !important;
}

.versionchanged {
    border: var(--border) !important;
    background-color: #fff !important;
    box-shadow: none;
    margin: 2rem 0rem !important;
}

.versionmodified.changed:before {
    color: rgb(var(--light-blue)) !important;
}

pre {
    border: none;
    box-shadow: none;
}

.logo {
    padding-left: 4px;
    padding-top: 4px;
    padding-bottom: 4px;
}

.no-list {
    list-style: none;
    padding-left: 0;
}

/* in-line code */
code.literal {
    color: rgb(var(--pst-color-inline-code));
    background-color: transparent;
    border: none;
    padding: .1rem .25rem;
}

/* 
Tables

The theme update changed table formatting to alternate
grey-white for table rows. Most of these changes
are trying to remove that formatting to instead be
horizontal grey lines.

*/
.table {
    --bs-table-bg: transparent;
    --bs-table-color: transparent;
    --bs-table-color: var(--bs-emphasis-color);
    --bs-table-bg: var(--bs-body-bg);
    --bs-table-border-color: var(--bs-border-color);
    --bs-table-accent-bg: transparent;
    border-color: var(--bs-table-border-color);
    border-top: var(--border);
    border-bottom: var(--border);
    border-left: none;
    border-right: none;
}

.table thead tr, tr {
    border: 0 none; 
    border-bottom: var(--border);
}
/* Don't bold first row (header) text */
.table thead th {
    font-weight: inherit;
}
.table td,
.table th {
    border-top: var(--border);
}
.table td~td,
.table td~th,
.table th~td,
.table th~th {
    border-left: none;
}

table caption {
    caption-side: bottom;
    color: #6c757d;
    text-align: center;
}

/* similar adjustments for dataframe table outputs in jupyter notebooks */

.bd-content div.cell_output table.dataframe thead tr {
    background-color: transparent;
    border-bottom: var(--border);
}

.bd-content div.cell_output table.dataframe tbody tr:hover {
    background-color: rgba(66, 165, 245, 0.2);
}

.bd-sidebar {
    border-right: none;
}

/* header nav */

.bd-header {
    background-color: rgb(25, 27, 31) !important;
}

.bd-header .navbar-nav li.pst-header-nav-item.current>.nav-link,
.bd-header .navbar-nav li.pst-header-nav-item>.nav-link,
.bd-header .navbar-nav li a {
    color: rgba(var(--pst-color-navbar-link));
}

.bd-header .navbar-nav li.pst-header-nav-item.current>.nav-link:before {
    border-bottom: 1.5px solid var(--pst-color-primary);
}

.bd-header .navbar-nav li.pst-header-nav-item>.nav-link:hover:before,
.navbar-icon-links li.nav-item a.nav-link:hover {
    border-bottom: none;
    box-shadow: none;
}

.navbar-center-item .nav-item {
    display: flex;
    align-items: center;
}

/* Search button */
form.bd-search .form-control {
    border: none;
}

form.bd-search .form-control:focus {
    box-shadow: 0 0 0 0.1rem var(--pst-color-primary);
}

/* Right page TOC */
nav.page-toc  a.reference.internal {
    text-decoration: none !important;
}

/* Left TOC */
.navbar-nav a.reference.internal {
    text-decoration: none !important;
}

/* Don't display "Section Navigation" header in left hand TOC */
.bd-links__title {
    display: none;
}

main a.reference.external,
main a.reference.internal,
a:visited,
a>span.std.std-ref {
    color: inherit;
    text-underline-offset: 3px;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-decoration-color: rgb(var(--blue));
    transition: var(--transition);
}

/* sphinx-design overrides */

/* change secondary w/ outline button colors */
.sd-btn-outline-secondary {
    color: var(--pst-color-preformatted-background) !important;
    border-color: var(--pst-color-text-base) !important;
}

.sd-btn-outline-secondary:hover {
    color: var(--pst-color-text-base) !important;
    background-color: #e9e9e9 !important;
    border-color: var(--pst-color-primary) !important;
}

.sd-btn {
    text-decoration: none !important;
}

/* selected sphinx tab */
.bd-content .sd-tab-set>input:checked+label {
    border-color: var(--pst-color-primary);
    border-radius: 0;
    border-style: none none solid;
    border-width: 0 0 .0625rem;
    transform: none;

}

/* hovering over a not-selected tab */
.bd-content .sd-tab-set>input:not(:checked, :focus-visible)+label:hover {
    border-bottom: .0625rem solid var(--sd-color-tabs-underline-hover);
    color: var(--sd-color-tabs-label-hover);
}

/* other not-selected tabs */
.bd-content .sd-tab-set>label {
    background-color: #fff;
    border-bottom: .0625rem solid var(--sd-color-tabs-overline);
    margin-bottom: 0;
    color: var(--sd-color-tabs-label-inactive);
    padding: 1em 1.25em .5em;
    transition: color 250ms;
    width: auto;
    z-index: 1;
}

/* all the tabs */
.bd-content .sd-tab-set .sd-tab-content {
    /* border: -.0625rem solid var(--sd-color-tabs-overline);
    border-radius: 0; */

    border: none;
    border-style: none;
    border-radius: 0;
    border-color: var(--sd-color-tabs-overline);
    box-shadow: 0 -0.0625rem var(--sd-color-tabs-overline), 0 .0625rem var(--sd-color-tabs-underline);
}

/* Remove styling around grid elements.  We want to use them for basic columns,
 * rather than for stylized cards */

.sd-container,
.sd-container-fluid,
.sd-container-lg,
.sd-container-md,
.sd-container-sm,
.sd-container-xl {
    padding-left: 0;
    padding-right: 0;
}

ul {
    list-style-type: circle;
}

.prev-next-area p {
    color: var(--pst-color-text-base) !important;
    text-decoration: none !important;
}

.prev-next-area p.prev-next-title:hover {
    text-underline-offset: 3px;
    text-decoration: underline !important;
    color: var(--pst-color-text-base);
}

.prev-next-area a:hover {
    color: var(--pst-color-text-base);
}

.copybtn {
    cursor: pointer;
    margin-top: .5rem;
    margin-right: .5rem;
}

i.fas.fa-list, i.fas.fa-external-link-alt {
    display: none;
}

/* Media query for small screens */
@media (max-width: 958px) {
    .navbar-light .navbar-nav>.active>.nav-link {
        margin-right: 80%;
    }
    ul#navbar-main-elements {
        margin: 1rem 0rem 0rem 2rem;
    }
    .nav-item {
        margin-top: 1rem;
    }

    ul#navbar-icon-links {
        flex-direction: row;
        margin-left: 2rem;
        padding-bottom: 1rem;
    }
    .navbar-brand {
        margin-left: .5rem;
    }
}

@media (max-width: 675px) {
    .navbar-light .navbar-nav>.active>.nav-link {
        margin-right: 68%;
    }
}

@media (min-width: 750px) {
    .bd-links {
        max-height: calc(100vh - 15rem) !important;
    }
}

/* Scroll wide Jupyter cells when their cell metadata includes the `scroll-output` tag
https://github.com/executablebooks/MyST-NB/issues/453#issuecomment-1265931053 */

div.cell.tag_scroll-output div.cell_output {
    max-height: 24em;
    overflow-y: auto;
    max-width: 100%;
    overflow-x: auto;
}

div.cell.tag_scroll-output div.cell_output::-webkit-scrollbar {
    width: 0.3rem;
    height: 0.3rem;
}

div.cell.tag_scroll-output div.cell_output::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 0.25rem;
}

div.cell.tag_scroll-output div.cell_output::-webkit-scrollbar-thumb:hover {
    background: #a0a0a0;
}

@media print {
    div.cell.tag_scroll-output div.cell_output {
            max-height: unset;
            overflow-y: visible;
            max-width: unset;
            overflow-x: visible;
   }
}

/* class for making link text clickable within a card */
.better-sd-card
.sd-card-text {
    z-index: 2;
    position: relative !important;
}

.blog-card {
    box-shadow: none !important;
    transform: unset !important;
}

.sd-badge {
    font-size: 0.9em;
    text-decoration: none !important;
}

.card-logos  {
    width: 75%;
}