.main-page {
  overflow: hidden;
}
#accordion-container {
  margin-top: 0px !important;
}
.dx-multiview-item-content {
  margin-top: 6px;
}
.AppContainerBorderStyle {
  border-style: none !important;
  border-width: 0px;
}

/* Reduce overall DataGrid row height */
.dx-datagrid-rowsview .dx-row > td {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

/* Reduce header height for consistency */
.dx-datagrid-headers .dx-header-row > td {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* Optional: smaller font for compact look */
.dx-datagrid-rowsview,
.dx-datagrid-headers {
  font-size: 13px !important;
}
/* Target only filled TextBoxes */
/*.dx-texteditor.dx-editor-filled {
  border-radius: 12px !important;       
  background-color: #fff !important;    
  border-style:solid !important;              
  border-width: 1px;
  box-shadow: none !important;         
  border-color: #9E9E9E   !important;       
}

.dx-texteditor.dx-editor-filled::before,
.dx-texteditor.dx-editor-filled::after {
  border: none !important;           
  box-shadow: none !important;
}

.dx-texteditor.dx-editor-filled.dx-state-focused {
  background-color: #e0f2ff !important; 
  border: none !important;
  box-shadow: 0 0 0 2px rgba(17, 98, 165, 0.25) !important;  
}

.dx-texteditor.dx-editor-filled .dx-texteditor-input {
  padding: 12px 14px !important;
}*/

/*  
.accordion-height {
  background-color: transparent;
  margin-bottom: 0px;
}

 
.dx-accordion-item {
  border-radius: 12px !important;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15) !important;
  overflow: hidden;
  margin-bottom: 10px;  
  transition: box-shadow 0.3s ease, transform 0.2s ease;
}

 
.dx-accordion-item:hover,
.dx-accordion-item-opened {
  box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.25) !important;
  transform: translateY(-1px);
} */

/* ssssssssssssss */

/* ===== Accordion Styling (DevExtreme-consistent) ===== */
 

/* Base accordion item look */
.dx-accordion-item {
  border-radius: 12px !important;
  border: 1px solid #d3d3d3;
  overflow: hidden;
  transition: all 0.25s ease-in-out;
}
.dx-accordion,
.dx-accordion-item,
.dx-accordion-item-title,
.dx-accordion-item-body {
  box-shadow: none !important;
}
/* Title area spacing */
.dx-accordion-item-title {
  padding: 10px 14px;
  border-bottom: 1px solid #d3d3d3;
  border-top: 1px solid #d3d3d3  !important;
}
.dx-accordion {
  background-color:transparent !important;
}

/* Content area */
.dx-accordion-item-body {
  padding: 12px 16px;
}
.dx-accordion-item-body {
  padding-top: 6px !important;
  padding-bottom: 8px !important;
}
/* ===== DataGrid Styling (matches accordion) ===== */
.dx-datagrid {
  border-radius: 12px !important;
  border: 1px solid #d3d3d3;
  overflow: hidden;
 
}

/* Hover or focus state (optional) */
 

/* Remove internal harsh borders */
.dx-datagrid-headers,
.dx-datagrid-rowsview {
  border: none !important;
}

/* Remove row hover effect - no color change on mouse over */
.dx-datagrid-rowsview .dx-row:hover,
.dx-datagrid-rowsview .dx-row.dx-state-hover {
  background-color: transparent !important;
}

/* Optional: smooth rounded corners for focused elements inside grid */
.dx-datagrid .dx-focus {
  border-radius: 12px;
  border: 1px solid #d3d3d3;
}


/* Override for selected tab background color */
.dx-tab.dx-tab-selected {
  background-color: #FFFFFF !important;
}
/* Remove bottom border for the selected tab */
/* Force selected tab to have white background and no bottom border */
.wm-tab-container .dx-tab.dx-tab-selected {
  background-color: #FFFFFF !important;
  border-bottom: none !important;
  box-shadow: none !important;
  position: relative;
  z-index: 1;
}

/* Remove underline/pseudo element line */
.wm-tab-container .dx-tab::after {
  display: none !important;
}

/* Optional: remove tab strip border */
.wm-tab-container .dx-tabs {
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Optional: remove border from whole tab panel */
.wm-tab-container .dx-tabpanel {
  border-bottom: none !important;
}
/* All tabs: rounded top corners */
/* .wm-tab-container .dx-tab {
  border-radius: 12px 12px 0 0 !important;
} */
/* Container for the tabs */
.dx-tabpanel .dx-tabs-wrapper {
  border-bottom: 1px solid #d3d3d3 !important;
  border: 1px solid #d3d3d3;
  border-radius: 12px;
}


.tab-bar {
  display: flex;
  position: relative;
  background-color: #f5f5f5;
  border-bottom: 1px solid #d3d3d3;
  border: 1px solid #d3d3d3;
  border-radius: 12px;
  padding: 0;
  margin: 0;
  height: 42px;
  margin-bottom: 8px;
}

.tab {
  padding: 6px 12px;
  margin: 0;
  cursor: pointer;
  font-weight: 500;
  font-size: 13px;
  color: rgba(0,0,0,.54);
  border: 1px solid transparent;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-transform: uppercase; /* 🔹 All CAPS */
  transition: all 0.2s ease-in-out;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.tab:hover {
  background-color: #eaeaea;
}
.dx-tab.dx-tab-selected, .dx-tab.dx-tab-selected .dx-icon {
  border-radius: 12px !important;
}
 /* Completely remove the blue/colored underline from selected DevExtreme tab */
.dx-tab.dx-tab-selected::after,
.dx-tab.dx-tab-selected::before,
.dx-tabs-wrapper::after,
.dx-tabs-wrapper::before,
.dx-tabpanel-tabs::after,
.dx-tabpanel-tabs::before {
  display: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Optional: remove the border under the entire tab strip */
.dx-tabs-wrapper,
.dx-tabpanel-tabs {
  border-bottom: none !important;
  box-shadow: none !important;
}
.dx-button {
  border-radius: 12px !important;
}
.tab.active {
  background-color: #ffffff;
  color: #03a9f4;
  font-weight: 500;
  border-radius: 12px;
  border-bottom: none !important;
  box-shadow: none !important;
  z-index: 2;
}
/* Selected tree‑view item */
/* Selected node */


/* Optional: focus highlight */
/* Only apply style to the focused node's .dx-treeview-item */
.dx-treeview-node.dx-state-focused > .dx-treeview-item {
  background-color: #B4DEFF !important;
}

/* Hovered tree‑view item (not selected) */
.dx-treeview-item.dx-state-hover:not(.dx-state-selected),
.dx-treeview-item.dx-state-hover:not(.dx-state-selected) .dx-treeview-item-content {
  background-color: #B4DEFF !important;  /* lighter blue or whatever you choose */
}
/* .dx-texteditor {
  border-top-left-radius: 12px !important;
  border-top-right-radius: 12px !important;
}
 .dx-editor-outlined {
  border-radius: 12px !important; 
} 
 
.dx-editor-outlined .dx-label-before {
  border-start-start-radius: 12px !important;  
  border-end-start-radius: 12px !important;
}

.dx-editor-outlined .dx-label-after {
  border-start-end-radius: 12px !important;   
  border-end-end-radius: 12px !important;
}*/
.dx-toolbar .dx-toolbar-items-container {
  height: 46px !important;
}

/* Fix scroll issue for Advanced Report Tool page */
.search-page-container {
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

.search-page-content {
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

/* Fix grid height for OM Transaction page with TabPanel */
.search-page-container .dx-tabpanel {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  height: 100% !important;
}

.search-page-container .dx-tabpanel .dx-multiview-wrapper {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  height: 100% !important;
}

.search-page-container .dx-tabpanel .dx-multiview-item-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  height: 100% !important;
  padding: 0 !important;
}
 
/* Reset padding for filter popups - exclude from the above rule */
.dx-popup .dx-texteditor-input-container,
.dx-header-filter-menu .dx-texteditor-input-container,
.dx-popup .dx-list .dx-texteditor-input-container,
.dx-header-filter-menu .dx-list .dx-texteditor-input-container,
.dx-popup-wrapper .dx-texteditor-input-container {
  padding-left: 0 !important;
}

/* Fix text alignment in filter popup list items */
.dx-popup .dx-list-item,
.dx-header-filter-menu .dx-list-item,
.dx-popup .dx-list-item-content,
.dx-header-filter-menu .dx-list-item-content {
  padding-left: 10px !important;
}

/* Fix checkbox position for date filter items - ensure checkbox comes before text */
.dx-header-filter-menu .dx-list-item,
.dx-popup .dx-list-item {
  display: flex !important;
  align-items: center !important;
  flex-direction: row !important;
}

.dx-header-filter-menu .dx-list-item-content,
.dx-popup .dx-list-item-content {
  width: 100% !important;
}

/* Target checkbox in various possible locations */
.dx-header-filter-menu .dx-list-item .dx-checkbox,
.dx-popup .dx-list-item .dx-checkbox,
.dx-header-filter-menu .dx-list-item-content .dx-checkbox,
.dx-popup .dx-list-item-content .dx-checkbox,
.dx-header-filter-menu .dx-checkbox,
.dx-popup .dx-checkbox {
  order: -1 !important;
  margin-right: 8px !important;
  flex-shrink: 0 !important;
  margin-left: 0 !important;
}

/* Target text/span elements to come after checkbox */
.dx-header-filter-menu .dx-list-item-content > span:not(.dx-checkbox-icon):not(.dx-icon),
.dx-popup .dx-list-item-content > span:not(.dx-checkbox-icon):not(.dx-icon),
.dx-header-filter-menu .dx-list-item-content > div:not(.dx-checkbox),
.dx-popup .dx-list-item-content > div:not(.dx-checkbox) {
  order: 1 !important;
}

/* Specifically for date filter items with expand icon */
.dx-header-filter-menu .dx-list-item-content .dx-icon-right,
.dx-popup .dx-list-item-content .dx-icon-right {
  order: 2 !important;
  margin-left: auto !important;
}

/* Alternative approach: Use CSS Grid to reorder elements */
.dx-header-filter-menu .dx-list-item-content,
.dx-popup .dx-list-item-content {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Place checkbox in first column */
.dx-header-filter-menu .dx-list-item-content .dx-checkbox,
.dx-popup .dx-list-item-content .dx-checkbox {
  grid-column: 1 !important;
  order: unset !important;
}

/* Place text in second column */
.dx-header-filter-menu .dx-list-item-content > span:not(.dx-checkbox-icon):not(.dx-icon),
.dx-popup .dx-list-item-content > span:not(.dx-checkbox-icon):not(.dx-icon) {
  grid-column: 2 !important;
  order: unset !important;
}

/* Place expand icon in third column */
.dx-header-filter-menu .dx-list-item-content .dx-icon-right,
.dx-popup .dx-list-item-content .dx-icon-right {
  grid-column: 3 !important;
  order: unset !important;
  margin-left: 0 !important;
}

/* Hide expand icons (right arrows) in date filter popups to disable children/hierarchical structure */
.dx-header-filter-menu .dx-list-item-content .dx-icon-right,
.dx-popup .dx-list-item-content .dx-icon-right,
.dx-header-filter-menu .dx-list-item .dx-icon-right,
.dx-popup .dx-list-item .dx-icon-right {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Prevent click events on list items that would expand children */
.dx-header-filter-menu .dx-list-item.dx-list-item-expanded,
.dx-popup .dx-list-item.dx-list-item-expanded {
  pointer-events: none !important;
}

.dx-header-filter-menu .dx-list-item-content,
.dx-popup .dx-list-item-content {
  cursor: default !important;
}

/* ===== Report Grid Layout - Global CSS for pages with Accordion + Grid ===== */
/* This CSS class can be applied to any page with accordion and grid layout */
/* Usage: Add class="reportGrid" to the main container div */

/* Main container - full viewport height with flexbox */
.reportGrid.search-page-container,
.reportGrid .search-page-container {
  height: 100vh !important;
  max-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Content wrapper - flexbox for proper height distribution */
.reportGrid .search-page-content,
.reportGrid.search-page-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Accordion container - takes only the space it needs, doesn't grow */
.reportGrid .search-page-accordion,
.reportGrid.search-page-accordion {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* Accordion item - smooth transitions */
.reportGrid .dx-accordion-item {
  transition: all 0.3s ease !important;
}

/* Toolbar row - fixed size, doesn't grow */
.reportGrid .search-page-content > .row[style*="flex: 0 0 auto"],
.reportGrid .search-page-content > .row:has(.toolbar-holder),
.reportGrid .search-page-content > .row {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}

/* Grid container - grows to fill remaining space after accordion and toolbar */
.reportGrid .search-page-grid-container,
.reportGrid.search-page-grid-container {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-bottom: 10px !important; /* Grid bottom padding */
}

/* Drawer component - fills grid container */
.reportGrid .search-page-grid-container .dx-drawer {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  height: 100% !important;
}

/* Drawer content - fills drawer */
.reportGrid .search-page-grid-container .dx-drawer-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  height: 100% !important;
  padding-bottom: 10px !important; /* Grid bottom padding */
}

/* DataGrid wrapper inside Drawer - fills container */
.reportGrid .search-page-grid-container .dx-drawer-content > div[style*="flex: 1 1 auto"],
.reportGrid .search-page-grid-container .dx-drawer-content > div {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  height: 100% !important;
  padding-bottom: 0 !important; /* Padding handled by parent */
}

/* DataGrid - fills its container and responds to accordion state */
.reportGrid .search-page-grid,
.reportGrid.search-page-grid {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* DataGrid element itself - fills with bottom padding and responds to accordion */
.reportGrid .search-page-grid .dx-datagrid,
.reportGrid.search-page-grid .dx-datagrid {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  margin-bottom: 10px !important; /* Grid bottom padding */
  max-height: 100% !important;
  overflow: hidden !important;
}

/* Ensure toolbar doesn't break layout */
.reportGrid .toolbar-holder {
  min-height: 0 !important;
  height: auto !important;
}

/* Ensure accordion wrapper respects height */
.reportGrid #accordion-container,
.reportGrid .dx-accordion {
  height: auto !important;
  min-height: 0 !important;
}

/* Fix max-width issue for search datasource grid */
.ATConfigurationGridStyle,
.ATConfigurationGridStyle .dx-datagrid,
.ATConfigurationGridStyle .dx-datagrid-wrapper {
  max-width: none !important;
  width: 100% !important;
}

/* Ensure container divs don't restrict width */
div[style*="height: 100%"] .ATConfigurationGridStyle,
div[style*="overflowY: hidden"] .ATConfigurationGridStyle {
  max-width: none !important;
  width: 100% !important;
}

/* Enable filter row inputs in ATConfigurationGridStyle */
.ATConfigurationGridStyle .dx-datagrid-filter-row,
.ATConfigurationGridStyle .dx-datagrid-filter-row * {
  pointer-events: auto !important;
}

/* Fix z-index issue that disables filter row inputs */
.ATConfigurationGridStyle .dx-datagrid-filter-row .dx-menu {
  z-index: auto !important;
}

.ATConfigurationGridStyle .dx-datagrid-filter-row .dx-editor-cell,
.ATConfigurationGridStyle .dx-datagrid-filter-row .dx-texteditor,
.ATConfigurationGridStyle .dx-datagrid-filter-row .dx-texteditor-input,
.ATConfigurationGridStyle .dx-datagrid-filter-row .dx-texteditor-container,
.ATConfigurationGridStyle .dx-datagrid-filter-row .dx-selectbox,
.ATConfigurationGridStyle .dx-datagrid-filter-row .dx-datebox,
.ATConfigurationGridStyle .dx-datagrid-filter-row input,
.ATConfigurationGridStyle .dx-datagrid-filter-row select,
.ATConfigurationGridStyle .dx-datagrid-filter-row button,
.ATConfigurationGridStyle .dx-datagrid-filter-row .dx-button,
.ATConfigurationGridStyle .dx-datagrid-filter-row .dx-dropdownbutton,
.ATConfigurationGridStyle .dx-datagrid-filter-row .dx-icon {
  pointer-events: auto !important;
  cursor: text !important;
  user-select: text !important;
}

.ATConfigurationGridStyle .dx-datagrid-filter-row .dx-texteditor-input:disabled,
.ATConfigurationGridStyle .dx-datagrid-filter-row input:disabled,
.ATConfigurationGridStyle .dx-datagrid-filter-row input[disabled] {
  pointer-events: auto !important;
  cursor: text !important;
  opacity: 1 !important;
  background-color: transparent !important;
}

.ATConfigurationGridStyle .dx-datagrid-filter-row .dx-texteditor.dx-state-disabled,
.ATConfigurationGridStyle .dx-datagrid-filter-row .dx-texteditor.dx-state-readonly {
  pointer-events: auto !important;
  cursor: text !important;
}

.ATConfigurationGridStyle .dx-datagrid-filter-row .dx-texteditor-input {
  pointer-events: auto !important;
  cursor: text !important;
  user-select: text !important;
}
/* Remove border-bottom and add border-radius to tabs in top-positioned tabpanel */
/* Using exact selector with maximum specificity to override DevExtreme CSS */
html body .dx-tabpanel-tabs-position-top > .dx-tabpanel-tabs .dx-tabs,
html body .dx-tabpanel-tabs-position-top > .dx-tabpanel-tabs .dx-tabs.dx-tabs-horizontal,
html body .dx-tabpanel-tabs-position-top > .dx-tabpanel-tabs .dx-tabs.dx-tabs-scrolling-enabled,
html body .dx-tabpanel-tabs-position-top > .dx-tabpanel-tabs .dx-tabs.dx-widget,
body .dx-tabpanel-tabs-position-top > .dx-tabpanel-tabs .dx-tabs,
.dx-tabpanel-tabs-position-top > .dx-tabpanel-tabs .dx-tabs {
  border-bottom: none !important;
  border-bottom-style: none !important;
  border-bottom-width: 0 !important;
  border-bottom-color: transparent !important;
  border-radius: 12px !important;
}

/* Additional selectors for different DOM structures */
.dx-tabpanel-tabs-position-top .dx-tabpanel-tabs .dx-tabs,
.dx-tabpanel-tabs-position-top .dx-tabs-wrapper .dx-tabs,
.dx-tabpanel-tabs-position-top .dx-tabs {
  border-bottom: none !important;
  border-bottom-style: none !important;
  border-bottom-width: 0 !important;
  border-bottom-color: transparent !important;
  border-radius: 12px !important;
}

/* Also target the wrapper to ensure no border */
.dx-tabpanel-tabs-position-top > .dx-tabpanel-tabs,
.dx-tabpanel-tabs-position-top .dx-tabpanel-tabs,
.dx-tabpanel-tabs-position-top .dx-tabs-wrapper {
  border-bottom: none !important;
  border-radius: 12px !important;
}

/* Remove border from pseudo-elements if any */
.dx-tabpanel-tabs-position-top .dx-tabs::before,
.dx-tabpanel-tabs-position-top .dx-tabs::after,
.dx-tabpanel-tabs-position-top .dx-tabpanel-tabs .dx-tabs::before,
.dx-tabpanel-tabs-position-top .dx-tabpanel-tabs .dx-tabs::after {
  border-bottom: none !important;
  display: none !important;
}