/*********************************************/
/* theme.css                                */
/* RiskScape Custom Theme                   */
/*********************************************/

:root,
[data-bs-theme="default-theme"] {
  /* BS Main Colors - RiskScape Branding */
  --bs-primary: #FF8C00;
  --bs-secondary: #4A5568;

  /* Background Color for the backmost level */
  --theme-backdrop-bg: #F5F5F5;

  /* Default Background-Color and Color */
  --bs-body-bg: #F5F5F5;
  --bs-body-color: #2D3748;
  
  /* Theme Classes */
  --theme-page-main-bg: #F5F5F5;
  --theme-breadcrumb-bg: #FFFFFF;
  --theme-footer-bg: #2D3748;
  --theme-nav-bg: #FFFFFF;

  /* Override Link-Colors */
  --bs-nav-link-color: #4A5568;
  --bs-link-color: #FF8C00;
  --bs-link-hover-color: #E67E00;

  /* Font Setting - COMPACT SIZING for better readability */
  --theme-font: system-ui, -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --theme-font-headlines: var(--theme-font);
  --bs-body-font-family: var(--theme-font);
  --bs-body-font-size: 0.75rem;  /* 12px */  /* Changed from 1rem to 0.875rem (14px) */
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.4;      /* Changed from 1.5 to 1.4 for tighter spacing */
  --bs-body-h1-font-size: 1.75rem; /* Changed from 2.5rem to 1.75rem */
 
  /* Heading Sizes - COMPACT */
  --bs-body-h2-font-size: 1.5rem;   /* Changed from 2rem */
  --bs-body-h3-font-size: 1.25rem;  /* Changed from 1.75rem */
  --bs-body-h4-font-size: 1.1rem;   /* Changed from 1.5rem */
  --bs-body-h5-font-size: 1rem;     /* Changed from 1.25rem */
  --bs-body-h6-font-size: 0.875rem; /* Changed from 1rem */

  /* Button Sizing - COMPACT */
  --bs-btn-padding-y: 0.25rem;
  --bs-btn-padding-x: 0.65rem;
  --bs-btn-font-size: 0.875rem;
  --bs-btn-line-height: 1.4;
  
  --bs-btn-padding-y-sm: 0.15rem;
  --bs-btn-padding-x-sm: 0.4rem;
  --bs-btn-font-size-sm: 0.75rem;
  
  --bs-btn-padding-y-lg: 0.4rem;
  --bs-btn-padding-x-lg: 0.85rem;
  --bs-btn-font-size-lg: 1rem;

  /* Form Controls - COMPACT */
  --bs-form-control-padding-y: 0.25rem;
  --bs-form-control-padding-x: 0.5rem;
  --bs-form-control-font-size: 0.875rem;
  --bs-form-control-line-height: 1.4;

  /* Table Sizing - COMPACT */
  --bs-table-cell-padding-y: 0.35rem;
  --bs-table-cell-padding-x: 0.35rem;

  /* Card Spacing - COMPACT */
  --bs-card-spacer-y: 0.75rem;
  --bs-card-spacer-x: 0.75rem;

  /* Border Radius  */
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-xxl: 2rem;

  /* Shadows */
  --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);

  .breadcrumb {
    --bs-breadcrumb-font-size: 13px;  /* Changed from 14px to 13px */
  }
  
  /* Main Button-Colors */
  .btn-primary {
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 15%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 15%, #000);
    
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 15%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary) 15%, #000);
    
    --bs-btn-disabled-color: var(--bs-white);
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);    
  }

  .btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-bg: var(--bs-white);
    --bs-btn-border-color: var(--bs-primary);
    
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);

    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);

    --bs-btn-disabled-color: var(--bs-primary);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-primary);
  }  

  .btn-secondary {
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);

    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-secondary) 15%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-secondary) 15%, #000);
    
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: color-mix(in srgb, var(--bs-secondary) 15%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--bs-secondary) 15%, #000);
    
    --bs-btn-disabled-color: var(--bs-white);
    --bs-btn-disabled-bg: var(--bs-secondary);
    --bs-btn-disabled-border-color: var(--bs-secondary);    
  }

  .btn-outline-secondary {
    --bs-btn-color: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-secondary);
    --bs-btn-hover-border-color: var(--bs-secondary);
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-secondary);
    --bs-btn-active-border-color: var(--bs-secondary);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--bs-secondary);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-secondary);
    --bs-gradient: none;
  }

  .footer {
    --bs-link-color: var(--bs-white);
    --bs-link-hover-color: var(--bs-body-color);
  }
    
  .navbar-nav {
    --bs-nav-link-color: #4A5568; 
    --bs-nav-link-hover-color: #FF8C00;
    --bs-navbar-active-color: #FF8C00;
  }

  .table {
    --bs-table-bg: var(--bs-white);    
  }  
}

/*********************************************/
/* RiskScape Navigation Customization      */
/*********************************************/

/* Navigation Bar Styling - Force white background */
#theme-page-navigation,
#theme-page-navigation.navbar-expand-lg,
body #theme-page-navigation,
html body #theme-page-navigation {
  background-color: #F7FAFC !important;
  background: #F7FAFC !important;
  border-bottom: none !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
  padding: 0.5rem 0 !important;
  min-height: 60px !important;
}

/* Logo styling */
#theme-page-navigation .logo,
#theme-page-navigation .navbar-brand,
.navbar-brand {
  color: #FF8C00 !important;
  font-weight: 600 !important;
  font-size: 1.5rem !important;
  max-height: 50px !important;
  margin-right: 2rem !important;
}

/* Login screen - Logo align far left */
.dnnLogin .logo,
.dnnLogin .navbar-brand,
.dnnLogin #theme-page-navigation .logo,
.dnnLogin #theme-page-navigation .navbar-brand,
body.login-page .logo,
body.login-page .navbar-brand,
body.login-page #theme-page-navigation .logo,
body.login-page #theme-page-navigation .navbar-brand,
.dnnLogin .navbar .navbar-brand,
.dnnLogin img.logo {
  float: left !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left !important;
  justify-content: flex-start !important;
}

/* Ensure login page navigation and container align items to the left */
.dnnLogin #theme-page-navigation,
.dnnLogin #theme-page-navigation.navbar,
body.login-page #theme-page-navigation,
body.login-page #theme-page-navigation.navbar {
  justify-content: flex-start !important;
}

.dnnLogin #theme-page-navigation .container,
.dnnLogin #theme-page-navigation > .container,
body.login-page #theme-page-navigation .container,
body.login-page #theme-page-navigation > .container {
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

#theme-page-navigation .logo img,
#theme-page-navigation .navbar-brand img {
  max-height: 50px !important;
  height: 50px !important;
  width: auto !important;
}

/* Navigation Links - Global styles */
#theme-page-navigation .navbar-nav .nav-link,
body #theme-page-navigation .navbar-nav .nav-link,
html body #theme-page-navigation .navbar-nav .nav-link {
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  transition: color 0.2s ease !important;
  white-space: nowrap !important;
}

/* Navigation Links - Desktop */
@media (min-width: 992px) {
  #theme-page-navigation .navbar-nav .nav-link,
  body #theme-page-navigation .navbar-nav .nav-link {
    color: #4A5568 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 0.5rem 0.75rem !important;
  }
  
  #theme-page-navigation .navbar-nav .nav-link:hover,
  body #theme-page-navigation .navbar-nav .nav-link:hover {
    color: #FF8C00 !important;
    background-color: transparent !important;
  }
  
  #theme-page-navigation .navbar-nav .nav-link.active,
  #theme-page-navigation .navbar-nav .active .nav-link,
  body #theme-page-navigation .navbar-nav .nav-link.active {
    color: #4A5568 !important;
    background-color: transparent !important;
    border-bottom: none !important;
  }
}

/* Dropdown menus - Desktop */
@media (min-width: 992px) {
  .dropdown-menu,
  #theme-page-navigation .dropdown-menu {
    background-color: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 0.375rem !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    padding: 0.5rem !important;
  }
  
  .dropdown-menu .dropdown-item,
  #theme-page-navigation .dropdown-menu .dropdown-item {
    color: #4A5568 !important;
    border-radius: 0.25rem !important;
    padding: 0.5rem 1rem !important;
    font-size: 14px !important;
    transition: background-color 0.2s, color 0.2s !important;
  }
  
  .dropdown-menu .dropdown-item:hover,
  .dropdown-menu .dropdown-item.active,
  #theme-page-navigation .dropdown-menu .dropdown-item:hover,
  #theme-page-navigation .dropdown-menu .dropdown-item.active {
    background-color: #FFF5E6 !important;
    color: #FF8C00 !important;
  }
}

/* Mobile Navigation */
@media (max-width: 991.98px) {
  #theme-page-navigation .offcanvas-body,
  body #theme-page-navigation .offcanvas-body {
    background-color: #FFFFFF !important;
    padding: 1rem !important;
  }
  
  #theme-page-navigation .navbar-nav .nav-item {
    border-bottom: 1px solid #E2E8F0 !important;
  }
  
  #theme-page-navigation .navbar-nav .nav-link,
  body #theme-page-navigation .navbar-nav .nav-link {
    color: #4A5568 !important;
    font-size: 16px !important;
    padding: 0.75rem 1rem !important;
  }
  
  #theme-page-navigation .navbar-nav .nav-link:hover,
  #theme-page-navigation .navbar-nav .nav-link.active,
  body #theme-page-navigation .navbar-nav .nav-link:hover,
  body #theme-page-navigation .navbar-nav .nav-link.active {
    color: #FF8C00 !important;
    background-color: #FFF5E6 !important;
  }
}

/* Logo sizing */
#theme-page-navigation .logo img,
#theme-page-navigation .navbar-brand img {
  max-height: 35px !important;
  height: 35px !important;
  width: auto !important;
}

/* Push logo left and nav items right */
#theme-page-navigation .navbar-brand {
  margin-left: 0 !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  align-self: center !important;
  display: flex !important;
  align-items: center !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

#theme-page-navigation .navbar-nav {
  margin-left: auto !important;
  margin-right: 0 !important;
  align-items: center !important;
}

#theme-page-navigation .container {
  padding-left: 0 !important;
  padding-right: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

#theme-page-navigation .offcanvas-body .navbar-nav {
  justify-content: flex-end !important;
}

/* Desktop: Ensure nav items stay right */
@media (min-width: 992px) {
  #theme-page-navigation .navbar-collapse,
  #theme-page-navigation .offcanvas-body {
    display: flex !important;
    flex-grow: 1 !important;
    justify-content: flex-end !important;
  }
}

/* Navbar toggler button */
#theme-page-navigation .navbar-toggler,
body #theme-page-navigation .navbar-toggler {
  border: 1px solid #E2E8F0 !important;
  padding: 0.5rem 0.75rem !important;
}

#theme-page-navigation .navbar-toggler:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 140, 0, 0.15) !important;
}

/* Navigation container spacing */
#theme-page-navigation .container,
body #theme-page-navigation .container {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

/*********************************************/
/* RiskScape Content & Footer Layout       */
/*********************************************/

/* Content padding */
#theme-page-main {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

/* Ensure body is full width without horizontal scroll */
html, body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Force footer full width - override all Bootstrap container constraints */
body #theme-page-footer,
body #theme-page-footer *,
#theme-page-footer,
#theme-page-footer * {
  box-sizing: border-box !important;
}

body #theme-page-footer {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 1rem 0 !important;
  display: block !important;
  min-height: 60px !important;
}

body #theme-page-footer > div,
body #theme-page-footer .container,
body #theme-page-footer .container-fluid,
body #theme-page-footer .container-xxl {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 1rem 0 !important;
  --bs-gutter-x: 0 !important;
}


/*********************************************/
/* RiskScape Custom Styles                 */
/* Title with vertical border and hue      */
/*********************************************/

.title-vert-border {
  padding: 2px 0 3px 20px;
  border-left-width: 7px;
  border-left-style: solid;
  border-color: #FF8C00;
  margin-bottom: 30px;
}

.title-vert-border h1,
.title-vert-border h2,
.title-vert-border h3,
.title-vert-border h4 {
  margin-bottom: 0;
  margin-top: 0;
}

.title-vert-border > span {
  display: block;
  margin-top: 4px;
  color: #555;
  font-weight: 300;
}

.title-vert-border h1 + span {
  font-size: 22px;
}

.title-vert-border h2 + span {
  font-size: 19px;
}

.title-vert-border h3 + span {
  font-size: 17px;
}

.title-vert-border h4 + span {
  font-size: 15px;
  margin-top: 3px;
}

.title-vert-border-right {
  padding: 2px 20px 3px 0;
  border-left: 0;
  border-right: 7px solid #FF8C00;
  text-align: right;
}

.hue {
  color: #FF8C00;
}

/*********************************************/
/* Match Generic4 Visual Style             */
/*********************************************/

/* Change background to white like Generic4 */
:root,
[data-bs-theme="default-theme"] {
  /* Match Generic4 orange color exactly */
  --bs-primary: #ff950c !important;
  --bs-link-color: #ff950c !important;
  --bs-link-hover-color: #ff830e !important;
  
  /* White backgrounds like Generic4 */
  --theme-backdrop-bg: #FFFFFF !important;
  --bs-body-bg: #FFFFFF !important;
  --theme-page-main-bg: #FFFFFF !important;
  --theme-nav-bg: #FFFFFF !important;
  --theme-breadcrumb-bg: #F8F9FA !important;
  
  /* Generic4-style text colors */
  --bs-body-color: #333333 !important;
  --bs-nav-link-color: #555555 !important;
}

/* Larger headings like Generic4 */
h1, .h1 {
  font-size: 2.5rem !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}

h2, .h2 {
  font-size: 2rem !important;
  font-weight: 500 !important;
}

h3, .h3 {
  font-size: 1.75rem !important;
  font-weight: 500 !important;
}

/* Generic4-style font size utilities */
.font-size-lg {
  font-size: 300% !important;
  line-height: 1.2em !important;
}

.font-size-xlg {
  font-size: 400% !important;
  line-height: 1.2em !important;
}

/* Body text like Generic4 */
body {
  font-size: 12px !important;
  color: #333 !important;
  background-color: #fff !important;
}

/* Main content area - white background */
#theme-page-main,
body #theme-page-main {
  background-color: #FFFFFF !important;
}

/* Update button colors to match Generic4 orange */
.btn-primary {
  --bs-btn-bg: #ff950c !important;
  --bs-btn-border-color: #ff950c !important;
  --bs-btn-hover-bg: #ff830e !important;
  --bs-btn-hover-border-color: #ff830e !important;
}

/* Link colors */
a {
  color: #ff950c !important;
}

a:hover {
  color: #ff830e !important;
}

/* Navigation link colors */
#theme-page-navigation .navbar-nav .nav-link {
  color: #555 !important;
}

#theme-page-navigation .navbar-nav .nav-link:hover,
#theme-page-navigation .navbar-nav .nav-link.active {
  color: #ff950c !important;
}

/* Update hue class to use Generic4 orange */
.hue {
  color: #ff950c !important;
}

/* Update title-vert-border to use Generic4 orange */
.title-vert-border {
  border-color: #ff950c !important;
}

.title-vert-border-right {
  border-right-color: #ff950c !important;
}

/* Generic4-style content containers */
.container {
  background-color: transparent !important;
}

/* Remove gray backgrounds */
.bg-light,
body .bg-light {
  background-color: #f8f9fa !important;
}

/* White cards and panels like Generic4 */
.card {
  background-color: #fff !important;
}

/*********************************************/
/* Generic4 Visual Style Matches           */
/*********************************************/

/* Generic4 Color Scheme - Exact Match */
:root,
[data-bs-theme="default-theme"] {
  /* Match Generic4 orange exactly */
  --bs-primary: #ff950c !important;
  --bs-link-color: #ff950c !important;
  --bs-link-hover-color: #ff830e !important;
  
  /* White backgrounds like Generic4 */
  --theme-backdrop-bg: #FFFFFF !important;
  --bs-body-bg: #FFFFFF !important;
  --theme-page-main-bg: #FFFFFF !important;
  --theme-nav-bg: #FFFFFF !important;
  --theme-breadcrumb-bg: #F8F9FA !important;
  
  /* Generic4-style text colors */
  --bs-body-color: #333333 !important;
  --bs-nav-link-color: #555555 !important;
}

/*********************************************/
/*********************************************/
/* Generic4 Typography & Sizes             */
/*********************************************/

/* Body text */
body {
  font-size: 12px !important;
  color: #333 !important;
  background-color: #fff !important;
}

/* Larger headings like Generic4 */
h1, .h1 {
  font-size: 2.5rem !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}

h2, .h2 {
  font-size: 2rem !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}

h3, .h3 {
  font-size: 1.75rem !important;
  font-weight: 500 !important;
}

/* Generic4 utility font sizes */
.font-size-lg {
  font-size: 300% !important;
  line-height: 1.2em !important;
}

.font-size-xlg {
  font-size: 400% !important;
  line-height: 1.2em !important;
}

/*********************************************/
/* Generic4 Backgrounds & Layout           */
/*********************************************/

/* Main content area - white background */
#theme-page-main,
body #theme-page-main {
  background-color: #FFFFFF !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Footer - centered container, not full width */
body #theme-page-footer {
  width: 100% !important;
  background-color: #2D3748 !important;
  padding: 2rem 0 !important;
  margin: 0 !important;
}

body #theme-page-footer .container {
  max-width: 1140px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
}

body #theme-page-footer > div,
body #theme-page-footer .py-4 {
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  max-width: none !important;
}

/*********************************************/
/* Generic4 Button & Link Colors           */
/*********************************************/

/* Update buttons to Generic4 orange */
.btn-primary {
  --bs-btn-bg: #ff950c !important;
  --bs-btn-border-color: #ff950c !important;
  --bs-btn-hover-bg: #ff830e !important;
  --bs-btn-hover-border-color: #ff830e !important;
  --bs-btn-active-bg: #ff830e !important;
  --bs-btn-active-border-color: #ff830e !important;
}

/* Link colors */
a {
  color: #ff950c !important;
}

a:hover {
  color: #ff830e !important;
}

/* Navigation link colors */
#theme-page-navigation .navbar-nav .nav-link {
  color: #555 !important;
}

#theme-page-navigation .navbar-nav .nav-link:hover,
#theme-page-navigation .navbar-nav .nav-link.active {
  color: #ff950c !important;
}

/*********************************************/
/* Update Custom Classes to Generic4       */
/*********************************************/

/* Update hue class */
.hue {
  color: #ff950c !important;
}

/* Update title-vert-border */
.title-vert-border {
  border-color: #ff950c !important;
}

.title-vert-border-right {
  border-right-color: #ff950c !important;
}

/*********************************************/
/* Generic4 Cards & Panels                 */
/*********************************************/

.card {
  background-color: #fff !important;
  border: 1px solid #ddd !important;
}

/* Remove gray backgrounds */
.bg-light {
  background-color: #f8f9fa !important;
}

/*********************************************/
/* Container Gutter - Bootstrap Standard   */
/*********************************************/

.container {
  --bs-gutter-x: 30px !important;
  padding-left: calc(var(--bs-gutter-x) * 0.5) !important;
  padding-right: calc(var(--bs-gutter-x) * 0.5) !important;
}

/*********************************************/
/* Navigation Container                    */
/*********************************************/

#theme-page-navigation .container {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  display: flex !important;
  align-items: center !important;
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 auto !important;
}

/*********************************************/
/* Generic4 General Element Styles         */
/*********************************************/

/* Images */
img.alignleft, div.alignleft {
  float: left;
  margin: 5px 20px 13px 0;
  max-width: 100%;
}

img.alignright, div.alignright {
  float: right;
  margin: 5px 0 13px 20px;
  max-width: 100%;
}

img {
  max-width: 100%;
  height: auto;
}

/* Lists */
ul li {
  font-size: 14px;
}

ul ul, ol ol {
  padding-left: 40px;
}

ul {
  list-style-type: disc;
}

/* Clearfix */
.clearer {
  clear: both;
  display: block;
}

/* DNN Form Label */
.dnnFormItem > label.dnnFormLabel {
  width: 35%;
}

.dnnForm label {
  font-weight: normal;
}

/* Bootstrap form fix */
form#Form {
  margin-bottom: 0px;
}

.dnnForm .dnnActions {
  padding-left: 0px;
}

/* Rounded image utility */
div.img-round img {
  border-radius: 50% !important;
}

/*********************************************/
/* Generic4 Spacing Utilities              */
/*********************************************/

/* Margin utilities */
.wsc-margin-top, .wsc-marg-top {
  margin-top: 50px;
}

.wsc-margin-top-sm, .wsc-marg-top-sm {
  margin-top: 25px;
}

.wsc-margin-top-lg, .wsc-marg-top-lg {
  margin-top: 75px;
}

.wsc-margin-top-no, .wsc-marg-top-no {
  margin-top: 0px !important;
}

.wsc-margin-bottom, .wsc-marg-bot {
  margin-bottom: 50px;
}

.wsc-margin-bottom-sm, .wsc-marg-bot-sm {
  margin-bottom: 25px !important;
}

.wsc-margin-bottom-lg, .wsc-marg-bot-lg {
  margin-bottom: 75px;
}

.wsc-margin-bottom-no {
  margin-bottom: 0px;
}

.wsc-margin-all-no, .wsc-marg-no {
  margin: 0px;
}

/* Padding utilities */
.wsc-padding-all, .wsc-pad {
  padding: 50px;
}

.wsc-padding-all-sm, .wsc-pad-sm {
  padding: 25px;
}

.wsc-padding-all-lg, .wsc-pad-lg {
  padding: 75px;
}

.wsc-padding-all-no, .wsc-pad-no {
  padding: 0px;
}

.wsc-padding-top, .wsc-pad-top {
  padding-top: 50px !important;
}

.wsc-padding-top-sm, .pad25, .wsc-pad-top-sm {
  padding-top: 25px;
}

.wsc-padding-top-lg, .wsc-pad-top-lg {
  padding-top: 75px;
}

.wsc-padding-top-xlg {
  padding-top: 150px;
}

.wsc-padding-top-no, .wsc-pad-top-no {
  padding-top: 0px;
}

.wsc-padding-bottom, .wsc-pad-bot {
  padding-bottom: 50px !important;
}

.wsc-padding-bottom-sm, .wsc-pad-bot-sm {
  padding-bottom: 25px;
}

.wsc-padding-bottom-lg, .wsc-pad-bot-lg {
  padding-bottom: 75px;
}

.wsc-padding-bottom-xlg {
  padding-bottom: 150px;
}

.wsc-padding-bottom-no, .wsc-pad-bot-no {
  padding-bottom: 0px;
}

/*********************************************/
/* Generic4 Pane Styles                    */
/*********************************************/

.wsc_pane.IntroPane, 
#intro .wsc_pane.IntroPane {
  padding-top: 30px;
  padding-bottom: 30px;
}

.wsc_pane.OutroPane {
  padding-top: 20px;
  padding-bottom: 20px;
}

.IntroPane .title {
  margin-bottom: 0px;
}

/*********************************************/
/* Generic4 Helper Classes                 */
/*********************************************/

.divcenter {
  float: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  position: relative !important;
}

.white {
  color: #fff;
}

/* Text selection colors */
::-moz-selection {
  color: #fff;
  background: #aaa;
}

::selection {
  color: #fff;
  background: #aaa;
}

/*********************************************/
/* Generic4 5-Column Grid (col-15)         */
/*********************************************/

.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
  position: relative;
  min-height: 1px;
  padding-right: 10px;
  padding-left: 10px;
}

.col-xs-15 {
  width: 20%;
  float: left;
}

@media (min-width: 768px) {
  .col-sm-15 {
    width: 20%;
    float: left;
  }
}

@media (min-width: 992px) {
  .col-md-15 {
    width: 20%;
    float: left;
  }
}

@media (min-width: 1200px) {
  .col-lg-15 {
    width: 20%;
    float: left;
  }
}

/*********************************************/
/* Proper CSS Font Hierarchy               */
/* Following standard typographic scale    */
/*********************************************/

/* Base body text */
body {
  font-size: 12px !important;
  line-height: 1.6 !important;
  color: #333 !important;
}

/* Headings */
h1, .h1 {
  font-size: 36px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  margin-bottom: 1rem !important;
}

h2, .h2 {
  font-size: 28px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  margin-bottom: 0.75rem !important;
}

h3, .h3 {
  font-size: 24px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  margin-bottom: 0.75rem !important;
}

h4, .h4 {
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  margin-bottom: 0.5rem !important;
}

h5, .h5 {
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  margin-bottom: 0.5rem !important;
}

h6, .h6 {
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  margin-bottom: 0.5rem !important;
}

/* Paragraphs and regular text */
p {
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin-bottom: 1rem !important;
}

/* Spans inherit parent font size by default */
span {
  font-size: inherit !important;
}

/* Buttons */
.btn, button {
  font-size: 14px !important;
  font-weight: 500 !important;
}

/* Small text */
small, .small {
  font-size: 12px !important;
}

/* Dashboard specific overrides */
.dashboard-title { font-size: 36px !important; font-weight: 700 !important; }
.dashboard-subtitle { font-size: 18px !important; font-weight: 400 !important; }
.dashboard-card-value { font-size: 48px !important; font-weight: 700 !important; }
.dashboard-card-title-bold { font-size: 15px !important; font-weight: 600 !important; }
.dashboard-card-period { font-size: 10px !important; font-weight: 400 !important; }
.dashboard-card-change-text { font-size: 16px !important; font-weight: 600 !important; }
.company-filter-label { font-size: 16px !important; font-weight: 500 !important; }
.card-title { font-size: 18px !important; font-weight: 500 !important; }


/*********************************************/
/* Force Full Width Layout                 */
/* Override SCSS compiled constraints      */
/*********************************************/

/* Make main content area full width */
body.theme-variation-default main#theme-page-main,
body.theme-variation-centered main#theme-page-main,
body.theme-variation-floatwideheader main#theme-page-main {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Make footer full width */
body.theme-variation-default footer#theme-page-footer,
body.theme-variation-centered footer#theme-page-footer,
body.theme-variation-floatwideheader footer#theme-page-footer {
  max-width: 100% !important;
  width: 100% !important;
}

/* Ensure ContentPane doesn't have width constraints */
#ContentPane {
  max-width: 100% !important;
  width: 100% !important;
}

/* Angular modules use full width */
.angular-module {
  max-width: 100% !important;
  width: 100% !important;
}

/*********************************************/
/* PersonaBar Visibility Compensation      */
/*********************************************/

/* When PersonaBar is visible (admin logged in), compensate for the 80px left margin */
body.personabar-visible {
  margin-left: 0 !important;
}

body.personabar-visible #personaBar-iframe {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  z-index: 10000 !important;
}

body.personabar-visible main#theme-page-main,
body.personabar-visible nav#theme-page-navigation,
body.personabar-visible footer#theme-page-footer {
  margin-left: 80px !important;
  width: calc(100% - 80px) !important;
}

body.personabar-visible .angular-module {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ======================================================= */
/* FINAL FIXES: Top Pane, Navigation & Layout             */
/* ======================================================= */

/* 1. Fix "White Space" caused by Skip Link */
a.visually-hidden-focusable {
    position: absolute !important;
    top: 0;
    left: 0;
    height: 1px; width: 1px;
    overflow: hidden;
}

/* 2. Top Pane: Light Gray, Slim, Side-by-Side Links */
#theme-page-header-pane,
body #theme-page-header-pane {
    background-color: #F8F9FA !important; /* Light Gray Background */
    margin-top: 0 !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    min-height: 0 !important;
    height: auto !important;
    border-bottom: 1px solid #E2E8F0 !important; /* Thin darker border */
}

/* Ensure items sit side-by-side */
#theme-page-header-pane .user-controls {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

/* 3. Top Pane Text Style: Match Nav Items (#555555) */
#theme-page-header-pane .user-controls a,
#theme-page-header-pane .user-controls span {
    color: #555555 !important; /* Match Nav Item Color */
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important; /* Match Nav Style */
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    margin-left: 15px !important; /* Space between links */
}

/* Remove margin from first link to keep it flush right */
#theme-page-header-pane .user-controls a:first-child {
    margin-left: 0 !important;
}

/* Hover effect: Brand Orange */
#theme-page-header-pane a:hover {
    color: #ff950c !important; /* Brand Orange */
}

/*********************************************/
/* Login Page Specific Styling             */
/*********************************************/



/* 4. Navigation Bar: Dark Grey & White Links */
#theme-page-navigation,
body #theme-page-navigation {
    background-color: #1a1a1a !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4) !important;
}

#theme-page-navigation .navbar-nav .nav-link {
    color: #FFFFFF !important;
}

#theme-page-navigation .navbar-nav .nav-link:hover,
#theme-page-navigation .navbar-nav .nav-link.active {
    color: #FF8C00 !important;
    background-color: rgba(255,255,255,0.05) !important;
}

/* 5. Mobile Toggle (Hamburger) - Make White */
#theme-page-navigation .navbar-toggler {
    border-color: rgba(255,255,255,0.5) !important;
}
#theme-page-navigation .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Prevent the Display Name (Omen Apstory) from breaking into two lines */
#theme-page-header-pane .user-controls a, 
#theme-page-header-pane .user-name {
    white-space: nowrap !important;
    display: inline-block !important;
}

/* ======================================================= */
/* Action Buttons:              */
/* ======================================================= */


 .dnnPrimaryAction,
     input.dnnPrimaryAction {
         color: whitesmoke !important;
     }

/* Fix login button text to stay white on hover/focus */
.dnnPrimaryAction:hover,
.dnnPrimaryAction:focus,
input.dnnPrimaryAction:hover,
input.dnnPrimaryAction:focus {
    color: whitesmoke !important;
}
/*********************************************/
/* FullWidePane - Edge-to-Edge Layout      */
/*********************************************/

/* FullWidePane - No container constraints */
#FullWidePane {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Ensure modules in FullWidePane span full width */
#FullWidePane .DnnModule,
#FullWidePane > div {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Angular modules in FullWidePane */
#FullWidePane app-root,
#FullWidePane .angular-module {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
}

/* Override Bootstrap container in FullWidePane */
#FullWidePane .container,
#FullWidePane .container-fluid {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Kendo Grid full width in FullWidePane */
#FullWidePane kendo-grid,
#FullWidePane .k-grid {
  width: 100% !important;
  max-width: 100% !important;
}

/*******************************************/
/* COMPACT UI OVERRIDES - Global Styles   */
/*******************************************/

/* Body and Base Text */
body {
  font-size: 0.875rem;
  line-height: 1.4;
}

/* Headings */
h1, .h1 { font-size: 1.75rem !important; }
h2, .h2 { font-size: 1.5rem !important; }
h3, .h3 { font-size: 1.25rem !important; }
h4, .h4 { font-size: 1.1rem !important; }
h5, .h5 { font-size: 1rem !important; }
h6, .h6 { font-size: 0.875rem !important; }

/* Buttons */
.btn {
  padding: 0.25rem 0.65rem;
  font-size: 0.875rem;
  line-height: 1.4;
}

.btn-sm {
  padding: 0.15rem 0.4rem;
  font-size: 0.75rem;
}

.btn-lg {
  padding: 0.4rem 0.85rem;
  font-size: 1rem;
}

.btn i, .btn svg {
  font-size: 0.875rem;
  width: 14px;
  height: 14px;
}

/* Form Controls */
.form-control,
.form-select {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.4;
  height: 30px;
}

.form-control-sm,
.form-select-sm {
  padding: 0.15rem 0.35rem;
  font-size: 0.75rem;
}

.form-label {
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
}

.input-group-text {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}

/* Tables */
/* .table font-size controlled by modules */

.table > :not(caption) > * > * {
  padding: 0.35rem;
}

.table-sm > :not(caption) > * > * {
  padding: 0.2rem;
}

/* Cards */
.card-body {
  padding: 0.75rem;
}

.card-header,
.card-footer {
  padding: 0.5rem 0.75rem;
}

/* Navigation */
.nav-link {
  padding: 0.35rem 0.65rem;
  font-size: 0.875rem;
}

/* Dropdowns */
.dropdown-menu {
  font-size: 0.875rem;
}

.dropdown-item {
  padding: 0.2rem 0.75rem;
  font-size: 0.875rem;
}

/* Badges */
.badge {
  padding: 0.25rem 0.45rem;
  font-size: 0.7rem;
}

/* Pagination */
.pagination {
  --bs-pagination-padding-y: 0.25rem;
  --bs-pagination-padding-x: 0.5rem;
  --bs-pagination-font-size: 0.875rem;
}

/* Alerts */
.alert {
  padding: 0.65rem 0.85rem;
  font-size: 0.875rem;
}

/* Modals */
.modal-header {
  padding: 0.65rem 0.75rem;
}

.modal-body {
  padding: 0.75rem;
  font-size: 0.875rem;
}

.modal-footer {
  padding: 0.65rem 0.75rem;
}

/*******************************************/
/* KENDO UI COMPACT OVERRIDES             */
/*******************************************/

/* Kendo Grid - font-size controlled by Angular modules */
.k-grid td,
.k-grid th {
  padding: 0.35rem !important;
  line-height: 1.4 !important;
}

.k-grid-header th {
  font-weight: 600;
}

/* Kendo Buttons */
.k-button {
  padding: 0.25rem 0.65rem !important;
  font-size: 0.75rem !important;
  line-height: 1.2 !important;
  height: 30px !important;
}

.k-button-sm {
  padding: 0.15rem 0.4rem !important;
  font-size: 0.65rem !important;
  line-height: 1.2 !important;
}

/* Kendo Inputs */
.k-input,
.k-textbox,
.k-picker,
.k-dropdown {
  font-size: 0.75rem !important;
  padding: 0.25rem 0.5rem !important;
  line-height: 1.2 !important;
  height: 30px !important;
}

.k-input-inner {
  padding: 0.25rem 0.5rem !important;
  font-size: 0.75rem !important;
  line-height: 1.2 !important;
  height: 30px !important;
}

/* Textareas should not have fixed height */
textarea.k-textarea,
textarea.form-control,
kendo-textarea textarea {
  height: auto !important;
  min-height: 60px;
}

/* Datepicker alignment fix */
.k-picker,
.k-datepicker,
.k-dateinput {
  display: inline-flex !important;
  align-items: center !important;
  height: 30px !important;
}

.k-picker .k-input-inner,
.k-datepicker .k-input-inner,
.k-dateinput .k-input-inner {
  line-height: 30px !important;
  padding: 0 0.5rem !important;
  height: 30px !important;
  box-sizing: border-box !important;
}

.k-picker .k-input-button,
.k-datepicker .k-input-button {
  height: 30px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent !important;
  border: none !important;
}

/* Kendo Dropdowns */
.k-list-item {
  padding: 0.2rem 0.5rem !important;
  font-size: 0.75rem !important;
  line-height: 1.2 !important;
}

/* Kendo Pager */
.k-pager-numbers .k-button {
  min-width: 28px !important;
  height: 28px !important;
  font-size: 0.75rem !important;
}

/* Kendo Window/Dialog */
.k-window-titlebar {
  padding: 0.65rem 0.75rem !important;
  font-size: 0.9rem !important;
}

.k-window-content {
  padding: 0.75rem !important;
  font-size: 0.875rem !important;
}

/* Kendo Toolbar */
.k-toolbar {
  padding: 0.35rem 0.5rem !important;
}

.k-toolbar .k-button {
  margin: 0.15rem !important;
}

/*******************************************/
/* UTILITY CLASSES                         */
/*******************************************/

.text-xs { font-size: 0.75rem !important; }
.text-sm { font-size: 0.875rem !important; }
.text-base { font-size: 1rem !important; }
.text-lg { font-size: 1.125rem !important; }

.p-compact { padding: 0.35rem !important; }
.px-compact { padding-left: 0.35rem !important; padding-right: 0.35rem !important; }
.py-compact { padding-top: 0.35rem !important; padding-bottom: 0.35rem !important; }
.m-compact { margin: 0.35rem !important; }

/*********************************************/
/* Login Screen Fixes                        */
/*********************************************/

/* Hide Login and Home navigation buttons on login screen */
.dnnLogin .dnnActions a[href*="Login"],
.dnnLogin .dnnActions a[href*="Home"],
body.login-page .navbar-nav .nav-link[href*="Login"],
body.login-page .navbar-nav .nav-link[href*="Home"],
.loginContent .dnnActions a[href*="Login"],
.loginContent .dnnActions a[href*="Home"] {
    display: none !important;
}

/*********************************************/
/* RESPONSIVE NAVIGATION - Enhanced Mobile  */
/*********************************************/

/* Mobile First: Base styles for all screens */
#theme-page-navigation,
body #theme-page-navigation {
    position: relative;
    z-index: 1030;
}

/* ========================================= */
/* MOBILE: Up to 991px (Bootstrap lg breakpoint) */
/* ========================================= */
@media (max-width: 991.98px) {
    
    /* Navigation Bar - More padding on mobile */
    #theme-page-navigation {
        padding: 0.75rem 0 !important;
    }
    
    /* Logo - Larger on mobile */
    #theme-page-navigation .logo img,
    #theme-page-navigation .navbar-brand img {
        max-height: 45px !important;
        height: 45px !important;
    }
    
    /* Hamburger Menu Button - Right aligned, larger */
    #theme-page-navigation .navbar-toggler {
        margin-left: auto !important;
        padding: 0.5rem 0.75rem !important;
        font-size: 1.25rem !important;
    }
    
    /* Off-Canvas Menu */
    #theme-page-navigation .offcanvas {
        max-width: 300px !important;
        width: 85% !important;
    }
    
    #theme-page-navigation .offcanvas-header {
        padding: 1.5rem 1rem !important;
        border-bottom: 1px solid #E2E8F0 !important;
    }
    
    #theme-page-navigation .offcanvas-body {
        padding: 1rem !important;
        background-color: #FFFFFF !important;
    }
    
    /* Mobile Menu Links */
    #theme-page-navigation .navbar-nav {
        flex-direction: column !important;
        width: 100% !important;
    }
    
    #theme-page-navigation .navbar-nav .nav-item {
        width: 100% !important;
        border-bottom: 1px solid #E2E8F0 !important;
    }
    
    #theme-page-navigation .navbar-nav .nav-link {
        color: #4A5568 !important;
        font-size: 16px !important;
        padding: 1rem !important;
        display: block !important;
        width: 100% !important;
        text-transform: uppercase !important;
        font-weight: 600 !important;
    }
    
    #theme-page-navigation .navbar-nav .nav-link:hover,
    #theme-page-navigation .navbar-nav .nav-link:focus,
    #theme-page-navigation .navbar-nav .nav-link.active {
        color: #FF8C00 !important;
        background-color: #FFF5E6 !important;
    }
    
    /* Mobile Dropdowns */
    #theme-page-navigation .dropdown-menu {
        position: static !important;
        transform: none !important;
        border: none !important;
        box-shadow: none !important;
        background-color: #F8F9FA !important;
        margin: 0 !important;
        padding-left: 1rem !important;
    }
    
    #theme-page-navigation .dropdown-menu .dropdown-item {
        padding: 0.75rem 1rem !important;
        font-size: 14px !important;
    }
    
    /* Hide top header pane on mobile for cleaner look */
    #theme-page-header-pane {
        display: none !important;
    }
}

/* ========================================= */
/* TABLET: 768px to 991px */
/* ========================================= */
@media (min-width: 768px) and (max-width: 991.98px) {
    
    #theme-page-navigation .container {
        max-width: 720px !important;
    }
    
    /* Slightly larger logo on tablet */
    #theme-page-navigation .logo img,
    #theme-page-navigation .navbar-brand img {
        max-height: 50px !important;
        height: 50px !important;
    }
}

/* ========================================= */
/* DESKTOP: 992px and up */
/* ========================================= */
@media (min-width: 992px) {
    
    /* Show top header pane */
    #theme-page-header-pane {
        display: block !important;
    }
    
    /* Navigation Bar */
    #theme-page-navigation {
        padding: 0.5rem 0 !important;
    }
    
    /* Logo */
    #theme-page-navigation .logo img,
    #theme-page-navigation .navbar-brand img {
        max-height: 50px !important;
        height: 50px !important;
    }
    
    /* Desktop Menu - Horizontal */
    #theme-page-navigation .navbar-collapse {
        display: flex !important;
        flex-basis: auto !important;
    }
    
    #theme-page-navigation .navbar-nav {
        flex-direction: row !important;
        margin-left: auto !important;
        align-items: center !important;
    }
    
    #theme-page-navigation .navbar-nav .nav-item {
        border-bottom: none !important;
    }
    
    #theme-page-navigation .navbar-nav .nav-link {
        color: #4A5568 !important;
        font-size: 13px !important;
        padding: 0.5rem 1rem !important;
        white-space: nowrap !important;
    }
    
    #theme-page-navigation .navbar-nav .nav-link:hover {
        color: #FF8C00 !important;
        background-color: transparent !important;
    }
    
    #theme-page-navigation .navbar-nav .nav-link.active {
        color: #FF8C00 !important;
        border-bottom: 2px solid #FF8C00 !important;
    }
    
    /* Desktop Dropdowns */
    #theme-page-navigation .dropdown-menu {
        position: absolute !important;
        background-color: #FFFFFF !important;
        border: 1px solid #E2E8F0 !important;
        border-radius: 0.375rem !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
        padding: 0.5rem !important;
        min-width: 200px !important;
    }
    
    #theme-page-navigation .dropdown-menu .dropdown-item {
        padding: 0.5rem 1rem !important;
        font-size: 13px !important;
        border-radius: 0.25rem !important;
    }
    
    #theme-page-navigation .dropdown-menu .dropdown-item:hover,
    #theme-page-navigation .dropdown-menu .dropdown-item.active {
        background-color: #FFF5E6 !important;
        color: #FF8C00 !important;
    }
}

/* ========================================= */
/* LARGE DESKTOP: 1200px and up */
/* ========================================= */
@media (min-width: 1200px) {
    
    #theme-page-navigation .container {
        max-width: 1140px !important;
    }
    
    /* Slightly larger text on large screens */
    #theme-page-navigation .navbar-nav .nav-link {
        font-size: 14px !important;
        padding: 0.5rem 1.25rem !important;
    }
    
    /* Logo */
    #theme-page-navigation .logo img,
    #theme-page-navigation .navbar-brand img {
        max-height: 55px !important;
        height: 55px !important;
    }
}

/* ========================================= */
/* EXTRA LARGE DESKTOP: 1400px and up */
/* ========================================= */
@media (min-width: 1400px) {
    
    #theme-page-navigation .container {
        max-width: 1320px !important;
    }
}

/* ========================================= */
/* MOBILE LANDSCAPE: 576px to 767px */
/* ========================================= */
@media (min-width: 576px) and (max-width: 767.98px) {
    
    #theme-page-navigation .offcanvas {
        max-width: 350px !important;
    }
}

/* ========================================= */
/* SMALL MOBILE: Up to 575px */
/* ========================================= */
@media (max-width: 575.98px) {
    
    /* Smaller logo on very small screens */
    #theme-page-navigation .logo img,
    #theme-page-navigation .navbar-brand img {
        max-height: 40px !important;
        height: 40px !important;
    }
    
    /* Compact hamburger */
    #theme-page-navigation .navbar-toggler {
        padding: 0.4rem 0.6rem !important;
    }
    
    /* Full width off-canvas on small mobile */
    #theme-page-navigation .offcanvas {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Smaller font sizes */
    #theme-page-navigation .navbar-nav .nav-link {
        font-size: 14px !important;
        padding: 0.75rem !important;
    }
}

/* ========================================= */
/* TOUCH DEVICE OPTIMIZATIONS */
/* ========================================= */
@media (hover: none) and (pointer: coarse) {
    
    /* Larger touch targets on touch devices */
    #theme-page-navigation .navbar-nav .nav-link {
        min-height: 48px !important;
        display: flex !important;
        align-items: center !important;
    }
    
    #theme-page-navigation .navbar-toggler {
        min-width: 48px !important;
        min-height: 48px !important;
    }
    
    /* Remove hover effects on touch devices */
    #theme-page-navigation .navbar-nav .nav-link:hover {
        background-color: transparent !important;
    }
}

/* ========================================= */
/* PRINT STYLES */
/* ========================================= */
@media print {
    
    #theme-page-header-pane,
    #theme-page-navigation {
        display: none !important;
    }
}

/* ========================================= */
/* SMOOTH TRANSITIONS */
/* ========================================= */
#theme-page-navigation .navbar-nav .nav-link {
    transition: color 0.2s ease, background-color 0.2s ease !important;
}

#theme-page-navigation .dropdown-menu {
    transition: opacity 0.15s linear, transform 0.15s ease-out !important;
}

#theme-page-navigation .offcanvas {
    transition: transform 0.3s ease-in-out !important;
}

/*********************************************/
/* RESPONSIVE NAVIGATION - Enhanced Mobile  */
/*********************************************/

/* Mobile First: Base styles for all screens */
#theme-page-navigation,
body #theme-page-navigation {
    position: relative;
    z-index: 1030;
}

/* ========================================= */
/* MOBILE: Up to 991px (Bootstrap lg breakpoint) */
/* ========================================= */
@media (max-width: 991.98px) {
    
    /* Navigation Bar - More padding on mobile */
    #theme-page-navigation {
        padding: 0.75rem 0 !important;
    }
    
    /* Logo - Larger on mobile */
    #theme-page-navigation .logo img,
    #theme-page-navigation .navbar-brand img {
        max-height: 45px !important;
        height: 45px !important;
    }
    
    /* Hamburger Menu Button - Right aligned, larger */
    #theme-page-navigation .navbar-toggler {
        margin-left: auto !important;
        padding: 0.5rem 0.75rem !important;
        font-size: 1.25rem !important;
    }
    
    /* Off-Canvas Menu */
    #theme-page-navigation .offcanvas {
        max-width: 300px !important;
        width: 85% !important;
    }
    
    #theme-page-navigation .offcanvas-header {
        padding: 1.5rem 1rem !important;
        border-bottom: 1px solid #E2E8F0 !important;
    }
    
    #theme-page-navigation .offcanvas-body {
        padding: 1rem !important;
        background-color: #FFFFFF !important;
    }
    
    /* Mobile Menu Links */
    #theme-page-navigation .navbar-nav {
        flex-direction: column !important;
        width: 100% !important;
    }
    
    #theme-page-navigation .navbar-nav .nav-item {
        width: 100% !important;
        border-bottom: 1px solid #E2E8F0 !important;
    }
    
    #theme-page-navigation .navbar-nav .nav-link {
        color: #4A5568 !important;
        font-size: 16px !important;
        padding: 1rem !important;
        display: block !important;
        width: 100% !important;
        text-transform: uppercase !important;
        font-weight: 600 !important;
    }
    
    #theme-page-navigation .navbar-nav .nav-link:hover,
    #theme-page-navigation .navbar-nav .nav-link:focus,
    #theme-page-navigation .navbar-nav .nav-link.active {
        color: #FF8C00 !important;
        background-color: #FFF5E6 !important;
    }
    
    /* Mobile Dropdowns */
    #theme-page-navigation .dropdown-menu {
        position: static !important;
        transform: none !important;
        border: none !important;
        box-shadow: none !important;
        background-color: #F8F9FA !important;
        margin: 0 !important;
        padding-left: 1rem !important;
    }
    
    #theme-page-navigation .dropdown-menu .dropdown-item {
        padding: 0.75rem 1rem !important;
        font-size: 14px !important;
    }
    
    /* Hide top header pane on mobile for cleaner look */
    #theme-page-header-pane {
        display: none !important;
    }
}

/* ========================================= */
/* TABLET: 768px to 991px */
/* ========================================= */
@media (min-width: 768px) and (max-width: 991.98px) {
    
    #theme-page-navigation .container {
        max-width: 720px !important;
    }
    
    /* Slightly larger logo on tablet */
    #theme-page-navigation .logo img,
    #theme-page-navigation .navbar-brand img {
        max-height: 50px !important;
        height: 50px !important;
    }
}

/* ========================================= */
/* DESKTOP: 992px and up */
/* ========================================= */
@media (min-width: 992px) {
    
    /* Show top header pane */
    #theme-page-header-pane {
        display: block !important;
    }
    
    /* Navigation Bar */
    #theme-page-navigation {
        padding: 0.5rem 0 !important;
    }
    
    /* Logo */
    #theme-page-navigation .logo img,
    #theme-page-navigation .navbar-brand img {
        max-height: 50px !important;
        height: 50px !important;
    }
    
    /* Desktop Menu - Horizontal */
    #theme-page-navigation .navbar-collapse {
        display: flex !important;
        flex-basis: auto !important;
    }
    
    #theme-page-navigation .navbar-nav {
        flex-direction: row !important;
        margin-left: auto !important;
        align-items: center !important;
    }
    
    #theme-page-navigation .navbar-nav .nav-item {
        border-bottom: none !important;
    }
    
    #theme-page-navigation .navbar-nav .nav-link {
        color: #4A5568 !important;
        font-size: 13px !important;
        padding: 0.5rem 1rem !important;
        white-space: nowrap !important;
    }
    
    #theme-page-navigation .navbar-nav .nav-link:hover {
        color: #FF8C00 !important;
        background-color: transparent !important;
    }
    
    #theme-page-navigation .navbar-nav .nav-link.active {
        color: #FF8C00 !important;
        border-bottom: 2px solid #FF8C00 !important;
    }
    
    /* Desktop Dropdowns */
    #theme-page-navigation .dropdown-menu {
        position: absolute !important;
        background-color: #FFFFFF !important;
        border: 1px solid #E2E8F0 !important;
        border-radius: 0.375rem !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
        padding: 0.5rem !important;
        min-width: 200px !important;
    }
    
    #theme-page-navigation .dropdown-menu .dropdown-item {
        padding: 0.5rem 1rem !important;
        font-size: 13px !important;
        border-radius: 0.25rem !important;
    }
    
    #theme-page-navigation .dropdown-menu .dropdown-item:hover,
    #theme-page-navigation .dropdown-menu .dropdown-item.active {
        background-color: #FFF5E6 !important;
        color: #FF8C00 !important;
    }
}

/* ========================================= */
/* LARGE DESKTOP: 1200px and up */
/* ========================================= */
@media (min-width: 1200px) {
    
    #theme-page-navigation .container {
        max-width: 1140px !important;
    }
    
    /* Slightly larger text on large screens */
    #theme-page-navigation .navbar-nav .nav-link {
        font-size: 14px !important;
        padding: 0.5rem 1.25rem !important;
    }
    
    /* Logo */
    #theme-page-navigation .logo img,
    #theme-page-navigation .navbar-brand img {
        max-height: 55px !important;
        height: 55px !important;
    }
}

/* ========================================= */
/* EXTRA LARGE DESKTOP: 1400px and up */
/* ========================================= */
@media (min-width: 1400px) {
    
    #theme-page-navigation .container {
        max-width: 1320px !important;
    }
}

/* ========================================= */
/* MOBILE LANDSCAPE: 576px to 767px */
/* ========================================= */
@media (min-width: 576px) and (max-width: 767.98px) {
    
    #theme-page-navigation .offcanvas {
        max-width: 350px !important;
    }
}

/* ========================================= */
/* SMALL MOBILE: Up to 575px */
/* ========================================= */
@media (max-width: 575.98px) {
    
    /* Smaller logo on very small screens */
    #theme-page-navigation .logo img,
    #theme-page-navigation .navbar-brand img {
        max-height: 40px !important;
        height: 40px !important;
    }
    
    /* Compact hamburger */
    #theme-page-navigation .navbar-toggler {
        padding: 0.4rem 0.6rem !important;
    }
    
    /* Full width off-canvas on small mobile */
    #theme-page-navigation .offcanvas {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Smaller font sizes */
    #theme-page-navigation .navbar-nav .nav-link {
        font-size: 14px !important;
        padding: 0.75rem !important;
    }
}

/* ========================================= */
/* TOUCH DEVICE OPTIMIZATIONS */
/* ========================================= */
@media (hover: none) and (pointer: coarse) {
    
    /* Larger touch targets on touch devices */
    #theme-page-navigation .navbar-nav .nav-link {
        min-height: 48px !important;
        display: flex !important;
        align-items: center !important;
    }
    
    #theme-page-navigation .navbar-toggler {
        min-width: 48px !important;
        min-height: 48px !important;
    }
    
    /* Remove hover effects on touch devices */
    #theme-page-navigation .navbar-nav .nav-link:hover {
        background-color: transparent !important;
    }
}

/* ========================================= */
/* PRINT STYLES */
/* ========================================= */
@media print {
    
    #theme-page-header-pane,
    #theme-page-navigation {
        display: none !important;
    }
}

/* ========================================= */
/* SMOOTH TRANSITIONS */
/* ========================================= */
#theme-page-navigation .navbar-nav .nav-link {
    transition: color 0.2s ease, background-color 0.2s ease !important;
}

#theme-page-navigation .dropdown-menu {
    transition: opacity 0.15s linear, transform 0.15s ease-out !important;
}

#theme-page-navigation .offcanvas {
    transition: transform 0.3s ease-in-out !important;
}

/*********************************************/
/* FINAL FIX: Full-Width Navigation         */
/* Force logo left, nav right edge-to-edge  */
/*********************************************/

/* Override all container width constraints */
#theme-page-navigation .container,
body #theme-page-navigation .container,
html body #theme-page-navigation .container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Force logo to far left */
#theme-page-navigation .navbar-brand,
body #theme-page-navigation .navbar-brand {
    margin-left: 0 !important;
    margin-right: auto !important;
    padding-left: 0 !important;
}

/* Force nav items to far right */
#theme-page-navigation .navbar-nav,
body #theme-page-navigation .navbar-nav {
    margin-left: auto !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
}

/* Ensure container uses space-between justification */
#theme-page-navigation .container,
body #theme-page-navigation .container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

/* Override all media query max-width constraints */
@media (min-width: 768px) {
    #theme-page-navigation .container {
        max-width: 100% !important;
        width: 100% !important;
    }
}

@media (min-width: 992px) {
    #theme-page-navigation .container {
        max-width: 100% !important;
        width: 100% !important;
    }
}

@media (min-width: 1200px) {
    #theme-page-navigation .container {
        max-width: 100% !important;
        width: 100% !important;
    }
}

@media (min-width: 1400px) {
    #theme-page-navigation .container {
        max-width: 100% !important;
        width: 100% !important;
    }
}

/*********************************************/
/* TOP HEADER PANE: Full-Width Right Align  */
/*********************************************/

/* Make top header pane container full-width */
#theme-page-header-pane .container,
body #theme-page-header-pane .container,
html body #theme-page-header-pane .container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Ensure user controls are pushed to the right edge */
#theme-page-header-pane .container {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
}

/* Override media query constraints for top header pane */
@media (min-width: 768px) {
    #theme-page-header-pane .container {
        max-width: 100% !important;
        width: 100% !important;
    }
}

@media (min-width: 992px) {
    #theme-page-header-pane .container {
        max-width: 100% !important;
        width: 100% !important;
    }
}

@media (min-width: 1200px) {
    #theme-page-header-pane .container {
        max-width: 100% !important;
        width: 100% !important;
    }
}

@media (min-width: 1400px) {
    #theme-page-header-pane .container {
        max-width: 100% !important;
        width: 100% !important;
    }
}