@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

:root {
  /* ============================================
       INIDOC BRAND COLORS
       ============================================ */

  /* Primary Colors */
  --Brand-Primary-Light: #4f9dff; /* Light blue for secondary actions */
  --Brand-Primary-Dark: #0061ff; /* Main blue - dominant brand color */
  --Brand-Primary-Darker: #0052cc; /* Darker blue - hover states */

  /* Secondary Colors */
  --Brand-Secondary-Dark: #0b1f3b; /* Dark navy - backgrounds, accents */
  --Brand-Secondary-Light: #4fd1ff; /* Sky cyan - hover effects, accents */

  /* Status Colors */
  --Brand-Error: #e63946; /* Red - errors, delete actions */
  --Brand-Warning-Dark: #ff9f1c; /* Orange - warnings, pending status */
  --Brand-Warning-Light: #fff7ed; /* Light orange - warning backgrounds */
  --Brand-Success: #2ecc71; /* Green - success, approved status */
  --Brand-Success-Light: #f0fdf4; /* Light green - success backgrounds */

  /* ============================================
       GRAY SCALE (Neutral Colors)
       ============================================ */

  --Gray-25: #fcfcfd; /* Lightest - card backgrounds, subtle */
  --Gray-50: #f9fafb; /* Very light - alternate backgrounds */
  --Gray-100: #f2f4f7; /* Light - hover states, dividers */
  --Gray-200: #eaecf0; /* Light gray - borders, subtle dividers */
  --Gray-300: #d0d5dd; /* Light gray - disabled states */
  --Gray-400: #98a2b3; /* Medium gray - secondary text, icons */
  --Gary-500: #667085; /* Medium gray - body text secondary */
  --Gray-600: #475467; /* Dark gray - secondary labels */
  --Gray-700: #344054; /* Darker gray - primary text alt */
  --Gray-800: #182230; /* Very dark - form labels */
  --Gray-900: #101828; /* Almost black - primary text */
  --Gray-950: #0c111d; /* /* Near black - dark mode potential */

  /* ============================================
       SEMANTIC TEXT COLORS
       ============================================ */

  --Text-Primary: var(--Gray-900); /* Main body text */
  --Text-Secondary: var(--Gray-500); /* Secondary text, labels */
  --Text-Tertiary: var(--Gray-400); /* Tertiary text, hints */
  --Text-Disabled: var(--Gray-300); /* Disabled text */
  --Text-White: #ffffff; /* Text on dark backgrounds */
  --Text-Link: var(--Brand-Primary-Dark); /* Link colors */

  /* ============================================
       SEMANTIC BACKGROUND COLORS
       ============================================ */

  --Background-Page: #f4f7fb; /* Main page background */
  --Background-Secondary: #ffffff; /* Cards, containers */
  --Background-Tertiary: var(--Gray-50); /* Alternative surfaces */
  --Background-Hover: var(--Gray-100); /* Hover states */
  --Background-Disabled: var(--Gray-100); /* Disabled backgrounds */

  /* Status Backgrounds */
  --Background-Success: var(--Brand-Success-Light); /* #F0FDF4 */
  --Background-Warning: var(--Brand-Warning-Light); /* #FFF7ED */
  --Background-Error: #fee2e2; /* Light red */
  --Background-Info: #f0f4ff; /* Light blue */

  /* ============================================
       BORDER & DIVIDER COLORS
       ============================================ */

  --Border-Primary: var(--Gray-200); /* Main borders */
  --Border-Secondary: var(--Gray-100); /* Secondary borders */
  --Border-Disabled: var(--Gray-200); /* Disabled borders */
  --Divider: var(--Gray-200); /* Divider lines */

  /* ============================================
       BOX SHADOWS
       ============================================ */

  --Box-Shadow-XS: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  --Box-Shadow-SM: 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
  --Box-Shadow-MD: 0px 4px 8px -2px rgba(0, 0, 0, 0.08);
  --Box-Shadow-LG: 0px 12px 16px -4px rgba(0, 0, 0, 0.08);
  --Box-Shadow-XL: 0px 20px 24px -4px rgba(0, 0, 0, 0.1);
  --Box-Shadow-2XL: 0px 24px 48px -12px rgba(0, 0, 0, 0.12);
  --Box-Shadow-3XL: 0px 32px 64px -12px rgba(0, 0, 0, 0.14);

  /* Focus Shadow */
  --Box-Shadow-Focus: 0px 0px 0px 3px rgba(0, 97, 255, 0.1);

  /* ============================================
       SPACING SYSTEM (8px base)
       ============================================ */

  --Spacing-xs: 4px; /* Minimal spacing */
  --Spacing-sm: 8px; /* Small spacing */
  --Spacing-md: 12px; /* Medium spacing */
  --Spacing-lg: 16px; /* Large spacing */
  --Spacing-xl: 20px; /* Extra large spacing */
  --Spacing-2xl: 24px; /* 2x large spacing */
  --Spacing-3xl: 32px; /* 3x large spacing */
  --Spacing-4xl: 40px; /* 4x large spacing */
  --Spacing-5xl: 48px; /* 5x large spacing */

  /* Common Component Spacing */
  --Padding-Button: var(--Spacing-md) var(--Spacing-lg); /* 12px 16px */
  --Padding-Card: var(--Spacing-lg); /* 16px */
  --Padding-Section: var(--Spacing-3xl); /* 32px */
  --Gap-Component: var(--Spacing-md); /* 12px */
  --Gap-Section: var(--Spacing-2xl); /* 24px */

  /* ============================================
       BORDER RADIUS
       ============================================ */

  --Border-Radius-xs: 4px; /* Minimal rounding */
  --Border-Radius-sm: 6px; /* Small rounding */
  --Border-Radius-md: 8px; /* Medium rounding */
  --Border-Radius-lg: 10px; /* Large rounding */
  --Border-Radius-xl: 16px; /* Extra large rounding */
  --Border-Radius-2xl: 20px; /* 2x large rounding */
  --Border-Radius-full: 9999px; /* Fully rounded (pills) */

  /* ============================================
       TYPOGRAPHY
       ============================================ */

  /* Font Family */
  --Font-Family-Primary:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --Font-Family-Mono: "Courier New", "Courier", monospace;
  --Font-Family-Heading:
    "Poppins", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;

  /* Font Sizes */
  --Font-Size-xs: 0.6rem; /* Extra small text */
  --Font-Size-sm: 0.8rem; /* Small text */
  --Font-Size-md: 1rem; /* Medium text (body) */
  --Font-Size-lg: 1.25rem; /* Large text */
  --Font-Size-xl: 1.5rem; /* Extra large text */
  --Font-Size-2xl: 1.75rem; /* 2x large text */
  --Font-Size-3xl: 2rem; /* 3x large text */
  --Font-Size-4xl: 2.25rem; /* 4x large text */
  --Font-Size-5xl: 2.5rem; /* 5x large text */

  /* Font Weights */
  --Font-Weight-Regular: 400;
  --Font-Weight-Medium: 500;
  --Font-Weight-Semibold: 600;
  --Font-Weight-Bold: 700;

  /* Line Heights */
  --Line-Height-tight: 1.2;
  --Line-Height-normal: 1.5;
  --Line-Height-relaxed: 1.75;

  /* ============================================
       TRANSITIONS & ANIMATIONS
       ============================================ */

  --Transition-Duration-Fast: 150ms;
  --Transition-Duration-Base: 200ms;
  --Transition-Duration-Slow: 300ms;
  --Transition-Duration-Slower: 600ms;

  --Transition-Timing-Linear: linear;
  --Transition-Timing-In: cubic-bezier(0.4, 0, 1, 1);
  --Transition-Timing-Out: cubic-bezier(0, 0, 0.2, 1);
  --Transition-Timing-InOut: cubic-bezier(0.4, 0, 0.2, 1);
  --Transition-Timing-Elastic: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Preset Transitions */
  --Transition-Default: all var(--Transition-Duration-Base)
    var(--Transition-Timing-Out);
  --Transition-Colors:
    color var(--Transition-Duration-Base) var(--Transition-Timing-Out),
    background-color var(--Transition-Duration-Base)
      var(--Transition-Timing-Out),
    border-color var(--Transition-Duration-Base) var(--Transition-Timing-Out);
  --Transition-Shadow: box-shadow var(--Transition-Duration-Base)
    var(--Transition-Timing-Out);

  /* ============================================
       COMPONENT-SPECIFIC TOKENS
       ============================================ */

  /* Button Tokens */
  --Button-Height-Sm: 32px;
  --Button-Height-Md: 40px;
  --Button-Height-Lg: 44px;
  --Button-Padding-X: var(--Spacing-lg); /* 16px */
  --Button-Padding-Y: var(--Spacing-md); /* 12px */

  /* Input Tokens */
  --Input-Height: 40px;
  --Input-Padding: var(--Spacing-md) var(--Spacing-lg); /* 12px 16px */
  --Input-Border-Width: 1px;
  --Input-Border-Radius: var(--Border-Radius-lg);

  /* Card Tokens */
  --Card-Padding: var(--Spacing-xl); /* 24px */
  --Card-Border-Radius: var(--Border-Radius-xl); /* 16px */
  --Card-Border-Width: 1px;
  --Card-Shadow: var(--Box-Shadow-SM);

  /* Badge Tokens */
  --Badge-Padding: 6px 12px;
  --Badge-Border-Radius: 20px;
  --Badge-Font-Size: var(--Font-Size-sm); /* 12px */
  --Badge-Font-Weight: var(--Font-Weight-Medium); /* 500 */

  /* Sidebar Tokens */
  --Sidebar-Width: 256px;
  --Sidebar-Width-Collapsed: 80px;
  --Sidebar-Background: var(--Background-Secondary); /* #FFFFFF */
  --Sidebar-Border-Color: var(--Border-Primary);

  /* Header/Top Bar Tokens */
  --Header-Height: 64px;
  --Header-Background: var(--Background-Secondary); /* #FFFFFF */
  --Header-Border-Color: var(--Border-Primary);

  /* Navigation Tokens */
  --Nav-Item-Height: 44px;
  --Nav-Item-Padding: var(--Spacing-md) var(--Spacing-lg); /* 12px 16px */
  --Nav-Item-Border-Radius: var(--Border-Radius-lg);
  --Nav-Item-Active-Color: var(--Brand-Primary-Dark);
  --Nav-Item-Active-Background: var(--Background-Info);
  --Nav-Item-Hover-Background: var(--Background-Hover);

  /* ============================================
       LINK TOKENS
       ============================================ */

  --Link-Color: var(--Brand-Primary-Dark);
  --Link-Color-Hover: var(--Brand-Primary-Darker);
  --Link-Color-Visited: var(--Brand-Primary-Light);
  --Link-Decoration: none;
  --Link-Decoration-Hover: none;

  /* ============================================
       FORM ELEMENT TOKENS
       ============================================ */

  /* Label */
  --Form-Label-Font-Size: var(--Font-Size-sm); /* 12px */
  --Form-Label-Font-Weight: var(--Font-Weight-Semibold); /* 600 */
  --Form-Label-Color: var(--Gray-700);
  --Form-Label-Margin-Bottom: var(--Spacing-md);

  /* Input/Textarea */
  --Form-Input-Font-Size: var(--Font-Size-md); /* 13px */
  --Form-Input-Border-Color: var(--Border-Primary);
  --Form-Input-Background: var(--Background-Secondary);
  --Form-Input-Color: var(--Text-Primary);
  --Form-Input-Placeholder-Color: var(--Text-Tertiary);

  /* Focus State */
  --Form-Input-Focus-Border-Color: var(--Brand-Primary-Dark);
  --Form-Input-Focus-Shadow: var(--Box-Shadow-Focus);

  /* Disabled State */
  --Form-Input-Disabled-Background: var(--Background-Disabled);
  --Form-Input-Disabled-Color: var(--Text-Disabled);
  --Form-Input-Disabled-Border-Color: var(--Border-Disabled);

  /* ============================================
       Z-INDEX SCALE
       ============================================ */

  --ZIndex-Dropdown: 50;
  --ZIndex-Sticky: 10;
  --ZIndex-Fixed: 20;
  --ZIndex-ModalBackdrop: 30;
  --ZIndex-Modal: 40;
  --ZIndex-Popover: 35;
  --ZIndex-Tooltip: 45;
  --ZIndex-Notification: 60;
  --ZIndex-Sidebar: 100;

  /* ============================================
       BREAKPOINTS (Mobile-First)
       ============================================ */

  --Breakpoint-Mobile: 320px;
  --Breakpoint-Tablet: 768px;
  --Breakpoint-Laptop: 1024px;
  --Breakpoint-Desktop: 1440px;
  --Breakpoint-Ultra: 1920px;

  /* ============================================
       INIDOC COMPONENT OVERRIDES (Like dxbl-*)
       ============================================ */

  /* Menu Item Styles */
  --Menu-Item-Hover-Color: var(--Brand-Primary-Dark) !important;
  --Menu-Item-Hover-Background: white !important;
  --Menu-Item-Selected-Background: var(--Background-Info) !important;
  --Menu-Item-Selected-Color: var(--Brand-Primary-Dark) !important;
  --Menu-Item-Selected-Hover-Background: var(--Background-Info) !important;
  --Menu-Item-Selected-Hover-Color: var(--Brand-Primary-Dark) !important;
  --Menu-Item-Active-Border-Left: 4px solid var(--Brand-Primary-Dark);
  --Menu-Item-Active-Border-Left-Position: -16px; /* Align with padding */

  /* Menu Container Styles */
  --Menu-Border-Radius-Top-Left: 0 !important;
  --Menu-Border-Radius-Top-Right: 0 !important;
  --Menu-Border-Radius-Bottom-Left: 0 !important;
  --Menu-Border-Radius-Bottom-Right: 0 !important;
  --Menu-Background: white !important;
  --Menu-Border-Color: var(--Border-Primary) !important;

  /* Dropdown Menu */
  --Dropdown-Background: var(--Background-Secondary);
  --Dropdown-Border: 1px solid var(--Border-Primary);
  --Dropdown-Border-Radius: var(--Border-Radius-lg);
  --Dropdown-Shadow: var(--Box-Shadow-MD);

  /* Tooltip */
  --Tooltip-Background: var(--Gray-900);
  --Tooltip-Color: white;
  --Tooltip-Border-Radius: var(--Border-Radius-sm);
  --Tooltip-Font-Size: var(--Font-Size-xs);
  --Tooltip-Padding: var(--Spacing-sm) var(--Spacing-md);

  /* Dialog/Modal */
  --Modal-Background: var(--Background-Secondary);
  --Modal-Border-Radius: var(--Border-Radius-xl);
  --Modal-Shadow: var(--Box-Shadow-3XL);
  --Modal-Padding: var(--Spacing-2xl);

  /* ============================================
       GRADIENT TOKENS (Optional)
       ============================================ */

  --Gradient-Primary: linear-gradient(
    135deg,
    var(--Brand-Primary-Dark) 0%,
    var(--Brand-Primary-Light) 100%
  );
  --Gradient-Primary-To-Secondary: linear-gradient(
    135deg,
    var(--Brand-Primary-Dark) 0%,
    var(--Brand-Secondary-Dark) 100%
  );
  --Gradient-Success: linear-gradient(
    135deg,
    var(--Brand-Success) 0%,
    var(--Brand-Success-Light) 100%
  );
  --Gradient-Warning: linear-gradient(
    135deg,
    var(--Brand-Warning-Dark) 0%,
    var(--Brand-Warning-Light) 100%
  );
}

/* ============================================
   HEADING STYLES (H1 - H6)
   ============================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0; /* Reset default margins */
  /* color: var(--Text-Primary); Default heading color */
  color: var(--Brand-Secondary-Dark); /* Default heading color */
  font-family: var(--Font-Family-Heading); /* Use primary font */
}

/* Default heading styles (desktop / lg+) */
h1 {
  font-size: var(--Font-Size-4xl);
  font-weight: var(--Font-Weight-Bold);
}
h2 {
  font-size: var(--Font-Size-3xl);
  font-weight: var(--Font-Weight-Semibold);
}
h3 {
  font-size: var(--Font-Size-2xl);
  font-weight: var(--Font-Weight-Medium);
}
h4 {
  font-size: var(--Font-Size-xl);
  font-weight: var(--Font-Weight-Medium);
}
h5 {
  font-size: var(--Font-Size-lg);
  font-weight: var(--Font-Weight-Regular);
}
h6 {
  font-size: var(--Font-Size-md);
  font-weight: var(--Font-Weight-Regular);
}

/* Kleine schermen (sm: <576px) */
@media (max-width: 575.98px) {
  h1 {
    font-size: calc(var(--Font-Size-4xl) * 0.7);
  }
  h2 {
    font-size: calc(var(--Font-Size-3xl) * 0.75);
  }
  h3 {
    font-size: calc(var(--Font-Size-2xl) * 0.8);
  }
  h4 {
    font-size: calc(var(--Font-Size-xl) * 0.85);
  }
  h5 {
    font-size: calc(var(--Font-Size-lg) * 0.9);
  }
  h6 {
    font-size: calc(var(--Font-Size-md) * 0.95);
  }
}

/* Middelgrote schermen (md: 576px - 767px) */
@media (min-width: 576px) and (max-width: 767.98px) {
  h1 {
    font-size: calc(var(--Font-Size-4xl) * 0.85);
  }
  h2 {
    font-size: calc(var(--Font-Size-3xl) * 0.9);
  }
  h3 {
    font-size: calc(var(--Font-Size-2xl) * 0.92);
  }
  h4 {
    font-size: calc(var(--Font-Size-xl) * 0.95);
  }
  h5 {
    font-size: calc(var(--Font-Size-lg) * 0.97);
  }
  h6 {
    font-size: var(--Font-Size-md);
  }
}

/* Optioneel: kleine tablets (smaller md/lg: 768px - 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
  h1 {
    font-size: calc(var(--Font-Size-4xl) * 0.9);
  }
  h2 {
    font-size: calc(var(--Font-Size-3xl) * 0.93);
  }
  h3 {
    font-size: calc(var(--Font-Size-2xl) * 0.95);
  }
}

/* ============================================
   UTILITY CLASSES (Optional - based on vars)
   ============================================ */

.text-primary {
  color: var(--Text-Primary);
}

.text-secondary {
  color: var(--Text-Secondary);
}

.text-tertiary {
  color: var(--Text-Tertiary);
}

.bg-primary-page {
  background-color: var(--Background-Page);
}

.bg-secondary {
  background-color: var(--Background-Secondary) !important;
}

.border-primary {
  border-color: var(--Border-Primary);
}

.shadow-sm {
  box-shadow: var(--Box-Shadow-SM);
}

.shadow-md {
  box-shadow: var(--Box-Shadow-MD);
}

.shadow-lg {
  box-shadow: var(--Box-Shadow-LG);
}

.rounded-lg {
  border-radius: var(--Border-Radius-lg);
}

.rounded-xl {
  border-radius: var(--Border-Radius-xl);
}

.transition-default {
  transition: var(--Transition-Default);
}

.transition-colors {
  transition: var(--Transition-Colors);
}

/* Spacing Utilities */
.p-sm {
  padding: var(--Spacing-sm);
}
.p-md {
  padding: var(--Spacing-md);
}
.p-lg {
  padding: var(--Spacing-lg);
}
.p-xl {
  padding: var(--Spacing-xl);
}
.p-2xl {
  padding: var(--Spacing-2xl);
}
.p-3xl {
  padding: var(--Spacing-3xl);
}

.gap-sm {
  gap: var(--Spacing-sm);
}
.gap-md {
  gap: var(--Spacing-md);
}
.gap-lg {
  gap: var(--Spacing-lg);
}
.gap-xl {
  gap: var(--Spacing-xl);
}
.gap-2xl {
  gap: var(--Spacing-2xl);
}
.gap-3xl {
  gap: var(--Spacing-3xl);
}

/* END CUSTOM THEME */

.dxbl-menu-item {
  --dxbl-menu-item-line-height: 24px !important;
  --dxbl-menu-item-padding-y: 8px !important;
}

.dxbl-grid .dxbl-grid-table {
  border-collapse: collapse !important;
}

.dxbl-grid .dxbl-grid-table > tbody > tr,
.dxbl-grid .dxbl-grid-table > tfoot > tr,
.dxbl-grid .dxbl-grid-table > thead > tr {
  border: none !important;
  border-bottom: 1px solid var(--Gray-200) !important;
}

.dxbl-grid .dxbl-grid-table > tbody > tr:hover {
  background-color: var(--Gray-100) !important;
}

dxbl-grid {
  --dxbl-grid-text-cell-padding-x: 8px !important;
  --dxbl-grid-text-cell-padding-y: 8px !important; /*Before: 8px*/
  --dxbl-grid-header-bg: var(--Gray-100) !important;
  --dxbl-grid-border-radius: 0 !important;
  --dxbl-grid-header-color: var(--Gray-400) !important;

  --dxbl-grid-selection-bg: var(--Background-Info) !important;
  --dxbl-grid-selection-hover-bg: var(--Background-Info) !important;

  border: none !important;
}

.dxbl-grid .dxbl-grid-table > thead > tr {
  text-transform: uppercase;
  font-size: var(--Font-Size-xs) !important;
  font-weight: var(--Font-Weight-Semibold) !important;
}

.dxbl-pager {
  --dxbl-pager-active-page-btn-bg: var(--Brand-Primary-Light) !important;
}

.dxbl-pager > .dxbl-btn.dxbl-btn-outline-secondary.dxbl-pager-active-page-btn {
  --dxbl-pager-page-btn-hover-bg: var(--Brand-Primary-Light) !important;
}

td > dxbl-check {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.flex-report-viewer {
  flex: 1 1;
}

html:not(.dxSafari)
  .dxbl-list-box-render-container:not(.dxbl-disabled):not(:disabled):not(
    .dxbl-readonly
  ):not(.dxbl-list-box-multi-select)[data-dx-focus-hidden]
  > .dxbl-scroll-viewer
  > .dxbl-scroll-viewer-content
  > :not(.dxbl-list-box-empty-data-container)
  > tbody
  > tr:not([dxbl-top-virtual-spacer-element]):not(
    [dxbl-bottom-virtual-spacer-element]
  ).dxbl-list-box-item-selected:hover
  > td,
html:not(.dxSafari)
  .dxbl-list-box:not(.dxbl-disabled):not(:disabled):not(.dxbl-readonly):not(
    .dxbl-list-box-multi-select
  )[data-dx-focus-hidden]
  > .dxbl-scroll-viewer
  > .dxbl-scroll-viewer-content
  > :not(.dxbl-list-box-empty-data-container)
  > tbody
  > tr:not([dxbl-top-virtual-spacer-element]):not(
    [dxbl-bottom-virtual-spacer-element]
  ).dxbl-list-box-item-selected:hover
  > td {
  background-color: var(--Gray-700) !important;
}

.dxbl-btn.dxbl-btn-link,
.dxbl-btn.dxbl-btn-outline-link,
.dxbl-btn.dxbl-btn-text-link {
  --dxbl-btn-hover-color: var(--Brand-Primary-Light) !important;
}

.dxbl-grid {
  --dxbl-grid-focus-frame-color: var(--Brand-Primary-Light) !important;
}

.dxbl-text-edit.dxbl-focused,
.dxbl-text-edit:focus-within {
  border-color: var(--Brand-Primary-Light) !important;
}

.dxbl-text-edit {
  --dxbl-text-edit-focus-shadow-color: var(--Gray-300) !important;
}

.dxbl-checkbox {
  --dxbl-checkbox-check-element-checked-bg: var(
    --Brand-Primary-Light
  ) !important;
  --dxbl-checkbox-check-element-checked-hover-bg: var(
    --Brand-Primary-Light
  ) !important;
  --dxbl-checkbox-unchecked-focus-shadow-color: var(--Gray-400) !important;
  --dxbl-checkbox-checked-focus-shadow-color: var(--Gray-400) !important;
}

.dxbl-calendar:not(.dxbl-disabled):not(:disabled)
  .dxbl-calendar-content
  > table
  > tbody
  > tr:not(.dxbl-calendar-days-of-week)
  td:not(.dxbl-calendar-disabled-item):not(
    .dxbl-calendar-week-number
  ).dxbl-calendar-selected-range::before {
  background-color: var(--Brand-Primary-Light) !important;
}

.dxbl-btn-standalone.dxbl-btn-primary {
  transition: var(--Transition-Colors) !important;
  --dxbl-btn-color: var(--Text-White);
  --dxbl-btn-bg: var(--Brand-Primary-Dark);
  --dxbl-btn-border-color: var(--Brand-Primary-Dark);
  --dxbl-btn-active-bg: var(--Brand-Primary-Darker);
  --dxbl-btn-active-color: var(--Text-White);
  --dxbl-btn-active-border-color: var(--Brand-Primary-Darker);
  --dxbl-btn-active-background: var(--Brand-Primary-Darker);
  --dxbl-btn-hover-bg: var(--Brand-Primary-Darker);
  --dxbl-btn-hover-color: var(--Text-White);
  --dxbl-btn-hover-border-color: var(--Brand-Primary-Darker);
  --dxbl-btn-hover-background: var(--Brand-Primary-Darker);
  --dxbl-btn-caption-disabled-opacity: 0.85;
  --dxbl-btn-icon-disabled-opacity: 0.85;
  --dxbl-btn-disabled-bg: var(--Gray-300);
  --dxbl-btn-disabled-color: var(--Gray-500);
  --dxbl-btn-disabled-border-color: var(--Gray-300);
  --dxbl-btn-disabled-background: var(--Gray-300);
  --dxbl-btn-focus-outline-size: 0.125rem;
  --dxbl-btn-focus-outline-offset: 0.063rem;
  --dxbl-btn-focus-box-shadow: var(--Box-Shadow-Focus);
  --dxbl-btn-focus-color: var(--Brand-Primary-Darker);
  --dxbl-btn-focus-border-bg: var(--Brand-Primary-Darker);
  --dxbl-btn-focus-outline-color: var(--Brand-Primary-Darker);
}

.dxbl-btn-standalone.dxbl-btn-outline-primary {
  transition: var(--Transition-Colors) !important;
  --dxbl-btn-color: var(--Brand-Primary-Dark);
  --dxbl-btn-border-color: var(--Brand-Primary-Dark);
  --dxbl-btn-active-bg: var(--Brand-Primary-Light);
  --dxbl-btn-active-color: var(--Brand-Primary-Dark);
  --dxbl-btn-active-border-color: var(--Brand-Primary-Dark);
  --dxbl-btn-active-background: var(--Brand-Primary-Light);
  --dxbl-btn-hover-bg: var(--Brand-Primary-Dark);
  --dxbl-btn-hover-color: var(--Text-White);
  --dxbl-btn-hover-border-color: var(--Brand-Primary-Dark);
  --dxbl-btn-hover-background: var(--Brand-Primary-Dark);
  --dxbl-btn-caption-disabled-opacity: 0.85;
  --dxbl-btn-icon-disabled-opacity: 0.85;
  --dxbl-btn-disabled-bg: transparent;
  --dxbl-btn-disabled-color: var(--Brand-Primary-Dark);
  --dxbl-btn-disabled-border-color: var(--Brand-Primary-Dark);
  --dxbl-btn-focus-outline-size: 0.125rem;
  --dxbl-btn-focus-outline-offset: 0.063rem;
  --dxbl-btn-focus-box-shadow: var(--Box-Shadow-Focus);
  --dxbl-btn-focus-color: var(--Brand-Primary-Darker);
  --dxbl-btn-focus-border-bg: var(--Brand-Primary-Darker);
  --dxbl-btn-focus-outline-color: var(--Brand-Primary-Darker);
}

.dxbl-modal {
  --dxbl-popup-font-family: inherit;
  --dxbl-popup-font-size: var(--Font-Size-md);
  --dxbl-popup-line-height: 1.5;
  --dxbl-popup-border-width: 1px;
  --dxbl-popup-border-style: solid;
  --dxbl-popup-border-color: var(--Border-Primary);
  --dxbl-popup-border-radius: var(--Border-Radius-xl);
  --dxbl-popup-bg: var(--Background-Secondary);
  --dxbl-popup-color: var(--Text-Primary);
  --dxbl-popup-shadow: var(--Box-Shadow-3XL);
  --dxbl-popup-max-width: 500px;
  --dxbl-popup-width: 100%;
  --dxbl-popup-margin: 1rem;
  --dxbl-popup-scrollable-border-width: 1px;
  --dxbl-popup-back-bg: var(--Brand-Secondary-Dark);
  --dxbl-popup-back-opacity: 0.5;
  --dxbl-popup-header-font-size: var(--Font-Size-lg);
  --dxbl-popup-header-line-height: var(--Line-Height-lg);
  --dxbl-popup-header-bg: var(--Background-Secondary);
  --dxbl-popup-header-color: var(--Text-Primary);
  --dxbl-popup-header-padding-y: var(--Spacing-sm);
  --dxbl-popup-header-padding-x: var(--Spacing-lg);
  --dxbl-popup-header-font-weight: var(--Font-Weight-Semibold);
  --dxbl-popup-header-btn-bg: transparent;
  --dxbl-popup-header-btn-color: var(--Text-Primary);
  --dxbl-popup-header-btn-hover-bg: var(--Background-Secondary);
  --dxbl-popup-header-btn-hover-color: var(--Text-Primary);
  --dxbl-popup-body-padding-x: var(--Spacing-lg);
  --dxbl-popup-body-padding-y: var(--Spacing-lg);
  --dxbl-popup-footer-bg: var(--Background-Secondary);
  --dxbl-popup-footer-color: var(--Text-Primary);
  --dxbl-popup-footer-padding-y: var(--Spacing-sm);
  --dxbl-popup-footer-padding-x: var(--Spacing-lg);

  overflow: hidden !important; /* Ensure content doesn't overflow the modal */
}

.dxbl-modal-content {
  overflow: hidden !important; /* Ensure modal content doesn't overflow */
}

.inidocs-menu-wrapper .dxbl-menu .dxbl-menu-item-list>.dxbl-menu-list-item>.dxbl-menu-item>.dxbl-btn {
  padding: var(--Nav-Item-Padding) !important;
  border-radius: var(--Nav-Item-Border-Radius) !important;
  overflow: hidden !important;
  background-color: var(--Background-Secondary) !important;
  border-left: 3px solid var(--Background-Secondar) !important;
  min-height: var(--Nav-Item-Height) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: var(--Transition-Colors) !important;
}

.inidocs-menu-wrapper.inidocs-menu-wrapper-small .dxbl-menu .dxbl-menu-item-list>.dxbl-menu-list-item>.dxbl-menu-item>.dxbl-btn {
  padding: 0 !important;
}

.inidocs-menu-wrapper .navbar-item .dxbl-image {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    color: var(--Brand-Primary-Dark);
}

.inidocs-menu-wrapper .dxbl-menu .dxbl-menu-item-list>.dxbl-menu-list-item.navbar-item>.dxbl-menu-item>.dxbl-btn:hover {
  background-color: var(--Nav-Item-Active-Background) !important;
  border-left: 3px solid var(--Nav-Item-Active-Color) !important;
}

.inidocs-menu-wrapper .dxbl-menu .dxbl-menu-item-list>.dxbl-menu-list-item.navbar-item.dxbl-menu-item-left-selected>.dxbl-menu-item>.dxbl-btn {
  background-color: var(--Nav-Item-Active-Background) !important;
  border-left: 3px solid var(--Nav-Item-Active-Color) !important;
}

.inidocs-menu .dxbl-menu-item-list-with-icons.dxbl-menu-item-list {
    gap: var(--Gap-Component) !important;
}

.inidocs-menu-small .dxbl-menu-item-list-with-icons.dxbl-menu-item-list {
    gap: 0.25rem !important;
    background-color: var(--Background-Secondary);
}

.inidocs-menu-wrapper .dxbl-menu .dxbl-menu-item-list>.dxbl-menu-list-item.navbar-small-item>.dxbl-menu-item>.dxbl-btn {
    font-size: var(--Font-Size-sm) !important;
    color: var(--Gray-600) !important;
    border-radius: 0 !important;
}

.inidocs-menu-wrapper .dxbl-menu .dxbl-menu-item-list>.dxbl-menu-list-item.navbar-small-item>.dxbl-menu-item>.dxbl-btn:hover {
    color: var(--Brand-Primary-Dark) !important;
}

.inidocs-menu-wrapper .dxbl-menu .dxbl-menu-item-list>.dxbl-menu-list-item.navbar-small-item.dxbl-menu-item-left-selected>.dxbl-menu-item>.dxbl-btn {
    color: var(--Brand-Primary-Dark) !important;
}

.inidocs-menu-wrapper .dxbl-menu .dxbl-menu-item-list>.dxbl-menu-list-item.navbar-small-item-logout>.dxbl-menu-item>.dxbl-btn {
    color: var(--Brand-Error) !important;
}

.inidocs-menu-wrapper .dxbl-menu .dxbl-menu-item-list>.dxbl-menu-list-item.navbar-small-item-logout>.dxbl-menu-item>.dxbl-btn:hover {
    color: var(--Brand-Error) !important;
}

.inidocs-menu-wrapper .dxbl-menu .dxbl-menu-item-list>.dxbl-menu-list-item.navbar-small-item-logout.dxbl-menu-item-left-selected>.dxbl-menu-item>.dxbl-btn {
    color: var(--Brand-Error) !important;
}

@media (max-width: 1200px) {
    .inidocs-menu .dxbl-menu-item-list-with-icons.dxbl-menu-item-list {
        flex-direction: row !important;
        justify-content: space-evenly !important;
    }

    .inidocs-menu .dxbl-menu-item-text-container {
        display: none !important;
    }

    .inidocs-menu{
        width: 100% !important;
    }

    .inidocs-menu-wrapper .dxbl-menu .dxbl-menu-item-list>.dxbl-menu-list-item.navbar-item.dxbl-menu-item-left-selected>.dxbl-menu-item>.dxbl-btn {
        border-left: none !important;
        border-bottom: 3px solid var(--Nav-Item-Active-Color) !important;
    }

    .inidocs-menu-small .dxbl-menu-item-list-with-icons.dxbl-menu-item-list {
        display: none !important;
    }
}