:root {
  --selectedBackColor: #fe7109;
  --selectedForeColor: #fff;
  --selectedHover: #e56608;
  --tabTextColor: #252129;
  --iconThemeColor: #d27614;
  --tabIconSelected: #d27614;
  --tabTextSelectedColor: var(--tabIconSelected);
  --app-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  
  
}

body,
html {
  margin: 0;
  font-family: var(--app-font) !important;
  height: 100%;
  overflow: hidden;
}

.ltr {
  direction: ltr !important;
}

.left-align {
  text-align: left !important;
}

.dx-theme-material-typography,
.dx-theme-generic-typography,
.dx-widget,
.dx-toast-message,
.dx-toast-content,
.dx-widget input,
.dx-widget textarea {
  font-family: var(--app-font) !important;
}

#username-display {
  z-index: 9999; /* Bring it to the front */
  position: relative; /* Ensure it's on top */
  cursor: pointer;
}

.footer {
  position: fixed;
  text-align: start;
  padding: 0px 5px;
  background-color: white;
  position: absolute;
  bottom: 0;
  inset-inline-end: 0;
  width: 100%;
  font-size: 12px;
  color: #444;
  height: 30px;
  border-top: 1px solid rgba(0, 0, 0, 0.075);
}

.footer p {
  margin: 0;
  padding: 7px;
}

.footer-content {
  display: flex;
  align-items: center; /* Vertically align logo and text */
}

.footer-logo {
  height: 25px;
  margin-right: 10px; /* Space between the logo and the text */
}

.dx-drawer-panel-content {
  padding-bottom: 30px; /* Adjust for footer height */
}

.softwareTitle {
  margin: -40px 40px;
  font-weight: bolder;
  font-size: 18px;
}

.demo-container {
  overflow: visible;
  height: 100%;
}

.flex-container {
  display: flex;
  flex-direction: column;
}

.dx-drawer-content {
  display: flex;
}

#topbar {
  /* box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.08); */
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
  min-height: 60px;
  /* padding: 5px 10px; */
  z-index: 1500; /*for popups*/
}

.dx-accordion-item-title {
  background-color: #f5f5f5 !important;
}

/* .dx-state-hover{
    background-color: #E8E8E8 !important;
} */

.dx-accordion-item {
  box-shadow: none !important;
}

.versionBox {
  position: absolute;
  bottom: 0;
  width: 276px;
  height: 97px;
  font-size: smaller;
  opacity: 0.7;
  box-shadow: -5px 0px 8px -5px rgba(0, 0, 0, 0.1);
}

.shadow-sm {
  -webkit-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

[dir="ltr"] .dx-drawer-panel-content, [dir="rtl"] .sidebar {
  box-shadow: 5px -4px 8px -5px rgba(0, 0, 0, 0.1);
}

[dir="rtl"] .dx-drawer-panel-content, [dir="ltr"] .sidebar {
  box-shadow: -5px -4px 8px -5px rgba(0, 0, 0, 0.1);
}
.padding-16 {
  padding: 16px;
}

.padding-8 {
  padding: 8px;
}

.padding-4 {
  padding: 4px;
}

.dx-treeview-item {
  padding: 5px 1px !important;
}

.dx-header-row {
  background-color: #f5f5f5 !important;
}

.dx-accordion-item-title {
  font-size: 16px !important;
}

/* #hamburger {
  padding-top: 8px;

} */

.dx-treeview-node.dx-state-selected > .dx-treeview-item,
.dx-treeview
  .dx-treeview-node:not(.dx-treeview-item-with-checkbox).dx-state-selected
  > .dx-treeview-item {
  background-color: var(--selectedBackColor);
  color: white;
}

.dx-tabpanel-tabs-position-top.dx-state-focused
  .dx-tabpanel-tab.dx-state-disabled:not(.dx-state-focused) {
  -webkit-border-after: 1px none !important;
  border-block-end: 1px none !important;
}

.dx-tabpanel-tabs-position-bottom.dx-state-focused
  .dx-tabpanel-tab.dx-state-disabled:not(.dx-state-focused) {
  -webkit-border-after: 1px solid var(--selectedBackColor);
  border-block-end: 1px solid var(--selectedBackColor);
}

/*EasyUI Tab Color*/
.tabs li.tabs-selected .tabs-inner {
  color: var(--selectedBackColor) !important;
  border-bottom: 2px solid var(--selectedBackColor) !important;
}
.tabs {
  width: 100% !important;
}

[dir="rtl"] .tabs li .tabs-close {
  left: 0px !important;
  right: auto !important;
}

.tabs-closable {
  padding-right: 18px !important;
}

.tabs-inner:hover {
  background: #f5f5f5 !important;
  border-bottom: 2px solid lightgray !important;
  border-radius: 0 !important;
}

.tabs-tool {
  border-width: 0 0 1px 0 !important;
}

.tab-icon-refresh {
  background-image: url("../image/system/Action_Refresh.svg"); /* Adjust the path */
  background-repeat: no-repeat;
  display: inline-block;
  width: 16px; /* Adjust as needed */
  height: 16px; /* Adjust as needed */
  vertical-align: middle;
}

/* Remove the focus outline (blue border) */
#tab-tools .easyui-linkbutton:focus {
  outline: none;
  box-shadow: none;
}

.tabs-selected .tabs-icon {
  color: var(--tabIconSelected);
}

.tabs-selected .tabs-title {
  color: var(--tabTextSelectedColor);
}

/*.tabs-title.tabs-with-icon {
	 color: var(--tabTextColor); 
}
*/

.dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover > td,
.dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover > tr > td,
.dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused) > td,
.dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused) > tr > td {
  background-color: var(--selectedBackColor) !important;
  color: var(--selectedForeColor) !important;
}

.dx-texteditor.dx-state-active.dx-editor-filled,
.dx-texteditor.dx-state-active.dx-editor-outlined,
.dx-texteditor.dx-state-active.dx-editor-underlined,
.dx-texteditor.dx-state-focused.dx-editor-filled,
.dx-texteditor.dx-state-focused.dx-editor-outlined,
.dx-texteditor.dx-state-focused.dx-editor-underlined {
  border-color: var(--selectedBackColor) !important;
}

.dx-popup-wrapper .dx-state-focused.dx-overlay-content {
  border: 1px solid var(--selectedBackColor) !important;
}

.dx-icon-clear {
  color: lightgray !important;
}

.dx-dialog-message {
  font-family: var(--app-font) !important;
}

.my-custom-theme .dx-button .dx-button-content {
  background-color: var(
    --selectedBackColor
  ) !important; /* Use !important to ensure override */
}

.icon-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 10px;
  padding: 10px;
}
.icon-item {
  text-align: center;
  cursor: pointer;
  padding: 5px;
  border: 1px solid transparent;
  transition: border-color 0.3s ease;
}
.icon-item:hover {
  border-color: #ccc;
}
.icon-item i {
  font-size: 24px;
  display: block;
}
.icon-item span {
  font-size: 12px;
  display: block;
  margin-top: 5px;
}

.panel-body.panel-body-noheader.panel-body-noborder {
  overflow-y: hidden !important;
}

.dx-icon-spindown:before {
  color: #333 !important;
}

.burlywood-icon .dx-icon {
  color: var(--iconThemeColor) !important;
}

.black-icon .dx-icon {
  color: black !important;
}

.orange-icon .dx-icon {
  color: #fe7109 !important;
}

.cornflowerblue-icon .dx-icon {
  color: cornflowerblue !important;
}

.darkgray-icon .dx-icon {
  color: darkgray !important;
}

.monacoEditorContainer {
  direction: ltr !important;
}

.dx-button-mode-text .dx-icon {
  color: darkgray !important;
}

.dx-treeview-item .dx-treeview-item-content .dx-icon {
  font-size: 20px !important;
}

.dx-loadindicator-icon {
  inset-inline-start: 0 !important;
  width: 100% !important;
}

.custom-focused-cell {
  border: 2px dotted darkgray !important; /* Highlight with a border */
}

.dx-button-mode-contained.dx-button-default.dx-state-focused {
  background-color: var(--selectedBackColor) !important;
}

.dx-button-mode-contained.dx-button-default.dx-state-hover {
  background-color: var(--selectedHover) !important;
}

.dx-button-mode-contained.dx-button-default {
  background-color: var(--selectedBackColor) !important;
  border-color: transparent;
  color: #fff;
}

.custom-toast {
  font-size: 14px;
  font-weight: 100;
}

.dx-toast-error {
  background-color: #e81123 !important;
}

.dx-button-has-icon .dx-button-content,
.dx-button-has-text .dx-button-content {
  padding-block: 6px !important;
}

.dx-icon-column-chooser {
  color: var(--iconThemeColor) !important;
}

.dx-icon-export {
  color: var(--iconThemeColor) !important;
}

.dx-icon-xlsxfile {
  color: green !important;
}

.dx-icon-pdffile {
  color: #db0001 !important;
}

.dx-icon-exportselected {
  color: var(--iconThemeColor) !important;
}

#splash-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  display: flex;
  justify-content: center; /* Centers content horizontally */
  align-items: center; /* Centers content vertically */
  z-index: 10000;
}

.logo {
  position: relative;
  display: flex;
  flex-direction: column; /* Stack circle and text vertically */
  align-items: center; /* Align content in center */
}

.circle {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #ff6600;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 16px;
  font-weight: bold;
}

/* Outer animated circle */
.circle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px; /* Adjust width of outer circle */
  height: 120px; /* Adjust height of outer circle */
  border: 5px solid #ff6600;
  border-radius: 50%;
  border-left-color: transparent;
  border-right-color: transparent;
  animation: spin 1.5s linear infinite; /* Outer circle animation */
  transform: translate(-50%, -50%); /* Center the outer circle */
}

/* Text below the circle */
.logo p {
  margin-top: 30px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}

/* Spin animation for the outer circle */
@keyframes spin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg); /* Ensure translate is there */
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg); /* Complete 360-degree spin */
  }
}

/* Scrollbar styles for WebKit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 10px; /* Width of the scrollbar */
  height: 10px; /* Height for horizontal scroll */
}

::-webkit-scrollbar-track {
  background: #f0f0f0; /* Light gray background for track */
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  background-color: #c4c4c4; /* Gray color for the scrollbar handle */
  border-radius: 5px;
  border: 2px solid transparent; /* Adds padding between thumb and track */
  background-clip: content-box; /* Ensures thumb fits within scrollbar */
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(212, 46, 17, 0.8); /* Darker gray when hovered */
}

::-webkit-scrollbar-thumb:active {
  background-color: #d42e11; /* Even darker gray when clicked/active */
}

/* Scrollbar styling for Firefox */
body {
  scrollbar-width: thin; /* Thin scrollbar */
  /* scrollbar-color: #c4c4c4 #f0f0f0; Thumb color and track color */
}

/* Container or grid scroll area styling */
.scroll-container {
  max-height: 400px; /* Set height for the scrollable area */
  overflow-y: auto; /* Enable vertical scrolling */
  overflow-x: hidden; /* Hide horizontal scroll (optional) */
  border: 1px solid #dcdcdc; /* Light border similar to DevExpress grids */
  padding: 10px;
  background-color: #fafafa; /* Background color similar to DevExpress */
}