:root {
    --cu-boulder-gold: #CFB87C;
  }

/* -- .bd-container and .bd-container__inner both need to adjust ---------- */
/* -- this so 'outer container' grows with browser (no L/R 'dead space') -- */
.bd-container {
    max-width: 99%;
}

/* -- this so the 'inner container' fills the outer container -------------- */
.bd-container .bd-container__inner {
    max-width: 99%;
}

/* -- .bd-article-container holds the "text in the middle" (notebook / md) ------ */
/* -- width is as high as as 100 "ems" (characters) wide, scales with font size -*/
.bd-main .bd-content .bd-article-container {
    max-width: 100rem;
}

.code-block-caption {
    color: black;
}

html[data-theme="dark"] code.docutils.literal.notranslate {
    color: var(--cu-boulder-gold); 
}

html[data-theme=dark] {
    --pst-font-size-base: none;
    --pst-color-secondary: var(--cu-boulder-gold);
    --pst-color-primary: var(--cu-boulder-gold);
    --pst-color-accent: var(--cu-boulder-gold);
    --help-text-color: var(--pst-color-text-base);
    --help-background-color: var(--pst-color-background);
    --help-border: var(--cu-boulder-gold);
}

html[data-theme=light] {
    --pst-font-size-base: none;
    --pst-color-secondary: #176de8;
    --pst-color-primary: #176de8;
    --help-text-color: var(--pst-color-text-base);
    --help-background-color: var(--pst-color-background);
    --help-border: #176de8;
}

html[data-theme=dark] .bd-header-article .btn {
    color: var(--cu-boulder-gold);
}

html[data-theme=dark] .bd-header-article .btn:hover {
    filter: brightness(1) contrast(1.5);
}


html[data-theme=dark] .form-control:focus {
    box-shadow: 0 0 0 .1875rem var(--cu-boulder-gold);
}

.bd-sidebar-primary li.has-children>details>summary .toctree-toggle {
    justify-content: left;
}


.graph#doc-flowchart .node text {
    font-weight: bold;
}

html[data-theme=dark] .graph#doc-flowchart #clickable.node:hover ellipse {
    fill: white; 
}

html[data-theme=dark] .graph#doc-flowchart #clickable.node:hover text {
    fill: black;
}

html[data-theme=light] .graph#doc-flowchart #clickable.node:hover ellipse {
    fill: black; 
}

html[data-theme=light] .graph#doc-flowchart #clickable.node:hover text {
    fill: white; 
}

html[data-theme=light] .graph#doc-flowchart .node ellipse {
    fill: white; 
}

html[data-theme=light] .graph#doc-flowchart .node text {
    fill: black; 
}

html[data-theme=light] .graph#doc-flowchart .edge text {
    fill: black; 
}

.bd-content .sd-tab-set .sd-tab-content {
    padding: 1.5rem;
}

html[data-theme=dark] details.sd-dropdown summary.sd-card-header {
    --pst-sd-dropdown-color: var(--pst-gray-500);
    --pst-sd-dropdown-bg-color: var(--pst-color-surface);
    background-color: rgb(204 204 204 / 10%) !important;
    border-left: .2rem solid var(--pst-color-primary) !important;
}

html[data-theme=dark] details.sd-dropdown summary.sd-card-header+div.sd-summary-content {
    background-color: var(--pst-color-background);
    border-bottom-left-radius: calc(.25rem - 1px);
    border-bottom-right-radius: calc(.25rem - 1px);
    border-left: .2rem solid rgb(204 204 204 / 10%) !important;
    border-right: .2rem solid rgb(204 204 204 / 10%) !important;
    border-bottom: .2rem solid rgb(204 204 204 / 10%) !important;
}

html[data-theme=dark]  details.sd-dropdown:hover{
    background-color: rgb(204 204 204 / 13%);
}

html[data-theme=light] details.sd-dropdown summary.sd-card-header {
    border-left: .2rem solid var(--pst-color-primary) !important;
}

.sidebar-announcement .card {
  border: 1px solid var(--help-border);
  border-radius: 8px;
  background: var(--help-background-color);
  color: var(--help-text-color);
  font-size: var(--pst-sidebar-font-size);
}

.sidebar-announcement .btn {
  border: 1px solid var(--help-border);
  border-radius: 8px;
  background: var(--help-background-color);
  color: var(--help-text-color);
  font-size: var(--pst-sidebar-font-size);
}

.sidebar-announcement .btn:hover {
  background: var(--help-text-color); 
  color: var(--help-background-color);
}

/* Ensures the online training cards have equal spacings on each side of the card. */
#online-trainings .sd-col{
    padding-top: var(--sd-gutter-x);
}

.svg-icon {
  background: white;
  fill: red;
}