globuswebcomponents 2.13.3 → 2.13.5

package/dist/components/gb-sidebar.js

@@ -1,16 +1,16 @@
 import { p as proxyCustomElement, H, c as createEvent, g as getAssetPath, h, F as Fragment } from './p-C9dqTMUJ.js';
-import { d as defineCustomElement$b } from './p-D_YD59D1.js';
+import { d as defineCustomElement$b } from './p-DpYzSwEW.js';
 import { d as defineCustomElement$a } from './p-CjsCOmNI.js';
-import { d as defineCustomElement$9 } from './p-Blu09IWZ.js';
+import { d as defineCustomElement$9 } from './p-BfwhUwmD.js';
 import { d as defineCustomElement$8 } from './p-BF3E-WTe.js';
-import { d as defineCustomElement$7 } from './p-CGHS2An9.js';
-import { d as defineCustomElement$6 } from './p-BDoGfwvg.js';
-import { d as defineCustomElement$5 } from './p-BAz_Vt1i.js';
-import { d as defineCustomElement$4 } from './p-CDGXfTAS.js';
-import { d as defineCustomElement$3 } from './p-BhVoEnfv.js';
-import { d as defineCustomElement$2 } from './p-GuLHgTQK.js';
+import { d as defineCustomElement$7 } from './p-BesIjMHb.js';
+import { d as defineCustomElement$6 } from './p-CsMsc2fQ.js';
+import { d as defineCustomElement$5 } from './p-B1gmNwAn.js';
+import { d as defineCustomElement$4 } from './p-5th8-r2e.js';
+import { d as defineCustomElement$3 } from './p-Dy7Iritv.js';
+import { d as defineCustomElement$2 } from './p-C2KhOFSQ.js';
 
-const gbSidebarCss = "/* @import 'tailwind.css'; */\r\n@import url('https://fonts.googleapis.com/css2?family=Sora&display=swap');\r\n/**\r\n * Global styles for portal-based dropdowns\r\n * Applied outside shadow DOM context\r\n */\r\n\r\n.portal_dropdown_wrapper {\r\n  width: fit-content;\r\n  border-radius: var(--rounded-sm);\r\n  border: 1px solid var(--color-border-subtler, #e3e8ef);\r\n  background: var(--color-surface, #ffffff);\r\n  box-shadow: var(--shadow-md);\r\n  position: absolute;\r\n  z-index: 9999; /* High z-index to appear above sticky columns */\r\n  overflow: hidden;\r\n}\r\n\r\n.portal_dropdown_wrapper gb-dropdown-items-with-shortcut {\r\n  display: block;\r\n  width: 100%;\r\n}\r\n\r\n/* .portal_dropdown_wrapper gb-dropdown-items-with-shortcut:hover {\r\n  background: var(--color-background-gray-subtler, #eef2f6);\r\n} */\r\n\r\n\r\n:root {\r\n  /* --------------------------------------Primary Colors--------------------------------------------- */\r\n  /* base color palette */\r\n  --base-white: #fff;\r\n  --base-black: #000;\r\n\r\n  /* gray color palette  */\r\n  --gray-25: #f9fafb;\r\n  --gray-50: #f6f8fa;\r\n  --gray-100: #eef2f6;\r\n  --gray-200: #e3e8ef;\r\n  --gray-300: #cdd5df;\r\n  --gray-400: #808c9e;\r\n  --gray-500: #697586;\r\n  --gray-600: #4b5565;\r\n  --gray-700: #364152;\r\n  --gray-800: #202939;\r\n  --gray-900: #121926;\r\n  --gray-950: #0d121c;\r\n\r\n  /* brand dark blue color palette */\r\n  --brandDarkBlue-25: #f9f9fb;\r\n  --brandDarkBlue-50: #edeef3;\r\n  --brandDarkBlue-100: #d3d5e0;\r\n  --brandDarkBlue-200: #b5b9cc;\r\n  --brandDarkBlue-300: #9095b2;\r\n  --brandDarkBlue-400: #464f7f;\r\n  --brandDarkBlue-500: #212c65;\r\n  --brandDarkBlue-600: #1e285c;\r\n  --brandDarkBlue-700: #1c2554;\r\n  --brandDarkBlue-800: #161d43;\r\n  --brandDarkBlue-900: #0b0f22;\r\n  --brandDarkBlue-950: #070914;\r\n\r\n  /* brand red color palette */\r\n  --brandRed-25: #fffbfa;\r\n  --brandRed-50: #fef1f2;\r\n  --brandRed-100: #fde3e5;\r\n  --brandRed-200: #f9b4ba;\r\n  --brandRed-300: #f68e98;\r\n  --brandRed-400: #f36976;\r\n  --brandRed-500: #e21b2e;\r\n  --brandRed-600: #cc1a2a;\r\n  --brandRed-700: #b51726;\r\n  --brandRed-800: #8c121d;\r\n  --brandRed-900: #680d16;\r\n  --brandRed-950: #3f080d;\r\n\r\n  /* warning color palette */\r\n  --warning-25: #fffcf5;\r\n  --warning-50: #fffaeb;\r\n  --warning-100: #fef0c7;\r\n  --warning-200: #fedf89;\r\n  --warning-300: #fec84b;\r\n  --warning-400: #fdb022;\r\n  --warning-500: #f79009;\r\n  --warning-600: #dc6803;\r\n  --warning-700: #b54708;\r\n  --warning-800: #93370d;\r\n  --warning-900: #7a2e0e;\r\n  --warning-950: #4e1d09;\r\n\r\n  /* success color palette  */\r\n  --success-25: #f6fef9;\r\n  --success-50: #ecfdf3;\r\n  --success-100: #dcfaeb;\r\n  --success-200: #a9efc5;\r\n  --success-300: #75e0a7;\r\n  --success-400: #47cd89;\r\n  --success-500: #17b26a;\r\n  --success-600: #079455;\r\n  --success-700: #067647;\r\n  --success-800: #085d3a;\r\n  --success-900: #074d31;\r\n  --success-950: #053321;\r\n\r\n  /* ------------------------------------------opacity color palette--------------------------------------  */\r\n  /* 0% opacity */\r\n  /* White */\r\n  --white-opacity0: rgba(255, 255, 255, 0);\r\n\r\n  /* Gray */\r\n  --gray25-opacity0: rgba(249, 250, 251, 0);\r\n  --gray900-opacity0: rgba(18, 25, 38, 0);\r\n  --gray950-opacity0: rgba(13, 18, 28, 0);\r\n\r\n  /* 20% opacity */\r\n  /* White */\r\n  --white-opacity20: rgba(255, 255, 255, 0.2);\r\n\r\n  /* Dark Blue */\r\n  --darkBlue200-opacity20: rgba(181, 185, 204, 0.2);\r\n  --darkBlue500-opacity20: rgba(33, 44, 101, 0.2);\r\n\r\n  /* Gray */\r\n  --gray25-opacity20: rgba(249, 250, 251, 0.2);\r\n  --gray900-opacity20: rgba(18, 25, 38, 0.2);\r\n  --gray950-opacity20: rgba(13, 18, 28, 0.2);\r\n\r\n  /* 30% opacity */\r\n  --darkBlue200-opacity30: rgba(181, 185, 204, 0.3);\r\n  --darkBlue500-opacity30: rgba(33, 44, 101, 0.3);\r\n\r\n  /* 40% opacity */\r\n  --darkBlue200-opacity40: rgba(181, 185, 204, 0.4);\r\n  --darkBlue500-opacity40: rgba(33, 44, 101, 0.4);\r\n\r\n  /* 50% opacity */\r\n  /* White */\r\n  --white-opacity50: rgba(255, 255, 255, 0.5);\r\n\r\n  /* Gray */\r\n  --gray25-opacity50: rgba(249, 250, 251, 0.5);\r\n  --gray900-opacity50: rgba(18, 25, 38, 0.5);\r\n  --gray950-opacity50: rgba(13, 18, 28, 0.5);\r\n\r\n  /* ------------------------------------------Secondary Color------------------------------------------- */\r\n  /* blueLight color palete */\r\n  --lightBlue-25: #f5fbff;\r\n  --lightBlue-50: #f0f9ff;\r\n  --lightBlue-100: #e0f2fe;\r\n  --lightBlue-200: #b9e6fe;\r\n  --lightBlue-300: #7cd4fd;\r\n  --lightBlue-400: #7cd4fd;\r\n  --lightBlue-500: #0ba5ec;\r\n  --lightBlue-600: #0086c9;\r\n  --lightBlue-700: #026aa2;\r\n  --lightBlue-800: #065986;\r\n  --lightBlue-900: #0b4a6f;\r\n  --lightBlue-950: #062c41;\r\n\r\n  /* blue color palette */\r\n  --blue-25: #ecf5fe;\r\n  --blue-50: #e4f0fc;\r\n  --blue-100: #c8e0f9;\r\n  --blue-200: #9ac7f4;\r\n  --blue-300: #6aa9e7;\r\n  --blue-400: #378fe6;\r\n  --blue-500: #075db2;\r\n  --blue-600: #064e94;\r\n  --blue-700: #053e77;\r\n  --blue-800: #042f59;\r\n  --blue-900: #022445;\r\n  --blue-950: #021d37;\r\n\r\n  /* Purple color palete */\r\n  --purple-25: #fafaff;\r\n  --purple-50: #f4f3ff;\r\n  --purple-100: #ebe9fe;\r\n  --purple-200: #d9d6fe;\r\n  --purple-300: #bdb4fe;\r\n  --purple-400: #9b8afb;\r\n  --purple-500: #7a5af8;\r\n  --purple-600: #6938ef;\r\n  --purple-700: #5925dc;\r\n  --purple-800: #4a1fb8;\r\n  --purple-900: #3e1c96;\r\n  --purple-950: #27115f;\r\n\r\n  /* pink color palette */\r\n  --pink-25: #fef6fb;\r\n  --pink-50: #fdf2fa;\r\n  --pink-100: #fce7f6;\r\n  --pink-200: #fcceee;\r\n  --pink-300: #faa7e0;\r\n  --pink-400: #f670c7;\r\n  --pink-500: #ee46bc;\r\n  --pink-600: #dd2590;\r\n  --pink-700: #c11574;\r\n  --pink-800: #9e165f;\r\n  --pink-900: #851651;\r\n  --pink-950: #4e0d30;\r\n\r\n  /* -------------------------------------------------Token---------------------------------------------- */\r\n\r\n  /* -----------Text Color----------- */\r\n\r\n  [data-theme='light'] {\r\n    --color-text-bold: var(--gray-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-bold: var(--gray-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text: var(--gray-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text: var(--gray-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-subtle: var(--gray-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-subtle: var(--gray-400);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-disabled: var(--gray-400);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-disabled: var(--gray-500);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-inverse: var(--base-white);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-inverse: var(--base-black);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-brandDarkBlue: var(--brandDarkBlue-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-brandDarkBlue: var(--brandDarkBlue-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-brandRed: var(--brandRed-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-brandRed: var(--brandRed-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-selected: var(--blue-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-selected: var(--blue-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-danger-bold: var(--brandRed-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-danger-bold: var(--brandRed-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-danger: var(--brandRed-700);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-danger: var(--brandRed-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-danger-subtle: var(--brandRed-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-danger-subtle: var(--brandRed-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-danger-inverse: var(--base-white);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-danger-inverse: var(--brandRed-950);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-warning-bold: var(--warning-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-warning-bold: var(--warning-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-warning: var(--warning-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-warning: var(--warning-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-warning-subtle: var(--warning-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-warning-subtle: var(--warning-400);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-success-bold: var(--success-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-success-bold: var(--success-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-success: var(--success-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-success: var(--success-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-success-subtle: var(--success-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-success-subtle: var(--success-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-discovery-bold: var(--lightBlue-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-discovery-bold: var(--lightBlue-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-discovery: var(--lightBlue-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-discovery: var(--lightBlue-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-discovery-subtle: var(--lightBlue-400);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-discovery-subtle: var(--lightBlue-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-information-bold: var(--blue-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-information-bold: var(--blue-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-information: var(--blue-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-information: var(--blue-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-information-subtle: var(--blue-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-information-subtle: var(--blue-400);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-purple-bold: var(--purple-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-purple-bold: var(--purple-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-purple: var(--purple-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-purple: var(--purple-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-purple-subtle: var(--purple-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-purple-subtle: var(--purple-400);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-pink-bold: var(--pink-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-pink-bold: var(--pink-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-pink: var(--pink-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-pink: var(--pink-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-pink-subtle: var(--pink-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-pink-subtle: var(--pink-400);\r\n  }\r\n\r\n  /* --------------Link color--------------- */\r\n\r\n  [data-theme='light'] {\r\n    --color-link: var(--blue-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-link: var(--blue-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-link-pressed: var(--blue-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-link-pressed: var(--blue-600);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-link-visited: var(--lightBlue-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-link-visited: var(--lightBlue-300);\r\n  }\r\n\r\n  /* --------------Icon color--------------- */\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-bold: var(--gray-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-bold: var(--gray-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon: var(--gray-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon: var(--gray-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-subtle: var(--gray-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-subtle: var(--gray-400);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-disabled: var(--gray-400);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-disabled: var(--gray-500);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-inverse: var(--base-white);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-inverse: var(--gray-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-brandDarkBlue: var(--brandDarkBlue-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-brandDarkBlue: var(--brandDarkBlue-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-brandRed: var(--brandRed-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-brandRed: var(--brandRed-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-selected: var(--blue-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-selected: var(--blue-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-danger-bold: var(--brandRed-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-danger-bold: var(--brandRed-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-danger: var(--brandRed-700);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-danger: var(--brandRed-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-danger-inverse: var(--base-white);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-danger-inverse: var(--brandRed-950);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-warning-bold: var(--warning-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-warning-bold: var(--warning-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-warning: var(--warning-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-warning: var(--warning-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-success-bold: var(--success-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-success-bold: var(--success-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-success: var(--success-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-success: var(--success-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-discovery-bold: var(--lightBlue-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-discovery-bold: var(--lightBlue-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-discovery: var(--lightBlue-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-discovery: var(--lightBlue-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-information-bold: var(--blue-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-information-bold: var(--blue-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-information: var(--blue-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-information: var(--blue-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-purple-bold: var(--purple-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-purple-bold: var(--purple-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-purple: var(--purple-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-purple: var(--purple-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-pink-bold: var(--pink-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-pink-bold: var(--pink-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-pink: var(--pink-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-pink: var(--pink-300);\r\n  }\r\n\r\n  /* ----------------Border Color --------------- */\r\n\r\n  [data-theme='light'] {\r\n    --color-border-bold: var(--gray-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-bold: var(--gray-400);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border: var(--gray-400);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border: var(--gray-500);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-subtle: var(--gray-300);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-subtle: var(--gray-700);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-subtler: var(--gray-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-subtler: var(--gray-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-disabled: var(--gray-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-disabled: var(--gray-700);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-inverse: var(--base-white);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-inverse: var(--gray-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-input: var(--gray-300);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-input: var(--gray-600);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-focus: var(--gray-400);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-focus: var(--blue-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-selected: var(--blue-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-selected: var(--blue-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-brandDarkBlue: var(--brandDarkBlue-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-brandDarkBlue: var(--brandDarkBlue-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-brandRed: var(--brandRed-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-brandRed: var(--brandRed-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-danger-bold: var(--brandRed-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-danger-bold: var(--brandRed-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-danger: var(--brandRed-700);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-danger: var(--brandRed-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-danger-subtle: var(--brandRed-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-danger-subtle: var(--brandRed-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-danger-subtler: var(--brandRed-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-danger-subtler: var(--brandRed-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-warning-bold: var(--warning-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-warning-bold: var(--warning-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-warning: var(--warning-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-warning: var(--warning-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-warning-subtle: var(--warning-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-warning-subtle: var(--warning-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-warning-subtler: var(--warning-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-warning-subtler: var(--warning-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-success-bold: var(--success-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-success-bold: var(--success-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-success: var(--success-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-success: var(--success-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-success-subtle: var(--success-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-success-subtle: var(--success-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-success-subtler: var(--success-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-success-subtler: var(--success-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-discovery-bold: var(--lightBlue-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-discovery-bold: var(--lightBlue-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-discovery: var(--lightBlue-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-discovery: var(--lightBlue-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-discovery-subtle: var(--lightBlue-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-discovery-subtle: var(--lightBlue-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-discovery-subtler: var(--lightBlue-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-discovery-subtler: var(--lightBlue-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-information-bold: var(--blue-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-information-bold: var(--blue-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-information: var(--blue-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-information: var(--blue-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-information-subtle: var(--blue-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-information-subtle: var(--blue-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-information-subtler: var(--blue-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-information-subtler: var(--blue-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-purple-bold: var(--purple-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-purple-bold: var(--purple-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-purple: var(--purple-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-purple: var(--purple-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-purple-subtle: var(--purple-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-purple-subtle: var(--purple-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-purple-subtler: var(--purple-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-purple-subtler: var(--purple-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-pink-bold: var(--pink-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-pink-bold: var(--pink-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-pink: var(--pink-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-pink: var(--pink-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-pink-subtle: var(--pink-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-pink-subtle: var(--pink-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-pink-subtler: var(--pink-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-pink-subtler: var(--pink-900);\r\n  }\r\n\r\n  /* Emmanuel Kadiri starts from background color */\r\n\r\n  /* ----------------Background Color --------------- */\r\n\r\n  [data-theme='light'] {\r\n    --color-background-card-bold: var(--gray-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-card-bold: var(--gray-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-card: var(--base-white);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-card: var(--gray-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-input: var(--gray-400);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-input: var(--gray-950);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-disabled: var(--gray-50);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-disabled: var(--gray-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-btn-disabled: var(--gray-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-btn-disabled: var(--gray-700);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-selected: var(--blue-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-selected: var(--blue-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-brandDarkblue: var(--brandDarkBlue-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-brandDarkblue: var(--brandDarkBlue-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-brandRed: var(--brandRed-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-brandRed: var(--brandRed-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-brandRed-hover: var(--brandRed-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-brandRed-hover: var(--brandRed-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-brandRed-pressed: var(--brandRed-700);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-brandRed-pressed: var(--brandRed-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-gray-bold: var(--gray-400);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-gray-bold: var(--gray-500);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-gray: var(--gray-300);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-gray: var(--gray-600);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-gray-subtle: var(--gray-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-gray-subtle: var(--gray-700);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-gray-subtler: var(--gray-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-gray-subtler: var(--gray-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-gray-subtlest: var(--gray-50);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-gray-subtlest: var(--gray-950);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-danger-bold: var(--brandRed-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-danger-bold: var(--brandRed-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-danger: var(--brandRed-700);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-danger: var(--brandRed-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-danger-subtle: var(--brandRed-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-danger-subtle: var(--brandRed-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-danger-subtler: var(--brandRed-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-danger-subtler: var(--brandRed-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-danger-subtlest: var(--brandRed-50);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-danger-subtlest: var(--brandRed-950);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-warning-bold: var(--warning-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-warning-bold: var(--warning-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-warning: var(--warning-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-warning: var(--warning-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-warning-subtle: var(--warning-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-warning-subtle: var(--warning-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-warning-subtler: var(--warning-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-warning-subtler: var(--warning-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-warning-subtlest: var(--warning-50);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-warning-subtlest: var(--warning-950);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-success-bold: var(--success-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-success-bold: var(--success-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-success: var(--success-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-success: var(--success-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-success-subtle: var(--success-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-success-subtle: var(--success-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-success-subtler: var(--success-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-success-subtler: var(--success-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-success-subtlest: var(--success-50);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-success-subtlest: var(--success-950);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-discovery-bold: var(--lightBlue-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-discovery-bold: var(--lightBlue-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-discovery: var(--lightBlue-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-discovery: var(--lightBlue-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-discovery-subtle: var(--lightBlue-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-discovery-subtle: var(--lightBlue-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-discovery-subtler: var(--lightBlue-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-discovery-subtler: var(--lightBlue-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-discovery-subtlest: var(--lightBlue-50);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-discovery-subtlest: var(--lightBlue-950);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-information-bold: var(--blue-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-information-bold: var(--blue-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-information: var(--blue-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-information: var(--blue-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-information-subtle: var(--blue-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-information-subtle: var(--blue-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-information-subtler: var(--blue-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-information-subtler: var(--blue-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-information-subtlest: var(--blue-50);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-information-subtlest: var(--blue-950);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-purple-bold: var(--purple-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-purple-bold: var(--blue-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-purple: var(--purple-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-purple: var(--blue-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-purple-subtle: var(--purple-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-purple-subtle: var(--purple-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-purple-subtler: var(--purple-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-purple-subtler: var(--purple-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-purple-subtlest: var(--purple-50);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-purple-subtlest: var(--purple-950);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-pink-bold: var(--pink-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-pink-bold: var(--pink-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-pink: var(--pink-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-pink: var(--pink-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-pink-subtle: var(--pink-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-pink-subtle: var(--pink-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-pink-subtler: var(--pink-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-pink-subtler: var(--pink-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-pink-subtlest: var(--purple-50);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-pink-subtlest: var(--pink-950);\r\n  }\r\n\r\n  /* ----------------Blanket Color --------------- */\r\n  [data-theme='light'] {\r\n    --color-blanket: var(--darkBlue500-opacity20);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-blanket: var(--darkBlue200-opacity20);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-blanket-subtle: var(--darkBlue500-opacity30);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-blanket-subtle: var(--darkBlue200-opacity30);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-blanket-subtler: var(--darkBlue500-opacity40);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-blanket-subtler: var(--darkBlue200-opacity40);\r\n  }\r\n\r\n  /* ----------------Skeleton Color --------------- */\r\n  [data-theme='light'] {\r\n    --color-skeleton: var(--gray-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-skeleton: var(--gray-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-skeleton-bold: var(--gray-300);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-skeleton-bold: var(--gray-700);\r\n  }\r\n\r\n  /* ----------------Surface Color --------------- */\r\n  [data-theme='light'] {\r\n    --color-surface-bold: var(--gray-50);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-surface-bold: var(--gray-950);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-surface: var(--base-white);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-surface: var(--gray-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-surface-hovered: var(--gray-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-surface-hovered: var(--gray-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-surface-pressed: var(--gray-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-surface-pressed: var(--gray-700);\r\n  }\r\n\r\n  /* ----------------Transparent Color --------------- */\r\n  [data-theme='light'] {\r\n    --color-surface-transparent50: var(--white-opacity50);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-surface-transparent50: var(--gray900-opacity50);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-surface-transparent20: var(--white-opacity20);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-surface-transparent20: var(--gray900-opacity20);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-surface-transparent-full: var(--white-opacity0);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-surface-transparent-full: var(--gray900-opacity0);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-surface-bold-transparent50: var(--gray25-opacity50);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-surface-bold-transparent50: var(--gray950-opacity50);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-surface-bold-transparent20: var(--gray25-opacity20);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-surface-bold-transparent20: var(--gray950-opacity20);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-surface-bold-transparent-full: var(--gray25-opacity0);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-surface-bold-transparent-full: var(--gray950-opacity0);\r\n  }\r\n}\r\n\r\n/* -----------------Shadow and Blur----------------- */\r\n:root {\r\n  --shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\r\n  --shadow-sm: 0px 1px 3px 0px rgba(16, 24, 40, 0.1), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);\r\n  --shadow-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);\r\n  --shadow-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);\r\n  --shadow-xl: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);\r\n  --shadow-2xl: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);\r\n  --shadow-3xl: 0px 32px 64px -12px rgba(16, 24, 40, 0.14);\r\n\r\n  --blur-sm: blur(4px);\r\n  --blur-md: blur(8px);\r\n  --blur-lg: blur(12px);\r\n  --blur-xl: blur(20px);\r\n}\r\n\r\n.shadow-xs {\r\n  box-shadow: var(--shadow-xs);\r\n}\r\n\r\n.shadow-sm {\r\n  box-shadow: var(--shadow-sm);\r\n}\r\n\r\n.shadow-md {\r\n  box-shadow: var(--shadow-md);\r\n}\r\n\r\n.shadow-lg {\r\n  box-shadow: var(--shadow-lg);\r\n}\r\n\r\n.shadow-xl {\r\n  box-shadow: var(--shadow-xl);\r\n}\r\n\r\n.shadow-2xl {\r\n  box-shadow: var(--shadow-2xl);\r\n}\r\n\r\n.shadow-3xl {\r\n  box-shadow: var(--shadow-3xl);\r\n}\r\n\r\n.blur-sm {\r\n  backdrop-filter: var(--blur-sm);\r\n}\r\n\r\n.blur-md {\r\n  backdrop-filter: var(--blur-md);\r\n}\r\n\r\n.blur-lg {\r\n  backdrop-filter: var(--blur-lg);\r\n}\r\n\r\n.blur-xl {\r\n  backdrop-filter: var(--blur-xl);\r\n}\r\n\r\n/* -----------------Gradients----------------- */\r\n:root {\r\n  /* Gray Gradients */\r\n  /* --gray-gradient-600: linear-gradient(); */\r\n  --gradient-gray-600-to-500-90d: linear-gradient(90deg, var(--gray-600), var(--gray-500));\r\n  --gradient-gray-700-to-600-45d: linear-gradient(45deg, var(--gray-700), var(--gray-600));\r\n  --gradient-gray-800-to-600-45d: linear-gradient(45deg, var(--gray-800), var(--gray-600));\r\n  --gradient-gray-800-to-600-90d: linear-gradient(90deg, var(--gray-800), var(--gray-600));\r\n  --gradient-gray-800-to-700265-d: linear-gradient(26.5deg, var(--gray-800), var(--gray-700));\r\n  --gradient-gray-900-to-600-45d: linear-gradient(45deg, var(--gray-900), var(--gray-600));\r\n\r\n  /* Brand Dark Blue Gradients */\r\n  --gradient-darkBlue-500-to-400-90d: linear-gradient(90deg, var(--brandDarkBlue-500), var(--brandDarkBlue-400));\r\n  --gradient-darkBlue-700-to-500-45d: linear-gradient(45deg, var(--brandDarkBlue-700), var(--brandDarkBlue-500));\r\n  --gradient-darkBlue-700-to-400-45d: linear-gradient(45deg, var(--brandDarkBlue-700), var(--brandDarkBlue-400));\r\n  --gradient-darkBlue-800-to-500-90d: linear-gradient(90deg, var(--brandDarkBlue-800), var(--brandDarkBlue-500));\r\n  --gradient-darkBlue-800-to-600265-d: linear-gradient(26.5deg, var(--brandDarkBlue-800), var(--brandDarkBlue-600));\r\n  --gradient-darkBlue-900-to-600-45d: linear-gradient(45deg, var(--brandDarkBlue-900), var(--brandDarkBlue-600));\r\n\r\n  /* Brand Red Gradients */\r\n  --gradient-red-500-to-400-90d: linear-gradient(90deg, var(--brandRed-600), var(--brandRed-400));\r\n  --gradient-red-700-to-500-45d: linear-gradient(45deg, var(--brandRed-700), var(--brandRed-500));\r\n  --gradient-red-700-to-400-45d: linear-gradient(45deg, var(--brandRed-700), var(--brandRed-400));\r\n  --gradient-red-800-to-500-90d: linear-gradient(90deg, var(--brandRed-800), var(--brandRed-500));\r\n  --gradient-red-800-to-600265-d: linear-gradient(26.5deg, var(--brandRed-800), var(--brandRed-600));\r\n  --gradient-red-900-to-600-45d: linear-gradient(45deg, var(--brandRed-900), var(--brandRed-600));\r\n\r\n  /* Blue Gradients */\r\n  --gradient-blue-500-to-400-90d: linear-gradient(90deg, var(--blue-500), var(--blue-400));\r\n  --gradient-blue-700-to-500-45d: linear-gradient(45deg, var(--blue-700), var(--blue-500));\r\n  --gradient-blue-700-to-400-45d: linear-gradient(45deg, var(--blue-700), var(--blue-400));\r\n  --gradient-blue-800-to-500-90d: linear-gradient(90deg, var(--blue-800), var(--blue-500));\r\n  --gradient-blue-800-to-600265-d: linear-gradient(26.5deg, var(--blue-800), var(--blue-600));\r\n  --gradient-blue-900-to-600-45d: linear-gradient(45deg, var(--blue-900), var(--blue-600));\r\n}\r\n\r\n.gradient-gray-600-to-500-90d {\r\n  background: var(--gradient-gray-600-to-500-90d);\r\n}\r\n\r\n.gradient-gray-700-to-600-45d {\r\n  background: var(--gradient-gray-700-to-600-45d);\r\n}\r\n\r\n.gradient-gray-800-to-600-45d {\r\n  background: var(--gradient-gray-800-to-600-45d);\r\n}\r\n\r\n.gradient-gray-800-to-600-90d {\r\n  background: var(--gradient-gray-800-to-600-90d);\r\n}\r\n\r\n.gradient-gray-800-to-700265-d {\r\n  background: var(--gradient-gray-800-to-700265-d);\r\n}\r\n\r\n.gradient-gray-900-to-600-45d {\r\n  background: var(--gradient-gray-900-to-600-45d);\r\n}\r\n\r\n.gradient-darkBlue-500-to-400-90d {\r\n  background: var(--gradient-darkBlue-500-to-400-90d);\r\n}\r\n\r\n.gradient-darkBlue-700-to-500-45d {\r\n  background: var(--gradient-darkBlue-700-to-500-45d);\r\n}\r\n\r\n.gradient-darkBlue-700-to-400-45d {\r\n  background: var(--gradient-darkBlue-700-to-400-45d);\r\n}\r\n\r\n.gradient-darkBlue-800-to-500-90d {\r\n  background: var(--gradient-darkBlue-800-to-500-90d);\r\n}\r\n\r\n.gradient-darkBlue-800-to-600265-d {\r\n  background: var(--gradient-darkBlue-800-to-600265-d);\r\n}\r\n\r\n.gradient-darkBlue-900-to-600-45d {\r\n  background: var(--gradient-darkBlue-900-to-600-45d);\r\n}\r\n\r\n.gradient-red-500-to-400-90d {\r\n  background: var(--gradient-red-500-to-400-90d);\r\n}\r\n\r\n.gradient-red-700-to-500-45d {\r\n  background: var(--gradient-red-700-to-500-45d);\r\n}\r\n\r\n.gradient-red-700-to-400-45d {\r\n  background: var(--gradient-red-700-to-400-45d);\r\n}\r\n\r\n.gradient-red-800-to-500-90d {\r\n  background: var(--gradient-red-800-to-500-90d);\r\n}\r\n\r\n.gradient-red-800-to-600265-d {\r\n  background: var(--gradient-red-800-to-600265-d);\r\n}\r\n\r\n.gradient-red-900-to-600-45d {\r\n  background: var(--gradient-red-900-to-600-45d);\r\n}\r\n\r\n.gradient-blue-500-to-400-90d {\r\n  background: var(--gradient-blue-500-to-400-90d);\r\n}\r\n\r\n.gradient-blue-700-to-500-45d {\r\n  background: var(--gradient-blue-700-to-500-45d);\r\n}\r\n\r\n.gradient-blue-700-to-400-45d {\r\n  background: var(--gradient-blue-700-to-400-45d);\r\n}\r\n\r\n.gradient-blue-800-to-500-90d {\r\n  background: var(--gradient-blue-800-to-500-90d);\r\n}\r\n\r\n.gradient-blue-800-to-600265-d {\r\n  background: var(--gradient-blue-800-to-600265-d);\r\n}\r\n\r\n.gradient-blue-900-to-600-45d {\r\n  background: var(--gradient-blue-900-to-600-45d);\r\n}\r\n\r\n/* Spacing Styles */\r\n:root {\r\n  /* Positive spacing */\r\n  --spacing-none: 0rem;\r\n  --spacing-half: 0.125rem;\r\n  --spacing-1: 0.25rem;\r\n  --spacing-2: 0.5rem;\r\n  --spacing-3: 0.75rem;\r\n  --spacing-4: 1rem;\r\n  --spacing-5: 1.25rem;\r\n  --spacing-6: 1.5rem;\r\n  --spacing-7: 2rem;\r\n  --spacing-8: 2.5rem;\r\n  --spacing-12: 3rem;\r\n  --spacing-16: 4rem;\r\n  --spacing-20: 5rem;\r\n  --spacing-24: 6rem;\r\n  --spacing-32: 8rem;\r\n  --spacing-40: 10rem;\r\n  --spacing-48: 12rem;\r\n  --spacing-56: 14rem;\r\n  --spacing-64: 16rem;\r\n\r\n  /* Negative spacing */\r\n\r\n  --spacing-negative-half: -0.125rem;\r\n  --spacing-negative-1: -0.25rem;\r\n  --spacing-negative-2: -0.5rem;\r\n  --spacing-negative-3: -0.75rem;\r\n  --spacing-negative-4: -1rem;\r\n  --spacing-negative-5: -1.25rem;\r\n  --spacing-negative-6: -1.5rem;\r\n  --spacing-negative-7: -2rem;\r\n\r\n  /* Radius  */\r\n  --rounded-none: 0rem;\r\n  --rounded-xs: 0.25rem;\r\n  --rounded-sm: 0.5rem;\r\n  --rounded-md: 0.75rem;\r\n  --rounded-lg: 1rem;\r\n  --rounded-xl: 1.5rem;\r\n  --rounded-2xl: 2rem;\r\n  --rounded-full: 62.438rem;\r\n}\r\n\r\n/* Typography Styles */\r\n\r\n:root {\r\n  /* Font Sizes */\r\n  --font-size-d-2xl: 4.5rem;\r\n  --font-size-d-xl: 3.75rem;\r\n  --font-size-d-lg: 3rem;\r\n  --font-size-d-md: 2.25rem;\r\n  --font-size-d-sm: 1.875rem;\r\n  --font-size-d-xs: 1.5rem;\r\n  --font-size-t-xl: 1.25rem;\r\n  --font-size-t-lg: 1.125rem;\r\n  --font-size-t-md: 1rem;\r\n  --font-size-t-sm: 0.875rem;\r\n  --font-size-t-xs: 0.75rem;\r\n  --font-size-t-xxs: 0.625rem;\r\n\r\n  /* Font Weights */\r\n  --font-weight-bold: 700;\r\n  --font-weight-semi-bold: 600;\r\n  --font-weight-medium: 500;\r\n  --font-weight-regular: 400;\r\n\r\n  /* Line Heights */\r\n  --font-line-height-d-2xl: 5rem;\r\n  --font-line-height-d-xl: 4.25rem;\r\n  --font-line-height-d-lg: 3.75rem;\r\n  --font-line-height-d-md: 2.75rem;\r\n  --font-line-height-d-sm: 2.375rem;\r\n  --font-line-height-d-xs: 2rem;\r\n  --font-line-height-t-xl: 2rem;\r\n  --font-line-height-t-lg: 1.875rem;\r\n  --font-line-height-t-md: 1.688rem;\r\n  --font-line-height-t-sm: 1.5rem;\r\n  --font-line-height-t-xs: 1.25rem;\r\n  --font-line-height-t-xxs: 1.125rem;\r\n\r\n  /* Letter Spacings */\r\n  --font-letter-spacing-d-2xl: -0.09rem;\r\n  --font-letter-spacing-d-xl: -0.075rem;\r\n  --font-letter-spacing-d-lg: -0.075rem;\r\n  --font-letter-spacing-d-md: -0.045rem;\r\n  --font-letter-spacing-d-sm: 0;\r\n  --font-letter-spacing-d-xs: 0;\r\n  --font-letter-spacing-d-xxs: 0;\r\n\r\n  /* Font Families */\r\n  --font-family-title: 'Sora';\r\n  --font-family-body: 'Sora';\r\n}\r\n\r\n/* Media queries for medium screens (tablet) */\r\n@media (max-width: 1199px) {\r\n  :root {\r\n    /* Font Sizes */\r\n    --font-size-d-2xl: 3.75rem;\r\n    --font-size-d-xl: 3.5rem;\r\n    --font-size-d-lg: 2.75rem;\r\n    --font-size-d-md: 2.25rem;\r\n    --font-size-d-sm: 1.875rem;\r\n    --font-size-d-xs: 1.5rem;\r\n\r\n    /* Line Heights */\r\n    --font-line-height-d-2xl: 4.25rem;\r\n    --font-line-height-d-xl: 3.75rem;\r\n    --font-line-height-d-lg: 2.4375rem;\r\n    --font-line-height-d-md: 2.75rem;\r\n    --font-line-height-d-sm: 2.375rem;\r\n    --font-line-height-d-xs: 2rem;\r\n\r\n    /* Letter Spacings */\r\n    --font-letter-spacing-2xl: -0.075rem;\r\n    --font-letter-spacing-xl: -0.065rem;\r\n    --font-letter-spacing-lg: -0.045rem;\r\n    --font-letter-spacing-md: -0.045rem;\r\n    --font-letter-spacing-sm: 0rem;\r\n    --font-letter-spacing-xs: 0rem;\r\n  }\r\n}\r\n\r\n/* Media queries for smaller screens (mobile) */\r\n@media (max-width: 743px) {\r\n  :root {\r\n    /* Font Sizes */\r\n    --font-size-d-2xl: 3rem;\r\n    --font-size-d-xl: 2.5rem;\r\n    --font-size-d-lg: 2rem;\r\n    --font-size-d-md: 1.75rem;\r\n    --font-size-d-sm: 1.5rem;\r\n    --font-size-d-xs: 1.25rem;\r\n\r\n    /* Line Heights */\r\n    --font-line-height-d-2xl: 3.375rem;\r\n    --font-line-height-d-xl: 2.875rem;\r\n    --font-line-height-d-lg: 2.5rem;\r\n    --font-line-height-d-md: 2.1375rem;\r\n    --font-line-height-d-sm: 2rem;\r\n    --font-line-height-d-xs: 1.75rem;\r\n\r\n    /* Letter Spacings */\r\n    --font-letter-spacing-2xl: -0.06rem;\r\n    --font-letter-spacing-xl: -0.05rem;\r\n    --font-letter-spacing-lg: -0.045rem;\r\n    --font-letter-spacing-md: 0rem;\r\n    --font-letter-spacing-sm: 0rem;\r\n    --font-letter-spacing-xs: 0rem;\r\n  }\r\n}\r\n\r\n.display-2xl-bold {\r\n  font-family: var(--font-family-title);\r\n  font-size: var(--font-size-d-2xl);\r\n  font-weight: var(--font-weight-bold);\r\n  line-height: var(--font-line-height-d-2xl);\r\n  letter-spacing: var(--font-letter-spacing-d-2xl);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.display-2xl-bold::before,\r\n.display-2xl-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.display-2xl-bold::before {\r\n  margin-bottom: -0.135em;\r\n}\r\n\r\n.display-2xl-bold::after {\r\n  margin-top: -0.205em;\r\n}\r\n\r\n.display-2xl-semi-bold {\r\n  font-family: var(--font-family-title);\r\n  font-size: var(--font-size-d-2xl);\r\n  font-weight: var(--font-weight-semi-bold);\r\n  line-height: var(--font-line-height-d-2xl);\r\n  letter-spacing: var(--font-letter-spacing-d-2xl);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.display-2xl-semi-bold::before,\r\n.display-2xl-semi-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.display-2xl-semi-bold::before {\r\n  margin-bottom: -0.135em;\r\n}\r\n\r\n.display-2xl-semi-bold::after {\r\n  margin-top: -0.205em;\r\n}\r\n\r\n.display-xl-bold {\r\n  font-family: var(--font-family-title);\r\n  font-size: var(--font-size-d-xl);\r\n  font-weight: var(--font-weight-bold);\r\n  line-height: var(--font-line-height-d-xl);\r\n  letter-spacing: var(--font-letter-spacing-d-xl);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.display-xl-bold::before,\r\n.display-xl-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.display-xl-bold::before {\r\n  margin-bottom: -0.145em;\r\n}\r\n\r\n.display-xl-bold::after {\r\n  margin-top: -0.215em;\r\n}\r\n\r\n.display-xl-semi-bold {\r\n  font-family: var(--font-family-title);\r\n  font-size: var(--font-size-d-xl);\r\n  font-weight: var(--font-weight-semi-bold);\r\n  line-height: var(--font-line-height-d-xl);\r\n  letter-spacing: var(--font-letter-spacing-d-xl);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.display-xl-semi-bold::before,\r\n.display-xl-semi-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.display-xl-semi-bold::before {\r\n  margin-bottom: -0.145em;\r\n}\r\n\r\n.display-xl-semi-bold::after {\r\n  margin-top: -0.215em;\r\n}\r\n\r\n.display-lg-bold {\r\n  font-family: var(--font-family-title);\r\n  font-size: var(--font-size-d-lg);\r\n  font-weight: var(--font-weight-bold);\r\n  line-height: var(--font-line-height-d-lg);\r\n  letter-spacing: var(--font-letter-spacing-d-lg);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.display-lg-bold::before,\r\n.display-lg-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.display-lg-bold::before {\r\n  margin-bottom: -0.015em;\r\n}\r\n\r\n.display-lg-bold::after {\r\n  margin-top: -0.095em;\r\n}\r\n\r\n.display-lg-semi-bold {\r\n  font-family: var(--font-family-title);\r\n  font-size: var(--font-size-d-lg);\r\n  font-weight: var(--font-weight-semi-bold);\r\n  line-height: var(--font-line-height-d-lg);\r\n  letter-spacing: var(--font-letter-spacing-d-lg);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.display-lg-semi-bold::before,\r\n.display-lg-semi-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.display-lg-semi-bold::before {\r\n  margin-bottom: -0.015em;\r\n}\r\n\r\n.display-lg-semi-bold::after {\r\n  margin-top: -0.095em;\r\n}\r\n\r\n.display-md-bold {\r\n  font-family: var(--font-family-title);\r\n  font-size: var(--font-size-d-md);\r\n  font-weight: var(--font-weight-bold);\r\n  line-height: var(--font-line-height-d-md);\r\n  letter-spacing: var(--font-letter-spacing-d-md);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.display-md-bold::before,\r\n.display-md-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.display-md-bold::before {\r\n  margin-bottom: -0.195em;\r\n}\r\n\r\n.display-md-bold::after {\r\n  margin-top: -0.255em;\r\n}\r\n\r\n.display-md-semi-bold {\r\n  font-family: var(--font-family-title);\r\n  font-size: var(--font-size-d-md);\r\n  font-weight: var(--font-weight-semi-bold);\r\n  line-height: var(--font-line-height-d-md);\r\n  letter-spacing: var(--font-letter-spacing-d-md);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.display-md-semi-bold::before,\r\n.display-md-semi-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.display-md-semi-bold::before {\r\n  margin-bottom: -0.195em;\r\n}\r\n\r\n.display-md-semi-bold::after {\r\n  margin-top: -0.255em;\r\n}\r\n\r\n.display-sm-bold {\r\n  font-family: var(--font-family-title);\r\n  font-size: var(--font-size-d-sm);\r\n  font-weight: var(--font-weight-bold);\r\n  line-height: var(--font-line-height-d-sm);\r\n  letter-spacing: var(--font-letter-spacing-d-sm);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.display-sm-bold::before,\r\n.display-sm-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.display-sm-bold::before {\r\n  margin-bottom: -0.195em;\r\n}\r\n\r\n.display-sm-bold::after {\r\n  margin-top: -0.255em;\r\n}\r\n\r\n.display-sm-semi-bold {\r\n  font-family: var(--font-family-title);\r\n  font-size: var(--font-size-d-sm);\r\n  font-weight: var(--font-weight-semi-bold);\r\n  line-height: var(--font-line-height-d-sm);\r\n  letter-spacing: var(--font-letter-spacing-d-sm);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.display-sm-semi-bold::before,\r\n.display-sm-semi-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.display-sm-semi-bold::before {\r\n  margin-bottom: -0.195em;\r\n}\r\n\r\n.display-sm-semi-bold::after {\r\n  margin-top: -0.255em;\r\n}\r\n\r\n.display-xs-bold {\r\n  font-family: var(--font-family-title);\r\n  font-size: var(--font-size-d-xs);\r\n  font-weight: var(--font-weight-bold);\r\n  line-height: var(--font-line-height-d-xs);\r\n  letter-spacing: var(--font-letter-spacing-d-xs);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.display-xs-bold::before,\r\n.display-xs-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.display-xs-bold::before {\r\n  margin-bottom: -0.199em;\r\n}\r\n\r\n.display-xs-bold::after {\r\n  margin-top: -0.195em; /* Continue from here */\r\n}\r\n\r\n.display-xs-semi-bold {\r\n  font-family: var(--font-family-title);\r\n  font-size: var(--font-size-d-xs);\r\n  font-weight: var(--font-weight-semi-bold);\r\n  line-height: var(--font-line-height-d-xs);\r\n  letter-spacing: var(--font-letter-spacing-d-xs);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.display-xs-semi-bold::before,\r\n.display-xs-semi-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.display-xs-semi-bold::before {\r\n  margin-bottom: -0.259em;\r\n}\r\n\r\n.display-xs-semi-bold::after {\r\n  margin-top: -0.295em;\r\n}\r\n\r\n.text-xl-bold {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-xl);\r\n  font-weight: var(--font-weight-bold);\r\n  line-height: var(--font-line-height-t-xl);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-xl-bold::before,\r\n.text-xl-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-xl-bold::before {\r\n  margin-bottom: -0.329em;\r\n}\r\n\r\n.text-xl-bold::after {\r\n  margin-top: -0.359em;\r\n}\r\n\r\n.text-xl-semi-bold {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-xl);\r\n  font-weight: var(--font-weight-semi-bold);\r\n  line-height: var(--font-line-height-t-xl);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-xl-semi-bold::before,\r\n.text-xl-semi-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-xl-semi-bold::before {\r\n  margin-bottom: -0.329em;\r\n}\r\n\r\n.text-xl-semi-bold::after {\r\n  margin-top: -0.359em;\r\n}\r\n\r\n.text-xl-medium {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-xl);\r\n  font-weight: var(--font-weight-medium);\r\n  line-height: var(--font-line-height-t-xl);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-xl-medium::before,\r\n.text-xl-medium::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-xl-medium::before {\r\n  margin-bottom: -0.339em;\r\n}\r\n\r\n.text-xl-medium::after {\r\n  margin-top: -0.399em;\r\n}\r\n\r\n.text-xl-regular {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-xl);\r\n  font-weight: var(--font-weight-regular);\r\n  line-height: var(--font-line-height-t-xl);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-xl-regular::before,\r\n.text-xl-regular::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-xl-regular::before {\r\n  margin-bottom: -0.339em;\r\n}\r\n\r\n.text-xl-regular::after {\r\n  margin-top: -0.399em;\r\n}\r\n\r\n.text-lg-bold {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-lg);\r\n  font-weight: var(--font-weight-bold);\r\n  line-height: var(--font-line-height-t-lg);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-lg-bold::before,\r\n.text-lg-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-lg-bold::before {\r\n  margin-bottom: -0.339em;\r\n}\r\n\r\n.text-lg-bold::after {\r\n  margin-top: -0.399em;\r\n}\r\n\r\n.text-lg-semi-bold {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-lg);\r\n  font-weight: var(--font-weight-semi-bold);\r\n  line-height: var(--font-line-height-t-lg);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-lg-semi-bold::before,\r\n.text-lg-semi-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-lg-semi-bold::before {\r\n  margin-bottom: -0.339em;\r\n}\r\n\r\n.text-lg-semi-bold::after {\r\n  margin-top: -0.399em;\r\n}\r\n\r\n.text-lg-medium {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-lg);\r\n  font-weight: var(--font-weight-medium);\r\n  line-height: var(--font-line-height-t-lg);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-lg-medium::before,\r\n.text-lg-medium::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-lg-medium::before {\r\n  margin-bottom: -0.349em;\r\n}\r\n\r\n.text-lg-medium::after {\r\n  margin-top: -0.389em;\r\n}\r\n\r\n.text-lg-regular {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-lg);\r\n  font-weight: var(--font-weight-regular);\r\n  line-height: var(--font-line-height-t-lg);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-lg-regular::before,\r\n.text-lg-regular::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-lg-regular::before {\r\n  margin-bottom: -0.349em;\r\n}\r\n\r\n.text-lg-regular::after {\r\n  margin-top: -0.389em;\r\n}\r\n\r\n.text-md-bold {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-md);\r\n  font-weight: var(--font-weight-bold);\r\n  line-height: var(--font-line-height-t-md);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-md-bold::before,\r\n.text-md-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-md-bold::before {\r\n  margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-bold::after {\r\n  margin-top: -0.389em;\r\n}\r\n\r\n.text-md-semi-bold {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-md);\r\n  font-weight: var(--font-weight-semi-bold);\r\n  line-height: var(--font-line-height-t-md);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-md-semi-bold::before,\r\n.text-md-semi-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-md-semi-bold::before {\r\n  margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-semi-bold::after {\r\n  margin-top: -0.389em;\r\n}\r\n\r\n.text-md-medium {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-md);\r\n  font-weight: var(--font-weight-medium);\r\n  line-height: var(--font-line-height-t-md);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-md-medium::before,\r\n.text-md-medium::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-md-medium::before {\r\n  margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-medium::after {\r\n  margin-top: -0.389em;\r\n}\r\n\r\n.text-md-regular {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-md);\r\n  font-weight: var(--font-weight-regular);\r\n  line-height: var(--font-line-height-t-md);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-md-regular::before,\r\n.text-md-regular::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-md-regular::before {\r\n  margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-regular::after {\r\n  margin-top: -0.389em;\r\n}\r\n\r\n.text-sm-bold {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-sm);\r\n  font-weight: var(--font-weight-bold);\r\n  line-height: var(--font-line-height-t-sm);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-sm-bold::before,\r\n.text-sm-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-sm-bold::before {\r\n  margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-bold::after {\r\n  margin-top: -0.349em;\r\n}\r\n\r\n.text-sm-semi-bold {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-sm);\r\n  font-weight: var(--font-weight-semi-bold);\r\n  line-height: var(--font-line-height-t-sm);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-sm-semi-bold::before,\r\n.text-sm-semi-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-sm-semi-bold::before {\r\n  margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-semi-bold::after {\r\n  margin-top: -0.349em;\r\n}\r\n\r\n.text-sm-medium {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-sm);\r\n  font-weight: var(--font-weight-medium);\r\n  line-height: var(--font-line-height-t-sm);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  position: relative;\r\n  display: inline-block;\r\n}\r\n\r\n.text-sm-medium::before,\r\n.text-sm-medium::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-sm-medium::before {\r\n  margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-medium::after {\r\n  margin-top: -0.299em;\r\n}\r\n\r\n.text-sm-regular {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-sm);\r\n  font-weight: var(--font-weight-regular);\r\n  line-height: var(--font-line-height-t-sm);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  position: relative;\r\n  display: inline-block;\r\n}\r\n\r\n.text-sm-regular::before,\r\n.text-sm-regular::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-sm-regular::before {\r\n  margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-regular::after {\r\n  margin-top: -0.299em;\r\n}\r\n\r\n.text-xs-bold {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-xs);\r\n  font-weight: var(--font-weight-bold);\r\n  line-height: var(--font-line-height-t-xs);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-xs-bold::before,\r\n.text-xs-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-xs-bold::before {\r\n  margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xs-bold::after {\r\n  margin-top: -0.416em;\r\n}\r\n\r\n.text-xs-semi-bold {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-xs);\r\n  font-weight: var(--font-weight-semi-bold);\r\n  line-height: var(--font-line-height-t-xs);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-xs-semi-bold::before,\r\n.text-xs-semi-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-xs-semi-bold::before {\r\n  margin-bottom: -0.321em;\r\n}\r\n\r\n.text-xs-semi-bold::after {\r\n  margin-top: -0.416em;\r\n}\r\n\r\n.text-xs-medium {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-xs);\r\n  font-weight: var(--font-weight-medium);\r\n  line-height: var(--font-line-height-t-xs);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-xs-medium::before,\r\n.text-xs-medium::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-xs-medium::before {\r\n  margin-bottom: -0.285em;\r\n}\r\n\r\n.text-xs-medium::after {\r\n  margin-top: -0.396em;\r\n}\r\n\r\n.text-xs-regular {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-xs);\r\n  font-weight: var(--font-weight-regular);\r\n  line-height: var(--font-line-height-t-xs);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-xs-regular::before,\r\n.text-xs-regular::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-xs-regular::before {\r\n  margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xs-regular::after {\r\n  margin-top: -0.396em;\r\n}\r\n\r\n.text-xxs-bold {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-xxs);\r\n  font-weight: var(--font-weight-bold);\r\n  line-height: var(--font-line-height-t-xxs);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-xxs-bold::before,\r\n.text-xxs-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-xxs-bold::before {\r\n  margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-bold::after {\r\n  margin-top: -0.416em;\r\n}\r\n\r\n.text-xxs-semi-bold {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-xxs);\r\n  font-weight: var(--font-weight-semi-bold);\r\n  line-height: var(--font-line-height-t-xxs);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-xxs-semi-bold::before,\r\n.text-xxs-semi-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-xxs-semi-bold::before {\r\n  margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-semi-bold::after {\r\n  margin-top: -0.416em;\r\n}\r\n\r\n.text-xxs-medium {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-xxs);\r\n  font-weight: var(--font-weight-medium);\r\n  line-height: var(--font-line-height-t-xxs);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-xxs-medium::before,\r\n.text-xxs-medium::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-xxs-medium::before {\r\n  margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-medium::after {\r\n  margin-top: -0.416em;\r\n}\r\n\r\n.text-xxs-regular {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-xxs);\r\n  font-weight: var(--font-weight-regular);\r\n  line-height: var(--font-line-height-t-xxs);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-xxs-regular::before,\r\n.text-xxs-regular::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-xxs-regular::before {\r\n  margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-regular::after {\r\n  margin-top: -0.416em;\r\n}\r\n\r\n/* Button slot styles */\r\n/* .slotted_button_text.primary {\r\n  color: var(--color-text-inverse, #ffffff) !important;\r\n}\r\n\r\n.slotted_button_text.secondary_gray {\r\n  color: var(--color-text, #4b5565) !important;\r\n}\r\n\r\n.slotted_button_text.secondary_color {\r\n  color: var(--color-text-brandRed, #e21b2e) !important;\r\n}\r\n\r\n.slotted_button_text.tertiary_gray {\r\n  color: var(--color-text, #4b5565) !important;\r\n}\r\n\r\n.slotted_button_text.tertiary_color {\r\n  color: var(--color-text-brandRed, #e21b2e) !important;\r\n}\r\n\r\n.slotted_button_text.link_gray {\r\n  color: var(--color-text, #4b5565) !important;\r\n}\r\n\r\n.slotted_button_text.link_color {\r\n  color: var(--color-link, #075db2) !important;\r\n}\r\n\r\n.slotted_button_text.primary.destructive {\r\n  color: var(--color-text-inverse, #ffffff) !important;\r\n}\r\n\r\n#slotted_button_text.primary.disabled,\r\n#slotted_button_text.secondary_gray.disabled,\r\n#slotted_button_text.secondary_color.disabled,\r\n#slotted_button_text.tertiary_gray.disabled,\r\n#slotted_button_text.tertiary_color.disabled,\r\n#slotted_button_text.link_gray.disabled,\r\n#slotted_button_text.link_color.disabled {\r\n  color: var(--color-text-disabled, #9aa4b2) !important;\r\n}\r\n\r\n#slotted_button_text.secondary_gray.default.destructive,\r\n#slotted_button_text.secondary_color.default.destructive,\r\n#slotted_button_text.tertiary_gray.default.destructive,\r\n#slotted_button_text.tertiary_color.default.destructive,\r\n#slotted_button_text.link_gray.default.destructive,\r\n#slotted_button_text.link_color.default.destructive {\r\n  color: var(--color-text-danger, #b51726) !important;\r\n} */\r\n\r\n\r\n/* Simple Sidebar Styles */\r\n.simple_sidebar_div {\r\n  transition: all 0.3s ease-in-out;\r\n  position: relative;\r\n  height: 100vh;\r\n}\r\n\r\n.pattern {\r\n  position: absolute;\r\n  top: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  overflow: hidden;\r\n  mix-blend-mode: multiply;\r\n}\r\n\r\n.simple_sidebar_div .pattern img, .primary_side_menu .pattern img {\r\n  width: 100%;\r\n  height: auto;\r\n}\r\n\r\n.simple_sidebar_div.expanded {\r\n  display: inline-flex;\r\n  flex-direction: column;\r\n  justify-content: space-between;\r\n  width: 16.75rem;\r\n}\r\n\r\n.simple_sidebar_div.collapsed {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  width: 5rem;\r\n}\r\n\r\n.nav {\r\n  display: flex;\r\n  width: 100%;\r\n  flex-direction: column;\r\n  gap: var(--spacing-6);\r\n}\r\n\r\n.sidebar_header.expanded {\r\n  display: flex;\r\n  padding: var(--spacing-none) var(--spacing-4) var(--spacing-none) var(--spacing-6);\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  margin-top: 1rem;\r\n}\r\n\r\n.sidebar_header.collapsed {\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  margin-top: 1rem;\r\n  gap: 1.5rem;\r\n}\r\n\r\n.logo_and_name.expanded {\r\n  display: flex;\r\n  justify-content: flex-start;\r\n  align-items: center;\r\n}\r\n\r\n.logo_and_name.collapsed {\r\n  display: flex;\r\n  justify-content: center;\r\n}\r\n\r\n.sidebar_logo {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.69rem;\r\n}\r\n\r\n.collapse_button.collapsed {\r\n  display: flex;\r\n  justify-content: center;\r\n}\r\n\r\n.application_name {\r\n  display: flex;\r\n  padding: var(--spacing-6);\r\n}\r\n\r\n.wrapper {\r\n  display: flex;\r\n  padding: var(--spacing-4) var(--spacing-5) var(--spacing-5) var(--spacing-5);\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  align-items: flex-start;\r\n  gap: var(--spacing-4);\r\n  align-self: stretch;\r\n  border-radius: var(--rounded-sm);\r\n  position: relative;\r\n  width: 13.75rem;\r\n  height: auto;\r\n  overflow: hidden;\r\n}\r\n\r\n.application_icon svg {\r\n  width: 2.5rem;\r\n  height: 2.5rem;\r\n}\r\n\r\n.application_icon.plain_background path[stroke] {\r\n  stroke: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.application_icon.plain_background path[fill] {\r\n  fill: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.application_icon.colored_background path[stroke] {\r\n  stroke: var(--base-white, #ffffff);\r\n}\r\n\r\n.application_icon.colored_background path[fill] {\r\n  fill: var(--base-white, #ffffff);\r\n}\r\n\r\n.application_name_pattern {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  mix-blend-mode: multiply;\r\n}\r\n\r\n.application_name_pattern img {\r\n  width: 100%;\r\n}\r\n\r\n.wrapper {\r\n  width: 100%;\r\n}\r\n\r\n.wrapper.colored_background {\r\n  border: 1px solid rgba(255, 255, 255, 0.1);\r\n  background: rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.wrapper.plain_background {\r\n  background: var(--color-background-gray-subtlest, #f6f8fa);\r\n  border: 1px solid var(--color-border-subtler, #e3e8ef);\r\n}\r\n\r\n::slotted([slot='application_name'].plain_background) {\r\n  color: var(--color-text-information-bold, #042f59) !important;\r\n}\r\n\r\n::slotted([slot='application_name'].colored_background) {\r\n  color: var(--base-white, #ffffff) !important;\r\n}\r\n\r\n/* Simple Sidebar Category Styles */\r\n.simple_sidebar_div.plain_background {\r\n  border-right: 0.7px solid var(--color-border-subtle, #cdd5df);\r\n  background: var(--color-surface, #ffffff);\r\n}\r\n\r\n.simple_sidebar_div.colored_background {\r\n  background-image: linear-gradient(180deg, #064e94 0%, #02182e 100%);\r\n  background-size: cover;\r\n}\r\n\r\n.item {\r\n  display: flex;\r\n  flex-direction: column;\r\n  width: 100%;\r\n  gap: var(--spacing-1);\r\n}\r\n\r\n/* Complex Sidebar Styles */\r\n.sidebar_and_nav {\r\n  width: fit-content;\r\n  transition: all 0.3s ease-in-out;\r\n}\r\n\r\n.complex_sidebar_div {\r\n  display: flex;\r\n  gap: 0;\r\n  width: fit-content;\r\n  height: 100vh;\r\n}\r\n\r\n.primary_side_menu {\r\n  position: relative;\r\n  width: 6rem;\r\n}\r\n\r\n.primary_side_menu.standard {\r\n  padding: var(--spacing-4) var(--spacing-none) 0.5rem var(--spacing-none);\r\n}\r\n\r\n.primary_side_menu.compact {\r\n  padding: var(--spacing-2) var(--spacing-none) 0.5rem var(--spacing-none);\r\n}\r\n\r\n.primary_side_menu_container {\r\n  width: 100%;\r\n}\r\n\r\n.nav_div {\r\n  display: flex;\r\n  height: 4.5rem;\r\n  padding: 0 var(--spacing-5) 0 var(--spacing-7);\r\n  align-items: center;\r\n  gap: 1.5rem;\r\n  flex: 1 0 0;\r\n  border-bottom: 1px solid var(--color-border-subtler, #e3e8ef);\r\n  background: var(--color-surface, #ffffff);\r\n}\r\n\r\n.logo_and_button {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  flex: 1 0 0;\r\n}\r\n\r\n/* Complex Sidebar Category Styles */\r\n.primary_side_menu.plain_background {\r\n  border-right: 0.7px solid var(--color-border-subtle, #cdd5df);\r\n  background: var(--color-surface, #ffffff);\r\n}\r\n\r\n.primary_side_menu.colored_background {\r\n  background-image: linear-gradient(180deg, #064e94 0%, #02182e 100%);\r\n  background-size: cover;\r\n}\r\n\r\n/* Complex Sidebar State Styles */\r\n.secondary_side_menu {\r\n  transition: width 0.3s ease-in-out;\r\n}\r\n\r\n.secondary_side_menu.expanded {\r\n  width: 17rem;\r\n}\r\n\r\n.secondary_side_menu.collapsed {\r\n  width: 5rem;\r\n}\r\n\r\n.secondary_side_menu.colored_background {\r\n  background: var(--color-background-information-subtlest, #e4f0fc);\r\n}\r\n\r\n.secondary_side_menu.plain_background {\r\n  background: var(--color-surface, #ffffff);\r\n  border-right: 0.7px solid var(--color-border-subtle, #cdd5df);\r\n}\r\n\r\n.sside_menu {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--spacing-2);\r\n  height: 100vh;\r\n  padding: var(--spacing-4) var(--spacing-none);\r\n}\r\n\r\n.information_header {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--spacing-2);\r\n  align-self: stretch;\r\n}\r\n\r\n.help_icon.plain_background path[stroke] {\r\n  stroke: var(--color-text-brandDarkBlue, #212c65);\r\n}\r\n\r\n.help_icon.plain_background path[fill] {\r\n  fill: var(--color-text-brandDarkBlue, #212c65);\r\n}\r\n\r\n.help_icon.colored_background path[stroke] {\r\n  stroke: var(--base-white, #ffffff);\r\n}\r\n\r\n.help_icon.colored_background path[fill] {\r\n  fill: var(--base-white, #ffffff);\r\n}\r\n\r\n.need_help.plain_background {\r\n  color: var(--color-text-brandDarkBlue, #212c65);\r\n}\r\n\r\n.need_help.colored_background {\r\n  color: var(--base-white, #ffffff);\r\n}\r\n\r\n.info.colored_background {\r\n  color: var(--base-white, #ffffff);\r\n}\r\n\r\n.info.plain_background {\r\n  color: var(--color-text-bold, #202939);\r\n}\r\n\r\n.phone_no {\r\n  width: 100%;\r\n  word-wrap: break-word;\r\n}\r\n";
+const gbSidebarCss = "/* @import 'tailwind.css'; */\r\n@import url('https://fonts.googleapis.com/css2?family=Sora&display=swap');\r\n/**\r\n * Global styles for portal-based dropdowns\r\n * Applied outside shadow DOM context\r\n */\r\n\r\n.portal_dropdown_wrapper {\r\n  width: fit-content;\r\n  border-radius: var(--rounded-sm);\r\n  border: 1px solid var(--color-border-subtler, #e3e8ef);\r\n  background: var(--color-surface, #ffffff);\r\n  box-shadow: var(--shadow-md);\r\n  position: absolute;\r\n  z-index: 9999; /* High z-index to appear above sticky columns */\r\n  overflow: hidden;\r\n}\r\n\r\n.portal_dropdown_wrapper gb-dropdown-items-with-shortcut {\r\n  display: block;\r\n  width: 100%;\r\n}\r\n\r\n/* .portal_dropdown_wrapper gb-dropdown-items-with-shortcut:hover {\r\n  background: var(--color-background-gray-subtler, #eef2f6);\r\n} */\r\n\r\n\r\n:root {\r\n  /* --------------------------------------Primary Colors--------------------------------------------- */\r\n  /* base color palette */\r\n  --base-white: #fff;\r\n  --base-black: #000;\r\n\r\n  /* gray color palette  */\r\n  --gray-25: #f9fafb;\r\n  --gray-50: #f6f8fa;\r\n  --gray-100: #eef2f6;\r\n  --gray-200: #e3e8ef;\r\n  --gray-300: #cdd5df;\r\n  --gray-400: #808c9e;\r\n  --gray-500: #697586;\r\n  --gray-600: #4b5565;\r\n  --gray-700: #364152;\r\n  --gray-800: #202939;\r\n  --gray-900: #121926;\r\n  --gray-950: #0d121c;\r\n\r\n  /* brand dark blue color palette */\r\n  --brandDarkBlue-25: #f9f9fb;\r\n  --brandDarkBlue-50: #edeef3;\r\n  --brandDarkBlue-100: #d3d5e0;\r\n  --brandDarkBlue-200: #b5b9cc;\r\n  --brandDarkBlue-300: #9095b2;\r\n  --brandDarkBlue-400: #464f7f;\r\n  --brandDarkBlue-500: #212c65;\r\n  --brandDarkBlue-600: #1e285c;\r\n  --brandDarkBlue-700: #1c2554;\r\n  --brandDarkBlue-800: #161d43;\r\n  --brandDarkBlue-900: #0b0f22;\r\n  --brandDarkBlue-950: #070914;\r\n\r\n  /* brand red color palette */\r\n  --brandRed-25: #fffbfa;\r\n  --brandRed-50: #fef1f2;\r\n  --brandRed-100: #fde3e5;\r\n  --brandRed-200: #f9b4ba;\r\n  --brandRed-300: #f68e98;\r\n  --brandRed-400: #f36976;\r\n  --brandRed-500: #e21b2e;\r\n  --brandRed-600: #cc1a2a;\r\n  --brandRed-700: #b51726;\r\n  --brandRed-800: #8c121d;\r\n  --brandRed-900: #680d16;\r\n  --brandRed-950: #3f080d;\r\n\r\n  /* warning color palette */\r\n  --warning-25: #fffcf5;\r\n  --warning-50: #fffaeb;\r\n  --warning-100: #fef0c7;\r\n  --warning-200: #fedf89;\r\n  --warning-300: #fec84b;\r\n  --warning-400: #fdb022;\r\n  --warning-500: #f79009;\r\n  --warning-600: #dc6803;\r\n  --warning-700: #b54708;\r\n  --warning-800: #93370d;\r\n  --warning-900: #7a2e0e;\r\n  --warning-950: #4e1d09;\r\n\r\n  /* success color palette  */\r\n  --success-25: #f6fef9;\r\n  --success-50: #ecfdf3;\r\n  --success-100: #dcfaeb;\r\n  --success-200: #a9efc5;\r\n  --success-300: #75e0a7;\r\n  --success-400: #47cd89;\r\n  --success-500: #17b26a;\r\n  --success-600: #079455;\r\n  --success-700: #067647;\r\n  --success-800: #085d3a;\r\n  --success-900: #074d31;\r\n  --success-950: #053321;\r\n\r\n  /* ------------------------------------------opacity color palette--------------------------------------  */\r\n  /* 0% opacity */\r\n  /* White */\r\n  --white-opacity0: rgba(255, 255, 255, 0);\r\n\r\n  /* Gray */\r\n  --gray25-opacity0: rgba(249, 250, 251, 0);\r\n  --gray900-opacity0: rgba(18, 25, 38, 0);\r\n  --gray950-opacity0: rgba(13, 18, 28, 0);\r\n\r\n  /* 20% opacity */\r\n  /* White */\r\n  --white-opacity20: rgba(255, 255, 255, 0.2);\r\n\r\n  /* Dark Blue */\r\n  --darkBlue200-opacity20: rgba(181, 185, 204, 0.2);\r\n  --darkBlue500-opacity20: rgba(33, 44, 101, 0.2);\r\n\r\n  /* Gray */\r\n  --gray25-opacity20: rgba(249, 250, 251, 0.2);\r\n  --gray900-opacity20: rgba(18, 25, 38, 0.2);\r\n  --gray950-opacity20: rgba(13, 18, 28, 0.2);\r\n\r\n  /* 30% opacity */\r\n  --darkBlue200-opacity30: rgba(181, 185, 204, 0.3);\r\n  --darkBlue500-opacity30: rgba(33, 44, 101, 0.3);\r\n\r\n  /* 40% opacity */\r\n  --darkBlue200-opacity40: rgba(181, 185, 204, 0.4);\r\n  --darkBlue500-opacity40: rgba(33, 44, 101, 0.4);\r\n\r\n  /* 50% opacity */\r\n  /* White */\r\n  --white-opacity50: rgba(255, 255, 255, 0.5);\r\n\r\n  /* Gray */\r\n  --gray25-opacity50: rgba(249, 250, 251, 0.5);\r\n  --gray900-opacity50: rgba(18, 25, 38, 0.5);\r\n  --gray950-opacity50: rgba(13, 18, 28, 0.5);\r\n\r\n  /* ------------------------------------------Secondary Color------------------------------------------- */\r\n  /* blueLight color palete */\r\n  --lightBlue-25: #f5fbff;\r\n  --lightBlue-50: #f0f9ff;\r\n  --lightBlue-100: #e0f2fe;\r\n  --lightBlue-200: #b9e6fe;\r\n  --lightBlue-300: #7cd4fd;\r\n  --lightBlue-400: #7cd4fd;\r\n  --lightBlue-500: #0ba5ec;\r\n  --lightBlue-600: #0086c9;\r\n  --lightBlue-700: #026aa2;\r\n  --lightBlue-800: #065986;\r\n  --lightBlue-900: #0b4a6f;\r\n  --lightBlue-950: #062c41;\r\n\r\n  /* blue color palette */\r\n  --blue-25: #ecf5fe;\r\n  --blue-50: #e4f0fc;\r\n  --blue-100: #c8e0f9;\r\n  --blue-200: #9ac7f4;\r\n  --blue-300: #6aa9e7;\r\n  --blue-400: #378fe6;\r\n  --blue-500: #075db2;\r\n  --blue-600: #064e94;\r\n  --blue-700: #053e77;\r\n  --blue-800: #042f59;\r\n  --blue-900: #022445;\r\n  --blue-950: #021d37;\r\n\r\n  /* Purple color palete */\r\n  --purple-25: #fafaff;\r\n  --purple-50: #f4f3ff;\r\n  --purple-100: #ebe9fe;\r\n  --purple-200: #d9d6fe;\r\n  --purple-300: #bdb4fe;\r\n  --purple-400: #9b8afb;\r\n  --purple-500: #7a5af8;\r\n  --purple-600: #6938ef;\r\n  --purple-700: #5925dc;\r\n  --purple-800: #4a1fb8;\r\n  --purple-900: #3e1c96;\r\n  --purple-950: #27115f;\r\n\r\n  /* pink color palette */\r\n  --pink-25: #fef6fb;\r\n  --pink-50: #fdf2fa;\r\n  --pink-100: #fce7f6;\r\n  --pink-200: #fcceee;\r\n  --pink-300: #faa7e0;\r\n  --pink-400: #f670c7;\r\n  --pink-500: #ee46bc;\r\n  --pink-600: #dd2590;\r\n  --pink-700: #c11574;\r\n  --pink-800: #9e165f;\r\n  --pink-900: #851651;\r\n  --pink-950: #4e0d30;\r\n\r\n  /* -------------------------------------------------Token---------------------------------------------- */\r\n\r\n  /* -----------Text Color----------- */\r\n\r\n  [data-theme='light'] {\r\n    --color-text-bold: var(--gray-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-bold: var(--gray-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text: var(--gray-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text: var(--gray-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-subtle: var(--gray-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-subtle: var(--gray-400);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-disabled: var(--gray-400);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-disabled: var(--gray-500);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-inverse: var(--base-white);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-inverse: var(--base-black);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-brandDarkBlue: var(--brandDarkBlue-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-brandDarkBlue: var(--brandDarkBlue-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-brandRed: var(--brandRed-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-brandRed: var(--brandRed-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-selected: var(--blue-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-selected: var(--blue-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-danger-bold: var(--brandRed-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-danger-bold: var(--brandRed-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-danger: var(--brandRed-700);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-danger: var(--brandRed-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-danger-subtle: var(--brandRed-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-danger-subtle: var(--brandRed-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-danger-inverse: var(--base-white);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-danger-inverse: var(--brandRed-950);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-warning-bold: var(--warning-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-warning-bold: var(--warning-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-warning: var(--warning-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-warning: var(--warning-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-warning-subtle: var(--warning-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-warning-subtle: var(--warning-400);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-success-bold: var(--success-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-success-bold: var(--success-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-success: var(--success-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-success: var(--success-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-success-subtle: var(--success-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-success-subtle: var(--success-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-discovery-bold: var(--lightBlue-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-discovery-bold: var(--lightBlue-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-discovery: var(--lightBlue-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-discovery: var(--lightBlue-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-discovery-subtle: var(--lightBlue-400);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-discovery-subtle: var(--lightBlue-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-information-bold: var(--blue-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-information-bold: var(--blue-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-information: var(--blue-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-information: var(--blue-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-information-subtle: var(--blue-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-information-subtle: var(--blue-400);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-purple-bold: var(--purple-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-purple-bold: var(--purple-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-purple: var(--purple-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-purple: var(--purple-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-purple-subtle: var(--purple-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-purple-subtle: var(--purple-400);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-pink-bold: var(--pink-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-pink-bold: var(--pink-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-pink: var(--pink-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-pink: var(--pink-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-pink-subtle: var(--pink-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-pink-subtle: var(--pink-400);\r\n  }\r\n\r\n  /* --------------Link color--------------- */\r\n\r\n  [data-theme='light'] {\r\n    --color-link: var(--blue-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-link: var(--blue-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-link-pressed: var(--blue-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-link-pressed: var(--blue-600);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-link-visited: var(--lightBlue-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-link-visited: var(--lightBlue-300);\r\n  }\r\n\r\n  /* --------------Icon color--------------- */\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-bold: var(--gray-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-bold: var(--gray-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon: var(--gray-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon: var(--gray-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-subtle: var(--gray-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-subtle: var(--gray-400);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-disabled: var(--gray-400);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-disabled: var(--gray-500);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-inverse: var(--base-white);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-inverse: var(--gray-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-brandDarkBlue: var(--brandDarkBlue-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-brandDarkBlue: var(--brandDarkBlue-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-brandRed: var(--brandRed-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-brandRed: var(--brandRed-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-selected: var(--blue-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-selected: var(--blue-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-danger-bold: var(--brandRed-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-danger-bold: var(--brandRed-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-danger: var(--brandRed-700);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-danger: var(--brandRed-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-danger-inverse: var(--base-white);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-danger-inverse: var(--brandRed-950);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-warning-bold: var(--warning-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-warning-bold: var(--warning-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-warning: var(--warning-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-warning: var(--warning-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-success-bold: var(--success-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-success-bold: var(--success-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-success: var(--success-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-success: var(--success-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-discovery-bold: var(--lightBlue-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-discovery-bold: var(--lightBlue-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-discovery: var(--lightBlue-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-discovery: var(--lightBlue-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-information-bold: var(--blue-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-information-bold: var(--blue-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-information: var(--blue-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-information: var(--blue-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-purple-bold: var(--purple-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-purple-bold: var(--purple-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-purple: var(--purple-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-purple: var(--purple-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-pink-bold: var(--pink-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-pink-bold: var(--pink-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-pink: var(--pink-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-pink: var(--pink-300);\r\n  }\r\n\r\n  /* ----------------Border Color --------------- */\r\n\r\n  [data-theme='light'] {\r\n    --color-border-bold: var(--gray-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-bold: var(--gray-400);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border: var(--gray-400);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border: var(--gray-500);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-subtle: var(--gray-300);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-subtle: var(--gray-700);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-subtler: var(--gray-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-subtler: var(--gray-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-disabled: var(--gray-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-disabled: var(--gray-700);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-inverse: var(--base-white);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-inverse: var(--gray-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-input: var(--gray-300);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-input: var(--gray-600);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-focus: var(--gray-400);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-focus: var(--blue-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-selected: var(--blue-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-selected: var(--blue-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-brandDarkBlue: var(--brandDarkBlue-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-brandDarkBlue: var(--brandDarkBlue-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-brandRed: var(--brandRed-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-brandRed: var(--brandRed-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-danger-bold: var(--brandRed-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-danger-bold: var(--brandRed-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-danger: var(--brandRed-700);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-danger: var(--brandRed-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-danger-subtle: var(--brandRed-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-danger-subtle: var(--brandRed-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-danger-subtler: var(--brandRed-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-danger-subtler: var(--brandRed-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-warning-bold: var(--warning-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-warning-bold: var(--warning-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-warning: var(--warning-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-warning: var(--warning-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-warning-subtle: var(--warning-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-warning-subtle: var(--warning-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-warning-subtler: var(--warning-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-warning-subtler: var(--warning-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-success-bold: var(--success-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-success-bold: var(--success-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-success: var(--success-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-success: var(--success-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-success-subtle: var(--success-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-success-subtle: var(--success-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-success-subtler: var(--success-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-success-subtler: var(--success-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-discovery-bold: var(--lightBlue-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-discovery-bold: var(--lightBlue-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-discovery: var(--lightBlue-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-discovery: var(--lightBlue-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-discovery-subtle: var(--lightBlue-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-discovery-subtle: var(--lightBlue-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-discovery-subtler: var(--lightBlue-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-discovery-subtler: var(--lightBlue-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-information-bold: var(--blue-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-information-bold: var(--blue-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-information: var(--blue-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-information: var(--blue-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-information-subtle: var(--blue-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-information-subtle: var(--blue-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-information-subtler: var(--blue-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-information-subtler: var(--blue-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-purple-bold: var(--purple-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-purple-bold: var(--purple-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-purple: var(--purple-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-purple: var(--purple-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-purple-subtle: var(--purple-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-purple-subtle: var(--purple-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-purple-subtler: var(--purple-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-purple-subtler: var(--purple-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-pink-bold: var(--pink-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-pink-bold: var(--pink-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-pink: var(--pink-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-pink: var(--pink-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-pink-subtle: var(--pink-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-pink-subtle: var(--pink-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-pink-subtler: var(--pink-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-pink-subtler: var(--pink-900);\r\n  }\r\n\r\n  /* Emmanuel Kadiri starts from background color */\r\n\r\n  /* ----------------Background Color --------------- */\r\n\r\n  [data-theme='light'] {\r\n    --color-background-card-bold: var(--gray-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-card-bold: var(--gray-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-card: var(--base-white);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-card: var(--gray-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-input: var(--gray-400);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-input: var(--gray-950);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-disabled: var(--gray-50);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-disabled: var(--gray-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-btn-disabled: var(--gray-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-btn-disabled: var(--gray-700);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-selected: var(--blue-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-selected: var(--blue-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-brandDarkblue: var(--brandDarkBlue-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-brandDarkblue: var(--brandDarkBlue-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-brandRed: var(--brandRed-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-brandRed: var(--brandRed-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-brandRed-hover: var(--brandRed-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-brandRed-hover: var(--brandRed-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-brandRed-pressed: var(--brandRed-700);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-brandRed-pressed: var(--brandRed-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-gray-bold: var(--gray-400);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-gray-bold: var(--gray-500);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-gray: var(--gray-300);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-gray: var(--gray-600);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-gray-subtle: var(--gray-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-gray-subtle: var(--gray-700);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-gray-subtler: var(--gray-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-gray-subtler: var(--gray-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-gray-subtlest: var(--gray-50);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-gray-subtlest: var(--gray-950);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-danger-bold: var(--brandRed-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-danger-bold: var(--brandRed-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-danger: var(--brandRed-700);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-danger: var(--brandRed-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-danger-subtle: var(--brandRed-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-danger-subtle: var(--brandRed-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-danger-subtler: var(--brandRed-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-danger-subtler: var(--brandRed-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-danger-subtlest: var(--brandRed-50);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-danger-subtlest: var(--brandRed-950);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-warning-bold: var(--warning-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-warning-bold: var(--warning-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-warning: var(--warning-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-warning: var(--warning-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-warning-subtle: var(--warning-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-warning-subtle: var(--warning-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-warning-subtler: var(--warning-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-warning-subtler: var(--warning-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-warning-subtlest: var(--warning-50);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-warning-subtlest: var(--warning-950);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-success-bold: var(--success-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-success-bold: var(--success-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-success: var(--success-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-success: var(--success-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-success-subtle: var(--success-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-success-subtle: var(--success-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-success-subtler: var(--success-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-success-subtler: var(--success-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-success-subtlest: var(--success-50);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-success-subtlest: var(--success-950);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-discovery-bold: var(--lightBlue-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-discovery-bold: var(--lightBlue-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-discovery: var(--lightBlue-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-discovery: var(--lightBlue-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-discovery-subtle: var(--lightBlue-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-discovery-subtle: var(--lightBlue-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-discovery-subtler: var(--lightBlue-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-discovery-subtler: var(--lightBlue-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-discovery-subtlest: var(--lightBlue-50);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-discovery-subtlest: var(--lightBlue-950);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-information-bold: var(--blue-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-information-bold: var(--blue-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-information: var(--blue-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-information: var(--blue-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-information-subtle: var(--blue-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-information-subtle: var(--blue-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-information-subtler: var(--blue-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-information-subtler: var(--blue-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-information-subtlest: var(--blue-50);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-information-subtlest: var(--blue-950);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-purple-bold: var(--purple-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-purple-bold: var(--blue-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-purple: var(--purple-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-purple: var(--blue-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-purple-subtle: var(--purple-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-purple-subtle: var(--purple-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-purple-subtler: var(--purple-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-purple-subtler: var(--purple-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-purple-subtlest: var(--purple-50);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-purple-subtlest: var(--purple-950);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-pink-bold: var(--pink-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-pink-bold: var(--pink-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-pink: var(--pink-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-pink: var(--pink-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-pink-subtle: var(--pink-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-pink-subtle: var(--pink-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-pink-subtler: var(--pink-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-pink-subtler: var(--pink-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-pink-subtlest: var(--purple-50);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-pink-subtlest: var(--pink-950);\r\n  }\r\n\r\n  /* ----------------Blanket Color --------------- */\r\n  [data-theme='light'] {\r\n    --color-blanket: var(--darkBlue500-opacity20);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-blanket: var(--darkBlue200-opacity20);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-blanket-subtle: var(--darkBlue500-opacity30);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-blanket-subtle: var(--darkBlue200-opacity30);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-blanket-subtler: var(--darkBlue500-opacity40);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-blanket-subtler: var(--darkBlue200-opacity40);\r\n  }\r\n\r\n  /* ----------------Skeleton Color --------------- */\r\n  [data-theme='light'] {\r\n    --color-skeleton: var(--gray-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-skeleton: var(--gray-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-skeleton-bold: var(--gray-300);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-skeleton-bold: var(--gray-700);\r\n  }\r\n\r\n  /* ----------------Surface Color --------------- */\r\n  [data-theme='light'] {\r\n    --color-surface-bold: var(--gray-50);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-surface-bold: var(--gray-950);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-surface: var(--base-white);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-surface: var(--gray-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-surface-hovered: var(--gray-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-surface-hovered: var(--gray-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-surface-pressed: var(--gray-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-surface-pressed: var(--gray-700);\r\n  }\r\n\r\n  /* ----------------Transparent Color --------------- */\r\n  [data-theme='light'] {\r\n    --color-surface-transparent50: var(--white-opacity50);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-surface-transparent50: var(--gray900-opacity50);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-surface-transparent20: var(--white-opacity20);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-surface-transparent20: var(--gray900-opacity20);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-surface-transparent-full: var(--white-opacity0);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-surface-transparent-full: var(--gray900-opacity0);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-surface-bold-transparent50: var(--gray25-opacity50);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-surface-bold-transparent50: var(--gray950-opacity50);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-surface-bold-transparent20: var(--gray25-opacity20);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-surface-bold-transparent20: var(--gray950-opacity20);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-surface-bold-transparent-full: var(--gray25-opacity0);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-surface-bold-transparent-full: var(--gray950-opacity0);\r\n  }\r\n}\r\n\r\n/* -----------------Shadow and Blur----------------- */\r\n:root {\r\n  --shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\r\n  --shadow-sm: 0px 1px 3px 0px rgba(16, 24, 40, 0.1), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);\r\n  --shadow-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);\r\n  --shadow-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);\r\n  --shadow-xl: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);\r\n  --shadow-2xl: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);\r\n  --shadow-3xl: 0px 32px 64px -12px rgba(16, 24, 40, 0.14);\r\n\r\n  --blur-sm: blur(4px);\r\n  --blur-md: blur(8px);\r\n  --blur-lg: blur(12px);\r\n  --blur-xl: blur(20px);\r\n}\r\n\r\n.shadow-xs {\r\n  box-shadow: var(--shadow-xs);\r\n}\r\n\r\n.shadow-sm {\r\n  box-shadow: var(--shadow-sm);\r\n}\r\n\r\n.shadow-md {\r\n  box-shadow: var(--shadow-md);\r\n}\r\n\r\n.shadow-lg {\r\n  box-shadow: var(--shadow-lg);\r\n}\r\n\r\n.shadow-xl {\r\n  box-shadow: var(--shadow-xl);\r\n}\r\n\r\n.shadow-2xl {\r\n  box-shadow: var(--shadow-2xl);\r\n}\r\n\r\n.shadow-3xl {\r\n  box-shadow: var(--shadow-3xl);\r\n}\r\n\r\n.blur-sm {\r\n  backdrop-filter: var(--blur-sm);\r\n}\r\n\r\n.blur-md {\r\n  backdrop-filter: var(--blur-md);\r\n}\r\n\r\n.blur-lg {\r\n  backdrop-filter: var(--blur-lg);\r\n}\r\n\r\n.blur-xl {\r\n  backdrop-filter: var(--blur-xl);\r\n}\r\n\r\n/* -----------------Gradients----------------- */\r\n:root {\r\n  /* Gray Gradients */\r\n  /* --gray-gradient-600: linear-gradient(); */\r\n  --gradient-gray-600-to-500-90d: linear-gradient(90deg, var(--gray-600), var(--gray-500));\r\n  --gradient-gray-700-to-600-45d: linear-gradient(45deg, var(--gray-700), var(--gray-600));\r\n  --gradient-gray-800-to-600-45d: linear-gradient(45deg, var(--gray-800), var(--gray-600));\r\n  --gradient-gray-800-to-600-90d: linear-gradient(90deg, var(--gray-800), var(--gray-600));\r\n  --gradient-gray-800-to-700265-d: linear-gradient(26.5deg, var(--gray-800), var(--gray-700));\r\n  --gradient-gray-900-to-600-45d: linear-gradient(45deg, var(--gray-900), var(--gray-600));\r\n\r\n  /* Brand Dark Blue Gradients */\r\n  --gradient-darkBlue-500-to-400-90d: linear-gradient(90deg, var(--brandDarkBlue-500), var(--brandDarkBlue-400));\r\n  --gradient-darkBlue-700-to-500-45d: linear-gradient(45deg, var(--brandDarkBlue-700), var(--brandDarkBlue-500));\r\n  --gradient-darkBlue-700-to-400-45d: linear-gradient(45deg, var(--brandDarkBlue-700), var(--brandDarkBlue-400));\r\n  --gradient-darkBlue-800-to-500-90d: linear-gradient(90deg, var(--brandDarkBlue-800), var(--brandDarkBlue-500));\r\n  --gradient-darkBlue-800-to-600265-d: linear-gradient(26.5deg, var(--brandDarkBlue-800), var(--brandDarkBlue-600));\r\n  --gradient-darkBlue-900-to-600-45d: linear-gradient(45deg, var(--brandDarkBlue-900), var(--brandDarkBlue-600));\r\n\r\n  /* Brand Red Gradients */\r\n  --gradient-red-500-to-400-90d: linear-gradient(90deg, var(--brandRed-600), var(--brandRed-400));\r\n  --gradient-red-700-to-500-45d: linear-gradient(45deg, var(--brandRed-700), var(--brandRed-500));\r\n  --gradient-red-700-to-400-45d: linear-gradient(45deg, var(--brandRed-700), var(--brandRed-400));\r\n  --gradient-red-800-to-500-90d: linear-gradient(90deg, var(--brandRed-800), var(--brandRed-500));\r\n  --gradient-red-800-to-600265-d: linear-gradient(26.5deg, var(--brandRed-800), var(--brandRed-600));\r\n  --gradient-red-900-to-600-45d: linear-gradient(45deg, var(--brandRed-900), var(--brandRed-600));\r\n\r\n  /* Blue Gradients */\r\n  --gradient-blue-500-to-400-90d: linear-gradient(90deg, var(--blue-500), var(--blue-400));\r\n  --gradient-blue-700-to-500-45d: linear-gradient(45deg, var(--blue-700), var(--blue-500));\r\n  --gradient-blue-700-to-400-45d: linear-gradient(45deg, var(--blue-700), var(--blue-400));\r\n  --gradient-blue-800-to-500-90d: linear-gradient(90deg, var(--blue-800), var(--blue-500));\r\n  --gradient-blue-800-to-600265-d: linear-gradient(26.5deg, var(--blue-800), var(--blue-600));\r\n  --gradient-blue-900-to-600-45d: linear-gradient(45deg, var(--blue-900), var(--blue-600));\r\n}\r\n\r\n.gradient-gray-600-to-500-90d {\r\n  background: var(--gradient-gray-600-to-500-90d);\r\n}\r\n\r\n.gradient-gray-700-to-600-45d {\r\n  background: var(--gradient-gray-700-to-600-45d);\r\n}\r\n\r\n.gradient-gray-800-to-600-45d {\r\n  background: var(--gradient-gray-800-to-600-45d);\r\n}\r\n\r\n.gradient-gray-800-to-600-90d {\r\n  background: var(--gradient-gray-800-to-600-90d);\r\n}\r\n\r\n.gradient-gray-800-to-700265-d {\r\n  background: var(--gradient-gray-800-to-700265-d);\r\n}\r\n\r\n.gradient-gray-900-to-600-45d {\r\n  background: var(--gradient-gray-900-to-600-45d);\r\n}\r\n\r\n.gradient-darkBlue-500-to-400-90d {\r\n  background: var(--gradient-darkBlue-500-to-400-90d);\r\n}\r\n\r\n.gradient-darkBlue-700-to-500-45d {\r\n  background: var(--gradient-darkBlue-700-to-500-45d);\r\n}\r\n\r\n.gradient-darkBlue-700-to-400-45d {\r\n  background: var(--gradient-darkBlue-700-to-400-45d);\r\n}\r\n\r\n.gradient-darkBlue-800-to-500-90d {\r\n  background: var(--gradient-darkBlue-800-to-500-90d);\r\n}\r\n\r\n.gradient-darkBlue-800-to-600265-d {\r\n  background: var(--gradient-darkBlue-800-to-600265-d);\r\n}\r\n\r\n.gradient-darkBlue-900-to-600-45d {\r\n  background: var(--gradient-darkBlue-900-to-600-45d);\r\n}\r\n\r\n.gradient-red-500-to-400-90d {\r\n  background: var(--gradient-red-500-to-400-90d);\r\n}\r\n\r\n.gradient-red-700-to-500-45d {\r\n  background: var(--gradient-red-700-to-500-45d);\r\n}\r\n\r\n.gradient-red-700-to-400-45d {\r\n  background: var(--gradient-red-700-to-400-45d);\r\n}\r\n\r\n.gradient-red-800-to-500-90d {\r\n  background: var(--gradient-red-800-to-500-90d);\r\n}\r\n\r\n.gradient-red-800-to-600265-d {\r\n  background: var(--gradient-red-800-to-600265-d);\r\n}\r\n\r\n.gradient-red-900-to-600-45d {\r\n  background: var(--gradient-red-900-to-600-45d);\r\n}\r\n\r\n.gradient-blue-500-to-400-90d {\r\n  background: var(--gradient-blue-500-to-400-90d);\r\n}\r\n\r\n.gradient-blue-700-to-500-45d {\r\n  background: var(--gradient-blue-700-to-500-45d);\r\n}\r\n\r\n.gradient-blue-700-to-400-45d {\r\n  background: var(--gradient-blue-700-to-400-45d);\r\n}\r\n\r\n.gradient-blue-800-to-500-90d {\r\n  background: var(--gradient-blue-800-to-500-90d);\r\n}\r\n\r\n.gradient-blue-800-to-600265-d {\r\n  background: var(--gradient-blue-800-to-600265-d);\r\n}\r\n\r\n.gradient-blue-900-to-600-45d {\r\n  background: var(--gradient-blue-900-to-600-45d);\r\n}\r\n\r\n/* Spacing Styles */\r\n:root {\r\n  /* Positive spacing */\r\n  --spacing-none: 0rem;\r\n  --spacing-half: 0.125rem;\r\n  --spacing-1: 0.25rem;\r\n  --spacing-2: 0.5rem;\r\n  --spacing-3: 0.75rem;\r\n  --spacing-4: 1rem;\r\n  --spacing-5: 1.25rem;\r\n  --spacing-6: 1.5rem;\r\n  --spacing-7: 2rem;\r\n  --spacing-8: 2.5rem;\r\n  --spacing-12: 3rem;\r\n  --spacing-16: 4rem;\r\n  --spacing-20: 5rem;\r\n  --spacing-24: 6rem;\r\n  --spacing-32: 8rem;\r\n  --spacing-40: 10rem;\r\n  --spacing-48: 12rem;\r\n  --spacing-56: 14rem;\r\n  --spacing-64: 16rem;\r\n\r\n  /* Negative spacing */\r\n\r\n  --spacing-negative-half: -0.125rem;\r\n  --spacing-negative-1: -0.25rem;\r\n  --spacing-negative-2: -0.5rem;\r\n  --spacing-negative-3: -0.75rem;\r\n  --spacing-negative-4: -1rem;\r\n  --spacing-negative-5: -1.25rem;\r\n  --spacing-negative-6: -1.5rem;\r\n  --spacing-negative-7: -2rem;\r\n\r\n  /* Radius  */\r\n  --rounded-none: 0rem;\r\n  --rounded-xs: 0.25rem;\r\n  --rounded-sm: 0.5rem;\r\n  --rounded-md: 0.75rem;\r\n  --rounded-lg: 1rem;\r\n  --rounded-xl: 1.5rem;\r\n  --rounded-2xl: 2rem;\r\n  --rounded-full: 62.438rem;\r\n}\r\n\r\n/* Typography Styles */\r\n\r\n:root {\r\n  /* Font Sizes */\r\n  --font-size-d-2xl: 4.5rem;\r\n  --font-size-d-xl: 3.75rem;\r\n  --font-size-d-lg: 3rem;\r\n  --font-size-d-md: 2.25rem;\r\n  --font-size-d-sm: 1.875rem;\r\n  --font-size-d-xs: 1.5rem;\r\n  --font-size-t-xl: 1.25rem;\r\n  --font-size-t-lg: 1.125rem;\r\n  --font-size-t-md: 1rem;\r\n  --font-size-t-sm: 0.875rem;\r\n  --font-size-t-xs: 0.75rem;\r\n  --font-size-t-xxs: 0.625rem;\r\n\r\n  /* Font Weights */\r\n  --font-weight-bold: 700;\r\n  --font-weight-semi-bold: 600;\r\n  --font-weight-medium: 500;\r\n  --font-weight-regular: 400;\r\n\r\n  /* Line Heights */\r\n  --font-line-height-d-2xl: 5rem;\r\n  --font-line-height-d-xl: 4.25rem;\r\n  --font-line-height-d-lg: 3.75rem;\r\n  --font-line-height-d-md: 2.75rem;\r\n  --font-line-height-d-sm: 2.375rem;\r\n  --font-line-height-d-xs: 2rem;\r\n  --font-line-height-t-xl: 2rem;\r\n  --font-line-height-t-lg: 1.875rem;\r\n  --font-line-height-t-md: 1.688rem;\r\n  --font-line-height-t-sm: 1.5rem;\r\n  --font-line-height-t-xs: 1.25rem;\r\n  --font-line-height-t-xxs: 1.125rem;\r\n\r\n  /* Letter Spacings */\r\n  --font-letter-spacing-d-2xl: -0.09rem;\r\n  --font-letter-spacing-d-xl: -0.075rem;\r\n  --font-letter-spacing-d-lg: -0.075rem;\r\n  --font-letter-spacing-d-md: -0.045rem;\r\n  --font-letter-spacing-d-sm: 0;\r\n  --font-letter-spacing-d-xs: 0;\r\n  --font-letter-spacing-d-xxs: 0;\r\n\r\n  /* Font Families */\r\n  --font-family-title: 'Sora';\r\n  --font-family-body: 'Sora';\r\n}\r\n\r\n/* Media queries for medium screens (tablet) */\r\n@media (max-width: 1199px) {\r\n  :root {\r\n    /* Font Sizes */\r\n    --font-size-d-2xl: 3.75rem;\r\n    --font-size-d-xl: 3.5rem;\r\n    --font-size-d-lg: 2.75rem;\r\n    --font-size-d-md: 2.25rem;\r\n    --font-size-d-sm: 1.875rem;\r\n    --font-size-d-xs: 1.5rem;\r\n\r\n    /* Line Heights */\r\n    --font-line-height-d-2xl: 4.25rem;\r\n    --font-line-height-d-xl: 3.75rem;\r\n    --font-line-height-d-lg: 2.4375rem;\r\n    --font-line-height-d-md: 2.75rem;\r\n    --font-line-height-d-sm: 2.375rem;\r\n    --font-line-height-d-xs: 2rem;\r\n\r\n    /* Letter Spacings */\r\n    --font-letter-spacing-2xl: -0.075rem;\r\n    --font-letter-spacing-xl: -0.065rem;\r\n    --font-letter-spacing-lg: -0.045rem;\r\n    --font-letter-spacing-md: -0.045rem;\r\n    --font-letter-spacing-sm: 0rem;\r\n    --font-letter-spacing-xs: 0rem;\r\n  }\r\n}\r\n\r\n/* Media queries for smaller screens (mobile) */\r\n@media (max-width: 743px) {\r\n  :root {\r\n    /* Font Sizes */\r\n    --font-size-d-2xl: 3rem;\r\n    --font-size-d-xl: 2.5rem;\r\n    --font-size-d-lg: 2rem;\r\n    --font-size-d-md: 1.75rem;\r\n    --font-size-d-sm: 1.5rem;\r\n    --font-size-d-xs: 1.25rem;\r\n\r\n    /* Line Heights */\r\n    --font-line-height-d-2xl: 3.375rem;\r\n    --font-line-height-d-xl: 2.875rem;\r\n    --font-line-height-d-lg: 2.5rem;\r\n    --font-line-height-d-md: 2.1375rem;\r\n    --font-line-height-d-sm: 2rem;\r\n    --font-line-height-d-xs: 1.75rem;\r\n\r\n    /* Letter Spacings */\r\n    --font-letter-spacing-2xl: -0.06rem;\r\n    --font-letter-spacing-xl: -0.05rem;\r\n    --font-letter-spacing-lg: -0.045rem;\r\n    --font-letter-spacing-md: 0rem;\r\n    --font-letter-spacing-sm: 0rem;\r\n    --font-letter-spacing-xs: 0rem;\r\n  }\r\n}\r\n\r\n.display-2xl-bold {\r\n  font-family: var(--font-family-title);\r\n  font-size: var(--font-size-d-2xl);\r\n  font-weight: var(--font-weight-bold);\r\n  line-height: var(--font-line-height-d-2xl);\r\n  letter-spacing: var(--font-letter-spacing-d-2xl);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.display-2xl-bold::before,\r\n.display-2xl-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.display-2xl-bold::before {\r\n  margin-bottom: -0.135em;\r\n}\r\n\r\n.display-2xl-bold::after {\r\n  margin-top: -0.205em;\r\n}\r\n\r\n.display-2xl-semi-bold {\r\n  font-family: var(--font-family-title);\r\n  font-size: var(--font-size-d-2xl);\r\n  font-weight: var(--font-weight-semi-bold);\r\n  line-height: var(--font-line-height-d-2xl);\r\n  letter-spacing: var(--font-letter-spacing-d-2xl);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.display-2xl-semi-bold::before,\r\n.display-2xl-semi-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.display-2xl-semi-bold::before {\r\n  margin-bottom: -0.135em;\r\n}\r\n\r\n.display-2xl-semi-bold::after {\r\n  margin-top: -0.205em;\r\n}\r\n\r\n.display-xl-bold {\r\n  font-family: var(--font-family-title);\r\n  font-size: var(--font-size-d-xl);\r\n  font-weight: var(--font-weight-bold);\r\n  line-height: var(--font-line-height-d-xl);\r\n  letter-spacing: var(--font-letter-spacing-d-xl);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.display-xl-bold::before,\r\n.display-xl-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.display-xl-bold::before {\r\n  margin-bottom: -0.145em;\r\n}\r\n\r\n.display-xl-bold::after {\r\n  margin-top: -0.215em;\r\n}\r\n\r\n.display-xl-semi-bold {\r\n  font-family: var(--font-family-title);\r\n  font-size: var(--font-size-d-xl);\r\n  font-weight: var(--font-weight-semi-bold);\r\n  line-height: var(--font-line-height-d-xl);\r\n  letter-spacing: var(--font-letter-spacing-d-xl);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.display-xl-semi-bold::before,\r\n.display-xl-semi-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.display-xl-semi-bold::before {\r\n  margin-bottom: -0.145em;\r\n}\r\n\r\n.display-xl-semi-bold::after {\r\n  margin-top: -0.215em;\r\n}\r\n\r\n.display-lg-bold {\r\n  font-family: var(--font-family-title);\r\n  font-size: var(--font-size-d-lg);\r\n  font-weight: var(--font-weight-bold);\r\n  line-height: var(--font-line-height-d-lg);\r\n  letter-spacing: var(--font-letter-spacing-d-lg);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.display-lg-bold::before,\r\n.display-lg-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.display-lg-bold::before {\r\n  margin-bottom: -0.015em;\r\n}\r\n\r\n.display-lg-bold::after {\r\n  margin-top: -0.095em;\r\n}\r\n\r\n.display-lg-semi-bold {\r\n  font-family: var(--font-family-title);\r\n  font-size: var(--font-size-d-lg);\r\n  font-weight: var(--font-weight-semi-bold);\r\n  line-height: var(--font-line-height-d-lg);\r\n  letter-spacing: var(--font-letter-spacing-d-lg);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.display-lg-semi-bold::before,\r\n.display-lg-semi-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.display-lg-semi-bold::before {\r\n  margin-bottom: -0.015em;\r\n}\r\n\r\n.display-lg-semi-bold::after {\r\n  margin-top: -0.095em;\r\n}\r\n\r\n.display-md-bold {\r\n  font-family: var(--font-family-title);\r\n  font-size: var(--font-size-d-md);\r\n  font-weight: var(--font-weight-bold);\r\n  line-height: var(--font-line-height-d-md);\r\n  letter-spacing: var(--font-letter-spacing-d-md);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.display-md-bold::before,\r\n.display-md-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.display-md-bold::before {\r\n  margin-bottom: -0.195em;\r\n}\r\n\r\n.display-md-bold::after {\r\n  margin-top: -0.255em;\r\n}\r\n\r\n.display-md-semi-bold {\r\n  font-family: var(--font-family-title);\r\n  font-size: var(--font-size-d-md);\r\n  font-weight: var(--font-weight-semi-bold);\r\n  line-height: var(--font-line-height-d-md);\r\n  letter-spacing: var(--font-letter-spacing-d-md);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.display-md-semi-bold::before,\r\n.display-md-semi-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.display-md-semi-bold::before {\r\n  margin-bottom: -0.195em;\r\n}\r\n\r\n.display-md-semi-bold::after {\r\n  margin-top: -0.255em;\r\n}\r\n\r\n.display-sm-bold {\r\n  font-family: var(--font-family-title);\r\n  font-size: var(--font-size-d-sm);\r\n  font-weight: var(--font-weight-bold);\r\n  line-height: var(--font-line-height-d-sm);\r\n  letter-spacing: var(--font-letter-spacing-d-sm);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.display-sm-bold::before,\r\n.display-sm-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.display-sm-bold::before {\r\n  margin-bottom: -0.195em;\r\n}\r\n\r\n.display-sm-bold::after {\r\n  margin-top: -0.255em;\r\n}\r\n\r\n.display-sm-semi-bold {\r\n  font-family: var(--font-family-title);\r\n  font-size: var(--font-size-d-sm);\r\n  font-weight: var(--font-weight-semi-bold);\r\n  line-height: var(--font-line-height-d-sm);\r\n  letter-spacing: var(--font-letter-spacing-d-sm);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.display-sm-semi-bold::before,\r\n.display-sm-semi-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.display-sm-semi-bold::before {\r\n  margin-bottom: -0.195em;\r\n}\r\n\r\n.display-sm-semi-bold::after {\r\n  margin-top: -0.255em;\r\n}\r\n\r\n.display-xs-bold {\r\n  font-family: var(--font-family-title);\r\n  font-size: var(--font-size-d-xs);\r\n  font-weight: var(--font-weight-bold);\r\n  line-height: var(--font-line-height-d-xs);\r\n  letter-spacing: var(--font-letter-spacing-d-xs);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.display-xs-bold::before,\r\n.display-xs-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.display-xs-bold::before {\r\n  margin-bottom: -0.199em;\r\n}\r\n\r\n.display-xs-bold::after {\r\n  margin-top: -0.195em; /* Continue from here */\r\n}\r\n\r\n.display-xs-semi-bold {\r\n  font-family: var(--font-family-title);\r\n  font-size: var(--font-size-d-xs);\r\n  font-weight: var(--font-weight-semi-bold);\r\n  line-height: var(--font-line-height-d-xs);\r\n  letter-spacing: var(--font-letter-spacing-d-xs);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.display-xs-semi-bold::before,\r\n.display-xs-semi-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.display-xs-semi-bold::before {\r\n  margin-bottom: -0.259em;\r\n}\r\n\r\n.display-xs-semi-bold::after {\r\n  margin-top: -0.295em;\r\n}\r\n\r\n.text-xl-bold {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-xl);\r\n  font-weight: var(--font-weight-bold);\r\n  line-height: var(--font-line-height-t-xl);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-xl-bold::before,\r\n.text-xl-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-xl-bold::before {\r\n  margin-bottom: -0.329em;\r\n}\r\n\r\n.text-xl-bold::after {\r\n  margin-top: -0.359em;\r\n}\r\n\r\n.text-xl-semi-bold {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-xl);\r\n  font-weight: var(--font-weight-semi-bold);\r\n  line-height: var(--font-line-height-t-xl);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-xl-semi-bold::before,\r\n.text-xl-semi-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-xl-semi-bold::before {\r\n  margin-bottom: -0.329em;\r\n}\r\n\r\n.text-xl-semi-bold::after {\r\n  margin-top: -0.359em;\r\n}\r\n\r\n.text-xl-medium {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-xl);\r\n  font-weight: var(--font-weight-medium);\r\n  line-height: var(--font-line-height-t-xl);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-xl-medium::before,\r\n.text-xl-medium::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-xl-medium::before {\r\n  margin-bottom: -0.339em;\r\n}\r\n\r\n.text-xl-medium::after {\r\n  margin-top: -0.399em;\r\n}\r\n\r\n.text-xl-regular {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-xl);\r\n  font-weight: var(--font-weight-regular);\r\n  line-height: var(--font-line-height-t-xl);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-xl-regular::before,\r\n.text-xl-regular::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-xl-regular::before {\r\n  margin-bottom: -0.339em;\r\n}\r\n\r\n.text-xl-regular::after {\r\n  margin-top: -0.399em;\r\n}\r\n\r\n.text-lg-bold {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-lg);\r\n  font-weight: var(--font-weight-bold);\r\n  line-height: var(--font-line-height-t-lg);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-lg-bold::before,\r\n.text-lg-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-lg-bold::before {\r\n  margin-bottom: -0.339em;\r\n}\r\n\r\n.text-lg-bold::after {\r\n  margin-top: -0.399em;\r\n}\r\n\r\n.text-lg-semi-bold {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-lg);\r\n  font-weight: var(--font-weight-semi-bold);\r\n  line-height: var(--font-line-height-t-lg);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-lg-semi-bold::before,\r\n.text-lg-semi-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-lg-semi-bold::before {\r\n  margin-bottom: -0.339em;\r\n}\r\n\r\n.text-lg-semi-bold::after {\r\n  margin-top: -0.399em;\r\n}\r\n\r\n.text-lg-medium {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-lg);\r\n  font-weight: var(--font-weight-medium);\r\n  line-height: var(--font-line-height-t-lg);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-lg-medium::before,\r\n.text-lg-medium::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-lg-medium::before {\r\n  margin-bottom: -0.349em;\r\n}\r\n\r\n.text-lg-medium::after {\r\n  margin-top: -0.389em;\r\n}\r\n\r\n.text-lg-regular {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-lg);\r\n  font-weight: var(--font-weight-regular);\r\n  line-height: var(--font-line-height-t-lg);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-lg-regular::before,\r\n.text-lg-regular::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-lg-regular::before {\r\n  margin-bottom: -0.349em;\r\n}\r\n\r\n.text-lg-regular::after {\r\n  margin-top: -0.389em;\r\n}\r\n\r\n.text-md-bold {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-md);\r\n  font-weight: var(--font-weight-bold);\r\n  line-height: var(--font-line-height-t-md);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-md-bold::before,\r\n.text-md-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-md-bold::before {\r\n  margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-bold::after {\r\n  margin-top: -0.389em;\r\n}\r\n\r\n.text-md-semi-bold {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-md);\r\n  font-weight: var(--font-weight-semi-bold);\r\n  line-height: var(--font-line-height-t-md);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-md-semi-bold::before,\r\n.text-md-semi-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-md-semi-bold::before {\r\n  margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-semi-bold::after {\r\n  margin-top: -0.389em;\r\n}\r\n\r\n.text-md-medium {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-md);\r\n  font-weight: var(--font-weight-medium);\r\n  line-height: var(--font-line-height-t-md);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-md-medium::before,\r\n.text-md-medium::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-md-medium::before {\r\n  margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-medium::after {\r\n  margin-top: -0.389em;\r\n}\r\n\r\n.text-md-regular {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-md);\r\n  font-weight: var(--font-weight-regular);\r\n  line-height: var(--font-line-height-t-md);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-md-regular::before,\r\n.text-md-regular::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-md-regular::before {\r\n  margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-regular::after {\r\n  margin-top: -0.389em;\r\n}\r\n\r\n.text-sm-bold {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-sm);\r\n  font-weight: var(--font-weight-bold);\r\n  line-height: var(--font-line-height-t-sm);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-sm-bold::before,\r\n.text-sm-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-sm-bold::before {\r\n  margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-bold::after {\r\n  margin-top: -0.349em;\r\n}\r\n\r\n.text-sm-semi-bold {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-sm);\r\n  font-weight: var(--font-weight-semi-bold);\r\n  line-height: var(--font-line-height-t-sm);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-sm-semi-bold::before,\r\n.text-sm-semi-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-sm-semi-bold::before {\r\n  margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-semi-bold::after {\r\n  margin-top: -0.349em;\r\n}\r\n\r\n.text-sm-medium {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-sm);\r\n  font-weight: var(--font-weight-medium);\r\n  line-height: var(--font-line-height-t-sm);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  position: relative;\r\n  display: inline-block;\r\n}\r\n\r\n.text-sm-medium::before,\r\n.text-sm-medium::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-sm-medium::before {\r\n  margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-medium::after {\r\n  margin-top: -0.299em;\r\n}\r\n\r\n.text-sm-regular {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-sm);\r\n  font-weight: var(--font-weight-regular);\r\n  line-height: var(--font-line-height-t-sm);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  position: relative;\r\n  display: inline-block;\r\n}\r\n\r\n.text-sm-regular::before,\r\n.text-sm-regular::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-sm-regular::before {\r\n  margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-regular::after {\r\n  margin-top: -0.299em;\r\n}\r\n\r\n.text-xs-bold {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-xs);\r\n  font-weight: var(--font-weight-bold);\r\n  line-height: var(--font-line-height-t-xs);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-xs-bold::before,\r\n.text-xs-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-xs-bold::before {\r\n  margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xs-bold::after {\r\n  margin-top: -0.416em;\r\n}\r\n\r\n.text-xs-semi-bold {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-xs);\r\n  font-weight: var(--font-weight-semi-bold);\r\n  line-height: var(--font-line-height-t-xs);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-xs-semi-bold::before,\r\n.text-xs-semi-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-xs-semi-bold::before {\r\n  margin-bottom: -0.321em;\r\n}\r\n\r\n.text-xs-semi-bold::after {\r\n  margin-top: -0.416em;\r\n}\r\n\r\n.text-xs-medium {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-xs);\r\n  font-weight: var(--font-weight-medium);\r\n  line-height: var(--font-line-height-t-xs);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-xs-medium::before,\r\n.text-xs-medium::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-xs-medium::before {\r\n  margin-bottom: -0.285em;\r\n}\r\n\r\n.text-xs-medium::after {\r\n  margin-top: -0.396em;\r\n}\r\n\r\n.text-xs-regular {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-xs);\r\n  font-weight: var(--font-weight-regular);\r\n  line-height: var(--font-line-height-t-xs);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-xs-regular::before,\r\n.text-xs-regular::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-xs-regular::before {\r\n  margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xs-regular::after {\r\n  margin-top: -0.396em;\r\n}\r\n\r\n.text-xxs-bold {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-xxs);\r\n  font-weight: var(--font-weight-bold);\r\n  line-height: var(--font-line-height-t-xxs);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-xxs-bold::before,\r\n.text-xxs-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-xxs-bold::before {\r\n  margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-bold::after {\r\n  margin-top: -0.416em;\r\n}\r\n\r\n.text-xxs-semi-bold {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-xxs);\r\n  font-weight: var(--font-weight-semi-bold);\r\n  line-height: var(--font-line-height-t-xxs);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-xxs-semi-bold::before,\r\n.text-xxs-semi-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-xxs-semi-bold::before {\r\n  margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-semi-bold::after {\r\n  margin-top: -0.416em;\r\n}\r\n\r\n.text-xxs-medium {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-xxs);\r\n  font-weight: var(--font-weight-medium);\r\n  line-height: var(--font-line-height-t-xxs);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-xxs-medium::before,\r\n.text-xxs-medium::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-xxs-medium::before {\r\n  margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-medium::after {\r\n  margin-top: -0.416em;\r\n}\r\n\r\n.text-xxs-regular {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-xxs);\r\n  font-weight: var(--font-weight-regular);\r\n  line-height: var(--font-line-height-t-xxs);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-xxs-regular::before,\r\n.text-xxs-regular::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-xxs-regular::before {\r\n  margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-regular::after {\r\n  margin-top: -0.416em;\r\n}\r\n\r\n/* Button slot styles */\r\n/* .slotted_button_text.primary {\r\n  color: var(--color-text-inverse, #ffffff) !important;\r\n}\r\n\r\n.slotted_button_text.secondary_gray {\r\n  color: var(--color-text, #4b5565) !important;\r\n}\r\n\r\n.slotted_button_text.secondary_color {\r\n  color: var(--color-text-brandRed, #e21b2e) !important;\r\n}\r\n\r\n.slotted_button_text.tertiary_gray {\r\n  color: var(--color-text, #4b5565) !important;\r\n}\r\n\r\n.slotted_button_text.tertiary_color {\r\n  color: var(--color-text-brandRed, #e21b2e) !important;\r\n}\r\n\r\n.slotted_button_text.link_gray {\r\n  color: var(--color-text, #4b5565) !important;\r\n}\r\n\r\n.slotted_button_text.link_color {\r\n  color: var(--color-link, #075db2) !important;\r\n}\r\n\r\n.slotted_button_text.primary.destructive {\r\n  color: var(--color-text-inverse, #ffffff) !important;\r\n}\r\n\r\n#slotted_button_text.primary.disabled,\r\n#slotted_button_text.secondary_gray.disabled,\r\n#slotted_button_text.secondary_color.disabled,\r\n#slotted_button_text.tertiary_gray.disabled,\r\n#slotted_button_text.tertiary_color.disabled,\r\n#slotted_button_text.link_gray.disabled,\r\n#slotted_button_text.link_color.disabled {\r\n  color: var(--color-text-disabled, #9aa4b2) !important;\r\n}\r\n\r\n#slotted_button_text.secondary_gray.default.destructive,\r\n#slotted_button_text.secondary_color.default.destructive,\r\n#slotted_button_text.tertiary_gray.default.destructive,\r\n#slotted_button_text.tertiary_color.default.destructive,\r\n#slotted_button_text.link_gray.default.destructive,\r\n#slotted_button_text.link_color.default.destructive {\r\n  color: var(--color-text-danger, #b51726) !important;\r\n} */\r\n\r\n\r\n/* Simple Sidebar Styles */\r\n.simple_sidebar_div {\r\n  transition: all 0.3s ease-in-out;\r\n  position: relative;\r\n  height: 100vh;\r\n}\r\n\r\n.pattern {\r\n  position: absolute;\r\n  top: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  overflow: hidden;\r\n  mix-blend-mode: multiply;\r\n}\r\n\r\n.simple_sidebar_div .pattern img, .primary_side_menu .pattern img {\r\n  width: 100%;\r\n  height: auto;\r\n}\r\n\r\n.simple_sidebar_div.expanded {\r\n  display: inline-flex;\r\n  flex-direction: column;\r\n  justify-content: space-between;\r\n  width: 16.75rem;\r\n}\r\n\r\n.simple_sidebar_div.collapsed {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  width: 5rem;\r\n}\r\n\r\n.nav {\r\n  display: flex;\r\n  width: 100%;\r\n  flex-direction: column;\r\n  gap: var(--spacing-6);\r\n}\r\n\r\n.sidebar_header.expanded {\r\n  display: flex;\r\n  padding: var(--spacing-none) var(--spacing-4) var(--spacing-none) var(--spacing-6);\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  margin-top: 1rem;\r\n}\r\n\r\n.sidebar_header.collapsed {\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  margin-top: 1rem;\r\n  gap: 1.5rem;\r\n}\r\n\r\n.logo_and_name.expanded {\r\n  display: flex;\r\n  justify-content: flex-start;\r\n  align-items: center;\r\n}\r\n\r\n.logo_and_name.collapsed {\r\n  display: flex;\r\n  justify-content: center;\r\n}\r\n\r\n.sidebar_logo {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.69rem;\r\n}\r\n\r\n.collapse_button.collapsed {\r\n  display: flex;\r\n  justify-content: center;\r\n}\r\n\r\n.application_name {\r\n  display: flex;\r\n  padding: var(--spacing-6);\r\n}\r\n\r\n.wrapper {\r\n  display: flex;\r\n  padding: var(--spacing-4) var(--spacing-5) var(--spacing-5) var(--spacing-5);\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  align-items: flex-start;\r\n  gap: var(--spacing-4);\r\n  align-self: stretch;\r\n  border-radius: var(--rounded-sm);\r\n  position: relative;\r\n  width: 13.75rem;\r\n  height: auto;\r\n  overflow: hidden;\r\n}\r\n\r\n.application_icon svg {\r\n  width: 2.5rem;\r\n  height: 2.5rem;\r\n}\r\n\r\n.application_icon.plain_background path[stroke] {\r\n  stroke: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.application_icon.plain_background path[fill] {\r\n  fill: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.application_icon.colored_background path[stroke] {\r\n  stroke: var(--base-white, #ffffff);\r\n}\r\n\r\n.application_icon.colored_background path[fill] {\r\n  fill: var(--base-white, #ffffff);\r\n}\r\n\r\n.application_name_pattern {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  mix-blend-mode: multiply;\r\n}\r\n\r\n.application_name_pattern img {\r\n  width: 100%;\r\n}\r\n\r\n.wrapper {\r\n  width: 100%;\r\n}\r\n\r\n.wrapper.colored_background {\r\n  border: 1px solid rgba(255, 255, 255, 0.1);\r\n  background: rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.wrapper.plain_background {\r\n  background: var(--color-background-gray-subtlest, #f6f8fa);\r\n  border: 1px solid var(--color-border-subtler, #e3e8ef);\r\n}\r\n\r\n::slotted([slot='application_name'].plain_background) {\r\n  color: var(--color-text-information-bold, #042f59) !important;\r\n}\r\n\r\n::slotted([slot='application_name'].colored_background) {\r\n  color: var(--base-white, #ffffff) !important;\r\n}\r\n\r\n/* Simple Sidebar Category Styles */\r\n.simple_sidebar_div.plain_background {\r\n  border-right: 0.7px solid var(--color-border-subtle, #cdd5df);\r\n  background: var(--color-surface, #ffffff);\r\n}\r\n\r\n.simple_sidebar_div.colored_background {\r\n  background-image: linear-gradient(180deg, #064e94 0%, #02182e 100%);\r\n  background-size: cover;\r\n}\r\n\r\n.item {\r\n  display: flex;\r\n  flex-direction: column;\r\n  width: 100%;\r\n  gap: var(--spacing-1);\r\n}\r\n\r\n/* Complex Sidebar Styles */\r\n.sidebar_and_nav {\r\n  width: fit-content;\r\n  transition: all 0.3s ease-in-out;\r\n}\r\n\r\n.complex_sidebar_div {\r\n  display: flex;\r\n  gap: 0;\r\n  width: fit-content;\r\n  height: calc(100vh - 4.5rem);\r\n}\r\n\r\n.primary_side_menu {\r\n  position: relative;\r\n  width: 6rem;\r\n}\r\n\r\n.primary_side_menu.standard {\r\n  padding: var(--spacing-4) var(--spacing-none) 0.5rem var(--spacing-none);\r\n}\r\n\r\n.primary_side_menu.compact {\r\n  padding: var(--spacing-2) var(--spacing-none) 0.5rem var(--spacing-none);\r\n}\r\n\r\n.primary_side_menu_container {\r\n  width: 100%;\r\n}\r\n\r\n.nav_div {\r\n  display: flex;\r\n  height: 4.5rem;\r\n  padding: 0 var(--spacing-5) 0 var(--spacing-7);\r\n  align-items: center;\r\n  gap: 1.5rem;\r\n  flex: 1 0 0;\r\n  border-bottom: 1px solid var(--color-border-subtler, #e3e8ef);\r\n  background: var(--color-surface, #ffffff);\r\n}\r\n\r\n.logo_and_button {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  flex: 1 0 0;\r\n}\r\n\r\n/* Complex Sidebar Category Styles */\r\n.primary_side_menu.plain_background {\r\n  border-right: 0.7px solid var(--color-border-subtle, #cdd5df);\r\n  background: var(--color-surface, #ffffff);\r\n}\r\n\r\n.primary_side_menu.colored_background {\r\n  background-image: linear-gradient(180deg, #064e94 0%, #02182e 100%);\r\n  background-size: cover;\r\n}\r\n\r\n/* Complex Sidebar State Styles */\r\n.secondary_side_menu {\r\n  transition: width 0.3s ease-in-out;\r\n}\r\n\r\n.secondary_side_menu.expanded {\r\n  width: 17rem;\r\n}\r\n\r\n.secondary_side_menu.collapsed {\r\n  width: 5rem;\r\n}\r\n\r\n.secondary_side_menu.colored_background {\r\n  background: var(--color-background-information-subtlest, #e4f0fc);\r\n}\r\n\r\n.secondary_side_menu.plain_background {\r\n  background: var(--color-surface, #ffffff);\r\n  border-right: 0.7px solid var(--color-border-subtle, #cdd5df);\r\n}\r\n\r\n.sside_menu{\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: space-between;\r\n  height: 100%;\r\n}\r\n\r\n.sside_menu_items {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--spacing-2);\r\n  height: 100%;\r\n  padding: var(--spacing-4) var(--spacing-none);\r\n}\r\n\r\n.information_header {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--spacing-2);\r\n  align-self: stretch;\r\n}\r\n\r\n.help_icon.plain_background path[stroke] {\r\n  stroke: var(--color-text-brandDarkBlue, #212c65);\r\n}\r\n\r\n.help_icon.plain_background path[fill] {\r\n  fill: var(--color-text-brandDarkBlue, #212c65);\r\n}\r\n\r\n.help_icon.colored_background path[stroke] {\r\n  stroke: var(--base-white, #ffffff);\r\n}\r\n\r\n.help_icon.colored_background path[fill] {\r\n  fill: var(--base-white, #ffffff);\r\n}\r\n\r\n.need_help.plain_background {\r\n  color: var(--color-text-brandDarkBlue, #212c65);\r\n}\r\n\r\n.need_help.colored_background {\r\n  color: var(--base-white, #ffffff);\r\n}\r\n\r\n.info.colored_background {\r\n  color: var(--base-white, #ffffff);\r\n}\r\n\r\n.info.plain_background {\r\n  color: var(--color-text-bold, #202939);\r\n}\r\n\r\n.phone_no {\r\n  width: 100%;\r\n  word-wrap: break-word;\r\n}\r\n";
 
 const GbSidebar$1 = /*@__PURE__*/ proxyCustomElement(class GbSidebar extends H {
     constructor(registerHost) {
@@ -20,8 +20,8 @@ const GbSidebar$1 = /*@__PURE__*/ proxyCustomElement(class GbSidebar extends H {
         }
         this.__attachShadow();
         this.simpleSidebarItemClicked = createEvent(this, "simpleSidebarItemClicked");
-        this.secondaryItemClicked = createEvent(this, "secondaryItemClicked");
         this.primaryItemClicked = createEvent(this, "primaryItemClicked");
+        this.secondaryItemClicked = createEvent(this, "secondaryItemClicked");
         this.sidebarState = createEvent(this, "sidebarState");
         this.state = 'expanded';
         this.category = 'colored_background';
@@ -53,7 +53,7 @@ const GbSidebar$1 = /*@__PURE__*/ proxyCustomElement(class GbSidebar extends H {
         // Recruitment: {
         //   icon: 'assets/user-search-01.svg',
         //   items: [
-        //     { label: 'Overview', icon: 'assets/star.svg' },
+        //     { label: 'Overview', icon: 'assets/sent.svg' },
         //     { label: 'My Profile', icon: 'assets/star.svg' },
         //     { label: 'Appraisal', icon: 'assets/star.svg' },
         //     { label: 'Staff Management', icon: 'assets/star.svg' },
@@ -71,8 +71,8 @@ const GbSidebar$1 = /*@__PURE__*/ proxyCustomElement(class GbSidebar extends H {
         //   ],
         // },
         };
-        this.activePrimaryItem = 'Staff';
-        this.activeSecondaryItem = 'Attendance Tracking';
+        this.activePrimaryItem = '';
+        this.activeSecondaryIndex = 0;
         this.hasInfo = false;
         this.email = '';
         this.phoneNumber = '';
@@ -101,9 +101,11 @@ const GbSidebar$1 = /*@__PURE__*/ proxyCustomElement(class GbSidebar extends H {
     collapseAndExpandSidebar() {
         if (this.state === 'expanded') {
             this.state = 'collapsed';
+            this.sidebarState.emit('collapsed');
         }
         else {
             this.state = 'expanded';
+            this.sidebarState.emit('expanded');
         }
     }
     async sideBarItemClicked(index) {
@@ -113,12 +115,12 @@ const GbSidebar$1 = /*@__PURE__*/ proxyCustomElement(class GbSidebar extends H {
     }
     handlePrimaryClick(item, index) {
         this.activePrimaryItem = item;
-        this.activeSecondaryItem = this.complexSidebarData[item].items[0].label; // Reset to the first secondary item
+        this.activeSecondaryIndex = this.complexSidebarData[item].items[0]; // Reset to the first secondary item
         this.primaryItemClicked.emit({ index: index, label: this.activePrimaryItem });
     }
     handleSecondaryClick(item, index) {
-        this.activeSecondaryItem = item;
-        this.secondaryItemClicked.emit({ index: index, label: this.activeSecondaryItem });
+        this.activeSecondaryIndex = index;
+        this.secondaryItemClicked.emit({ index: index, label: item });
     }
     componentDidLoad() {
         const applicationName = this.el.querySelector('[slot="application_name"]');
@@ -147,12 +149,17 @@ const GbSidebar$1 = /*@__PURE__*/ proxyCustomElement(class GbSidebar extends H {
     componentWillLoad() {
         this.loadIcon(this.iconInstance);
         this.changeTheme();
+        const firstKey = Object.keys(this.complexSidebarData)[0];
+        if (!this.complexSidebarData[this.activePrimaryItem]) {
+            this.activePrimaryItem = firstKey;
+        }
     }
     render() {
+        var _a, _b;
         const patternSrc = getAssetPath(`assets/pattern_wrapper.svg`);
         const logoSrc = getAssetPath(`assets/globus_bank_logo.svg`);
         const blueLogoSrc = getAssetPath(`assets/globus_bank_logo_blue.svg`);
-        return (h(Fragment, null, this.type === 'simple' && (h("div", { key: '3ae299d9331900bf00553933fdfe3d766439c279', class: `simple_sidebar_div ${this.state} ${this.category}` }, this.category === 'colored_background' && (h("div", { key: '0680ad943a6a3f3606935a6b97bc2ccf6275adcf', class: "pattern" }, h("img", { key: '66224ebab52cece3e8115d08073e3e5f11d8fb2f', src: patternSrc, alt: "" }))), h("div", { key: '876b86ef87a3f24119801deac601e714afc8ea6d', class: "nav" }, h("div", { key: '04d357d1cc173e2ed2a4ab2b0032c8a3082dfbed', class: `sidebar_header ${this.state}` }, h("div", { key: 'f41e18ce403a9575aaa808d03cde270457e97080', class: `logo_and_name ${this.state}` }, this.state === 'expanded' && (h("div", { key: '5f7098311ebcaddb1c2a1c162a27b646f57948af', class: "sidebar_logo" }, h("img", { key: '0963275f55b106187f94c2d5fb8ec9f1b90acfc8', src: logoSrc, alt: "" }), h("svg", { key: '0ff8769366cee20074f0a6dd0c34a2b1f7f9443d', xmlns: "http://www.w3.org/2000/svg", width: "117", height: "17", viewBox: "0 0 117 17", fill: "none" }, h("path", { key: '37cbed3e7ab19e9d152d7863c4e1feac916b5c08', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M55.977 12.6264C56.3596 13.1025 56.8394 13.4915 57.3843 13.7674C57.9292 14.0434 58.5268 14.1998 59.137 14.2264C59.3682 14.2276 59.5989 14.2038 59.825 14.1554C60.0203 14.1134 60.2068 14.0376 60.376 13.9314C60.5266 13.8276 60.6514 13.6908 60.741 13.5314C60.8332 13.3494 60.8789 13.1473 60.874 12.9434C60.8797 12.7871 60.8427 12.6322 60.767 12.4954C60.6928 12.3641 60.5948 12.2478 60.478 12.1524C60.3548 12.0522 60.2206 11.9663 60.078 11.8964C59.9369 11.8205 59.7898 11.7567 59.638 11.7054C59.365 11.6054 59.092 11.4954 58.821 11.4054C58.55 11.3154 58.285 11.2194 58.009 11.1054C57.856 11.0544 57.668 10.9864 57.454 10.9054C57.2189 10.8192 56.9891 10.7191 56.766 10.6054C56.5267 10.4828 56.2967 10.3428 56.078 10.1864C55.8479 10.0188 55.6411 9.82143 55.463 9.59936C55.2755 9.3641 55.1254 9.10136 55.018 8.82037C54.8987 8.50077 54.841 8.16145 54.848 7.82037C54.8385 7.38435 54.9601 6.95552 55.197 6.58938C55.4368 6.22409 55.7548 5.91665 56.128 5.68935C56.5352 5.44285 56.9786 5.26199 57.442 5.15337C57.9371 5.03187 58.4452 4.9714 58.955 4.97335C59.7154 4.96345 60.4735 5.05835 61.208 5.25536C61.883 5.44235 62.5133 5.76379 63.061 6.20037L61.881 7.97738C61.675 7.77738 61.475 7.59837 61.276 7.43737C61.0823 7.28066 60.8736 7.14333 60.653 7.02737C60.4242 6.91238 60.1825 6.82509 59.933 6.76736C59.6405 6.70771 59.3425 6.67923 59.044 6.68237C58.8003 6.6793 58.5576 6.71302 58.324 6.78237C58.1425 6.83794 57.973 6.92678 57.824 7.04437C57.7018 7.14787 57.6053 7.27829 57.542 7.42538C57.4813 7.5669 57.4503 7.71939 57.451 7.87338C57.4479 8.03229 57.4929 8.18844 57.58 8.32137C57.6712 8.45192 57.7854 8.56477 57.917 8.65438C58.0598 8.75308 58.2135 8.83495 58.375 8.89837C58.549 8.96737 58.724 9.03036 58.903 9.08737C59.183 9.18737 59.467 9.28736 59.749 9.37936C60.031 9.47136 60.313 9.57035 60.592 9.66735C60.731 9.72035 60.902 9.77936 61.104 9.85336C61.3158 9.93021 61.522 10.0218 61.721 10.1274C61.945 10.2432 62.1576 10.3798 62.356 10.5354C62.571 10.6981 62.7616 10.8907 62.922 11.1074C63.0947 11.347 63.2296 11.6118 63.322 11.8924C63.4341 12.2242 63.4876 12.5731 63.48 12.9234C63.4886 13.3821 63.3593 13.8329 63.109 14.2174C62.8572 14.5968 62.5255 14.9167 62.137 15.1544C61.711 15.4162 61.2468 15.6099 60.761 15.7284C60.2447 15.8581 59.7143 15.923 59.182 15.9214C58.7286 15.9217 58.2755 15.896 57.825 15.8444C57.4131 15.7956 57.0069 15.7072 56.612 15.5804C56.2266 15.4585 55.8573 15.2906 55.512 15.0804C55.152 14.8574 54.8226 14.5884 54.532 14.2804L55.977 12.6264ZM46.023 5.15136V12.3824C46.0171 12.6297 46.0603 12.8758 46.15 13.1064C46.2233 13.2937 46.3378 13.4622 46.485 13.5994C46.6276 13.7299 46.7989 13.8251 46.985 13.8774C47.1837 13.9372 47.3905 13.9659 47.598 13.9624C48.1129 13.9605 48.6258 13.9001 49.127 13.7824C49.6297 13.6726 50.1117 13.4836 50.555 13.2224V5.14636H53.165V13.8624C53.1705 14.1064 53.1909 14.3498 53.226 14.5914C53.262 14.9064 53.326 15.2774 53.403 15.7014H50.93C50.916 15.6614 50.893 15.5894 50.866 15.4774C50.839 15.3654 50.805 15.2534 50.772 15.1304C50.739 15.0074 50.715 14.8904 50.687 14.7814C50.6662 14.7 50.6501 14.6176 50.639 14.5344C50.4019 14.7386 50.1461 14.9201 49.875 15.0764C49.5915 15.2448 49.2941 15.3887 48.986 15.5064C48.6826 15.626 48.3695 15.719 48.05 15.7844C47.7544 15.8493 47.4527 15.8828 47.15 15.8844C46.5406 15.9045 45.9328 15.8088 45.359 15.6024C44.9281 15.4446 44.5423 15.1836 44.2355 14.8422C43.9287 14.5009 43.7102 14.0897 43.599 13.6444C43.4774 13.1714 43.4179 12.6847 43.422 12.1964V5.14938L46.023 5.15136ZM34.173 14.0344C34.4914 14.1402 34.8178 14.2205 35.149 14.2744C35.5278 14.3366 35.9111 14.368 36.295 14.3684C36.6865 14.3713 37.0725 14.2764 37.418 14.0924C37.7682 13.8978 38.0679 13.6238 38.293 13.2924C38.5589 12.9056 38.7546 12.4751 38.871 12.0204C39.0127 11.4651 39.0799 10.8934 39.071 10.3204C39.0745 9.84945 39.0238 9.37971 38.92 8.92037C38.8359 8.53264 38.6762 8.1653 38.45 7.83938C38.2415 7.54414 37.9623 7.30585 37.638 7.14636C37.2658 6.97548 36.8594 6.89203 36.45 6.90237C36.2347 6.90349 36.0196 6.91785 35.806 6.94537C35.591 6.97637 35.384 7.01636 35.183 7.06536C34.9916 7.11019 34.8033 7.16699 34.619 7.23537C34.4596 7.29532 34.3062 7.37033 34.161 7.45937L34.173 14.0344ZM31.573 0.395379H34.173V5.94637C34.5815 5.64458 35.0369 5.41212 35.521 5.25835C36.0793 5.07415 36.6641 4.98329 37.252 4.98937C37.9775 4.97144 38.697 5.12493 39.352 5.43737C39.9085 5.71759 40.3919 6.12367 40.764 6.62338C41.1391 7.13643 41.4108 7.71756 41.564 8.33437C41.7346 8.99307 41.82 9.67094 41.818 10.3514C41.8392 11.1967 41.6831 12.037 41.36 12.8184C41.081 13.474 40.6682 14.0643 40.148 14.5514C39.6578 15.003 39.0812 15.3507 38.453 15.5734C37.838 15.79 37.1911 15.9022 36.539 15.9054C36.0383 15.9054 35.5797 15.9 35.163 15.8894C34.744 15.8774 34.338 15.8644 33.951 15.8464C33.564 15.8284 33.173 15.7994 32.791 15.7614C32.409 15.7234 32.007 15.6784 31.591 15.6234L31.573 0.395379ZM24.573 14.2164C24.984 14.2278 25.3873 14.103 25.72 13.8614C26.0497 13.616 26.3187 13.2982 26.506 12.9324C26.7225 12.5243 26.8769 12.0861 26.964 11.6324C27.066 11.1494 27.1166 10.657 27.115 10.1634C27.1164 9.72126 27.0718 9.28025 26.982 8.84737C26.9009 8.46194 26.7494 8.09478 26.535 7.76437C26.3324 7.45791 26.0577 7.20585 25.735 7.03036C25.3682 6.83692 24.9575 6.74183 24.543 6.75436C24.1538 6.74764 23.7699 6.845 23.431 7.03637C23.1073 7.23018 22.8334 7.49693 22.631 7.81536C22.4048 8.17634 22.2412 8.57292 22.147 8.98837C21.9311 9.90171 21.9243 10.852 22.127 11.7684C22.216 12.194 22.3705 12.6032 22.585 12.9814C22.7843 13.3379 23.0607 13.6453 23.394 13.8814C23.7431 14.1127 24.1554 14.2301 24.574 14.2174L24.573 14.2164ZM24.66 15.9734C23.8645 15.9875 23.0734 15.8518 22.328 15.5734C21.6834 15.3259 21.1025 14.937 20.628 14.4354C20.1558 13.9225 19.7994 13.3141 19.583 12.6514C19.335 11.9037 19.2134 11.12 19.223 10.3324C19.2197 9.63472 19.3305 8.94126 19.551 8.27938C19.7645 7.63603 20.1153 7.04677 20.5791 6.55242C21.0429 6.05807 21.6086 5.67044 22.237 5.41637C22.9955 5.11592 23.8064 4.97038 24.622 4.98837C25.43 4.96837 26.2335 5.11404 26.983 5.41637C27.6091 5.68005 28.1666 6.0833 28.613 6.59536C29.0478 7.1081 29.3694 7.70683 29.557 8.35238C29.7617 9.05529 29.8627 9.7843 29.857 10.5164C29.8615 11.2376 29.7414 11.9541 29.502 12.6344C29.2754 13.2745 28.9255 13.864 28.472 14.3694C28.0128 14.8682 27.4555 15.2669 26.835 15.5404C26.1487 15.8353 25.4079 15.9818 24.661 15.9704L24.66 15.9734ZM14.302 0.394372H16.902V13.1564C16.8789 13.4015 16.9368 13.6474 17.067 13.8564C17.1212 13.9252 17.191 13.9801 17.2706 14.0167C17.3503 14.0532 17.4375 14.0702 17.525 14.0664C17.7153 14.0716 17.9048 14.0415 18.084 13.9774C18.237 13.9214 18.417 13.8494 18.615 13.7774L19.055 15.0844C18.8809 15.2024 18.6984 15.3077 18.509 15.3994C18.3094 15.4997 18.1032 15.5865 17.892 15.6594C17.672 15.7336 17.4475 15.794 17.22 15.8404C16.9934 15.8855 16.763 15.9086 16.532 15.9094C16.2533 15.9095 15.9753 15.8797 15.703 15.8204C15.4428 15.7656 15.1996 15.6489 14.994 15.4804C14.7726 15.2971 14.6007 15.0612 14.494 14.7944C14.3574 14.4324 14.2942 14.047 14.308 13.6604L14.302 0.394372ZM12.602 14.6814C12.239 14.8724 11.868 15.0444 11.485 15.2064C11.0739 15.377 10.6508 15.517 10.219 15.6254C9.71274 15.7511 9.19858 15.8427 8.68001 15.8994C8.03877 15.9693 7.39406 16.0027 6.74901 15.9994C6.02384 16.0081 5.30187 15.9018 4.61001 15.6844C3.40238 15.3004 2.35048 14.5377 1.61001 13.5094C1.24144 13.0029 0.939006 12.4514 0.710011 11.8684C0.468973 11.2677 0.289379 10.6442 0.174001 10.0074C0.0576192 9.35516 -0.000605498 8.69388 4.74727e-06 8.03137C0.000633892 7.33814 0.0726773 6.64683 0.215001 5.96838C0.349412 5.31408 0.556361 4.67679 0.832006 4.06835C1.10146 3.48093 1.44454 2.9302 1.853 2.42938C2.67554 1.41797 3.78369 0.67779 5.03301 0.305352C5.72268 0.0959449 6.44028 -0.0069001 7.161 0.000359076C7.54 0.000359076 7.88701 0.012372 8.20301 0.032372C8.49632 0.0492166 8.78846 0.0826091 9.07801 0.132378C9.34144 0.177448 9.60066 0.244327 9.853 0.33236C10.107 0.419187 10.3543 0.52447 10.593 0.647362C10.8609 0.782467 11.1192 0.935843 11.366 1.10638C11.6327 1.28438 11.9263 1.49435 12.247 1.73635L10.797 3.68838C10.4912 3.41105 10.1686 3.15288 9.83101 2.91537C9.55631 2.72032 9.26083 2.55631 8.95 2.42635C8.66096 2.30636 8.35893 2.22046 8.05001 2.17037C7.70771 2.11985 7.362 2.0961 7.01601 2.09936C6.40137 2.08829 5.79444 2.23754 5.25501 2.53237C4.73856 2.82694 4.29629 3.23569 3.96201 3.72738C3.59548 4.26897 3.32706 4.87079 3.16901 5.50536C2.98332 6.22376 2.89254 6.9634 2.89901 7.70538C2.89341 8.4936 2.97049 9.28022 3.129 10.0524C3.26457 10.7479 3.51573 11.4158 3.87201 12.0284C4.19608 12.5805 4.64638 13.0479 5.18601 13.3924C5.76832 13.7417 6.43821 13.9176 7.11701 13.8994C7.33906 13.9036 7.56116 13.8939 7.782 13.8704C8.018 13.8414 8.25401 13.8234 8.49601 13.7874C8.73801 13.7514 8.972 13.7084 9.202 13.6594C9.432 13.6104 9.64401 13.5594 9.84601 13.5094V8.32836H12.595L12.602 14.6814Z", fill: "var(--color-text-brandDarkBlue, #212C65)" }), h("path", { key: 'c3dabde027f977780835c9c29d22b5369c5e6fab', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M109.442 9.51028L113.077 5.4953H116.426L111.367 10.3453L116.755 16.3633H113.547L109.447 11.6633V16.3633H106.768V0.58728H109.447L109.442 9.51028ZM94.8709 7.3573C94.8709 7.1413 94.871 6.86529 94.852 6.52429C94.8439 6.1785 94.8071 5.83398 94.742 5.49429H97.2649C97.2894 5.55963 97.3098 5.62644 97.326 5.69431C97.345 5.77631 97.3659 5.86929 97.3919 5.96429C97.4179 6.05929 97.4369 6.16428 97.4549 6.26428C97.4729 6.36428 97.486 6.46428 97.5 6.55228C97.687 6.38781 97.8877 6.23961 98.0999 6.10928C98.6115 5.78686 99.1757 5.55704 99.7669 5.4303C100.1 5.35753 100.44 5.32132 100.781 5.3223C101.328 5.31866 101.872 5.40723 102.39 5.58429C102.869 5.74685 103.312 6.00393 103.69 6.3403C104.063 6.67744 104.36 7.08984 104.562 7.55029C104.781 8.06212 104.89 8.61452 104.881 9.1713V16.3713H102.196V9.6713C102.203 9.29813 102.158 8.9258 102.061 8.56528C101.986 8.29345 101.849 8.04279 101.661 7.83328C101.484 7.64715 101.263 7.50943 101.018 7.43329C100.734 7.34463 100.438 7.30144 100.141 7.3053C99.9337 7.30661 99.7268 7.32297 99.5219 7.35428C99.2943 7.38247 99.069 7.42726 98.8479 7.48828C98.6183 7.5484 98.392 7.6205 98.17 7.70428C97.9553 7.77835 97.7466 7.86895 97.5459 7.97528V16.3753H94.8689L94.8709 7.3573ZM89.354 10.6903C88.693 10.7039 88.0352 10.7877 87.3919 10.9403C86.9571 11.0391 86.5446 11.2185 86.1759 11.4693C85.8984 11.6587 85.6811 11.9239 85.55 12.2333C85.4322 12.5398 85.3738 12.866 85.378 13.1943C85.3692 13.4439 85.403 13.6931 85.4779 13.9313C85.5355 14.1106 85.6361 14.273 85.771 14.4043C85.9046 14.5271 86.0668 14.6145 86.243 14.6583C86.4338 14.7108 86.631 14.7364 86.8289 14.7343C87.0219 14.7343 87.219 14.7223 87.419 14.7063C87.6305 14.6839 87.8398 14.6444 88.045 14.5883C88.266 14.5295 88.4818 14.4522 88.69 14.3573C88.9221 14.2504 89.144 14.1225 89.3529 13.9753L89.354 10.6903ZM82.841 6.9743C83.4506 6.43993 84.1574 6.02806 84.9229 5.76129C85.735 5.46771 86.5924 5.31913 87.456 5.3223C88.0356 5.3199 88.6134 5.38703 89.177 5.52228C89.6953 5.64191 90.1898 5.84778 90.6399 6.13129C91.0583 6.40027 91.4075 6.76412 91.659 7.1933C91.9212 7.66192 92.0524 8.19246 92.039 8.72928V13.5793C92.0359 13.7771 92.0499 13.9749 92.081 14.1703C92.0978 14.3025 92.1446 14.429 92.2179 14.5403C92.2808 14.6292 92.369 14.6971 92.471 14.7353C92.5948 14.7743 92.7242 14.7923 92.854 14.7883C92.9578 14.7841 93.0613 14.7741 93.164 14.7583C93.322 14.7363 93.466 14.7133 93.596 14.6893L93.885 15.8443C93.72 15.9443 93.553 16.0353 93.38 16.1263C93.2023 16.2182 93.0173 16.2955 92.8269 16.3573C92.6192 16.4261 92.4066 16.4793 92.1909 16.5163C91.9393 16.5572 91.6849 16.578 91.43 16.5783C90.9747 16.5916 90.5257 16.4694 90.1399 16.2273C89.9688 16.1147 89.822 15.969 89.708 15.7988C89.594 15.6286 89.515 15.4374 89.4759 15.2363C89.2019 15.4862 88.8999 15.7037 88.576 15.8843C88.2804 16.0533 87.9684 16.192 87.6449 16.2983C87.3372 16.399 87.0209 16.4713 86.6999 16.5143C86.3981 16.5528 86.0942 16.5735 85.7899 16.5763C85.333 16.5793 84.8783 16.5135 84.4409 16.3813C84.0636 16.2663 83.7154 16.0716 83.42 15.8103C83.1354 15.5561 82.913 15.24 82.7699 14.8863C82.6093 14.4719 82.5296 14.0307 82.5349 13.5863C82.5244 13.0864 82.6134 12.5894 82.797 12.1243C82.9638 11.7188 83.2106 11.3511 83.5229 11.0433C83.8465 10.733 84.2205 10.4801 84.6289 10.2953C85.0769 10.0896 85.5465 9.93463 86.029 9.83328C86.556 9.71543 87.0906 9.63457 87.6289 9.59128C88.1916 9.54528 88.7643 9.52228 89.347 9.52228V9.13028C89.3559 8.81548 89.3046 8.50188 89.196 8.2063C89.1028 7.96802 88.9568 7.75397 88.769 7.58029C88.5772 7.41846 88.3542 7.29763 88.1139 7.22528C87.8398 7.1455 87.5554 7.10642 87.2699 7.10928C87.021 7.10712 86.7724 7.12957 86.5279 7.1763C86.2826 7.22239 86.0443 7.30002 85.8189 7.40729C85.5603 7.53109 85.3142 7.67943 85.084 7.85028C84.7873 8.07003 84.5041 8.30746 84.2359 8.56128L82.841 6.9743ZM73.27 2.62628V7.3053H74.77C75.2355 7.31174 75.7001 7.26475 76.1549 7.16528C76.5333 7.08847 76.8941 6.94197 77.219 6.73328C77.5016 6.54416 77.7328 6.28785 77.8919 5.9873C78.0558 5.65844 78.1371 5.29461 78.1289 4.92728C78.1359 4.5799 78.0765 4.23441 77.9539 3.9093C77.8334 3.61742 77.6274 3.36884 77.3629 3.19629C77.0275 2.98493 76.6537 2.84156 76.263 2.77429C75.705 2.67186 75.1382 2.62464 74.571 2.6333L73.27 2.62628ZM73.27 9.33929V14.3393H75.4419C75.9397 14.3493 76.4358 14.2783 76.9109 14.1293C77.2868 14.0087 77.6365 13.8184 77.9419 13.5683C78.1976 13.3579 78.4026 13.0927 78.542 12.7923C78.6704 12.5222 78.7387 12.2274 78.742 11.9283C78.7423 11.585 78.6743 11.2451 78.542 10.9283C78.4091 10.6098 78.2008 10.3284 77.935 10.1083C77.6222 9.85665 77.2635 9.66817 76.8789 9.55328C76.3764 9.40636 75.8544 9.3369 75.331 9.34729L73.27 9.33929ZM75.5929 0.58728C76.3348 0.57908 77.0745 0.668854 77.7929 0.854279C78.3878 1.00832 78.9499 1.26888 79.4519 1.62329C79.8961 1.9476 80.2585 2.37119 80.51 2.86029C80.7629 3.38432 80.889 3.96052 80.878 4.5423C80.88 4.93957 80.7993 5.33292 80.641 5.6973C80.4802 6.07453 80.26 6.4236 79.9889 6.73129C79.708 7.04844 79.3819 7.32238 79.021 7.54428C78.6554 7.77312 78.2572 7.9451 77.8399 8.05429C78.2862 8.13489 78.721 8.2692 79.135 8.45428C79.582 8.65138 79.993 8.92179 80.3509 9.2543C80.7289 9.59946 81.0372 10.0139 81.2589 10.4753C81.5061 10.998 81.6277 11.5712 81.6139 12.1493C81.6124 12.6915 81.4898 13.2266 81.255 13.7153C81.0007 14.2375 80.6343 14.697 80.182 15.0613C79.66 15.4835 79.0628 15.8031 78.422 16.0033C77.6359 16.2543 76.8139 16.3742 75.9889 16.3583H70.429V0.581299L75.5929 0.58728Z", fill: "var(--color-text-brandDarkBlue, #212C65)" })))), this.state === 'collapsed' && h("img", { key: '72b2ab3529c009c8c2e4c94defc113d5f56da88b', src: logoSrc, alt: "" })), h("div", { key: '7d9a9ccd0d82d8605c37d0b56897ec49fb37d504', class: `collapse_button ${this.state}` }, h("gb-collapse-button", { key: '84712cb410e87ebdc7e40c45df50384e4dfb98ac', icon: "assets/collapse_arrow.svg", color: this.category === 'plain_background' ? 'gray' : 'white', action: this.state === 'collapsed' ? 'expand' : 'collapse', onClick: () => (this.state === 'collapsed' ? this.expandSideBar() : this.collapseSideBar()) }))), h("div", { key: '19eac4fea9930c28f6ad9a8c0d01b2cd66493889', class: "navigation" }, h("div", { key: '029472b9b053a69f62844df8a2adede7d92e328e', class: "item" }, h("gb-simple-side-bar-item", { key: '706335859712a8847c968eeab852d126f9bb92b8', state: this.activeIndex === 0 ? 'active' : 'default', icon: this.firstItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(0), label: this.firstItemLabel }), h("gb-simple-side-bar-item", { key: 'eb350f58fc2b78656d97928286ca1a5e56c9937c', state: this.activeIndex === 1 ? 'active' : 'default', icon: this.secondItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(1), label: this.secondItemLabel }), this.thirdItemLabel && (h("gb-simple-side-bar-item", { key: 'a15bbf15da7000b7ca6d5c515b2ed740ce691f4c', state: this.activeIndex === 2 ? 'active' : 'default', icon: this.thirdItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(2), label: this.thirdItemLabel })), this.fourthItemLabel && (h("gb-simple-side-bar-item", { key: 'f5689b59816eb96193cecca8714795bfdbf027d3', state: this.activeIndex === 3 ? 'active' : 'default', icon: this.fourthItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(3), label: this.fourthItemLabel })), this.fifthItemLabel && (h("gb-simple-side-bar-item", { key: '8f27b337021db79d081d1103d36ad89d9da01991', state: this.activeIndex === 4 ? 'active' : 'default', icon: this.fifthItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(4), label: this.fifthItemLabel })))), this.showSecondCategory && (h("div", { key: 'a1d4da0a06b9f880f65f8bb4aaaf4af9cd11a68b', class: "navigation" }, h("div", { key: 'e781646f80300c6834ec1ed4bc81c84cd445f8e9', class: "item" }, this.sixthItemLabel && (h("gb-simple-side-bar-item", { key: 'd5e4f2522c0b98ca28d684ecb2a6c2271a4b0060', state: this.activeIndex === 5 ? 'active' : 'default', icon: this.sixthItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(5), label: this.sixthItemLabel })), this.seventhItemLabel && (h("gb-simple-side-bar-item", { key: '5b4f8f38f74b2628f0528b3f9cfbec6ed1c2c4a9', state: this.activeIndex === 6 ? 'active' : 'default', icon: this.seventhItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(6), label: this.seventhItemLabel })), this.eighthItemLabel && (h("gb-simple-side-bar-item", { key: '0f3084b313a7d7210ef2b4462ae73739c2c490d4', state: this.activeIndex === 7 ? 'active' : 'default', icon: this.eighthItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(7), label: this.eighthItemLabel })), this.ninthItemLabel && (h("gb-simple-side-bar-item", { key: 'f5dd3661e6aa682095b8d3af63b4c630e7bcf3ed', state: this.activeIndex === 8 ? 'active' : 'default', icon: this.ninthItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(8), label: this.ninthItemLabel })), this.tenthItemLabel && (h("gb-simple-side-bar-item", { key: '945136f308362c8b38c2f81afb54d0d05b9cb9a6', state: this.activeIndex === 9 ? 'active' : 'default', icon: this.tenthItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(9), label: this.tenthItemLabel })))))), this.state === 'expanded' && (h("div", { key: '45941b958d5d14d52fe931caa2279c84aa51cba5', class: "application_name" }, h("div", { key: '714f6c056b2f800a5b06df3359560473269a5e56', class: `wrapper ${this.category}` }, this.category === 'plain_background' && (h("div", { key: 'f05065cb92757f2018f78003e57fed9dc5e40335', class: "application_name_pattern" }, h("img", { key: '339a494302070ace2ca01897ba6134214265c5dc', src: patternSrc, alt: "" }))), this.hasInfo ? (h(Fragment, null, h("div", { class: "information_header" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", class: `help_icon ${this.category}` }, h("path", { opacity: "0.4", d: "M22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12Z", fill: "var(--color-text-brandDarkBlue, #212C65)" }), h("path", { d: "M11.2422 17C11.2422 17.5523 11.6899 18 12.2422 18C12.7945 18 13.2422 17.5523 13.2422 17H11.2422ZM11.2422 10C10.6899 10 10.2422 10.4477 10.2422 11C10.2422 11.5523 10.6899 12 11.2422 12V10ZM12.0957 11.1464L12.8028 10.4393L12.0957 11.1464ZM11.992 7C11.4397 7 10.992 7.44772 10.992 8C10.992 8.55228 11.4397 9 11.992 9V7ZM12.001 9C12.5533 9 13.001 8.55228 13.001 8C13.001 7.44772 12.5533 7 12.001 7V9ZM23 12C23 5.92487 18.0751 1 12 1V3C16.9706 3 21 7.02944 21 12H23ZM12 1C5.92487 1 1 5.92487 1 12H3C3 7.02944 7.02944 3 12 3V1ZM1 12C1 18.0751 5.92487 23 12 23V21C7.02944 21 3 16.9706 3 12H1ZM12 23C18.0751 23 23 18.0751 23 12H21C21 16.9706 16.9706 21 12 21V23ZM11.2422 12V17H13.2422V12H11.2422ZM11.2422 12C11.3638 12 11.4531 12.0001 11.5286 12.002C11.6046 12.0039 11.6417 12.0072 11.6576 12.0094C11.6729 12.0114 11.6408 12.009 11.5864 11.9866C11.524 11.9609 11.4526 11.9176 11.3886 11.8536L12.8028 10.4393C12.5129 10.1493 12.1711 10.0604 11.9241 10.0272C11.7058 9.99788 11.4496 10 11.2422 10V12ZM13.2422 12C13.2422 11.7926 13.2443 11.5364 13.215 11.3181C13.1818 11.0711 13.0928 10.7293 12.8028 10.4393L11.3886 11.8536C11.3246 11.7896 11.2813 11.7181 11.2556 11.6558C11.2332 11.6014 11.2307 11.5693 11.2328 11.5846C11.2349 11.6005 11.2383 11.6376 11.2402 11.7136C11.2421 11.789 11.2422 11.8784 11.2422 12H13.2422ZM11.992 9H12.001V7H11.992V9Z", fill: "var(--color-text-brandDarkBlue, #212C65)" })), h("p", { class: `need_help ${this.category} text-lg-bold` }, "Need help?")), h("p", { class: `info phone_no ${this.category} text-sm-medium` }, this.email), this.phoneNumber && h("p", { class: `info ${this.category} text-sm-medium` }, this.phoneNumber))) : (h(Fragment, null, h("div", { class: `application_icon ${this.category}`, innerHTML: this.leadingIconSvg }), h("slot", { name: "application_name" })))))))), this.type === 'complex' && (h("div", { key: '8d5270450d9daaea3125c579aac7541cd06f139b', class: `sidebar_and_nav ${this.state}` }, h("div", { key: '5861b52706b44119cd0bf08dad99933395d92161', class: "nav_div" }, h("div", { key: 'a5831d0b5428280bc6563905a50bef9bbed3f0cf', class: "logo_and_button" }, h("svg", { key: '80dee04fe1b2ef4415ece4da7d6387a8c6c004a4', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", style: { cursor: 'pointer' }, onClick: () => this.collapseAndExpandSidebar() }, h("path", { key: '8d0bb66e158c4ea7f3f4fd8483c17c16a63a7ed9', d: "M4 5L20 5", stroke: "var(--color-icon, #4B5565)", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: 'c909f18c80e242906b07ece5b39f0a326e4d6ea5', d: "M4 12L20 12", stroke: "var(--color-icon, #4B5565)", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: '9f57fa1ad709a6fae4706417f144e57c3c594333', d: "M4 19L20 19", stroke: "var(--color-icon, #4B5565)", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })), this.state === 'expanded' && h("img", { key: '063d0c162a678b11eefb6a6e94e6f737e2c31be4', src: blueLogoSrc }), this.state === 'collapsed' && h("img", { key: '24dd2c9bdd6de571e7b24c214b4a806052984c91', src: logoSrc, alt: "" }), h("gb-collapse-button", { key: 'c926b73fc625af25372c77d27ca7928b25fd52b7', color: "gray", action: this.state === 'collapsed' ? 'expand' : 'collapse', onClick: () => (this.state === 'collapsed' ? this.expandSideBar() : this.collapseSideBar()) }))), h("div", { key: '5201eb745fc85163851abf8b34c1e0748097aab2', class: "complex_sidebar_div" }, h("div", { key: '3df06af7b444f78f2be0918fd13d486af4d9c744', class: `primary_side_menu ${this.category} ${this.navItemStyle}` }, this.category === 'colored_background' && (h("div", { key: '1bbcfaa924243c81e2b7c90157d13bc41c5d43fd', class: "pattern" }, h("img", { key: 'c7d7aa3b9e7c15e5a68d065ba8daecb9bb470309', src: patternSrc, alt: "" }))), h("div", { key: '3d1286caae8fc706b5d3e27d2693f59fcbc319b2', class: "primary_side_menu_container" }, Object.keys(this.complexSidebarData).map((primaryItem, index) => (h("gb-complex-primary-side-bar-item", { key: `${index}`, label: primaryItem, category: this.category, "item-style": this.navItemStyle, icon: this.complexSidebarData[primaryItem].icon, state: this.activePrimaryItem === primaryItem ? 'active' : 'default', onClick: () => this.handlePrimaryClick(primaryItem, index) }))))), h("div", { key: '4e04a0476ec924993290ffc5b1955315cd827a2b', class: `secondary_side_menu ${this.category} ${this.state}` }, h("div", { key: '1b42d3968555d2ad47ba89ab6f42bdaa0dd9a77e', class: "sside_menu" }, this.complexSidebarData[this.activePrimaryItem].items.map((secondaryItem, index) => (h("gb-complex-secondary-side-bar-item", { key: `${this.activePrimaryItem}-${index}`, type: this.state === 'expanded' ? 'full_with_label' : 'icon_only', label: secondaryItem.label, category: this.category, icon: secondaryItem.icon, state: this.activeSecondaryItem === secondaryItem.label ? 'active' : 'default', onClick: () => this.handleSecondaryClick(secondaryItem.label, index) }))))))))));
+        return (h(Fragment, null, this.type === 'simple' && (h("div", { key: 'b1f3ec5a6d72ecf8f6b2154ace3a609e083eae67', class: `simple_sidebar_div ${this.state} ${this.category}` }, this.category === 'colored_background' && (h("div", { key: '7d9417e2a1625d63118502d7e7c3b8bd7efc6d22', class: "pattern" }, h("img", { key: 'cc8839c000180d73b3b097e6791414e5303f8c4f', src: patternSrc, alt: "" }))), h("div", { key: 'd023c5926c3e1e370b16c55859a537e944f27732', class: "nav" }, h("div", { key: '095cfb31732a76f81270476b88d298bdc06805dc', class: `sidebar_header ${this.state}` }, h("div", { key: '1e5bf1374aaf577b02176889cef73a459ab89ee7', class: `logo_and_name ${this.state}` }, this.state === 'expanded' && (h("div", { key: '72100648f7e69224474d7cd73a342cad545f12d1', class: "sidebar_logo" }, h("img", { key: '9c8ed05c867f0e7c3611f7f4d81d0bad67be1547', src: logoSrc, alt: "" }), h("svg", { key: 'b73504bc515c2f80313ed20554ee71e70bf4386b', xmlns: "http://www.w3.org/2000/svg", width: "117", height: "17", viewBox: "0 0 117 17", fill: "none" }, h("path", { key: '1ae0bf7bd713ea4897fc4549753792e0fcd7da2a', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M55.977 12.6264C56.3596 13.1025 56.8394 13.4915 57.3843 13.7674C57.9292 14.0434 58.5268 14.1998 59.137 14.2264C59.3682 14.2276 59.5989 14.2038 59.825 14.1554C60.0203 14.1134 60.2068 14.0376 60.376 13.9314C60.5266 13.8276 60.6514 13.6908 60.741 13.5314C60.8332 13.3494 60.8789 13.1473 60.874 12.9434C60.8797 12.7871 60.8427 12.6322 60.767 12.4954C60.6928 12.3641 60.5948 12.2478 60.478 12.1524C60.3548 12.0522 60.2206 11.9663 60.078 11.8964C59.9369 11.8205 59.7898 11.7567 59.638 11.7054C59.365 11.6054 59.092 11.4954 58.821 11.4054C58.55 11.3154 58.285 11.2194 58.009 11.1054C57.856 11.0544 57.668 10.9864 57.454 10.9054C57.2189 10.8192 56.9891 10.7191 56.766 10.6054C56.5267 10.4828 56.2967 10.3428 56.078 10.1864C55.8479 10.0188 55.6411 9.82143 55.463 9.59936C55.2755 9.3641 55.1254 9.10136 55.018 8.82037C54.8987 8.50077 54.841 8.16145 54.848 7.82037C54.8385 7.38435 54.9601 6.95552 55.197 6.58938C55.4368 6.22409 55.7548 5.91665 56.128 5.68935C56.5352 5.44285 56.9786 5.26199 57.442 5.15337C57.9371 5.03187 58.4452 4.9714 58.955 4.97335C59.7154 4.96345 60.4735 5.05835 61.208 5.25536C61.883 5.44235 62.5133 5.76379 63.061 6.20037L61.881 7.97738C61.675 7.77738 61.475 7.59837 61.276 7.43737C61.0823 7.28066 60.8736 7.14333 60.653 7.02737C60.4242 6.91238 60.1825 6.82509 59.933 6.76736C59.6405 6.70771 59.3425 6.67923 59.044 6.68237C58.8003 6.6793 58.5576 6.71302 58.324 6.78237C58.1425 6.83794 57.973 6.92678 57.824 7.04437C57.7018 7.14787 57.6053 7.27829 57.542 7.42538C57.4813 7.5669 57.4503 7.71939 57.451 7.87338C57.4479 8.03229 57.4929 8.18844 57.58 8.32137C57.6712 8.45192 57.7854 8.56477 57.917 8.65438C58.0598 8.75308 58.2135 8.83495 58.375 8.89837C58.549 8.96737 58.724 9.03036 58.903 9.08737C59.183 9.18737 59.467 9.28736 59.749 9.37936C60.031 9.47136 60.313 9.57035 60.592 9.66735C60.731 9.72035 60.902 9.77936 61.104 9.85336C61.3158 9.93021 61.522 10.0218 61.721 10.1274C61.945 10.2432 62.1576 10.3798 62.356 10.5354C62.571 10.6981 62.7616 10.8907 62.922 11.1074C63.0947 11.347 63.2296 11.6118 63.322 11.8924C63.4341 12.2242 63.4876 12.5731 63.48 12.9234C63.4886 13.3821 63.3593 13.8329 63.109 14.2174C62.8572 14.5968 62.5255 14.9167 62.137 15.1544C61.711 15.4162 61.2468 15.6099 60.761 15.7284C60.2447 15.8581 59.7143 15.923 59.182 15.9214C58.7286 15.9217 58.2755 15.896 57.825 15.8444C57.4131 15.7956 57.0069 15.7072 56.612 15.5804C56.2266 15.4585 55.8573 15.2906 55.512 15.0804C55.152 14.8574 54.8226 14.5884 54.532 14.2804L55.977 12.6264ZM46.023 5.15136V12.3824C46.0171 12.6297 46.0603 12.8758 46.15 13.1064C46.2233 13.2937 46.3378 13.4622 46.485 13.5994C46.6276 13.7299 46.7989 13.8251 46.985 13.8774C47.1837 13.9372 47.3905 13.9659 47.598 13.9624C48.1129 13.9605 48.6258 13.9001 49.127 13.7824C49.6297 13.6726 50.1117 13.4836 50.555 13.2224V5.14636H53.165V13.8624C53.1705 14.1064 53.1909 14.3498 53.226 14.5914C53.262 14.9064 53.326 15.2774 53.403 15.7014H50.93C50.916 15.6614 50.893 15.5894 50.866 15.4774C50.839 15.3654 50.805 15.2534 50.772 15.1304C50.739 15.0074 50.715 14.8904 50.687 14.7814C50.6662 14.7 50.6501 14.6176 50.639 14.5344C50.4019 14.7386 50.1461 14.9201 49.875 15.0764C49.5915 15.2448 49.2941 15.3887 48.986 15.5064C48.6826 15.626 48.3695 15.719 48.05 15.7844C47.7544 15.8493 47.4527 15.8828 47.15 15.8844C46.5406 15.9045 45.9328 15.8088 45.359 15.6024C44.9281 15.4446 44.5423 15.1836 44.2355 14.8422C43.9287 14.5009 43.7102 14.0897 43.599 13.6444C43.4774 13.1714 43.4179 12.6847 43.422 12.1964V5.14938L46.023 5.15136ZM34.173 14.0344C34.4914 14.1402 34.8178 14.2205 35.149 14.2744C35.5278 14.3366 35.9111 14.368 36.295 14.3684C36.6865 14.3713 37.0725 14.2764 37.418 14.0924C37.7682 13.8978 38.0679 13.6238 38.293 13.2924C38.5589 12.9056 38.7546 12.4751 38.871 12.0204C39.0127 11.4651 39.0799 10.8934 39.071 10.3204C39.0745 9.84945 39.0238 9.37971 38.92 8.92037C38.8359 8.53264 38.6762 8.1653 38.45 7.83938C38.2415 7.54414 37.9623 7.30585 37.638 7.14636C37.2658 6.97548 36.8594 6.89203 36.45 6.90237C36.2347 6.90349 36.0196 6.91785 35.806 6.94537C35.591 6.97637 35.384 7.01636 35.183 7.06536C34.9916 7.11019 34.8033 7.16699 34.619 7.23537C34.4596 7.29532 34.3062 7.37033 34.161 7.45937L34.173 14.0344ZM31.573 0.395379H34.173V5.94637C34.5815 5.64458 35.0369 5.41212 35.521 5.25835C36.0793 5.07415 36.6641 4.98329 37.252 4.98937C37.9775 4.97144 38.697 5.12493 39.352 5.43737C39.9085 5.71759 40.3919 6.12367 40.764 6.62338C41.1391 7.13643 41.4108 7.71756 41.564 8.33437C41.7346 8.99307 41.82 9.67094 41.818 10.3514C41.8392 11.1967 41.6831 12.037 41.36 12.8184C41.081 13.474 40.6682 14.0643 40.148 14.5514C39.6578 15.003 39.0812 15.3507 38.453 15.5734C37.838 15.79 37.1911 15.9022 36.539 15.9054C36.0383 15.9054 35.5797 15.9 35.163 15.8894C34.744 15.8774 34.338 15.8644 33.951 15.8464C33.564 15.8284 33.173 15.7994 32.791 15.7614C32.409 15.7234 32.007 15.6784 31.591 15.6234L31.573 0.395379ZM24.573 14.2164C24.984 14.2278 25.3873 14.103 25.72 13.8614C26.0497 13.616 26.3187 13.2982 26.506 12.9324C26.7225 12.5243 26.8769 12.0861 26.964 11.6324C27.066 11.1494 27.1166 10.657 27.115 10.1634C27.1164 9.72126 27.0718 9.28025 26.982 8.84737C26.9009 8.46194 26.7494 8.09478 26.535 7.76437C26.3324 7.45791 26.0577 7.20585 25.735 7.03036C25.3682 6.83692 24.9575 6.74183 24.543 6.75436C24.1538 6.74764 23.7699 6.845 23.431 7.03637C23.1073 7.23018 22.8334 7.49693 22.631 7.81536C22.4048 8.17634 22.2412 8.57292 22.147 8.98837C21.9311 9.90171 21.9243 10.852 22.127 11.7684C22.216 12.194 22.3705 12.6032 22.585 12.9814C22.7843 13.3379 23.0607 13.6453 23.394 13.8814C23.7431 14.1127 24.1554 14.2301 24.574 14.2174L24.573 14.2164ZM24.66 15.9734C23.8645 15.9875 23.0734 15.8518 22.328 15.5734C21.6834 15.3259 21.1025 14.937 20.628 14.4354C20.1558 13.9225 19.7994 13.3141 19.583 12.6514C19.335 11.9037 19.2134 11.12 19.223 10.3324C19.2197 9.63472 19.3305 8.94126 19.551 8.27938C19.7645 7.63603 20.1153 7.04677 20.5791 6.55242C21.0429 6.05807 21.6086 5.67044 22.237 5.41637C22.9955 5.11592 23.8064 4.97038 24.622 4.98837C25.43 4.96837 26.2335 5.11404 26.983 5.41637C27.6091 5.68005 28.1666 6.0833 28.613 6.59536C29.0478 7.1081 29.3694 7.70683 29.557 8.35238C29.7617 9.05529 29.8627 9.7843 29.857 10.5164C29.8615 11.2376 29.7414 11.9541 29.502 12.6344C29.2754 13.2745 28.9255 13.864 28.472 14.3694C28.0128 14.8682 27.4555 15.2669 26.835 15.5404C26.1487 15.8353 25.4079 15.9818 24.661 15.9704L24.66 15.9734ZM14.302 0.394372H16.902V13.1564C16.8789 13.4015 16.9368 13.6474 17.067 13.8564C17.1212 13.9252 17.191 13.9801 17.2706 14.0167C17.3503 14.0532 17.4375 14.0702 17.525 14.0664C17.7153 14.0716 17.9048 14.0415 18.084 13.9774C18.237 13.9214 18.417 13.8494 18.615 13.7774L19.055 15.0844C18.8809 15.2024 18.6984 15.3077 18.509 15.3994C18.3094 15.4997 18.1032 15.5865 17.892 15.6594C17.672 15.7336 17.4475 15.794 17.22 15.8404C16.9934 15.8855 16.763 15.9086 16.532 15.9094C16.2533 15.9095 15.9753 15.8797 15.703 15.8204C15.4428 15.7656 15.1996 15.6489 14.994 15.4804C14.7726 15.2971 14.6007 15.0612 14.494 14.7944C14.3574 14.4324 14.2942 14.047 14.308 13.6604L14.302 0.394372ZM12.602 14.6814C12.239 14.8724 11.868 15.0444 11.485 15.2064C11.0739 15.377 10.6508 15.517 10.219 15.6254C9.71274 15.7511 9.19858 15.8427 8.68001 15.8994C8.03877 15.9693 7.39406 16.0027 6.74901 15.9994C6.02384 16.0081 5.30187 15.9018 4.61001 15.6844C3.40238 15.3004 2.35048 14.5377 1.61001 13.5094C1.24144 13.0029 0.939006 12.4514 0.710011 11.8684C0.468973 11.2677 0.289379 10.6442 0.174001 10.0074C0.0576192 9.35516 -0.000605498 8.69388 4.74727e-06 8.03137C0.000633892 7.33814 0.0726773 6.64683 0.215001 5.96838C0.349412 5.31408 0.556361 4.67679 0.832006 4.06835C1.10146 3.48093 1.44454 2.9302 1.853 2.42938C2.67554 1.41797 3.78369 0.67779 5.03301 0.305352C5.72268 0.0959449 6.44028 -0.0069001 7.161 0.000359076C7.54 0.000359076 7.88701 0.012372 8.20301 0.032372C8.49632 0.0492166 8.78846 0.0826091 9.07801 0.132378C9.34144 0.177448 9.60066 0.244327 9.853 0.33236C10.107 0.419187 10.3543 0.52447 10.593 0.647362C10.8609 0.782467 11.1192 0.935843 11.366 1.10638C11.6327 1.28438 11.9263 1.49435 12.247 1.73635L10.797 3.68838C10.4912 3.41105 10.1686 3.15288 9.83101 2.91537C9.55631 2.72032 9.26083 2.55631 8.95 2.42635C8.66096 2.30636 8.35893 2.22046 8.05001 2.17037C7.70771 2.11985 7.362 2.0961 7.01601 2.09936C6.40137 2.08829 5.79444 2.23754 5.25501 2.53237C4.73856 2.82694 4.29629 3.23569 3.96201 3.72738C3.59548 4.26897 3.32706 4.87079 3.16901 5.50536C2.98332 6.22376 2.89254 6.9634 2.89901 7.70538C2.89341 8.4936 2.97049 9.28022 3.129 10.0524C3.26457 10.7479 3.51573 11.4158 3.87201 12.0284C4.19608 12.5805 4.64638 13.0479 5.18601 13.3924C5.76832 13.7417 6.43821 13.9176 7.11701 13.8994C7.33906 13.9036 7.56116 13.8939 7.782 13.8704C8.018 13.8414 8.25401 13.8234 8.49601 13.7874C8.73801 13.7514 8.972 13.7084 9.202 13.6594C9.432 13.6104 9.64401 13.5594 9.84601 13.5094V8.32836H12.595L12.602 14.6814Z", fill: "var(--color-text-brandDarkBlue, #212C65)" }), h("path", { key: 'd854aa73cc4c404e44c14258fe7c20c83e9c0e0e', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M109.442 9.51028L113.077 5.4953H116.426L111.367 10.3453L116.755 16.3633H113.547L109.447 11.6633V16.3633H106.768V0.58728H109.447L109.442 9.51028ZM94.8709 7.3573C94.8709 7.1413 94.871 6.86529 94.852 6.52429C94.8439 6.1785 94.8071 5.83398 94.742 5.49429H97.2649C97.2894 5.55963 97.3098 5.62644 97.326 5.69431C97.345 5.77631 97.3659 5.86929 97.3919 5.96429C97.4179 6.05929 97.4369 6.16428 97.4549 6.26428C97.4729 6.36428 97.486 6.46428 97.5 6.55228C97.687 6.38781 97.8877 6.23961 98.0999 6.10928C98.6115 5.78686 99.1757 5.55704 99.7669 5.4303C100.1 5.35753 100.44 5.32132 100.781 5.3223C101.328 5.31866 101.872 5.40723 102.39 5.58429C102.869 5.74685 103.312 6.00393 103.69 6.3403C104.063 6.67744 104.36 7.08984 104.562 7.55029C104.781 8.06212 104.89 8.61452 104.881 9.1713V16.3713H102.196V9.6713C102.203 9.29813 102.158 8.9258 102.061 8.56528C101.986 8.29345 101.849 8.04279 101.661 7.83328C101.484 7.64715 101.263 7.50943 101.018 7.43329C100.734 7.34463 100.438 7.30144 100.141 7.3053C99.9337 7.30661 99.7268 7.32297 99.5219 7.35428C99.2943 7.38247 99.069 7.42726 98.8479 7.48828C98.6183 7.5484 98.392 7.6205 98.17 7.70428C97.9553 7.77835 97.7466 7.86895 97.5459 7.97528V16.3753H94.8689L94.8709 7.3573ZM89.354 10.6903C88.693 10.7039 88.0352 10.7877 87.3919 10.9403C86.9571 11.0391 86.5446 11.2185 86.1759 11.4693C85.8984 11.6587 85.6811 11.9239 85.55 12.2333C85.4322 12.5398 85.3738 12.866 85.378 13.1943C85.3692 13.4439 85.403 13.6931 85.4779 13.9313C85.5355 14.1106 85.6361 14.273 85.771 14.4043C85.9046 14.5271 86.0668 14.6145 86.243 14.6583C86.4338 14.7108 86.631 14.7364 86.8289 14.7343C87.0219 14.7343 87.219 14.7223 87.419 14.7063C87.6305 14.6839 87.8398 14.6444 88.045 14.5883C88.266 14.5295 88.4818 14.4522 88.69 14.3573C88.9221 14.2504 89.144 14.1225 89.3529 13.9753L89.354 10.6903ZM82.841 6.9743C83.4506 6.43993 84.1574 6.02806 84.9229 5.76129C85.735 5.46771 86.5924 5.31913 87.456 5.3223C88.0356 5.3199 88.6134 5.38703 89.177 5.52228C89.6953 5.64191 90.1898 5.84778 90.6399 6.13129C91.0583 6.40027 91.4075 6.76412 91.659 7.1933C91.9212 7.66192 92.0524 8.19246 92.039 8.72928V13.5793C92.0359 13.7771 92.0499 13.9749 92.081 14.1703C92.0978 14.3025 92.1446 14.429 92.2179 14.5403C92.2808 14.6292 92.369 14.6971 92.471 14.7353C92.5948 14.7743 92.7242 14.7923 92.854 14.7883C92.9578 14.7841 93.0613 14.7741 93.164 14.7583C93.322 14.7363 93.466 14.7133 93.596 14.6893L93.885 15.8443C93.72 15.9443 93.553 16.0353 93.38 16.1263C93.2023 16.2182 93.0173 16.2955 92.8269 16.3573C92.6192 16.4261 92.4066 16.4793 92.1909 16.5163C91.9393 16.5572 91.6849 16.578 91.43 16.5783C90.9747 16.5916 90.5257 16.4694 90.1399 16.2273C89.9688 16.1147 89.822 15.969 89.708 15.7988C89.594 15.6286 89.515 15.4374 89.4759 15.2363C89.2019 15.4862 88.8999 15.7037 88.576 15.8843C88.2804 16.0533 87.9684 16.192 87.6449 16.2983C87.3372 16.399 87.0209 16.4713 86.6999 16.5143C86.3981 16.5528 86.0942 16.5735 85.7899 16.5763C85.333 16.5793 84.8783 16.5135 84.4409 16.3813C84.0636 16.2663 83.7154 16.0716 83.42 15.8103C83.1354 15.5561 82.913 15.24 82.7699 14.8863C82.6093 14.4719 82.5296 14.0307 82.5349 13.5863C82.5244 13.0864 82.6134 12.5894 82.797 12.1243C82.9638 11.7188 83.2106 11.3511 83.5229 11.0433C83.8465 10.733 84.2205 10.4801 84.6289 10.2953C85.0769 10.0896 85.5465 9.93463 86.029 9.83328C86.556 9.71543 87.0906 9.63457 87.6289 9.59128C88.1916 9.54528 88.7643 9.52228 89.347 9.52228V9.13028C89.3559 8.81548 89.3046 8.50188 89.196 8.2063C89.1028 7.96802 88.9568 7.75397 88.769 7.58029C88.5772 7.41846 88.3542 7.29763 88.1139 7.22528C87.8398 7.1455 87.5554 7.10642 87.2699 7.10928C87.021 7.10712 86.7724 7.12957 86.5279 7.1763C86.2826 7.22239 86.0443 7.30002 85.8189 7.40729C85.5603 7.53109 85.3142 7.67943 85.084 7.85028C84.7873 8.07003 84.5041 8.30746 84.2359 8.56128L82.841 6.9743ZM73.27 2.62628V7.3053H74.77C75.2355 7.31174 75.7001 7.26475 76.1549 7.16528C76.5333 7.08847 76.8941 6.94197 77.219 6.73328C77.5016 6.54416 77.7328 6.28785 77.8919 5.9873C78.0558 5.65844 78.1371 5.29461 78.1289 4.92728C78.1359 4.5799 78.0765 4.23441 77.9539 3.9093C77.8334 3.61742 77.6274 3.36884 77.3629 3.19629C77.0275 2.98493 76.6537 2.84156 76.263 2.77429C75.705 2.67186 75.1382 2.62464 74.571 2.6333L73.27 2.62628ZM73.27 9.33929V14.3393H75.4419C75.9397 14.3493 76.4358 14.2783 76.9109 14.1293C77.2868 14.0087 77.6365 13.8184 77.9419 13.5683C78.1976 13.3579 78.4026 13.0927 78.542 12.7923C78.6704 12.5222 78.7387 12.2274 78.742 11.9283C78.7423 11.585 78.6743 11.2451 78.542 10.9283C78.4091 10.6098 78.2008 10.3284 77.935 10.1083C77.6222 9.85665 77.2635 9.66817 76.8789 9.55328C76.3764 9.40636 75.8544 9.3369 75.331 9.34729L73.27 9.33929ZM75.5929 0.58728C76.3348 0.57908 77.0745 0.668854 77.7929 0.854279C78.3878 1.00832 78.9499 1.26888 79.4519 1.62329C79.8961 1.9476 80.2585 2.37119 80.51 2.86029C80.7629 3.38432 80.889 3.96052 80.878 4.5423C80.88 4.93957 80.7993 5.33292 80.641 5.6973C80.4802 6.07453 80.26 6.4236 79.9889 6.73129C79.708 7.04844 79.3819 7.32238 79.021 7.54428C78.6554 7.77312 78.2572 7.9451 77.8399 8.05429C78.2862 8.13489 78.721 8.2692 79.135 8.45428C79.582 8.65138 79.993 8.92179 80.3509 9.2543C80.7289 9.59946 81.0372 10.0139 81.2589 10.4753C81.5061 10.998 81.6277 11.5712 81.6139 12.1493C81.6124 12.6915 81.4898 13.2266 81.255 13.7153C81.0007 14.2375 80.6343 14.697 80.182 15.0613C79.66 15.4835 79.0628 15.8031 78.422 16.0033C77.6359 16.2543 76.8139 16.3742 75.9889 16.3583H70.429V0.581299L75.5929 0.58728Z", fill: "var(--color-text-brandDarkBlue, #212C65)" })))), this.state === 'collapsed' && h("img", { key: '872d02d9c00089cd86cb97ea694c6bcf24207370', src: logoSrc, alt: "" })), h("div", { key: '4d87ef5a02f63f717848036602a8f78e23945c77', class: `collapse_button ${this.state}` }, h("gb-collapse-button", { key: '77e2d68ca48909793b46295f67df97990ef9468d', icon: "assets/collapse_arrow.svg", color: this.category === 'plain_background' ? 'gray' : 'white', action: this.state === 'collapsed' ? 'expand' : 'collapse', onClick: () => (this.state === 'collapsed' ? this.expandSideBar() : this.collapseSideBar()) }))), h("div", { key: 'ee4e6304f160e42d6e6af5302965819f85c64f90', class: "navigation" }, h("div", { key: '178a2f128385e713c4dd603ac8e451c95d5575e8', class: "item" }, h("gb-simple-side-bar-item", { key: '56b9aae05618e975962541cb3ef7e4ccbfd5e9ea', state: this.activeIndex === 0 ? 'active' : 'default', icon: this.firstItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(0), label: this.firstItemLabel }), h("gb-simple-side-bar-item", { key: '579affd85b1c6d6d22da39ee59f41ac7d28d42a0', state: this.activeIndex === 1 ? 'active' : 'default', icon: this.secondItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(1), label: this.secondItemLabel }), this.thirdItemLabel && (h("gb-simple-side-bar-item", { key: 'd7121ac7b7e3b4afa9eabaa31ad4ab31f2bcfa85', state: this.activeIndex === 2 ? 'active' : 'default', icon: this.thirdItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(2), label: this.thirdItemLabel })), this.fourthItemLabel && (h("gb-simple-side-bar-item", { key: '33303e32eda63e3367541ff4bd5dd948f120c046', state: this.activeIndex === 3 ? 'active' : 'default', icon: this.fourthItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(3), label: this.fourthItemLabel })), this.fifthItemLabel && (h("gb-simple-side-bar-item", { key: 'a4edadc95772905603c17c82a5d2b40cb8da9700', state: this.activeIndex === 4 ? 'active' : 'default', icon: this.fifthItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(4), label: this.fifthItemLabel })))), this.showSecondCategory && (h("div", { key: '47c2dc0b0fde3db307a6828d12d3a49afa170ef5', class: "navigation" }, h("div", { key: '43e38aa1efb2e83dd12e303890e738fea46b56b8', class: "item" }, this.sixthItemLabel && (h("gb-simple-side-bar-item", { key: '4dc599aa4ff3236008303ade6dd67b0692b7a869', state: this.activeIndex === 5 ? 'active' : 'default', icon: this.sixthItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(5), label: this.sixthItemLabel })), this.seventhItemLabel && (h("gb-simple-side-bar-item", { key: '25358bc0c408db4800fb6cff8936935b6daccefe', state: this.activeIndex === 6 ? 'active' : 'default', icon: this.seventhItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(6), label: this.seventhItemLabel })), this.eighthItemLabel && (h("gb-simple-side-bar-item", { key: 'bf01956185ce47894b5538e6447129391efe4a77', state: this.activeIndex === 7 ? 'active' : 'default', icon: this.eighthItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(7), label: this.eighthItemLabel })), this.ninthItemLabel && (h("gb-simple-side-bar-item", { key: '6e6f69944ad55de1c5c4e531330bb650f3e67d0e', state: this.activeIndex === 8 ? 'active' : 'default', icon: this.ninthItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(8), label: this.ninthItemLabel })), this.tenthItemLabel && (h("gb-simple-side-bar-item", { key: '957831f1afecdbfe490b6e8edec7c5795b009cd0', state: this.activeIndex === 9 ? 'active' : 'default', icon: this.tenthItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(9), label: this.tenthItemLabel })))))), this.state === 'expanded' && (h("div", { key: 'd2011320d0e4c5f54878bbbda8b41d485e8b1966', class: "application_name" }, h("div", { key: 'bf3d8eb144122d5b6466af6772d62b1cd14f2b6c', class: `wrapper ${this.category}` }, this.category === 'plain_background' && (h("div", { key: '62d828c16b80c965583e75e81e4f16f0950943e1', class: "application_name_pattern" }, h("img", { key: '8fba5618e6c9a2b87efaf992954b239f57d76cf2', src: patternSrc, alt: "" }))), this.hasInfo ? (h(Fragment, null, h("div", { class: "information_header" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", class: `help_icon ${this.category}` }, h("path", { opacity: "0.4", d: "M22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12Z", fill: "var(--color-text-brandDarkBlue, #212C65)" }), h("path", { d: "M11.2422 17C11.2422 17.5523 11.6899 18 12.2422 18C12.7945 18 13.2422 17.5523 13.2422 17H11.2422ZM11.2422 10C10.6899 10 10.2422 10.4477 10.2422 11C10.2422 11.5523 10.6899 12 11.2422 12V10ZM12.0957 11.1464L12.8028 10.4393L12.0957 11.1464ZM11.992 7C11.4397 7 10.992 7.44772 10.992 8C10.992 8.55228 11.4397 9 11.992 9V7ZM12.001 9C12.5533 9 13.001 8.55228 13.001 8C13.001 7.44772 12.5533 7 12.001 7V9ZM23 12C23 5.92487 18.0751 1 12 1V3C16.9706 3 21 7.02944 21 12H23ZM12 1C5.92487 1 1 5.92487 1 12H3C3 7.02944 7.02944 3 12 3V1ZM1 12C1 18.0751 5.92487 23 12 23V21C7.02944 21 3 16.9706 3 12H1ZM12 23C18.0751 23 23 18.0751 23 12H21C21 16.9706 16.9706 21 12 21V23ZM11.2422 12V17H13.2422V12H11.2422ZM11.2422 12C11.3638 12 11.4531 12.0001 11.5286 12.002C11.6046 12.0039 11.6417 12.0072 11.6576 12.0094C11.6729 12.0114 11.6408 12.009 11.5864 11.9866C11.524 11.9609 11.4526 11.9176 11.3886 11.8536L12.8028 10.4393C12.5129 10.1493 12.1711 10.0604 11.9241 10.0272C11.7058 9.99788 11.4496 10 11.2422 10V12ZM13.2422 12C13.2422 11.7926 13.2443 11.5364 13.215 11.3181C13.1818 11.0711 13.0928 10.7293 12.8028 10.4393L11.3886 11.8536C11.3246 11.7896 11.2813 11.7181 11.2556 11.6558C11.2332 11.6014 11.2307 11.5693 11.2328 11.5846C11.2349 11.6005 11.2383 11.6376 11.2402 11.7136C11.2421 11.789 11.2422 11.8784 11.2422 12H13.2422ZM11.992 9H12.001V7H11.992V9Z", fill: "var(--color-text-brandDarkBlue, #212C65)" })), h("p", { class: `need_help ${this.category} text-lg-bold` }, "Need help?")), h("p", { class: `info phone_no ${this.category} text-sm-medium` }, this.email), this.phoneNumber && h("p", { class: `info ${this.category} text-sm-medium` }, this.phoneNumber))) : (h(Fragment, null, h("div", { class: `application_icon ${this.category}`, innerHTML: this.leadingIconSvg }), h("slot", { name: "application_name" })))))))), this.type === 'complex' && (h("div", { key: 'ebcc1ee5ae54a96ac042990a16508b9cc2ef3073', class: `sidebar_and_nav ${this.state}` }, h("div", { key: 'd579d575adaa5075fe6322d97619aa2791e06d7c', class: "nav_div" }, h("div", { key: 'dbc5e0229153f82ce74dc892caf72f53148cf859', class: "logo_and_button" }, h("svg", { key: '87966b68f2db7af0545e6ed2e0154a20f33a767d', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", style: { cursor: 'pointer' }, onClick: () => this.collapseAndExpandSidebar() }, h("path", { key: 'e3f625798eb385f544aecc61ef9abfee9378e2ee', d: "M4 5L20 5", stroke: "var(--color-icon, #4B5565)", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: '5c5efe2c9b503586236fa9a705ed7aa69a2506e8', d: "M4 12L20 12", stroke: "var(--color-icon, #4B5565)", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: 'b071a81f512bc452818061c3a5f0afa5e95da841', d: "M4 19L20 19", stroke: "var(--color-icon, #4B5565)", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })), this.state === 'expanded' && h("img", { key: '21e293439288587a1fa4a57a4bbfadbd0b394261', src: blueLogoSrc }), this.state === 'collapsed' && h("img", { key: '9a3fcabb3f82a7de8af0012e040d27855d36e75b', src: logoSrc, alt: "" }), h("gb-collapse-button", { key: '2355584d7da448c2a9de8ff4d83365e69318902c', color: "gray", direction: "horizontal", action: this.state === 'collapsed' ? 'expand' : 'collapse', onClick: () => (this.state === 'collapsed' ? this.expandSideBar() : this.collapseSideBar()) }))), h("div", { key: '0509ca64b13f73678c7abb26715c0b0691686881', class: "complex_sidebar_div" }, h("div", { key: '8000fb48ef63e510fec257acff5b10d9ecc37aad', class: `primary_side_menu ${this.category} ${this.navItemStyle}` }, this.category === 'colored_background' && (h("div", { key: '6a68654cab4d03ef2d60959c81b80420d977b345', class: "pattern" }, h("img", { key: 'eaa973763ec3117e441ccf82e228ef4288aa76f3', src: patternSrc, alt: "" }))), h("div", { key: '520725e1878666d603610757f730dc7fb8dc5a1c', class: "primary_side_menu_container" }, Object.keys(this.complexSidebarData).map((primaryItem, index) => (h("gb-complex-primary-side-bar-item", { key: `${index}`, label: primaryItem, category: this.category, "item-style": this.navItemStyle, icon: this.complexSidebarData[primaryItem].icon, state: this.activePrimaryItem === primaryItem ? 'active' : 'default', onClick: () => this.handlePrimaryClick(primaryItem, index) }))))), h("div", { key: 'c65de4e59a46a486d75a8c285ab4ea0d3b277cdc', class: `secondary_side_menu ${this.category} ${this.state}` }, h("div", { key: '04e130e7ecf26bd6d87f712e977e28debb94f618', class: "sside_menu" }, h("div", { key: '6497165daad463fa5f27e2090f6d96bcdb18e708', class: "sside_menu_items" }, ((_b = (_a = this.complexSidebarData[this.activePrimaryItem]) === null || _a === void 0 ? void 0 : _a.items) !== null && _b !== void 0 ? _b : []).map((secondaryItem, index) => (h("gb-complex-secondary-side-bar-item", { key: `${this.activePrimaryItem}-${index}`, type: this.state === 'expanded' ? 'full_with_label' : 'icon_only', label: secondaryItem.label, category: this.category, icon: secondaryItem.icon, state: this.activeSecondaryIndex === index ? 'active' : 'default', onClick: () => this.handleSecondaryClick(secondaryItem.label, index) })))), this.state === 'expanded' && this.category === 'plain_background' && (h("div", { key: 'da0d978fb52acbde884651c4269beedc1b119eb6', class: "application_name" }, h("div", { key: 'e5dc2c7e7de310a31771c186b42ea65c00b924e2', class: `wrapper ${this.category}` }, this.category === 'plain_background' && (h("div", { key: 'f67fec5537ad93fd8610df42a2e94b1da37ef744', class: "application_name_pattern" }, h("img", { key: '009e6bc9eab10306a367b67fe89cdb63a584f842', src: patternSrc, alt: "" }))), this.hasInfo ? (h(Fragment, null, h("div", { class: "information_header" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", class: `help_icon ${this.category}` }, h("path", { opacity: "0.4", d: "M22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12Z", fill: "var(--color-text-brandDarkBlue, #212C65)" }), h("path", { d: "M11.2422 17C11.2422 17.5523 11.6899 18 12.2422 18C12.7945 18 13.2422 17.5523 13.2422 17H11.2422ZM11.2422 10C10.6899 10 10.2422 10.4477 10.2422 11C10.2422 11.5523 10.6899 12 11.2422 12V10ZM12.0957 11.1464L12.8028 10.4393L12.0957 11.1464ZM11.992 7C11.4397 7 10.992 7.44772 10.992 8C10.992 8.55228 11.4397 9 11.992 9V7ZM12.001 9C12.5533 9 13.001 8.55228 13.001 8C13.001 7.44772 12.5533 7 12.001 7V9ZM23 12C23 5.92487 18.0751 1 12 1V3C16.9706 3 21 7.02944 21 12H23ZM12 1C5.92487 1 1 5.92487 1 12H3C3 7.02944 7.02944 3 12 3V1ZM1 12C1 18.0751 5.92487 23 12 23V21C7.02944 21 3 16.9706 3 12H1ZM12 23C18.0751 23 23 18.0751 23 12H21C21 16.9706 16.9706 21 12 21V23ZM11.2422 12V17H13.2422V12H11.2422ZM11.2422 12C11.3638 12 11.4531 12.0001 11.5286 12.002C11.6046 12.0039 11.6417 12.0072 11.6576 12.0094C11.6729 12.0114 11.6408 12.009 11.5864 11.9866C11.524 11.9609 11.4526 11.9176 11.3886 11.8536L12.8028 10.4393C12.5129 10.1493 12.1711 10.0604 11.9241 10.0272C11.7058 9.99788 11.4496 10 11.2422 10V12ZM13.2422 12C13.2422 11.7926 13.2443 11.5364 13.215 11.3181C13.1818 11.0711 13.0928 10.7293 12.8028 10.4393L11.3886 11.8536C11.3246 11.7896 11.2813 11.7181 11.2556 11.6558C11.2332 11.6014 11.2307 11.5693 11.2328 11.5846C11.2349 11.6005 11.2383 11.6376 11.2402 11.7136C11.2421 11.789 11.2422 11.8784 11.2422 12H13.2422ZM11.992 9H12.001V7H11.992V9Z", fill: "var(--color-text-brandDarkBlue, #212C65)" })), h("p", { class: `need_help ${this.category} text-lg-bold` }, "Need help?")), h("p", { class: `info phone_no ${this.category} text-sm-medium` }, this.email), this.phoneNumber && h("p", { class: `info ${this.category} text-sm-medium` }, this.phoneNumber))) : (h(Fragment, null, h("div", { class: `application_icon ${this.category}`, innerHTML: this.leadingIconSvg }), h("slot", { name: "application_name" })))))))))))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -189,7 +196,7 @@ const GbSidebar$1 = /*@__PURE__*/ proxyCustomElement(class GbSidebar extends H {
         "complexSidebarData": [8, "complex-sidebar-data"],
         "activeIndex": [1026, "active-index"],
         "activePrimaryItem": [1025, "active-primary-item"],
-        "activeSecondaryItem": [1025, "active-secondary-item"],
+        "activeSecondaryIndex": [1026, "active-secondary-index"],
         "hasInfo": [4, "has-info"],
         "email": [1],
         "phoneNumber": [1, "phone-number"],