/* Import Montserrat font from Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap");

body * {
  font-family: Montserrat, sans-serif;
}

.export-btn,
button.export {
  font-weight: 700;
  border-radius: 21.5px;
  /* min-width: 122px; */
  height: 43px;
  text-transform: capitalize;
  background-color: #153980;
  color: #fff;
  padding: 6px 12px 4px;
}

#react-entry-point {
  background-color: #f5f5f8 !important;
}

#page-content {
  padding: 0%;
  background-color: #f5f5f8;
}

/* .col-12 {
  padding: 9px;
} */

.tab {
  background-color: #d8dce5 !important;
  color: #040865 !important;
  margin-right: 5px !important;
  /* Add margin to the right */
}

.tab--selected {
  background-color: #153980 !important;
  color: #ffffff !important;
  font-weight: bold !important;
  border-top-left-radius: 15px !important;
  border-top-right-radius: 15px !important;
}

/* Apply Montserrat font to table headers */
.dash-table-container
  .dash-spreadsheet-container
  .dash-spreadsheet-inner
  table
  th {
  font-family: "Montserrat", sans-serif;
  color: #ffffff;
}

.dash-fixed-content {
  overflow: auto !important;
  border-radius: 20px;
  margin-right: 3px;
}

/* .btn {
    background-color: darkred !important;
    color: white !important;
    padding: 10px 20px !important;
    border: none !important;
    border-radius: 5px !important;
    cursor: pointer !important;
} */

.nav-link {
  color: #040865;
}

#app_logo {
  width: 150px;
}

#tab_3_table_a[data-dash-is-loading="true"] {
  visibility: hidden; /* Hide the content while loading */
  position: relative; /* Ensure relative positioning to position the loader */
}

/* Loader style */
#tab_3_table_a[data-dash-is-loading="true"]::before {
  content: "";
  visibility: visible;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  background-image: url("loader.gif"); /* Path to your loader image */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 100000;
}

/* Fix to prevent Ag-Grid and search bar from disappearing after Reset across all pages */
.ag-root-wrapper,
.ag-header,
.ag-body,
.ag-center-cols-container {
  visibility: visible !important;
  opacity: 1 !important;
  display: block !important;
}

/* Ensure loader does not overlap or hide components unintentionally */
.dash-loading {
  position: relative !important;
}

/* Optional: smooth transition */
.ag-root-wrapper {
  transition: opacity 0.2s ease-in-out;
}

.export {
  font-size: 0 !important;
  height: 24px !important;
  min-width: 50px;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center;
  /* background-image: url('./export-variant.svg'); */
  border-radius: 0 !important;
  border: 0 !important;
}

.column-header-name {
  text-align: center;
  background-color: #153980;
  font-weight: 700;
  font-size: 16px;
  line-height: 30px;
  color: #ffffff;
}

.VirtualizedSelectOption {
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

.dash-cell-value {
  display: block !important;
  text-align: center;
  height: 49px !important;
  align-content: center;
  border-style: hidden !important;
  background-color: #ffffff;
  color: #1c497e !important;
  font-size: 14px;
  font-weight: 400;
  font-family: Montserrat;
  max-width: 200px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  cursor: default !important;
}

.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td {
  text-align: -webkit-center !important;
}

.selectable {
  font-size: 14px;
}

.dash-spreadsheet-menu {
  padding-bottom: 10px;
  justify-content: end !important;
  margin-top: -18px;
  display: none !important;
}

table th:nth-child(1) {
  border-top-left-radius: 15px;
}

table th:last-child {
  border-top-right-radius: 15px;
}

.dash-header {
  border-style: hidden !important;
  height: 46px !important;
}

.dash-cell {
  border-style: none !important;
  border-bottom: 1px solid #a4a4a6 !important;
  padding: 4px 8px !important;
  white-space: inherit !important;
}

.cell--selected {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

table tr:last-child {
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 15px;
  border-bottom: none !important;
}
table tr:last-child .dash-cell {
  border-bottom: none !important;
}

table tr:nth-child(1) {
  position: sticky;
  top: 0 !important;
}

html {
  background: #f5f5f8;
}

#_dash-global-error-container {
  overflow: hidden;
}

.dash-fixed-content::-webkit-scrollbar,
.ag-body-horizontal-scroll-viewport::-webkit-scrollbar,
.VirtualSelectGrid::-webkit-scrollbar,
body::-webkit-scrollbar,
.ag-body-vertical-scroll-viewport::-webkit-scrollbar,
.ag-body.ag-layout-normal::-webkit-scrollbar {
  width: 16px;
  background-color: transparent;
  height: 16px;
}

.dash-fixed-content::-webkit-scrollbar-thumb,
.ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb,
.VirtualSelectGrid::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
.ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb,
.ag-body.ag-layout-normal::-webkit-scrollbar-thumb {
  background-color: #153980;
  border-radius: 5px;
}

.dash-fixed-content::-webkit-scrollbar-track,
.ag-body-horizontal-scroll-viewport::-webkit-scrollbar-track,
.VirtualSelectGrid::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
.ag-body-vertical-scroll-viewport::-webkit-scrollbar-track,
.ag-body.ag-layout-normal::-webkit-scrollbar-track {
  background: #cacddd;
  border-radius: 5px;
}

.VirtualSelectGrid {
  border-radius: 15px;
}

.Select-control {
  background-color: #dee2ea !important;
  color: #040865;
  font-family: Montserrat, sans-serif !important;
  border-radius: 0px !important;
  border: none !important;
  font-size: 16px !important;
  font-weight: 500;
  height: 45px !important;
  border-bottom: 1px solid #1c497e !important;
}

.Select-value-label {
  vertical-align: -webkit-baseline-middle;
}

.dash-tooltip {
  border: 0;
  border-radius: 5px;
  position: absolute;
  z-index: 500;

  .dash-table-tooltip {
    position: relative;
    background-color: transparent;
    max-width: 300px;
    min-width: 300px;
    padding: 2px 10px;
  }

  &[data-attr-anchor="top"] {
    margin-top: 10px;

    &:after,
    &:before {
      bottom: 100%;
      left: 50%;
      border: 0 !important;
      content: " ";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
    }

    &:after {
      border-color: unset;
      border-bottom-color: unset;
      border-width: 8px;
      margin-left: -8px;
    }

    &:before {
      border-color: unset;
      border-bottom-color: unset;
      border-width: 9px;
      margin-left: -9px;
    }
  }

  &[data-attr-anchor="bottom"] {
    margin-bottom: 10px;

    &:after,
    &:before {
      top: 100%;
      left: 50%;
      border: 0 !important;
      content: " ";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
    }

    &:after {
      border-color: unset;
      border-top-color: unset;
      border-width: 8px;
      margin-left: -8px;
    }
    &:before {
      border-color: unset;
      border-top-color: unset;
      border-width: 9px;
      margin-left: -9px;
    }
  }
}

.dash-table-tooltip {
  padding: 6px 0 !important ;
  cursor: pointer !important;
}
.dash-table-tooltip p {
  margin-top: 0 !important;
  margin-bottom: 0rem !important;
  display: flex !important;
  align-self: center !important;
}
.Select-input {
  height: 43px !important;
  display: flex !important;
  align-items: end !important;
}

.Select-menu-outer {
  border-radius: 15px !important;
  background-color: #f4f4f4 !important;
  color: #1c497e !important;
  border-bottom-right-radius: 15px !important;
  border-bottom-left-radius: 15px !important;
  margin-top: 10px !important;
}

/* .dash-dropdown .Select-menu {
    min-height: 120px !important;
} */
.Select-menu-outer * {
  font-weight: 500;
}
.Select-placeholder {
  align-self: center !important;
}

.VirtualizedSelectFocusedOption {
  background-color: #d8dce5 !important;
}

.VirtualizedSelectSelectedOption {
  background-color: #d8dce5 !important;
}

.label-name {
  color: #1c497e !important;
  font-size: 16px !important;
  padding-left: 10px;
}

.user-select-none {
  min-height: 347px !important;
  height: 0px !important;
}

.Graph-title {
  background: white;
  position: relative;
  display: flex;
  flex-direction: row;
  padding: 0;
  border-radius: 20px;
  overflow: hidden;
}
.dash-graph {
  width: 100%;
}
.title-name {
  color: #ffffff;
  list-style-type: none;
  transform: rotate(180deg);
  width: 59px !important;
  align-content: center !important;
  font-family: Montserrat;
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
  text-align: center;
}

.title-container {
  writing-mode: vertical-lr;
  background: #153980 !important;
  position: relative;
  z-index: 9;
  text-decoration: none;
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
}
.title-container ul {
  position: relative;
  z-index: 9;
  padding-left: 0;
  padding-top: 1rem;
  margin-left: 0;
  margin-right: 0;
}
.DateRangePickerInput {
  background-color: #dee2ea !important;
}
.DateRangePickerInput__withBorder {
  border: none !important;
}
.DateInput_input__focused {
  border-bottom: none;
}
.custom-date-picker {
  border-bottom: 1px solid #040865;
  display: block !important;
  background-color: #dee2ea;
}
.DateInput_input {
  background-color: #dee2ea !important;
  color: #1c497e !important;
  font-weight: 500 !important;
  font-size: 14px !important;
}
.row-class {
  height: 104px;
  background: #dee2ea !important;
  border-radius: 20px;
  margin-right: 18px;
  margin-left: 0px !important;
}
.select-class {
  align-content: center !important;
}
.xtick > text,
.ytick > text {
  font-weight: 500 !important;
}
.budget-row {
  border-radius: 20px;
  display: contents !important;
}
.budget-row #csv-button{margin-right: -25px !important;margin-top: -10px;}
.budget-row .graph-box-shadow{margin-top: 0px;}
.search-button{margin-right: -24px;}
.is-focused .Select-control {
  box-shadow: none !important;
}
.column-actions {
  display: none !important;
}
/* .budget-grid {
  padding-left: 1% !important;
} */
.Select-value-label {
  color: #1c497e !important;
  font-weight: 500;
  font-size: 14px;
  font-family: Montserrat;
}
.Select-clear {
  display: none !important;
}
.CalendarDay__selected,
.CalendarDay__selected_span {
  background-color: rgba(164, 189, 255, 0.4) !important;
  border: 1px solid #153980 !important;
  color: #1c497e !important;
}
.dash-debug-menu,
.dash-debug-menu__outer {
  display: none !important;
}
.DayPickerKeyboardShortcuts_show__bottomRight {
  display: none !important;
}
#filter_customer_price_summary {
  min-width: 464px !important;
}
.Select-clear-zone {
  display: none !important;
}
.plugin-editable {
  display: none;
}
.js-plotly-plot .plotly .cursor-crosshair,
.js-plotly-plot .plotly .cursor-ew-resize,
.js-plotly-plot .plotly .cursor-w-resize {
  cursor: pointer !important;
}
.js-plotly-plot .legend .traces .legendtoggle {
  cursor: default !important;
}
.dash-table-container
  .dash-spreadsheet-container
  .dash-spreadsheet-inner
  td.focused {
  border-bottom: 1px solid #a4a4a6 !important;
}
.input-group {
  display: block;
  height: 43px;
}
.search-icon {
  background-image: url("../assets/search.svg");
  background-repeat: no-repeat;
  background-position: left 7px center;
}
.input-group-text {
  width: 100% !important;
  text-align: justify;
  display: flex;
  align-items: center;
  height: 42px;
  width: 567px;
  border-radius: 10px !important;
  background-color: #fffdfd;
  border: 2px solid #5a76bb;
  padding-left: 35px;
}
.advance-filter {
  display: flex;
  flex-direction: row;
  column-gap: 16px;
  width: 100%;
  margin-bottom: 3px;
}
.search-button {
  display: flex;
  flex: 1;
  gap: 18;
  justify-content: flex-end;
}
/* .search-reset-button {
  min-width: 122px;
  height: 43px;
} */
.search-hide {
  display: none;
}
.btn-primary {
  border-radius: 21.5px;
  min-width: 122px;
  height: 43px;
  text-transform: capitalize;
  background-color: #153980;
  color: #fff;
  border: none;
  font-weight: 700;
  font-size: 16px;
}
.btn-outline-primary,.btn:hover {
border-radius: 16px;
    min-width: 132px;
    height: 40px;
    text-transform: capitalize;
    background: none;
    color: #153980;
    border: 2px solid #153980;
    padding: 8px 12px;
    line-height: 15px;
    font-weight: 700;
}
/* .btn:hover {
  color: #153980;
  background-color: transparent;
  border-color: transparent;
} */
.btn-primary:hover {
  background-color: #153980 !important;
  color: #fff !important;
}
.btn:first-child:active {
  background-color: #adadad !important;
}
.advanced-search-btn {
  border-radius: 10px !important;
  background-color: #dee2ea !important;
  color: #1c497e !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  padding: 9px 15px !important;
  margin-left: -22px;
}
.shadow-sm {
  box-shadow: none !important;
}
.form-control:focus {
  border: 2px solid #5a76bb;
  box-shadow: none;
}
.list-data {
  border-radius: 15px;
  background-color: #f4f4f4;
  color: #1c497e !important;
  box-shadow: 0 2px 4px -1px #0000000f, 0 4px 5px #0000000b,
    0 1px 10px #00000009;
  padding: 14px 16px !important;
  margin-top: -18px !important;
}
.tooltip {
  display: none !important;
}
.Select-arrow {
  background-image: url("../assets/arrow.svg") !important;
  border: 0 !important;
  width: 15px !important;
  height: 15px !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
}
.is-open .Select-arrow {
  transform: rotate(180deg) !important;
  background-position: center bottom !important;
  top: 0 !important;
}
.Select-value-icon {
  display: none !important;
}

/* filter count */
.Select-multi-value-wrapper {
  display: flex !important;
}

/*--------------->> Count the filters*/

.Select-multi-value-wrapper {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
  align-items: center;
  max-width: 100%;
}

.Select-multi-value-wrapper .Select-value {
  max-width: 150px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  background-color: transparent !important;
  border: none !important;
  color: #1c497e !important;
  margin-right: 5px !important;
  display: inline-block !important;
  vertical-align: middle;
  line-height: 1.5;
}

/* Add comma after each visible item */
.Select--multi
  .Select-multi-value-wrapper
  .Select-value:not(:last-child)::after {
  /* content: ","; */
  margin-left: 3px;
}

/* Show +N only on the third item */
.Select-multi-value-wrapper .Select-value.has-more::after {
  /* content: ", +" attr(data-more-count); */
  font-weight: 500;
  color: #153980;
  margin-left: 3px;
}

.Select--multi .Select-value {
  display: inline-block !important;
}

.Select--multi .Select-value:nth-child(n + 4) {
  display: none !important;
}

.Select--multi .Select-value:nth-child(3)::after {
  /* content: ", + " attr(data-more-count); */
  font-weight: 500;
  color: #153980;
  margin-left: 3px;
}

/* Ensure plus-count is inline and visible inside the Select-value */
.Select-value .plus-count {
  display: inline;
  white-space: nowrap;
  position: static;
  margin-left: 5px;
}

/* Prevent truncation of the third item showing +N */
.Select-multi-value-wrapper .Select-value.has-more {
  max-width: none !important;
  overflow: visible !important;
  text-overflow: initial !important;
}

/*-----------------------------------------------------------------------------*/

.Select--multi .Select-value-icon:active {
  display: none !important;
}
.advance-filter-search {
  display: none;
  margin-top: 12px;
}
#output-container {
  position: relative !important;
  z-index: 1 !important;
}
.Select-arrow-zone {
  vertical-align: bottom !important;
}
.Select--multi .Select-value {
  vertical-align: bottom !important;
  margin-top: 10px !important;
}
/* .export::after {
    content: 'Export';
    visibility: hidden;
    background-color: rgba(0,0,0,0.9);
    color: #fff;
    text-align: center;
    padding: 3px 7px 4px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    position: relative;
    bottom: 100%;
    left: 0;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.2s;
    top: -34px;
    font-weight: 500;
  }
  .export:hover:after,
  .export:hover::before {
    visibility: visible;
    opacity: 1;
  } */

.form-floating {
  position: relative;
}

.floating-label {
  position: absolute;
  top: 50%;
  left: 0.75rem;
  transform: translateY(-50%);
  transition: all 0.2s ease-in-out;
  pointer-events: none;
  color: #6c757d;
  font-size: 1rem;
}

.form-control:focus + .floating-label {
  top: 0;
  font-size: 0.75rem;
  color: red;
  position: absolute;
  background-color: red;
}

.ag-header-viewport {
  background-color: #153980;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.ag-header-cell-text {
  color: #ffffff;
  font-weight: 700;
  font-size: 16px;
  text-align: center;
}
.ag-header-cell {
  width: auto;
  white-space: normal;
  word-wrap: break-word;
}
.ag-root-wrapper {
  border: 0 !important;
}
.ag-header-cell-resize {
  display: none !important;
}

/* Fix for Total Savings column width */
.ag-cell[col-id="Total Savings"] {
  min-width: 160px !important;
  white-space: nowrap !important;
}

#csv-button {
  font-size: 0 !important;
  height: 24px !important;
  min-width: 50px;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center;
  background-image: url("./export-variant.svg") !important;
  border-radius: 0 !important;
  border: 0 !important;
 margin-right: -50px ;
}

.ag-cell {
  text-align: center;
  color: #1c497e;
  font-size: 14px;
  font-weight: 400;
  font-family: Montserrat;
  display: block;
  align-content: center;
}

.ag-cell-label-container {
  display: flex;
  justify-content: center !important;
  flex-direction: row-reverse !important;
  align-items: center !important;
  height: 100%;
  width: 100%;
  padding: 5px 0px;
}
.ag-header-cell-label {
  justify-content: center !important;
  text-align: center !important;
}

.ag-label {
  font-size: 15px;
  font-weight: 700;
  color: #153980;
  font-family: Montserrat, sans-serif;
}

.ag-icon {
  color: #ffffff !important;
}
.ag-picker-field-wrapper:focus-within {
  box-shadow: none !important;
}
.ag-picker-field-wrapper {
  border-radius: 10px !important;
  border: 2px solid #153980 !important;
  margin-bottom: 0 !important;
  width: 76px !important;
  height: 30px !important;
  background-color: #fff !important;
  padding: 0 4px 0 18px !important;
  color: #153980 !important;
  font-size: 16px !important;
}

.ag-icon-small-down {
  color: #153980 !important;
  font-weight: 400 !important;
  background-image: url("./arrow.svg");
  background-repeat: no-repeat;
  background-position: center center !important;
  top: 0 !important;
}

.ag-icon-small-down::after,
.ag-icon-small-down::before {
  content: none !important;
}

.ag-has-popup-positioned-under .ag-icon-small-down {
  transform: rotate(180deg) !important;
}
.ag-paging-panel {
  background-color: #f5f5f8;
  border-top: 0 !important;
  padding-top: 18px !important;
}
.ag-row-odd {
  background-color: #ffffff !important;
}
.ag-row-hover:not(.ag-full-width-row)::before {
  background-color: #ffffff !important;
}
.ag-cell-focus {
  background-color: #ffffff !important;
}
.ag-paging-row-summary-panel {
  color: #153980 !important;
  font-weight: 400 !important;
  font-size: 16px;
}
.ag-paging-page-summary-panel {
  color: #153980 !important;
  font-weight: 400 !important;
  font-size: 16px;
  order: -1;
  margin-right: auto !important;
}
.ag-popup-child {
  background-color: #f4f4f4 !important;
  color: #1c497e !important;
  text-transform: none !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  border-radius: 15px !important;
}
.ag-active-item {
  background-color: #d8dce5 !important;
  color: #1c497e !important;
}
.ag-row {
  height: 57px !important;
  border-bottom: 1px solid #a4a4a6 !important;
}
.ag-row-last {
  border-bottom: 0 !important;
}
.ag-icon-next,
.ag-icon-last,
.ag-icon-previous,
.ag-icon-first {
  color: #153980 !important;
}

/* .ag-body.ag-layout-normal{ max-height: calc(100vh - 200px) !important}

.ag-root-wrapper.ag-layout-normal{ height:auto !important;} */

.ag-tooltip {
  font-family: "Montserrat", sans-serif !important;
  background: #344054 !important;
  opacity: 1 !important;
  font-size: 12px !important;
  line-height: 1.1 !important;
  font-family: "Montserrat", sans-serif;
  padding: 4px 6px 4px !important;
  color: #fff !important;
  border: none !important;
  border-radius: 2px !important;
}

#csv-button::after {
  content: "Export to CSV";
  visibility: hidden;
  background-color: rgba(0, 0, 0, 0.9);
  color: #fff;
  text-align: center;
  padding: 3px 7px 4px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  position: relative;
  bottom: 100%;
  right: 70px;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.2s;
  top: -2px;
  font-weight: 500;
}
#csv-button:hover:after,
#csv-button:hover::before {
  visibility: visible;
  opacity: 1;
}

.ag-root-wrapper-body.ag-layout-normal {
  height: auto !important;
}

.ag-body.ag-layout-normal {
  max-height: calc(100vh - 203px) !important;
  min-height: 50px;
  overflow: auto !important;
}

.dynamic-height + div + .row .ag-body.ag-layout-normal {
  max-height: calc(100vh - 283px) !important;
}

.dynamic-height {
     margin-top: -12px;
    margin-bottom: -16px;
}

#price_adjust_history,
#price-summary,
#budget_summary,
#code_analysis,
#analysis_by_customer,
#budget_forcasting,
#price_history,
#sales_comparison {
  height: auto !important;
}

.ag-header-cell {
  padding-left: 0px !important ;
  padding-right: 0px !important;
}
/*.ag-root-wrapper.ag-layout-normal{ height:auto !important; }*/
/* .ag-sort-indicator-container{ min-width: 22px;} */

.ag-overlay-wrapper {
  display: flex !important;
  justify-content: flex-start !important;
}

.ag-overlay-no-rows-center {
  margin-top: 65px !important;
  text-align: left !important;
  justify-content: flex-start !important;
  margin-left: 20px !important;
  justify-self: flex-start !important;
  align-self: flex-start !important;
}

/* Extra override for the container */
.ag-overlay {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

.ag-filter-no-matches {
  text-align: left !important;
  padding-left: 10px !important;
}

#budget_summary .ag-body-horizontal-scroll-viewport {
  overflow-x: hidden !important;
}
#budget_summary .ag-body-horizontal-scroll {
  height: 0px !important;
  max-height: 0px !important;
  min-height: 0px !important;
}
/* .budget-grid {
  padding-left: 0% !important;
} */
.ag-ltr .ag-cell-focus:not(.ag-cell-range-selected):focus-within {
  border-right-width: 1px !important;
  border-color: transparent !important;
}
.ag-body-horizontal-scroll-viewport {
  overflow: auto !important;
  background: rgb(245, 245, 248) !important;
}
.ag-body-horizontal-scroll {
  overflow: auto !important;
}
#sales_comparison .dash-cell {
  border-style: none !important;
  border-bottom: 1px solid #a4a4a6 !important;
  padding: 4px 8px !important;
  white-space: inherit !important;
}

/* =========== AG-GRID SORT ICON POSITIONING AND HEADER ALIGNMENT =========== */
/* High specificity fix for sorting icons in all ag-Grids */
body
  .ag-root-wrapper
  .ag-header-container
  .ag-header-row
  .ag-header-cell
  .ag-header-cell-comp-wrapper
  .ag-cell-label-container {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;

  white-space: nowrap;
}

/* Ensure text alignment is consistent */
body
  .ag-root-wrapper
  .ag-header-container
  .ag-header-row
  .ag-header-cell
  .ag-header-cell-comp-wrapper
  .ag-cell-label-container
  .ag-header-cell-text {
  text-align: center !important;
  width: 100% !important;
}

/* Force sort indicator to appear near the text on the right */
body
  .ag-root-wrapper
  .ag-header-container
  .ag-header-row
  .ag-header-cell
  .ag-header-cell-comp-wrapper
  .ag-cell-label-container
  .ag-header-cell-label {
  flex-direction: row !important;
  justify-content: center !important; /* Center the content */
  width: 100% !important;
  /* Small gap between text and sort icon */
  align-items: center !important;
}

/* Direct targeting of sort indicator */
body
  .ag-root-wrapper
  .ag-header-container
  .ag-header-row
  .ag-header-cell
  .ag-header-cell-comp-wrapper
  .ag-cell-label-container
  .ag-header-cell-label
  .ag-sort-indicator-container {
  order: 1 !important;
  margin-left: 5px !important; /* Small margin to keep it close to text */
  position: relative !important; /* Ensure proper positioning */
  top: 0 !important;
}

/* Set consistent text alignment for all headers */
.ag-header-cell-label {
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
}

/* All header text should be centered */
.ag-header-cell-text {
  text-align: center !important;
  justify-content: center !important;
  flex: 1 !important;
}

/* Keep sort indicators small and non-disruptive */
.ag-sort-indicator-container {
  order: 1 !important;
  margin-left: 5px !important;
}

/* Ensure the whole header has proper box model */
.ag-header-cell {
  box-sizing: border-box !important;
  padding: 0 !important;
}

/* Make consistent header heights */
.ag-header-row {
  height: auto !important;
}

/*################################################################################################################*/

/* Hide column filter buttons in all ag-Grid tables */
.ag-header-cell-menu-button {
  display: none !important;
}

/* Hide the clickable filter icon in the header */
.ag-icon-menu {
  display: none !important;
}

/* Hide filter popup when somehow activated */
.ag-menu {
  display: none !important;
}

/* Additional selector to ensure all filter-related elements are hidden */
button.ag-icon-filter {
  display: none !important;
}

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

/* Style for disabled pagination buttons - ag-Grid automatically adds .ag-disabled class */
.ag-paging-button.ag-disabled {
  opacity: 0.4 !important;
  pointer-events: none !important;
  cursor: default !important;
}

/* Make the disabled icons more visibly disabled */
.ag-paging-button.ag-disabled .ag-icon {
  color: #807e7e !important;
}

/* Ensure consistent styling with your theme */
.ag-paging-panel .ag-disabled {
  opacity: 0.4 !important;
  background-color: transparent !important;
}

/* Additional style for first and last page buttons */
.ag-paging-button[ref="btFirst"].ag-disabled,
.ag-paging-button[ref="btPrevious"].ag-disabled,
.ag-paging-button[ref="btNext"].ag-disabled,
.ag-paging-button[ref="btLast"].ag-disabled {
  opacity: 0.4 !important;
}

/* Override any conflicting styles to ensure the disabled appearance works */
.ag-theme-alpine .ag-paging-button.ag-disabled,
.ag-theme-balham .ag-paging-button.ag-disabled,
.ag-theme-material .ag-paging-button.ag-disabled {
  opacity: 0.4 !important;
  pointer-events: none !important;
}

/*---------------------------------Advanced search header-------------------------------------------------*/

/* Updated Floating Filter Label Styles */
.floating-filter-container {
  position: relative;
  margin-top: 0px; /* Remove extra margin */
}

/* Style for the label when it's floating */
.floating-filter-label {
  position: absolute;
  left: 0px; /* Align with value text */
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.2s ease;
  pointer-events: none;
  color: #1c497e;
  font-size: 16px;
  font-weight: 400; /* Match regular font weight */
  font-family: Montserrat, sans-serif;
  z-index: 5;
  padding-left: 0px; /* Align with selected value */
}

/* Style for the label when it's active (moved to top) */
.floating-filter-label.active {
  top: -5px; /* Moved closer to the dropdown */
  left: 0px; /* Align with value */
  font-size: 14px;
  background-color: transparent; /* Remove background */
  padding: 0;
  z-index: 10;
  transform: translateY(0);
  color: #1c497e;
  font-weight: 400; /* Match regular font weight */
}

/* Only hide placeholder when a value is selected */
.floating-filter-container.has-value .Select-placeholder {
  opacity: 0 !important;
}

/* Ensure value label is visible and properly styled */
.floating-filter-container.has-value .Select-value-label {
  opacity: 1 !important;
  color: #1c497e;
  font-weight: 400; /* Match reference */
  font-size: 16px;
  padding-left: 0px; /* Align with label */
}

/* Make dropdown value properly positioned */
.floating-filter-container .Select-value {
  position: absolute;
  padding-left: 0px !important; /* Align with label */
  z-index: 1;
  margin-top: 0 !important;
  padding-top: 8px !important;
}

/* Ensure dropdown control matches reference */
.floating-filter-container .Select-control {
  z-index: 1;
  background-color: transparent !important;
  border: none !important;
  border-bottom: 1px solid #1c497e !important;
  padding-left: 0px !important; /* Align with label */
}

/* Make dropdown options container visible */
.Select-menu-outer {
  z-index: 1001 !important;
}

/* Handle placeholder styling */
.floating-filter-container .Select-placeholder {
  opacity: 1;
  transition: opacity 0.2s ease;
  padding-left: 0px !important; /* Align with label */
}

/* Style for focused state */
.floating-filter-container .is-focused {
  box-shadow: none !important;
}

/* Handle focused dropdown state */
.floating-filter-container .is-focused:not(.has-value) .floating-filter-label {
  top: -5px; /* Match active position */
  font-size: 14px;
  background-color: transparent;
  padding: 0;
  z-index: 10;
  transform: translateY(0);
  font-weight: 400;
}

/* Adjust dropdown container height and styling */
.floating-filter-container .Select-control {
  height: 40px !important;
  padding-top: 0 !important;
}

/* Align dropdown value */
.floating-filter-container .Select-value {
  line-height: 40px !important;
}

/* Position placeholder text */
.floating-filter-container .Select-placeholder {
  top: 50% !important;
  transform: translateY(-50%) !important;
  line-height: normal !important;
}

/* Style dropdown input area */
.floating-filter-container .Select-input {
  height: 40px !important;
  padding-top: 0 !important;
  padding-left: 0px !important; /* Align with label */
}

/* Style dropdown arrow */
.floating-filter-container .Select-arrow-zone {
  padding-right: 0px !important;
}

/* Style row container */
.row-class {
  background-color: transparent !important;
  border-radius: 0 !important;
  padding: 5px 10px !important;
}

/* Adjust year and month display */
#filter_Year_tab_1,
#filter_month_tab_1 {
  padding-left: 0px !important;
}

/*for horizontal slider*/

/* Complete solution for horizontal scrollbar */

/* Remove toggle arrows completely */
#price_adjust_history .ag-horizontal-scroll-toggle,
#price_adjust_history .ag-body-horizontal-scroll .ag-horizontal-scroll-toggle {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  z-index: -1 !important;
}

/* Force horizontal scrollbar to be visible */
#price_adjust_history .ag-body-horizontal-scroll {
  /* display: block !important; */
  height: 16px !important;
  min-height: 16px !important;
  max-height: 16px !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow-x: auto !important;
  border-top: 1px solid #e2e2e2 !important;
}

/* Ensure scrollbar viewport is visible */
#price_adjust_history .ag-body-horizontal-scroll-viewport {
  overflow-x: scroll !important;
  height: 16px !important;
  min-height: 16px !important;
  display: block !important;
  visibility: visible !important;
}

/* Ensure ag-hidden doesn't hide the scrollbar */
#price_adjust_history .ag-body-horizontal-scroll.ag-hidden {
  display: block !important;
  visibility: visible !important;
  height: 16px !important;
}

/* Match scrollbar style with vertical scrollbar */
#price_adjust_history .ag-body-horizontal-scroll-viewport::-webkit-scrollbar {
  height: 16px !important;
  background-color: transparent !important;
}

#price_adjust_history
  .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb {
  background-color: #153980 !important;
  border-radius: 5px !important;
}

#price_adjust_history
  .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-track {
  background: #cacddd !important;
  border-radius: 5px !important;
}

#export-button-div {
  margin-top: 10px;
  text-align: end;
  height: auto;
  opacity: 0;
  pointer-events: none;
}

#export-button-div.visible {
  opacity: 1;
  pointer-events: auto;
}
.hoverlayer .hovertext text {
  line-height: 1.3 !important;
}

.hoverlayer .hovertext {
  padding: 50px !important;
  rx: 50px !important; /* Rounded corners */
  ry: 50px !important;
}
.DateRangePicker_picker.DateRangePicker_picker_1.DateRangePicker_picker__directionLeft.DateRangePicker_picker__directionLeft_2 {
  z-index: 9999 !important;
}
#tab_2_table[data-dash-is-loading="true"] {
  visibility: hidden; /* Hide the content while loading */
  position: relative; /* Ensure relative positioning to position the loader */
}

/* Loader style */
#tab_2_table[data-dash-is-loading="true"]::before {
  content: "";
  visibility: visible;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  background-image: url("loader.gif"); /* Path to your loader image */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 100000;
}

#salescomparison[data-dash-is-loading="true"] {
  visibility: hidden; /* Hide the content while loading */
  position: relative; /* Ensure relative positioning to position the loader */
}

/* Loader style */
#salescomparison[data-dash-is-loading="true"]::before {
  content: "";
  visibility: visible;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  background-image: url("loader.gif"); /* Path to your loader image */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 100000;
}

#spend_cube_table[data-dash-is-loading="true"] {
  visibility: hidden; /* Hide the content while loading */
  position: relative; /* Ensure relative positioning to position the loader */
}

/* Loader style */
#spend_cube_table[data-dash-is-loading="true"]::before {
  content: "";
  visibility: visible;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  background-image: url("loader.gif"); /* Path to your loader image */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 100000;
}

#tab_1_table[data-dash-is-loading="true"] {
  visibility: hidden; /* Hide the content while loading */
  position: relative; /* Ensure relative positioning to position the loader */
}

#tab_1_table[data-dash-is-loading="true"]::before {
  content: "";
  visibility: visible;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  background-image: url("loader.gif"); /* Path to your loader image */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 100000;
}

#budget_summary[data-dash-is-loading="true"] {
  visibility: hidden; /* Hide the content while loading */
  position: relative; /* Ensure relative positioning to position the loader */
}

#budget_summary[data-dash-is-loading="true"]::before {
  content: "";
  visibility: visible;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  background-image: url("loader.gif"); /* Path to your loader image */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 100000;
}

#tab_2_table_1[data-dash-is-loading="true"] {
  visibility: hidden; /* Hide the content while loading */
  position: relative; /* Ensure relative positioning to position the loader */
}

#tab_2_table_1[data-dash-is-loading="true"]::before {
  content: "";
  visibility: visible;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  background-image: url("loader.gif"); /* Path to your loader image */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 100000;
}

#table_price_detail[data-dash-is-loading="true"] {
  visibility: hidden; /* Hide the content while loading */
  position: relative; /* Ensure relative positioning to position the loader */
}

#table_price_detail[data-dash-is-loading="true"]::before {
  content: "";
  visibility: visible;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  background-image: url("loader.gif"); /* Path to your loader image */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 100000;
}

#table_price_summary[data-dash-is-loading="true"] {
  visibility: hidden; /* Hide the content while loading */
  position: relative; /* Ensure relative positioning to position the loader */
}

#table_price_summary[data-dash-is-loading="true"]::before {
  content: "";
  visibility: visible;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  background-image: url("loader.gif"); /* Path to your loader image */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 100000;
}

#sp_pp_data[data-dash-is-loading="true"] {
  visibility: hidden; /* Hide the content while loading */
  position: relative; /* Ensure relative positioning to position the loader */
}

#sp_pp_data[data-dash-is-loading="true"]::before {
  content: "";
  visibility: visible;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  background-image: url("loader.gif"); /* Path to your loader image */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 100000;
}

.filter-label {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #153980 !important;
  margin-bottom: 5px !important;
  display: block !important;
  margin-right: 10px !important;
}

.flex {
  display: flex;
}

.Select-value-label {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 100% !important;
  display: block !important;
}

.Select-value {
  max-width: none !important;
  flex: none !important;
  display: flex !important;
  align-items: center !important;
  min-height: 28px !important;
  max-height: 28px !important;
}

.Select-multi-value-wrapper {
  justify-content: space-between !important;
  display: flex !important;
  align-items: center !important;
}

.Select-multi-value-wrapper .Select-value {
  max-width: 280px !important;
  min-width: 0 !important;
  flex-shrink: 1 !important;
}

.Select-multi-value-wrapper:not(.has-more-items) .Select-value {
  max-width: 375px !important;
}
.graph-box-shadow{box-shadow: 
  1px 1px 3px 0 rgba(0, 0, 0, 0.1), 
  1px 1px 2px 0 rgba(0, 0, 0, 0.06);
margin-top: 12px;}
.data-grid-report{margin-top: 12px;}
.hidden{display: none;}
#_pages_content{overflow: hidden !important;}
.export-button{margin-right: -34px !important;}
#price_adjust_history .ag-body.ag-layout-normal{max-height: calc(100vh - 204px) !important}