/* Custom colours with cross-browser support */

/* Note that the theme should default to `light` if there is no conf.py or system setting, but for 
older browsers it gets left on data-theme=auto.  Below, i have used no `html[data-them=e...]` 
selector for specifying the `light` and default mode colours (i.e. they are the same), and a 
html[data-them=dark] selector last, for specifying dark mode colours as a special case. */

/* Set theme variables to custom colours. */

html,
html[data-theme=light] {
    --pst-color-primary: #106ed1;
    --pst-color-text-muted: #646464;
    --pst-color-link-hover: #f08080;
    --pst-color-border: #c9c9c9;
    --pst-color-on-background: #fff;
    --pst-color-shadow: #d8d8d8;
}

html[data-theme=dark] {
    --pst-color-primary: #2f8cef;
    --pst-color-text-muted: #a6a6a6;
    --pst-color-link-hover: #f09090;
    --pst-color-border: silver;
    --pst-color-target: #646464;
    --pst-color-on-background: #1e1e1e;
    --pst-color-shadow: #212121;
}

:root,
:root[data-theme=light] {
    --sd-color-card-border-hover: #2f8cef;
}

:root[data-theme=dark] {
    --sd-color-card-border-hover: white;
}

/* Set colours for browsers without alpha and or custom variable support. 
pydata-sphinx-theme selectors are repeated with fallback to hard coded values. */

/* inactive links in header and sidebar (must come before more specific hover/focus/active 
settings below) */

/* header */
.bd-header .navbar-nav li a.nav-link,
/* breadcrumbs */
ul.bd-breadcrumbs li.breadcrumb-item.active,
ul.bd-breadcrumbs li.breadcrumb-item:not(.breadcrumb-home):before,
/* sidebar */
.navbar-nav li a.nav-link {
    color: #646464;
    color: var(--pst-color-text-muted);
}

/* header */
html[data-theme=dark] .bd-header .navbar-nav li a.nav-link,
/* breadcrumbs */
html[data-theme=dark] ul.bd-breadcrumbs li.breadcrumb-item.active,
html[data-theme=dark] ul.bd-breadcrumbs li.breadcrumb-item:not(.breadcrumb-home):before,
/* sidebar */
html[data-theme=dark] .navbar-nav li a.nav-link {
    color: #a6a6a6;
    color: var(--pst-color-text-muted);
}

/* link hover colours */
a:hover {
    color: #f08080;
    color: var(--pst-color-link-hover);
}
html[data-theme=dark] a:hover {
    color: #f09090;
    color: var(--pst-color-link-hover);
}

/* all primary colour items incl headings, links & hover/focus/active links in header and sidebar */
h1,
h2,
a,
/* header */
.bd-header .navbar-nav li a.nav-link:focus,
.bd-header .navbar-nav li a.nav-link:hover,
.bd-header .navbar-nav>.active>.nav-link,
/* sidebar */
.navbar-nav li a:focus,
.navbar-nav li a:hover,
.navbar-nav li.current>a,
/* breadcrumbs */
ul.bd-breadcrumbs li.breadcrumb-item a {
    color:  #106ed1;
    color: var(--pst-color-primary);
}

/* headings and links */
html[data-theme=dark] h1,
html[data-theme=dark] h2,
html[data-theme=dark] a,
/* header */
html[data-theme=dark] .bd-header .navbar-nav li a.nav-link:focus,
html[data-theme=dark] .bd-header .navbar-nav li a.nav-link:hover,
html[data-theme=dark] .bd-header .navbar-nav>.active>.nav-link,
/* sidebar */
html[data-theme=dark] .navbar-nav li a:focus,
html[data-theme=dark] .navbar-nav li a:hover,
html[data-theme=dark] .navbar-nav li.current>a,
/* breadcrumbs */
html[data-theme=dark] ul.bd-breadcrumbs li.breadcrumb-item a {
    color: #2f8cef;
    color: var(--pst-color-primary);
}

/* sd-card border colours.  these styles must come before flex related modifications. */

.bd-content .sd-card {
    border: 1px solid #c9c9c9;
    border: 1px solid var(--pst-color-border);
}
html[data-theme=dark] .bd-content .sd-card {
    border: 1px solid silver;
    border: 1px solid var(--pst-color-border);
}

.bd-content .sd-card .sd-card-header {
    border-bottom: 1px solid #c9c9c9; 
    border-bottom: 1px solid var(--pst-color-border);
}
html[data-theme=dark] .bd-content .sd-card .sd-card-header {
    border-bottom: 1px solid silver;
    border-bottom: 1px solid var(--pst-color-border);
}

.sd-card-hover:hover {
    border-color: #2f8cef;
    border-color: var(--sd-color-card-border-hover);
}
html[data-theme=dark] .sd-card-hover:hover {
    border-color: white;
    border-color: var(--sd-color-card-border-hover);
}


/* opaque sidebar */
.bd-sidebar {
    background: white;
    background: var(--pst-color-background);
}

html[data-theme=dark] .bd-sidebar {
    background: black;
    background: var(--pst-color-background);
}

/* light and dark theme announcement background (i.e. the note about webp support) */
.bd-header-announcement:after {
    background-color: #459db9;
    background-color: var(--pst-color-info);
}

/* header and footer background & border */
.bd-header {
    background: #fff !important;
    background: var(--pst-color-on-background) !important;
    box-shadow: 0 0.125rem 0.25rem 0 #d8d8d8;
    box-shadow: 0 0.125rem 0.25rem 0 var(--pst-color-shadow);
}
html[data-theme=dark] .bd-header {
    background: #1e1e1e !important;
    background: var(--pst-color-on-background) !important;
    box-shadow: 0 0.125rem 0.25rem 0 #212121;
    box-shadow: 0 0.125rem 0.25rem 0 var(--pst-color-shadow);
}

.bd-footer {
    border-top: 1px solid #c9c9c9;
    border-top: 1px solid var(--pst-color-border);
}
html[data-theme=dark] .bd-footer {
    border-top: 1px solid silver;
    border-top: 1px solid var(--pst-color-border);
}
/* Custom variable definition
------------------------------------------------------------------------------------------------ */ 

/* NB note that some of these variables are duplicated by configurations above. */
html {
    /* header height will impact the top offset for many sections
    article header is 66% of Header by default,
    note 1rem = 16px by default */

    /* height of navigation bar */
    --pst-header-height: 5.6rem;
    /* space between nav bar and start of article */
    --pst-header-article-height: 3rem;

    /* prefer Segoe UI which is a windows system font and used for Leftfield logo */
    --pst-font-family-base: "Segoe UI", arial, sans-serif, -apple-system, BlinkMacSystemFont, "avenir next", avenir, "helvetica neue", helvetica, Cantarell, Ubuntu, roboto, noto;
    --pst-font-family-monospace: "SFMono-Regular", Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
    --pst-font-size-base: 0.9rem;

    --pst-font-size-h1: 2.5rem;
    --pst-font-size-h2: 2rem;

    /* --pst-sidebar-font-size: 0.9rem; */
    --pst-sidebar-font-size-mobile: 1.1rem;
    --pst-sidebar-header-font-size: 1.2rem;

    /* --pst-font-size-icon: 1.5rem; */

    font-size: 0.9rem;
    font-size: var(--pst-font-size-base);
}

/* Fonts 
-------------------------------------------------------------------------------------------------*/
code,
kbd,
pre,
samp {
    font-family: "SFMono-Regular", Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
    font-family: var(--pst-font-family-monospace);
}

body {
    font-family: "Segoe UI", arial, sans-serif, -apple-system, BlinkMacSystemFont, "avenir next", avenir, "helvetica neue", helvetica, Cantarell, Ubuntu, roboto, noto;
    font-family: var(--pst-font-family-base);
}

h1 {
    font-size: 2.5rem;
    font-size: var(--pst-font-size-h1);
}

h2 {
    font-size: 2rem;
    font-size: var(--pst-font-size-h2);
}

.bd-footer {
    font-size: 0.8rem;
}

.bd-header {
    font-size: 1.5rem;
}

.bd-sidebar-primary {
    font-size: 1.1rem;
    font-size: var(--pst-sidebar-font-size-mobile);
}

.bd-sidebar-primary .sidebar-header-items .sidebar-header-items__title {
    font-size: 1.2rem;
    font-size: var(--pst-sidebar-header-font-size);
}

/* class for optional rst centering of h1 and h2 headings */
.center-heading h1,
.center-heading h2 {
    text-align: center;
}

/* .navbar-icon-links i.fa-brands,
.navbar-icon-links i.fa-regular,
.navbar-icon-links i.fa-solid {
  font-size: 1.5rem;
  font-size: var(--pst-font-size-icon);
}

.theme-switch-button {
    font-size: 1.4rem;
    font-size: calc(var(--pst-font-size-icon) - 0.1rem);
} */
  
/* Other work arounds
------------------------------------------------------------------------------------------------ */ 

/* remove skip to main content link */
.skip-link {
    display: none;
}

/* turn off header and sidebar link underlines */
.navbar-nav li a.nav-link:hover {
    text-decoration: none
}

/* for no @media support. */
.bd-header-announcement {
    padding: .5rem 2%;
}

/* force firefox versions ~20-28 to use `border-box: border` so that element padding doesn't
overflow the viewport width */
.bd-header-announcement, 
.bd-header__inner,
.bd-container__inner,
.bd-article-container,
.bd-artile,
.bd-footer__inner {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
/* Header
-------------------------------------------------------------------------------------------------*/
/* sticky header for browsers without `position: sticky` support. adapted from 
https://www.w3schools.com/howto/howto_js_sticky_header.asp.  scroll event handler that applies 
.sticky-header class is in browser-support.js. */

.sticky-header {
    position: fixed;
    top: 0;
    /* width: 100%     */
}

.sticky-header + .bd-container {
    padding-top: 5.6rem;
    padding-top: var(--pst-header-height);
}

/* horizontally center the main header container */
.bd-header {
    display: block;
    /* width: 100%; */
    /* border: 1px solid red; */
}

.bd-header .bd-header__inner {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* place some space between section and icon links, and icon links and end of view window*/
.bd-header .navbar-header-items__center,
.bd-header .navbar-header-items__end {
    margin-right: 1rem;
}

/* the basic approach for header element ayout is taken from the second last example in 
../tests/header-test.html. vertical centering of elements *within* the main 
.navbar-header-items container (center and end sections) is done by setting 
`display: inline-block; vertical-alignment: middle;` on the (near) tip link elements; then, 
`position: relative; top: 50%; transform: translateY(-50%).` is used on navbar-header-items 
container itself.  there are other ways of doing it, but this seems the simplest and most 
efficient. the remaining logo, sidebar toggle, and mobile search button are also vertically 
centered using with the `position: relative; top: 50%; transform: translateY(-50%).` approach*/

/* change header elements with `display: flex` in the theme to `display: inline-block` so they are 
arranged horizontally and there is no mixing of flex and block display modes. */
.bd-header .navbar-header-items__start,
.bd-header .navbar-header-items__center,
.bd-header .navbar-header-items__end,
.bd-header .navbar-nav,
.bd-header .navbar-item,
.bd-header label.sidebar-toggle, 
.navbar-brand,
/* navbar-persistent--mobile not set in theme but included here to horizontally stack */
.navbar-persistent--mobile {
    display: inline-block;
    /* border: 1px solid red; */
}

/* horizontally stack section links, icon links, search and theme buttons with vertical alignment.
applies to sidebar elements too */
.navbar-nav li,
.search-button,
.theme-switch-button {
    display: inline-block;
    vertical-align: middle;
    /* border: 1px solid blue; */
}

/* repeat pydata-sphinx-theme rule(s) for turning off sidebar toggle & mobile search button
(necessary due to its inclusion in the display: inline-block list above) */
@media(min-width:960px) {
    label.sidebar-toggle.primary-toggle {
        display: none
    }

    .navbar-persistent--mobile {
        display: none
    }
}

/* right align section & icon link etc container & mobile search button */
.bd-header .navbar-header-items,
.navbar-persistent--mobile {
    float: right;
}

/* left align the sidebar toggle button */
.bd-header label.sidebar-toggle {
    float: left;
}

/* pydata-sphinx-theme sets heights of navbar-item & navbar-brand with --pst-header-height
custom varable. navbar-brand is re-set here for browsers without custom var support.  navbar-item
is handled separately below.  the height on bd-header__inner must also be set as it is the parent 
of all the vertically `translateY` centered elements below.*/
.bd-header .bd-header__inner,
.navbar-brand {
    height: 5.6rem;
    height: var(--pst-header-height);
    max-height: 5.6rem;
    max-height: var(--pst-header-height);
}

/* leave navbar-item to scale to its contents so that it does not inerfere with centering of parent 
navbar-header-items below*/
.bd-header .navbar-item {
    /* TODO: reset to --pst-header-height if flex supported */
    height: auto;
}

/* limit logo height for older safari and ie browsers - adapted from numpy docs  */
.navbar-brand img {
    height: 4.6rem;
    height: calc(var(--pst-header-height) - 1rem);
    width: auto;
}

/* vertically center main rhs container etc.  parent elements must have a fixed height */
.bd-header .navbar-header-items,
.navbar-persistent--mobile,
.bd-header label.sidebar-toggle {
    position: relative;
    top: 50%;
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    /* border: 1px solid green;  */
}

/* re-set header elements to their theme settings if flex is adequately supported.  
`flex-basis: min-content` is not required, but a work around test for `column-gap: 1rem`, which is
not possible to test for in it's flex mode directly - see https://ishadeed.com/article/flexbox-gap/
*/
/* TODO: can we lose the work around? */
@supports(display: flex) and (align-items: center) and (justify-content: end) and (flex-basis: min-content) {
    .bd-header {
        display: flex;
    }

    .bd-header .bd-header__inner {
        display: flex;
        margin-left: unset;
        margin-right: unset;
    }

    .bd-header .navbar-header-items__start,
    .bd-header .navbar-header-items__center,
    .bd-header .navbar-header-items__end,
    .bd-header .navbar-nav,
    .bd-header .navbar-item,
    .bd-header label.sidebar-toggle, 
    .navbar-brand,
    /* navbar-persistent--mobile not set in theme but included here to horizontally stack */
    .navbar-persistent--mobile {
        display: flex;
        /* border: 1px solid red; */
    }
    
    .navbar-nav li,
    .search-button,
    .theme-switch-button {
        display: flex;
        vertical-align: unset;
        /* border: 1px dashed blue; */
    }

    /* repeat pydata-sphinx-theme rule(s) for turning off "mobile" res sidebar toggle & search button
    (necessary due to its includion in the display: inline-block list above) */
    @media(min-width:960px) {
        label.sidebar-toggle.primary-toggle {
            display: none
        }

        .navbar-persistent--mobile {
            display: none
        }
    }

    /* `float: *` settings are ignored in `display: flex` so no need to unset here */

    /* reset to navbar-item height */
    .bd-header .navbar-item {
        height: var(--pst-header-height);
    }

    .bd-header .navbar-header-items,
    .navbar-persistent--mobile,
    .bd-header label.sidebar-toggle {
        position: unset;
        top: unset;
        -moz-transform: unset;
        -ms-transform: unset;
        -webkit-transform: unset;
        transform: unset;
        /* border: 1px dashed green; */
    }
}

/* Sphinx-design grids
-------------------------------------------------------------------------------------------------*/
/* work around for un-clickable sd card text in ie 10 - see 
https://stackoverflow.com/questions/6438048/css-problem-link-positionabsolute-above-a-box-not-work-in-ie-opera */
.sd-stretched-link::after {
    background-color: rgba(255, 255, 255, 0);
}

/* sphinx-design styles for no `flex-wrap: wrap` support */
/* column style (not "row" as it says) */
/* see https://tylercipriani.com/blog/2012/08/01/display-inline-block-extra-margin. */
.sd-d-flex-row {
    /* override `display: flex !important` in sphinx-design sd-d-flex-row */
    display: inline-block !important;
    vertical-align: top;
    /* space is inserted between sibling inline-blocks - this is an empirical workaround to remove
     it.  columns would be too wide to fit in a row without it. */
    margin-right: -0.3em;
    /* outline: 1px solid blue; */
}

.sd-row {
    /* allow wrapping of child inline-block elements */
    display: block;
    /* expand width to page, otherwise it would be width of children. */
    /* width: 100%;     */
    /* outline: 1px solid red; */
}

/* spacing for browsers without custom var support */
.sd-row>* {
    padding-right: 0.25rem;
    padding-right: calc(var(--sd-gutter-x) * 0.5);
    padding-left: 0.25rem;
    padding-left: calc(var(--sd-gutter-x) * 0.5);
    margin-top: 0.5rem;
    margin-top: var(--sd-gutter-y);
}

/* for no flex wrap support, turn card borders off as adjacent cards will not have the same height.  
must come after related colour style(s) which turn borders on. */
.bd-content .sd-card {
    border-style: none;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* corss-browser card scale on hover */
.sd-card-hover:hover {
    -moz-transform: scale(1.01);
    -ms-transform: scale(1.01);
    -webkit-transform: scale(1.01);
    transform: scale(1.01);
}

/* sphinx-design styles for browsers with flex wrapping (and @support) support */
@supports(flex-wrap: wrap) and (flex-direction: row) and (flex-shrink: 0) and (flex: 0 0 auto) and (flex: 1 0 0%) {
    /* leave bd-main set to `display: block` to work around chrome v29-38 & safari 9-10 issues */
    /* .bd-main {
        display: flex;
        outline: 1px solid green;
    } */

    .sd-d-flex-row {
        /* override `display: inline-block !important` above */
        display: flex !important;
        /* remove the margin workaround above */
        margin-right: unset;
        /* outline: 1px dashed blue; */
    }

    .sd-row {
        display: flex;
        /* outline: 1px dashed red; */
    }

    /* revert card borders for = height cards */
    /* TODO: what are the original padding settings - we should revert to those. */
    .bd-content .sd-card {
        border-style: solid;
        padding-left: unset;
        padding-right: unset;
    }

}

/* Main body
-------------------------------------------------------------------------------------------------*/
.bd-main {
    display: block;
    /* outline: 1px solid green; */
}

/* display body content in safari 9-10 & chrome 29 (+?) */
.bd-container,
.bd-main .bd-content {
    display: block;
}

/* horizontally center the main content */
.bd-container .bd-container__inner,
.bd-main .bd-content .bd-article-container {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

@supports(display: flex) and (justify-content: center) and (flex-direction: column) and (flex-grow: 1) {
    .bd-container,
    .bd-main .bd-content {
        display: flex;
    }

    .bd-container .bd-container__inner,
    .bd-main .bd-content .bd-article-container {
        display: flex;
        margin-left: unset;
        margin-right: unset;
    }
}


/* Breadcrumbs
-------------------------------------------------------------------------------------------------*/
/* stack breadcrumbs horizontally */
ul.bd-breadcrumbs li.breadcrumb-item,
ul.bd-breadcrumbs li.breadcrumb-item a {
    display: inline-block;
    /* display: -webkit-flex; */
    display: flex;
}

/* breadcrumb divider */
ul.bd-breadcrumbs li.breadcrumb-item:not(.breadcrumb-home):before {
    content: ">";
}

/* clear divider in front of home - work around for early opera version w/o :not support */
/* ul.bd-breadcrumbs li.breadcrumb-home:before {
    content: none;
}  */
/* Sidebar
-------------------------------------------------------------------------------------------------*/

/* remove rtd footer which creates vertical scroll 
(https://github.com/pydata/pydata-sphinx-theme/issues/1065) */
#rtd-footer-container {
    display: none;
}

/* size the overlay for browsers without vh & vw support. clicking on overlay collapses the 
sidebar, so without this the sidebar gets stuck. */
input#__primary:checked + label.overlay.overlay-primary,
input#__secondary:checked + label.overlay.overlay-secondary {
    height: 100%;
    height: 100vh;
    width: 100%;
    width: 100vw;
}

/* size the sidebar for browsers without vh support*/
@media (max-width: 959.98px) {
    .bd-sidebar-primary {
      height: 100%;
      height: 100vh;
      max-height: 100%;
      max-height: 100vh;
      /* add webkit transition fallback */
      -webkit-transition: visibility 0.2s ease-out, margin 0.2s ease-out;
      transition: visibility 0.2s ease-out, margin 0.2s ease-out;
    }
}
  
/* configre theme `display: flex; flex-direction: column` (i.e. vertically stacked) elements as 
`display: block` */
.bd-sidebar-primary,
.bd-sidebar-primary .sidebar-header-items,
.bd-sidebar-primary .sidebar-header-items .sidebar-header-items__center,
/* more specific selector for section links than is used in header.css */
.bd-sidebar-primary .sidebar-header-items .sidebar-header-items__center .navbar-nav li,
.bd-sidebar-primary .sidebar-header-items .sidebar-header-items__end {
    display: block;
    /* border: 1px solid red; */
}

/* stack end theme button & icon link elements horizontally */
.bd-sidebar-primary .sidebar-header-items .sidebar-header-items__end .navbar-item,
.bd-sidebar-primary .sidebar-header-items .sidebar-header-items__end .navbar-icon-links {
    display: inline-block;
    /* set font size of all elements in the end section to that of the theme button, so that 
    inline-block spacing is equal (ish) */
    font-size: 1.4rem;
    font-size: calc(var(--pst-font-size-icon) - .1rem);
    /* vertical-align: top; */
    /* border: 1px solid green; */
}

/* styles for icon link elements are set in header.css */


/* re-set sidebar elements to their default theme settings if flex is adequately supported. 
`flex-basis: min-content` is not required, but a work around test for `gap: 0.5rem`, which is
not possible to test for in it's flex mode directly - see https://ishadeed.com/article/flexbox-gap/
*/
@supports(display: flex) and (flex-direction: column) and (align-items: center) and (flex-basis: min-content) {
    .bd-sidebar-primary,
    .bd-sidebar-primary .sidebar-header-items,
    .bd-sidebar-primary .sidebar-header-items .sidebar-header-items__center,
    /* more specific selector for section links than is used in header.css */
    .bd-sidebar-primary .sidebar-header-items .sidebar-header-items__center .navbar-nav li,
    .bd-sidebar-primary .sidebar-header-items .sidebar-header-items__end {
        display: flex;
        /* border: 1px dashed red; */
    }
    
    /* stack horizontally */
    .bd-sidebar-primary .sidebar-header-items .sidebar-header-items__end .navbar-item,
    .bd-sidebar-primary .sidebar-header-items .sidebar-header-items__end .navbar-icon-links {
        display: flex;
        vertical-align: unset;
        /* border: 1px dashed green; */
    }

    /* the theme has more spacing between icon link elements than between the icon links container 
    and theme button.  overwrite that so the spacing is equal */
    .bd-sidebar-primary .sidebar-header-items .sidebar-header-items__end,
    .bd-sidebar-primary .sidebar-header-items .sidebar-header-items__end .navbar-icon-links {
        column-gap: 0.5rem;
    }
}

/* Footer
-------------------------------------------------------------------------------------------------*/

/* note that a sticky footer is implemented in browser-support.js for browsers without 
`flex-grow: 1` support.  it is `flex-grow: 1` on the main content that pushes the footer to the 
bottom of the view port. */
/* from https://css-tricks.com/a-clever-sticky-footer-technique/ */
/* `position: sticky` gets browser support after `flex-grow: 1`, so we don't use this as an option,
but rather toggle between the `flex-grow: 1` on the main content and the javascript sticky footer */
/* .bd-footer {
    position: sticky;
    top: 100vh;
    width: 100%    
} */

/* horizontally center the main footer container */
.bd-footer,
.bd-footer .bd-footer__inner {
    display: block;
    /* border: 1px solid red; */
}

/* change footer elements with `display: flex` to `display: inline-block` so they are arranged 
horizontally. */
.bd-footer .footer-items__start,
.bd-footer .footer-items__end {
    display: inline-block;
    /* outline: 1px solid green; */
}

/* right align the end container */
.bd-footer .footer-items__end {
    float: right;
    text-align: right;
}

/* re-set footer elements to their default theme settings if flex is adequately supported */
@supports(display: flex) and (flex-grow: 1) and (flex-direction: column) and (justify-content: center) {
    /* and (text-align: end)*/
    .bd-footer,
    .bd-footer .bd-footer__inner,
    .bd-footer .footer-items__start,
    .bd-footer .footer-items__end {
        display: flex;
        /* border: 1px dashed red; */
    }

    .bd-footer .footer-items__end {
        float: none;
        /* the theme sets `text-align: end`, but I think `text-align: right` set above is correct*/
        /* text-align: end; */
    }
}