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

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

/* 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-default);
  --navbar-height-mobile: 145px;
  --navbar-height-mobile-scrolled: 90px;
  --phs-max-width: 1290px;
  --phs-dashboard-padding: 20px;
}

/* give a padding top to the body object */
body { 
    padding: var(--navbar-height) var(--phs-dashboard-padding) 0 var(--phs-dashboard-padding); /* top | right | bottom | left */
    background-color: var(--phs-color-bg);
    color: var(--phs-color-fg);
}