/* Color Palette */
:root {
  --dropdown-selected-bg-color: #dff0db;
  --tab-active: #498e2b;
  --primary-active: #498e2b;
  --tab-hovered: #dfe2e6;
  --border-light-color: #e4e4e4;
  --light-backdrop-bg-color: rgba(0, 0, 0, 0.5);
  --close-icon-light: #888;
  --joy-ride--body: #333;
  --dot-bg-color: #e0e0e0;
  --dot-active-bg-color: #4caf50;
  --back-button-color: #bdbdbd;
  --green-color-4: #3f7b25;
  --message-success-stroke-color: #a5d192;
  --toast-border-error: #f1b5b7;
  --light-theme-text-color: #4a4a4a;
  --dark-theme-text-color: #ffffffde;
  --unapproved-lane-bg: var(--color-orange-100, #fffcf8);
  --navbar-active-border-color: #5cb335;
  ---box-shadow-color: #00000029;
  --grey-50: #727272;
  --navbar-divider-color-all: #727272;
  --input-grey-disabled: #cccccc;
  --kpi-success: #498e2b;
  --badge-success: 73, 142, 43;
  --kpi-error: #cb282e;
  --grey-background: #f7f7f7;
  --grey-background-light: #f7f7f7;
  --grey-background-dark: #3a3838;
  --error-cell-border-color: #e02525;
  --orange-cell-border-color: #b86a0f;
  --purple-cell-border-color: #632494;
  --light-theme-bg: #ffffff;
  --dark-theme-bg: #1f1f21;
  --link-txt-color: #0369a3;
  --toast-dark-border-yellow: #f9d250;
  --kpi-light-box-shadow: #00000029;
  --kpi-dark-box-shadow: transparent;
  --dark-input-placeholder-color: rgba(255, 255, 255, 0.6);
  --light-input-placeholder-color: #8a93a2;
  --dark-input-bg-color: #3a3838;
  --light-input-bg-color: #ffffff;
  --dark-menu-list-bg-color: #2d2c2c;
  --dark-menu-list-setting-bg-color: #242527;
  --light-menu-list-setting-bg-color: #f7fff3;
  --light-options-bg-color: #dff0db;
  --light-options-bg-color-selected: #8dca7e;
  --dark-options-bg-color: #4a4a4a;
  --dark-input-border: 1px solid #4a4a4a;
  --light-input-border: 1px solid #cccccc;
  --input-active-color: #8dca7e;
  --input-active-bg-color: #498e2b;
  --warning-status-text: #b86a0f;
  --input-active-bg-color: #498e2b;
  --menu-hover-text-color: #498e2b;
  --sub-label-color: #929292;
  --light-sub-menu-hover-color: #dff0db;
  --dark-sub-menu-hover-color: #242527;
  --light-menu-shadow: #00000040;
  --dark-menu-shadow: #ffffff40;
  --light-menu-bg-color: #fff;
  --dark-menu-bg-color: #1c1d1f;
  --dark-menu-list-bg-color: #000;
  --light-menu-list-bg-color: #f7fff3;
  --dark-icon-button-text-color: #f1f1f1;
  --light-icon-button-text-color: #4a4a4a;
  --light-icon-color: #727272;
  --dark-icon-color: #f1f1f1;
  --light-accordion-bg-color-landed-cost: #fff;
  --dark-accordion-bg-color-landed-cost: rgba(255, 255, 255, 0.0509803922);
  --message-background: rgb(9 9 11);
  --input-error: #ffd8d8;
  --textarea: #1c1c1c;
  --hts-purple: #632494;
  --cell-border: #babfc7;
  --scenario-amount: #181818;
  --toast-border-background-error: #ffebed;
  --toast-dark-background-yellow: #fec;
  --header-divider: #ccc;
  --color-ag-data-color: #181d1f;
  --Charts-Purple-100: #ede3f4;
  --gen-ai-border-color: #cccccc;
}

.light-theme {
  --dropdown-selected-bg-color: #dff0db;
  --user-message-bg-color: var(--grey-background-light);
  --theme-text-color: var(--light-theme-text-color);
  --scenario-summary-amount: var(--scenario-amount);
  --active-color: var(--input-active-color);
  --active-bg-color: var(--input-active-bg-color);
  --kpi-card-bg: var(--light-theme-bg);
  --input-placeholder-color: var(--light-input-placeholder-color);
  --input-bg-color: var(--light-input-bg-color);
  --input-menu-list-bg-color: var(--light-input-bg-color);
  --input-options-bg-color: var(--light-options-bg-color);
  --input-options-bg-color-selected: var(--light-options-bg-color-selected);
  --input-text-color: var(--dark-input-bg-color);
  --input-border: var(--light-input-border);
  --kpi-box-shadow: 0px 0px 4px 0px var(--kpi-light-box-shadow);
  --menu-list-bg-color: var(--light-menu-list-bg-color);
  --menu-list-setting-bg-color: var(--light-menu-list-bg-color);
  --menu-shadow: var(--light-menu-shadow);
  --menu-bg-color: var(--light-menu-bg-color);
  --menu-hover-color: var(--menu-hover-text-color);
  --sub-menu-hover-color: var(--light-sub-menu-hover-color);
  --cui-success-rgb: var(--badge-success);
  --icon-button-text-color: var(--light-icon-button-text-color);
  --unapproved-lane-bg: var(--color-orange-100, #fffcf8);
  --icon-color: var(--light-icon-color);
  --accordion-bg-color: var(--light-accordion-bg-color-landed-cost);
  --navbar-item-color-border-selected: var(--navbar-active-border-color);
}

.dark-theme {
  --dropdown-selected-bg-color: #dff0db;
  --user-message-bg-color: var(--grey-background-dark);
  --theme-text-color: var(--dark-theme-text-color);
  --scenario-summary-amount: var(--dark-theme-text-color);
  --kpi-box-shadow: 0px 0px 4px 0px var(--kpi-dark-box-shadow);
  --active-color: var(--input-active-color);
  --active-bg-color: var(--input-active-bg-color);
  --input-border: var(--dark-input-border);
  --kpi-card-bg: var(--dark-theme-bg);
  --input-bg-color: var(--dark-input-bg-color);
  --input-options-bg-color-selected: var(--light-options-bg-color-selected);
  --input-text-color: var(--light-input-bg-color);
  --input-placeholder-color: var(--dark-input-placeholder-color);
  --input-menu-list-bg-color: var(--dark-input-bg-color);
  --input-options-bg-color: var(--dark-options-bg-color);
  --menu-shadow: var(--dark-menu-shadow);
  --menu-bg-color: var(--dark-menu-bg-color);
  --menu-list-bg-color: var(--dark-menu-list-bg-color);
  --menu-list-setting-bg-color: var(--dark-menu-list-setting-bg-color);
  --menu-hover-color: var(--menu-hover-text-color);
  --sub-menu-hover-color: var(--dark-sub-menu-hover-color);
  --cui-success-rgb: var(--badge-success);
  --icon-button-text-color: var(--dark-icon-button-text-color);
  --unapproved-lane-bg: rgb(31, 31, 33);
  --icon-color: var(--dark-icon-color);
  --accordion-bg-color: var(--dark-accordion-bg-color-landed-cost) !important;
  --navbar-item-color-border-selected: var(--navbar-active-border-color);
}

.dark-theme .bs-popover-top-start .popover-arrow,
.dark-theme .bs-popover-bottom-start .popover-arrow {
  background-color: #ffffff;
  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
}

.bs-popover-top-start .popover-arrow {
  position: absolute !important;
  left: 20px !important;
  bottom: -5px !important;
  transform: translateX(-50%) !important;
  width: 1rem;
  height: 1rem;
  border-width: 1rem 0.6rem 0;
  background-color: #4a4a4a;
  border-top: 1px solid #4a4a4a;
  border-left: 1px solid #4a4a4a;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.bs-popover-bottom-start .popover-arrow {
  position: absolute !important;
  left: 50% !important;
  top: -7px !important;
  transform: translateX(-50%) !important;
  width: 1.2rem;
  height: 1rem;
  border-width: 1rem 0.6rem 0;
  background-color: #4a4a4a;
  border-top: 1px solid #4a4a4a;
  border-left: 1px solid #4a4a4a;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.common-style, .dark-theme .popover-body.custom-tooltip, .light-theme .popover-body.custom-tooltip, .dark-theme .popover-body, .light-theme .popover-body {
  border-radius: 0.375rem;
  padding: 0.4rem;
  font-weight: 400;
}

.light-theme .popover-body {
  background-color: #4a4a4a;
  color: #ffffff !important;
}

.dark-theme .popover-body img.projectStatusIcon {
  filter: invert(1) !important;
  opacity: 0.8;
}

.light-theme .popover-body img.projectStatusIcon {
  filter: invert(1) brightness(2.2);
  opacity: 1;
}

.light-theme .popover-body span {
  color: rgba(255, 255, 255, 0.8705882353);
}

.dark-theme .popover-body span {
  color: #4a4a4a;
}

.popover-body.dark-text span {
  color: #4a4a4a !important;
}

.dark-theme .popover-body {
  background-color: #ffffff;
  color: #4a4a4a !important;
}

.fileNameDiv {
  margin: 0;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.text-capitalize {
  text-transform: capitalize;
}

.tooltip-default-style {
  font-weight: 400;
  font-size: 0.875rem;
  padding: 0.75rem;
  line-height: 1.125rem;
  width: auto;
}

.tooltip-default-width {
  max-width: 17.375rem;
}

.light-theme .popover-body.custom-tooltip {
  background-color: #ffffff !important;
  color: #4a4a4a !important;
}
.light-theme .popover-body.custom-tooltip span {
  color: #4a4a4a !important;
}

.light-theme .custom-tooltip-theme.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after,
.light-theme .custom-tooltip-theme.bs-popover-end > .popover-arrow::after {
  border-right-color: #ffffff;
}
.light-theme .custom-tooltip-theme.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after,
.light-theme .custom-tooltip-theme.bs-popover-start > .popover-arrow::after {
  border-left-color: #ffffff;
}
.light-theme .custom-tooltip-theme.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after,
.light-theme .custom-tooltip-theme.bs-popover-top > .popover-arrow::after {
  border-top-color: #ffffff;
}
.light-theme .custom-tooltip-theme.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after,
.light-theme .custom-tooltip-theme.bs-popover-bottom > .popover-arrow::after {
  border-bottom-color: #ffffff;
}

.light-theme .popover.custom-tooltip-theme {
  background-color: #ffffff !important;
}
.light-theme .popover.custom-tooltip-theme .popover-body {
  background-color: #ffffff !important;
}

.dark-theme .popover-body.custom-tooltip {
  background-color: #4a4a4a !important;
  color: rgba(255, 255, 255, 0.8705882353) !important;
}
.dark-theme .popover-body.custom-tooltip span {
  color: rgba(255, 255, 255, 0.8705882353) !important;
}

.dark-theme .popover.custom-tooltip-theme {
  background-color: #4a4a4a !important;
}
.dark-theme .popover.custom-tooltip-theme .popover-body {
  background-color: #4a4a4a !important;
}

.dark-theme .custom-tooltip-theme.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after,
.dark-theme .custom-tooltip-theme.bs-popover-end > .popover-arrow::after {
  border-right-color: #4a4a4a;
}
.dark-theme .custom-tooltip-theme.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after,
.dark-theme .custom-tooltip-theme.bs-popover-start > .popover-arrow::after {
  border-left-color: #4a4a4a;
}
.dark-theme .custom-tooltip-theme.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after,
.dark-theme .custom-tooltip-theme.bs-popover-top > .popover-arrow::after {
  border-top-color: #4a4a4a;
}
.dark-theme .custom-tooltip-theme.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after,
.dark-theme .custom-tooltip-theme.bs-popover-bottom > .popover-arrow::after {
  border-bottom-color: #4a4a4a;
}

.w-85 {
  width: 85% !important;
}