@media (prefers-color-scheme: light) {
  :root {
    --wl-header-bg: #1d4c64;
    --bs-dark: #1d4c64;
    --bs-dark-rgb: 29, 76, 100;
    --wl-header-text: #ffffff;
    --wl-navi-color: #1d4c64;
    
    --wl-focus-color: #2a6482;
    --wl-hover-color: #163a4d;
    --wl-color-link: #1d4c64;
    --bs-link-color: #1d4c64;
    --bs-link-color-rgb: 29, 76, 100;
    --wl-color-link-hover: #112e3c;
    --bs-link-hover-color: #112e3c;
    --bs-link-hover-color-rgb: 17, 46, 60;
    --wl-primary-button-color: #1d4c64;
    --wl-progress-color: #5da06a;
    --wl-progress-approved-color: #386040;
    --wl-progress-bg: #e3e8eb;
  }

  .navbar {
    --bs-navbar-color: #ffffff;
    --bs-navbar-brand-color: #ffffff;
    --bs-navbar-brand-hover-color: #2a6482;
    --bs-navbar-hover-color: #2a6482;
  }


  .nav-pills {
    --bs-nav-pills-link-active-bg: #163a4d;
  }

}

:root[data-bs-theme="light"] {
  --wl-header-bg: #1d4c64 !important;
  --bs-dark: #1d4c64 !important;
  --bs-dark-rgb: 29, 76, 100 !important;
  --wl-header-text: #ffffff !important;
  --wl-navi-color: #1d4c64 !important;
  
  --wl-focus-color: #2a6482 !important;
  --wl-hover-color: #163a4d !important;
  --wl-color-link: #1d4c64 !important;
  --bs-link-color: #1d4c64 !important;
  --bs-link-color-rgb: 29, 76, 100 !important;
  --wl-color-link-hover: #112e3c !important;
  --bs-link-hover-color: #112e3c !important;
  --bs-link-hover-color-rgb: 17, 46, 60 !important;
  --wl-primary-button-color: #1d4c64 !important;
  --wl-progress-color: #5da06a !important;
  --wl-progress-approved-color: #386040 !important;
  --wl-progress-bg: #e3e8eb !important;
}

[data-bs-theme="light"] .navbar {
  --bs-navbar-color: #ffffff !important;
  --bs-navbar-brand-color: #ffffff !important;
  --bs-navbar-brand-hover-color: #2a6482 !important;
  --bs-navbar-hover-color: #2a6482 !important;
}


[data-bs-theme="light"] .nav-pills {
  --bs-nav-pills-link-active-bg: #163a4d !important;
}



@media (prefers-color-scheme: dark) {
  :root {
    --wl-header-bg: #14323f;
    --bs-dark: #14323f;
    --bs-dark-rgb: 20, 50, 63;
    --wl-header-text: #ffffff;
    --wl-navi-color: #2a6482;
    
    --wl-focus-color: #1d4c64;
    --wl-hover-color: #2a6482;
    --wl-color-link: #8fbcd4;
    --bs-link-color: #8fbcd4;
    --bs-link-color-rgb: 143, 188, 212;
    --wl-color-link-hover: #bcd7e5;
    --bs-link-hover-color: #bcd7e5;
    --bs-link-hover-color-rgb: 188, 215, 229;
    --wl-primary-button-color: #8fbcd4;
    --wl-progress-color: #4d8f5a;
    --wl-progress-approved-color: #2e5636;
    --wl-progress-bg: #2c3a44;
  }

  .navbar {
    --bs-navbar-color: #ffffff;
    --bs-navbar-brand-color: #ffffff;
    --bs-navbar-brand-hover-color: #1d4c64;
    --bs-navbar-hover-color: #1d4c64;
  }


  .nav-pills {
    --bs-nav-pills-link-active-bg: #2a6482;
  }

}

:root[data-bs-theme="dark"] {
  --wl-header-bg: #14323f !important;
  --bs-dark: #14323f !important;
  --bs-dark-rgb: 20, 50, 63 !important;
  --wl-header-text: #ffffff !important;
  --wl-navi-color: #2a6482 !important;
  
  --wl-focus-color: #1d4c64 !important;
  --wl-hover-color: #2a6482 !important;
  --wl-color-link: #8fbcd4 !important;
  --bs-link-color: #8fbcd4 !important;
  --bs-link-color-rgb: 143, 188, 212 !important;
  --wl-color-link-hover: #bcd7e5 !important;
  --bs-link-hover-color: #bcd7e5 !important;
  --bs-link-hover-color-rgb: 188, 215, 229 !important;
  --wl-primary-button-color: #8fbcd4 !important;
  --wl-progress-color: #4d8f5a !important;
  --wl-progress-approved-color: #2e5636 !important;
  --wl-progress-bg: #2c3a44 !important;
}

[data-bs-theme="dark"] .navbar {
  --bs-navbar-color: #ffffff !important;
  --bs-navbar-brand-color: #ffffff !important;
  --bs-navbar-brand-hover-color: #1d4c64 !important;
  --bs-navbar-hover-color: #1d4c64 !important;
}


[data-bs-theme="dark"] .nav-pills {
  --bs-nav-pills-link-active-bg: #2a6482 !important;
}