* {
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}

*:focus {
  outline: none !important;
}

html {
  font-family: 'IBM Plex Sans Var', Inter var, Roboto, Arial, sans-serif;
  background-color: #FFFFFF;
}

body {
  line-height: 1.3;
  font-size: 0.8125rem;
  overflow-x: hidden;
  font-feature-settings: "salt";
  color: #1C1C1C;
  background-color: #FFFFFF;
}

body.dark {
  color: #FFFFFF;
  background-color: #1C1C1C;
}

html, body {
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  display: flex;
  flex-direction: column;
  position: relative;
  margin: 0;
  min-height: 100%;
  width: 100%;
  flex: 1 1 auto;
}

#root, #app {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
}

/* Menu styles */
body:not(.dark) .navigation, body:not(.dark) .muiltr-1h5mtlg {
  background-color: #FFFFFF !important;
  color: #1C1C1C !important;
}
body:not(.dark) .navigation .singularity-list-item-text-primary {
  color: #1C1C1C !important;
}
body.dark .navigation, body.dark .muiltr-1h5mtlg {
  background-color: #1C1C1C !important;
  color: #FFFFFF !important;
}
body.dark .navigation .singularity-list-item-text-primary {
  color: #FFFFFF !important;
}

/* Navigation toolbar icon styles */
body:not(.dark) .navigation .MuiIconButton-root,
body:not(.dark) .navigation .shortcut-icon,
body:not(.dark) .navigation .SingularitySvgIcon,
body:not(.dark) .navigation .SingularitySvgIcon svg {
  color: #1C1C1C !important;
  fill: #1C1C1C !important;
  stroke: #1C1C1C !important;
}
body.dark .navigation .MuiIconButton-root,
body.dark .navigation .shortcut-icon,
body.dark .navigation .SingularitySvgIcon,
body.dark .navigation .SingularitySvgIcon svg {
  color: #40C4FF !important;
  fill: #40C4FF !important;
  stroke: #40C4FF !important;
  opacity: 0.6 !important;
}

/* UserMenu styles */
body:not(.dark) .user-menu, body:not(.dark) .MuiPaper-root {
  background-color: #FFFFFF !important;
  color: #1C1C1C !important;
}
body:not(.dark) .user-menu .title, body:not(.dark) .user-menu .subtitle {
  color: #1C1C1C !important;
}
body.dark .user-menu, body.dark .MuiPaper-root {
  background-color: #1C1C1C !important;
  color: #FFFFFF !important;
}
body.dark .user-menu .title, body.dark .user-menu .subtitle {
  color: #FFFFFF !important;
}

/* DocNavigationBox styles */
body:not(.dark) .documentation-hero {
  background-color: #FFFFFF !important;
  color: #1C1C1C !important;
}
body.dark .documentation-hero {
  background-color: #1C1C1C !important;
  color: #FFFFFF !important;
}

/* DemoHeader IconButton styles */
body:not(.dark) .MuiIconButton-root {
  background-color: #FFFFFF !important;
  color: #1C1C1C !important;
}
body.dark .MuiIconButton-root {
  background-color: #1C1C1C !important;
  color: #FFFFFF !important;
}

/* StreamingIssuesWidget square styles */
body:not(.dark) .github-issues-new {
  background-color: #EEF2FF !important;
  color: #1C1C1C !important;
}
body.dark .github-issues-new {
  background-color: #312E81 !important;
  color: #FFFFFF !important;
}
body:not(.dark) .github-issues-closed {
  background-color: #ECFDF5 !important;
  color: #1C1C1C !important;
}
body.dark .github-issues-closed {
  background-color: #064E3B !important;
  color: #FFFFFF !important;
}

/* SingularityShortcuts icon styles */
body:not(.dark) .shortcut-icon {
  color: #1C1C1C !important;
}
body.dark .shortcut-icon {
  color: #FFFFFF !important;
}

/* Navigation group heading and subheading styles */
body:not(.dark) .navigation .singularity-list-subheader-text .MuiListItemText-primary {
  color: #1C1C1C !important;
}
body.dark .navigation .singularity-list-subheader-text .MuiListItemText-primary {
  color: #FFFFFF !important;
}
body:not(.dark) .navigation .singularity-list-subheader-text .MuiListItemText-secondary {
  color: #0571D1 !important;
}
body.dark .navigation .singularity-list-subheader-text .MuiListItemText-secondary {
  color: #B0B0B0 !important;
}

/* Footer popover styles */
body:not(.dark) .footer-popover {
  background-color: #FFFFFF !important;
}
body:not(.dark) .footer-popover.MuiPaper-root {
  background-color: #FFFFFF !important;
}
body.dark .footer-popover {
  background-color: #1C1C1C !important;
}
body:not(.dark) .footer-popover.light-mode-fix {
  background-color: #FFFFFF !important;
}
body:not(.dark) .footer-popover-content .MuiMenuItem-root {
  background-color: transparent !important;
  color: #1C1C1C !important;
}
body.dark .footer-popover-content .MuiMenuItem-root {
  background-color: transparent !important;
  color: #FFFFFF !important;
}
body:not(.dark) .footer-popover-content .MuiMenuItem-root:hover {
  background-color: #6BC9F7 !important;
}
body.dark .footer-popover-content .MuiMenuItem-root:hover {
  background-color: #003087 !important;
}
body:not(.dark) .footer-popover-content .MuiTypography-root {
  color: #1C1C1C !important;
}
body.dark .footer-popover-content .MuiTypography-root {
  color: #FFFFFF !important;
}
body:not(.dark) .footer-icon-button {
  color: #1C1C1C !important;
}
body.dark .footer-icon-button {
  color: #FFFFFF !important;
}
body:not(.dark) .footer-popover-content .MuiListItemIcon-root {
  color: #1C1C1C !important;
}
body.dark .footer-popover-content .MuiListItemIcon-root {
  color: #FFFFFF !important;
}

/* UserMenu Popover specific styles */
body:not(.dark) .user-menu-popover.MuiPaper-root {
  background-color: #FFFFFF !important;
  color: #1C1C1C !important;
}
body.dark .user-menu-popover.MuiPaper-root {
  background-color: #1C1C1C !important;
  color: #FFFFFF !important;
}
body:not(.dark) .user-menu-popover .MuiMenuItem-root {
  background-color: transparent !important;
  color: #1C1C1C !important;
}
body.dark .user-menu-popover .MuiMenuItem-root {
  background-color: transparent !important;
  color: #FFFFFF !important;
}
body:not(.dark) .user-menu-popover .MuiMenuItem-root:hover {
  background-color: #6BC9F7 !important;
}
body.dark .user-menu-popover .MuiMenuItem-root:hover {
  background-color: #003087 !important;
}
body:not(.dark) .user-menu-popover .MuiListItemText-primary {
  color: #1C1C1C !important;
}
body.dark .user-menu-popover .MuiListItemText-primary {
  color: #FFFFFF !important;
}
body:not(.dark) .user-menu-popover .MuiListItemIcon-root,
body:not(.dark) .user-menu-popover .SingularitySvgIcon,
body:not(.dark) .user-menu-popover .SingularitySvgIcon svg {
  color: #1C1C1C !important;
  fill: #1C1C1C !important;
  stroke: #1C1C1C !important;
}
body.dark .user-menu-popover .MuiListItemIcon-root,
body.dark .user-menu-popover .SingularitySvgIcon,
body.dark .user-menu-popover .SingularitySvgIcon svg {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
  stroke: #FFFFFF !important;
}

/* Perfect Scrollbar styles */
.ps, .ps__rail-y, .ps__rail-x {
  background-color: transparent !important; /* Ensure .ps and scrollbars are transparent */
}

.ps > .ps__rail-y,
.ps > .ps__rail-x {
  z-index: 99;
}

[dir="rtl"] .ps__thumb-y {
  right: auto !important;
  left: 2px !important;
}

[dir="rtl"] .ps > .ps__rail-y {
  left: 0 !important;
  right: auto !important;
}

a[role=button] {
  text-decoration: none;
}

[role="tooltip"] {
  z-index: 9999;
}

.MuiModal-root {
  z-index: 9999;
}

@media only screen and (min-width: 992px) {
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: rgba(0, 0, 0, 0);
  }

  ::-webkit-scrollbar:hover {
    width: 8px;
    height: 8px;
    background-color: rgba(0, 0, 0, 0.06);
  }

  ::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 20px;
  }

  ::-webkit-scrollbar-thumb:active {
    border-radius: 20px;
  }
}

form label {
  z-index: 99;
}

body.no-animate *,
body.no-animate *::before,
body.no-animate *::after {
  transition: none !important;
  animation: none !important;
}

button:focus {
  outline: none;
}

:focus {
  outline-color: transparent;
}

.fc-scrollgrid-section-liquid {
  height: 1px !important;
}

/* BasicInfoTab and OrdersTable container styles */
body:not(.dark) .products-tab-container {
  background-color: #EEEEEE !important;
}
body.dark .products-tab-container {
  background-color: #1C1C1C !important;
}
body:not(.dark) .orders-table-container {
  background-color: #FFFFFF !important;
}
body.dark .orders-table-container {
  background-color: #1C1C1C !important;
}