html {
    --pst-font-size-base: 17px;
    --pst-font-family-base: "Manrope", "Aptos", "Segoe UI", sans-serif;
    --pst-font-family-heading: "Manrope", "Aptos", "Segoe UI", sans-serif;
}

.underline {
    text-decoration: underline;
}

/*  SCORE specfic colors
    A list of available colro variable names for pyData Sphinx Theme can be found at
    https://pydata-sphinx-theme.readthedocs.io/en/stable/_downloads/565fbb3ecf2b3048f5fb3953890ba176/_color.scss

    The base color is TEAL */

/* Version Switcher Button */
button.btn.version-switcher__button {
    color: var(--pst-color-text-base);
}

/* Version Switcher Menu */
.version-switcher__menu a.list-group-item {
    color: var(--pst-color-text-base);
}

html[data-theme="light"] {
    --bs-btn-hover-bg: #e4edf6;
    --pst-color-primary: #b84a00;
    --pst-color-secondary: #ffffff;
    --pst-color-accent: #b84a00;
    --pst-color-target: #fff0e4;
    --pst-color-background: #f3f7fb;
    --pst-color-surface: #ffffff;
    --pst-color-on-surface: #3e5268;
    --pst-color-on-background: #ffffff;
    --pst-color-text-base: #3e5268;
    --pst-color-heading: #18385e;
    --pst-heading-color: #18385e;
    --pst-color-text-muted: #52657a;
    --pst-color-muted: #52657a;
    --pst-color-link: #005b99;
    --pst-color-link-higher-contrast: #005b99;
    --pst-color-link-hover: #004b7d;
    --pst-color-inline-code: #005b99;
    --pst-color-table-row-zebra-high-bg: #eaf0f6;
    --pst-color-table-row-hover-bg: #e4edf6;
    --pst-color-border: #d6e0ea;
    --score-color-active: #e4edf6;
    --score-nav-color: #234a78;
    --score-nav-active-color: #0078c8;
    --score-nav-active-bg: #eaf3fa;
    --sd-color-card-text: #3e5268;
}

html[data-theme="dark"] {
    --bs-btn-hover-bg: #293849;
    --pst-color-primary: #ff9b54;
    --pst-color-secondary: #1c242e;
    --pst-color-accent: #ff9b54;
    --pst-color-target: #45362c;
    --pst-color-background: #151a21;
    --pst-color-surface: #1c242e;
    --pst-color-on-surface: #c7d3df;
    --pst-color-on-background: #1c242e;
    --pst-color-text-base: #c7d3df;
    --pst-color-heading: #edf4fa;
    --pst-heading-color: #edf4fa;
    --pst-color-text-muted: #a5b5c5;
    --pst-color-muted: #a5b5c5;
    --pst-color-link: #80cfff;
    --pst-color-link-higher-contrast: #80cfff;
    --pst-color-link-hover: #b5e4ff;
    --pst-color-inline-code: #80cfff;
    --pst-color-table-row-zebra-high-bg: #202b37;
    --pst-color-table-row-hover-bg: #293849;
    --pst-color-border: #354351;
    --score-color-active: #293849;
    --score-nav-color: #c7d3df;
    --score-nav-active-color: #ff9b54;
    --score-nav-active-bg: #293849;
    --sd-color-card-text: #c7d3df;
}

/* Content area size */
/* Docs: https://pydata-sphinx-theme.readthedocs.io/en/stable/user_guide/layout.html#horizontal-spacing */
.bd-main .bd-content .bd-article-container {
    max-width: 100%;  /* default is 60em */
  }
/* Whole page size — stretch to the full viewport width on wide screens
   (default max-width is 88rem), but keep a small left/right gutter so the
   content doesn't run to the screen edges. */
.bd-page-width {
    max-width: none;
    padding-left: 2rem;
    padding-right: 2rem;
}


.search-button-field {
    color: var(--pst-color-text-base);
}
html .pst-navbar-icon:hover {
    border-bottom: max(3px,.1875rem,.12em) solid var(--pst-color-primary) !important;
    color: var(--pst-color-primary) !important;
  }

.bd-header ul.navbar-nav > li.nav-item.current > .nav-link {
    background-color: var(--score-nav-active-bg);
    border-bottom: 0;
    box-shadow: inset 0 -3px var(--pst-color-accent);
    color: var(--score-nav-active-color) !important;
    font-weight: 700 !important;
}

.bd-header .navbar-header-items__center {
    margin-left: auto !important;
    margin-right: 0 !important;
}

.bd-header {
    padding-top: 24px;
}

ul.navbar-nav li a {
    color: var(--score-nav-color);
}

.bd-header ul.bd-navbar-elements {
    column-gap: 24px;
}

.bd-header ul.navbar-nav > li.nav-item > .nav-link {
    display: inline-flex;
    align-items: center;
    font-size: 14.4px;
    font-weight: 700 !important;
    line-height: normal;
    min-height: 42px;
    padding: 0 10px;
    border-radius: 5px;
    box-shadow: inset 0 -3px transparent;
    color: var(--score-nav-color) !important;
    text-decoration: none;
    transition: background-color 140ms ease, box-shadow 140ms ease, color 140ms ease;
}

.bd-header ul.navbar-nav > li.nav-item > .nav-link:hover,
.bd-header ul.navbar-nav > li.nav-item > .nav-link:focus-visible {
    color: var(--score-nav-color) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}

.bd-header ul.navbar-nav > li.nav-item.current > .nav-link:hover,
.bd-header ul.navbar-nav > li.nav-item.current > .nav-link:focus-visible {
    color: var(--score-nav-active-color) !important;
}

.bd-search input.form-control {
    color: var(--pst-color-text-base) !important;
}

.bd-search input.form-control::placeholder {
    color: var(--pst-color-text-muted) !important;
}

/* Right sidebar */
.toc-entry a.nav-link {
    color: var(--pst-color-text-base);
}
/* Left, top SCORE brand  */
.navbar-brand p
{
    color: var(--pst-color-text-muted);
    font-weight: 900;
}
.navbar-brand:hover, .navbar-brand:visited:hover {
    text-decoration: none;
}

/* GitHub logo for shorten URL  */
a.github::before {
    content: var(--pst-icon-github);
    color: var(--pst-color-text-base);
}
a.github {
    text-decoration: none !important;
}

/* Left sidebar links */
nav.bd-links li > a {
    color: var(--pst-color-text-base);
}

/* Breadcrumbs, above page content: Link color */
ul.bd-breadcrumbs li.breadcrumb-item a {
    color: var(--pst-color-text-base);
    text-decoration: none;
}

/* Breadcrumbs, above page content: Arrow color */
ul.bd-breadcrumbs li.breadcrumb-item:not(.breadcrumb-home)::before {
    color: var(--pst-color-text-base);
}
/* Next/previous area under content */
.prev-next-area p,
.prev-next-area a {
    color: var(--pst-color-text-base);
}

blockquote {
    color: var(--pst-color-text-base);
}

/* Keep muted captions readable on the light page surface. */
html[data-theme="light"] table caption,
html[data-theme="light"] figure figcaption {
    color: var(--pst-color-text-base);
}

.admonition, div.admonition {
    background-color: var(--pst-color-surface);
}

/* Left sidebar fix, to hide scrollbar if not needed */
.bd-sidebar-primary .sidebar-primary-items__end {
    margin-bottom: 1em;
    margin-top: 0;
}

/* Reduce width of left sidebar and set maximum for wide screens */
/* .navbar-header-items__start is the left navbar logo, which needs to */
/* be shorten as well to jkepp the navbar-entries aligned with the content */
.bd-sidebar-primary,
.navbar-header-items__start {
    width: 20%; /* default: 25% */
    max-width: 350px; /* default: not set */
    overflow-x: hidden;
}

@media screen and (max-width: 959px) {
    .bd-sidebar-primary,
    .navbar-header-items__start {
        width: unset;
        max-width: 350px; /* default: not set */
        overflow-x: hidden;
    }
}

/* Less Sidebar border/distance */
.bd-sidebar-primary,
.bd-sidebar-secondary {
    padding: 0.5rem 0.2rem 0.2rem;
    background-color: var(--pst-color-surface);
    border-color: var(--pst-color-border);
}

.bd-header::before {
    background: linear-gradient(90deg, #0078c8 0%, #d96621 52%, #e96812 100%);
    content: "";
    height: 3px;
    inset: 24px 0 auto;
    pointer-events: none;
    position: absolute;
}

nav.bd-links li.current > a {
    background-color: var(--score-color-active);
    border-left: 3px solid var(--pst-color-accent);
    color: var(--pst-color-accent);
}

.bd-sidebar-primary li.has-children > details > summary .toctree-toggle {
    right: 1em
}

/* SCORE Background video
   Source: https://www.imi21.com/background-video-full-screen.php */

div.score_banner {
    background-color: var(--pst-color-on-surface);
}
#videowrapper{
    position: relative;
    overflow: hidden;
    margin-bottom: 50px;
}

#fullScreenDiv{
    height: 300px;
    width: 100%;
    padding:0;
    margin: 0;
    /* background-color: gray;
    position: relative; */
    container-type: inline-size;
}

#video{
    width: 100%;
    /* height: auto;
    margin: auto;
    display: block; */
}
@media (min-aspect-ratio: 16/9) {
  #video{
    width: 100%;
    height:auto;
  }
}

#score-title {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: var(--pst-color-text-base);
    /* font-size: 4.5em; */
    font-size: 8.0cqw;
    font-weight: 900;
    margin-bottom: 20px;
    /* Is somehow cool with image/video title background */
    /*animation: fadeIn 3s;  */
}

/* As long as no image or video is shown in
   the title, this is not needed, but kept
   for future needs */
/* html[data-theme="light"] #score-title {
    background-color: rgba(0,0,0,0.3);
}
html[data-theme="dark"] #score-title {
    background-color: rgba(0,0,0,0.5);
} */

#score-subtitle {
    font-size: 0.4em;
}

#score-phrase {
    font-size: 0.3em;
    font-weight: 400;
}

#logo_center_drk {
    background-color: transparent;
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }

/* Ensure the version switcher dropdown is scrollable if it exceeds the max height */
.version-switcher__menu {
    position: absolute;
    width: 100%;
    max-height: 300px; /* Adjust this value as needed */
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
}