html[data-bs-theme="dark"] {
    --phs-color-bg: #1a1a2e;
    --phs-color-fg: #e8e8e8;
    --phs-color-navbar-bg: #1a1a2e;
    --phs-data-grid-header-bgcolor: #4c4a4b;
    --phs-color-primary: #9f9bc2;
}

html[data-bs-theme='light'] {
    --phs-color-bg: #ffffff;
    --phs-color-fg: #333333;
    --phs-color-navbar-bg: #ffffff;
    --phs-data-grid-header-bgcolor: #ffffff;
    --phs-color-primary: #3F3685;
}

/* Dark mode logo override */
html[data-bs-theme='dark'] #app-logo {
    content: url('../img/phs-logo-white.svg');
    width: 200px;
    height: auto;
}

/* light mode logo override */
html[data-bs-theme='light'] #app-logo {
    content: url('../img/phs-logo.svg');
    width: 200px;
    height: auto;
}

/* Dark mode logo override */
html[data-bs-theme='dark'] #ogl-logo {
    content: url('../img/ogl-logo-white.svg');
    width: 67px;
    height: 120px;
}

/* light mode logo override */
html[data-bs-theme='light'] #ogl-logo {
    content: url('../img/ogl-logo.svg');
    width: 67px;
    height: 120px;
}

:root {
  --navbar-height-default: 160px;
  --navbar-height-scrolled: 105px;
  --navbar-height: var(--navbar-height-scrolled);
  --navbar-height-mobile: 145px;
  --navbar-height-mobile-scrolled: 90px;
  --phs-max-width: 1290px;
  --phs-dashboard-padding: 20px;
  --bs-navbar-padding-x: 0;
  --bs-navbar-padding-y: 0.5rem;
  --bs-navbar-brand-padding-y: 0.3125rem;
  --bs-navbar-brand-margin-end: 1rem;
  --bs-navbar-brand-font-size: 1.25rem;
  --bs-dropdown-item-padding-x: 1rem;
  --bs-dropdown-item-padding-y: 0.25rem;
}

/* give a padding top to the body object */
body { 
    margin: 0;
    background-color: var(--phs-color-bg);
    color: var(--phs-color-fg);
}

body > .container-fluid {
  flex: 1 0 auto;
  margin: 0;
  padding: var(--navbar-height) var(--phs-dashboard-padding) 0 var(--phs-dashboard-padding);
  display: flex;
  flex-direction: column;
}