:root {
  --container-heading: #1D1D23;
  --secondary-text: #474747;
  --primary-text: #262626;
  --active-primary-color: #4B525C;
  --dialog-background-base:#15222E;
  --selected-button-text: var(--base-white);
  --background-light-accordian: #2F3D4E;
  --background-light-popup: var(--background-light) !important;
  --chart-axis-color: #d2d2d2;

  /*Device Onboarding*/
  --dialog-header-border-color: var(--neutral-200); /* Default to light mode */
  --tab-button-color: var(--neutral-1200);
  --title-color: var(--neutral-1400); /* Default to light mode */
  --download-button-bg-color: var(--shutdown-color); /* Default to light mode */
  --step-connector-line-light: rgba(0, 0, 0, 0.2); /* Light mode color */
  --step-connector-line-dark: rgba(255, 255, 255, 0.2); /* Dark mode color */
  --step-connector-line-color: var(--step-connector-line-light); /* Default to light mode */
  --form-control-label-color: var(--shutdown-color); /* Default to light mode */
  --input-background-color: var(--base-white); /* Default to
  --radio-button-color-light: #ff8c00; /* Light mode color for radio button */
  --radio-button-color-light: #ff8c00; /* Light mode color for radio button */
  --radio-button-color-dark: #ff8c00; /* Dark mode color for radio button */
  --radio-button-color: var(--radio-button-color-light); /* Default to light mode */

  --checked-primary-color:  var(--primary-500);
  --input-bgc-color: #1F2E41;
  --running-color: #007744;
  --warning-color: #F1E203;
  --warning-text-color: #CE8200;
  --major-color: #E90000;
  --high-color: #EB0909;
  --minor-color: #FF9410;
  --critical-color: #AB0303;
  --shutdown-color: #000000;
  --unreachable-color: #7795FF;
  --could-not-poll-color: #040303;
  --informative-color: #0550DC;
  --good-color: #05AD2C;
  --inactive-color: #A9A9A9;
  --others-color: #262626;
  --hypertext-color: #006075;
  --divider: #0000001F;
  --MenuBackgroundDarkerGrey: #f9f9f9;
  --MenuBackgroundDark: #15222E;
  --popover-border-color: #343B45;
  --color-bg-subtle: #FAFAFA;
  --black-color: #000000;
  --white-color: #fcfcfc;
  --pure-white: #ffffff;
  --scroll-bar-color: #b0b0b0;
  --table-cell-text-color: #000000;
  --gray-placeholder: #EEEEEE;
  --active-primary-color-gray: #808080;
  --gradient-white: #fff;
  --color-bg-subtle: #f9f9f9;
  --radio-group-bg-color: #ccc;
  --custom-textfield-bdr-color: #f44336;
  /* --card-popup-blk-color: #000000de; */
  --containedButtoncolor: #5C5C5C;
  --containedButtonbgcolor: #f4f4f5;
  --gray-bg-container: #fafafa;
  --gray-bg-container-bx-shdw: #0000001A;
  --gray-bg-container-bx-bdr: #0000001F;
  --webkit-scrollbar-shadow: #0000004d;
  --lastsnapshot-text-color: #00000099;
  --link-color: #2563EB;
  --MuiDataGrid-row-bg-color: #E0F7FA; 
  --dflex-font-card-bg-color: #f2f2f2;
  --search-bg-color: #F3F7FF;
  --search-bdr-color: #e7efff;
  --master-box-bg-color: #9c27b0;
  --dflex-bdr-color: #f096ff;
  --bordersearch-bdr-color: #c4c4c4;
  --map-bdr-color: #595959;
  --map-bg-color: #dbe1eb;
  --map-odd-color: #EEF5FF;
  --map-grid-color: #565454f0;
  --map-cell-color: #3c91ff;
  --map-enodeset-color: #00000080;
  --gen-ai-bdr-color: #ECECEC;
  --chatbox-box-shdw: #00000040;
  --chatbox-input: #9B9B9B;
  --chatbox-message-bg-color: #E8E8E8;
  --promt-title-color: #333;
  --promt-item-color: #919191;
  --role-info-value-color: #474747;
  --permission-box-bdr-color: #A9A9A9;
  --container-heading: #1D1D23;
  --light-gray: #d3d3d3;
  --events-bdr-color: #5d5d5d5e;
  --circlesmall-bg-color: #c8329f;
  --vsphare-bg-color: #44339F;
  --huaweince-bg-color: #D694F9;
  --prtg-bg-color: #E753BF;
  --huaweimae-bg-color: #7FA1C3;
  --custom-scrollbar-bg-color: #8a8a8a;
  --gridcontainer-bg-color: #f0f0f0;
  --dflexrunsearch-bdr-color: #e0e0e0;
  --dflexrunsearch-bg-color: #FAFBFC;
  --button4-bg-color: #1b1f2326;
  --button4-box-shadow-color: #1b1f230a;
  --button4-box-shadow-color2: #ffffff40;
  --button4-disable-bg-color: #F3F4F6;
  --button4-disable-color: #24292E;
  --button4-disable-color2: #959DA5;
  --button4-active-color: #EDEFF2;
  --button4-active-box-shadow: #e1e4e833;
  --iconindividual-bg-color: #0862b0;
  --check-bg-color: #efffec;
  --indicator-closed: #BBCEFB;
  --status-dropdown-bd-color: #0078d4;
  --boxdrag-shadow-color: #00000026;
  --sorticonsvg-color: #818181;
  --placeholder-color: #00000061;
  --dflex-hover: #0000000a;
  --down-color: #9E9E9E;
  --textcriticalov-color: #D32F2F;
  --text-running-color: #2E7D32;
  --reportcard-bg-color: #b0b0b033;
  --chip-border-color: #D0D0D0;
  --chip-gradient-color: #F2F4F5;
  --chip-gradient-color2: #f2f4f500;
  --pure-red: #ff0000;
  --modal-message-blue-color: #01539B;
  --med-chip-bg-color: #EFF6FF;
  --gray-shadow-card-bg-color: #F6F6F6;
  --button-color: var(--primary-500);
  --color-start: #ee973f;
  --color-end: #f6bf0c;
  --disabled-color: #0000;
  --custom-box-color: #C6C6C6;
  --condition-bdr-color: #ddd;
  --muiDataGrid-Bg-Color: #f5f5f5;
  --threshold-bg-color: #1A2027;
  --sidenav-scroll-color: #8a8a8a;
  --primary-searchbar-bg-color: #f9f9f9;
  --sidebar-nav-item-color: #DAE1E6;
  --background-row-even: #F8FAFC;

/* fonts variable */

--main-font-family: 'Inter';
--main-font: Inter;
--font-weight-300: 300;
--font-weight-400: 400;
--font-weight-500: 500;
--font-weight-600: 600;
--font-weight-700: 700;
--font-size-16: 16px;
--font-size-24: 24px;
--font-size-40: 40px;
--font-size-50: 50px;
--primary-height-55: 64px;
  /* Add this line */

}

.informativeColor {
  color: var(--content-info) !important;
}

.warningTextColor {
  color: var(--content-notice) !important;
}

.criticalColor {
  color: var(--active-negativeactive) !important;
}

.majorColor {
  color: var(--content-negative) !important;
}

.minorColor {
  color: var(--content-notice) !important;
}

.warningColor {
  color: var(--content-notice) !important;
}

.goodColor {
  color: var(--content-positive) !important;
}


.shutdownColor {
  color: var(--shutdown-color) !important;
}

.width80per {
  width: 80%;
}

.warningBgColor {
  background-color: var(--content-notice) !important;
}

.criticalBgColor {
  background-color: var(--active-negativeactive) !important;
}

.majorBgColor {
  background-color: var(--content-negative) !important;
}

.minorBgColor {
  background-color: var(--content-notice) !important;
}

.goodBgColor {
  background-color: var(--content-positive) !important;
}
.informativeBgColor {
  background-color: var(--content-info) !important;
}

.shutdownBgColor {
  background-color: var(--shutdown-color) !important;
}



.arrowiconswhitedb {
  color: #000000;
  font-size: 2rem !important;
  /* margin-top: 15px; */
}

.arrowiconswhitedb-right {
  float: right !important;
}

.arrowiconswhitedb-center {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.svg-fill-critical {
  fill: var(--critical-color) !important;
}

.svg-fill-warning {
  fill: var(--warning-color) !important;
}

.svg-fill-good {
  fill: var(--good-color) !important;
}

.svg-fill-shutdown {
  fill: var(--shutdown-color) !important;
}

.svg-fill-unreachable {
  fill: var(--shutdown-color) !important;
}

.svg-fill-critical {
  fill: var(--critical-color) !important;
}

.svg-fill-warning {
  fill: var(--warning-color) !important;
}

.svg-fill-good {
  fill: var(--good-color) !important;
}

.svg-fill-shutdown {
  fill: var(--shutdown-color) !important;
}

.svg-fill-unreachable {
  fill: var(--shutdown-color) !important;
}

.formprimarycolor {
  color: var(--active-primary-color) !important;
}
.hiveMenuItem {
 font-size: 16px !important;
 text-overflow: ellipsis;
 overflow: hidden;
}
.hive-home-submenu-list{
  width:85% !important;
  margin: auto !important;
  box-shadow: none !important;
  border-radius: none !important;
  background-color: transparent !important;
 
}


/* hive theme css variables */
:root {

  /* Units */
--unit-2: 2px;
--unit-4: 4px;
--unit-8: 8px;
--unit-10: 10px;
--unit-12: 12px;
--unit-14: 0.875rem;
--unit-16: 16px;
--unit-18: 18px;
--unit-20: 20px;
--unit-24: 24px;
--unit-26: 26px;
--unit-28: 28px;
--unit-32: 32px;
--unit-36: 36px;
--unit-40: 40px;
--unit-48: 48px;
--unit-56: 56px;
--unit-64: 64px;
--unit-72: 72px;
--unit-80: 80px;
--unit-88: 88px;
--unit-96: 96px;
--unit-104: 104px;
--unit-112: 112px;
--unit-120: 120px;
--count: 0px;

  /* // Spacing */
--space-2xs: 2px;
--space-xs: 4px;
--space-s: 8px;
--space-m: 12px;
--space-l: 16px;
--space-xl: 24px;
--space-2xl: 32px;
--space-3xl: 40px;
--space-4xl: 48px;
--space-5xl: 56px;
--space-6xl: 64px;
--space-7xl: 72px;
--space-8xl: 80px;
--space-9xl: 88px;
--space-10xl: 96px;
--space-11xl: 104px;
--space-12xl: 112px;
--space-none: 0px;
/* // Layout */

--breakpoint-xxxl: 1920px;
--breakpoint-xxl: 1440px;
--breakpoint-xl: 1200px;
--breakpoint-l: 992px;
--breakpoint-m: 768px;
--breakpoint-s: 576px;

/* // Borders */

--radius-circle: 50%;
--radius-pill: 999px;
--radius-l: 16px;
--radius-m: 12px;
--radius-s: 8px;
--radius-xs: 4px;
--radius-none: 0px;

--width-xl: 8px;
--width-l: 4px;
--width-m: 2px;
--width-s: 1.5px;
--width-xs: 1px;

/* // Primitive: Type */
--weight-regular: Regular;
--weight-semibold: 600;
--weight-italic: Italic;
--weight-light: 300;
--family-inter: Inter;
--family-sfprotext: SF Pro Text;
--family-roboto: Roboto;
--size-menu_list: '12.5px';
--size-xs: var(--unit-10);
--size-s: var(--unit-12);
--size-m: var(--unit-14);
--size-l: var(--unit-16);
--size-xl: var(--unit-18);
--size-2xl: var(--unit-20);
--size-3xl: var(--unit-24);
--size-4xl: var(--unit-28);
--size-5xl: var(--unit-32);
--size-6xl: var(--unit-40);
--size-7xl: var(--unit-48);
--size-8xl: var(--unit-56);
--size-9xl: var(--unit-64);
--size-10xl: var(--unit-72);
--lineheight-xs: var(--unit-14);
--lineheight-s: var(--unit-16);
--lineheight-m: var(--unit-20);
--lineheight-l: var(--unit-24);
--lineheight-xl: var(--unit-26);
--lineheight-2xl: var(--unit-28);
--lineheight-3xl: var(--unit-32);
--lineheight-4xl: var(--unit-36);
--lineheight-5xl: var(--unit-40);
--lineheight-6xl: var(--unit-48);
--lineheight-7xl: var(--unit-56);
--lineheight-8xl: var(--unit-64);
--lineheight-9xl: var(--unit-72);
--lineheight-10xl: var(--unit-80);
--letterspacing-xs: -1;
--letterspacing-s: -0.5;
--letterspacing-none: 0;

/* // Semantic Type */

--breakpoint: var(--breakpoint-xl);
--family: var(--family-inter);
--heading-5xl-semibold-weight: var(--weight-semibold);
--heading-5xl-semibold-size: var(--size-10xl);
--heading-5xl-semibold-lineheight: var(--lineheight-10xl);
--heading-5xl-semibold-letterspacing: var(--letterspacing-xs);
--heading-4xl-semibold-weight: var(--weight-semibold);
--heading-4xl-semibold-size: var(--size-9xl);
--heading-4xl-semibold-lineheight: var(--lineheight-9xl);
--heading-4xl-semibold-letterspacing: var(--letterspacing-xs);
--heading-3xl-semibold-weight: var(--weight-semibold);
--heading-3xl-semibold-size: var(--size-8xl);
--heading-3xl-semibold-lineheight: var(--lineheight-8xl);
--heading-3xl-semibold-letterspacing: var(--letterspacing-xs);
--heading-2xl-semibold-weight: var(--weight-semibold);
--heading-2xl-semibold-size: var(--size-7xl);
--heading-2xl-semibold-lineheight: var(--lineheight-7xl);
--heading-2xl-semibold-letterspacing: var(--letterspacing-xs);
--heading-xl-semibold-weight: var(--weight-semibold);
--heading-xl-semibold-size: var(--size-6xl);
--heading-xl-semibold-lineheight: var(--lineheight-6xl);
--heading-xl-semibold-letterspacing: var(--letterspacing-xs);
--heading-l-semibold-weight: var(--weight-semibold);
--heading-l-semibold-size: var(--size-5xl);
--heading-l-semibold-lineheight: var(--lineheight-5xl);
--heading-l-semibold-letterspacing: var(--letterspacing-xs);
--heading-m-semibold-weight: var(--weight-semibold);
--heading-m-semibold-size: var(--size-3xl);
--heading-m-semibold-lineheight: var(--lineheight-3xl);
--heading-m-semibold-letterspacing: var(--letterspacing-s);
--heading-s-semibold-weight: var(--weight-semibold);
--heading-s-semibold-size: var(--size-2xl);
--heading-s-semibold-lineheight: var(--lineheight-2xl);
--heading-s-semibold-letterspacing: var(--letterspacing-s);
--heading-xs-semibold-weight: var(--weight-semibold);
--heading-xs-semibold-size: var(--size-l);
--heading-xs-semibold-lineheight: var(--lineheight-l);
--heading-xs-semibold-letterspacing: var(--letterspacing-s);
--heading-2xs-semibold-weight: var(--weight-semibold);
--heading-2xs-semibold-size: var(--size-m);
--heading-2xs-semibold-lineheight: var(--lineheight-m);
--heading-2xs-semibold-letterspacing: var(--letterspacing-none);

--text-xl-regular-weight: var(--weight-regular);
--text-xl-regular-size: var(--size-2xl);
--text-xl-regular-lineheight: var(--lineheight-2xl);
--text-xl-regular-letterspacing: var(--letterspacing-xs);
--text-l-regular-weight: var(--weight-regular);
--text-l-regular-size: var(--size-l);
--text-l-regular-lineheight: var(--lineheight-l);
--text-l-regular-letterspacing: var(--letterspacing-none);
--text-m-regular-weight: var(--weight-regular);
--text-m-regular-size: var(--size-m);
--text-m-regular-lineheight: var(--lineheight-m);
--text-m-regular-letterspacing: var(--letterspacing-none);
--text-s-regular-weight: var(--weight-regular);
--text-s-regular-size: var(--size-s);
--text-s-regular-lineheight: var(--lineheight-s);
--text-s-regular-letterspacing: var(--letterspacing-none);
--text-xs-regular-weight: var(--weight-regular);
--text-xs-regular-size: var(--size-xs);
--text-xs-regular-lineheight: var(--lineheight-xs);
--text-xs-regular-letterspacing: var(--letterspacing-none);
--text-xl-semibold-weight: var(--weight-semibold);
--text-xl-semibold-size: var(--size-2xl);
--text-xl-semibold-lineheight: var(--lineheight-2xl);
--text-xl-semibold-letterspacing: var(--letterspacing-xs);
--text-l-semibold-weight: var(--weight-semibold);
--text-l-semibold-size: var(--size-l);
--text-l-semibold-lineheight: var(--lineheight-l);
--text-l-semibold-letterspacing: var(--letterspacing-none);
--text-m-semibold-weight: var(--weight-semibold);
--text-m-italic-weight: var(--weight-italic);
--text-m-italic-size: var(--size-m);
--text-m-italic-lineheight: var(--lineheight-m);
--text-m-italic-letterspacing: var(--letterspacing-none);
--text-m-semibold-size: var(--size-m);
--text-m-semibold-lineheight: var(--lineheight-m);
--text-m-semibold-letterspacing: var(--letterspacing-none);
--text-s-semibold-weight: var(--weight-semibold);
--text-s-semibold-size: var(--size-s);
--text-s-semibold-lineheight: var(--lineheight-s);
--text-s-semibold-letterspacing: var(--letterspacing-none);
--text-xs-italic-weight: var(--weight-italic);
--text-xs-italic-size: var(--size-xs);
--text-xs-italic-lineheight: var(--lineheight-xs);
--text-xs-italic-letterspacing: var(--letterspacing-none);
--text-xs-semibold-weight: var(--weight-semibold);
--text-xs-semibold-size: var(--size-xs);
--text-xs-semibold-lineheight: var(--lineheight-xs);
--text-xs-semibold-letterspacing: var(--letterspacing-none);
--text-s-italic-weight: var(--weight-italic);
--text-s-italic-size: var(--size-s);
--text-s-italic-lineheight: var(--lineheight-s);
--text-s-italic-letterspacing: var(--letterspacing-none);
--heading-5xl-light-weight: var(--weight-light);
--heading-5xl-light-size: var(--size-10xl);
--heading-5xl-light-lineheight: var(--lineheight-10xl);
--heading-5xl-light-letterspacing: var(--letterspacing-xs);
--heading-4xl-light-weight: var(--weight-light);
--heading-4xl-light-size: var(--size-9xl);
--heading-4xl-light-lineheight: var(--lineheight-9xl);
--heading-4xl-light-letterspacing: var(--letterspacing-xs);
--heading-3xl-light-weight: var(--weight-light);
--heading-3xl-light-size: var(--size-8xl);
--heading-3xl-light-lineheight: var(--lineheight-8xl);
--heading-3xl-light-letterspacing: var(--letterspacing-xs);
--heading-2xl-light-weight: var(--weight-light);
--heading-2xl-light-size: var(--size-7xl);
--heading-2xl-light-lineheight: var(--lineheight-7xl);
--heading-2xl-light-letterspacing: var(--letterspacing-xs);
--heading-xl-light-weight: var(--weight-light);
--heading-xl-light-size: var(--size-6xl);
--heading-xl-light-lineheight: var(--lineheight-6xl);
--heading-xl-light-letterspacing: var(--letterspacing-xs);
--heading-l-light-weight: var(--weight-light);
--heading-l-light-size: var(--size-5xl);
--heading-l-light-lineheight: var(--lineheight-5xl);
--heading-l-light-letterspacing: var(--letterspacing-xs);
--heading-m-light-weight: var(--weight-light);
--heading-m-light-size: var(--size-3xl);
--heading-m-light-lineheight: var(--lineheight-3xl);
--heading-m-light-letterspacing: var(--letterspacing-s);
--heading-s-light-weight: var(--weight-light);
--heading-s-light-size: var(--size-2xl);
--heading-s-light-lineheight: var(--lineheight-2xl);
--heading-s-light-letterspacing: var(--letterspacing-s);
--heading-xs-light-weight: var(--weight-light);
--heading-xs-light-size: var(--size-l);
--heading-xs-light-lineheight: var(--lineheight-l);
--heading-xs-light-letterspacing: var(--letterspacing-s);
--heading-2xs-light-weight: var(--weight-light);
--heading-2xs-light-size: var(--size-m);
--heading-2xs-light-lineheight: var(--lineheight-m);
--heading-2xs-light-letterspacing: var(--letterspacing-none);
--text-xl-light-weight: var(--weight-light);
--text-xl-light-size: var(--size-2xl);
--text-xl-light-lineheight: var(--lineheight-2xl);
--text-xl-light-letterspacing: var(--letterspacing-xs);
--text-l-light-weight: var(--weight-light);
--text-l-light-size: var(--size-l);
--text-l-light-lineheight: var(--lineheight-l);
--text-l-light-letterspacing: var(--letterspacing-none);
--text-m-light-weight: var(--weight-light);
--text-m-light-size: var(--size-m);
--text-m-light-lineheight: var(--lineheight-m);
--text-m-light-letterspacing: var(--letterspacing-none);
--text-s-light-weight: var(--weight-light);
--text-s-light-size: var(--size-s);
--text-s-light-lineheight: var(--lineheight-s);
--text-s-light-letterspacing: var(--letterspacing-none);
--text-xs-light-weight: var(--weight-light);
--text-xs-light-size: var(--size-xs);
--text-xs-light-lineheight: var(--lineheight-xs);
--text-xs-light-letterspacing: var(--letterspacing-none);


/* FinOps Primitive */
--primary-10: #F6F3EF;
--base-black: #000000;
--primary-50: #FDF5EC;
--base-black50: #0000007F;
--base-white: #FFFFFF;
--base-white50: #FFFFFF7F;
--primary-100: #FCEAD9;
--primary-200: #F8D5B2;
--primary-300: #F5C18C;
--primary-400: #F1AC65;
--primary-500: #EE973F;
--primary-600: #BE7932;
--primary-700: #8F5B26;
--primary-800: #5F3C19;
--primary-900: #301E0D;
--secondary-100: #CDE7F5;
--secondary-200: #9CCFEC;
--secondary-300: #6AB6E2;
--secondary-400: #399ED9;
--secondary-500: #0786CF;
--secondary-600: #066BA6;
--secondary-700: #04507C;
--secondary-800: #033653;
--secondary-900: #011B29;
--neutral-50: #F9F9F9;
--neutral-100: #F2F2F2;
--neutral-200: #E6E6E6;
--neutral-300: #D9D9D9;
--neutral-400: #CCCCCC;
--neutral-500: #BFBFBF;
--neutral-600: #B2B2B2;
--neutral-700: #A5A5A5;
--neutral-800: #999999;
--neutral-900: #8C8C8C;
--neutral-1000: #7F7F7F;
--neutral-1100: #666666;
--neutral-1200: #4C4C4C;
--neutral-1300: #333333;
--neutral-1400: #191919;
--neutral-1500: #000000;
--blue-50: #E6F4FF;
--blue-100: #CDE9FF;
--blue-200: #9BD3FF;
--blue-300: #68BEFF;
--blue-400: #36A8FF;
--blue-500: #0492FF;
--blue-600: #0375CC;
--blue-700: #025899;
--blue-800: #023A66;
--blue-900: #011D33;
--cyan-50: #E3F8FF;
--cyan-100: #CEF1FC;
--cyan-200: #9DE3FA;
--cyan-300: #6CD4F7;
--cyan-400: #3BC6F5;
--cyan-500: #0AB8F2;
--cyan-600: #0893C2;
--cyan-700: #066E91;
--cyan-800: #044A61;
--cyan-900: #022530;
--red-50: #FFE6E6;
--red-100: #FCDADA;
--red-200: #F9B4B4;
--red-300: #F58F8F;
--red-400: #F26969;
--red-500: #EF4444;
--red-600: #BF3636;
--red-700: #8F2929;
--red-800: #601B1B;
--red-900: #300E0E;
--orange-50: #FFEFE2;
--orange-100: #FEE4CF;
--orange-200: #FDC99F;
--orange-300: #FBAE6F;
--orange-400: #FA933F;
--orange-500: #F9780E;
--orange-600: #C7600C;
--orange-700: #954809;
--orange-800: #643006;
--orange-900: #321803;
--yellow-50: #FFF9E1;
--yellow-100: #FEF4CD;
--yellow-200: #FEE89A;
--yellow-300: #FDDD68;
--yellow-400: #FDD135;
--yellow-500: #FCC603;
--yellow-600: #CA9E02;
--yellow-700: #977702;
--yellow-800: #654F01;
--yellow-900: #322801;
--green-50: #E6FFEE;
--green-100: #CFF1DA;
--green-200: #9FE3B5;
--green-300: #70D590;
--green-400: #40C76B;
--green-500: #10B945;
--green-600: #0D9438;
--green-700: #0A6F2A;
--green-800: #064A1C;
--green-900: #03250E;
--gradient-custom-100-1: var(--primary-500);
--gradient-custom-100-2: #F6BF0C;
--gradient-custom-100-3: #F6BF0C;
--gradient-primary-1: var(--primary-500);
--gradient-primary-2: var(--primary-600);
--gradient-custom-200-1: var(--gradient-primary-1);
--gradient-custom-200-2: var(--gradient-primary-2);
--purple-10: #FAF7FF;
--purple-50: #F5EEFE;
--purple-100: #DFD2F2;
--purple-200: #BFA5E5;
--purple-300: #A079D8;
--purple-400: #804CCB;
--purple-500: #601FBE;
--purple-600: #4D1998;
--purple-700: #3A1372;
--purple-800: #260C4C;
--purple-900: #130626;

--custombutton-background: #000000;
--custombutton-color: var(--primary-10);
--custombutton-border: #000000;
--subcontent-base: var(--neutral-50);

--custombutton-linkbackground: var(--content-contentsecondary);
--custombutton-buttonlinkborder: var(--border-bordertransparent);
--custombutton-buttonlinkcolor: var(--content-contentsecondary);

/* Mode : Semantics Light */
--content-contentbase: var(--neutral-1400);
--card-popup-blk-color: #000000de;

/* --button-button: var(--custombutton-background);
--button-buttonborder: var(--custombutton-border);
--button-buttoncolor: var(--custombutton-color);

--button-buttonlink: var(--custombutton-linkbackground);
--button-buttonlinkborder: var(--custombutton-buttonlinkborder);
--button-buttonlinkcolor: var(--custombutton-buttonlinkcolor);
--button-buttonlinkcolorhover: var(--primary-800);
--button-buttonprimary: var(--background-primary);
--button-buttonprimaryborder: var(--border-primary);
--button-buttonprimarycolor: var(--primary-10); */

--button-button: #000000;
--button-buttonborder: #000000;
--button-buttoncolor: var(--primary-10);

--button-buttonlink: var(--content-black);
--button-buttonlinkborder: var(--custombutton-buttonlinkborder);

--button-buttonprimary: var(--background-primary);
--button-buttonprimaryborder: var(--border-primary);
--button-buttonprimarycolor: var(--content-black);


--content-contentsecondary: var(--neutral-1200);
--content-contenttertiary: var(--neutral-1000);
--content-contentprimaryinverse: var(--base-white);
--content-contentsecondaryinverse: var(--neutral-200);
--content-contenttertiaryinverse: var(--neutral-700);
--content-disabled: #B0ACAC;
--content-primary: var(--primary-500);
--content-primarydark: var(--primary-800);
--content-secondary: var(--secondary-500);
--content-link: var(--content-primary);
--content-linkhover: var(--primary-600);
--content-linkactive: var(--primary-600);
--content-info: var(--blue-500);
--content-infobold: var(--blue-600);
--content-notice: var(--yellow-500);
--content-noticebold: var(--yellow-700);
--content-negative: var(--red-500);
--content-negativebold: var(--red-600);
--content-positive: var(--green-500);
--content-positivehover: var(--green-600);
--content-positiveactive: var(--green-700);
--content-positivebold: var(--green-600);
--content-white: var(--base-white);
--content-black: var(--base-black);
--content-dark: var(--neutral-1200);
--content-light: var(--neutral-200);
--background-base: var(--base-white);
--background-basehover: var(--neutral-50);
--background-baseactive: var(--neutral-200);
--background-baseselected: var(--primary-100);
--background-disabled: #E5E5E5;
--background-inverse: var(--neutral-1400);
--background-primary: var(--primary-500);
--background-primarylight: var(--primary-10);
--background-secondary: var(--secondary-500);
--background-info: var(--blue-300);
--background-infosubtle: var(--blue-100);
--background-notice: var(--yellow-500);
--background-noticesubtle: var(--yellow-50);
--background-negative: var(--red-500);
--background-negativesubtle: var(--red-50);
--background-positive: var(--green-500);
--background-positivesubtle: var(--green-50);
--background-dark: var(--neutral-1200);
--background-light: #FAFAFA;
--background-transparent: #FFFFFF00;
--background-bgbase: var(--muiDataGrid-Bg-Color);
--background-tableheader: #F3F3F3;
--background-tablealt: #F8FAFC;
--background-bgbrand: var(--primary-10);
--background-bgcard: #FFFFFF;
--background-formfield: var(--background-base);
--hover-primaryhover: var(--primary-600);
--hover-primarylighthover: var(--primary-50);
--hover-secondaryhover: var(--secondary-600);
--hover-infohover: var(--blue-400);
--hover-noticehover: var(--yellow-600);
--hover-negativehover: var(--red-600);
--hover-positivehover: var(--green-600);
--hover-darkhover: var(--neutral-1300);
--hover-lighthover: var(--neutral-300);
--active-primaryactive: var(--primary-700);
--active-secondaryactive: var(--secondary-800);
--active-infoactive: var(--blue-500);
--active-noticeactive: var(--yellow-700);
--active-negativeactive: var(--red-700);
--active-positiveactive: var(--green-700);
--active-darkactive: var(--neutral-1300);
--active-lightactive: var(--neutral-200);
--focus-primaryfocus: var(--primary-800);
--focus-secondaryfocus: var(--secondary-700);
--focus-infofocus: var(--blue-600);
--focus-noticefocus: var(--yellow-800);
--focus-negativefocus: var(--red-800);
--focus-positivefocus: var(--green-800);
--focus-darkfocus: var(--neutral-1300);
--focus-lightfocus: var(--neutral-300);
--border-disabled: #E5E5E5;
--border-inverse: var(--base-white);
--border-primary: var(--primary-500);
--border-secondary: var(--secondary-500);
--border-focus: var(--base-black);
--border-info: var(--blue-500);
--border-dark: var(--neutral-1200);
--border-light: var(--neutral-200);
--border-notice: var(--yellow-500);
--border-negative: var(--red-500);
--border-positive: var(--green-500);
--border-borderbase: var(--neutral-300);
--border-borderbase2: var(--neutral-50);
--border-borderform: var(--neutral-300);
--border-bordertable: var(--neutral-300);
--border-borderprimarylight: var(--primary-50);
--border-bordercustom: #F5F2F2;
--border-bordertransparent: #FFFFFF00;
--overlay-overlay50: var(--base-black50);
--overlay-overlay50inverse: var(--base-white50);
--gradient-primary: -webkit-linear-gradient(var(--gradient-primary-1) 5.56%, var(--gradient-primary-2) 98.52%);
--gradient-custom-100:-webkit-linear-gradient(251deg, var(--gradient-custom-100-1) -8.45%, var(--gradient-custom-100-2) 69.2%, var(--gradient-custom-100-2) 146.86%);
--gradient-custom-200:-webkit-linear-gradient(var(--gradient-custom-200-1) 5.56%, var(--gradient-custom-200-2) 98.52%);
--dropdown-hover:rgba(0, 0, 0, 0.05);
--nav-icon-hover:var(--hover-primarylighthover);
--dropdown-hover-light:rgba(0, 0, 0, 0.05);
--dropdown-hover-dark:rgba(255, 255, 255, 0.08);
--bg-tableheader-dark: #111C29;
--bg-tableheader-light: #F3F3F3;
}
.dark-mode{
--selected-button-text: var(--base-black);
--content-contentbase: var(--base-white);
--card-popup-blk-color: var(--base-white);
--button-button: var(--background-primary);
--button-buttonborder: var(--background-primary);
--button-buttoncolor: #000000;
--button-buttonlink: var(--content-contentsecondary);
--button-buttonlinkborder: var(--border-bordertransparent);
 --background-light-popup: #2F3D4E;

--button-buttonprimary: var(--background-primary);
--button-buttonprimaryborder: var(--background-primary);
--button-buttonprimarycolor: var(--content-black);

  /*Device Onboarding*/
--button-buttonprimary: var(--background-primary);
--button-buttonprimaryborder: var(--background-primary);
--button-buttonprimarycolor: var(--content-black);
--tab-button-color: var(--base-white);
--title-color: var(--neutral-50);
--color-start: #ee973f; 
--download-button-bg-color: var(--color-start);
--step-connector-line-color: var(--step-connector-line-dark);
--form-control-label-color: var(--pure-white);

--tab-button-selected: var(--background-primary);

--content-contentsecondary: var(--neutral-300);
--content-contenttertiary: var(--neutral-700);
--content-contentprimaryinverse: var(--neutral-1400);
--content-contentsecondaryinverse: var(--neutral-1200);
--content-contenttertiaryinverse: var(--neutral-300);
--content-disabled: var(--neutral-800);
--content-primary: var(--primary-500);
--content-primarydark: var(--primary-200);
--content-secondary: var(--secondary-400);
--content-link: var(--primary-400);
--content-linkhover: var(--primary-300);
--content-linkactive: var(--primary-200);
--content-info: var(--blue-400);
--content-infobold: var(--blue-300);
--content-notice: var(--yellow-400);
--content-noticebold: var(--yellow-300);
--content-negative: var(--red-500);
--content-negativebold: var(--red-400);
--content-positive: var(--green-400);
--content-positivehover: var(--green-300);
--content-positiveactive: var(--green-200);
--content-positivebold: var(--green-300);
--content-white: var(--base-white);
--content-black: var(--base-black);
--content-dark: var(--neutral-300);
--content-light: var(--neutral-200);
--background-base: #15222E;
--subcontent-base: #15222E;
--background-basehover: var(--neutral-1200);
--background-baseactive: var(--neutral-1000);
--background-baseselected: var(--primary-800);
--background-disabled: #3A4652;
--background-inverse: var(--base-white);
--background-primary: var(--primary-500);
--background-primarylight: var(--base-black50);
--background-secondary: var(--secondary-400);
--background-info: var(--blue-300);
--background-infosubtle: var(--blue-200);
--background-notice: var(--yellow-500);
--background-noticesubtle: var(--yellow-50);
--background-negative: var(--red-400);
--background-negativesubtle: var(--red-50);
--background-positive: var(--green-400);
--background-positivesubtle: var(--green-100);
--background-dark: var(--neutral-300);
--background-light: #2F3D4E;
--background-transparent: #FFFFFF00;
--background-bgbase: #111B28;
--background-tableheader: #0B1739;
--background-tablealt: #1A2636;
--background-bgbrand: var(--blue-900);
--background-bgcard: #1F2E41;
--background-formfield: #15222E;
--hover-primaryhover: var(--primary-300);
--hover-primarylighthover: var(--primary-10);
--hover-secondaryhover: var(--secondary-300);
--hover-infohover: var(--blue-400);
--hover-noticehover: var(--yellow-400);
--hover-negativehover: var(--red-300);
--hover-positivehover: var(--green-400);
--hover-darkhover: var(--neutral-300);
--hover-lighthover: var(--neutral-200);
--active-primaryactive: var(--primary-200);
--active-secondaryactive: var(--secondary-600);
--active-infoactive: var(--blue-500);
--active-noticeactive: var(--yellow-400);
--active-negativeactive: var(--red-700);
--active-positiveactive: var(--green-300);
--active-darkactive: var(--neutral-300);
--active-lightactive: var(--neutral-400);
--focus-primaryfocus: var(--primary-600);
--focus-secondaryfocus: var(--secondary-200);
--focus-infofocus: var(--blue-600);
--focus-noticefocus: var(--yellow-200);
--focus-negativefocus: var(--red-200);
--focus-positivefocus: var(--green-200);
--focus-darkfocus: var(--neutral-300);
--focus-lightfocus: var(--neutral-300);
--border-disabled: var(--neutral-1000);
--border-inverse: var(--neutral-1300);
--border-primary: var(--primary-400);
--border-secondary: var(--secondary-400);
--border-focus: var(--base-white);
--border-info: var(--blue-400);
--border-dark: var(--neutral-300);
--border-light: var(--neutral-200);
--border-notice: var(--yellow-400);
--border-negative: var(--red-400);
--border-positive: var(--green-400);
--border-borderbase: #4B525C;
--border-borderbase2: var(--neutral-1200);
--border-borderform: #343B45;
--border-bordertable: #343B4F;
--border-borderprimarylight: var(--primary-800);
--border-bordercustom: #343B45;
--border-bordertransparent: #FFFFFF00;
--overlay-overlay50: var(--base-black50);
--overlay-overlay50inverse: var(--base-white50);
--gradient-custom-200-1: var(--gradient-primary-1);
--gradient-custom-200-2: var(--gradient-primary-2);
--gradient-custom-200:-webkit-linear-gradient(var(--gradient-custom-200-1) 5.56%, var(--gradient-custom-200-2) 98.52%);
--dropdown-hover:rgba(255, 255, 255, 0.08);
--nav-icon-hover:var(--dropdown-hover);
--chart-axis-color:#7a7a7a;
}
 #gradient_primary stop:first-of-type {
      stop-color: var(--gradient-primary-1);
    }
    #gradient_primary stop:last-of-type {
      stop-color: var(--gradient-primary-2);
    }
  

  #gradient_custom100 stop:first-of-type {
      stop-color: var(--gradient-custom-100-1);
    }
    #gradient_custom100 stop:last-of-type {
      stop-color: var(--gradient-custom-100-2);
    }
  
  #gradient_custom200 stop:first-of-type {
      stop-color: var(--gradient-custom-200-1);
    }
    #gradient_custom200 stop:last-of-type {
      stop-color: var(--gradient-custom-200-2);
    }
    .bg-base {
      background-color: var(--background-base) !important;
    }
    .bg-light {
      background-color: var(--background-light) !important;
    }