/* 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);
}

.classic-tooltip-ref {
  display: inline-flex;
}

.classic-tooltip.tooltip {
  opacity: 1 !important;
  padding: 0 !important;
}
.classic-tooltip.tooltip .tooltip-inner {
  background-color: #4a4a4a;
  color: #ffffff;
  font-family: "Roboto", sans-serif;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.125rem;
  text-align: left;
  padding: 0.5rem;
  border-radius: 0.25rem;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.16);
  max-width: 20rem;
}
.classic-tooltip.tooltip .tooltip-arrow {
  display: block !important;
  position: absolute;
  width: 0.625rem;
  height: 0.375rem;
}
.classic-tooltip.tooltip .tooltip-arrow::before {
  content: "";
  position: absolute;
  border-style: solid;
  border-color: transparent;
}
.classic-tooltip.tooltip[data-popper-placement^=top] .tooltip-arrow {
  bottom: calc(-1 * 0.375rem) !important;
  top: auto !important;
}
.classic-tooltip.tooltip[data-popper-placement^=top] .tooltip-arrow::before {
  top: 0;
  border-width: 0.375rem calc(0.625rem / 2) 0;
  border-top-color: #4a4a4a;
}
.classic-tooltip.tooltip[data-popper-placement^=bottom] .tooltip-arrow {
  top: calc(-1 * 0.375rem) !important;
  bottom: auto !important;
}
.classic-tooltip.tooltip[data-popper-placement^=bottom] .tooltip-arrow::before {
  bottom: 0;
  border-width: 0 calc(0.625rem / 2) 0.375rem;
  border-bottom-color: #4a4a4a;
}
.classic-tooltip.tooltip[data-popper-placement^=left] .tooltip-arrow {
  right: calc(-1 * 0.375rem) !important;
  left: auto !important;
  width: 0.375rem;
  height: 0.625rem;
}
.classic-tooltip.tooltip[data-popper-placement^=left] .tooltip-arrow::before {
  left: 0;
  border-width: calc(0.625rem / 2) 0 calc(0.625rem / 2) 0.375rem;
  border-left-color: #4a4a4a;
}
.classic-tooltip.tooltip[data-popper-placement^=right] .tooltip-arrow {
  left: calc(-1 * 0.375rem) !important;
  right: auto !important;
  width: 0.375rem;
  height: 0.625rem;
}
.classic-tooltip.tooltip[data-popper-placement^=right] .tooltip-arrow::before {
  right: 0;
  border-width: calc(0.625rem / 2) 0.375rem calc(0.625rem / 2) 0;
  border-right-color: #4a4a4a;
}

.classic-tip-start[data-popper-placement^=top] .tooltip-arrow,
.classic-tip-start[data-popper-placement^=bottom] .tooltip-arrow {
  left: 0.5rem !important;
  right: auto !important;
  transform: none !important;
}

.classic-tip-center[data-popper-placement^=top] .tooltip-arrow,
.classic-tip-center[data-popper-placement^=bottom] .tooltip-arrow {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
}

.classic-tip-end[data-popper-placement^=top] .tooltip-arrow,
.classic-tip-end[data-popper-placement^=bottom] .tooltip-arrow {
  left: auto !important;
  right: 0.5rem !important;
  transform: none !important;
}

.classic-tip-start[data-popper-placement^=left] .tooltip-arrow,
.classic-tip-start[data-popper-placement^=right] .tooltip-arrow {
  top: 0.5rem !important;
  bottom: auto !important;
  transform: none !important;
}

.classic-tip-center[data-popper-placement^=left] .tooltip-arrow,
.classic-tip-center[data-popper-placement^=right] .tooltip-arrow {
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
}

.classic-tip-end[data-popper-placement^=left] .tooltip-arrow,
.classic-tip-end[data-popper-placement^=right] .tooltip-arrow {
  top: auto !important;
  bottom: 0.5rem !important;
  transform: none !important;
}