.dpc-api-maint-lc2{overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}.dpc-apimaint .bdl-tabs__selection-bar{opacity:.1}.dpc-apimaint .bdl-modal__wrapper{background-color:var(--semantic-color-background-container-static-standard)}.dpc-api-maint-optional-text,.dpc-api-maint-popup-subtitle{color:var(--comp-inputField-color-inactive-title-text-normal, #f3f3f3);font-family:var( --comp-input-field-typography-inactive-title-normal-font-family, "Univers Next for HSBC" );font-size:var( --comp-input-field-typography-inactive-title-normal-font-size, 16px );font-style:normal;font-weight:var( --comp-input-field-typography-inactive-title-normal-font-weight, 400 );line-height:var( --comp-input-field-typography-inactive-title-normal-line-height, 24px );letter-spacing:var( --comp-input-field-typography-inactive-title-normal-letter-spacing, 0 )}.dpc-apimaint .bdl-modal__close{display:none}.dpc-apimaint-metadata-key{color:var(--semantic-color-text-primary-default, #f3f3f3);font-family:var( --semantic-typography-content-caption-normal-font-family, "Univers Next for HSBC" );font-size:var(--semantic-typography-content-caption-normal-font-size, 14px);font-style:normal;font-weight:var( --semantic-typography-content-caption-normal-font-weight, 300 );line-height:var( --semantic-typography-content-caption-normal-line-height, 20px );letter-spacing:var( --semantic-typography-content-caption-normal-letter-spacing, 0 )}.dpc-apimaint-metadata-value{color:var(--semantic-color-text-primary-default, #f3f3f3);font-family:var( --semantic-typography-content-caption-loud-font-family, "Univers Next for HSBC" );font-size:var(--semantic-typography-content-caption-loud-font-size, 14px);font-style:normal;font-weight:var(--semantic-typography-content-caption-loud-font-weight, 500);line-height:var( --semantic-typography-content-caption-loud-line-height, 20px );letter-spacing:var( --semantic-typography-content-caption-loud-letter-spacing, 0 )}.input-sb-na2z0ikdo .bdl-input__icon--left{position:relative;left:-6px}.dpc-apimaint input#input-sb-na2z0ikdo-0{margin-left:6px}.dpc-apimaint-popper{color:var(--comp-link-color-iconLink-text-default-onLight, #f3f3f3);font-family:var( --comp-link-typography-footnote-default-font-family, "Univers Next for HSBC" );font-size:var(--comp-link-typography-footnote-default-font-size, 12px);font-style:normal;font-weight:var(--comp-link-typography-footnote-default-font-weight, 500);line-height:var( --comp-link-typography-footnote-default-line-height, 16px );letter-spacing:var( --comp-link-typography-footnote-default-letter-spacing, 0 )}.dpc-apimaint-preview{color:var(--comp-link-color-iconLink-text-default-onLight, #f3f3f3);font-family:var( --comp-link-typography-caption-default-font-family, "Univers Next for HSBC" );font-size:var(--comp-link-typography-caption-default-font-size, 14px);font-style:normal;font-weight:var(--comp-link-typography-caption-default-font-weight, 500);line-height:var( --comp-link-typography-caption-default-line-height, 20px );letter-spacing:var(--comp-link-typography-caption-default-letter-spacing, 0)}.bdl-banner__wrapper{position:relative}.bdl-banner__wrapper .banner-icon{position:absolute;top:18px;left:18px;width:24px;height:24px;display:inline-block;object-fit:contain}.bdl-banner__wrapper .bdl-banner__close{position:absolute;top:15px;right:10px;width:25px;height:25px}.bdl-banner.bdl-banner--success div{color:#f3f3f3}.onboard-apis .bdl-input__input,.onboard-apis .bdl-text-area__input{background:var(--comp-inputField-color-inactive-box-background-normal-default, #101010)!important;color:var(--comp-inputField-color-inactive-box-border-normal-default, #f3f3f3)!important;border-color:#fff!important;width:358px}.onboard-apis .bdl-label{color:var(--comp-inputField-color-inactive-title-text-normal, #f3f3f3)!important}.onboard-apis .bdl-input:after,.onboard-apis .bdl-input:before,.onboard-apis .bdl-input__input:after,.onboard-apis .bdl-input__input:before,.onboard-apis .bdl-text-area:after,.onboard-apis .bdl-text-area:before,.onboard-apis .bdl-text-area__input:after,.onboard-apis .bdl-text-area__input:before{display:none!important}.onboard-apis .bdl-label{color:var(--comp-formTitle-color-title-text-normal, #f3f3f3)!important;font-size:14px}.onboard-apis .bdl-dropdown-native__select{background:var(--comp-inputField-color-inactive-box-background-normal-default, #101010);color:var(--comp-inputField-color-inactive-control-icon-normal-default, #f3f3f3)}.onboard-apis .bdl-dropdown-native{width:358px;max-width:400px}.onboard-apis bdl-tooltip{--tooltip-bg: #1f2937;--tooltip-text: #fff;--tooltip-border: #374151}.onboard-apis .bdl-tooltip,.onboard-apis .bdl-tooltip__content{width:100%}.onboard-apis .bdl-playback-label{flex:none}.onboard-apis .bdl-playback-label .bdl-text{width:200px}.onboard-apis .disable-loading-btn .bdl-button.bdl-button--primary.bdl-button--default{border-color:var(--comp-button-color-primary-border-disabled, var(--semantic-color-fill-primary-disabled, #d7d8d6));fill:var(--comp-button-color-primary-icon-disabled, var(--brand-hsbc-color-core-white, #fff));background:var(--comp-button-color-primary-background-disabled, var(--semantic-color-fill-primary-disabled, #d7d8d6));color:var(--comp-button-color-primary-text-disabled, var(--brand-hsbc-color-core-white, #fff));font:var(--comp-button-typography-primary-disabled, var(--semantic-typography-content-body-loud));letter-spacing:var(--comp-button-typography-primary-disabled-letterSpacing, var(--brand-hsbc-typography-letterSpacing-default, 0))}.project-dashboard{padding:20px;font-family:Arial,sans-serif}.project-dashboard h1{color:#333}.bdl-step-tracker-item--completed .bdl-step-tracker-item__icon-container svg path{fill:#000}.bdl-step-tracker-item__icon-container{padding-top:1px;padding-right:1px}.disable-loading-btn .bdl-button.bdl-button--primary.bdl-button--default{border-color:var(--comp-button-color-primary-border-disabled, var(--semantic-color-fill-primary-disabled, #d7d8d6));fill:var(--comp-button-color-primary-icon-disabled, var(--brand-hsbc-color-core-white, #fff));background:var(--comp-button-color-primary-background-disabled, var(--semantic-color-fill-primary-disabled, #d7d8d6));color:var(--comp-button-color-primary-text-disabled, var(--brand-hsbc-color-core-white, #fff));font:var(--comp-button-typography-primary-disabled, var(--semantic-typography-content-body-loud));letter-spacing:var(--comp-button-typography-primary-disabled-letterSpacing, var(--brand-hsbc-typography-letterSpacing-default, 0))}.projectinfo .bdl-input__input,.projectinfo .bdl-text-area__input{background:var( --comp-inputField-color-inactive-box-background-normal-default, #101010 )!important;color:var( --comp-inputField-color-inactive-box-border-normal-default, #f3f3f3 )!important;border-color:#fff!important;width:358px}.projectinfo .bdl-label{color:var( --comp-inputField-color-inactive-title-text-normal, #f3f3f3 )!important}.projectinfo .bdl-button{color:#767676!important}.projectinfo .bdl-input:after,.projectinfo .bdl-input:before,.projectinfo .bdl-input__input:after,.projectinfo .bdl-input__input:before,.projectinfo .bdl-text-area:after,.projectinfo .bdl-text-area:before,.projectinfo .bdl-text-area__input:after,.projectinfo .bdl-text-area__input:before{display:none!important}.selectinfo .bdl-label{color:var(--comp-formTitle-color-title-text-normal, #f3f3f3)!important;font-size:14px}.selectinfo .bdl-dropdown-native__select{background:var( --comp-inputField-color-inactive-box-background-normal-default, #101010 );color:var( --comp-inputField-color-inactive-control-icon-normal-default, #f3f3f3 );width:358px;max-width:400px}.api{align-self:stretch;padding-top:20px;border-top:1px var(--semantic-color-divider, #333333) solid;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:16px;display:flex}.apipanel{align-self:stretch;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:24px;display:flex}.show{color:var(--semantic-color-text-secondary-default, #b7b7b7);font-size:12px;font-family:Univers Next for HSBC,sans-serif;font-weight:400;line-height:16px;word-wrap:break-word}.showhighlight{color:var(--semantic-color-text-primary-default, #f3f3f3);font-size:12px;font-family:Univers Next for HSBC,sans-serif;font-weight:400;line-height:16px;word-wrap:break-word}.scrollbar-hide{scrollbar-width:none;-ms-overflow-style:none}.scrollbar-hide::-webkit-scrollbar{display:none}body{font-family:var(--font-sans),ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overscroll-behavior:none;min-height:100vh}html{overscroll-behavior-y:none;scrollbar-gutter:stable}@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-divide-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-400:oklch(70.4% .191 22.216);--color-red-500:oklch(63.7% .237 25.331);--color-red-600:oklch(57.7% .245 27.325);--color-red-700:oklch(50.5% .213 27.518);--color-orange-400:oklch(75% .183 55.934);--color-amber-300:oklch(87.9% .169 91.605);--color-yellow-600:oklch(68.1% .162 75.834);--color-green-400:oklch(79.2% .209 151.711);--color-green-500:oklch(72.3% .219 149.579);--color-green-600:oklch(62.7% .194 149.214);--color-emerald-400:oklch(76.5% .177 163.223);--color-blue-400:oklch(70.7% .165 254.624);--color-blue-600:oklch(54.6% .245 262.881);--color-indigo-400:oklch(67.3% .182 276.935);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-zinc-100:oklch(96.7% .001 286.375);--color-zinc-200:oklch(92% .004 286.32);--color-zinc-300:oklch(87.1% .006 286.286);--color-zinc-400:oklch(70.5% .015 286.067);--color-zinc-500:oklch(55.2% .016 285.938);--color-zinc-600:oklch(44.2% .017 285.786);--color-zinc-700:oklch(37% .013 285.805);--color-zinc-800:oklch(27.4% .006 286.033);--color-zinc-900:oklch(21% .006 285.885);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-md:28rem;--container-xl:36rem;--container-2xl:42rem;--container-6xl:72rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height: 1.5 ;--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--text-3xl:1.875rem;--text-3xl--line-height: 1.2 ;--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5/2.25);--text-5xl:3rem;--text-5xl--line-height:1;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-wide:.025em;--tracking-wider:.05em;--leading-tight:1.25;--leading-relaxed:1.625;--radius-lg:.5rem;--animate-spin:spin 1s linear infinite;--animate-pulse:pulse 2s cubic-bezier(.4,0,.6,1)infinite;--blur-sm:8px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.inset-0{inset:calc(var(--spacing)*0)}.inset-y-0{inset-block:calc(var(--spacing)*0)}.top-0{top:calc(var(--spacing)*0)}.top-1\/2{top:50%}.top-3{top:calc(var(--spacing)*3)}.top-4{top:calc(var(--spacing)*4)}.top-5{top:calc(var(--spacing)*5)}.top-6{top:calc(var(--spacing)*6)}.top-14{top:calc(var(--spacing)*14)}.top-full{top:100%}.right-0{right:calc(var(--spacing)*0)}.right-3{right:calc(var(--spacing)*3)}.right-4{right:calc(var(--spacing)*4)}.right-\[1px\]{right:1px}.-bottom-\[2px\]{bottom:-2px}.bottom-0{bottom:calc(var(--spacing)*0)}.bottom-\[3px\]{bottom:3px}.left-0{left:calc(var(--spacing)*0)}.left-1\/2{left:50%}.left-3{left:calc(var(--spacing)*3)}.z-10{z-index:10}.z-20{z-index:20}.z-40{z-index:40}.z-50{z-index:50}.z-1000{z-index:1000}.col-span-full{grid-column:1/-1}.container{width:100%}@media(min-width:40rem){.container{max-width:40rem}}@media(min-width:48rem){.container{max-width:48rem}}@media(min-width:64rem){.container{max-width:64rem}}@media(min-width:80rem){.container{max-width:80rem}}@media(min-width:96rem){.container{max-width:96rem}}.m-3{margin:calc(var(--spacing)*3)}.mx-2{margin-inline:calc(var(--spacing)*2)}.mx-2\.5{margin-inline:calc(var(--spacing)*2.5)}.mx-5{margin-inline:calc(var(--spacing)*5)}.mx-auto{margin-inline:auto}.my-\(--semantic-space-item-gap-normal\){margin-block:var(--semantic-space-item-gap-normal)}.my-2{margin-block:calc(var(--spacing)*2)}.my-auto{margin-block:auto}.mt-0\.5{margin-top:calc(var(--spacing)*.5)}.mt-2{margin-top:calc(var(--spacing)*2)}.mt-3{margin-top:calc(var(--spacing)*3)}.mt-4{margin-top:calc(var(--spacing)*4)}.mt-5{margin-top:calc(var(--spacing)*5)}.mt-6{margin-top:calc(var(--spacing)*6)}.mt-8{margin-top:calc(var(--spacing)*8)}.mt-9{margin-top:calc(var(--spacing)*9)}.mt-14{margin-top:calc(var(--spacing)*14)}.mt-\[-64px\]{margin-top:-64px}.mt-\[1rem\]{margin-top:1rem}.mt-auto{margin-top:auto}.mr-2{margin-right:calc(var(--spacing)*2)}.mr-4{margin-right:calc(var(--spacing)*4)}.mr-6{margin-right:calc(var(--spacing)*6)}.mb-1{margin-bottom:calc(var(--spacing)*1)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-3{margin-bottom:calc(var(--spacing)*3)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.mb-6{margin-bottom:calc(var(--spacing)*6)}.mb-8{margin-bottom:calc(var(--spacing)*8)}.mb-10{margin-bottom:calc(var(--spacing)*10)}.mb-12{margin-bottom:calc(var(--spacing)*12)}.mb-16{margin-bottom:calc(var(--spacing)*16)}.mb-\[40px\]{margin-bottom:40px}.ml-1{margin-left:calc(var(--spacing)*1)}.ml-2{margin-left:calc(var(--spacing)*2)}.ml-3{margin-left:calc(var(--spacing)*3)}.ml-auto{margin-left:auto}.box-border{box-sizing:border-box}.line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.h-1\/2{height:50%}.h-2{height:calc(var(--spacing)*2)}.h-3{height:calc(var(--spacing)*3)}.h-3\.5{height:calc(var(--spacing)*3.5)}.h-4{height:calc(var(--spacing)*4)}.h-5{height:calc(var(--spacing)*5)}.h-5\.5{height:calc(var(--spacing)*5.5)}.h-6{height:calc(var(--spacing)*6)}.h-8{height:calc(var(--spacing)*8)}.h-9{height:calc(var(--spacing)*9)}.h-10{height:calc(var(--spacing)*10)}.h-11{height:calc(var(--spacing)*11)}.h-12{height:calc(var(--spacing)*12)}.h-16{height:calc(var(--spacing)*16)}.h-\[1\.125rem\]{height:1.125rem}.h-\[1px\]{height:1px}.h-\[4rem\]{height:4rem}.h-\[72px\]{height:72px}.h-\[80px\]{height:80px}.h-\[80vh\]{height:80vh}.h-\[calc\(100vh-4rem\)\]{height:calc(100vh - 4rem)}.h-auto{height:auto}.h-fit{height:fit-content}.h-full{height:100%}.h-px{height:1px}.h-screen{height:100vh}.max-h-48{max-height:calc(var(--spacing)*48)}.max-h-\[600px\]{max-height:600px}.min-h-0{min-height:calc(var(--spacing)*0)}.min-h-10{min-height:calc(var(--spacing)*10)}.min-h-12{min-height:calc(var(--spacing)*12)}.min-h-\[48px\]{min-height:48px}.min-h-\[85vh\]{min-height:85vh}.min-h-\[calc\(100vh-65px\)\]{min-height:calc(100vh - 65px)}.min-h-full{min-height:100%}.min-h-screen{min-height:100vh}.w-0{width:calc(var(--spacing)*0)}.w-1{width:calc(var(--spacing)*1)}.w-1\/6{width:16.6667%}.w-2{width:calc(var(--spacing)*2)}.w-3{width:calc(var(--spacing)*3)}.w-3\.5{width:calc(var(--spacing)*3.5)}.w-4{width:calc(var(--spacing)*4)}.w-5{width:calc(var(--spacing)*5)}.w-6{width:calc(var(--spacing)*6)}.w-7{width:calc(var(--spacing)*7)}.w-8{width:calc(var(--spacing)*8)}.w-9{width:calc(var(--spacing)*9)}.w-11{width:calc(var(--spacing)*11)}.w-12{width:calc(var(--spacing)*12)}.w-16{width:calc(var(--spacing)*16)}.w-32{width:calc(var(--spacing)*32)}.w-36{width:calc(var(--spacing)*36)}.w-40{width:calc(var(--spacing)*40)}.w-40\!{width:calc(var(--spacing)*40)!important}.w-60{width:calc(var(--spacing)*60)}.w-64{width:calc(var(--spacing)*64)}.w-72{width:calc(var(--spacing)*72)}.w-78\.5{width:calc(var(--spacing)*78.5)}.w-80{width:calc(var(--spacing)*80)}.w-96{width:calc(var(--spacing)*96)}.w-122\.75{width:calc(var(--spacing)*122.75)}.w-123\.25{width:calc(var(--spacing)*123.25)}.w-200{width:calc(var(--spacing)*200)}.w-205{width:calc(var(--spacing)*205)}.w-\[1\.125rem\]{width:1.125rem}.w-\[20\%\]{width:20%}.w-\[50\%\]{width:50%}.w-\[80\%\]{width:80%}.w-\[146px\]{width:146px}.w-\[220px\]{width:220px}.w-\[358px\]{width:358px}.w-\[362px\]{width:362px}.w-\[484px\]{width:484px}.w-\[495px\]{width:495px}.w-\[596px\]{width:596px}.w-\[660px\]{width:660px}.w-\[700px\]{width:700px}.w-\[748px\]{width:748px}.w-\[820px\]{width:820px}.w-auto{width:auto}.w-fit{width:fit-content}.w-full{width:100%}.w-px{width:1px}.w-screen{width:100vw}.max-w-2xl{max-width:var(--container-2xl)}.max-w-6xl{max-width:var(--container-6xl)}.max-w-25{max-width:calc(var(--spacing)*25)}.max-w-50{max-width:calc(var(--spacing)*50)}.max-w-400{max-width:calc(var(--spacing)*400)}.max-w-700{max-width:calc(var(--spacing)*700)}.max-w-\[390px\]{max-width:390px}.max-w-\[409px\]{max-width:409px}.max-w-\[480px\]{max-width:480px}.max-w-\[491px\]{max-width:491px}.max-w-\[495px\]{max-width:495px}.max-w-\[700px\]{max-width:700px}.max-w-\[820px\]{max-width:820px}.max-w-\[1040px\]{max-width:1040px}.max-w-\[1240px\]{max-width:1240px}.max-w-full{max-width:100%}.max-w-md{max-width:var(--container-md)}.max-w-none{max-width:none}.max-w-xl{max-width:var(--container-xl)}.min-w-0{min-width:calc(var(--spacing)*0)}.min-w-12{min-width:calc(var(--spacing)*12)}.min-w-\[18rem\]{min-width:18rem}.min-w-\[120px\]{min-width:120px}.min-w-\[140px\]{min-width:140px}.min-w-max{min-width:max-content}.flex-1{flex:1}.flex-2{flex:2}.flex-shrink-0,.shrink-0{flex-shrink:0}.table-fixed{table-layout:fixed}.border-collapse{border-collapse:collapse}.-translate-y-1\/2{--tw-translate-y: -50% ;translate:var(--tw-translate-x)var(--tw-translate-y)}.rotate-90{rotate:90deg}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.animate-pulse{animation:var(--animate-pulse)}.animate-spin{animation:var(--animate-spin)}.cursor-default{cursor:default}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.cursor-wait{cursor:wait}.list-inside{list-style-position:inside}.list-disc{list-style-type:disc}.appearance-none{appearance:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-\[1fr_auto\]{grid-template-columns:1fr auto}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.content-start{align-content:flex-start}.content-stretch{align-content:stretch}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.items-stretch{align-items:stretch}.justify-around{justify-content:space-around}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}.gap-\(--comp-banner-space-contextual-gapIconMessage\){gap:var(--comp-banner-space-contextual-gapIconMessage)}.gap-\(--comp-link-space-textLink-gapLabelIcon\){gap:var(--comp-link-space-textLink-gapLabelIcon)}.gap-\(--semantic-space-general-fixed-100\){gap:var(--semantic-space-general-fixed-100)}.gap-\(--semantic-space-item-gap-loose\){gap:var(--semantic-space-item-gap-loose)}.gap-\(--semantic-space-item-gap-tight\){gap:var(--semantic-space-item-gap-tight)}.gap-0{gap:calc(var(--spacing)*0)}.gap-1{gap:calc(var(--spacing)*1)}.gap-1\.5{gap:calc(var(--spacing)*1.5)}.gap-2{gap:calc(var(--spacing)*2)}.gap-2\.5{gap:calc(var(--spacing)*2.5)}.gap-3{gap:calc(var(--spacing)*3)}.gap-4{gap:calc(var(--spacing)*4)}.gap-5{gap:calc(var(--spacing)*5)}.gap-6{gap:calc(var(--spacing)*6)}.gap-8{gap:calc(var(--spacing)*8)}.gap-10{gap:calc(var(--spacing)*10)}.gap-12{gap:calc(var(--spacing)*12)}.gap-16{gap:calc(var(--spacing)*16)}.gap-\[0\.5rem\]{gap:.5rem}.gap-\[0\.38rem\]{gap:.38rem}.gap-\[0\.75rem\]{gap:.75rem}.gap-\[0\.875rem\]{gap:.875rem}.gap-\[24px\]{gap:24px}.gap-\[var\(--semantic-space-general-fixed-100\)\]{gap:var(--semantic-space-general-fixed-100)}.gap-\[var\(--semantic-space-item-gap-normal\)\]{gap:var(--semantic-space-item-gap-normal)}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*1)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*1)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*2)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*3)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*3)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*4)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*6)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-8>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*8)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*8)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-10>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*10)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*10)*calc(1 - var(--tw-space-y-reverse)))}:where(.divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px*var(--tw-divide-y-reverse));border-bottom-width:calc(1px*calc(1 - var(--tw-divide-y-reverse)))}:where(.divide-\[\#27272A\]>:not(:last-child)){border-color:#27272a}.self-center{align-self:center}.self-start{align-self:flex-start}.self-stretch{align-self:stretch}.justify-self-end{justify-self:flex-end}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-x-hidden{overflow-x:hidden}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-r-2{border-right-style:var(--tw-border-style);border-right-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-l-0{border-left-style:var(--tw-border-style);border-left-width:0}.border-l-4{border-left-style:var(--tw-border-style);border-left-width:4px}.\!border-\[\#3F3F46\]{border-color:#3f3f46!important}.border-\(--comp-snackbar-color-success-border\){border-color:var(--comp-snackbar-color-success-border)}.border-\(--semantic-color-border-container-static\){border-color:var(--semantic-color-border-container-static)}.border-\(--semantic-color-divider\){border-color:var(--semantic-color-divider)}.border-\(--semantic-color-divider\,\){border-color:var(--semantic-color-divider,)}.border-\[\#2A2A33\]{border-color:#2a2a33}.border-\[\#2B2B33\]{border-color:#2b2b33}.border-\[\#3C3C44\]{border-color:#3c3c44}.border-\[\#3F3F46\]{border-color:#3f3f46}.border-\[\#333\]{border-color:#333}.border-\[\#27272A\]{border-color:#27272a}.border-\[\#333333\]{border-color:#333}.border-\[\#DB0011\]{border-color:#db0011}.border-\[\#FF6B6B\]{border-color:#ff6b6b}.border-\[--semantic-color-divider\]{border-color:--semantic-color-divider}.border-gray-300{border-color:var(--color-gray-300)}.border-transparent{border-color:#0000}.border-white{border-color:var(--color-white)}.border-zinc-700{border-color:var(--color-zinc-700)}.border-zinc-700\/60{border-color:#3f3f4699}@supports (color:color-mix(in lab,red,red)){.border-zinc-700\/60{border-color:color-mix(in oklab,var(--color-zinc-700)60%,transparent)}}.border-b-\(--semantic-color-divider\),.border-b-\[var\(--semantic-color-divider\)\]{border-bottom-color:var(--semantic-color-divider)}.\!bg-\[\#27272A\]{background-color:#27272a!important}.bg-\(--color-fd-background\){background-color:var(--color-fd-background)}.bg-\(--comp-snackbar-color-success-background\)\/80{background-color:var(--comp-snackbar-color-success-background)}@supports (color:color-mix(in lab,red,red)){.bg-\(--comp-snackbar-color-success-background\)\/80{background-color:color-mix(in oklab,var(--comp-snackbar-color-success-background)80%,transparent)}}.bg-\(--comp-table-color-header-background-default\){background-color:var(--comp-table-color-header-background-default)}.bg-\(--semantic-color-background-canvas-highlighted\){background-color:var(--semantic-color-background-canvas-highlighted)}.bg-\(--semantic-color-background-canvas-standard\){background-color:var(--semantic-color-background-canvas-standard)}.bg-\(--semantic-color-background-container-interactive-default\){background-color:var(--semantic-color-background-container-interactive-default)}.bg-\(--semantic-color-background-container-interactive-pressed\){background-color:var(--semantic-color-background-container-interactive-pressed)}.bg-\(--semantic-color-background-container-static-standard\,\#101010\){background-color:var(--semantic-color-background-container-static-standard,#101010)}.bg-\(--semantic-color-background-overlay\,rgba\(40\,40\,40\,0\.6\)\){background-color:var(--semantic-color-background-overlay,#28282899)}.bg-\(--semantic-color-divider\){background-color:var(--semantic-color-divider)}.bg-\(--semantic-color-fill-selected-disabled\){background-color:var(--semantic-color-fill-selected-disabled)}.bg-\[\#0A0A0B\]{background-color:#0a0a0b}.bg-\[\#0B0B0B\]{background-color:#0b0b0b}.bg-\[\#0D0D0F\]{background-color:#0d0d0f}.bg-\[\#1C1C23\]{background-color:#1c1c23}.bg-\[\#1C2942\]{background-color:#1c2942}.bg-\[\#1E1E25\]{background-color:#1e1e25}.bg-\[\#1F1F25\]{background-color:#1f1f25}.bg-\[\#3B2A16\]{background-color:#3b2a16}.bg-\[\#4C0F1D\]{background-color:#4c0f1d}.bg-\[\#16161D\]{background-color:#16161d}.bg-\[\#18181B\]{background-color:#18181b}.bg-\[\#27272A\]{background-color:#27272a}.bg-\[\#27272A\]\/30{background-color:#27272a4d}.bg-\[\#101010\]{background-color:#101010}.bg-\[\#101016\]{background-color:#101016}.bg-\[\#111118\]{background-color:#111118}.bg-\[\#212121\]{background-color:#212121}.bg-\[\#333333\]{background-color:#333}.bg-\[\#BA0B0B\]{background-color:#ba0b0b}.bg-\[\#DB0011\]{background-color:#db0011}.bg-\[var\(--semantic-color-background-canvas-highlighted\)\]{background-color:var(--semantic-color-background-canvas-highlighted)}.bg-\[var\(--semantic-color-background-canvas-standard\)\]{background-color:var(--semantic-color-background-canvas-standard)}.bg-\[var\(--semantic-color-background-container-interactive-default\,\#101010\)\]{background-color:var(--semantic-color-background-container-interactive-default,#101010)}.bg-black{background-color:var(--color-black)}.bg-black\/50{background-color:#00000080}@supports (color:color-mix(in lab,red,red)){.bg-black\/50{background-color:color-mix(in oklab,var(--color-black)50%,transparent)}}.bg-black\/70{background-color:#000000b3}@supports (color:color-mix(in lab,red,red)){.bg-black\/70{background-color:color-mix(in oklab,var(--color-black)70%,transparent)}}.bg-black\/80{background-color:#000c}@supports (color:color-mix(in lab,red,red)){.bg-black\/80{background-color:color-mix(in oklab,var(--color-black)80%,transparent)}}.bg-blue-600{background-color:var(--color-blue-600)}.bg-gray-500\/20{background-color:#6a728233}@supports (color:color-mix(in lab,red,red)){.bg-gray-500\/20{background-color:color-mix(in oklab,var(--color-gray-500)20%,transparent)}}.bg-green-500{background-color:var(--color-green-500)}.bg-green-500\/20{background-color:#00c75833}@supports (color:color-mix(in lab,red,red)){.bg-green-500\/20{background-color:color-mix(in oklab,var(--color-green-500)20%,transparent)}}.bg-red-500\/20{background-color:#fb2c3633}@supports (color:color-mix(in lab,red,red)){.bg-red-500\/20{background-color:color-mix(in oklab,var(--color-red-500)20%,transparent)}}.bg-red-600{background-color:var(--color-red-600)}.bg-transparent{background-color:#0000}.bg-yellow-600{background-color:var(--color-yellow-600)}.bg-zinc-800{background-color:var(--color-zinc-800)}.bg-zinc-900{background-color:var(--color-zinc-900)}.p-\(--semantic-space-container-padding-normal\){padding:var(--semantic-space-container-padding-normal)}.p-\(--semantic-space-general-fixed-400\){padding:var(--semantic-space-general-fixed-400)}.p-0{padding:calc(var(--spacing)*0)}.p-2{padding:calc(var(--spacing)*2)}.p-3{padding:calc(var(--spacing)*3)}.p-4{padding:calc(var(--spacing)*4)}.p-6{padding:calc(var(--spacing)*6)}.p-\[0\.5rem\]{padding:.5rem}.p-\[0\.75rem\]{padding:.75rem}.p-\[20px\]{padding:20px}.p-\[var\(--semantic-space-container-padding-normal\)\]{padding:var(--semantic-space-container-padding-normal)}.px-\(--comp-banner-space-contextual-actionGroup-gapHorizontal\){padding-inline:var(--comp-banner-space-contextual-actionGroup-gapHorizontal)}.px-\(--semantic-space-general-fixed-300\){padding-inline:var(--semantic-space-general-fixed-300)}.px-\(--semantic-space-general-fixed-400\){padding-inline:var(--semantic-space-general-fixed-400)}.px-\(--semantic-space-general-fixed-500\){padding-inline:var(--semantic-space-general-fixed-500)}.px-0{padding-inline:calc(var(--spacing)*0)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-5{padding-inline:calc(var(--spacing)*5)}.px-6{padding-inline:calc(var(--spacing)*6)}.px-8{padding-inline:calc(var(--spacing)*8)}.px-10{padding-inline:calc(var(--spacing)*10)}.px-12{padding-inline:calc(var(--spacing)*12)}.px-\[1rem\]{padding-inline:1rem}.px-\[var\(--comp-inputField-space-box-paddingHorizontal\)\]{padding-inline:var(--comp-inputField-space-box-paddingHorizontal)}.py-\(--comp-banner-space-contextual-paddingVertical\){padding-block:var(--comp-banner-space-contextual-paddingVertical)}.py-\(--semantic-space-container-padding-loose\){padding-block:var(--semantic-space-container-padding-loose)}.py-\(--semantic-space-general-fixed-150\){padding-block:var(--semantic-space-general-fixed-150)}.py-1{padding-block:calc(var(--spacing)*1)}.py-2{padding-block:calc(var(--spacing)*2)}.py-3{padding-block:calc(var(--spacing)*3)}.py-4{padding-block:calc(var(--spacing)*4)}.py-5{padding-block:calc(var(--spacing)*5)}.py-6{padding-block:calc(var(--spacing)*6)}.py-8{padding-block:calc(var(--spacing)*8)}.py-10{padding-block:calc(var(--spacing)*10)}.py-12{padding-block:calc(var(--spacing)*12)}.py-20{padding-block:calc(var(--spacing)*20)}.py-24{padding-block:calc(var(--spacing)*24)}.py-\[0\.5rem\]{padding-block:.5rem}.py-\[1\.25rem\]{padding-block:1.25rem}.py-\[4px\]{padding-block:4px}.py-\[11px\]{padding-block:11px}.py-\[var\(--comp-inputField-space-box-paddingVertical\)\]{padding-block:var(--comp-inputField-space-box-paddingVertical)}.py-\[var\(--semantic-space-container-padding-loose\)\]{padding-block:var(--semantic-space-container-padding-loose)}.pt-\(--semantic-space-general-fixed-400\){padding-top:var(--semantic-space-general-fixed-400)}.pt-\(--semantic-space-general-fixed-800\){padding-top:var(--semantic-space-general-fixed-800)}.pt-\(--semantic-space-item-gap-normal\){padding-top:var(--semantic-space-item-gap-normal)}.pt-4{padding-top:calc(var(--spacing)*4)}.pt-8{padding-top:calc(var(--spacing)*8)}.pt-20{padding-top:calc(var(--spacing)*20)}.pt-\[var\(--semantic-space-container-padding-normal\)\]{padding-top:var(--semantic-space-container-padding-normal)}.pt-\[var\(--semantic-space-item-gap-loose\)\]{padding-top:var(--semantic-space-item-gap-loose)}.pr-4{padding-right:calc(var(--spacing)*4)}.pr-8{padding-right:calc(var(--spacing)*8)}.pr-12{padding-right:calc(var(--spacing)*12)}.pb-\(--semantic-space-general-fixed-400\){padding-bottom:var(--semantic-space-general-fixed-400)}.pb-\(--semantic-space-item-gap-loose\){padding-bottom:var(--semantic-space-item-gap-loose)}.pb-\(--semantic-space-item-gap-normal\){padding-bottom:var(--semantic-space-item-gap-normal)}.pb-2{padding-bottom:calc(var(--spacing)*2)}.pb-4{padding-bottom:calc(var(--spacing)*4)}.pb-6{padding-bottom:calc(var(--spacing)*6)}.pb-10{padding-bottom:calc(var(--spacing)*10)}.pb-12{padding-bottom:calc(var(--spacing)*12)}.pb-14{padding-bottom:calc(var(--spacing)*14)}.pb-16{padding-bottom:calc(var(--spacing)*16)}.pb-20{padding-bottom:calc(var(--spacing)*20)}.pb-24{padding-bottom:calc(var(--spacing)*24)}.pb-25{padding-bottom:calc(var(--spacing)*25)}.pb-26{padding-bottom:calc(var(--spacing)*26)}.pb-\[8px\]{padding-bottom:8px}.pb-\[32px\]{padding-bottom:32px}.pl-1{padding-left:calc(var(--spacing)*1)}.pl-2{padding-left:calc(var(--spacing)*2)}.pl-3{padding-left:calc(var(--spacing)*3)}.pl-8{padding-left:calc(var(--spacing)*8)}.pl-10{padding-left:calc(var(--spacing)*10)}.pl-\[22px\]{padding-left:22px}.pl-\[var\(--semantic-space-item-gap-tight\)\]{padding-left:var(--semantic-space-item-gap-tight)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.font-\[\'Univers_Next_for_HSBC\'\]{font-family:Univers Next for HSBC}.font-mono{font-family:var(--font-mono)}.font-sans{font-family:var(--font-sans)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[14px\]{font-size:14px}.text-\[15px\]{font-size:15px}.text-\[16px\]{font-size:16px}.text-\[19px\]{font-size:19px}.text-\[23px\]{font-size:23px}.text-\[28px\]{font-size:28px}.leading-5{--tw-leading:calc(var(--spacing)*5);line-height:calc(var(--spacing)*5)}.leading-6{--tw-leading:calc(var(--spacing)*6);line-height:calc(var(--spacing)*6)}.leading-7{--tw-leading:calc(var(--spacing)*7);line-height:calc(var(--spacing)*7)}.leading-8{--tw-leading:calc(var(--spacing)*8);line-height:calc(var(--spacing)*8)}.leading-9{--tw-leading:calc(var(--spacing)*9);line-height:calc(var(--spacing)*9)}.leading-\[60px\]{--tw-leading:60px;line-height:60px}.leading-none{--tw-leading:1;line-height:1}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.font-\(--comp-link-typography-caption-default\){--tw-font-weight:var(--comp-link-typography-caption-default);font-weight:var(--comp-link-typography-caption-default)}.font-\(--semantic-typography-content-body-loud\){--tw-font-weight:var(--semantic-typography-content-body-loud);font-weight:var(--semantic-typography-content-body-loud)}.font-\(--semantic-typography-content-body-normal\){--tw-font-weight:var(--semantic-typography-content-body-normal);font-weight:var(--semantic-typography-content-body-normal)}.font-\(--semantic-typography-content-caption-normal\){--tw-font-weight:var(--semantic-typography-content-caption-normal);font-weight:var(--semantic-typography-content-caption-normal)}.font-\(--semantic-typography-heading-content-title-normal\){--tw-font-weight:var(--semantic-typography-heading-content-title-normal);font-weight:var(--semantic-typography-heading-content-title-normal)}.font-\(--semantic-typography-heading-section-title-loud\){--tw-font-weight:var(--semantic-typography-heading-section-title-loud);font-weight:var(--semantic-typography-heading-section-title-loud)}.font-\(--semantic-typography-heading-subheadline-normal\){--tw-font-weight:var(--semantic-typography-heading-subheadline-normal);font-weight:var(--semantic-typography-heading-subheadline-normal)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-\[0\.12em\]{--tw-tracking:.12em;letter-spacing:.12em}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-nowrap{text-wrap:nowrap}.wrap-break-word{overflow-wrap:break-word}.break-all{word-break:break-all}.text-ellipsis{text-overflow:ellipsis}.whitespace-normal{white-space:normal}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-line{white-space:pre-line}.text-\(--comp-dialog-color-title-text\){color:var(--comp-dialog-color-title-text)}.text-\(--semantic-color-text-actionable-default\){color:var(--semantic-color-text-actionable-default)}.text-\(--semantic-color-text-primary-default\){color:var(--semantic-color-text-primary-default)}.text-\(--semantic-color-text-secondary-default\){color:var(--semantic-color-text-secondary-default)}.text-\(--semantic-typography-content-caption-loud-font-size\){color:var(--semantic-typography-content-caption-loud-font-size)}.text-\[\#52525B\]{color:#52525b}.text-\[\#71717A\]{color:#71717a}.text-\[\#767676\]{color:#767676}.text-\[\#A1A1AA\]{color:#a1a1aa}.text-\[\#DB0011\]{color:#db0011}.text-\[\#FF6B6B\]{color:#ff6b6b}.text-amber-300{color:var(--color-amber-300)}.text-blue-400{color:var(--color-blue-400)}.text-emerald-400{color:var(--color-emerald-400)}.text-gray-300{color:var(--color-gray-300)}.text-gray-400{color:var(--color-gray-400)}.text-gray-500{color:var(--color-gray-500)}.text-green-400{color:var(--color-green-400)}.text-green-500{color:var(--color-green-500)}.text-green-600{color:var(--color-green-600)}.text-orange-400{color:var(--color-orange-400)}.text-red-400{color:var(--color-red-400)}.text-red-500{color:var(--color-red-500)}.text-red-500\!{color:var(--color-red-500)!important}.text-red-600{color:var(--color-red-600)}.text-white{color:var(--color-white)}.text-white\/90{color:#ffffffe6}@supports (color:color-mix(in lab,red,red)){.text-white\/90{color:color-mix(in oklab,var(--color-white)90%,transparent)}}.text-zinc-100{color:var(--color-zinc-100)}.text-zinc-200{color:var(--color-zinc-200)}.text-zinc-300{color:var(--color-zinc-300)}.text-zinc-400{color:var(--color-zinc-400)}.text-zinc-500{color:var(--color-zinc-500)}.lowercase{text-transform:lowercase}.uppercase{text-transform:uppercase}.underline{text-decoration-line:underline}.decoration-solid{text-decoration-style:solid}.placeholder-\[\#71717A\]::placeholder{color:#71717a}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.shadow-\[0_0_0_1px_rgba\(36\,36\,43\,0\.6\)\]{--tw-shadow:0 0 0 1px var(--tw-shadow-color,#24242b99);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-\[0px_2px_8px_0px_rgba\(0\,0\,0\,0\.20\)\]{--tw-shadow:0px 2px 8px 0px var(--tw-shadow-color,#0003);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-\[0px_32px_64px_rgba\(0\,0\,0\,0\.55\)\]{--tw-shadow:0px 32px 64px var(--tw-shadow-color,#0000008c);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-\[inset_0_0_0_1px_rgba\(87\,87\,98\,0\.5\)\]{--tw-shadow:inset 0 0 0 1px var(--tw-shadow-color,#57576280);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.outline,.outline-1{outline-style:var(--tw-outline-style);outline-width:1px}.outline-offset-\[-1px\]{outline-offset:-1px}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.backdrop-blur-sm{--tw-backdrop-blur:blur(var(--blur-sm));-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.outline-none{--tw-outline-style:none;outline-style:none}:is(.\*\:border-0\!>*){border-style:var(--tw-border-style)!important;border-width:0!important}@media(hover:hover){.group-hover\:translate-x-1:is(:where(.group):hover *){--tw-translate-x:calc(var(--spacing)*1);translate:var(--tw-translate-x)var(--tw-translate-y)}}.placeholder\:text-zinc-500::placeholder{color:var(--color-zinc-500)}@media(hover:hover){.hover\:cursor-pointer:hover{cursor:pointer}.hover\:border-none:hover{--tw-border-style:none;border-style:none}.hover\:border-\[\#DB0011\]:hover{border-color:#db0011}.hover\:border-zinc-600:hover{border-color:var(--color-zinc-600)}.hover\:bg-\[\#1C1C23\]:hover{background-color:#1c1c23}.hover\:bg-\[\#2A2A33\]:hover{background-color:#2a2a33}.hover\:bg-\[\#9b9b9b\]:hover{background-color:#9b9b9b}.hover\:bg-\[\#27272A\]:hover{background-color:#27272a}.hover\:bg-\[\#27272A\]\/50:hover{background-color:#27272a80}.hover\:bg-\[\#C40010\]:hover{background-color:#c40010}.hover\:bg-\[\#bd000f\]:hover{background-color:#bd000f}.hover\:bg-red-700:hover{background-color:var(--color-red-700)}.hover\:bg-white:hover{background-color:var(--color-white)}.hover\:text-\(--semantic-color-text-primary-hover\):hover{color:var(--semantic-color-text-primary-hover)}.hover\:text-\[\#A1A1AA\]:hover{color:#a1a1aa}.hover\:text-black:hover{color:var(--color-black)}.hover\:text-red-500:hover{color:var(--color-red-500)}.hover\:text-white:hover{color:var(--color-white)}.hover\:underline:hover{text-decoration-line:underline}.hover\:opacity-80:hover{opacity:.8}.hover\:outline-none:hover{--tw-outline-style:none;outline-style:none}}.focus\:border-none:focus{--tw-border-style:none;border-style:none}.focus\:border-\[\#DB0011\]:focus{border-color:#db0011}.focus\:border-indigo-400:focus{border-color:var(--color-indigo-400)}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\:ring-\[\#DB0011\]:focus{--tw-ring-color:#db0011}.focus\:ring-offset-0:focus{--tw-ring-offset-width:0px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus-visible\:ring-\[\#DB0011\]:focus-visible{--tw-ring-color:#db0011}.focus-visible\:ring-offset-0:focus-visible{--tw-ring-offset-width:0px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.focus-visible\:outline:focus-visible{outline-style:var(--tw-outline-style);outline-width:1px}.focus-visible\:outline-2:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px}.focus-visible\:outline-offset-2:focus-visible{outline-offset:2px}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}@media(min-width:40rem){.sm\:block{display:block}.sm\:hidden{display:none}.sm\:w-40{width:calc(var(--spacing)*40)}.sm\:w-auto{width:auto}.sm\:flex-1{flex:1}.sm\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:items-end{align-items:flex-end}.sm\:justify-between{justify-content:space-between}.sm\:justify-start{justify-content:flex-start}.sm\:gap-\[1\.38rem\]{gap:1.38rem}.sm\:px-6{padding-inline:calc(var(--spacing)*6)}.sm\:px-8{padding-inline:calc(var(--spacing)*8)}.sm\:py-12{padding-block:calc(var(--spacing)*12)}.sm\:pb-0{padding-bottom:calc(var(--spacing)*0)}.sm\:pb-1{padding-bottom:calc(var(--spacing)*1)}.sm\:text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.sm\:text-\[0\.75rem\]{font-size:.75rem}}@media(min-width:48rem){.md\:sticky{position:sticky}.md\:top-12{top:calc(var(--spacing)*12)}.md\:block{display:block}.md\:flex{display:flex}.md\:hidden{display:none}.md\:h-10{height:calc(var(--spacing)*10)}.md\:h-\[calc\(100vh-3rem\)\]{height:calc(100vh - 3rem)}.md\:w-64{width:calc(var(--spacing)*64)}.md\:w-96{width:calc(var(--spacing)*96)}.md\:max-w-md{max-width:var(--container-md)}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:grid-cols-\[16rem_1fr\]{grid-template-columns:16rem 1fr}.md\:flex-row{flex-direction:row}.md\:items-end{align-items:flex-end}.md\:justify-between{justify-content:space-between}.md\:gap-4{gap:calc(var(--spacing)*4)}.md\:gap-6{gap:calc(var(--spacing)*6)}.md\:self-start{align-self:flex-start}.md\:p-6{padding:calc(var(--spacing)*6)}.md\:py-12{padding-block:calc(var(--spacing)*12)}}@media(min-width:64rem){.lg\:w-40{width:calc(var(--spacing)*40)}.lg\:w-\[33\%\]{width:33%}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-\[1fr_300px\]{grid-template-columns:1fr 300px}.lg\:grid-cols-\[220px\,1fr\]{grid-template-columns:220px,1fr}.lg\:flex-row{flex-direction:row}.lg\:items-center{align-items:center}.lg\:justify-between{justify-content:space-between}.lg\:gap-0{gap:calc(var(--spacing)*0)}.lg\:gap-2{gap:calc(var(--spacing)*2)}.lg\:gap-4{gap:calc(var(--spacing)*4)}.lg\:gap-6{gap:calc(var(--spacing)*6)}.lg\:gap-20{gap:calc(var(--spacing)*20)}.lg\:self-center{align-self:center}.lg\:px-20{padding-inline:calc(var(--spacing)*20)}.lg\:py-18{padding-block:calc(var(--spacing)*18)}.lg\:text-\[2\.25rem\]{font-size:2.25rem}}@media(min-width:80rem){.xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}.\[\&_\.bdl-button\]\:border\! .bdl-button{border-style:var(--tw-border-style)!important;border-width:1px!important}.\[\&_\.bdl-button\]\:border-\(--comp-button-color-secondary-border-default\)\! .bdl-button{border-color:var(--comp-button-color-secondary-border-default)!important}.\[\&_\.bdl-button\]\:bg-\(--comp-button-color-secondary-background-default\)\! .bdl-button{background-color:var(--comp-button-color-secondary-background-default)!important}.\[\&_\.bdl-button\]\:bg-\[\#333\]\! .bdl-button{background-color:#333!important}.\[\&_\.bdl-button\]\:px-2\.75 .bdl-button{padding-inline:calc(var(--spacing)*2.75)}.\[\&_\.sc-bdl-button-loading\]\:text-\[\#767676\]\! .sc-bdl-button-loading{color:#767676!important}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.5}}[data-bdl-theme=hsbc]{--semantic-color-fill-completed: var(--brand-hsbc-color-core-black);--semantic-color-fill-dataVis-asset-01: var(--brand-hsbc-color-dataVis-blue1);--semantic-color-fill-dataVis-asset-02: var(--brand-hsbc-color-dataVis-blue4);--semantic-color-fill-dataVis-expense-01: var( --brand-hsbc-color-dataVis-pink1 );--semantic-color-fill-dataVis-expense-02: var( --brand-hsbc-color-dataVis-pink4 );--semantic-color-fill-dataVis-income-01: var( --brand-hsbc-color-dataVis-blue1 );--semantic-color-fill-dataVis-income-02: var( --brand-hsbc-color-dataVis-blue4 );--semantic-color-fill-dataVis-liability-01: var( --brand-hsbc-color-dataVis-pink1 );--semantic-color-fill-dataVis-liability-02: var( --brand-hsbc-color-dataVis-pink4 );--semantic-color-fill-dataVis-gain-default: var(--brand-hsbc-color-rag-green);--semantic-color-fill-dataVis-loss-default: var(--brand-hsbc-color-rag-red);--semantic-color-fill-dataVis-neutral: var( --brand-hsbc-color-complementaryGrey-grey8 );--semantic-color-fill-dataVis-buy-default: var( --brand-hsbc-color-dataVis-blue3 );--semantic-color-fill-dataVis-sell-default: var( --brand-hsbc-color-dataVis-orange4 );--semantic-color-fill-dataVis-riskLevel-low: var( --brand-hsbc-color-rag-green );--semantic-color-fill-dataVis-riskLevel-mediumLow: var( --brand-hsbc-color-rag-green );--semantic-color-fill-dataVis-riskLevel-medium: var( --brand-hsbc-color-rag-amber );--semantic-color-fill-dataVis-riskLevel-mediumHigh: var( --brand-hsbc-color-rag-amber );--semantic-color-fill-dataVis-riskLevel-high: var(--brand-hsbc-color-rag-red);--semantic-color-fill-dataVis-riskLevel-veryHigh: var( --brand-hsbc-color-rag-red );--semantic-color-fill-dataVis-general-10: var( --brand-hsbc-color-dataVis-pink3 );--semantic-color-fill-dataVis-general-11: var( --brand-hsbc-color-dataVis-green1 );--semantic-color-fill-dataVis-general-12: var( --brand-hsbc-color-dataVis-orange3 );--semantic-color-fill-dataVis-general-13: var( --brand-hsbc-color-dataVis-blue3 );--semantic-color-fill-dataVis-general-14: var( --brand-hsbc-color-dataVis-pink1 );--semantic-color-fill-dataVis-general-15: var( --brand-hsbc-color-dataVis-green3 );--semantic-color-fill-dataVis-general-16: var( --brand-hsbc-color-dataVis-orange1 );--semantic-color-fill-dataVis-general-01: var( --brand-hsbc-color-dataVis-blue2 );--semantic-color-fill-dataVis-general-02: var( --brand-hsbc-color-dataVis-pink4 );--semantic-color-fill-dataVis-general-03: var( --brand-hsbc-color-dataVis-green2 );--semantic-color-fill-dataVis-general-04: var( --brand-hsbc-color-dataVis-orange4 );--semantic-color-fill-dataVis-general-05: var( --brand-hsbc-color-dataVis-blue4 );--semantic-color-fill-dataVis-general-06: var( --brand-hsbc-color-dataVis-pink2 );--semantic-color-fill-dataVis-general-07: var( --brand-hsbc-color-dataVis-green4 );--semantic-color-fill-dataVis-general-08: var( --brand-hsbc-color-dataVis-orange2 );--semantic-color-fill-dataVis-general-09: var( --brand-hsbc-color-dataVis-blue1 );--semantic-color-fill-error: var(--brand-hsbc-color-complementaryRed-red1);--semantic-color-fill-uncompleted: var( --brand-hsbc-color-complementaryGrey-grey2 );--semantic-color-fill-information: var(--brand-hsbc-color-rag-blue);--semantic-color-fill-loading: var( --brand-hsbc-color-complementaryGrey-grey3 );--semantic-color-fill-notification: var(--brand-hsbc-color-core-hsbcRed);--semantic-color-fill-primary-default: var(--brand-hsbc-color-core-hsbcRed);--semantic-color-fill-primary-disabled: var( --brand-hsbc-color-complementaryGrey-grey4 );--semantic-color-fill-primary-hover: var( --brand-hsbc-color-complementaryRed-red2 );--semantic-color-fill-primary-pressed: var( --brand-hsbc-color-complementaryRed-red3 );--semantic-color-fill-selected-default: var(--brand-hsbc-color-core-black);--semantic-color-fill-success: var(--brand-hsbc-color-rag-green);--semantic-color-fill-warning: var(--brand-hsbc-color-rag-amber);--semantic-color-background-container-static-highlighted: var( --brand-hsbc-color--darkModeGrey-grey4 );--semantic-color-background-container-selected-default: var( --brand-hsbc-color--darkModeGrey-grey6 );--semantic-color-background-container-interactive-pressed: var( --brand-hsbc-color--darkModeGrey-grey4 );--semantic-color-background-container-information-loud: var( --brand-hsbc-color-rag-blue );--semantic-color-background-container-success-loud: var( --brand-hsbc-color-rag-green );--semantic-color-background-container-error-loud: var( --brand-hsbc-color-rag-red );--semantic-color-background-container-warning-loud: var( --brand-hsbc-color-rag-amber );--semantic-color-background-dataVis-barChart-indicatorArea: var( --brand-hsbc-color-translucent-black-08 );--semantic-color-background-overlay: var( --brand-hsbc-color-translucent-black-50 );--semantic-color-background-canvas-standard: var( --brand-hsbc-color--darkModeGrey-grey6 );--semantic-color-border-container-static: var( --brand-hsbc-color-complementaryGrey-grey3 );--semantic-color-border-container-information: var( --brand-hsbc-color-rag-blue );--semantic-color-border-container-success: var(--brand-hsbc-color-rag-green);--semantic-color-border-container-error: var(--brand-hsbc-color-rag-red);--semantic-color-border-container-warning: var(--brand-hsbc-color-rag-amber);--semantic-color-border-dataVis-indicator-line: var( --brand-hsbc-color-complementaryGrey-grey8 );--semantic-color-border-dataVis-referenceLine-default: var( --brand-hsbc-color-complementaryGrey-grey6 );--semantic-color-border-dataVis-xAxis-baseline: var( --brand-hsbc-color-complementaryGrey-grey8 );--semantic-color-border-dataVis-xAxis-gridline: var( --brand-hsbc-color-complementaryGrey-grey2 );--semantic-color-border-dataVis-yAxis-baseline: var( --brand-hsbc-color-complementaryGrey-grey8 );--semantic-color-border-dataVis-yAxis-gridline: var( --brand-hsbc-color-complementaryGrey-grey2 );--semantic-color-divider: var(--brand-hsbc-color-complementaryGrey-grey8);--semantic-color-gradientStop-textOverlay-dark-solid: var( --brand-hsbc-color-core-black );--semantic-color-gradientStop-textOverlay-dark-strong: var( --brand-hsbc-color-translucent-black-90 );--semantic-color-gradientStop-textOverlay-dark-weak: var( --brand-hsbc-color-translucent-black-55 );--semantic-color-gradientStop-textOverlay-dark-transparent: var( --brand-hsbc-color-transparent-black );--semantic-color-gradientStop-textOverlay-light-solid: var( --brand-hsbc-color-core-white );--semantic-color-gradientStop-textOverlay-light-strong: var( --brand-hsbc-color-translucent-white-90 );--semantic-color-gradientStop-textOverlay-light-weak: var( --brand-hsbc-color-translucent-white-65 );--semantic-color-gradientStop-textOverlay-light-transparent: var( --brand-hsbc-color-transparent-white );--semantic-color-icon-placeholder: var( --brand-hsbc-color-complementaryGrey-grey3 );--semantic-color-icon-secondary-default: var( --brand-hsbc-color-complementaryGrey-grey1 );--semantic-color-icon-secondary-disabled: var( --brand-hsbc-color-complementaryGrey-grey8 );--semantic-color-icon-secondary-pressed: var( --brand-hsbc-color-complementaryGrey-grey1 );--semantic-color-text-actionable-default: var( --brand-hsbc-color-complementaryGrey-grey1 );--semantic-color-text-actionable-disabled: var( --brand-hsbc-color-darkModeGrey-grey2 );--semantic-color-text-actionable-hover: var( --brand-hsbc-color-darkModeGrey-grey1 );--semantic-color-text-actionable-pressed: var( --brand-hsbc-color-complementaryGrey-grey1 );--semantic-color-text-dataVis-gain-default: var(--brand-hsbc-color-rag-green);--semantic-color-text-dataVis-loss-default: var(--brand-hsbc-color-rag-red);--semantic-color-text-dataVis-neutral: var( --brand-hsbc-color-complementaryGrey-grey8 );--semantic-color-text-dataVis-pieChart-data: var( --brand-hsbc-color-complementaryGrey-grey8 );--semantic-color-text-dataVis-pieChart-label: var( --brand-hsbc-color-complementaryGrey-grey8 );--semantic-color-text-dataVis-xAxis-label: var( --brand-hsbc-color-complementaryGrey-grey8 );--semantic-color-text-dataVis-xAxis-title: var( --brand-hsbc-color-complementaryGrey-grey8 );--semantic-color-text-dataVis-yAxis-label: var( --brand-hsbc-color-complementaryGrey-grey8 );--semantic-color-text-dataVis-yAxis-title: var( --brand-hsbc-color-complementaryGrey-grey8 );--semantic-color-text-error: var(--brand-hsbc-color-rag-red);--semantic-size-dataVis-barChart-bar-xs: .25rem;--semantic-size-dataVis-barChart-bar-s: .5rem;--semantic-size-dataVis-barChart-bar-m: .75rem;--semantic-size-dataVis-barChart-bar-l: 1.25rem;--semantic-size-dataVis-barChart-bar-xl: 1.75rem;--semantic-size-dataVis-lineChart-mark: .5rem;--semantic-size-dataVis-pieChart-donut-width: 1rem;--semantic-size-dataVis-pieChart-indicator-length: .375rem;--semantic-size-icon-xs: 1rem;--semantic-size-icon-s: 1.125rem;--semantic-size-icon-m: 1.5rem;--semantic-size-icon-l: 2.25rem;--semantic-size-icon-xl: 3rem;--semantic-size-container-contentArea-maxWidth: 77.5rem;--semantic-size-text-flow-maxWidth: 51.25rem;--semantic-size-visual-xs: 1.5rem;--semantic-size-visual-s: 2.25rem;--semantic-size-visual-m: 3rem;--semantic-size-visual-l: 3.5rem;--semantic-size-visual-xl: 5.25rem;--semantic-size-visual-xxl: 7rem;--semantic-cornerRadius-container-normal: 0rem;--semantic-borderWidth-dataVis-pieChart-slices: .09375rem;--semantic-borderWidth-divider: .0625rem;--semantic-borderWidth-container-static: .0625rem;--semantic-borderWidth-container-interactive-default: .0625rem;--semantic-borderWidth-container-interactive-hover: .0625rem;--semantic-borderWidth-container-interactive-pressed: .0625rem;--semantic-borderWidth-container-interactive-disabled: .0625rem;--semantic-borderWidth-container-selected-default: .0625rem;--semantic-borderWidth-container-selected-hover: .0625rem;--semantic-borderWidth-container-selected-pressed: .0625rem;--semantic-borderWidth-container-selected-disabled: .0625rem;--semantic-shadow-container-elevated: 0rem .125rem .5rem 0rem var(--brand-hsbc-color-translucent-black-20);--semantic-shadow-container-floating: 0rem 0rem 1rem 0rem var(--brand-hsbc-color-translucent-black-30);--semantic-space-general-fixed-0: 0rem;--semantic-space-general-fixed-25: .125rem;--semantic-space-general-fixed-50: .25rem;--semantic-space-general-fixed-100: .5rem;--semantic-space-general-fixed-150: .75rem;--semantic-space-general-fixed-200: 1rem;--semantic-space-general-fixed-250: 1.25rem;--semantic-space-general-fixed-300: 1.5rem;--semantic-space-general-fixed-350: 1.75rem;--semantic-space-general-fixed-400: 2rem;--semantic-space-general-fixed-450: 2.25rem;--semantic-space-general-fixed-500: 2.5rem;--semantic-space-general-fixed-600: 3rem;--semantic-space-general-fixed-700: 3.5rem;--semantic-space-general-fixed-800: 4rem;--semantic-space-general-fixed-900: 4.5rem;--semantic-space-general-fixed-1000: 5rem;--semantic-space-general-responsive-0: 0rem;--semantic-space-general-responsive-0-l: .25rem;--semantic-space-general-responsive-25: .125rem;--semantic-space-general-responsive-25-l: .375rem;--semantic-space-general-responsive-50: .25rem;--semantic-space-general-responsive-50-l: .5rem;--semantic-space-general-responsive-100: .5rem;--semantic-space-general-responsive-100-l: .75rem;--semantic-space-general-responsive-150: .75rem;--semantic-space-general-responsive-150-l: 1rem;--semantic-space-general-responsive-200: 1rem;--semantic-space-general-responsive-200-l: 1.25rem;--semantic-space-general-responsive-250: 1.25rem;--semantic-space-general-responsive-250-l: 1.5rem;--semantic-space-general-responsive-300: 1.5rem;--semantic-space-general-responsive-300-l: 1.75rem;--semantic-space-general-responsive-350: 1.75rem;--semantic-space-general-responsive-350-l: 2rem;--semantic-space-general-responsive-400: 2rem;--semantic-space-general-responsive-400-l: 2.25rem;--semantic-space-general-responsive-450: 2.25rem;--semantic-space-general-responsive-450-l: 2.5rem;--semantic-space-general-responsive-500: 2.5rem;--semantic-space-general-responsive-500-l: 3rem;--semantic-space-general-responsive-600: 3rem;--semantic-space-general-responsive-600-l: 3.5rem;--semantic-space-general-responsive-700: 3.5rem;--semantic-space-general-responsive-700-l: 4rem;--semantic-space-general-responsive-800: 4rem;--semantic-space-general-responsive-800-l: 4.5rem;--semantic-space-general-responsive-900: 4.5rem;--semantic-space-general-responsive-900-l: 5rem;--semantic-space-general-responsive-1000: 5rem;--semantic-space-general-responsive-1000-l: 5.5rem;--semantic-space-container-padding-tight: .75rem;--semantic-space-container-padding-tight-l: 1rem;--semantic-space-container-padding-normal: 1rem;--semantic-space-container-padding-normal-l: 1.25rem;--semantic-space-container-padding-loose: 1.25rem;--semantic-space-container-padding-loose-l: 1.5rem;--semantic-space-item-gap-tight: .5rem;--semantic-space-item-gap-tight-l: .75rem;--semantic-space-item-gap-normal: 1rem;--semantic-space-item-gap-normal-l: 1.25rem;--semantic-space-item-gap-loose: 1.5rem;--semantic-space-item-gap-loose-l: 1.75rem;--semantic-space-section-gap-tight: 1rem;--semantic-space-section-gap-tight-l: 1.25rem;--semantic-space-section-gap-normal: 1.5rem;--semantic-space-section-gap-normal-l: 1.75rem;--semantic-space-section-gap-loose: 2.5rem;--semantic-space-section-gap-loose-l: 3rem;--semantic-typography-heading-display-loud: var(--brand-hsbc-typography-fontWeight-universNext-medium) var(--brand-hsbc-typography-fontSize-s1-scale1) / var(--brand-hsbc-typography-lineHeight-s1-scale1) var(--brand-hsbc-typography-fontFamily-default);--semantic-typography-heading-display-loud-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default );--semantic-typography-heading-display-loud-l: var(--brand-hsbc-typography-fontWeight-universNext-medium) var(--brand-hsbc-typography-fontSize-s1-scale2) / var(--brand-hsbc-typography-lineHeight-s1-scale2) var(--brand-hsbc-typography-fontFamily-default);--semantic-typography-heading-display-loud-l-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default );--semantic-typography-heading-display-normal: var(--brand-hsbc-typography-fontWeight-universNext-regular) var(--brand-hsbc-typography-fontSize-s1-scale1) / var(--brand-hsbc-typography-lineHeight-s1-scale1) var(--brand-hsbc-typography-fontFamily-default);--semantic-typography-heading-display-normal-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default );--semantic-typography-heading-display-normal-l: var(--brand-hsbc-typography-fontWeight-universNext-regular) var(--brand-hsbc-typography-fontSize-s1-scale2) / var(--brand-hsbc-typography-lineHeight-s1-scale2) var(--brand-hsbc-typography-fontFamily-default);--semantic-typography-heading-display-normal-l-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default );--semantic-typography-heading-display-quiet: var(--brand-hsbc-typography-fontWeight-universNext-light) var(--brand-hsbc-typography-fontSize-s1-scale1) / var(--brand-hsbc-typography-lineHeight-s1-scale1) var(--brand-hsbc-typography-fontFamily-default);--semantic-typography-heading-display-quiet-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default );--semantic-typography-heading-display-quiet-l: var(--brand-hsbc-typography-fontWeight-universNext-light) var(--brand-hsbc-typography-fontSize-s1-scale2) / var(--brand-hsbc-typography-lineHeight-s1-scale2) var(--brand-hsbc-typography-fontFamily-default);--semantic-typography-heading-display-quiet-l-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default );--semantic-typography-heading-headline-loud: var(--brand-hsbc-typography-fontWeight-universNext-medium) var(--brand-hsbc-typography-fontSize-s2-scale1) / var(--brand-hsbc-typography-lineHeight-s2-scale1) var(--brand-hsbc-typography-fontFamily-default);--semantic-typography-heading-headline-loud-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default );--semantic-typography-heading-headline-loud-l: var(--brand-hsbc-typography-fontWeight-universNext-medium) var(--brand-hsbc-typography-fontSize-s2-scale2) / var(--brand-hsbc-typography-lineHeight-s2-scale2) var(--brand-hsbc-typography-fontFamily-default);--semantic-typography-heading-headline-loud-l-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default );--semantic-typography-heading-headline-normal: var(--brand-hsbc-typography-fontWeight-universNext-regular) var(--brand-hsbc-typography-fontSize-s2-scale1) / var(--brand-hsbc-typography-lineHeight-s2-scale1) var(--brand-hsbc-typography-fontFamily-default);--semantic-typography-heading-headline-normal-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default );--semantic-typography-heading-headline-normal-l: var(--brand-hsbc-typography-fontWeight-universNext-regular) var(--brand-hsbc-typography-fontSize-s2-scale2) / var(--brand-hsbc-typography-lineHeight-s2-scale2) var(--brand-hsbc-typography-fontFamily-default);--semantic-typography-heading-headline-normal-l-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default );--semantic-typography-heading-headline-quiet: var(--brand-hsbc-typography-fontWeight-universNext-light) var(--brand-hsbc-typography-fontSize-s2-scale1) / var(--brand-hsbc-typography-lineHeight-s2-scale1) var(--brand-hsbc-typography-fontFamily-default);--semantic-typography-heading-headline-quiet-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default );--semantic-typography-heading-headline-quiet-l: var(--brand-hsbc-typography-fontWeight-universNext-light) var(--brand-hsbc-typography-fontSize-s2-scale2) / var(--brand-hsbc-typography-lineHeight-s2-scale2) var(--brand-hsbc-typography-fontFamily-default);--semantic-typography-heading-headline-quiet-l-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default );--semantic-typography-heading-subheadline-loud: var(--brand-hsbc-typography-fontWeight-universNext-medium) var(--brand-hsbc-typography-fontSize-s3-scale1) / var(--brand-hsbc-typography-lineHeight-s3-scale1) var(--brand-hsbc-typography-fontFamily-default);--semantic-typography-heading-subheadline-loud-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default );--semantic-typography-heading-subheadline-loud-l: var(--brand-hsbc-typography-fontWeight-universNext-medium) var(--brand-hsbc-typography-fontSize-s3-scale2) / var(--brand-hsbc-typography-lineHeight-s3-scale2) var(--brand-hsbc-typography-fontFamily-default);--semantic-typography-heading-subheadline-loud-l-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default );--semantic-typography-heading-subheadline-normal: var(--brand-hsbc-typography-fontWeight-universNext-regular) var(--brand-hsbc-typography-fontSize-s3-scale1) / var(--brand-hsbc-typography-lineHeight-s3-scale1) var(--brand-hsbc-typography-fontFamily-default);--semantic-typography-heading-subheadline-normal-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default );--semantic-typography-heading-subheadline-normal-l: var(--brand-hsbc-typography-fontWeight-universNext-regular) var(--brand-hsbc-typography-fontSize-s3-scale2) / var(--brand-hsbc-typography-lineHeight-s3-scale2) var(--brand-hsbc-typography-fontFamily-default);--semantic-typography-heading-subheadline-normal-l-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default );--semantic-typography-heading-subheadline-quiet: var(--brand-hsbc-typography-fontWeight-universNext-light) var(--brand-hsbc-typography-fontSize-s3-scale1) / var(--brand-hsbc-typography-lineHeight-s3-scale1) var(--brand-hsbc-typography-fontFamily-default);--semantic-typography-heading-subheadline-quiet-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default );--semantic-typography-heading-subheadline-quiet-l: var(--brand-hsbc-typography-fontWeight-universNext-light) var(--brand-hsbc-typography-fontSize-s3-scale2) / var(--brand-hsbc-typography-lineHeight-s3-scale2) var(--brand-hsbc-typography-fontFamily-default);--semantic-typography-heading-subheadline-quiet-l-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default );--semantic-typography-heading-sectionTitle-loud: var(--brand-hsbc-typography-fontWeight-universNext-medium) var(--brand-hsbc-typography-fontSize-s3-scale1) / var(--brand-hsbc-typography-lineHeight-s3-scale1) var(--brand-hsbc-typography-fontFamily-default);--semantic-typography-heading-sectionTitle-loud-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default );--semantic-typography-heading-sectionTitle-loud-l: var(--brand-hsbc-typography-fontWeight-universNext-medium) var(--brand-hsbc-typography-fontSize-s3-scale2) / var(--brand-hsbc-typography-lineHeight-s3-scale2) var(--brand-hsbc-typography-fontFamily-default);--semantic-typography-heading-sectionTitle-loud-l-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default );--semantic-typography-heading-sectionTitle-normal: var(--brand-hsbc-typography-fontWeight-universNext-regular) var(--brand-hsbc-typography-fontSize-s3-scale1) / var(--brand-hsbc-typography-lineHeight-s3-scale1) var(--brand-hsbc-typography-fontFamily-default);--semantic-typography-heading-sectionTitle-normal-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default );--semantic-typography-heading-sectionTitle-normal-l: var(--brand-hsbc-typography-fontWeight-universNext-regular) var(--brand-hsbc-typography-fontSize-s3-scale2) / var(--brand-hsbc-typography-lineHeight-s3-scale2) var(--brand-hsbc-typography-fontFamily-default);--semantic-typography-heading-sectionTitle-normal-l-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default );--semantic-typography-heading-sectionTitle-quiet: var(--brand-hsbc-typography-fontWeight-universNext-light) var(--brand-hsbc-typography-fontSize-s3-scale1) / var(--brand-hsbc-typography-lineHeight-s3-scale1) var(--brand-hsbc-typography-fontFamily-default);--semantic-typography-heading-sectionTitle-quiet-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default );--semantic-typography-heading-sectionTitle-quiet-l: var(--brand-hsbc-typography-fontWeight-universNext-light) var(--brand-hsbc-typography-fontSize-s3-scale2) / var(--brand-hsbc-typography-lineHeight-s3-scale2) var(--brand-hsbc-typography-fontFamily-default);--semantic-typography-heading-sectionTitle-quiet-l-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default );--semantic-typography-heading-contentTitle-loud: var(--brand-hsbc-typography-fontWeight-universNext-medium) var(--brand-hsbc-typography-fontSize-s4-scale1) / var(--brand-hsbc-typography-lineHeight-s4-scale1) var(--brand-hsbc-typography-fontFamily-default);--semantic-typography-heading-contentTitle-loud-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default );--semantic-typography-heading-contentTitle-loud-l: var(--brand-hsbc-typography-fontWeight-universNext-medium) var(--brand-hsbc-typography-fontSize-s4-scale2) / var(--brand-hsbc-typography-lineHeight-s4-scale2) var(--brand-hsbc-typography-fontFamily-default);--semantic-typography-heading-contentTitle-loud-l-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default );--semantic-typography-heading-contentTitle-normal: var(--brand-hsbc-typography-fontWeight-universNext-regular) var(--brand-hsbc-typography-fontSize-s4-scale1) / var(--brand-hsbc-typography-lineHeight-s4-scale1) var(--brand-hsbc-typography-fontFamily-default);--semantic-typography-heading-contentTitle-normal-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default );--semantic-typography-heading-contentTitle-normal-l: var(--brand-hsbc-typography-fontWeight-universNext-regular) var(--brand-hsbc-typography-fontSize-s4-scale2) / var(--brand-hsbc-typography-lineHeight-s4-scale2) var(--brand-hsbc-typography-fontFamily-default);--semantic-typography-heading-contentTitle-normal-l-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default );--semantic-typography-heading-contentTitle-quiet: var(--brand-hsbc-typography-fontWeight-universNext-light) var(--brand-hsbc-typography-fontSize-s4-scale1) / var(--brand-hsbc-typography-lineHeight-s4-scale1) var(--brand-hsbc-typography-fontFamily-default);--semantic-typography-heading-contentTitle-quiet-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default );--semantic-typography-heading-contentTitle-quiet-l: var(--brand-hsbc-typography-fontWeight-universNext-light) var(--brand-hsbc-typography-fontSize-s4-scale2) / var(--brand-hsbc-typography-lineHeight-s4-scale2) var(--brand-hsbc-typography-fontFamily-default);--semantic-typography-heading-contentTitle-quiet-l-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default );--semantic-typography-content-body-loud: var(--brand-hsbc-typography-fontWeight-universNext-medium) var(--brand-hsbc-typography-fontSize-s5) / var(--brand-hsbc-typography-lineHeight-s5) var(--brand-hsbc-typography-fontFamily-default);--semantic-typography-content-body-loud-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default );--semantic-typography-content-body-normal: var(--brand-hsbc-typography-fontWeight-universNext-regular) var(--brand-hsbc-typography-fontSize-s5) / var(--brand-hsbc-typography-lineHeight-s5) var(--brand-hsbc-typography-fontFamily-default);--semantic-typography-content-body-normal-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default );--semantic-typography-content-body-quiet: var(--brand-hsbc-typography-fontWeight-universNext-light) var(--brand-hsbc-typography-fontSize-s5) / var(--brand-hsbc-typography-lineHeight-s5) var(--brand-hsbc-typography-fontFamily-default);--semantic-typography-content-body-quiet-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default );--semantic-typography-content-caption-loud: var(--brand-hsbc-typography-fontWeight-universNext-medium) var(--brand-hsbc-typography-fontSize-s6) / var(--brand-hsbc-typography-lineHeight-s6) var(--brand-hsbc-typography-fontFamily-default);--semantic-typography-content-caption-loud-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default );--semantic-typography-content-caption-normal: var(--brand-hsbc-typography-fontWeight-universNext-regular) var(--brand-hsbc-typography-fontSize-s6) / var(--brand-hsbc-typography-lineHeight-s6) var(--brand-hsbc-typography-fontFamily-default);--semantic-typography-content-caption-normal-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default );--semantic-typography-content-caption-quiet: var(--brand-hsbc-typography-fontWeight-universNext-light) var(--brand-hsbc-typography-fontSize-s6) / var(--brand-hsbc-typography-lineHeight-s6) var(--brand-hsbc-typography-fontFamily-default);--semantic-typography-content-caption-quiet-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default );--semantic-typography-content-footnote-loud: var(--brand-hsbc-typography-fontWeight-universNext-medium) var(--brand-hsbc-typography-fontSize-s7) / var(--brand-hsbc-typography-lineHeight-s7) var(--brand-hsbc-typography-fontFamily-default);--semantic-typography-content-footnote-loud-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default );--semantic-typography-content-footnote-normal: var(--brand-hsbc-typography-fontWeight-universNext-regular) var(--brand-hsbc-typography-fontSize-s7) / var(--brand-hsbc-typography-lineHeight-s7) var(--brand-hsbc-typography-fontFamily-default);--semantic-typography-content-footnote-normal-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default );--semantic-typography-content-footnote-quiet: var(--brand-hsbc-typography-fontWeight-universNext-light) var(--brand-hsbc-typography-fontSize-s7) / var(--brand-hsbc-typography-lineHeight-s7) var(--brand-hsbc-typography-fontFamily-default);--semantic-typography-content-footnote-quiet-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default );--semantic-typography-content-quote-loud: var(--brand-hsbc-typography-fontWeight-universNext-medium) var(--brand-hsbc-typography-fontSize-s7) / var(--brand-hsbc-typography-lineHeight-s7) var(--brand-hsbc-typography-fontFamily-default);--semantic-typography-content-quote-loud-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default );--semantic-typography-content-quote-normal: var(--brand-hsbc-typography-fontWeight-universNext-regular) var(--brand-hsbc-typography-fontSize-s7) / var(--brand-hsbc-typography-lineHeight-s7) var(--brand-hsbc-typography-fontFamily-default);--semantic-typography-content-quote-normal-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default );--semantic-typography-content-quote-quiet: var(--brand-hsbc-typography-fontWeight-universNext-light) var(--brand-hsbc-typography-fontSize-s7) / var(--brand-hsbc-typography-lineHeight-s7) var(--brand-hsbc-typography-fontFamily-default);--semantic-typography-content-quote-quiet-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default );--semantic-color-fill-primary-default: var( --brand-hsbc-color-complementaryRed-red1 );--semantic-color-fill-primary-disabled: var( --brand-hsbc-color-darkModeGrey-grey4 );--semantic-color-fill-selected-disabled: var( --brand-hsbc-color-darkModeGrey-grey4 );--semantic-color-fill-selected-hover: var( --brand-hsbc-color-darkModeGrey-grey3 );--semantic-color-fill-selected-pressed: var( --brand-hsbc-color-darkModeGrey-grey4 );--semantic-color-fill-error: var( --brand-hsbc-color-complementaryRed-red1 );--semantic-color-icon-actionable-default: var( --brand-hsbc-color-complementaryGrey-grey1 );--semantic-color-icon-actionable-disabled: var( --brand-hsbc-color-complementaryGrey-grey8 );--semantic-color-icon-actionable-hover: var( --brand-hsbc-color-darkModeGrey-grey1 );--semantic-color-icon-actionable-pressed: var( --brand-hsbc-color-complementaryGrey-grey1 );--semantic-color-icon-primary-default: var( --brand-hsbc-color-complementaryGrey-grey1 );--semantic-color-icon-primary-disabled: var( --brand-hsbc-color-complementaryGrey-grey8 );--semantic-color-icon-primary-hover: var( --brand-hsbc-color-darkModeGrey-grey1 );--semantic-color-icon-primary-pressed: var( --brand-hsbc-color-complementaryGrey-grey1 );--semantic-color-icon-secondary-default: var( --brand-hsbc-color-complementaryGrey-grey4 );--semantic-color-icon-secondary-disabled: var( --brand-hsbc-color-darkModeGrey-grey2 );--semantic-color-icon-secondary-hover: var( --brand-hsbc-color-darkModeGrey-grey1 );--semantic-color-icon-secondary-pressed: var( --brand-hsbc-color-complementaryGrey-grey4 );--semantic-color-text-primary-default: var( --brand-hsbc-color-complementaryGrey-grey1 );--semantic-color-text-primary-disabled: var( --brand-hsbc-color-darkModeGrey-grey2 );--semantic-color-text-primary-hover: var( --brand-hsbc-color-darkModeGrey-grey1 );--semantic-color-text-primary-pressed: var( --brand-hsbc-color-complementaryGrey-grey1 );--semantic-color-text-secondary-default: var( --brand-hsbc-color-complementaryGrey-grey4 );--semantic-color-text-secondary-disabled: var( --brand-hsbc-color-darkModeGrey-grey2 );--semantic-color-text-secondary-hover: var( --brand-hsbc-color-darkModeGrey-grey1 );--semantic-color-text-secondary-pressed: var( --brand-hsbc-color-complementaryGrey-grey4 );--semantic-color-text-placeholder: var( --brand-hsbc-color-complementaryGrey-grey5 );--semantic-color-background-canvas-standard: var( --brand-hsbc-color-darkModeGrey-grey6 );--semantic-color-background-canvas-highlighted: var( --brand-hsbc-color-darkModeGrey-grey5 );--semantic-color-background-container-static-standard: var( --brand-hsbc-color-darkModeGrey-grey6 );--semantic-color-background-container-static-highlighted: var( --brand-hsbc-color-darkModeGrey-grey4 );--semantic-color-background-container-selected-default: var( --brand-hsbc-color-darkModeGrey-grey6 );--semantic-color-background-container-selected-disabled: var( --brand-hsbc-color-darkModeGrey-grey6 );--semantic-color-background-container-selected-hover: var( --brand-hsbc-color-darkModeGrey-grey3 );--semantic-color-background-container-selected-pressed: var( --brand-hsbc-color-darkModeGrey-grey4 );--semantic-color-background-container-interactive-default: var( --brand-hsbc-color-darkModeGrey-grey6 );--semantic-color-background-container-interactive-disabled: var( --brand-hsbc-color-darkModeGrey-grey6 );--semantic-color-background-container-interactive-hover: var( --brand-hsbc-color-darkModeGrey-grey3 );--semantic-color-background-container-interactive-pressed: var( --brand-hsbc-color-darkModeGrey-grey4 );--semantic-color-background-container-information-quiet: var( --brand-hsbc-color-rag-blueTintDark );--semantic-color-background-container-success-quiet: var( --brand-hsbc-color-rag-greenTintDark );--semantic-color-background-container-error-quiet: var( --brand-hsbc-color-rag-redTintDark );--semantic-color-background-container-warning-quiet: var( --brand-hsbc-color-rag-amberTintDark );--semantic-color-background-overlay: #40404060;--semantic-color-border-container-interactive-default: var( --brand-hsbc-color-complementaryGrey-grey1 );--semantic-color-border-container-interactive-disabled: var( --brand-hsbc-color-darkModeGrey-grey2 );--semantic-color-border-container-interactive-hover: var( --brand-hsbc-color-complementaryGrey-grey1 );--semantic-color-border-container-interactive-pressed: var( --brand-hsbc-color-complementaryGrey-grey1 );--semantic-color-border-container-selected-default: var( --brand-hsbc-color-complementaryGrey-grey1 );--semantic-color-border-container-selected-disabled: var( --brand-hsbc-color-darkModeGrey-grey2 );--semantic-color-border-container-selected-hover: var( --brand-hsbc-color-complementaryGrey-grey1 );--semantic-color-border-container-selected-pressed: var( --brand-hsbc-color-complementaryGrey-grey1 );--semantic-color-divider: var( --brand-hsbc-color-complementaryGrey-grey8 );--semantic-color-spinner-determinate-progress: var( --brand-hsbc-color-complementaryGrey-grey1 );--semantic-color-spinner-determinate-track: var( --brand-hsbc-color-darkModeGrey-grey3 );--semantic-color-spinner-indeterminate-onDark: var( --brand-hsbc-color-darkModeGrey-grey3 );--semantic-color-spinner-indeterminate-onLight: var( --brand-hsbc-color-complementaryGrey-grey1 );--semantic-color-stepTracker-step-background-completed: var( --brand-hsbc-color-complementaryGrey-grey1 );--semantic-color-snackbar-warning-text: var( --brand-hsbc-color-complementaryGrey-grey1 );--semantic-color-pill-selected-background-default: var( --brand-hsbc-color-complementaryGrey-grey1 );--semantic-color-segmentedControl-divider: var( --semantic-color-divider );--semantic-color-segmentedControl-segment-background-unselected-default: var( --brand-hsbc-color-darkModeGrey-grey3 );--semantic-color-segmentedControl-segment-border-selected-default: var( --brand-hsbc-color-darkModeGrey-grey1 );--semantic-color-switch-selected-track-border-default: var( --semantic-color-border-container-selected-default );--semantic-color-switch-selected-track-border-hover: var( --semantic-color-border-container-selected-default );--semantic-color-switch-selected-track-border-pressed: var( --semantic-color-border-container-selected-default );--semantic-color-switch-selected-track-border-disabled: var( --semantic-color-border-container-selected-disabled );--semantic-color-quantitySelector-active-box-background: var( --semantic-color-background-container-interactive-default );--semantic-color-searchField-active-bar-fill-default: var( --brand-hsbc-color-complementaryGrey-grey1 )}[data-bdl-theme=hsbc]{--brand-hsbc-color-core-hsbcRed: #db0011;--brand-hsbc-color-core-white: #fff;--brand-hsbc-color-core-black: #000;--brand-hsbc-color-complementaryGrey-grey1: #f3f3f3;--brand-hsbc-color-complementaryGrey-grey2: #ededed;--brand-hsbc-color-complementaryGrey-grey3: #d7d8d6;--brand-hsbc-color-complementaryGrey-grey4: #b7b7b7;--brand-hsbc-color-complementaryGrey-grey5: #9b9b9b;--brand-hsbc-color-complementaryGrey-grey6: #767676;--brand-hsbc-color-complementaryGrey-grey7: #545454;--brand-hsbc-color-complementaryGrey-grey8: #333333;--brand-hsbc-color-darkModeGrey-grey1: #656565;--brand-hsbc-color-darkModeGrey-grey2: #474747;--brand-hsbc-color-darkModeGrey-grey3: #404040;--brand-hsbc-color-darkModeGrey-grey4: #212121;--brand-hsbc-color-darkModeGrey-grey5: #1d1d1d;--brand-hsbc-color-darkModeGrey-grey6: #101010;--brand-hsbc-color-complementaryRed-red1: #e31e22;--brand-hsbc-color-complementaryRed-red2: #ba1110;--brand-hsbc-color-complementaryRed-red3: #730014;--brand-hsbc-color-translucent-black-16: #00000029;--brand-hsbc-color-translucent-black-20: #0003;--brand-hsbc-color-translucent-black-30: #0000004d;--brand-hsbc-color-translucent-black-50: #00000080;--brand-hsbc-color-translucent-black-55: #0000008c;--brand-hsbc-color-translucent-black-90: #000000e5;--brand-hsbc-color-translucent-black-08: #00000014;--brand-hsbc-color-translucent-white-65: #ffffffa6;--brand-hsbc-color-translucent-white-90: #ffffffe5;--brand-hsbc-color-transparent-black: #0000;--brand-hsbc-color-transparent-white: #fff0;--brand-hsbc-color-rag-amber: #fb3;--brand-hsbc-color-rag-amberTint: #fff8ea;--brand-hsbc-color-rag-amberTintDark: #221701;--brand-hsbc-color-rag-blue: #305a85;--brand-hsbc-color-rag-blueTint: #ebeff4;--brand-hsbc-color-rag-blueTintDark: #000d1b;--brand-hsbc-color-rag-green: #00847f;--brand-hsbc-color-rag-greenTint: #e5f2f2;--brand-hsbc-color-rag-greenTintDark: #001615;--brand-hsbc-color-rag-red: #a8000b;--brand-hsbc-color-rag-redTint: #f9f2f3;--brand-hsbc-color-rag-redTintDark: #260005;--brand-hsbc-color-dataVis-pink1: #933d4f;--brand-hsbc-color-dataVis-pink2: #c03954;--brand-hsbc-color-dataVis-pink3: #f14e73;--brand-hsbc-color-dataVis-pink4: #e76e84;--brand-hsbc-color-dataVis-orange1: #94411a;--brand-hsbc-color-dataVis-orange2: #c64d24;--brand-hsbc-color-dataVis-orange3: #ed500d;--brand-hsbc-color-dataVis-orange4: #ec7046;--brand-hsbc-color-dataVis-green1: #356512;--brand-hsbc-color-dataVis-green2: #518827;--brand-hsbc-color-dataVis-green3: #4da90f;--brand-hsbc-color-dataVis-green4: #74a157;--brand-hsbc-color-dataVis-blue1: #266076;--brand-hsbc-color-dataVis-blue2: #347893;--brand-hsbc-color-dataVis-blue3: #1494c6;--brand-hsbc-color-dataVis-blue4: #509ebc;--brand-hsbc-color-dataVis-purple1: #7c4386;--brand-hsbc-color-dataVis-purple2: #8738ab;--brand-hsbc-color-dataVis-purple3: #a752cf;--brand-hsbc-color-dataVis-purple4: #b184c7;--brand-hsbc-dimension-fixed-F1: .0625rem;--brand-hsbc-dimension-fixed-F2: .125rem;--brand-hsbc-dimension-fixed-F3: .1875rem;--brand-hsbc-dimension-fixed-F4: .25rem;--brand-hsbc-dimension-fixed-F5: .3125rem;--brand-hsbc-dimension-fixed-F6: .375rem;--brand-hsbc-dimension-fixed-F7: .4375rem;--brand-hsbc-dimension-fixed-F8: .5rem;--brand-hsbc-dimension-fixed-F10: .625rem;--brand-hsbc-dimension-fixed-F12: .75rem;--brand-hsbc-dimension-fixed-F16: 1rem;--brand-hsbc-dimension-fixed-F20: 1.25rem;--brand-hsbc-dimension-fixed-F24: 1.5rem;--brand-hsbc-dimension-fixed-F28: 1.75rem;--brand-hsbc-dimension-responsive-R0-scale1: 0rem;--brand-hsbc-dimension-responsive-R0-scale2: .25rem;--brand-hsbc-dimension-responsive-R1-scale1: .25rem;--brand-hsbc-dimension-responsive-R1-scale2: .5rem;--brand-hsbc-dimension-responsive-R2-scale1: .5rem;--brand-hsbc-dimension-responsive-R2-scale2: .75rem;--brand-hsbc-dimension-responsive-R3-scale1: .75rem;--brand-hsbc-dimension-responsive-R3-scale2: 1rem;--brand-hsbc-dimension-responsive-R4-scale1: 1rem;--brand-hsbc-dimension-responsive-R4-scale2: 1.25rem;--brand-hsbc-dimension-responsive-R5-scale1: 1.25rem;--brand-hsbc-dimension-responsive-R5-scale2: 1.5rem;--brand-hsbc-dimension-responsive-R6-scale1: 1.5rem;--brand-hsbc-dimension-responsive-R6-scale2: 1.75rem;--brand-hsbc-dimension-responsive-R7-scale1: 1.75rem;--brand-hsbc-dimension-responsive-R7-scale2: 2rem;--brand-hsbc-dimension-responsive-R8-scale1: 2rem;--brand-hsbc-dimension-responsive-R8-scale2: 2.25rem;--brand-hsbc-dimension-responsive-R9-scale1: 2.25rem;--brand-hsbc-dimension-responsive-R9-scale2: 2.5rem;--brand-hsbc-dimension-responsive-R10-scale1: 2.5rem;--brand-hsbc-dimension-responsive-R10-scale2: 3rem;--brand-hsbc-dimension-responsive-R11-scale1: 2.75rem;--brand-hsbc-dimension-responsive-R11-scale2: 3.25rem;--brand-hsbc-dimension-responsive-R12-scale1: 3rem;--brand-hsbc-dimension-responsive-R12-scale2: 3.5rem;--brand-hsbc-number-lineCap-butt: butt;--brand-hsbc-number-lineCap-round: round;--brand-hsbc-number-lineCap-square: square;--brand-hsbc-number-iconStyle-onLight: onlight;--brand-hsbc-number-iconStyle-onDark: ondark;--brand-hsbc-number-iconStyle-onRAG: onrag;--brand-hsbc-typography-fontWeight-universNext-thin: 300;--brand-hsbc-typography-fontWeight-universNext-light: 350;--brand-hsbc-typography-fontWeight-universNext-regular: 400;--brand-hsbc-typography-fontWeight-universNext-medium: 500;--brand-hsbc-typography-fontWeight-universNext-bold: 700;--brand-hsbc-typography-fontSize-s7: .75rem;--brand-hsbc-typography-fontSize-s6: .875rem;--brand-hsbc-typography-fontSize-s5: 1rem;--brand-hsbc-typography-fontSize-s4-scale1: 1.1875rem;--brand-hsbc-typography-fontSize-s4-scale2: 1.375rem;--brand-hsbc-typography-fontSize-s3-scale1: 1.4375rem;--brand-hsbc-typography-fontSize-s3-scale2: 1.75rem;--brand-hsbc-typography-fontSize-s2-scale1: 1.75rem;--brand-hsbc-typography-fontSize-s2-scale2: 2.1875rem;--brand-hsbc-typography-fontSize-s1-scale1: 2.0625rem;--brand-hsbc-typography-fontSize-s1-scale2: 2.75rem;--brand-hsbc-typography-fontFamily-default: "Univers Next for HSBC", sans-serif;--brand-hsbc-typography-lineHeight-s7: 1rem;--brand-hsbc-typography-lineHeight-s6: 1.25rem;--brand-hsbc-typography-lineHeight-s5: 1.5rem;--brand-hsbc-typography-lineHeight-s4-scale1: 1.6875rem;--brand-hsbc-typography-lineHeight-s4-scale2: 1.9375rem;--brand-hsbc-typography-lineHeight-s3-scale1: 1.875rem;--brand-hsbc-typography-lineHeight-s3-scale2: 2.25rem;--brand-hsbc-typography-lineHeight-s2-scale1: 2.25rem;--brand-hsbc-typography-lineHeight-s2-scale2: 2.625rem;--brand-hsbc-typography-lineHeight-s1-scale1: 2.5rem;--brand-hsbc-typography-lineHeight-s1-scale2: 3.125rem;--brand-hsbc-typography-letterSpacing-default: 0rem;--brand-hsbc-typography-paragraphSpacing-s7: .5rem;--brand-hsbc-typography-paragraphSpacing-s6: .625rem;--brand-hsbc-typography-paragraphSpacing-s5: .75rem;--brand-hsbc-typography-paragraphSpacing-s4-scale1: .875rem;--brand-hsbc-typography-paragraphSpacing-s4-scale2: 1rem;--brand-hsbc-typography-paragraphSpacing-s3-scale1: .9375rem;--brand-hsbc-typography-paragraphSpacing-s3-scale2: 1.125rem;--brand-hsbc-typography-paragraphSpacing-s2-scale1: 1.125rem;--brand-hsbc-typography-paragraphSpacing-s2-scale2: 1.3125rem;--brand-hsbc-typography-paragraphSpacing-s1-scale1: 1.25rem;--brand-hsbc-typography-paragraphSpacing-s1-scale2: 1.5625rem}[data-bdl-theme=hsbc]{--comp-appTopNav-borderWidth-divider: .0625rem;--comp-appTopNav-color-action-icon-default: var(--semantic-color-icon-actionable-default, #000);--comp-appTopNav-color-action-icon-disabled: var(--semantic-color-icon-actionable-disabled, #d7d8d6);--comp-appTopNav-color-action-icon-hover: var(--semantic-color-icon-actionable-hover, #767676);--comp-appTopNav-color-action-icon-pressed: var(--semantic-color-icon-actionable-pressed, #767676);--comp-appTopNav-color-action-text-default: var(--semantic-color-text-actionable-default, #000);--comp-appTopNav-color-action-text-disabled: var(--semantic-color-text-actionable-disabled, #d7d8d6);--comp-appTopNav-color-action-text-hover: var(--semantic-color-text-actionable-hover, #767676);--comp-appTopNav-color-action-text-pressed: var(--semantic-color-text-actionable-pressed, #767676);--comp-appTopNav-color-background: var(--semantic-color-background-container-static-standard, #fff);--comp-appTopNav-color-divider: var(--semantic-color-divider, #ededed);--comp-appTopNav-color-navigation-icon-default: var(--semantic-color-icon-actionable-default, #000);--comp-appTopNav-color-navigation-icon-hover: var(--semantic-color-icon-actionable-hover, #767676);--comp-appTopNav-color-navigation-icon-pressed: var(--semantic-color-icon-actionable-pressed, #767676);--comp-appTopNav-color-subtitle-text: var(--semantic-color-text-secondary-default, #545454);--comp-appTopNav-color-title-text: var(--semantic-color-text-primary-default, #333);--comp-appTopNav-size-action-icon: var(--semantic-size-icon-s, 1.125rem);--comp-appTopNav-size-navigation-icon: var(--semantic-size-icon-s, 1.125rem);--comp-appTopNav-space-gapNavigationTitle: var(--semantic-space-general-fixed-200, 1rem);--comp-appTopNav-space-gapTitleAction: var(--semantic-space-general-fixed-200, 1rem);--comp-appTopNav-space-gapTitleSubtitle: -.25rem;--comp-appTopNav-space-paddingHorizontal: var(--semantic-space-general-fixed-200, 1rem);--comp-appTopNav-space-paddingVertical: var(--semantic-space-general-fixed-0, 0rem);--comp-appTopNav-typography-title: var( --semantic-typography-content-body-loud, 500 1rem/1.5rem "Univers Next for HSBC", sans-serif );--comp-appTopNav-typography-title-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem);--comp-appTopNav-typography-subtitle: var( --semantic-typography-content-caption-quiet, 350 .875rem/1.25rem "Univers Next for HSBC", sans-serif );--comp-appTopNav-typography-subtitle-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem);--comp-appTopNav-typography-action-default: var( --semantic-typography-content-body-loud, 500 1rem/1.5rem "Univers Next for HSBC", sans-serif );--comp-appTopNav-typography-action-default-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem);--comp-appTopNav-typography-action-hover: var( --semantic-typography-content-body-loud, 500 1rem/1.5rem "Univers Next for HSBC", sans-serif );--comp-appTopNav-typography-action-hover-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem);--comp-appTopNav-typography-action-pressed: var( --semantic-typography-content-body-loud, 500 1rem/1.5rem "Univers Next for HSBC", sans-serif );--comp-appTopNav-typography-action-pressed-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem);--comp-appTopNav-typography-action-disabled: var( --semantic-typography-content-body-loud, 500 1rem/1.5rem "Univers Next for HSBC", sans-serif );--comp-appTopNav-typography-action-disabled-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem)}[data-bdl-theme=hsbc]{--comp-avatar-borderWidth-interactive-indicator-default: 0rem;--comp-avatar-borderWidth-interactive-indicator-disabled: 0rem;--comp-avatar-borderWidth-interactive-indicator-hover: 0rem;--comp-avatar-borderWidth-interactive-indicator-pressed: 0rem;--comp-avatar-borderWidth-interactive-selected-default: .125rem;--comp-avatar-borderWidth-interactive-selected-disabled: .125rem;--comp-avatar-borderWidth-interactive-selected-hover: .1875rem;--comp-avatar-borderWidth-interactive-selected-pressed: .1875rem;--comp-avatar-borderWidth-interactive-unselected-default: .0625rem;--comp-avatar-borderWidth-interactive-unselected-disabled: .0625rem;--comp-avatar-borderWidth-interactive-unselected-hover: .125rem;--comp-avatar-borderWidth-interactive-unselected-pressed: .125rem;--comp-avatar-borderWidth-static: .0625rem;--comp-avatar-color-interactive-background-selected-default: var(--brand-hsbc-color-complementaryGrey-grey1, #f3f3f3);--comp-avatar-color-interactive-background-selected-disabled: var( --brand-hsbc-color-complementaryGrey-grey1, #f3f3f3 );--comp-avatar-color-interactive-background-selected-hover: var(--brand-hsbc-color-complementaryGrey-grey2, #ededed);--comp-avatar-color-interactive-background-selected-pressed: var(--brand-hsbc-color-complementaryGrey-grey2, #ededed);--comp-avatar-color-interactive-background-unselected-default: var( --brand-hsbc-color-complementaryGrey-grey1, #f3f3f3 );--comp-avatar-color-interactive-background-unselected-disabled: var( --brand-hsbc-color-complementaryGrey-grey1, #f3f3f3 );--comp-avatar-color-interactive-background-unselected-hover: var(--brand-hsbc-color-complementaryGrey-grey2, #ededed);--comp-avatar-color-interactive-background-unselected-pressed: var( --brand-hsbc-color-complementaryGrey-grey2, #ededed );--comp-avatar-color-interactive-border-selected-default: var( --semantic-color-border-container-selected-default, #000 );--comp-avatar-color-interactive-border-selected-disabled: var( --semantic-color-border-container-selected-disabled, #d7d8d6 );--comp-avatar-color-interactive-border-selected-hover: var(--semantic-color-border-container-selected-hover, #000);--comp-avatar-color-interactive-border-selected-pressed: var( --semantic-color-border-container-selected-pressed, #000 );--comp-avatar-color-interactive-border-unselected-default: var(--brand-hsbc-color-complementaryGrey-grey3, #d7d8d6);--comp-avatar-color-interactive-border-unselected-disabled: var( --semantic-color-border-container-interactive-disabled, #d7d8d6 );--comp-avatar-color-interactive-border-unselected-hover: var(--brand-hsbc-color-complementaryGrey-grey6, #767676);--comp-avatar-color-interactive-border-unselected-pressed: var(--brand-hsbc-color-complementaryGrey-grey6, #767676);--comp-avatar-color-interactive-icon-selected-default: var(--semantic-color-icon-primary-default, #333);--comp-avatar-color-interactive-icon-selected-disabled: var(--semantic-color-icon-primary-default, #333);--comp-avatar-color-interactive-icon-selected-hover: var(--semantic-color-icon-primary-default, #333);--comp-avatar-color-interactive-icon-selected-pressed: var(--semantic-color-icon-primary-default, #333);--comp-avatar-color-interactive-icon-unselected-default: var(--semantic-color-icon-primary-default, #333);--comp-avatar-color-interactive-icon-unselected-disabled: var(--semantic-color-icon-primary-default, #333);--comp-avatar-color-interactive-icon-unselected-hover: var(--semantic-color-icon-primary-default, #333);--comp-avatar-color-interactive-icon-unselected-pressed: var(--semantic-color-icon-primary-default, #333);--comp-avatar-color-interactive-indicator-background-default: var(--semantic-color-fill-selected-default, #000);--comp-avatar-color-interactive-indicator-background-disabled: var(--semantic-color-fill-selected-default, #000);--comp-avatar-color-interactive-indicator-background-hover: var(--semantic-color-fill-selected-default, #000);--comp-avatar-color-interactive-indicator-background-pressed: var(--semantic-color-fill-selected-default, #000);--comp-avatar-color-interactive-indicator-border-default: var( --semantic-color-border-container-selected-default, #000 );--comp-avatar-color-interactive-indicator-border-disabled: var( --semantic-color-border-container-selected-default, #000 );--comp-avatar-color-interactive-indicator-border-hover: var(--semantic-color-border-container-selected-default, #000);--comp-avatar-color-interactive-indicator-border-pressed: var( --semantic-color-border-container-selected-default, #000 );--comp-avatar-color-interactive-indicator-icon-default: var(--brand-hsbc-color-core-white, #fff);--comp-avatar-color-interactive-indicator-icon-disabled: var(--brand-hsbc-color-core-white, #fff);--comp-avatar-color-interactive-indicator-icon-hover: var(--brand-hsbc-color-core-white, #fff);--comp-avatar-color-interactive-indicator-icon-pressed: var(--brand-hsbc-color-core-white, #fff);--comp-avatar-color-interactive-initials-text-selected-default: var(--semantic-color-text-primary-default, #333);--comp-avatar-color-interactive-initials-text-selected-disabled: var(--semantic-color-text-primary-default, #333);--comp-avatar-color-interactive-initials-text-selected-hover: var(--semantic-color-text-primary-default, #333);--comp-avatar-color-interactive-initials-text-selected-pressed: var(--semantic-color-text-primary-default, #333);--comp-avatar-color-interactive-initials-text-unselected-default: var(--semantic-color-text-primary-default, #333);--comp-avatar-color-interactive-initials-text-unselected-disabled: var(--semantic-color-text-primary-default, #333);--comp-avatar-color-interactive-initials-text-unselected-hover: var(--semantic-color-text-primary-default, #333);--comp-avatar-color-interactive-initials-text-unselected-pressed: var(--semantic-color-text-primary-default, #333);--comp-avatar-color-static-background: var(--brand-hsbc-color-complementaryGrey-grey1, #f3f3f3);--comp-avatar-color-static-border: var(--semantic-color-border-container-static, #d7d8d6);--comp-avatar-color-static-icon: var(--semantic-color-icon-primary-default, #333);--comp-avatar-color-static-initials-text: var(--semantic-color-text-primary-default, #333);--comp-avatar-cornerRadius: 62.4375rem;--comp-avatar-cornerRadius-interactive-indicator: 62.4375rem;--comp-avatar-size-s: var(--semantic-size-visual-s, 2.25rem);--comp-avatar-size-s-icon: var(--semantic-size-icon-s, 1.125rem);--comp-avatar-size-s-initials: var(--semantic-size-visual-s, 2.25rem);--comp-avatar-size-s-slot: var(--semantic-size-icon-s, 1.125rem);--comp-avatar-size-m: var(--semantic-size-visual-m, 3rem);--comp-avatar-size-m-icon: var(--semantic-size-icon-m, 1.5rem);--comp-avatar-size-m-initials: var(--semantic-size-visual-m, 3rem);--comp-avatar-size-m-slot: var(--semantic-size-icon-m, 1.5rem);--comp-avatar-size-l: var(--semantic-size-visual-l, 3.5rem);--comp-avatar-size-l-icon: var(--semantic-size-icon-m, 1.5rem);--comp-avatar-size-l-initials: var(--semantic-size-visual-l, 3.5rem);--comp-avatar-size-l-slot: var(--semantic-size-icon-m, 1.5rem);--comp-avatar-size-xl: var(--semantic-size-visual-xl, 5.25rem);--comp-avatar-size-xl-icon: var(--semantic-size-icon-l, 2.25rem);--comp-avatar-size-xl-indicator: var(--semantic-size-icon-m, 1.5rem);--comp-avatar-size-xl-indicator-icon: .875rem;--comp-avatar-size-xl-initials: var(--semantic-size-visual-xl, 5.25rem);--comp-avatar-size-xl-slot: var(--semantic-size-icon-l, 2.25rem);--comp-avatar-size-xxl: var(--semantic-size-visual-xxl, 7rem);--comp-avatar-size-xxl-icon: 3rem;--comp-avatar-size-xxl-indicator: 2rem;--comp-avatar-size-xxl-indicator-icon: var(--semantic-size-icon-s, 1.125rem);--comp-avatar-size-xxl-initials: var(--semantic-size-visual-xxl, 7rem);--comp-avatar-size-xxl-slot: 3rem;--comp-avatar-typography-s-initials: var( --semantic-typography-content-body-normal, 400 1rem/1.5rem "Univers Next for HSBC", sans-serif );--comp-avatar-typography-s-initials-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem);--comp-avatar-typography-m-initials: var( --semantic-typography-heading-contentTitle-normal, 400 1.1875rem/1.6875rem "Univers Next for HSBC", sans-serif );--comp-avatar-typography-m-initials-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem);--comp-avatar-typography-l-initials: var( --semantic-typography-heading-sectionTitle-normal, 400 1.4375rem/1.875rem "Univers Next for HSBC", sans-serif );--comp-avatar-typography-l-initials-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem);--comp-avatar-typography-xl-initials: var( --semantic-typography-heading-display-normal, 400 2.0625rem/2.5rem "Univers Next for HSBC", sans-serif );--comp-avatar-typography-xl-initials-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem);--comp-avatar-typography-xxl-initials: var(--brand-hsbc-typography-fontWeight-universNext-regular, 400) var(--brand-hsbc-typography-fontSize-s1-scale2, 2.75rem) / var(--brand-hsbc-typography-lineHeight-s1-scale2, 3.125rem) var(--brand-hsbc-typography-fontFamily-default, "Univers Next for HSBC", sans-serif);--comp-avatar-typography-xxl-initials-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem)}[data-bdl-theme=hsbc]{--comp-badge-borderWidth-dot: 0rem;--comp-badge-borderWidth-numerical: 0rem;--comp-badge-color-border: var(--semantic-color-fill-notification, #db0011);--comp-badge-color-fill: var(--semantic-color-fill-notification, #db0011);--comp-badge-color-text: var(--brand-hsbc-color-core-white, #fff);--comp-badge-cornerRadius-dot: 62.4375rem;--comp-badge-cornerRadius-numerical: 62.4375rem;--comp-badge-size-dot: .5rem;--comp-badge-size-numerical-minHeight: 1.25rem;--comp-badge-size-numerical-minWidth: 1.25rem;--comp-badge-space-numerical-paddingHorizontal: .25rem;--comp-badge-space-numerical-paddingVertical: .125rem;--comp-badge-typography-text: var( --semantic-typography-content-caption-loud, 500 .875rem/1.25rem "Univers Next for HSBC", sans-serif );--comp-badge-typography-text-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem)}[data-bdl-theme=hsbc]{--comp-balanceDisplay-color-credit-balanceDecimal-text: var(--semantic-color-fill-dataVis-gain-default, #00847f);--comp-balanceDisplay-color-credit-balanceInteger-text: var(--semantic-color-fill-dataVis-gain-default, #00847f);--comp-balanceDisplay-color-credit-creditDebitSign-text: var(--semantic-color-fill-dataVis-gain-default, #00847f);--comp-balanceDisplay-color-credit-currencyCodePrefix-text: var(--semantic-color-fill-dataVis-gain-default, #00847f);--comp-balanceDisplay-color-credit-currencyCodeSuffix-text: var(--semantic-color-fill-dataVis-gain-default, #00847f);--comp-balanceDisplay-color-credit-currencySymbolPrefix-text: var( --semantic-color-fill-dataVis-gain-default, #00847f );--comp-balanceDisplay-color-credit-currencySymbolSuffix-text: var( --semantic-color-fill-dataVis-gain-default, #00847f );--comp-balanceDisplay-color-debit-balanceDecimal-text: var(--semantic-color-fill-dataVis-loss-default, #a8000b);--comp-balanceDisplay-color-debit-balanceInteger-text: var(--semantic-color-fill-dataVis-loss-default, #a8000b);--comp-balanceDisplay-color-debit-creditDebitSign-text: var(--semantic-color-fill-dataVis-loss-default, #a8000b);--comp-balanceDisplay-color-debit-currencyCodePrefix-text: var(--semantic-color-fill-dataVis-loss-default, #a8000b);--comp-balanceDisplay-color-debit-currencyCodeSuffix-text: var(--semantic-color-fill-dataVis-loss-default, #a8000b);--comp-balanceDisplay-color-debit-currencySymbolPrefix-text: var(--semantic-color-fill-dataVis-loss-default, #a8000b);--comp-balanceDisplay-color-debit-currencySymbolSuffix-text: var(--semantic-color-fill-dataVis-loss-default, #a8000b);--comp-balanceDisplay-color-default-balanceDecimal-text: var(--semantic-color-text-primary-default, #333);--comp-balanceDisplay-color-default-balanceInteger-text: var(--semantic-color-text-primary-default, #333);--comp-balanceDisplay-color-default-creditDebitSign-text: var(--semantic-color-text-primary-default, #333);--comp-balanceDisplay-color-default-currencyCodePrefix-text: var(--semantic-color-text-secondary-default, #545454);--comp-balanceDisplay-color-default-currencyCodeSuffix-text: var(--semantic-color-text-secondary-default, #545454);--comp-balanceDisplay-color-default-currencySymbolPrefix-text: var(--semantic-color-text-secondary-default, #545454);--comp-balanceDisplay-color-default-currencySymbolSuffix-text: var(--semantic-color-text-secondary-default, #545454);--comp-balanceDisplay-space-large-gapIntegerDecimal: var(--semantic-space-general-fixed-0, 0rem);--comp-balanceDisplay-space-large-gapPrefixCodeBalance: var(--semantic-space-general-fixed-50, .25rem);--comp-balanceDisplay-space-large-gapPrefixSymbolBalance: var(--semantic-space-general-fixed-50, .25rem);--comp-balanceDisplay-space-large-gapSignBalance: var(--semantic-space-general-fixed-50, .25rem);--comp-balanceDisplay-space-large-gapSuffixCodeBalance: var(--semantic-space-general-fixed-50, .25rem);--comp-balanceDisplay-space-large-gapSuffixSymbolBalance: var(--semantic-space-general-fixed-50, .25rem);--comp-balanceDisplay-space-medium-gapIntegerDecimal: var(--semantic-space-general-fixed-0, 0rem);--comp-balanceDisplay-space-medium-gapPrefixCodeBalance: .1875rem;--comp-balanceDisplay-space-medium-gapPrefixSymbolBalance: .1875rem;--comp-balanceDisplay-space-medium-gapSignBalance: .1875rem;--comp-balanceDisplay-space-medium-gapSuffixCodeBalance: .1875rem;--comp-balanceDisplay-space-medium-gapSuffixSymbolBalance: .1875rem;--comp-balanceDisplay-space-small-gapIntegerDecimal: var(--semantic-space-general-fixed-0, 0rem);--comp-balanceDisplay-space-small-gapPrefixCodeBalance: var(--semantic-space-general-fixed-25, .125rem);--comp-balanceDisplay-space-small-gapPrefixSymbolBalance: var(--semantic-space-general-fixed-25, .125rem);--comp-balanceDisplay-space-small-gapSignBalance: var(--semantic-space-general-fixed-25, .125rem);--comp-balanceDisplay-space-small-gapSuffixCodeBalance: var(--semantic-space-general-fixed-25, .125rem);--comp-balanceDisplay-space-small-gapSuffixSymbolBalance: var(--semantic-space-general-fixed-25, .125rem);--comp-balanceDisplay-typography-small-creditDebitSign: var(--brand-hsbc-typography-fontWeight-universNext-bold, 700) var(--brand-hsbc-typography-fontSize-s5, 1rem) / var(--brand-hsbc-typography-lineHeight-s5, 1.5rem) var(--brand-hsbc-typography-fontFamily-default, "Univers Next for HSBC", sans-serif);--comp-balanceDisplay-typography-small-creditDebitSign-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-balanceDisplay-typography-small-currencySymbolPrefix: var( --semantic-typography-content-footnote-loud, 500 .75rem/1rem "Univers Next for HSBC", sans-serif );--comp-balanceDisplay-typography-small-currencySymbolPrefix-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-balanceDisplay-typography-small-currencySymbolSuffix: var( --semantic-typography-content-footnote-loud, 500 .75rem/1rem "Univers Next for HSBC", sans-serif );--comp-balanceDisplay-typography-small-currencySymbolSuffix-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-balanceDisplay-typography-small-currencyCodePrefix: var( --semantic-typography-content-footnote-normal, 400 .75rem/1rem "Univers Next for HSBC", sans-serif );--comp-balanceDisplay-typography-small-currencyCodePrefix-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-balanceDisplay-typography-small-currencyCodeSuffix: var( --semantic-typography-content-footnote-normal, 400 .75rem/1rem "Univers Next for HSBC", sans-serif );--comp-balanceDisplay-typography-small-currencyCodeSuffix-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-balanceDisplay-typography-small-balanceInteger: var(--brand-hsbc-typography-fontWeight-universNext-bold, 700) var(--brand-hsbc-typography-fontSize-s5, 1rem) / var(--brand-hsbc-typography-lineHeight-s5, 1.5rem) var(--brand-hsbc-typography-fontFamily-default, "Univers Next for HSBC", sans-serif);--comp-balanceDisplay-typography-small-balanceInteger-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-balanceDisplay-typography-small-balanceDecimal: var( --semantic-typography-content-footnote-loud, 500 .75rem/1rem "Univers Next for HSBC", sans-serif );--comp-balanceDisplay-typography-small-balanceDecimal-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-balanceDisplay-typography-medium-creditDebitSign: var(--brand-hsbc-typography-fontWeight-universNext-bold, 700) var(--brand-hsbc-typography-fontSize-s4-scale1, 1.1875rem) / var(--brand-hsbc-typography-lineHeight-s4-scale1, 1.6875rem) var(--brand-hsbc-typography-fontFamily-default, "Univers Next for HSBC", sans-serif);--comp-balanceDisplay-typography-medium-creditDebitSign-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-balanceDisplay-typography-medium-currencySymbolPrefix: var( --semantic-typography-content-body-loud, 500 1rem/1.5rem "Univers Next for HSBC", sans-serif );--comp-balanceDisplay-typography-medium-currencySymbolPrefix-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-balanceDisplay-typography-medium-currencySymbolSuffix: var( --semantic-typography-content-body-loud, 500 1rem/1.5rem "Univers Next for HSBC", sans-serif );--comp-balanceDisplay-typography-medium-currencySymbolSuffix-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-balanceDisplay-typography-medium-currencyCodePrefix: var( --semantic-typography-content-body-normal, 400 1rem/1.5rem "Univers Next for HSBC", sans-serif );--comp-balanceDisplay-typography-medium-currencyCodePrefix-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-balanceDisplay-typography-medium-currencyCodeSuffix: var( --semantic-typography-content-body-normal, 400 1rem/1.5rem "Univers Next for HSBC", sans-serif );--comp-balanceDisplay-typography-medium-currencyCodeSuffix-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-balanceDisplay-typography-medium-balanceInteger: var(--brand-hsbc-typography-fontWeight-universNext-bold, 700) var(--brand-hsbc-typography-fontSize-s4-scale1, 1.1875rem) / var(--brand-hsbc-typography-lineHeight-s4-scale1, 1.6875rem) var(--brand-hsbc-typography-fontFamily-default, "Univers Next for HSBC", sans-serif);--comp-balanceDisplay-typography-medium-balanceInteger-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-balanceDisplay-typography-medium-balanceDecimal: var( --semantic-typography-content-body-loud, 500 1rem/1.5rem "Univers Next for HSBC", sans-serif );--comp-balanceDisplay-typography-medium-balanceDecimal-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-balanceDisplay-typography-large-creditDebitSign: var(--brand-hsbc-typography-fontWeight-universNext-bold, 700) var(--brand-hsbc-typography-fontSize-s2-scale1, 1.75rem) / var(--brand-hsbc-typography-lineHeight-s2-scale1, 2.25rem) var(--brand-hsbc-typography-fontFamily-default, "Univers Next for HSBC", sans-serif);--comp-balanceDisplay-typography-large-creditDebitSign-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-balanceDisplay-typography-large-currencySymbolPrefix: var( --semantic-typography-heading-contentTitle-loud, 500 1.1875rem/1.6875rem "Univers Next for HSBC", sans-serif );--comp-balanceDisplay-typography-large-currencySymbolPrefix-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-balanceDisplay-typography-large-currencySymbolSuffix: var( --semantic-typography-heading-contentTitle-loud, 500 1.1875rem/1.6875rem "Univers Next for HSBC", sans-serif );--comp-balanceDisplay-typography-large-currencySymbolSuffix-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-balanceDisplay-typography-large-currencyCodePrefix: var( --semantic-typography-heading-contentTitle-normal, 400 1.1875rem/1.6875rem "Univers Next for HSBC", sans-serif );--comp-balanceDisplay-typography-large-currencyCodePrefix-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-balanceDisplay-typography-large-currencyCodeSuffix: var( --semantic-typography-heading-contentTitle-normal, 400 1.1875rem/1.6875rem "Univers Next for HSBC", sans-serif );--comp-balanceDisplay-typography-large-currencyCodeSuffix-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-balanceDisplay-typography-large-balanceInteger: var(--brand-hsbc-typography-fontWeight-universNext-bold, 700) var(--brand-hsbc-typography-fontSize-s2-scale1, 1.75rem) / var(--brand-hsbc-typography-lineHeight-s2-scale1, 2.25rem) var(--brand-hsbc-typography-fontFamily-default, "Univers Next for HSBC", sans-serif);--comp-balanceDisplay-typography-large-balanceInteger-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-balanceDisplay-typography-large-balanceDecimal: var( --semantic-typography-heading-contentTitle-loud, 500 1.1875rem/1.6875rem "Univers Next for HSBC", sans-serif );--comp-balanceDisplay-typography-large-balanceDecimal-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem )}[data-bdl-theme=hsbc]{--comp-banner-borderWidth-contextual: .0625rem;--comp-banner-borderWidth-global: 0rem;--comp-banner-color-contextual-error-action-text-default: var(--semantic-color-text-actionable-default, #000);--comp-banner-color-contextual-error-action-text-hover: var(--semantic-color-text-actionable-hover, #767676);--comp-banner-color-contextual-error-action-text-pressed: var(--semantic-color-text-actionable-pressed, #767676);--comp-banner-color-contextual-error-background: var(--semantic-color-background-container-error-quiet, #f9f2f3);--comp-banner-color-contextual-error-border: var(--semantic-color-border-container-error, #a8000b);--comp-banner-color-contextual-error-close-icon-default: var(--semantic-color-icon-actionable-default, #000);--comp-banner-color-contextual-error-close-icon-hover: var(--semantic-color-icon-actionable-hover, #767676);--comp-banner-color-contextual-error-close-icon-pressed: var(--semantic-color-icon-actionable-pressed, #767676);--comp-banner-color-contextual-error-header-text: var(--semantic-color-text-primary-default, #333);--comp-banner-color-contextual-error-message-text: var(--semantic-color-text-primary-default, #333);--comp-banner-color-contextual-information-action-text-default: var(--semantic-color-text-actionable-default, #000);--comp-banner-color-contextual-information-action-text-hover: var(--semantic-color-text-actionable-hover, #767676);--comp-banner-color-contextual-information-action-text-pressed: var( --semantic-color-text-actionable-pressed, #767676 );--comp-banner-color-contextual-information-background: var( --semantic-color-background-container-information-quiet, #ebeff4 );--comp-banner-color-contextual-information-border: var(--semantic-color-border-container-information, #305a85);--comp-banner-color-contextual-information-close-icon-default: var(--semantic-color-icon-actionable-default, #000);--comp-banner-color-contextual-information-close-icon-hover: var(--semantic-color-icon-actionable-hover, #767676);--comp-banner-color-contextual-information-close-icon-pressed: var(--semantic-color-icon-actionable-pressed, #767676);--comp-banner-color-contextual-information-header-text: var(--semantic-color-text-primary-default, #333);--comp-banner-color-contextual-information-message-text: var(--semantic-color-text-primary-default, #333);--comp-banner-color-contextual-success-action-text-default: var(--semantic-color-text-actionable-default, #000);--comp-banner-color-contextual-success-action-text-hover: var(--semantic-color-text-actionable-hover, #767676);--comp-banner-color-contextual-success-action-text-pressed: var(--semantic-color-text-actionable-pressed, #767676);--comp-banner-color-contextual-success-background: var(--semantic-color-background-container-success-quiet, #e5f2f2);--comp-banner-color-contextual-success-border: var(--semantic-color-border-container-success, #00847f);--comp-banner-color-contextual-success-close-icon-default: var(--semantic-color-icon-actionable-default, #000);--comp-banner-color-contextual-success-close-icon-hover: var(--semantic-color-icon-actionable-hover, #767676);--comp-banner-color-contextual-success-close-icon-pressed: var(--semantic-color-icon-actionable-pressed, #767676);--comp-banner-color-contextual-success-header-text: var(--semantic-color-text-primary-default, #333);--comp-banner-color-contextual-success-message-text: var(--semantic-color-text-primary-default, #333);--comp-banner-color-contextual-warning-action-text-default: var(--semantic-color-text-actionable-default, #000);--comp-banner-color-contextual-warning-action-text-hover: var(--semantic-color-text-actionable-hover, #767676);--comp-banner-color-contextual-warning-action-text-pressed: var(--semantic-color-text-actionable-pressed, #767676);--comp-banner-color-contextual-warning-background: var(--semantic-color-background-container-warning-quiet, #fff8ea);--comp-banner-color-contextual-warning-border: var(--semantic-color-border-container-warning, #fb3);--comp-banner-color-contextual-warning-close-icon-default: var(--semantic-color-icon-actionable-default, #000);--comp-banner-color-contextual-warning-close-icon-hover: var(--semantic-color-icon-actionable-hover, #767676);--comp-banner-color-contextual-warning-close-icon-pressed: var(--semantic-color-icon-actionable-pressed, #767676);--comp-banner-color-contextual-warning-header-text: var(--semantic-color-text-primary-default, #333);--comp-banner-color-contextual-warning-message-text: var(--semantic-color-text-primary-default, #333);--comp-banner-color-global-error-action-text-default: var(--brand-hsbc-color-core-white, #fff);--comp-banner-color-global-error-action-text-hover: var(--brand-hsbc-color-complementaryGrey-grey1, #f3f3f3);--comp-banner-color-global-error-action-text-pressed: var(--brand-hsbc-color-complementaryGrey-grey2, #ededed);--comp-banner-color-global-error-background: var(--semantic-color-background-container-error-loud, #a8000b);--comp-banner-color-global-error-border: var(--semantic-color-border-container-error, #a8000b);--comp-banner-color-global-error-close-icon-default: var(--brand-hsbc-color-core-white, #fff);--comp-banner-color-global-error-close-icon-hover: var(--brand-hsbc-color-complementaryGrey-grey1, #f3f3f3);--comp-banner-color-global-error-close-icon-pressed: var(--brand-hsbc-color-complementaryGrey-grey2, #ededed);--comp-banner-color-global-error-header-text: var(--brand-hsbc-color-core-white, #fff);--comp-banner-color-global-error-message-text: var(--brand-hsbc-color-core-white, #fff);--comp-banner-color-global-information-action-text-default: var(--brand-hsbc-color-core-white, #fff);--comp-banner-color-global-information-action-text-hover: var(--brand-hsbc-color-complementaryGrey-grey1, #f3f3f3);--comp-banner-color-global-information-action-text-pressed: var(--brand-hsbc-color-complementaryGrey-grey2, #ededed);--comp-banner-color-global-information-background: var( --semantic-color-background-container-information-loud, #305a85 );--comp-banner-color-global-information-border: var(--semantic-color-border-container-information, #305a85);--comp-banner-color-global-information-close-icon-default: var(--brand-hsbc-color-core-white, #fff);--comp-banner-color-global-information-close-icon-hover: var(--brand-hsbc-color-complementaryGrey-grey1, #f3f3f3);--comp-banner-color-global-information-close-icon-pressed: var(--brand-hsbc-color-complementaryGrey-grey2, #ededed);--comp-banner-color-global-information-header-text: var(--brand-hsbc-color-core-white, #fff);--comp-banner-color-global-information-message-text: var(--brand-hsbc-color-core-white, #fff);--comp-banner-color-global-warning-action-text-default: var(--semantic-color-text-actionable-default, #000);--comp-banner-color-global-warning-action-text-hover: var(--semantic-color-text-actionable-hover, #767676);--comp-banner-color-global-warning-action-text-pressed: var(--semantic-color-text-actionable-pressed, #767676);--comp-banner-color-global-warning-background: var(--semantic-color-background-container-warning-loud, #fb3);--comp-banner-color-global-warning-border: var(--semantic-color-border-container-warning, #fb3);--comp-banner-color-global-warning-close-icon-default: var(--semantic-color-icon-actionable-default, #000);--comp-banner-color-global-warning-close-icon-hover: var(--semantic-color-icon-actionable-hover, #767676);--comp-banner-color-global-warning-close-icon-pressed: var(--semantic-color-icon-actionable-pressed, #767676);--comp-banner-color-global-warning-header-text: var(--semantic-color-text-primary-default, #333);--comp-banner-color-global-warning-message-text: var(--semantic-color-text-primary-default, #333);--comp-banner-cornerRadius-contextual: 0rem;--comp-banner-cornerRadius-global: 0rem;--comp-banner-iconStyle-contextual-error: var(--brand-hsbc-number-iconStyle-onLight, onLight);--comp-banner-iconStyle-contextual-information: var(--brand-hsbc-number-iconStyle-onLight, onLight);--comp-banner-iconStyle-contextual-success: var(--brand-hsbc-number-iconStyle-onLight, onLight);--comp-banner-iconStyle-contextual-warning: var(--brand-hsbc-number-iconStyle-onLight, onLight);--comp-banner-iconStyle-global-error: var(--brand-hsbc-number-iconStyle-onRAG, onRAG);--comp-banner-iconStyle-global-information: var(--brand-hsbc-number-iconStyle-onRAG, onRAG);--comp-banner-iconStyle-global-warning: var(--brand-hsbc-number-iconStyle-onRAG, onRAG);--comp-banner-size-contextual-close-icon: var(--semantic-size-icon-s, 1.125rem);--comp-banner-size-contextual-visual-icon: var(--semantic-size-icon-s, 1.125rem);--comp-banner-size-global-close-icon: var(--semantic-size-icon-s, 1.125rem);--comp-banner-size-global-visual-icon: var(--semantic-size-icon-s, 1.125rem);--comp-banner-space-contextual-actionGroup-gapHorizontal: var(--semantic-space-item-gap-normal, 1rem);--comp-banner-space-contextual-actionGroup-gapVertical: var(--semantic-space-item-gap-tight, .5rem);--comp-banner-space-contextual-gapHeaderMessage: var(--semantic-space-general-responsive-50, .25rem);--comp-banner-space-contextual-gapIconMessage: var(--semantic-space-item-gap-tight, .5rem);--comp-banner-space-contextual-gapMessageAction: var(--semantic-space-general-responsive-150, .75rem);--comp-banner-space-contextual-gapMessageClose: var(--semantic-space-item-gap-tight, .5rem);--comp-banner-space-contextual-paddingHorizontal: var(--semantic-space-container-padding-normal, 1rem);--comp-banner-space-contextual-paddingVertical: var(--semantic-space-container-padding-tight, .75rem);--comp-banner-space-global-actionGroup-gapHorizontal: var(--semantic-space-item-gap-normal, 1rem);--comp-banner-space-global-actionGroup-gapVertical: var(--semantic-space-item-gap-tight, .5rem);--comp-banner-space-global-gapHeaderMessage: var(--semantic-space-general-responsive-50, .25rem);--comp-banner-space-global-gapIconMessage: var(--semantic-space-item-gap-tight, .5rem);--comp-banner-space-global-gapMessageAction: var(--semantic-space-general-responsive-150, .75rem);--comp-banner-space-global-gapMessageClose: var(--semantic-space-item-gap-tight, .5rem);--comp-banner-space-global-paddingHorizontal: var(--semantic-space-container-padding-normal, 1rem);--comp-banner-space-global-paddingVertical: var(--semantic-space-container-padding-tight, .75rem);--comp-banner-typography-header: var( --semantic-typography-content-caption-loud, 500 .875rem/1.25rem "Univers Next for HSBC", sans-serif );--comp-banner-typography-header-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem);--comp-banner-typography-message: var( --semantic-typography-content-caption-normal, 400 .875rem/1.25rem "Univers Next for HSBC", sans-serif );--comp-banner-typography-message-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem);--comp-banner-typography-action-default: var( --semantic-typography-content-caption-loud, 500 .875rem/1.25rem "Univers Next for HSBC", sans-serif );--comp-banner-typography-action-default-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem);--comp-banner-typography-action-hover: var( --semantic-typography-content-caption-loud, 500 .875rem/1.25rem "Univers Next for HSBC", sans-serif );--comp-banner-typography-action-hover-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem);--comp-banner-typography-action-pressed: var( --semantic-typography-content-caption-loud, 500 .875rem/1.25rem "Univers Next for HSBC", sans-serif );--comp-banner-typography-action-pressed-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem)}[data-bdl-theme=hsbc]{--comp-button-borderWidth-primary: 0rem;--comp-button-borderWidth-primaryAlternative: 0rem;--comp-button-borderWidth-secondary: .0625rem;--comp-button-borderWidth-tertiary: 0rem;--comp-button-color-primary-background-default: var( --semantic-color-fill-primary-default, #db0011 );--comp-button-color-primary-background-disabled: var( --semantic-color-fill-primary-disabled, #d7d8d6 );--comp-button-color-primary-background-hover: var( --semantic-color-fill-primary-hover, #ba1110 );--comp-button-color-primary-background-loading: var( --semantic-color-fill-primary-default, #db0011 );--comp-button-color-primary-background-pressed: var( --semantic-color-fill-primary-pressed, #730014 );--comp-button-color-primary-background-success: var( --semantic-color-fill-success, #00847f );--comp-button-color-primary-border-default: var( --semantic-color-fill-primary-default, #db0011 );--comp-button-color-primary-border-disabled: var( --semantic-color-fill-primary-disabled, #d7d8d6 );--comp-button-color-primary-border-hover: var( --semantic-color-fill-primary-hover, #ba1110 );--comp-button-color-primary-border-loading: var( --semantic-color-fill-primary-default, #db0011 );--comp-button-color-primary-border-pressed: var( --semantic-color-fill-primary-pressed, #730014 );--comp-button-color-primary-border-success: var( --semantic-color-fill-success, #00847f );--comp-button-color-primary-icon-default: var( --brand-hsbc-color-core-white, #fff );--comp-button-color-primary-icon-disabled: var( --brand-hsbc-color-core-white, #fff );--comp-button-color-primary-icon-hover: var( --brand-hsbc-color-core-white, #fff );--comp-button-color-primary-icon-pressed: var( --brand-hsbc-color-core-white, #fff );--comp-button-color-primary-icon-success: var( --brand-hsbc-color-core-white, #fff );--comp-button-color-primary-spinner: var(--brand-hsbc-color-core-white, #fff);--comp-button-color-primary-text-default: var( --brand-hsbc-color-core-white, #fff );--comp-button-color-primary-text-disabled: var( --brand-hsbc-color-core-white, #fff );--comp-button-color-primary-text-hover: var( --brand-hsbc-color-core-white, #fff );--comp-button-color-primary-text-loading: var( --brand-hsbc-color-core-white, #fff );--comp-button-color-primary-text-pressed: var( --brand-hsbc-color-core-white, #fff );--comp-button-color-primary-text-success: var( --brand-hsbc-color-core-white, #fff );--comp-button-color-primaryAlternative-background-default: var( --brand-hsbcDark-color-core-black, #000 );--comp-button-color-primaryAlternative-background-disabled: var( --brand-hsbc-color-complementaryGrey-grey8, #333333 );--comp-button-color-primaryAlternative-background-hover: var( --brand-hsbc-color-complementaryGrey-grey8, #333333 );--comp-button-color-primaryAlternative-background-loading: var( --brand-hsbcDark-color-core-black, #000 );--comp-button-color-primaryAlternative-background-pressed: var( --brand-hsbcDark-color-complementaryGrey-grey6, #767676 );--comp-button-color-primaryAlternative-background-success: var( --semantic-color-fill-success, #00847f );--comp-button-color-primaryAlternative-border-default: var( --brand-hsbcDark-color-core-black, #000 );--comp-button-color-primaryAlternative-border-disabled: var( --semantic-color-fill-primary-disabled, #d7d8d6 );--comp-button-color-primaryAlternative-border-hover: var( --brand-hsbc-color-complementaryGrey-grey8, #333 );--comp-button-color-primaryAlternative-border-loading: var( --brand-hsbcDark-color-core-black, #000 );--comp-button-color-primaryAlternative-border-pressed: var( --brand-hsbcDark-color-complementaryGrey-grey6, #767676 );--comp-button-color-primaryAlternative-border-success: var( --semantic-color-fill-success, #00847f );--comp-button-color-primaryAlternative-icon-default: var( --brand-hsbcDark-color-core-white, #fff );--comp-button-color-primaryAlternative-icon-disabled: var( --brand-hsbcDark-color-complementaryGrey-grey6, #767676 );--comp-button-color-primaryAlternative-icon-hover: var( --brand-hsbcDark-color-core-white, #fff );--comp-button-color-primaryAlternative-icon-pressed: var( --brand-hsbcDark-color-core-white, #fff );--comp-button-color-primaryAlternative-icon-success: var( --brand-hsbcDark-color-core-white, #fff );--comp-button-color-primaryAlternative-spinner: var( --brand-hsbcDark-color-core-white, #fff );--comp-button-color-primaryAlternative-text-default: var( --brand-hsbcDark-color-core-white, #fff );--comp-button-color-primaryAlternative-text-disabled: var( --brand-hsbcDark-color-complementaryGrey-grey6, #767676 );--comp-button-color-primaryAlternative-text-hover: var( --brand-hsbcDark-color-core-white, #fff );--comp-button-color-primaryAlternative-text-loading: var( --brand-hsbcDark-color-core-white, #fff );--comp-button-color-primaryAlternative-text-pressed: var( --brand-hsbcDark-color-core-white, #fff );--comp-button-color-primaryAlternative-text-success: var( --brand-hsbcDark-color-core-white, #fff );--comp-button-color-secondary-background-default: var( --brand-hsbc-color-transparent-white, #fff0 );--comp-button-color-secondary-background-disabled: var( --brand-hsbc-color-transparent-white, #fff0 );--comp-button-color-secondary-background-hover: var( --brand-hsbc-color-complementaryGrey-grey1, #f3f3f3 );--comp-button-color-secondary-background-loading: var( --brand-hsbc-color-transparent-white, #fff0 );--comp-button-color-secondary-background-pressed: var( --brand-hsbc-color-complementaryGrey-grey2, #ededed );--comp-button-color-secondary-background-success: var( --brand-hsbc-color-transparent-white, #fff0 );--comp-button-color-secondary-border-default: var( --brand-hsbc-color-complementaryGrey-grey8, #333 );--comp-button-color-secondary-border-disabled: var( --semantic-color-border-container-interactive-disabled, #d7d8d6 );--comp-button-color-secondary-border-hover: var( --brand-hsbc-color-complementaryGrey-grey8, #333 );--comp-button-color-secondary-border-loading: var( --brand-hsbc-color-complementaryGrey-grey8, #333 );--comp-button-color-secondary-border-pressed: var( --brand-hsbc-color-complementaryGrey-grey8, #333 );--comp-button-color-secondary-border-success: var( --brand-hsbc-color-complementaryGrey-grey8, #333 );--comp-button-color-secondary-icon-default: var( --semantic-color-icon-primary-default, #333 );--comp-button-color-secondary-icon-disabled: var( --semantic-color-icon-primary-disabled, #d7d8d6 );--comp-button-color-secondary-icon-hover: var( --semantic-color-icon-primary-hover, #333 );--comp-button-color-secondary-icon-pressed: var( --semantic-color-icon-primary-pressed, #333 );--comp-button-color-secondary-icon-success: var( --semantic-color-fill-success, #00847f );--comp-button-color-secondary-spinner: var( --brand-hsbc-color-core-black, #000 );--comp-button-color-secondary-text-default: var( --semantic-color-text-primary-default, #333 );--comp-button-color-secondary-text-disabled: var( --semantic-color-fill-primary-disabled, #d7d8d6 );--comp-button-color-secondary-text-hover: var( --semantic-color-text-primary-hover, #333 );--comp-button-color-secondary-text-loading: var( --semantic-color-text-primary-default, #333 );--comp-button-color-secondary-text-pressed: var( --semantic-color-text-primary-pressed, #333 );--comp-button-color-secondary-text-success: var( --semantic-color-text-primary-default, #333 );--comp-button-color-tertiary-background-default: var( --brand-hsbc-color-transparent-white, #fff0 );--comp-button-color-tertiary-background-disabled: var( --brand-hsbc-color-transparent-white, #fff0 );--comp-button-color-tertiary-background-hover: var( --brand-hsbc-color-complementaryGrey-grey1, #f3f3f3 );--comp-button-color-tertiary-background-loading: var( --brand-hsbc-color-transparent-white, #fff0 );--comp-button-color-tertiary-background-pressed: var( --brand-hsbc-color-complementaryGrey-grey2, #ededed );--comp-button-color-tertiary-background-success: var( --brand-hsbc-color-transparent-white, #fff0 );--comp-button-color-tertiary-border-default: var( --brand-hsbc-color-transparent-white, #fff0 );--comp-button-color-tertiary-border-disabled: var( --brand-hsbc-color-transparent-white, #fff0 );--comp-button-color-tertiary-border-hover: var( --brand-hsbc-color-transparent-white, #fff0 );--comp-button-color-tertiary-border-loading: var( --brand-hsbc-color-transparent-white, #fff0 );--comp-button-color-tertiary-border-pressed: var( --brand-hsbc-color-transparent-white, #fff0 );--comp-button-color-tertiary-border-success: var( --brand-hsbc-color-transparent-white, #fff0 );--comp-button-color-tertiary-icon-default: var( --semantic-color-icon-primary-default, #333 );--comp-button-color-tertiary-icon-disabled: var( --semantic-color-icon-primary-disabled, #d7d8d6 );--comp-button-color-tertiary-icon-hover: var( --semantic-color-icon-primary-hover, #333 );--comp-button-color-tertiary-icon-pressed: var( --semantic-color-icon-primary-pressed, #333 );--comp-button-color-tertiary-icon-success: var( --semantic-color-fill-success, #00847f );--comp-button-color-tertiary-spinner: var( --brand-hsbc-color-core-black, #000 );--comp-button-color-tertiary-text-default: var( --semantic-color-text-primary-default, #333 );--comp-button-color-tertiary-text-disabled: var( --semantic-color-text-primary-disabled, #d7d8d6 );--comp-button-color-tertiary-text-hover: var( --semantic-color-text-primary-hover, #333 );--comp-button-color-tertiary-text-loading: var( --semantic-color-text-primary-default, #333 );--comp-button-color-tertiary-text-pressed: var( --semantic-color-text-primary-pressed, #333 );--comp-button-color-tertiary-text-success: var( --semantic-color-text-primary-default, #333 );--comp-button-cornerRadius: 0rem;--comp-button-size-icon: var(--semantic-size-icon-s, 1.125rem);--comp-button-size-spinner: var(--semantic-size-icon-s, 1.125rem);--comp-button-space-iconOnly-paddingHorizontal: .9375rem;--comp-button-space-iconOnly-paddingVertical: .9375rem;--comp-button-space-standard-gapIconLabel: var( --semantic-space-general-fixed-100, .5rem );--comp-button-space-standard-paddingHorizontal: var( --semantic-space-general-fixed-200, 1rem );--comp-button-space-standard-paddingVertical: var( --semantic-space-general-fixed-150, .75rem );--comp-button-typography-primary-default: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-button-typography-primary-default-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-button-typography-primary-disabled: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-button-typography-primary-disabled-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-button-typography-primary-hover: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-button-typography-primary-hover-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-button-typography-primary-loading: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-button-typography-primary-loading-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-button-typography-primary-pressed: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-button-typography-primary-pressed-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-button-typography-primary-success: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-button-typography-primary-success-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-button-typography-primaryAlternative-default: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-button-typography-primaryAlternative-default-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-button-typography-primaryAlternative-disabled: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-button-typography-primaryAlternative-disabled-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-button-typography-primaryAlternative-hover: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-button-typography-primaryAlternative-hover-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-button-typography-primaryAlternative-loading: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-button-typography-primaryAlternative-loading-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-button-typography-primaryAlternative-pressed: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-button-typography-primaryAlternative-pressed-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-button-typography-primaryAlternative-success: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-button-typography-primaryAlternative-success-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-button-typography-secondary-default: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-button-typography-secondary-default-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-button-typography-secondary-disabled: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-button-typography-secondary-disabled-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-button-typography-secondary-hover: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-button-typography-secondary-hover-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-button-typography-secondary-loading: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-button-typography-secondary-loading-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-button-typography-secondary-pressed: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-button-typography-secondary-pressed-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-button-typography-secondary-success: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-button-typography-secondary-success-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-button-typography-tertiary-default: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-button-typography-tertiary-default-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-button-typography-tertiary-disabled: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-button-typography-tertiary-disabled-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-button-typography-tertiary-hover: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-button-typography-tertiary-hover-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-button-typography-tertiary-loading: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-button-typography-tertiary-loading-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-button-typography-tertiary-pressed: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-button-typography-tertiary-pressed-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-button-typography-tertiary-success: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-button-typography-tertiary-success-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem )}[data-bdl-theme=hsbc]{--comp-carouselControls-borderWidth-pip-active: 0rem;--comp-carouselControls-borderWidth-pip-inactive: .0625rem;--comp-carouselControls-color-pip-border-active-onDark: var(--brand-hsbc-color-core-white, #fff);--comp-carouselControls-color-pip-border-active-onLight: var( --semantic-color-border-container-selected-default, #000 );--comp-carouselControls-color-pip-border-inactive-onDark: var(--brand-hsbc-color-core-white, #fff);--comp-carouselControls-color-pip-border-inactive-onLight: var( --semantic-color-border-container-selected-default, #000 );--comp-carouselControls-color-pip-fill-active-onDark: var(--brand-hsbc-color-core-white, #fff);--comp-carouselControls-color-pip-fill-active-onLight: var(--semantic-color-fill-selected-default, #000);--comp-carouselControls-color-pip-fill-inactive-onDark: var(--brand-hsbc-color-transparent-white, #fff0);--comp-carouselControls-color-pip-fill-inactive-onLight: var(--brand-hsbc-color-transparent-white, #fff0);--comp-carouselControls-cornerRadius-pip-active: 62.4375rem;--comp-carouselControls-cornerRadius-pip-inactive: 62.4375rem;--comp-carouselControls-size-chevron-icon: var(--semantic-size-icon-s, 1.125rem);--comp-carouselControls-size-pip-height-active: .375rem;--comp-carouselControls-size-pip-height-inactive: .375rem;--comp-carouselControls-size-pip-width-active: .375rem;--comp-carouselControls-size-pip-width-inactive: .375rem;--comp-carouselControls-space-pip-gapHorizontal: var(--semantic-space-item-gap-tight, .5rem)}[data-bdl-theme=hsbc]{--comp-categoryLink-borderWidth: .0625rem;--comp-categoryLink-color-background-default: var(--semantic-color-background-container-interactive-default, #fff);--comp-categoryLink-color-background-disabled: var(--semantic-color-background-container-interactive-disabled, #fff);--comp-categoryLink-color-background-hover: var(--semantic-color-background-container-interactive-hover, #f3f3f3);--comp-categoryLink-color-background-pressed: var(--semantic-color-background-container-interactive-pressed, #ededed);--comp-categoryLink-color-border-default: var(--semantic-color-border-container-static, #d7d8d6);--comp-categoryLink-color-border-disabled: var(--semantic-color-border-container-static, #d7d8d6);--comp-categoryLink-color-border-hover: var(--semantic-color-border-container-static, #d7d8d6);--comp-categoryLink-color-border-pressed: var(--semantic-color-border-container-static, #d7d8d6);--comp-categoryLink-color-icon-default: var(--semantic-color-icon-primary-default, #333);--comp-categoryLink-color-icon-disabled: var(--semantic-color-icon-primary-disabled, #d7d8d6);--comp-categoryLink-color-icon-hover: var(--semantic-color-icon-primary-hover, #333);--comp-categoryLink-color-icon-pressed: var(--semantic-color-icon-primary-pressed, #333);--comp-categoryLink-color-indicator-default: var(--semantic-color-fill-primary-default, #db0011);--comp-categoryLink-color-indicator-disabled: var(--semantic-color-fill-primary-disabled, #d7d8d6);--comp-categoryLink-color-indicator-hover: var(--semantic-color-fill-primary-default, #db0011);--comp-categoryLink-color-indicator-pressed: var(--semantic-color-fill-primary-default, #db0011);--comp-categoryLink-color-label-default: var(--semantic-color-text-actionable-default, #000);--comp-categoryLink-color-label-disabled: var(--semantic-color-text-actionable-disabled, #d7d8d6);--comp-categoryLink-color-label-hover: var(--semantic-color-text-actionable-default, #000);--comp-categoryLink-color-label-pressed: var(--semantic-color-text-actionable-default, #000);--comp-categoryLink-cornerRadius: var(--semantic-cornerRadius-container-normal, 0rem);--comp-categoryLink-size-icon: var(--semantic-size-icon-s, 1.125rem);--comp-categoryLink-size-indicator: var(--semantic-size-icon-xs, 1rem);--comp-categoryLink-space-gapIconLabel: var(--semantic-space-item-gap-tight, .5rem);--comp-categoryLink-space-gapLabelIndicator: var(--semantic-space-general-responsive-0, 0rem);--comp-categoryLink-space-paddingHorizontal: var(--semantic-space-container-padding-tight, .75rem);--comp-categoryLink-space-paddingVertical: var(--semantic-space-container-padding-normal, 1rem);--comp-categoryLink-typography-label: var( --semantic-typography-content-footnote-loud, 500 .75rem/1rem "Univers Next for HSBC", sans-serif );--comp-categoryLink-typography-label-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem)}[data-bdl-theme=hsbc]{--comp-chatBubble-borderWidth-customerInput: .0625rem;--comp-chatBubble-borderWidth-receive: 0rem;--comp-chatBubble-borderWidth-send: 0rem;--comp-chatBubble-color-background-customerInput: var( --semantic-color-background-container-interactive-default, #fff );--comp-chatBubble-color-background-receive: var(--brand-hsbc-color-core-white, #fff);--comp-chatBubble-color-background-send: var(--brand-hsbc-color-core-black, #000);--comp-chatBubble-color-border-customerInput: var(--semantic-color-border-container-interactive-default, #767676);--comp-chatBubble-color-border-receive: var(--brand-hsbc-color-core-white, #fff);--comp-chatBubble-color-border-send: var(--brand-hsbc-color-core-black, #000);--comp-chatBubble-color-text-receive: var(--brand-hsbc-color-complementaryGrey-grey8, #333);--comp-chatBubble-color-text-send: var(--brand-hsbc-color-core-white, #fff);--comp-chatBubble-conerRadius-default: .75rem;--comp-chatBubble-conerRadius-tail: 0rem;--comp-chatBubble-cornerRadius-default: .75rem;--comp-chatBubble-cornerRadius-tail: 0rem;--comp-chatBubble-space-paddingHorizontal: var(--semantic-space-container-padding-normal, 1rem);--comp-chatBubble-space-paddingVertical: var(--semantic-space-container-padding-tight, .75rem)}[data-bdl-theme=hsbc]{--comp-checkbox-borderWidth-indeterminate-error: .0625rem;--comp-checkbox-borderWidth-indeterminate-normal: .0625rem;--comp-checkbox-borderWidth-selected-error: .0625rem;--comp-checkbox-borderWidth-selected-normal: .0625rem;--comp-checkbox-borderWidth-unselected-error: .0625rem;--comp-checkbox-borderWidth-unselected-normal: .0625rem;--comp-checkbox-color-indeterminate-background-error-default: var( --semantic-color-background-container-error-quiet, #f9f2f3 );--comp-checkbox-color-indeterminate-background-error-hover: var( --semantic-color-background-container-error-quiet, #f9f2f3 );--comp-checkbox-color-indeterminate-background-error-pressed: var( --semantic-color-background-container-error-quiet, #f9f2f3 );--comp-checkbox-color-indeterminate-background-normal-default: var( --semantic-color-background-container-selected-default );--comp-checkbox-color-indeterminate-background-normal-disabled: var( --semantic-color-background-container-selected-disabled );--comp-checkbox-color-indeterminate-background-normal-hover: var( --semantic-color-background-container-selected-hover );--comp-checkbox-color-indeterminate-background-normal-pressed: var( --semantic-color-background-container-selected-pressed );--comp-checkbox-color-indeterminate-border-error-default: var( --semantic-color-border-container-error, #a8000b );--comp-checkbox-color-indeterminate-border-error-hover: var( --semantic-color-border-container-error, #a8000b );--comp-checkbox-color-indeterminate-border-error-pressed: var( --semantic-color-border-container-error, #a8000b );--comp-checkbox-color-indeterminate-border-normal-default: var( --semantic-color-border-container-selected-default, #000 );--comp-checkbox-color-indeterminate-border-normal-disabled: var( --semantic-color-border-container-selected-disabled, #d7d8d6 );--comp-checkbox-color-indeterminate-border-normal-hover: var( --semantic-color-border-container-selected-hover, #000 );--comp-checkbox-color-indeterminate-border-normal-pressed: var( --semantic-color-border-container-selected-pressed, #000 );--comp-checkbox-color-indeterminate-icon-error-default: var( --semantic-color-fill-error, #a8000b );--comp-checkbox-color-indeterminate-icon-error-hover: var( --semantic-color-fill-error, #a8000b );--comp-checkbox-color-indeterminate-icon-error-pressed: var( --semantic-color-fill-error, #a8000b );--comp-checkbox-color-indeterminate-icon-normal-default: var( --semantic-color-icon-actionable-default );--comp-checkbox-color-indeterminate-icon-normal-disabled: var( --semantic-color-icon-actionable-disabled );--comp-checkbox-color-indeterminate-icon-normal-hover: var( --semantic-color-icon-actionable-default );--comp-checkbox-color-indeterminate-icon-normal-pressed: var( --semantic-color-icon-actionable-pressed );--comp-checkbox-color-selected-background-error-default: var( --semantic-color-background-container-error-quiet, #f9f2f3 );--comp-checkbox-color-selected-background-error-hover: var( --semantic-color-background-container-error-quiet, #f9f2f3 );--comp-checkbox-color-selected-background-error-pressed: var( --semantic-color-background-container-error-quiet, #f9f2f3 );--comp-checkbox-color-selected-background-normal-default: var( --semantic-color-background-container-selected-default );--comp-checkbox-color-selected-background-normal-disabled: var( --semantic-color-background-container-selected-disabled );--comp-checkbox-color-selected-background-normal-hover: var( --semantic-color-background-container-selected-hover );--comp-checkbox-color-selected-background-normal-pressed: var( --semantic-color-background-container-selected-pressed );--comp-checkbox-color-selected-border-error-default: var( --semantic-color-border-container-error, #a8000b );--comp-checkbox-color-selected-border-error-hover: var( --semantic-color-border-container-error, #a8000b );--comp-checkbox-color-selected-border-error-pressed: var( --semantic-color-border-container-error, #a8000b );--comp-checkbox-color-selected-border-normal-default: var( --semantic-color-border-container-selected-default, #000 );--comp-checkbox-color-selected-border-normal-disabled: var( --semantic-color-border-container-selected-disabled, #d7d8d6 );--comp-checkbox-color-selected-border-normal-hover: var( --semantic-color-border-container-selected-hover, #000 );--comp-checkbox-color-selected-border-normal-pressed: var( --semantic-color-border-container-selected-pressed, #000 );--comp-checkbox-color-selected-icon-error-default: var( --semantic-color-fill-error, #a8000b );--comp-checkbox-color-selected-icon-error-hover: var( --semantic-color-fill-error, #a8000b );--comp-checkbox-color-selected-icon-error-pressed: var( --semantic-color-fill-error, #a8000b );--comp-checkbox-color-selected-icon-normal-default: var( --semantic-color-icon-actionable-default );--comp-checkbox-color-selected-icon-normal-disabled: var( --semantic-color-icon-actionable-disabled );--comp-checkbox-color-selected-icon-normal-hover: var( --semantic-color-icon-actionable-default );--comp-checkbox-color-selected-icon-normal-pressed: var( --semantic-color-icon-actionable-pressed );--comp-checkbox-color-unselected-background-error-default: var( --semantic-color-background-container-error-quiet, #f9f2f3 );--comp-checkbox-color-unselected-background-error-hover: var( --semantic-color-background-container-error-quiet, #f9f2f3 );--comp-checkbox-color-unselected-background-error-pressed: var( --semantic-color-background-container-error-quiet, #f9f2f3 );--comp-checkbox-color-unselected-background-normal-default: var( --semantic-color-background-container-interactive-default );--comp-checkbox-color-unselected-background-normal-disabled: var( --semantic-color-background-container-interactive-default );--comp-checkbox-color-unselected-background-normal-hover: var( --semantic-color-background-container-interactive-default );--comp-checkbox-color-unselected-background-normal-pressed: var( --semantic-color-background-container-interactive-default );--comp-checkbox-color-unselected-border-error-default: var( --semantic-color-border-container-error, #a8000b );--comp-checkbox-color-unselected-border-error-hover: var( --semantic-color-border-container-error, #a8000b );--comp-checkbox-color-unselected-border-error-pressed: var( --semantic-color-border-container-error, #a8000b );--comp-checkbox-color-unselected-border-normal-default: var( --semantic-color-border-container-interactive-default, #767676 );--comp-checkbox-color-unselected-border-normal-disabled: var( --semantic-color-border-container-interactive-disabled, #d7d8d6 );--comp-checkbox-color-unselected-border-normal-hover: var( --semantic-color-border-container-interactive-hover, #000 );--comp-checkbox-color-unselected-border-normal-pressed: var( --semantic-color-border-container-interactive-pressed, #000 );--comp-checkbox-cornerRadius: 0rem;--comp-checkbox-size-box: var(--semantic-size-icon-m, 1.5rem);--comp-checkbox-size-indeterminate-icon: .875rem;--comp-checkbox-size-selected-icon: .875rem}[data-bdl-theme=hsbc]{--comp-coachMark-borderWidth-container: 0rem;--comp-coachMark-color-close-icon-default: var(--brand-hsbc-color-core-white, #fff);--comp-coachMark-color-close-icon-hover: var(--brand-hsbc-color-complementaryGrey-grey1, #f3f3f3);--comp-coachMark-color-close-icon-pressed: var(--brand-hsbc-color-complementaryGrey-grey2, #ededed);--comp-coachMark-color-container-background: var(--brand-hsbc-color-complementaryGrey-grey8, #333);--comp-coachMark-color-container-border: var(--brand-hsbc-color-complementaryGrey-grey2, #ededed);--comp-coachMark-color-content-text: var(--brand-hsbc-color-core-white, #fff);--comp-coachMark-color-title-text: var(--brand-hsbc-color-core-white, #fff);--comp-coachMark-cornerRadius-anchor: 0rem;--comp-coachMark-cornerRadius-container: 0rem;--comp-coachMark-maxWidth: 17.5rem;--comp-coachMark-shadow-container: var(--semantic-shadow-container-floating, 0rem 0rem 1rem 0rem #0000004d);--comp-coachMark-size-anchor-height: .5rem;--comp-coachMark-size-anchor-width: 1rem;--comp-coachMark-size-close-icon: var(--semantic-size-icon-s, 1.125rem);--comp-coachMark-space-container-paddingHorizontal: var(--semantic-space-general-fixed-200, 1rem);--comp-coachMark-space-container-paddingVertical: var(--semantic-space-general-fixed-150, .75rem);--comp-coachMark-space-content-gapTitleContent: var(--semantic-space-general-fixed-0, 0rem);--comp-coachMark-space-gapAnchorEdge: var(--semantic-space-general-fixed-100, .5rem);--comp-coachMark-space-gapContentClose: var(--semantic-space-general-fixed-100, .5rem);--comp-coachMark-typography-content: var( --semantic-typography-content-caption-normal, 400 .875rem/1.25rem "Univers Next for HSBC", sans-serif );--comp-coachMark-typography-content-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem);--comp-coachMark-typography-title: var( --semantic-typography-content-body-loud, 500 1rem/1.5rem "Univers Next for HSBC", sans-serif );--comp-coachMark-typography-title-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem)}[data-bdl-theme=hsbc]{--comp-datePicker-borderWidth: .0625rem;--comp-datePicker-borderWidth-selected-item: 0rem;--comp-datePicker-borderWidth-unselected-item: 0rem;--comp-datePicker-color-background: var(--semantic-color-background-container-interactive-default, #fff);--comp-datePicker-color-border: var(--semantic-color-border-container-interactive-default, #767676);--comp-datePicker-color-month-text: var(--semantic-color-text-primary-default, #333);--comp-datePicker-color-selected-eventDayIndicator-fill-default: var(--brand-hsbc-color-core-white, #fff);--comp-datePicker-color-selected-eventDayIndicator-fill-disabled: var( --semantic-color-fill-selected-disabled, #d7d8d6 );--comp-datePicker-color-selected-item-background-general-default: var(--semantic-color-fill-selected-default, #000);--comp-datePicker-color-selected-item-background-general-disabled: var( --semantic-color-fill-selected-disabled, #d7d8d6 );--comp-datePicker-color-selected-item-background-general-hover: var(--semantic-color-fill-selected-hover, #333);--comp-datePicker-color-selected-item-background-general-pressed: var( --semantic-color-fill-selected-pressed, #767676 );--comp-datePicker-color-selected-item-background-today-default: var(--semantic-color-fill-selected-default, #000);--comp-datePicker-color-selected-item-background-today-disabled: var( --semantic-color-fill-selected-disabled, #d7d8d6 );--comp-datePicker-color-selected-item-background-today-hover: var(--semantic-color-fill-selected-hover, #333);--comp-datePicker-color-selected-item-background-today-pressed: var(--semantic-color-fill-selected-pressed, #767676);--comp-datePicker-color-selected-item-border-general-default: var( --semantic-color-border-container-selected-default, #000 );--comp-datePicker-color-selected-item-border-general-disabled: var( --semantic-color-border-container-selected-disabled, #d7d8d6 );--comp-datePicker-color-selected-item-border-general-hover: var( --semantic-color-border-container-selected-hover, #000 );--comp-datePicker-color-selected-item-border-general-pressed: var( --semantic-color-border-container-selected-pressed, #000 );--comp-datePicker-color-selected-item-border-today-default: var( --semantic-color-border-container-selected-default, #000 );--comp-datePicker-color-selected-item-border-today-disabled: var( --semantic-color-border-container-selected-disabled, #d7d8d6 );--comp-datePicker-color-selected-item-border-today-hover: var(--semantic-color-border-container-selected-hover, #000);--comp-datePicker-color-selected-item-border-today-pressed: var( --semantic-color-border-container-selected-pressed, #000 );--comp-datePicker-color-selected-item-text-general-default: var(--brand-hsbc-color-core-white, #fff);--comp-datePicker-color-selected-item-text-general-disabled: var(--brand-hsbc-color-complementaryGrey-grey6, #767676);--comp-datePicker-color-selected-item-text-today-default: var(--brand-hsbc-color-core-white, #fff);--comp-datePicker-color-selected-item-text-today-disabled: var(--brand-hsbc-color-complementaryGrey-grey6, #767676);--comp-datePicker-color-unselected-eventDayIndicator-fill-default: var( --brand-hsbc-color-complementaryGrey-grey8, #333 );--comp-datePicker-color-unselected-eventDayIndicator-fill-disabled: var( --semantic-color-fill-primary-disabled, #d7d8d6 );--comp-datePicker-color-unselected-item-background-general-default: var( --semantic-color-background-container-interactive-default, #fff );--comp-datePicker-color-unselected-item-background-general-disabled: var( --semantic-color-background-container-interactive-disabled, #fff );--comp-datePicker-color-unselected-item-background-general-hover: var( --semantic-color-background-container-interactive-hover, #f3f3f3 );--comp-datePicker-color-unselected-item-background-general-pressed: var( --semantic-color-background-container-interactive-pressed, #ededed );--comp-datePicker-color-unselected-item-background-today-default: var( --semantic-color-background-container-interactive-default, #fff );--comp-datePicker-color-unselected-item-background-today-disabled: var( --semantic-color-background-container-interactive-disabled, #fff );--comp-datePicker-color-unselected-item-background-today-hover: var( --semantic-color-background-container-interactive-hover, #f3f3f3 );--comp-datePicker-color-unselected-item-background-today-pressed: var( --semantic-color-background-container-interactive-pressed, #ededed );--comp-datePicker-color-unselected-item-border-general-default: var( --semantic-color-border-container-interactive-default, #767676 );--comp-datePicker-color-unselected-item-border-general-disabled: var( --semantic-color-border-container-interactive-disabled, #d7d8d6 );--comp-datePicker-color-unselected-item-border-general-hover: var( --semantic-color-border-container-interactive-hover, #000 );--comp-datePicker-color-unselected-item-border-general-pressed: var( --semantic-color-border-container-interactive-pressed, #000 );--comp-datePicker-color-unselected-item-border-today-default: var( --semantic-color-border-container-interactive-default, #767676 );--comp-datePicker-color-unselected-item-border-today-disabled: var( --semantic-color-border-container-interactive-disabled, #d7d8d6 );--comp-datePicker-color-unselected-item-border-today-hover: var( --semantic-color-border-container-interactive-hover, #000 );--comp-datePicker-color-unselected-item-border-today-pressed: var( --semantic-color-border-container-interactive-pressed, #000 );--comp-datePicker-color-unselected-item-text-general-default: var(--semantic-color-text-primary-default, #333);--comp-datePicker-color-unselected-item-text-general-disabled: var(--semantic-color-text-primary-disabled, #d7d8d6);--comp-datePicker-color-unselected-item-text-today-default: var(--semantic-color-fill-primary-default, #db0011);--comp-datePicker-color-unselected-item-text-today-disabled: var(--semantic-color-text-primary-disabled, #d7d8d6);--comp-datePicker-color-weekDay-text: var(--semantic-color-text-primary-default, #333);--comp-datePicker-color-year-text: var(--semantic-color-text-actionable-default, #000);--comp-datePicker-cornerRadius: var(--semantic-cornerRadius-container-normal, 0rem);--comp-datePicker-cornerRadius-eventDayIndicator: 62.4375rem;--comp-datePicker-cornerRadius-selected-item: 0rem;--comp-datePicker-cornerRadius-unselected-item: 0rem;--comp-datePicker-size-eventDayIndicator: var(--semantic-space-general-fixed-50, .25rem);--comp-datePicker-size-item: var(--semantic-space-general-fixed-600, 3rem);--comp-datePicker-size-maxWidth: 26.875rem;--comp-datePicker-size-minWidth: 19.25rem;--comp-datePicker-space-paddingVertical: var(--semantic-space-general-fixed-100, .5rem);--comp-datePicker-space-weekDay-paddingVertical: var(--semantic-space-general-fixed-100, .5rem);--comp-datePicker-typography-year: var( --semantic-typography-content-body-loud, 500 1rem/1.5rem "Univers Next for HSBC", sans-serif );--comp-datePicker-typography-year-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem);--comp-datePicker-typography-month: var( --semantic-typography-content-body-loud, 500 1rem/1.5rem "Univers Next for HSBC", sans-serif );--comp-datePicker-typography-month-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem);--comp-datePicker-typography-weekDay: var( --semantic-typography-content-footnote-quiet, 350 .75rem/1rem "Univers Next for HSBC", sans-serif );--comp-datePicker-typography-weekDay-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem);--comp-datePicker-typography-unselected-item-general-default: var( --semantic-typography-content-body-quiet, 350 1rem/1.5rem "Univers Next for HSBC", sans-serif );--comp-datePicker-typography-unselected-item-general-default-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-datePicker-typography-unselected-item-today-default: var( --semantic-typography-content-body-loud, 500 1rem/1.5rem "Univers Next for HSBC", sans-serif );--comp-datePicker-typography-unselected-item-today-default-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-datePicker-typography-selected-item-general-default: var( --semantic-typography-content-body-loud, 500 1rem/1.5rem "Univers Next for HSBC", sans-serif );--comp-datePicker-typography-selected-item-general-default-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-datePicker-typography-selected-item-today-default: var( --semantic-typography-content-body-loud, 500 1rem/1.5rem "Univers Next for HSBC", sans-serif );--comp-datePicker-typography-selected-item-today-default-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem )}[data-bdl-theme=hsbc]{--comp-dialog-borderWidth: 0rem;--comp-dialog-color-background: var( --brand-hsbc-color-darkModeGrey-grey4 );--comp-dialog-color-body-text: var( --semantic-color-text-primary-default, #333 );--comp-dialog-color-border: var( --brand-hsbc-color-darkModeGrey-grey4 );--comp-dialog-color-checkboxLabel-text: var( --semantic-color-text-primary-default, #333 );--comp-dialog-color-overlay-background: var( --semantic-color-background-overlay, #00000080 );--comp-dialog-color-title-text: var( --semantic-color-text-primary-default, #333 );--comp-dialog-cornerRadius: var( --semantic-cornerRadius-container-normal, 0rem );--comp-dialog-size-maxWidth: 31.25rem;--comp-dialog-shadow: 0rem .1875rem .3125rem 0rem var(--brand-hsbc-color-translucent-black-20, #0003);--comp-dialog-space-buttonGroup-gapHorizontal: var( --semantic-space-general-fixed-200, 1rem );--comp-dialog-space-buttonGroup-gapVertical: var( --semantic-space-general-fixed-200, 1rem );--comp-dialog-space-gapBodyCheckbox: var( --semantic-space-general-fixed-200, 1rem );--comp-dialog-space-gapCheckboxLabel: var( --semantic-space-general-fixed-100, .5rem );--comp-dialog-space-gapContentButtons: var( --semantic-space-general-fixed-300, 1.5rem );--comp-dialog-space-gapTitleBody: var( --semantic-space-general-fixed-200, 1rem );--comp-dialog-space-marginHorizontal: var( --semantic-space-general-fixed-200, 1rem );--comp-dialog-space-marginVertical: var( --semantic-space-general-fixed-1000, 5rem );--comp-dialog-space-paddingHorizontal: var( --semantic-space-general-fixed-200, 1rem );--comp-dialog-space-paddingVertical: var( --semantic-space-general-fixed-200, 1rem );--comp-dialog-typography-title: var( --semantic-typography-heading-subheadline-normal, 400 1.4375rem / 1.875rem "Univers Next for HSBC", sans-serif );--comp-dialog-typography-title-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-dialog-typography-body: var( --semantic-typography-content-body-normal, 400 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-dialog-typography-body-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-dialog-typography-checkboxLabel: var( --semantic-typography-content-body-normal, 400 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-dialog-typography-checkboxLabel-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem )}[data-bdl-theme=hsbc]{--comp-formTitle-color-subtitle-text-disabled: var(--semantic-color-text-secondary-disabled, #d7d8d6);--comp-formTitle-color-subtitle-text-error: var(--semantic-color-text-secondary-default, #545454);--comp-formTitle-color-subtitle-text-normal: var(--semantic-color-text-secondary-default, #545454);--comp-formTitle-color-subtitle-text-warning: var(--semantic-color-text-secondary-default, #545454);--comp-formTitle-color-title-text-disabled: var(--semantic-color-text-primary-disabled, #d7d8d6);--comp-formTitle-color-title-text-error: var(--semantic-color-text-primary-default, #333);--comp-formTitle-color-title-text-normal: var(--semantic-color-text-primary-default, #333);--comp-formTitle-color-title-text-warning: var(--semantic-color-text-primary-default, #333);--comp-formTitle-color-tooltip-icon-disabled: var(--semantic-color-icon-actionable-disabled, #d7d8d6);--comp-formTitle-color-tooltip-icon-error-default: var(--semantic-color-icon-actionable-default, #000);--comp-formTitle-color-tooltip-icon-error-hover: var(--semantic-color-icon-actionable-hover, #767676);--comp-formTitle-color-tooltip-icon-error-pressed: var(--semantic-color-icon-actionable-pressed, #767676);--comp-formTitle-color-tooltip-icon-normal-default: var(--semantic-color-icon-actionable-default, #000);--comp-formTitle-color-tooltip-icon-normal-hover: var(--semantic-color-icon-actionable-hover, #767676);--comp-formTitle-color-tooltip-icon-normal-pressed: var(--semantic-color-icon-actionable-pressed, #767676);--comp-formTitle-color-tooltip-icon-warning-default: var(--semantic-color-icon-actionable-default, #000);--comp-formTitle-color-tooltip-icon-warning-hover: var(--semantic-color-icon-actionable-hover, #767676);--comp-formTitle-color-tooltip-icon-warning-pressed: var(--semantic-color-icon-actionable-pressed, #767676);--comp-formTitle-size-tooltip-icon: var(--semantic-size-icon-s, 1.125rem);--comp-formTitle-space-gapTitleField: var(--semantic-space-general-fixed-100, .5rem);--comp-formTitle-space-gapTitleSubtitle: var(--semantic-space-general-fixed-0, 0rem);--comp-formTitle-space-gapTitleTooltip: var(--semantic-space-general-fixed-100, .5rem);--comp-formTitle-typography-title-normal: var( --semantic-typography-content-body-normal, 400 1rem/1.5rem "Univers Next for HSBC", sans-serif );--comp-formTitle-typography-title-normal-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem);--comp-formTitle-typography-title-error: var( --semantic-typography-content-body-normal, 400 1rem/1.5rem "Univers Next for HSBC", sans-serif );--comp-formTitle-typography-title-error-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem);--comp-formTitle-typography-title-warning: var( --semantic-typography-content-body-normal, 400 1rem/1.5rem "Univers Next for HSBC", sans-serif );--comp-formTitle-typography-title-warning-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem);--comp-formTitle-typography-title-disabled: var( --semantic-typography-content-body-normal, 400 1rem/1.5rem "Univers Next for HSBC", sans-serif );--comp-formTitle-typography-title-disabled-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem);--comp-formTitle-typography-subtitle-normal: var( --semantic-typography-content-caption-quiet, 350 .875rem/1.25rem "Univers Next for HSBC", sans-serif );--comp-formTitle-typography-subtitle-normal-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem);--comp-formTitle-typography-subtitle-error: var( --semantic-typography-content-caption-quiet, 350 .875rem/1.25rem "Univers Next for HSBC", sans-serif );--comp-formTitle-typography-subtitle-error-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem);--comp-formTitle-typography-subtitle-warning: var( --semantic-typography-content-caption-quiet, 350 .875rem/1.25rem "Univers Next for HSBC", sans-serif );--comp-formTitle-typography-subtitle-warning-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem);--comp-formTitle-typography-subtitle-disabled: var( --semantic-typography-content-caption-quiet, 350 .875rem/1.25rem "Univers Next for HSBC", sans-serif );--comp-formTitle-typography-subtitle-disabled-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem)}[data-bdl-theme=hsbc]{--comp-gainAndLoss-color-gain-background: var(--brand-hsbc-color-transparent-white, #fff0);--comp-gainAndLoss-color-gain-indicator-fill: var(--semantic-color-fill-dataVis-gain-default, #00847f);--comp-gainAndLoss-color-gain-symbol-text: var(--semantic-color-text-dataVis-gain-default, #00847f);--comp-gainAndLoss-color-gain-value-text: var(--semantic-color-text-dataVis-gain-default, #00847f);--comp-gainAndLoss-color-loss-background: var(--brand-hsbc-color-transparent-white, #fff0);--comp-gainAndLoss-color-loss-indicator-fill: var(--semantic-color-fill-dataVis-loss-default, #a8000b);--comp-gainAndLoss-color-loss-symbol-text: var(--semantic-color-text-dataVis-loss-default, #a8000b);--comp-gainAndLoss-color-loss-value-text: var(--semantic-color-text-dataVis-loss-default, #a8000b);--comp-gainAndLoss-color-neutral-background: var(--brand-hsbc-color-transparent-white, #fff0);--comp-gainAndLoss-color-neutral-indicator-fill: var(--semantic-color-fill-dataVis-neutral, #333);--comp-gainAndLoss-color-neutral-symbol-text: var(--semantic-color-text-dataVis-neutral, #333);--comp-gainAndLoss-color-neutral-value-text: var(--semantic-color-text-dataVis-neutral, #333);--comp-gainAndLoss-size-large-indicator-height: .375rem;--comp-gainAndLoss-size-large-indicator-width: .75rem;--comp-gainAndLoss-size-medium-indicator-height: .375rem;--comp-gainAndLoss-size-medium-indicator-width: .75rem;--comp-gainAndLoss-size-small-indicator-height: .375rem;--comp-gainAndLoss-size-small-indicator-width: .75rem;--comp-gainAndLoss-space-large-gapIndicatorValue: var(--semantic-space-general-fixed-50, .25rem);--comp-gainAndLoss-space-large-gapSymbolValue: var(--semantic-space-general-fixed-25, .125rem);--comp-gainAndLoss-space-large-gapValues: var(--semantic-space-general-fixed-50, .25rem);--comp-gainAndLoss-space-large-gapValuesVertical: var(--semantic-space-general-fixed-25, .125rem);--comp-gainAndLoss-space-large-paddingHorizontal: 0rem;--comp-gainAndLoss-space-large-paddingVertical: 0rem;--comp-gainAndLoss-space-medium-gapIndicatorValue: var(--semantic-space-general-fixed-50, .25rem);--comp-gainAndLoss-space-medium-gapSymbolValue: var(--semantic-space-general-fixed-25, .125rem);--comp-gainAndLoss-space-medium-gapValues: var(--semantic-space-general-fixed-50, .25rem);--comp-gainAndLoss-space-medium-gapValuesVertical: 0rem;--comp-gainAndLoss-space-medium-paddingHorizontal: 0rem;--comp-gainAndLoss-space-medium-paddingVertical: 0rem;--comp-gainAndLoss-space-small-gapIndicatorValue: var(--semantic-space-general-fixed-50, .25rem);--comp-gainAndLoss-space-small-gapSymbolValue: var(--semantic-space-general-fixed-25, .125rem);--comp-gainAndLoss-space-small-gapValues: var(--semantic-space-general-fixed-50, .25rem);--comp-gainAndLoss-space-small-gapValuesVertical: 0rem;--comp-gainAndLoss-space-small-paddingHorizontal: 0rem;--comp-gainAndLoss-space-small-paddingVertical: 0rem;--comp-gainAndLoss-typography-large-highlighted-symbol: var(--brand-hsbc-typography-fontWeight-universNext-bold, 700) var(--brand-hsbc-typography-fontSize-s3-scale1, 1.4375rem) / var(--brand-hsbc-typography-lineHeight-s3-scale1, 1.875rem) var(--brand-hsbc-typography-fontFamily-default, "Univers Next for HSBC", sans-serif);--comp-gainAndLoss-typography-large-highlighted-symbol-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-gainAndLoss-typography-large-highlighted-value: var(--brand-hsbc-typography-fontWeight-universNext-bold, 700) var(--brand-hsbc-typography-fontSize-s3-scale1, 1.4375rem) / var(--brand-hsbc-typography-lineHeight-s3-scale1, 1.875rem) var(--brand-hsbc-typography-fontFamily-default, "Univers Next for HSBC", sans-serif);--comp-gainAndLoss-typography-large-highlighted-value-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-gainAndLoss-typography-large-standard-symbol: var( --semantic-typography-heading-sectionTitle-loud, 500 1.4375rem/1.875rem "Univers Next for HSBC", sans-serif );--comp-gainAndLoss-typography-large-standard-symbol-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-gainAndLoss-typography-large-standard-value: var( --semantic-typography-heading-sectionTitle-loud, 500 1.4375rem/1.875rem "Univers Next for HSBC", sans-serif );--comp-gainAndLoss-typography-large-standard-value-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-gainAndLoss-typography-medium-highlighted-symbol: var(--brand-hsbc-typography-fontWeight-universNext-bold, 700) var(--brand-hsbc-typography-fontSize-s5, 1rem) / var(--brand-hsbc-typography-lineHeight-s5, 1.5rem) var(--brand-hsbc-typography-fontFamily-default, "Univers Next for HSBC", sans-serif);--comp-gainAndLoss-typography-medium-highlighted-symbol-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-gainAndLoss-typography-medium-highlighted-value: var(--brand-hsbc-typography-fontWeight-universNext-bold, 700) var(--brand-hsbc-typography-fontSize-s5, 1rem) / var(--brand-hsbc-typography-lineHeight-s5, 1.5rem) var(--brand-hsbc-typography-fontFamily-default, "Univers Next for HSBC", sans-serif);--comp-gainAndLoss-typography-medium-highlighted-value-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-gainAndLoss-typography-medium-standard-symbol: var( --semantic-typography-content-body-loud, 500 1rem/1.5rem "Univers Next for HSBC", sans-serif );--comp-gainAndLoss-typography-medium-standard-symbol-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-gainAndLoss-typography-medium-standard-value: var( --semantic-typography-content-body-loud, 500 1rem/1.5rem "Univers Next for HSBC", sans-serif );--comp-gainAndLoss-typography-medium-standard-value-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-gainAndLoss-typography-small-highlighted-symbol: var(--brand-hsbc-typography-fontWeight-universNext-bold, 700) var(--brand-hsbc-typography-fontSize-s6, .875rem) / var(--brand-hsbc-typography-lineHeight-s6, 1.25rem) var(--brand-hsbc-typography-fontFamily-default, "Univers Next for HSBC", sans-serif);--comp-gainAndLoss-typography-small-highlighted-symbol-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-gainAndLoss-typography-small-highlighted-value: var(--brand-hsbc-typography-fontWeight-universNext-bold, 700) var(--brand-hsbc-typography-fontSize-s6, .875rem) / var(--brand-hsbc-typography-lineHeight-s6, 1.25rem) var(--brand-hsbc-typography-fontFamily-default, "Univers Next for HSBC", sans-serif);--comp-gainAndLoss-typography-small-highlighted-value-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-gainAndLoss-typography-small-standard-symbol: var( --semantic-typography-content-caption-loud, 500 .875rem/1.25rem "Univers Next for HSBC", sans-serif );--comp-gainAndLoss-typography-small-standard-symbol-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-gainAndLoss-typography-small-standard-value: var( --semantic-typography-content-caption-loud, 500 .875rem/1.25rem "Univers Next for HSBC", sans-serif );--comp-gainAndLoss-typography-small-standard-value-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem )}[data-bdl-theme=hsbc]{--comp-imageCard-borderWidth-highlightedBadge: 0rem;--comp-imageCard-borderWidth-standardBadge: 0rem;--comp-imageCard-color-action-icon: var(--brand-hsbc-color-core-white, #fff);--comp-imageCard-color-action-text: var(--brand-hsbc-color-core-white, #fff);--comp-imageCard-color-highlightedBadge-border: var(--semantic-color-fill-primary-default, #db0011);--comp-imageCard-color-highlightedBadge-fill: var(--semantic-color-fill-primary-default, #db0011);--comp-imageCard-color-highlightedBadge-text: var(--brand-hsbc-color-core-white, #fff);--comp-imageCard-color-label-text: var(--brand-hsbc-color-core-white, #fff);--comp-imageCard-color-standardBadge-border: var(--semantic-color-fill-selected-default, #000);--comp-imageCard-color-standardBadge-fill: var(--semantic-color-fill-selected-default, #000);--comp-imageCard-color-standardBadge-text: var(--brand-hsbc-color-core-white, #fff);--comp-imageCard-color-textOverlay-gradientStop-end: var( --semantic-color-gradientStop-textOverlay-dark-strong, #000000e5 );--comp-imageCard-color-textOverlay-gradientStop-middle: var( --semantic-color-gradientStop-textOverlay-dark-weak, #0000008c );--comp-imageCard-color-textOverlay-gradientStop-start: var( --semantic-color-gradientStop-textOverlay-dark-transparent, #0000 );--comp-imageCard-color-title-text: var(--brand-hsbc-color-core-white, #fff);--comp-imageCard-cornerRadius: var(--semantic-cornerRadius-container-normal, 0rem);--comp-imageCard-cornerRadius-highlightedBadge: 0rem;--comp-imageCard-cornerRadius-standardBadge: 0rem;--comp-imageCard-size-action-icon: var(--semantic-size-icon-s, 1.125rem);--comp-imageCard-shadow: var(--semantic-shadow-container-elevated, 0rem .125rem .5rem 0rem #0003);--comp-imageCard-space-gapVertical: var(--semantic-space-item-gap-tight, .5rem);--comp-imageCard-space-highlightedBadge-paddingHorizontal: var(--semantic-space-general-fixed-100, .5rem);--comp-imageCard-space-highlightedBadge-paddingVertical: var(--semantic-space-general-fixed-50, .25rem);--comp-imageCard-space-paddingHorizontal: var(--semantic-space-container-padding-normal, 1rem);--comp-imageCard-space-paddingVertical: var(--semantic-space-container-padding-loose, 1.25rem);--comp-imageCard-space-standardBadge-marginLeading: var(--semantic-space-container-padding-normal, 1rem);--comp-imageCard-space-standardBadge-marginTop: var(--semantic-space-general-responsive-100, .5rem);--comp-imageCard-space-standardBadge-paddingHorizontal: var(--semantic-space-general-fixed-100, .5rem);--comp-imageCard-space-standardBadge-paddingVertical: var(--semantic-space-general-fixed-50, .25rem);--comp-imageCard-typography-highlightedBadge-text: var( --semantic-typography-content-footnote-normal, 400 .75rem/1rem "Univers Next for HSBC", sans-serif );--comp-imageCard-typography-highlightedBadge-text-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-imageCard-typography-standardBadge-text: var( --semantic-typography-content-footnote-normal, 400 .75rem/1rem "Univers Next for HSBC", sans-serif );--comp-imageCard-typography-standardBadge-text-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-imageCard-typography-title-text: var( --semantic-typography-heading-subheadline-loud, 500 1.4375rem/1.875rem "Univers Next for HSBC", sans-serif );--comp-imageCard-typography-title-text-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem);--comp-imageCard-typography-label-text: var( --semantic-typography-content-caption-normal, 400 .875rem/1.25rem "Univers Next for HSBC", sans-serif );--comp-imageCard-typography-label-text-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem);--comp-imageCard-typography-action-text: var( --semantic-typography-content-body-normal, 400 1rem/1.5rem "Univers Next for HSBC", sans-serif );--comp-imageCard-typography-action-text-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem)}[data-bdl-theme=hsbc]{--comp-inlineMessage-color-error-text: var(--semantic-color-text-primary-default, #333);--comp-inlineMessage-color-information-text: var(--semantic-color-text-primary-default, #333);--comp-inlineMessage-color-success-text: var(--semantic-color-text-primary-default, #333);--comp-inlineMessage-color-warning-text: var(--semantic-color-text-primary-default, #333);--comp-inlineMessage-size-icon: var(--semantic-size-icon-s, 1.125rem);--comp-inlineMessage-space-gapIconText: var(--semantic-space-general-fixed-100, .5rem);--comp-inlineMessage-typography-text: var( --semantic-typography-content-caption-normal, 400 .875rem/1.25rem "Univers Next for HSBC", sans-serif );--comp-inlineMessage-typography-text-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem)}[data-bdl-theme=hsbc]{--comp-inputField-borderWidth-active-box-error: .0625rem;--comp-inputField-borderWidth-active-box-normal: .0625rem;--comp-inputField-borderWidth-active-box-warning: .0625rem;--comp-inputField-borderWidth-disabled-box: .0625rem;--comp-inputField-borderWidth-inactive-box-error: .0625rem;--comp-inputField-borderWidth-inactive-box-normal: .0625rem;--comp-inputField-borderWidth-inactive-box-warning: .0625rem;--comp-inputField-borderWidth-readOnly-box-error: .0625rem;--comp-inputField-borderWidth-readOnly-box-normal: .0625rem;--comp-inputField-borderWidth-readOnly-box-warning: .0625rem;--comp-inputField-color-active-bar-fill-error-default: var( --semantic-color-border-container-error, #a8000b );--comp-inputField-color-active-bar-fill-error-hover: var( --semantic-color-border-container-error, #a8000b );--comp-inputField-color-active-bar-fill-error-pressed: var( --semantic-color-border-container-error, #a8000b );--comp-inputField-color-active-bar-fill-normal-default: var( --brand-hsbc-color-complementaryGrey-grey1 );--comp-inputField-color-active-bar-fill-normal-hover: var( --brand-hsbc-color-complementaryGrey-grey1 );--comp-inputField-color-active-bar-fill-normal-pressed: var( --brand-hsbc-color-complementaryGrey-grey1 );--comp-inputField-color-active-bar-fill-warning-default: var( --brand-hsbc-color-core-black, #000 );--comp-inputField-color-active-bar-fill-warning-hover: var( --brand-hsbc-color-core-black, #000 );--comp-inputField-color-active-bar-fill-warning-pressed: var( --brand-hsbc-color-core-black, #000 );--comp-inputField-color-active-box-background-error-default: var( --semantic-color-background-container-error-quiet, #f9f2f3 );--comp-inputField-color-active-box-background-error-hover: var( --semantic-color-background-container-error-quiet, #f9f2f3 );--comp-inputField-color-active-box-background-error-pressed: var( --semantic-color-background-container-error-quiet, #f9f2f3 );--comp-inputField-color-active-box-background-normal-default: var( --semantic-color-background-container-interactive-default );--comp-inputField-color-active-box-background-normal-hover: var( --semantic-color-background-container-interactive-default );--comp-inputField-color-active-box-background-normal-pressed: var( --semantic-color-background-container-interactive-default );--comp-inputField-color-active-box-background-warning-default: var( --brand-hsbc-color-core-white, #fff );--comp-inputField-color-active-box-background-warning-hover: var( --brand-hsbc-color-core-white, #fff );--comp-inputField-color-active-box-background-warning-pressed: var( --brand-hsbc-color-core-white, #fff );--comp-inputField-color-active-box-border-error-default: var( --semantic-color-border-container-error, #a8000b );--comp-inputField-color-active-box-border-error-hover: var( --semantic-color-border-container-error, #a8000b );--comp-inputField-color-active-box-border-error-pressed: var( --semantic-color-border-container-error, #a8000b );--comp-inputField-color-active-box-border-normal-default: var( --semantic-color-border-container-selected-default, #000 );--comp-inputField-color-active-box-border-normal-hover: var( --semantic-color-border-container-selected-hover, #000 );--comp-inputField-color-active-box-border-normal-pressed: var( --semantic-color-border-container-selected-pressed, #000 );--comp-inputField-color-active-box-border-warning-default: var( --semantic-color-border-container-selected-default, #000 );--comp-inputField-color-active-box-border-warning-hover: var( --semantic-color-border-container-selected-hover, #000 );--comp-inputField-color-active-box-border-warning-pressed: var( --semantic-color-border-container-selected-pressed, #000 );--comp-inputField-color-active-characterCount-text-error: var( --semantic-color-text-error, #a8000b );--comp-inputField-color-active-characterCount-text-normal: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-active-characterCount-text-warning: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-active-control-icon-error-default: var( --semantic-color-icon-primary-default, #333 );--comp-inputField-color-active-control-icon-error-disabled: var( --semantic-color-icon-primary-disabled, #d7d8d6 );--comp-inputField-color-active-control-icon-error-hover: var( --semantic-color-icon-primary-hover, #333 );--comp-inputField-color-active-control-icon-error-pressed: var( --semantic-color-icon-primary-pressed, #333 );--comp-inputField-color-active-control-icon-normal-default: var( --semantic-color-icon-primary-default, #333 );--comp-inputField-color-active-control-icon-normal-disabled: var( --semantic-color-icon-primary-disabled, #d7d8d6 );--comp-inputField-color-active-control-icon-normal-hover: var( --semantic-color-icon-primary-hover, #333 );--comp-inputField-color-active-control-icon-normal-pressed: var( --semantic-color-icon-primary-pressed, #333 );--comp-inputField-color-active-control-icon-warning-default: var( --semantic-color-icon-primary-default, #333 );--comp-inputField-color-active-control-icon-warning-disabled: var( --semantic-color-icon-primary-disabled, #d7d8d6 );--comp-inputField-color-active-control-icon-warning-hover: var( --semantic-color-icon-primary-hover, #333 );--comp-inputField-color-active-control-icon-warning-pressed: var( --semantic-color-icon-primary-pressed, #333 );--comp-inputField-color-active-cursor: var( --brand-hsbc-color-core-black, #000 );--comp-inputField-color-active-handle-error-default: var( --semantic-color-fill-error, #a8000b );--comp-inputField-color-active-handle-error-hover: var( --semantic-color-fill-error, #a8000b );--comp-inputField-color-active-handle-error-pressed: var( --semantic-color-fill-error, #a8000b );--comp-inputField-color-active-handle-normal-default: var( --brand-hsbc-color-complementaryGrey-grey6, #767676 );--comp-inputField-color-active-handle-normal-hover: var( --brand-hsbc-color-complementaryGrey-grey6, #767676 );--comp-inputField-color-active-handle-normal-pressed: var( --brand-hsbc-color-complementaryGrey-grey6, #767676 );--comp-inputField-color-active-handle-warning-default: var( --brand-hsbc-color-complementaryGrey-grey6, #767676 );--comp-inputField-color-active-handle-warning-hover: var( --brand-hsbc-color-complementaryGrey-grey6, #767676 );--comp-inputField-color-active-handle-warning-pressed: var( --brand-hsbc-color-complementaryGrey-grey6, #767676 );--comp-inputField-color-active-input-text-error-placeholder: var( --semantic-color-text-placeholder, #767676 );--comp-inputField-color-active-input-text-error-populated: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-active-input-text-normal-placeholder: var( --semantic-color-text-placeholder, #767676 );--comp-inputField-color-active-input-text-normal-populated: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-active-input-text-warning-placeholder: var( --semantic-color-text-placeholder, #767676 );--comp-inputField-color-active-input-text-warning-populated: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-active-prefix-text-error-placeholder: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-active-prefix-text-error-populated: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-active-prefix-text-normal-placeholder: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-active-prefix-text-normal-populated: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-active-prefix-text-warning-placeholder: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-active-prefix-text-warning-populated: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-active-subtitle-text-error: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-active-subtitle-text-normal: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-active-subtitle-text-warning: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-active-suffix-text-error-placeholder: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-active-suffix-text-error-populated: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-active-suffix-text-normal-placeholder: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-active-suffix-text-normal-populated: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-active-suffix-text-warning-placeholder: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-active-suffix-text-warning-populated: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-active-title-text-error: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-active-title-text-normal: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-active-title-text-warning: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-active-tooltip-icon-error-default: var( --semantic-color-icon-actionable-default, #000 );--comp-inputField-color-active-tooltip-icon-error-hover: var( --semantic-color-icon-actionable-hover, #767676 );--comp-inputField-color-active-tooltip-icon-error-pressed: var( --semantic-color-icon-actionable-pressed, #767676 );--comp-inputField-color-active-tooltip-icon-normal-default: var( --semantic-color-icon-actionable-default, #000 );--comp-inputField-color-active-tooltip-icon-normal-hover: var( --semantic-color-icon-actionable-hover, #767676 );--comp-inputField-color-active-tooltip-icon-normal-pressed: var( --semantic-color-icon-actionable-pressed, #767676 );--comp-inputField-color-active-tooltip-icon-warning-default: var( --semantic-color-icon-actionable-default, #000 );--comp-inputField-color-active-tooltip-icon-warning-hover: var( --semantic-color-icon-actionable-hover, #767676 );--comp-inputField-color-active-tooltip-icon-warning-pressed: var( --semantic-color-icon-actionable-pressed, #767676 );--comp-inputField-color-disabled-bar-fill: var( --semantic-color-border-container-interactive-disabled, #d7d8d6 );--comp-inputField-color-disabled-box-background: var( --brand-hsbc-color-core-white, #fff );--comp-inputField-color-disabled-box-border: var( --semantic-color-border-container-interactive-disabled, #d7d8d6 );--comp-inputField-color-disabled-characterCount-text: var( --semantic-color-text-primary-disabled, #d7d8d6 );--comp-inputField-color-disabled-control-icon: var( --semantic-color-icon-primary-disabled, #d7d8d6 );--comp-inputField-color-disabled-input-text-placeholder: var( --semantic-color-text-primary-disabled, #d7d8d6 );--comp-inputField-color-disabled-input-text-populated: var( --semantic-color-text-primary-disabled, #d7d8d6 );--comp-inputField-color-disabled-prefix-text-placeholder: var( --semantic-color-text-primary-disabled, #d7d8d6 );--comp-inputField-color-disabled-prefix-text-populated: var( --semantic-color-text-primary-disabled, #d7d8d6 );--comp-inputField-color-disabled-subtitle-text: var( --semantic-color-text-primary-disabled, #d7d8d6 );--comp-inputField-color-disabled-suffix-text-placeholder: var( --semantic-color-text-primary-disabled, #d7d8d6 );--comp-inputField-color-disabled-suffix-text-populated: var( --semantic-color-text-primary-disabled, #d7d8d6 );--comp-inputField-color-disabled-title-text: var( --semantic-color-text-primary-disabled, #d7d8d6 );--comp-inputField-color-disabled-tooltip-icon: var( --semantic-color-icon-actionable-disabled, #d7d8d6 );--comp-inputField-color-inactive-bar-fill-error-default: var( --semantic-color-border-container-error, #a8000b );--comp-inputField-color-inactive-bar-fill-error-hover: var( --semantic-color-border-container-error, #a8000b );--comp-inputField-color-inactive-bar-fill-error-pressed: var( --semantic-color-border-container-error, #a8000b );--comp-inputField-color-inactive-box-background-normal-default: var( --semantic-color-border-container-interactive-default, #fff );--comp-inputField-color-inactive-box-background-normal-hover: var( --brand-hsbc-color-core-white, #fff );--comp-inputField-color-inactive-box-background-normal-pressed: var( --brand-hsbc-color-core-white, #fff );--comp-inputField-color-inactive-box-background-warning-default: var( --brand-hsbc-color-core-white, #fff );--comp-inputField-color-inactive-bar-fill-normal-default: var( --semantic-color-border-container-interactive-default, #767676 );--comp-inputField-color-inactive-bar-fill-normal-hover: var( --semantic-color-border-container-interactive-hover, #000 );--comp-inputField-color-inactive-bar-fill-normal-pressed: var( --semantic-color-border-container-interactive-pressed, #000 );--comp-inputField-color-inactive-bar-fill-warning-default: var( --semantic-color-border-container-interactive-default, #767676 );--comp-inputField-color-inactive-bar-fill-warning-hover: var( --semantic-color-border-container-interactive-hover, #000 );--comp-inputField-color-inactive-bar-fill-warning-pressed: var( --semantic-color-border-container-interactive-pressed, #000 );--comp-inputField-color-inactive-box-background-error-default: var( --semantic-color-background-container-error-quiet, #f9f2f3 );--comp-inputField-color-inactive-box-background-error-hover: var( --semantic-color-background-container-error-quiet, #f9f2f3 );--comp-inputField-color-inactive-box-background-error-pressed: var( --semantic-color-background-container-error-quiet, #f9f2f3 );--comp-inputField-color-inactive-box-background-normal-default: var( --semantic-color-background-container-interactive-default );--comp-inputField-color-inactive-box-background-normal-hover: var( --semantic-color-background-container-interactive-default );--comp-inputField-color-inactive-box-background-normal-pressed: var( --semantic-color-background-container-interactive-default );--comp-inputField-color-inactive-box-background-warning-default: var( --semantic-color-background-container-interactive-default );--comp-inputField-color-inactive-box-background-warning-hover: var( --semantic-color-background-container-interactive-default );--comp-inputField-color-inactive-box-background-warning-pressed: var( --semantic-color-background-container-interactive-default );--comp-inputField-color-inactive-box-border-error-default: var( --semantic-color-border-container-error, #a8000b );--comp-inputField-color-inactive-box-border-error-hover: var( --semantic-color-border-container-error, #a8000b );--comp-inputField-color-inactive-box-border-error-pressed: var( --semantic-color-border-container-error, #a8000b );--comp-inputField-color-inactive-box-border-normal-default: var( --semantic-color-border-container-interactive-default, #767676 );--comp-inputField-color-inactive-box-border-normal-hover: var( --semantic-color-border-container-interactive-hover, #000 );--comp-inputField-color-inactive-box-border-normal-pressed: var( --semantic-color-border-container-interactive-pressed, #000 );--comp-inputField-color-inactive-box-border-warning-default: var( --semantic-color-border-container-interactive-default, #767676 );--comp-inputField-color-inactive-box-border-warning-hover: var( --semantic-color-border-container-interactive-hover, #000 );--comp-inputField-color-inactive-box-border-warning-pressed: var( --semantic-color-border-container-interactive-pressed, #000 );--comp-inputField-color-inactive-characterCount-text-error: var( --semantic-color-text-error, #a8000b );--comp-inputField-color-inactive-characterCount-text-normal: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-inactive-characterCount-text-warning: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-inactive-control-icon-error-default: var( --semantic-color-icon-primary-default, #333 );--comp-inputField-color-inactive-control-icon-error-disabled: var( --semantic-color-icon-primary-disabled, #d7d8d6 );--comp-inputField-color-inactive-control-icon-error-hover: var( --semantic-color-icon-primary-hover, #333 );--comp-inputField-color-inactive-control-icon-error-pressed: var( --semantic-color-icon-primary-pressed, #333 );--comp-inputField-color-inactive-control-icon-normal-default: var( --semantic-color-icon-primary-default, #333 );--comp-inputField-color-inactive-control-icon-normal-disabled: var( --semantic-color-icon-primary-disabled, #d7d8d6 );--comp-inputField-color-inactive-control-icon-normal-hover: var( --semantic-color-icon-primary-hover, #333 );--comp-inputField-color-inactive-control-icon-normal-pressed: var( --semantic-color-icon-primary-pressed, #333 );--comp-inputField-color-inactive-control-icon-warning-default: var( --semantic-color-icon-primary-default, #333 );--comp-inputField-color-inactive-control-icon-warning-disabled: var( --semantic-color-icon-primary-disabled, #d7d8d6 );--comp-inputField-color-inactive-control-icon-warning-hover: var( --semantic-color-icon-primary-hover, #333 );--comp-inputField-color-inactive-control-icon-warning-pressed: var( --semantic-color-icon-primary-pressed, #333 );--comp-inputField-color-inactive-input-text-error-placeholder: var( --semantic-color-text-placeholder, #767676 );--comp-inputField-color-inactive-input-text-error-populated: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-inactive-input-text-normal-placeholder: var( --semantic-color-text-placeholder, #767676 );--comp-inputField-color-inactive-input-text-normal-populated: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-inactive-input-text-warning-placeholder: var( --semantic-color-text-placeholder, #767676 );--comp-inputField-color-inactive-input-text-warning-populated: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-inactive-prefix-text-error-placeholder: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-inactive-prefix-text-error-populated: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-inactive-prefix-text-normal-placeholder: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-inactive-prefix-text-normal-populated: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-inactive-prefix-text-warning-placeholder: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-inactive-prefix-text-warning-populated: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-inactive-subtitle-text-error: var( --semantic-color-text-secondary-default, #545454 );--comp-inputField-color-inactive-subtitle-text-normal: var( --semantic-color-text-secondary-default, #545454 );--comp-inputField-color-inactive-subtitle-text-warning: var( --semantic-color-text-secondary-default, #545454 );--comp-inputField-color-inactive-suffix-text-error-placeholder: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-inactive-suffix-text-error-populated: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-inactive-suffix-text-normal-placeholder: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-inactive-suffix-text-normal-populated: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-inactive-suffix-text-warning-placeholder: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-inactive-suffix-text-warning-populated: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-inactive-title-text-error: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-inactive-title-text-normal: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-inactive-title-text-warning: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-inactive-tooltip-icon-error-default: var( --semantic-color-icon-actionable-default, #000 );--comp-inputField-color-inactive-tooltip-icon-error-hover: var( --semantic-color-icon-actionable-hover, #767676 );--comp-inputField-color-inactive-tooltip-icon-error-pressed: var( --semantic-color-icon-actionable-pressed, #767676 );--comp-inputField-color-inactive-tooltip-icon-normal-default: var( --semantic-color-icon-actionable-default, #000 );--comp-inputField-color-inactive-tooltip-icon-normal-hover: var( --semantic-color-icon-actionable-hover, #767676 );--comp-inputField-color-inactive-tooltip-icon-normal-pressed: var( --semantic-color-icon-actionable-pressed, #767676 );--comp-inputField-color-inactive-tooltip-icon-warning-default: var( --semantic-color-icon-actionable-default, #000 );--comp-inputField-color-inactive-tooltip-icon-warning-hover: var( --semantic-color-icon-actionable-hover, #767676 );--comp-inputField-color-inactive-tooltip-icon-warning-pressed: var( --semantic-color-icon-actionable-pressed, #767676 );--comp-inputField-color-readOnly-bar-fill-error: var( --semantic-color-border-container-error, #a8000b );--comp-inputField-color-readOnly-bar-fill-normal: var( --semantic-color-border-container-interactive-disabled, #d7d8d6 );--comp-inputField-color-readOnly-bar-fill-warning: var( --semantic-color-border-container-interactive-disabled, #d7d8d6 );--comp-inputField-color-readOnly-box-background-error: var( --brand-hsbc-color-complementaryGrey-grey1, #f3f3f3 );--comp-inputField-color-readOnly-box-background-normal: var( --brand-hsbc-color-complementaryGrey-grey1, #f3f3f3 );--comp-inputField-color-readOnly-box-background-warning: var( --brand-hsbc-color-complementaryGrey-grey1, #f3f3f3 );--comp-inputField-color-readOnly-box-border-error: var( --semantic-color-border-container-error, #a8000b );--comp-inputField-color-readOnly-box-border-normal: var( --semantic-color-border-container-interactive-disabled, #d7d8d6 );--comp-inputField-color-readOnly-box-border-warning: var( --semantic-color-border-container-interactive-disabled, #d7d8d6 );--comp-inputField-color-readOnly-characterCount-text-error: var( --semantic-color-text-error, #a8000b );--comp-inputField-color-readOnly-characterCount-text-normal: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-readOnly-characterCount-text-warning: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-readOnly-control-icon-error-default: var( --brand-hsbc-color-complementaryGrey-grey6, #767676 );--comp-inputField-color-readOnly-control-icon-error-disabled: var( --semantic-color-icon-primary-disabled, #d7d8d6 );--comp-inputField-color-readOnly-control-icon-error-hover: var( --brand-hsbc-color-complementaryGrey-grey6, #767676 );--comp-inputField-color-readOnly-control-icon-error-pressed: var( --brand-hsbc-color-complementaryGrey-grey6, #767676 );--comp-inputField-color-readOnly-control-icon-normal-default: var( --brand-hsbc-color-complementaryGrey-grey6, #767676 );--comp-inputField-color-readOnly-control-icon-normal-disabled: var( --semantic-color-icon-primary-disabled, #d7d8d6 );--comp-inputField-color-readOnly-control-icon-normal-hover: var( --brand-hsbc-color-complementaryGrey-grey6, #767676 );--comp-inputField-color-readOnly-control-icon-normal-pressed: var( --brand-hsbc-color-complementaryGrey-grey6, #767676 );--comp-inputField-color-readOnly-control-icon-warning-default: var( --brand-hsbc-color-complementaryGrey-grey6, #767676 );--comp-inputField-color-readOnly-control-icon-warning-disabled: var( --semantic-color-icon-primary-disabled, #d7d8d6 );--comp-inputField-color-readOnly-control-icon-warning-hover: var( --brand-hsbc-color-complementaryGrey-grey6, #767676 );--comp-inputField-color-readOnly-control-icon-warning-pressed: var( --brand-hsbc-color-complementaryGrey-grey6, #767676 );--comp-inputField-color-readOnly-input-text-error-placeholder: var( --semantic-color-text-placeholder, #767676 );--comp-inputField-color-readOnly-input-text-error-populated: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-readOnly-input-text-normal-placeholder: var( --semantic-color-text-placeholder, #767676 );--comp-inputField-color-readOnly-input-text-normal-populated: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-readOnly-input-text-warning-placeholder: var( --semantic-color-text-placeholder, #767676 );--comp-inputField-color-readOnly-input-text-warning-populated: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-readOnly-prefix-text-error-placeholder: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-readOnly-prefix-text-error-populated: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-readOnly-prefix-text-normal-placeholder: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-readOnly-prefix-text-normal-populated: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-readOnly-prefix-text-warning-placeholder: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-readOnly-prefix-text-warning-populated: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-readOnly-subtitle-text-error: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-readOnly-subtitle-text-normal: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-readOnly-subtitle-text-warning: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-readOnly-suffix-text-error-placeholder: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-readOnly-suffix-text-error-populated: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-readOnly-suffix-text-normal-placeholder: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-readOnly-suffix-text-normal-populated: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-readOnly-suffix-text-warning-placeholder: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-readOnly-suffix-text-warning-populated: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-readOnly-title-text-error: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-readOnly-title-text-normal: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-readOnly-title-text-warning: var( --semantic-color-text-primary-default, #333 );--comp-inputField-color-readOnly-tooltip-icon-error-default: var( --semantic-color-icon-actionable-default, #000 );--comp-inputField-color-readOnly-tooltip-icon-error-hover: var( --semantic-color-icon-actionable-hover, #767676 );--comp-inputField-color-readOnly-tooltip-icon-error-pressed: var( --semantic-color-icon-actionable-pressed, #767676 );--comp-inputField-color-readOnly-tooltip-icon-normal-default: var( --semantic-color-icon-actionable-default, #000 );--comp-inputField-color-readOnly-tooltip-icon-normal-hover: var( --semantic-color-icon-actionable-hover, #767676 );--comp-inputField-color-readOnly-tooltip-icon-normal-pressed: var( --semantic-color-icon-actionable-pressed, #767676 );--comp-inputField-color-readOnly-tooltip-icon-warning-default: var( --semantic-color-icon-actionable-default, #000 );--comp-inputField-color-readOnly-tooltip-icon-warning-hover: var( --semantic-color-icon-actionable-hover, #767676 );--comp-inputField-color-readOnly-tooltip-icon-warning-pressed: var( --semantic-color-icon-actionable-pressed, #767676 );--comp-inputField-cornerRadius-box: 0rem;--comp-inputField-size-bar-height-error-active: .125rem;--comp-inputField-size-bar-height-error-inactive: 0rem;--comp-inputField-size-bar-height-normal-active: .125rem;--comp-inputField-size-bar-height-normal-inactive: 0rem;--comp-inputField-size-bar-height-warning-active: .125rem;--comp-inputField-size-bar-height-warning-inactive: 0rem;--comp-inputField-size-control: var(--semantic-size-icon-s, 1.125rem);--comp-inputField-size-handle: var(--semantic-size-icon-xs, 1rem);--comp-inputField-size-tooltip: var(--semantic-size-icon-s, 1.125rem);--comp-inputField-space-box-paddingHorizontal: var( --semantic-space-general-fixed-200, 1rem );--comp-inputField-space-box-paddingVertical: var( --semantic-space-general-fixed-150, .75rem );--comp-inputField-space-gapBoxCharacterCount: var( --semantic-space-general-fixed-100, .5rem );--comp-inputField-space-gapBoxMessage: var( --semantic-space-general-fixed-100, .5rem );--comp-inputField-space-gapContentControl: var( --semantic-space-general-fixed-100, .5rem );--comp-inputField-space-gapPrefixInputSuffix: var( --semantic-space-general-fixed-100, .5rem );--comp-inputField-space-gapTitleBox: var( --semantic-space-general-fixed-100, .5rem );--comp-inputField-space-gapTitleSubtitle: var( --semantic-space-general-fixed-0, 0rem );--comp-inputField-space-gapTitleTooltip: var( --semantic-space-general-fixed-100, .5rem );--comp-inputField-typography-active-title-error: var( --semantic-typography-content-body-normal, 400 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-active-title-error-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-active-title-normal: var( --semantic-typography-content-body-normal, 400 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-active-title-normal-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-active-title-warning: var( --semantic-typography-content-body-normal, 400 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-active-title-warning-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-active-subtitle-error: var( --semantic-typography-content-caption-quiet, 350 .875rem / 1.25rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-active-subtitle-error-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-active-subtitle-normal: var( --semantic-typography-content-caption-quiet, 350 .875rem / 1.25rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-active-subtitle-normal-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-active-subtitle-warning: var( --semantic-typography-content-caption-quiet, 350 .875rem / 1.25rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-active-subtitle-warning-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-active-input-error-populated: var( --semantic-typography-content-body-normal, 400 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-active-input-error-populated-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-active-input-error-placeholder: var( --semantic-typography-content-body-quiet, 350 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-active-input-error-placeholder-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-active-input-normal-populated: var( --semantic-typography-content-body-normal, 400 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-active-input-normal-populated-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-active-input-normal-placeholder: var( --semantic-typography-content-body-quiet, 350 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-active-input-normal-placeholder-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-active-input-warning-populated: var( --semantic-typography-content-body-normal, 400 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-active-input-warning-populated-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-active-input-warning-placeholder: var( --semantic-typography-content-body-quiet, 350 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-active-input-warning-placeholder-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-active-prefix-error-populated: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-active-prefix-error-populated-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-active-prefix-error-placeholder: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-active-prefix-error-placeholder-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-active-prefix-normal-populated: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-active-prefix-normal-populated-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-active-prefix-normal-placeholder: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-active-prefix-normal-placeholder-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-active-prefix-warning-populated: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-active-prefix-warning-populated-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-active-prefix-warning-placeholder: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-active-prefix-warning-placeholder-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-active-suffix-error-populated: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-active-suffix-error-populated-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-active-suffix-error-placeholder: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-active-suffix-error-placeholder-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-active-suffix-normal-populated: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-active-suffix-normal-populated-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-active-suffix-normal-placeholder: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-active-suffix-normal-placeholder-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-active-suffix-warning-populated: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-active-suffix-warning-populated-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-active-suffix-warning-placeholder: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-active-suffix-warning-placeholder-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-active-characterCount-error: var( --semantic-typography-content-footnote-normal, 400 .75rem / 1rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-active-characterCount-error-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-active-characterCount-normal: var( --semantic-typography-content-footnote-normal, 400 .75rem / 1rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-active-characterCount-normal-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-active-characterCount-warning: var( --semantic-typography-content-footnote-normal, 400 .75rem / 1rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-active-characterCount-warning-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-inactive-title-error: var( --semantic-typography-content-body-normal, 400 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-inactive-title-error-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-inactive-title-normal: var( --semantic-typography-content-body-normal, 400 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-inactive-title-normal-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-inactive-title-warning: var( --semantic-typography-content-body-normal, 400 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-inactive-title-warning-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-inactive-subtitle-error: var( --semantic-typography-content-caption-quiet, 350 .875rem / 1.25rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-inactive-subtitle-error-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-inactive-subtitle-normal: var( --semantic-typography-content-caption-quiet, 350 .875rem / 1.25rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-inactive-subtitle-normal-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-inactive-subtitle-warning: var( --semantic-typography-content-caption-quiet, 350 .875rem / 1.25rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-inactive-subtitle-warning-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-inactive-input-error-populated: var( --semantic-typography-content-body-normal, 400 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-inactive-input-error-populated-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-inactive-input-error-placeholder: var( --semantic-typography-content-body-quiet, 350 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-inactive-input-error-placeholder-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-inactive-input-normal-populated: var( --semantic-typography-content-body-normal, 400 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-inactive-input-normal-populated-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-inactive-input-normal-placeholder: var( --semantic-typography-content-body-quiet, 350 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-inactive-input-normal-placeholder-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-inactive-input-warning-populated: var( --semantic-typography-content-body-normal, 400 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-inactive-input-warning-populated-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-inactive-input-warning-placeholder: var( --semantic-typography-content-body-quiet, 350 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-inactive-input-warning-placeholder-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-inactive-prefix-error-populated: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-inactive-prefix-error-populated-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-inactive-prefix-error-placeholder: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-inactive-prefix-error-placeholder-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-inactive-prefix-normal-populated: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-inactive-prefix-normal-populated-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-inactive-prefix-normal-placeholder: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-inactive-prefix-normal-placeholder-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-inactive-prefix-warning-populated: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-inactive-prefix-warning-populated-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-inactive-prefix-warning-placeholder: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-inactive-prefix-warning-placeholder-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-inactive-suffix-error-populated: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-inactive-suffix-error-populated-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-inactive-suffix-error-placeholder: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-inactive-suffix-error-placeholder-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-inactive-suffix-normal-populated: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-inactive-suffix-normal-populated-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-inactive-suffix-normal-placeholder: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-inactive-suffix-normal-placeholder-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-inactive-suffix-warning-populated: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-inactive-suffix-warning-populated-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-inactive-suffix-warning-placeholder: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-inactive-suffix-warning-placeholder-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-inactive-characterCount-error: var( --semantic-typography-content-footnote-normal, 400 .75rem / 1rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-inactive-characterCount-error-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-inactive-characterCount-normal: var( --semantic-typography-content-footnote-normal, 400 .75rem / 1rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-inactive-characterCount-normal-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-inactive-characterCount-warning: var( --semantic-typography-content-footnote-normal, 400 .75rem / 1rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-inactive-characterCount-warning-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-readOnly-title-error: var( --semantic-typography-content-body-normal, 400 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-readOnly-title-error-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-readOnly-title-normal: var( --semantic-typography-content-body-normal, 400 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-readOnly-title-normal-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-readOnly-title-warning: var( --semantic-typography-content-body-normal, 400 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-readOnly-title-warning-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-readOnly-subtitle-error: var( --semantic-typography-content-caption-quiet, 350 .875rem / 1.25rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-readOnly-subtitle-error-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-readOnly-subtitle-normal: var( --semantic-typography-content-caption-quiet, 350 .875rem / 1.25rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-readOnly-subtitle-normal-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-readOnly-subtitle-warning: var( --semantic-typography-content-caption-quiet, 350 .875rem / 1.25rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-readOnly-subtitle-warning-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-readOnly-input-error-populated: var( --semantic-typography-content-body-normal, 400 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-readOnly-input-error-populated-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-readOnly-input-error-placeholder: var( --semantic-typography-content-body-quiet, 350 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-readOnly-input-error-placeholder-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-readOnly-input-normal-populated: var( --semantic-typography-content-body-normal, 400 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-readOnly-input-normal-populated-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-readOnly-input-normal-placeholder: var( --semantic-typography-content-body-quiet, 350 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-readOnly-input-normal-placeholder-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-readOnly-input-warning-populated: var( --semantic-typography-content-body-normal, 400 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-readOnly-input-warning-populated-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-readOnly-input-warning-placeholder: var( --semantic-typography-content-body-quiet, 350 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-readOnly-input-warning-placeholder-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-readOnly-prefix-error-populated: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-readOnly-prefix-error-populated-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-readOnly-prefix-error-placeholder: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-readOnly-prefix-error-placeholder-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-readOnly-prefix-normal-populated: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-readOnly-prefix-normal-populated-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-readOnly-prefix-normal-placeholder: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-readOnly-prefix-normal-placeholder-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-readOnly-prefix-warning-populated: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-readOnly-prefix-warning-populated-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-readOnly-prefix-warning-placeholder: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-readOnly-prefix-warning-placeholder-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-readOnly-suffix-error-populated: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-readOnly-suffix-error-populated-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-readOnly-suffix-error-placeholder: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-readOnly-suffix-error-placeholder-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-readOnly-suffix-normal-populated: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-readOnly-suffix-normal-populated-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-readOnly-suffix-normal-placeholder: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-readOnly-suffix-normal-placeholder-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-readOnly-suffix-warning-populated: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-readOnly-suffix-warning-populated-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-readOnly-suffix-warning-placeholder: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-readOnly-suffix-warning-placeholder-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-readOnly-characterCount-error: var( --semantic-typography-content-footnote-normal, 400 .75rem / 1rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-readOnly-characterCount-error-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-readOnly-characterCount-normal: var( --semantic-typography-content-footnote-normal, 400 .75rem / 1rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-readOnly-characterCount-normal-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-readOnly-characterCount-warning: var( --semantic-typography-content-footnote-normal, 400 .75rem / 1rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-readOnly-characterCount-warning-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-disabled-title: var( --semantic-typography-content-body-normal, 400 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-disabled-title-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-disabled-subtitle: var( --semantic-typography-content-caption-quiet, 350 .875rem / 1.25rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-disabled-subtitle-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-disabled-input-populated: var( --semantic-typography-content-body-normal, 400 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-disabled-input-populated-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-disabled-input-placeholder: var( --semantic-typography-content-body-quiet, 350 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-disabled-input-placeholder-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-disabled-prefix-populated: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-disabled-prefix-populated-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-disabled-prefix-placeholder: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-disabled-prefix-placeholder-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-disabled-suffix-populated: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-disabled-suffix-populated-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-disabled-suffix-placeholder: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-disabled-suffix-placeholder-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-inputField-typography-disabled-characterCount: var( --semantic-typography-content-footnote-normal, 400 .75rem / 1rem "Univers Next for HSBC", sans-serif );--comp-inputField-typography-disabled-characterCount-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem )}[data-bdl-theme=hsbc]{--comp-link-color-caretLink-icon-default-onDark: var( --brand-hsbc-color-core-white, #fff );--comp-link-color-caretLink-icon-default-onLight: var( --semantic-color-fill-primary-default, #db0011 );--comp-link-color-caretLink-icon-disabled-onDark: var( --brand-hsbc-color-complementaryGrey-grey6, #767676 );--comp-link-color-caretLink-icon-disabled-onLight: var( --semantic-color-fill-primary-disabled, #d7d8d6 );--comp-link-color-caretLink-icon-hover-onDark: var( --brand-hsbc-color-complementaryGrey-grey1, #f3f3f3 );--comp-link-color-caretLink-icon-hover-onLight: var( --semantic-color-fill-primary-default, #db0011 );--comp-link-color-caretLink-icon-pressed-onDark: var( --brand-hsbc-color-complementaryGrey-grey2, #ededed );--comp-link-color-caretLink-icon-pressed-onLight: var( --semantic-color-fill-primary-default, #db0011 );--comp-link-color-caretLink-text-default-onDark: var( --brand-hsbc-color-core-white, #fff );--comp-link-color-caretLink-text-default-onLight: var( --semantic-color-text-actionable-default, #000 );--comp-link-color-caretLink-text-disabled-onDark: var( --brand-hsbc-color-complementaryGrey-grey6, #767676 );--comp-link-color-caretLink-text-disabled-onLight: var( --semantic-color-text-actionable-disabled, #d7d8d6 );--comp-link-color-caretLink-text-hover-onDark: var( --brand-hsbc-color-complementaryGrey-grey1, #f3f3f3 );--comp-link-color-caretLink-text-hover-onLight: var( --semantic-color-text-actionable-hover, #767676 );--comp-link-color-caretLink-text-pressed-onDark: var( --brand-hsbc-color-complementaryGrey-grey2, #ededed );--comp-link-color-caretLink-text-pressed-onLight: var( --semantic-color-text-actionable-pressed, #767676 );--comp-link-color-iconLink-icon-default-onDark: var( --brand-hsbc-color-core-white, #fff );--comp-link-color-iconLink-icon-default-onLight: var( --semantic-color-icon-actionable-default, #000 );--comp-link-color-iconLink-icon-disabled-onDark: var( --brand-hsbc-color-complementaryGrey-grey6, #767676 );--comp-link-color-iconLink-icon-disabled-onLight: var( --semantic-color-icon-actionable-disabled, #d7d8d6 );--comp-link-color-iconLink-icon-hover-onDark: var( --brand-hsbc-color-complementaryGrey-grey1, #f3f3f3 );--comp-link-color-iconLink-icon-hover-onLight: var( --semantic-color-icon-actionable-hover, #767676 );--comp-link-color-iconLink-icon-pressed-onDark: var( --brand-hsbc-color-complementaryGrey-grey2, #ededed );--comp-link-color-iconLink-icon-pressed-onLight: var( --semantic-color-icon-actionable-pressed, #767676 );--comp-link-color-iconLink-text-default-onDark: var( --brand-hsbc-color-core-white, #fff );--comp-link-color-iconLink-text-default-onLight: var( --semantic-color-text-actionable-default, #000 );--comp-link-color-iconLink-text-disabled-onDark: var( --brand-hsbc-color-complementaryGrey-grey6, #767676 );--comp-link-color-iconLink-text-disabled-onLight: var( --semantic-color-text-actionable-disabled, #d7d8d6 );--comp-link-color-iconLink-text-hover-onDark: var( --brand-hsbc-color-complementaryGrey-grey1, #f3f3f3 );--comp-link-color-iconLink-text-hover-onLight: var( --semantic-color-text-actionable-hover, #767676 );--comp-link-color-iconLink-text-pressed-onDark: var( --brand-hsbc-color-complementaryGrey-grey2, #ededed );--comp-link-color-iconLink-text-pressed-onLight: var( --semantic-color-text-actionable-pressed, #767676 );--comp-link-color-textLink-icon-default-onDark: var( --brand-hsbc-color-core-white, #fff );--comp-link-color-textLink-icon-default-onLight: var( --semantic-color-icon-actionable-default, #000 );--comp-link-color-textLink-icon-disabled-onDark: var( --brand-hsbc-color-complementaryGrey-grey6, #767676 );--comp-link-color-textLink-icon-disabled-onLight: var( --semantic-color-icon-actionable-disabled, #d7d8d6 );--comp-link-color-textLink-icon-hover-onDark: var( --brand-hsbc-color-complementaryGrey-grey1, #f3f3f3 );--comp-link-color-textLink-icon-hover-onLight: var( --semantic-color-icon-actionable-hover, #767676 );--comp-link-color-textLink-icon-pressed-onDark: var( --brand-hsbc-color-complementaryGrey-grey2, #ededed );--comp-link-color-textLink-icon-pressed-onLight: var( --semantic-color-icon-actionable-pressed, #767676 );--comp-link-color-textLink-text-default-onDark: var( --brand-hsbc-color-core-white, #fff );--comp-link-color-textLink-text-default-onLight: var( --semantic-color-text-actionable-default, #000 );--comp-link-color-textLink-text-disabled-onDark: var( --brand-hsbc-color-complementaryGrey-grey6, #767676 );--comp-link-color-textLink-text-disabled-onLight: var( --semantic-color-text-actionable-disabled, #d7d8d6 );--comp-link-color-textLink-text-hover-onDark: var( --brand-hsbc-color-complementaryGrey-grey1, #f3f3f3 );--comp-link-color-textLink-text-hover-onLight: var( --semantic-color-text-actionable-hover, #656565 );--comp-link-color-textLink-text-pressed-onDark: var( --brand-hsbc-color-complementaryGrey-grey2, #ededed );--comp-link-color-textLink-text-pressed-onLight: var( --semantic-color-text-actionable-pressed, #767676 );--comp-link-size-caretLink-body-icon-height: .75rem;--comp-link-size-caretLink-caption-icon-height: .625rem;--comp-link-size-caretLink-contentTitle-icon-height: .625rem;--comp-link-size-caretLink-contentTitle-icon-height-l: .75rem;--comp-link-size-caretLink-display-icon-height: 1rem;--comp-link-size-caretLink-display-icon-height-l: 1.375rem;--comp-link-size-caretLink-footnote-icon-height: .5rem;--comp-link-size-caretLink-headline-icon-height: .875rem;--comp-link-size-caretLink-headline-icon-height-l: 1.125rem;--comp-link-size-caretLink-subheadline-icon-height: .75rem;--comp-link-size-caretLink-subheadline-icon-height-l: .875rem;--comp-link-size-iconLink-footnote-icon: .875rem;--comp-link-size-iconLink-caption-icon: var(--semantic-size-icon-xs, 1rem);--comp-link-size-iconLink-body-icon: var(--semantic-size-icon-s, 1.125rem);--comp-link-size-iconLink-contentTitle-icon: var( --semantic-size-icon-m, 1.5rem );--comp-link-size-iconLink-subheadline-icon: var( --semantic-size-icon-m, 1.5rem );--comp-link-size-iconLink-headline-icon: var(--semantic-size-icon-m, 1.5rem);--comp-link-size-iconLink-display-icon: var(--semantic-size-icon-m, 1.5rem);--comp-link-size-textLink-footnote-icon: .875rem;--comp-link-size-textLink-caption-icon: var(--semantic-size-icon-xs, 1rem);--comp-link-size-textLink-body-icon: var(--semantic-size-icon-s, 1.125rem);--comp-link-size-textLink-contentTitle-icon: var( --semantic-size-icon-m, 1.5rem );--comp-link-size-textLink-subheadline-icon: var( --semantic-size-icon-m, 1.5rem );--comp-link-size-textLink-headline-icon: var(--semantic-size-icon-m, 1.5rem);--comp-link-size-textLink-display-icon: var(--semantic-size-icon-m, 1.5rem);--comp-link-space-caretLink-body-gapLabelIcon: .375rem;--comp-link-space-caretLink-caption-gapLabelIcon: .3125rem;--comp-link-space-caretLink-contentTitle-gapLabelIcon: .3125rem;--comp-link-space-caretLink-contentTitle-gapLabelIcon-l: .375rem;--comp-link-space-caretLink-display-gapLabelIcon: .5rem;--comp-link-space-caretLink-display-gapLabelIcon-l: .6875rem;--comp-link-space-caretLink-footnote-gapLabelIcon: .25rem;--comp-link-space-caretLink-headline-gapLabelIcon: .4375rem;--comp-link-space-caretLink-headline-gapLabelIcon-l: .5625rem;--comp-link-space-caretLink-subheadline-gapLabelIcon: .375rem;--comp-link-space-caretLink-subheadline-gapLabelIcon-l: .4375rem;--comp-link-space-iconLink-gapIconLabel: var( --semantic-space-general-fixed-100, .5rem );--comp-link-space-textLink-gapLabelIcon: var( --semantic-space-general-fixed-100, .5rem );--comp-link-typography-footnote-default: var( --semantic-typography-content-footnote-loud, 500 .75rem / 1rem "Univers Next for HSBC", sans-serif );--comp-link-typography-footnote-default-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-link-typography-footnote-hover: var( --semantic-typography-content-footnote-loud, 500 .75rem / 1rem "Univers Next for HSBC", sans-serif );--comp-link-typography-footnote-hover-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-link-typography-footnote-pressed: var( --semantic-typography-content-footnote-loud, 500 .75rem / 1rem "Univers Next for HSBC", sans-serif );--comp-link-typography-footnote-pressed-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-link-typography-footnote-disabled: var( --semantic-typography-content-footnote-loud, 500 .75rem / 1rem "Univers Next for HSBC", sans-serif );--comp-link-typography-footnote-disabled-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-link-typography-caption-default: var( --semantic-typography-content-caption-loud, 500 .875rem / 1.25rem "Univers Next for HSBC", sans-serif );--comp-link-typography-caption-default-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-link-typography-caption-hover: var( --semantic-typography-content-caption-loud, 500 .875rem / 1.25rem "Univers Next for HSBC", sans-serif );--comp-link-typography-caption-hover-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-link-typography-caption-pressed: var( --semantic-typography-content-caption-loud, 500 .875rem / 1.25rem "Univers Next for HSBC", sans-serif );--comp-link-typography-caption-pressed-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-link-typography-caption-disabled: var( --semantic-typography-content-caption-loud, 500 .875rem / 1.25rem "Univers Next for HSBC", sans-serif );--comp-link-typography-caption-disabled-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-link-typography-body-default: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-link-typography-body-default-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-link-typography-body-hover: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-link-typography-body-hover-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-link-typography-body-pressed: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-link-typography-body-pressed-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-link-typography-body-disabled: var( --semantic-typography-content-body-loud, 500 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-link-typography-body-disabled-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-link-typography-contentTitle-default: var( --semantic-typography-heading-contentTitle-normal, 400 1.1875rem / 1.6875rem "Univers Next for HSBC", sans-serif );--comp-link-typography-contentTitle-default-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-link-typography-contentTitle-hover: var( --semantic-typography-heading-contentTitle-normal, 400 1.1875rem / 1.6875rem "Univers Next for HSBC", sans-serif );--comp-link-typography-contentTitle-hover-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-link-typography-contentTitle-pressed: var( --semantic-typography-heading-contentTitle-normal, 400 1.1875rem / 1.6875rem "Univers Next for HSBC", sans-serif );--comp-link-typography-contentTitle-pressed-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-link-typography-contentTitle-disabled: var( --semantic-typography-heading-contentTitle-normal, 400 1.1875rem / 1.6875rem "Univers Next for HSBC", sans-serif );--comp-link-typography-contentTitle-disabled-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-link-typography-subheadline-default: var( --semantic-typography-heading-subheadline-normal, 400 1.4375rem / 1.875rem "Univers Next for HSBC", sans-serif );--comp-link-typography-subheadline-default-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-link-typography-subheadline-hover: var( --semantic-typography-heading-subheadline-normal, 400 1.4375rem / 1.875rem "Univers Next for HSBC", sans-serif );--comp-link-typography-subheadline-hover-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-link-typography-subheadline-pressed: var( --semantic-typography-heading-subheadline-normal, 400 1.4375rem / 1.875rem "Univers Next for HSBC", sans-serif );--comp-link-typography-subheadline-pressed-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-link-typography-subheadline-disabled: var( --semantic-typography-heading-subheadline-normal, 400 1.4375rem / 1.875rem "Univers Next for HSBC", sans-serif );--comp-link-typography-subheadline-disabled-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-link-typography-headline-default: var( --semantic-typography-heading-headline-normal, 400 1.75rem / 2.25rem "Univers Next for HSBC", sans-serif );--comp-link-typography-headline-default-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-link-typography-headline-hover: var( --semantic-typography-heading-headline-normal, 400 1.75rem / 2.25rem "Univers Next for HSBC", sans-serif );--comp-link-typography-headline-hover-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-link-typography-headline-pressed: var( --semantic-typography-heading-headline-normal, 400 1.75rem / 2.25rem "Univers Next for HSBC", sans-serif );--comp-link-typography-headline-pressed-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-link-typography-headline-disabled: var( --semantic-typography-heading-headline-normal, 400 1.75rem / 2.25rem "Univers Next for HSBC", sans-serif );--comp-link-typography-headline-disabled-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-link-typography-display-default: var( --semantic-typography-heading-display-normal, 400 2.0625rem / 2.5rem "Univers Next for HSBC", sans-serif );--comp-link-typography-display-default-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-link-typography-display-hover: var( --semantic-typography-heading-display-normal, 400 2.0625rem / 2.5rem "Univers Next for HSBC", sans-serif );--comp-link-typography-display-hover-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-link-typography-display-pressed: var( --semantic-typography-heading-display-normal, 400 2.0625rem / 2.5rem "Univers Next for HSBC", sans-serif );--comp-link-typography-display-pressed-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-link-typography-display-disabled: var( --semantic-typography-heading-display-normal, 400 2.0625rem / 2.5rem "Univers Next for HSBC", sans-serif );--comp-link-typography-display-disabled-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem )}[data-bdl-theme=hsbc]{--comp-mapMarker-borderWidth-pin: .0625rem;--comp-mapMarker-color-pin-border: var(--brand-hsbc-color-core-white, #fff);--comp-mapMarker-color-pin-fill: var(--semantic-color-fill-selected-default, #000);--comp-mapMarker-color-pin-text: var(--brand-hsbc-color-core-white, #fff);--comp-mapMarker-size-pin-height: 2.6875rem;--comp-mapMarker-size-pin-width: 2.25rem;--comp-mapMarker-shadow: var(--semantic-shadow-container-elevated, 0rem .125rem .5rem 0rem #0003);--comp-mapMarker-typography-text: var( --semantic-typography-content-caption-normal, 400 .875rem/1.25rem "Univers Next for HSBC", sans-serif );--comp-mapMarker-typography-text-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem)}[data-bdl-theme=hsbc]{--comp-messageCard-borderWidth-highlighted: 0rem;--comp-messageCard-borderWidth-standard: 0rem;--comp-messageCard-borderWidth-subtle: 0rem;--comp-messageCard-color-highlighted-action-icon-default: var(--brand-hsbc-color-core-hsbcRed, #db0011);--comp-messageCard-color-highlighted-action-icon-disabled: var(--semantic-color-icon-actionable-disabled, #d7d8d6);--comp-messageCard-color-highlighted-action-icon-hover: var(--brand-hsbc-color-complementaryRed-red2, #ba1110);--comp-messageCard-color-highlighted-action-icon-pressed: var(--brand-hsbc-color-complementaryRed-red3, #730014);--comp-messageCard-color-highlighted-action-text-default: var(--brand-hsbc-color-core-hsbcRed, #db0011);--comp-messageCard-color-highlighted-action-text-disabled: var(--semantic-color-text-actionable-disabled, #d7d8d6);--comp-messageCard-color-highlighted-action-text-hover: var(--brand-hsbc-color-complementaryRed-red2, #ba1110);--comp-messageCard-color-highlighted-action-text-pressed: var(--brand-hsbc-color-complementaryRed-red3, #730014);--comp-messageCard-color-highlighted-background: var(--semantic-color-background-container-static-standard, #fff);--comp-messageCard-color-highlighted-bar-fill: var(--semantic-color-fill-primary-default, #db0011);--comp-messageCard-color-highlighted-border: var(--semantic-color-background-container-static-standard, #fff);--comp-messageCard-color-highlighted-close-icon-default: var(--semantic-color-icon-actionable-default, #000);--comp-messageCard-color-highlighted-close-icon-hover: var(--semantic-color-icon-actionable-hover, #767676);--comp-messageCard-color-highlighted-close-icon-pressed: var(--semantic-color-icon-actionable-pressed, #767676);--comp-messageCard-color-highlighted-content-text: var(--semantic-color-text-primary-default, #333);--comp-messageCard-color-highlighted-title-text: var(--semantic-color-text-primary-default, #333);--comp-messageCard-color-standard-action-icon-default: var(--brand-hsbc-color-core-hsbcRed, #db0011);--comp-messageCard-color-standard-action-icon-disabled: var(--semantic-color-icon-actionable-disabled, #d7d8d6);--comp-messageCard-color-standard-action-icon-hover: var(--brand-hsbc-color-complementaryRed-red2, #ba1110);--comp-messageCard-color-standard-action-icon-pressed: var(--brand-hsbc-color-complementaryRed-red3, #730014);--comp-messageCard-color-standard-action-text-default: var(--brand-hsbc-color-core-hsbcRed, #db0011);--comp-messageCard-color-standard-action-text-disabled: var(--semantic-color-text-actionable-disabled, #d7d8d6);--comp-messageCard-color-standard-action-text-hover: var(--brand-hsbc-color-complementaryRed-red2, #ba1110);--comp-messageCard-color-standard-action-text-pressed: var(--brand-hsbc-color-complementaryRed-red3, #730014);--comp-messageCard-color-standard-background: var(--semantic-color-background-container-static-standard, #fff);--comp-messageCard-color-standard-bar-fill: var(--semantic-color-background-container-static-standard, #fff);--comp-messageCard-color-standard-border: var(--semantic-color-background-container-static-standard, #fff);--comp-messageCard-color-standard-close-icon-default: var(--semantic-color-icon-actionable-default, #000);--comp-messageCard-color-standard-close-icon-hover: var(--semantic-color-icon-actionable-hover, #767676);--comp-messageCard-color-standard-close-icon-pressed: var(--semantic-color-icon-actionable-pressed, #767676);--comp-messageCard-color-standard-content-text: var(--semantic-color-text-primary-default, #333);--comp-messageCard-color-standard-title-text: var(--semantic-color-text-primary-default, #333);--comp-messageCard-color-subtle-action-icon-default: var(--brand-hsbc-color-core-hsbcRed, #db0011);--comp-messageCard-color-subtle-action-icon-disabled: var(--semantic-color-icon-actionable-disabled, #d7d8d6);--comp-messageCard-color-subtle-action-icon-hover: var(--brand-hsbc-color-complementaryRed-red2, #ba1110);--comp-messageCard-color-subtle-action-icon-pressed: var(--brand-hsbc-color-complementaryRed-red3, #730014);--comp-messageCard-color-subtle-action-text-default: var(--brand-hsbc-color-core-hsbcRed, #db0011);--comp-messageCard-color-subtle-action-text-disabled: var(--semantic-color-text-actionable-disabled, #d7d8d6);--comp-messageCard-color-subtle-action-text-hover: var(--brand-hsbc-color-complementaryRed-red2, #ba1110);--comp-messageCard-color-subtle-action-text-pressed: var(--brand-hsbc-color-complementaryRed-red3, #730014);--comp-messageCard-color-subtle-background: var(--brand-hsbc-color-transparent-white, #fff0);--comp-messageCard-color-subtle-bar-fill: var(--brand-hsbc-color-transparent-white, #fff0);--comp-messageCard-color-subtle-border: var(--brand-hsbc-color-transparent-white, #fff0);--comp-messageCard-color-subtle-close-icon-default: var(--semantic-color-icon-actionable-default, #000);--comp-messageCard-color-subtle-close-icon-hover: var(--semantic-color-icon-actionable-hover, #767676);--comp-messageCard-color-subtle-close-icon-pressed: var(--semantic-color-icon-actionable-pressed, #767676);--comp-messageCard-color-subtle-content-text: var(--semantic-color-text-primary-default, #333);--comp-messageCard-color-subtle-title-text: var(--semantic-color-text-primary-default, #333);--comp-messageCard-cornerRadius-highlighted: var(--semantic-cornerRadius-container-normal, 0rem);--comp-messageCard-cornerRadius-standard: var(--semantic-cornerRadius-container-normal, 0rem);--comp-messageCard-cornerRadius-subtle: var(--semantic-cornerRadius-container-normal, 0rem);--comp-messageCard-size-highlighted-action-icon: var(--semantic-size-icon-xs, 1rem);--comp-messageCard-size-highlighted-bar-width: .25rem;--comp-messageCard-size-highlighted-close-icon: var(--semantic-size-icon-s, 1.125rem);--comp-messageCard-size-highlighted-cornerCut-bottomTrailing: 2rem;--comp-messageCard-size-highlighted-visual: var(--semantic-size-icon-l, 2.25rem);--comp-messageCard-size-standard-action-icon: var(--semantic-size-icon-xs, 1rem);--comp-messageCard-size-standard-bar-width: 0rem;--comp-messageCard-size-standard-close-icon: var(--semantic-size-icon-s, 1.125rem);--comp-messageCard-size-standard-cornerCut-bottomTrailing: 2rem;--comp-messageCard-size-standard-visual: var(--semantic-size-visual-l, 3.5rem);--comp-messageCard-size-subtle-action-icon: var(--semantic-size-icon-xs, 1rem);--comp-messageCard-size-subtle-bar-width: 0rem;--comp-messageCard-size-subtle-close-icon: var(--semantic-size-icon-s, 1.125rem);--comp-messageCard-size-subtle-cornerCut-bottomTrailing: 0rem;--comp-messageCard-size-subtle-visual: var(--semantic-size-visual-l, 3.5rem);--comp-messageCard-shadow-standard: 0rem .125rem .5rem 0rem var(--brand-hsbc-color-translucent-black-20, #0003);--comp-messageCard-shadow-highlighted: 0rem .125rem .5rem 0rem var(--brand-hsbc-color-translucent-black-20, #0003);--comp-messageCard-shadow-subtle: 0rem 0rem 0rem 0rem var(--brand-hsbc-color-transparent-white, #fff0);--comp-messageCard-space-highlighted-action-gapLabelIcon: var(--semantic-space-general-fixed-100, .5rem);--comp-messageCard-space-highlighted-actionGroup-gapHorizontal: var(--semantic-space-item-gap-normal, 1rem);--comp-messageCard-space-highlighted-actionGroup-gapVertical: var(--semantic-space-item-gap-tight, .5rem);--comp-messageCard-space-highlighted-content-gapContentAction: var(--semantic-space-general-fixed-150, .75rem);--comp-messageCard-space-highlighted-content-gapTitleClose: var(--semantic-space-item-gap-tight, .5rem);--comp-messageCard-space-highlighted-content-gapTitleContent: var(--semantic-space-general-fixed-50, .25rem);--comp-messageCard-space-highlighted-gapVisualContent: var(--semantic-space-item-gap-tight, .5rem);--comp-messageCard-space-highlighted-paddingHorizontal: var(--semantic-space-container-padding-normal, 1rem);--comp-messageCard-space-highlighted-paddingVertical: var(--semantic-space-container-padding-normal, 1rem);--comp-messageCard-space-standard-action-gapLabelIcon: var(--semantic-space-general-fixed-100, .5rem);--comp-messageCard-space-standard-actionGroup-gapHorizontal: var(--semantic-space-item-gap-normal, 1rem);--comp-messageCard-space-standard-actionGroup-gapVertical: var(--semantic-space-item-gap-tight, .5rem);--comp-messageCard-space-standard-content-gapContentAction: var(--semantic-space-general-fixed-150, .75rem);--comp-messageCard-space-standard-content-gapTitleClose: var(--semantic-space-item-gap-tight, .5rem);--comp-messageCard-space-standard-content-gapTitleContent: var(--semantic-space-general-fixed-50, .25rem);--comp-messageCard-space-standard-gapVisualContent: var(--semantic-space-item-gap-tight, .5rem);--comp-messageCard-space-standard-paddingHorizontal: var(--semantic-space-container-padding-normal, 1rem);--comp-messageCard-space-standard-paddingVertical: var(--semantic-space-container-padding-normal, 1rem);--comp-messageCard-space-subtle-action-gapLabelIcon: var(--semantic-space-general-fixed-100, .5rem);--comp-messageCard-space-subtle-actionGroup-gapHorizontal: var(--semantic-space-item-gap-normal, 1rem);--comp-messageCard-space-subtle-actionGroup-gapVertical: var(--semantic-space-item-gap-tight, .5rem);--comp-messageCard-space-subtle-content-gapContentAction: var(--semantic-space-general-fixed-150, .75rem);--comp-messageCard-space-subtle-content-gapTitleClose: var(--semantic-space-item-gap-tight, .5rem);--comp-messageCard-space-subtle-content-gapTitleContent: var(--semantic-space-general-fixed-50, .25rem);--comp-messageCard-space-subtle-gapVisualContent: var(--semantic-space-item-gap-tight, .5rem);--comp-messageCard-space-subtle-paddingHorizontal: var(--semantic-space-container-padding-normal, 1rem);--comp-messageCard-space-subtle-paddingVertical: var(--semantic-space-container-padding-normal, 1rem);--comp-messageCard-typography-standard-title: var( --semantic-typography-content-caption-loud, 500 .875rem/1.25rem "Univers Next for HSBC", sans-serif );--comp-messageCard-typography-standard-title-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem);--comp-messageCard-typography-standard-content: var( --semantic-typography-content-caption-normal, 400 .875rem/1.25rem "Univers Next for HSBC", sans-serif );--comp-messageCard-typography-standard-content-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-messageCard-typography-standard-action-default: var( --semantic-typography-content-caption-loud, 500 .875rem/1.25rem "Univers Next for HSBC", sans-serif );--comp-messageCard-typography-standard-action-default-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-messageCard-typography-standard-action-hover: var( --semantic-typography-content-caption-loud, 500 .875rem/1.25rem "Univers Next for HSBC", sans-serif );--comp-messageCard-typography-standard-action-hover-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-messageCard-typography-standard-action-pressed: var( --semantic-typography-content-caption-loud, 500 .875rem/1.25rem "Univers Next for HSBC", sans-serif );--comp-messageCard-typography-standard-action-pressed-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-messageCard-typography-standard-action-disabled: var( --semantic-typography-content-caption-loud, 500 .875rem/1.25rem "Univers Next for HSBC", sans-serif );--comp-messageCard-typography-standard-action-disabled-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-messageCard-typography-highlighted-title: var( --semantic-typography-content-caption-loud, 500 .875rem/1.25rem "Univers Next for HSBC", sans-serif );--comp-messageCard-typography-highlighted-title-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-messageCard-typography-highlighted-content: var( --semantic-typography-content-caption-normal, 400 .875rem/1.25rem "Univers Next for HSBC", sans-serif );--comp-messageCard-typography-highlighted-content-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-messageCard-typography-highlighted-action-default: var( --semantic-typography-content-caption-loud, 500 .875rem/1.25rem "Univers Next for HSBC", sans-serif );--comp-messageCard-typography-highlighted-action-default-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-messageCard-typography-highlighted-action-hover: var( --semantic-typography-content-caption-loud, 500 .875rem/1.25rem "Univers Next for HSBC", sans-serif );--comp-messageCard-typography-highlighted-action-hover-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-messageCard-typography-highlighted-action-pressed: var( --semantic-typography-content-caption-loud, 500 .875rem/1.25rem "Univers Next for HSBC", sans-serif );--comp-messageCard-typography-highlighted-action-pressed-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-messageCard-typography-highlighted-action-disabled: var( --semantic-typography-content-caption-loud, 500 .875rem/1.25rem "Univers Next for HSBC", sans-serif );--comp-messageCard-typography-highlighted-action-disabled-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-messageCard-typography-subtle-title: var( --semantic-typography-content-caption-loud, 500 .875rem/1.25rem "Univers Next for HSBC", sans-serif );--comp-messageCard-typography-subtle-title-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem);--comp-messageCard-typography-subtle-content: var( --semantic-typography-content-caption-normal, 400 .875rem/1.25rem "Univers Next for HSBC", sans-serif );--comp-messageCard-typography-subtle-content-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem);--comp-messageCard-typography-subtle-action-default: var( --semantic-typography-content-caption-loud, 500 .875rem/1.25rem "Univers Next for HSBC", sans-serif );--comp-messageCard-typography-subtle-action-default-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-messageCard-typography-subtle-action-hover: var( --semantic-typography-content-caption-loud, 500 .875rem/1.25rem "Univers Next for HSBC", sans-serif );--comp-messageCard-typography-subtle-action-hover-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-messageCard-typography-subtle-action-pressed: var( --semantic-typography-content-caption-loud, 500 .875rem/1.25rem "Univers Next for HSBC", sans-serif );--comp-messageCard-typography-subtle-action-pressed-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-messageCard-typography-subtle-action-disabled: var( --semantic-typography-content-caption-loud, 500 .875rem/1.25rem "Univers Next for HSBC", sans-serif );--comp-messageCard-typography-subtle-action-disabled-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem )}[data-bdl-theme=hsbc]{--comp-modal-cornerRadius-container: var(--semantic-cornerRadius-container-normal, 0rem);--comp-modal-cornerRadius-container-bottom: .5rem}[data-bdl-theme=hsbc]{--comp-nsTopNav-borderWidth-divider-onScroll: 0rem;--comp-nsTopNav-borderWidth-divider-rested: 0rem;--comp-nsTopNav-borderWidth-separator-onScroll: var(--semantic-borderWidth-divider, .0625rem);--comp-nsTopNav-borderWidth-separator-rested: var(--semantic-borderWidth-divider, .0625rem);--comp-nsTopNav-color-action-icon-default-onScroll-onDark: var(--semantic-color-icon-actionable-default, #000);--comp-nsTopNav-color-action-icon-default-onScroll-onLight: var(--semantic-color-icon-actionable-default, #000);--comp-nsTopNav-color-action-icon-default-rested-onDark: var(--brand-hsbc-color-core-white, #fff);--comp-nsTopNav-color-action-icon-default-rested-onLight: var(--semantic-color-icon-actionable-default, #000);--comp-nsTopNav-color-action-icon-disabled-onScroll-onDark: var(--semantic-color-icon-actionable-disabled, #d7d8d6);--comp-nsTopNav-color-action-icon-disabled-onScroll-onLight: var(--semantic-color-icon-actionable-disabled, #d7d8d6);--comp-nsTopNav-color-action-icon-disabled-rested-onDark: var(--brand-hsbc-color-complementaryGrey-grey6, #767676);--comp-nsTopNav-color-action-icon-disabled-rested-onLight: var(--semantic-color-icon-actionable-disabled, #d7d8d6);--comp-nsTopNav-color-action-icon-hover-onScroll-onDark: var(--semantic-color-icon-actionable-hover, #767676);--comp-nsTopNav-color-action-icon-hover-onScroll-onLight: var(--semantic-color-icon-actionable-hover, #767676);--comp-nsTopNav-color-action-icon-hover-rested-onDark: var(--brand-hsbc-color-complementaryGrey-grey1, #f3f3f3);--comp-nsTopNav-color-action-icon-hover-rested-onLight: var(--semantic-color-icon-actionable-hover, #767676);--comp-nsTopNav-color-action-icon-pressed-onScroll-onDark: var(--semantic-color-icon-actionable-pressed, #767676);--comp-nsTopNav-color-action-icon-pressed-onScroll-onLight: var(--semantic-color-icon-actionable-pressed, #767676);--comp-nsTopNav-color-action-icon-pressed-rested-onDark: var(--brand-hsbc-color-complementaryGrey-grey2, #ededed);--comp-nsTopNav-color-action-icon-pressed-rested-onLight: var(--semantic-color-icon-actionable-pressed, #767676);--comp-nsTopNav-color-action-text-default-onScroll-onDark: var(--semantic-color-text-actionable-default, #000);--comp-nsTopNav-color-action-text-default-onScroll-onLight: var(--semantic-color-text-actionable-default, #000);--comp-nsTopNav-color-action-text-default-rested-onDark: var(--brand-hsbc-color-core-white, #fff);--comp-nsTopNav-color-action-text-default-rested-onLight: var(--semantic-color-text-actionable-default, #000);--comp-nsTopNav-color-action-text-disabled-onScroll-onDark: var(--semantic-color-text-actionable-disabled, #d7d8d6);--comp-nsTopNav-color-action-text-disabled-onScroll-onLight: var(--semantic-color-text-actionable-disabled, #d7d8d6);--comp-nsTopNav-color-action-text-disabled-rested-onDark: var(--brand-hsbc-color-complementaryGrey-grey6, #767676);--comp-nsTopNav-color-action-text-disabled-rested-onLight: var(--semantic-color-text-actionable-disabled, #d7d8d6);--comp-nsTopNav-color-action-text-hover-onScroll-onDark: var(--semantic-color-text-actionable-hover, #767676);--comp-nsTopNav-color-action-text-hover-onScroll-onLight: var(--semantic-color-text-actionable-hover, #767676);--comp-nsTopNav-color-action-text-hover-rested-onDark: var(--brand-hsbc-color-complementaryGrey-grey1, #f3f3f3);--comp-nsTopNav-color-action-text-hover-rested-onLight: var(--semantic-color-text-actionable-hover, #767676);--comp-nsTopNav-color-action-text-pressed-onScroll-onDark: var(--semantic-color-text-actionable-pressed, #767676);--comp-nsTopNav-color-action-text-pressed-onScroll-onLight: var(--semantic-color-text-actionable-pressed, #767676);--comp-nsTopNav-color-action-text-pressed-rested-onDark: var(--brand-hsbc-color-complementaryGrey-grey2, #ededed);--comp-nsTopNav-color-action-text-pressed-rested-onLight: var(--semantic-color-text-actionable-pressed, #767676);--comp-nsTopNav-color-background-onScroll-onDark: var(--semantic-color-background-container-static-standard, #fff);--comp-nsTopNav-color-background-onScroll-onLight: var(--semantic-color-background-container-static-standard, #fff);--comp-nsTopNav-color-background-rested-onDark: var(--brand-hsbc-color-transparent-white, #fff0);--comp-nsTopNav-color-background-rested-onLight: var(--brand-hsbc-color-transparent-white, #fff0);--comp-nsTopNav-color-badge-fill-onScroll-onDark: var(--semantic-color-fill-notification, #db0011);--comp-nsTopNav-color-badge-fill-onScroll-onLight: var(--semantic-color-fill-notification, #db0011);--comp-nsTopNav-color-badge-fill-rested-onDark: var(--semantic-color-fill-notification, #db0011);--comp-nsTopNav-color-badge-fill-rested-onLight: var(--semantic-color-fill-notification, #db0011);--comp-nsTopNav-color-bar-fill-onScroll-onDark: var(--semantic-color-fill-primary-default, #db0011);--comp-nsTopNav-color-bar-fill-onScroll-onLight: var(--semantic-color-fill-primary-default, #db0011);--comp-nsTopNav-color-bar-fill-rested-onDark: var(--brand-hsbc-color-core-white, #fff);--comp-nsTopNav-color-bar-fill-rested-onLight: var(--semantic-color-fill-primary-default, #db0011);--comp-nsTopNav-color-divider-fill-onScroll-onDark: var(--brand-hsbc-color-transparent-white, #fff0);--comp-nsTopNav-color-divider-fill-onScroll-onLight: var(--brand-hsbc-color-transparent-white, #fff0);--comp-nsTopNav-color-divider-fill-rested-onDark: var(--brand-hsbc-color-transparent-white, #fff0);--comp-nsTopNav-color-divider-fill-rested-onLight: var(--brand-hsbc-color-transparent-white, #fff0);--comp-nsTopNav-color-home-icon-default-onScroll-onDark: var(--semantic-color-icon-actionable-default, #000);--comp-nsTopNav-color-home-icon-default-onScroll-onLight: var(--semantic-color-icon-actionable-default, #000);--comp-nsTopNav-color-home-icon-default-rested-onDark: var(--brand-hsbc-color-core-white, #fff);--comp-nsTopNav-color-home-icon-default-rested-onLight: var(--semantic-color-icon-actionable-default, #000);--comp-nsTopNav-color-home-icon-disabled-onScroll-onDark: var(--semantic-color-icon-actionable-disabled, #d7d8d6);--comp-nsTopNav-color-home-icon-disabled-onScroll-onLight: var(--semantic-color-icon-actionable-disabled, #d7d8d6);--comp-nsTopNav-color-home-icon-disabled-rested-onDark: var(--brand-hsbc-color-complementaryGrey-grey6, #767676);--comp-nsTopNav-color-home-icon-disabled-rested-onLight: var(--semantic-color-icon-actionable-disabled, #d7d8d6);--comp-nsTopNav-color-home-icon-hover-onScroll-onDark: var(--semantic-color-icon-actionable-hover, #767676);--comp-nsTopNav-color-home-icon-hover-onScroll-onLight: var(--semantic-color-icon-actionable-hover, #767676);--comp-nsTopNav-color-home-icon-hover-rested-onDark: var(--brand-hsbc-color-complementaryGrey-grey1, #f3f3f3);--comp-nsTopNav-color-home-icon-hover-rested-onLight: var(--semantic-color-icon-actionable-hover, #767676);--comp-nsTopNav-color-home-icon-pressed-onScroll-onDark: var(--semantic-color-icon-actionable-pressed, #767676);--comp-nsTopNav-color-home-icon-pressed-onScroll-onLight: var(--semantic-color-icon-actionable-pressed, #767676);--comp-nsTopNav-color-home-icon-pressed-rested-onDark: var(--brand-hsbc-color-complementaryGrey-grey2, #ededed);--comp-nsTopNav-color-home-icon-pressed-rested-onLight: var(--semantic-color-icon-actionable-pressed, #767676);--comp-nsTopNav-color-menu-icon-default-onScroll-onDark: var(--semantic-color-icon-actionable-default, #000);--comp-nsTopNav-color-menu-icon-default-onScroll-onLight: var(--semantic-color-icon-actionable-default, #000);--comp-nsTopNav-color-menu-icon-default-rested-onDark: var(--brand-hsbc-color-core-white, #fff);--comp-nsTopNav-color-menu-icon-default-rested-onLight: var(--semantic-color-icon-actionable-default, #000);--comp-nsTopNav-color-menu-icon-disabled-onScroll-onDark: var(--semantic-color-icon-actionable-disabled, #d7d8d6);--comp-nsTopNav-color-menu-icon-disabled-onScroll-onLight: var(--semantic-color-icon-actionable-disabled, #d7d8d6);--comp-nsTopNav-color-menu-icon-disabled-rested-onDark: var(--brand-hsbc-color-complementaryGrey-grey6, #767676);--comp-nsTopNav-color-menu-icon-disabled-rested-onLight: var(--semantic-color-icon-actionable-disabled, #d7d8d6);--comp-nsTopNav-color-menu-icon-hover-onScroll-onDark: var(--semantic-color-icon-actionable-hover, #767676);--comp-nsTopNav-color-menu-icon-hover-onScroll-onLight: var(--semantic-color-icon-actionable-hover, #767676);--comp-nsTopNav-color-menu-icon-hover-rested-onDark: var(--brand-hsbc-color-complementaryGrey-grey1, #f3f3f3);--comp-nsTopNav-color-menu-icon-hover-rested-onLight: var(--semantic-color-icon-actionable-hover, #767676);--comp-nsTopNav-color-menu-icon-pressed-onScroll-onDark: var(--semantic-color-icon-actionable-pressed, #767676);--comp-nsTopNav-color-menu-icon-pressed-onScroll-onLight: var(--semantic-color-icon-actionable-pressed, #767676);--comp-nsTopNav-color-menu-icon-pressed-rested-onDark: var(--brand-hsbc-color-complementaryGrey-grey2, #ededed);--comp-nsTopNav-color-menu-icon-pressed-rested-onLight: var(--semantic-color-icon-actionable-pressed, #767676);--comp-nsTopNav-color-navigation-icon-default-onScroll-onDark: var(--semantic-color-icon-actionable-default, #000);--comp-nsTopNav-color-navigation-icon-default-onScroll-onLight: var(--semantic-color-icon-actionable-default, #000);--comp-nsTopNav-color-navigation-icon-default-rested-onDark: var(--brand-hsbc-color-core-white, #fff);--comp-nsTopNav-color-navigation-icon-default-rested-onLight: var(--semantic-color-icon-actionable-default, #000);--comp-nsTopNav-color-navigation-icon-disabled-onScroll-onDark: var( --semantic-color-icon-actionable-disabled, #d7d8d6 );--comp-nsTopNav-color-navigation-icon-disabled-onScroll-onLight: var( --semantic-color-icon-actionable-disabled, #d7d8d6 );--comp-nsTopNav-color-navigation-icon-disabled-rested-onDark: var( --brand-hsbc-color-complementaryGrey-grey6, #767676 );--comp-nsTopNav-color-navigation-icon-disabled-rested-onLight: var( --semantic-color-icon-actionable-disabled, #d7d8d6 );--comp-nsTopNav-color-navigation-icon-hover-onScroll-onDark: var(--semantic-color-icon-actionable-hover, #767676);--comp-nsTopNav-color-navigation-icon-hover-onScroll-onLight: var(--semantic-color-icon-actionable-hover, #767676);--comp-nsTopNav-color-navigation-icon-hover-rested-onDark: var(--brand-hsbc-color-complementaryGrey-grey1, #f3f3f3);--comp-nsTopNav-color-navigation-icon-hover-rested-onLight: var(--semantic-color-icon-actionable-hover, #767676);--comp-nsTopNav-color-navigation-icon-pressed-onScroll-onDark: var(--semantic-color-icon-actionable-pressed, #767676);--comp-nsTopNav-color-navigation-icon-pressed-onScroll-onLight: var( --semantic-color-icon-actionable-pressed, #767676 );--comp-nsTopNav-color-navigation-icon-pressed-rested-onDark: var(--brand-hsbc-color-complementaryGrey-grey2, #ededed);--comp-nsTopNav-color-navigation-icon-pressed-rested-onLight: var(--semantic-color-icon-actionable-pressed, #767676);--comp-nsTopNav-color-separator-fill-onScroll-onDark: var(--brand-hsbc-color-complementaryGrey-grey6, #767676);--comp-nsTopNav-color-separator-fill-onScroll-onLight: var(--brand-hsbc-color-complementaryGrey-grey6, #767676);--comp-nsTopNav-color-separator-fill-rested-onDark: var(--brand-hsbc-color-core-white, #fff);--comp-nsTopNav-color-separator-fill-rested-onLight: var(--brand-hsbc-color-complementaryGrey-grey6, #767676);--comp-nsTopNav-color-subtitle-text-onScroll-onDark: var(--semantic-color-text-primary-default, #333);--comp-nsTopNav-color-subtitle-text-onScroll-onLight: var(--semantic-color-text-primary-default, #333);--comp-nsTopNav-color-subtitle-text-rested-onDark: var(--brand-hsbc-color-core-white, #fff);--comp-nsTopNav-color-subtitle-text-rested-onLight: var(--semantic-color-text-primary-default, #333);--comp-nsTopNav-color-tab-text-active-default-onScroll-onDark: var(--semantic-color-text-primary-default, #333);--comp-nsTopNav-color-tab-text-active-default-onScroll-onLight: var(--semantic-color-text-primary-default, #333);--comp-nsTopNav-color-tab-text-active-default-rested-onDark: var(--brand-hsbc-color-core-white, #fff);--comp-nsTopNav-color-tab-text-active-default-rested-onLight: var(--semantic-color-text-primary-default, #333);--comp-nsTopNav-color-tab-text-active-disabled-onScroll-onDark: var(--semantic-color-text-primary-disabled, #d7d8d6);--comp-nsTopNav-color-tab-text-active-disabled-onScroll-onLight: var(--semantic-color-text-primary-disabled, #d7d8d6);--comp-nsTopNav-color-tab-text-active-disabled-rested-onDark: var( --brand-hsbc-color-complementaryGrey-grey6, #767676 );--comp-nsTopNav-color-tab-text-active-disabled-rested-onLight: var(--semantic-color-text-primary-disabled, #d7d8d6);--comp-nsTopNav-color-tab-text-active-hover-onScroll-onDark: var(--semantic-color-text-primary-hover, #333);--comp-nsTopNav-color-tab-text-active-hover-onScroll-onLight: var(--semantic-color-text-primary-hover, #333);--comp-nsTopNav-color-tab-text-active-hover-rested-onDark: var(--brand-hsbc-color-complementaryGrey-grey1, #f3f3f3);--comp-nsTopNav-color-tab-text-active-hover-rested-onLight: var(--semantic-color-text-primary-hover, #333);--comp-nsTopNav-color-tab-text-active-pressed-onScroll-onDark: var(--semantic-color-text-primary-pressed, #333);--comp-nsTopNav-color-tab-text-active-pressed-onScroll-onLight: var(--semantic-color-text-primary-pressed, #333);--comp-nsTopNav-color-tab-text-active-pressed-rested-onDark: var(--brand-hsbc-color-complementaryGrey-grey1, #f3f3f3);--comp-nsTopNav-color-tab-text-active-pressed-rested-onLight: var(--semantic-color-text-primary-pressed, #333);--comp-nsTopNav-color-tab-text-inactive-default-onScroll-onDark: var(--semantic-color-text-primary-default, #333);--comp-nsTopNav-color-tab-text-inactive-default-onScroll-onLight: var(--semantic-color-text-primary-default, #333);--comp-nsTopNav-color-tab-text-inactive-default-rested-onDark: var(--brand-hsbc-color-core-white, #fff);--comp-nsTopNav-color-tab-text-inactive-default-rested-onLight: var(--semantic-color-text-primary-default, #333);--comp-nsTopNav-color-tab-text-inactive-disabled-onScroll-onDark: var( --semantic-color-text-primary-disabled, #d7d8d6 );--comp-nsTopNav-color-tab-text-inactive-disabled-onScroll-onLight: var( --semantic-color-text-primary-disabled, #d7d8d6 );--comp-nsTopNav-color-tab-text-inactive-disabled-rested-onDark: var( --brand-hsbc-color-complementaryGrey-grey6, #767676 );--comp-nsTopNav-color-tab-text-inactive-disabled-rested-onLight: var(--semantic-color-text-primary-disabled, #d7d8d6);--comp-nsTopNav-color-tab-text-inactive-hover-onScroll-onDark: var(--semantic-color-text-primary-hover, #333);--comp-nsTopNav-color-tab-text-inactive-hover-onScroll-onLight: var(--semantic-color-text-primary-hover, #333);--comp-nsTopNav-color-tab-text-inactive-hover-rested-onDark: var(--brand-hsbc-color-complementaryGrey-grey1, #f3f3f3);--comp-nsTopNav-color-tab-text-inactive-hover-rested-onLight: var(--semantic-color-text-primary-hover, #333);--comp-nsTopNav-color-tab-text-inactive-pressed-onScroll-onDark: var(--semantic-color-text-primary-pressed, #333);--comp-nsTopNav-color-tab-text-inactive-pressed-onScroll-onLight: var(--semantic-color-text-primary-pressed, #333);--comp-nsTopNav-color-tab-text-inactive-pressed-rested-onDark: var( --brand-hsbc-color-complementaryGrey-grey1, #f3f3f3 );--comp-nsTopNav-color-tab-text-inactive-pressed-rested-onLight: var(--semantic-color-text-primary-pressed, #333);--comp-nsTopNav-color-title-text-onScroll-onDark: var(--semantic-color-text-primary-default, #333);--comp-nsTopNav-color-title-text-onScroll-onLight: var(--semantic-color-text-primary-default, #333);--comp-nsTopNav-color-title-text-rested-onDark: var(--brand-hsbc-color-core-white, #fff);--comp-nsTopNav-color-title-text-rested-onLight: var(--semantic-color-text-primary-default, #333);--comp-nsTopNav-cornerRadius-bar: 0rem;--comp-nsTopNav-size-action-icon-onScroll: var(--semantic-size-icon-m, 1.5rem);--comp-nsTopNav-size-action-icon-rested: var(--semantic-size-icon-m, 1.5rem);--comp-nsTopNav-size-badge-onScroll: .5rem;--comp-nsTopNav-size-badge-rested: .5rem;--comp-nsTopNav-size-bar-height-onScroll: .25rem;--comp-nsTopNav-size-bar-height-rested: .25rem;--comp-nsTopNav-size-home-icon-onScroll: var(--semantic-size-icon-m, 1.5rem);--comp-nsTopNav-size-home-icon-rested: var(--semantic-size-icon-m, 1.5rem);--comp-nsTopNav-size-menu-icon-onScroll: var(--semantic-size-icon-m, 1.5rem);--comp-nsTopNav-size-menu-icon-rested: var(--semantic-size-icon-m, 1.5rem);--comp-nsTopNav-size-navigation-icon-onScroll: var(--semantic-size-icon-m, 1.5rem);--comp-nsTopNav-size-navigation-icon-rested: var(--semantic-size-icon-m, 1.5rem);--comp-nsTopNav-size-separator-height-onScroll: 1.6875rem;--comp-nsTopNav-size-separator-height-rested: 1.6875rem;--comp-nsTopNav-shadow-onScroll: var(--semantic-shadow-container-elevated, 0rem .125rem .5rem 0rem #0003);--comp-nsTopNav-space-bar-paddingHorizontal-onScroll: .125rem;--comp-nsTopNav-space-bar-paddingHorizontal-rested: .125rem;--comp-nsTopNav-space-iconGroup-gapIconHorizontal-onScroll: var(--semantic-space-general-fixed-200, 1rem);--comp-nsTopNav-space-iconGroup-gapIconHorizontal-rested: var(--semantic-space-general-fixed-200, 1rem);--comp-nsTopNav-space-paddingHorizontal-onScroll: var(--semantic-space-general-fixed-200, 1rem);--comp-nsTopNav-space-paddingHorizontal-rested: var(--semantic-space-general-fixed-200, 1rem);--comp-nsTopNav-space-paddingVertical-onScroll: var(--semantic-space-general-fixed-150, .75rem);--comp-nsTopNav-space-paddingVertical-rested: var(--semantic-space-general-fixed-150, .75rem);--comp-nsTopNav-space-tab-gapLabelBar-onScroll: .125rem;--comp-nsTopNav-space-tab-gapLabelBar-rested: .125rem;--comp-nsTopNav-space-tab-paddingHorizontal-onScroll: 0rem;--comp-nsTopNav-space-tab-paddingHorizontal-rested: 0rem;--comp-nsTopNav-space-tabGroup-gapHorizontal-onScroll: var(--semantic-space-general-fixed-300, 1.5rem);--comp-nsTopNav-space-tabGroup-gapHorizontal-rested: var(--semantic-space-general-fixed-300, 1.5rem);--comp-nsTopNav-space-tabGroup-gapTabIcon-onScroll: var(--semantic-space-general-fixed-200, 1rem);--comp-nsTopNav-space-tabGroup-gapTabIcon-rested: var(--semantic-space-general-fixed-200, 1rem);--comp-nsTopNav-space-tabGroup-gapTabSeparator-onScroll: var(--semantic-space-general-fixed-200, 1rem);--comp-nsTopNav-space-tabGroup-gapTabSeparator-rested: var(--semantic-space-general-fixed-200, 1rem);--comp-nsTopNav-space-title-gapIconSeparatorTitle-onScroll: var(--semantic-space-general-fixed-200, 1rem);--comp-nsTopNav-space-title-gapIconSeparatorTitle-rested: var(--semantic-space-general-fixed-200, 1rem);--comp-nsTopNav-space-title-gapTitleMenu-onScroll: var(--semantic-space-general-fixed-200, 1rem);--comp-nsTopNav-space-title-gapTitleMenu-rested: var(--semantic-space-general-fixed-200, 1rem);--comp-nsTopNav-space-title-gapTitleSubtitle-onScroll: -.25rem;--comp-nsTopNav-space-title-gapTitleSubtitle-rested: -.25rem;--comp-nsTopNav-typography-action-default-rested: var( --semantic-typography-content-body-loud, 500 1rem/1.5rem "Univers Next for HSBC", sans-serif );--comp-nsTopNav-typography-action-default-rested-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-nsTopNav-typography-action-default-onScroll: var( --semantic-typography-content-body-loud, 500 1rem/1.5rem "Univers Next for HSBC", sans-serif );--comp-nsTopNav-typography-action-default-onScroll-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-nsTopNav-typography-tab-active-default-rested: var( --semantic-typography-heading-contentTitle-loud, 500 1.1875rem/1.6875rem "Univers Next for HSBC", sans-serif );--comp-nsTopNav-typography-tab-active-default-rested-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-nsTopNav-typography-tab-active-default-onScroll: var( --semantic-typography-heading-contentTitle-loud, 500 1.1875rem/1.6875rem "Univers Next for HSBC", sans-serif );--comp-nsTopNav-typography-tab-active-default-onScroll-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-nsTopNav-typography-tab-active-hover-rested: var( --semantic-typography-heading-contentTitle-loud, 500 1.1875rem/1.6875rem "Univers Next for HSBC", sans-serif );--comp-nsTopNav-typography-tab-active-hover-rested-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-nsTopNav-typography-tab-active-hover-onScroll: var( --semantic-typography-heading-contentTitle-loud, 500 1.1875rem/1.6875rem "Univers Next for HSBC", sans-serif );--comp-nsTopNav-typography-tab-active-hover-onScroll-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-nsTopNav-typography-tab-active-pressed-rested: var( --semantic-typography-heading-contentTitle-loud, 500 1.1875rem/1.6875rem "Univers Next for HSBC", sans-serif );--comp-nsTopNav-typography-tab-active-pressed-rested-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-nsTopNav-typography-tab-active-pressed-onScroll: var( --semantic-typography-heading-contentTitle-loud, 500 1.1875rem/1.6875rem "Univers Next for HSBC", sans-serif );--comp-nsTopNav-typography-tab-active-pressed-onScroll-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-nsTopNav-typography-tab-active-disabled-rested: var( --semantic-typography-heading-contentTitle-loud, 500 1.1875rem/1.6875rem "Univers Next for HSBC", sans-serif );--comp-nsTopNav-typography-tab-active-disabled-rested-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-nsTopNav-typography-tab-active-disabled-onScroll: var( --semantic-typography-heading-contentTitle-loud, 500 1.1875rem/1.6875rem "Univers Next for HSBC", sans-serif );--comp-nsTopNav-typography-tab-active-disabled-onScroll-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-nsTopNav-typography-tab-inactive-default-rested: var( --semantic-typography-heading-contentTitle-loud, 500 1.1875rem/1.6875rem "Univers Next for HSBC", sans-serif );--comp-nsTopNav-typography-tab-inactive-default-rested-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-nsTopNav-typography-tab-inactive-default-onScroll: var( --semantic-typography-heading-contentTitle-loud, 500 1.1875rem/1.6875rem "Univers Next for HSBC", sans-serif );--comp-nsTopNav-typography-tab-inactive-default-onScroll-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-nsTopNav-typography-tab-inactive-hover-rested: var( --semantic-typography-heading-contentTitle-loud, 500 1.1875rem/1.6875rem "Univers Next for HSBC", sans-serif );--comp-nsTopNav-typography-tab-inactive-hover-rested-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-nsTopNav-typography-tab-inactive-hover-onScroll: var( --semantic-typography-heading-contentTitle-loud, 500 1.1875rem/1.6875rem "Univers Next for HSBC", sans-serif );--comp-nsTopNav-typography-tab-inactive-hover-onScroll-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-nsTopNav-typography-tab-inactive-pressed-rested: var( --semantic-typography-heading-contentTitle-loud, 500 1.1875rem/1.6875rem "Univers Next for HSBC", sans-serif );--comp-nsTopNav-typography-tab-inactive-pressed-rested-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-nsTopNav-typography-tab-inactive-pressed-onScroll: var( --semantic-typography-heading-contentTitle-loud, 500 1.1875rem/1.6875rem "Univers Next for HSBC", sans-serif );--comp-nsTopNav-typography-tab-inactive-pressed-onScroll-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-nsTopNav-typography-tab-inactive-disabled-rested: var( --semantic-typography-heading-contentTitle-loud, 500 1.1875rem/1.6875rem "Univers Next for HSBC", sans-serif );--comp-nsTopNav-typography-tab-inactive-disabled-rested-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-nsTopNav-typography-tab-inactive-disabled-onScroll: var( --semantic-typography-heading-contentTitle-loud, 500 1.1875rem/1.6875rem "Univers Next for HSBC", sans-serif );--comp-nsTopNav-typography-tab-inactive-disabled-onScroll-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-nsTopNav-typography-title-rested: var( --semantic-typography-heading-contentTitle-loud, 500 1.1875rem/1.6875rem "Univers Next for HSBC", sans-serif );--comp-nsTopNav-typography-title-rested-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem);--comp-nsTopNav-typography-title-onScroll: var( --semantic-typography-heading-contentTitle-loud, 500 1.1875rem/1.6875rem "Univers Next for HSBC", sans-serif );--comp-nsTopNav-typography-title-onScroll-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem);--comp-nsTopNav-typography-subtitle-onScroll: var( --semantic-typography-content-footnote-quiet, 350 .75rem/1rem "Univers Next for HSBC", sans-serif );--comp-nsTopNav-typography-subtitle-onScroll-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem);--comp-nsTopNav-typography-subtitle-rested: var( --semantic-typography-content-footnote-quiet, 350 .75rem/1rem "Univers Next for HSBC", sans-serif );--comp-nsTopNav-typography-subtitle-rested-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem)}[data-bdl-theme=hsbc]{--comp-pill-borderWidth-selected-default: 0rem;--comp-pill-borderWidth-selected-disabled: 0rem;--comp-pill-borderWidth-selected-hover: 0rem;--comp-pill-borderWidth-selected-pressed: 0rem;--comp-pill-borderWidth-unselected-default: .0625rem;--comp-pill-borderWidth-unselected-disabled: .0625rem;--comp-pill-borderWidth-unselected-hover: .0625rem;--comp-pill-borderWidth-unselected-pressed: .0625rem;--comp-pill-color-background-selected-default: var( --brand-hsbc-color-complementaryGrey-grey1 );--comp-pill-color-background-selected-disabled: var( --brand-hsbc-color-complementaryGrey-grey8 );--comp-pill-color-background-selected-hover: var( --semantic-color-fill-selected-hover, #333 );--comp-pill-color-background-selected-pressed: var( --semantic-color-fill-selected-pressed, #767676 );--comp-pill-color-background-unselected-default: var( --semantic-color-background-container-interactive-default, #fff );--comp-pill-color-background-unselected-disabled: var( --semantic-color-background-container-interactive-disabled, #fff );--comp-pill-color-background-unselected-hover: var( --semantic-color-background-container-interactive-hover, #f3f3f3 );--comp-pill-color-background-unselected-pressed: var( --semantic-color-background-container-interactive-pressed, #ededed );--comp-pill-color-border-selected-default: var( --semantic-color-border-container-selected-default, #000 );--comp-pill-color-border-selected-disabled: var( --semantic-color-border-container-selected-disabled, #d7d8d6 );--comp-pill-color-border-selected-hover: var( --semantic-color-border-container-selected-hover, #000 );--comp-pill-color-border-selected-pressed: var( --semantic-color-border-container-selected-pressed, #000 );--comp-pill-color-border-unselected-default: var( --semantic-color-border-container-selected-default, #000 );--comp-pill-color-border-unselected-disabled: var( --semantic-color-border-container-selected-disabled, #d7d8d6 );--comp-pill-color-border-unselected-hover: var( --semantic-color-border-container-selected-hover, #000 );--comp-pill-color-border-unselected-pressed: var( --semantic-color-border-container-selected-pressed, #000 );--comp-pill-color-icon-selected-default: var( --brand-hsbcDark-color-core-black );--comp-pill-color-icon-selected-disabled: var( --brand-hsbc-color-complementaryGrey-grey6 );--comp-pill-color-icon-selected-hover: var( --brand-hsbc-color-core-white, #fff );--comp-pill-color-icon-selected-pressed: var( --brand-hsbc-color-core-white, #fff );--comp-pill-color-icon-unselected-default: var( --semantic-color-icon-actionable-default, #000 );--comp-pill-color-icon-unselected-disabled: var( --semantic-color-icon-actionable-disabled, #d7d8d6 );--comp-pill-color-icon-unselected-hover: var( --brand-hsbc-color-core-black, #000 );--comp-pill-color-icon-unselected-pressed: var( --brand-hsbc-color-core-black, #000 );--comp-pill-color-label-selected-default: var( --brand-hsbcDark-color-core-black );--comp-pill-color-label-selected-disabled: var( --brand-hsbc-color-complementaryGrey-grey6 );--comp-pill-color-label-selected-hover: var( --brand-hsbc-color-core-white, #fff );--comp-pill-color-label-selected-pressed: var( --brand-hsbc-color-core-white, #fff );--comp-pill-color-label-unselected-default: var( --semantic-color-text-actionable-default, #000 );--comp-pill-color-label-unselected-disabled: var( --semantic-color-text-actionable-disabled, #d7d8d6 );--comp-pill-color-label-unselected-hover: var( --semantic-color-text-primary-default );--comp-pill-color-label-unselected-pressed: var( --semantic-color-text-primary-default );--comp-pill-cornerRadius: 62.4375rem;--comp-pill-size-icon: var(--semantic-size-icon-s, 1.125rem);--comp-pill-space-gapIconLabel: var( --semantic-space-general-fixed-100, .5rem );--comp-pill-space-paddingHorizontal: var( --semantic-space-general-fixed-150, .75rem );--comp-pill-space-paddingVertical: var( --semantic-space-general-fixed-100, .5rem );--comp-pill-typography-label-unselected: var( --semantic-typography-content-caption-loud, 500 .875rem / 1.25rem "Univers Next for HSBC", sans-serif );--comp-pill-typography-label-unselected-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-pill-typography-label-selected: var( --semantic-typography-content-caption-loud, 500 .875rem / 1.25rem "Univers Next for HSBC", sans-serif );--comp-pill-typography-label-selected-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem )}[data-bdl-theme=hsbc]{--comp-progressTracker-color-completed-fill: var(--semantic-color-fill-primary-default, #db0011);--comp-progressTracker-color-separator-fill: var(--semantic-color-text-primary-default, #333);--comp-progressTracker-color-step-text: var(--semantic-color-text-primary-default, #333);--comp-progressTracker-color-title-text: var(--semantic-color-text-primary-default, #333);--comp-progressTracker-color-track-fill: var(--semantic-color-fill-uncompleted, #ededed);--comp-progressTracker-cornerRadius-completed: 0rem;--comp-progressTracker-cornerRadius-track: 0rem;--comp-progressTracker-size-separator-width: .0625rem;--comp-progressTracker-size-track-height: .25rem;--comp-progressTracker-space-gapStepSeparatorTitle: var(--semantic-space-general-fixed-100, .5rem);--comp-progressTracker-space-gapStepTitleHorizontal: var(--semantic-space-general-fixed-50, .25rem);--comp-progressTracker-space-gapStepTitleVertical: var(--semantic-space-general-fixed-50, .25rem);--comp-progressTracker-space-gapTextTrack: var(--semantic-space-general-fixed-100, .5rem);--comp-progressTracker-typography-step: var( --semantic-typography-content-caption-loud, 500 .875rem/1.25rem "Univers Next for HSBC", sans-serif );--comp-progressTracker-typography-step-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem);--comp-progressTracker-typography-title: var( --semantic-typography-content-caption-quiet, 350 .875rem/1.25rem "Univers Next for HSBC", sans-serif );--comp-progressTracker-typography-title-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem)}[data-bdl-theme=hsbc]{--comp-quantitySelector-borderWidth-box: .0625rem;--comp-quantitySelector-borderWidth-controlButton-default: .0625rem;--comp-quantitySelector-borderWidth-controlButton-disabled: .0625rem;--comp-quantitySelector-borderWidth-controlButton-hover: .0625rem;--comp-quantitySelector-borderWidth-controlButton-pressed: .0625rem;--comp-quantitySelector-color-active-box-background: var(--brand-hsbc-color-core-white, #fff);--comp-quantitySelector-color-active-box-border: var(--semantic-color-border-container-interactive-default, #767676);--comp-quantitySelector-color-active-box-text: var(--semantic-color-text-primary-default, #333);--comp-quantitySelector-color-active-controlButton-background-default: var(--brand-hsbc-color-core-white, #fff);--comp-quantitySelector-color-active-controlButton-background-disabled: var(--brand-hsbc-color-core-white, #fff);--comp-quantitySelector-color-active-controlButton-background-hover: var(--brand-hsbc-color-core-white, #fff);--comp-quantitySelector-color-active-controlButton-background-pressed: var(--brand-hsbc-color-core-white, #fff);--comp-quantitySelector-color-active-controlButton-border-default: var( --semantic-color-border-container-interactive-default, #767676 );--comp-quantitySelector-color-active-controlButton-border-disabled: var( --semantic-color-border-container-interactive-disabled, #d7d8d6 );--comp-quantitySelector-color-active-controlButton-border-hover: var( --semantic-color-border-container-interactive-hover, #000 );--comp-quantitySelector-color-active-controlButton-border-pressed: var( --semantic-color-border-container-interactive-pressed, #000 );--comp-quantitySelector-color-active-controlButton-icon-default: var(--semantic-color-icon-primary-default, #333);--comp-quantitySelector-color-active-controlButton-icon-disabled: var( --semantic-color-icon-primary-disabled, #d7d8d6 );--comp-quantitySelector-color-active-controlButton-icon-hover: var(--semantic-color-icon-primary-hover, #333);--comp-quantitySelector-color-active-controlButton-icon-pressed: var(--semantic-color-icon-primary-pressed, #333);--comp-quantitySelector-color-active-subtitle-text: var(--semantic-color-text-secondary-default, #545454);--comp-quantitySelector-color-active-title-text: var(--semantic-color-text-primary-default, #333);--comp-quantitySelector-color-active-tooltip-icon-default: var(--semantic-color-icon-actionable-default, #000);--comp-quantitySelector-color-active-tooltip-icon-hover: var(--semantic-color-icon-actionable-hover, #767676);--comp-quantitySelector-color-active-tooltip-icon-pressed: var(--semantic-color-icon-actionable-pressed, #767676);--comp-quantitySelector-color-disabled-box-background: var(--brand-hsbc-color-core-white, #fff);--comp-quantitySelector-color-disabled-box-border: var( --semantic-color-border-container-interactive-disabled, #d7d8d6 );--comp-quantitySelector-color-disabled-box-text: var(--semantic-color-text-primary-disabled, #d7d8d6);--comp-quantitySelector-color-disabled-controlButton-background: var(--brand-hsbc-color-core-white, #fff);--comp-quantitySelector-color-disabled-controlButton-border: var( --semantic-color-border-container-interactive-disabled, #d7d8d6 );--comp-quantitySelector-color-disabled-controlButton-icon: var(--semantic-color-icon-primary-disabled, #d7d8d6);--comp-quantitySelector-color-disabled-subtitle-text: var(--semantic-color-text-secondary-disabled, #d7d8d6);--comp-quantitySelector-color-disabled-title-text: var(--semantic-color-text-primary-disabled, #d7d8d6);--comp-quantitySelector-color-disabled-tooltip-icon: var(--semantic-color-icon-actionable-disabled, #d7d8d6);--comp-quantitySelector-cornerRadius-box: 0rem;--comp-quantitySelector-cornerRadius-controlButton: 0rem;--comp-quantitySelector-size-controlButton-icon: var(--semantic-size-icon-s, 1.125rem);--comp-quantitySelector-size-tooltip-icon: var(--semantic-size-icon-s, 1.125rem);--comp-quantitySelector-space-box-paddingHorizontal: var(--semantic-space-general-fixed-200, 1rem);--comp-quantitySelector-space-box-paddingVertical: var(--semantic-space-general-fixed-150, .75rem);--comp-quantitySelector-space-controlButton-paddingHorizontal: .9375rem;--comp-quantitySelector-space-controlButton-paddingVertical: .9375rem;--comp-quantitySelector-space-gapControlButtonBox: var(--semantic-space-general-fixed-0, 0rem);--comp-quantitySelector-space-gapTitleBox: var(--semantic-space-general-fixed-100, .5rem);--comp-quantitySelector-space-gapTitleSubtitle: var(--semantic-space-general-fixed-0, 0rem);--comp-quantitySelector-space-gapTitleTooltip: var(--semantic-space-general-fixed-100, .5rem);--comp-quantitySelector-typography-box-text: var( --semantic-typography-content-body-normal, 400 1rem/1.5rem "Univers Next for HSBC", sans-serif );--comp-quantitySelector-typography-box-text-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem);--comp-quantitySelector-typography-title: var( --semantic-typography-content-body-normal, 400 1rem/1.5rem "Univers Next for HSBC", sans-serif );--comp-quantitySelector-typography-title-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem);--comp-quantitySelector-typography-subtitle: var( --semantic-typography-content-caption-quiet, 350 .875rem/1.25rem "Univers Next for HSBC", sans-serif );--comp-quantitySelector-typography-subtitle-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem)}[data-bdl-theme=hsbc]{--comp-quickAction-borderWidth: 0rem;--comp-quickAction-borderWidth-large: 0rem;--comp-quickAction-borderWidth-large-visual: 0rem;--comp-quickAction-borderWidth-small: 0rem;--comp-quickAction-borderWidth-small-visual: 0rem;--comp-quickAction-borderWidth-small-image: .0625rem;--comp-quickAction-color-background-default: var(--semantic-color-background-container-interactive-default, #fff);--comp-quickAction-color-background-disabled: var(--semantic-color-background-container-interactive-disabled, #fff);--comp-quickAction-color-background-hover: var(--semantic-color-background-container-interactive-hover, #f3f3f3);--comp-quickAction-color-background-pressed: var(--semantic-color-background-container-interactive-pressed, #ededed);--comp-quickAction-color-border-default: var(--semantic-color-background-container-interactive-default, #fff);--comp-quickAction-color-border-disabled: var(--semantic-color-background-container-interactive-disabled, #fff);--comp-quickAction-color-border-hover: var(--semantic-color-background-container-interactive-hover, #f3f3f3);--comp-quickAction-color-border-pressed: var(--semantic-color-background-container-interactive-pressed, #ededed);--comp-quickAction-color-icon-default: var(--semantic-color-icon-primary-default, #333);--comp-quickAction-color-icon-disabled: var(--semantic-color-icon-primary-disabled, #d7d8d6);--comp-quickAction-color-icon-hover: var(--semantic-color-icon-primary-hover, #333);--comp-quickAction-color-icon-pressed: var(--semantic-color-icon-primary-pressed, #333);--comp-quickAction-color-label-default: var(--semantic-color-text-primary-default, #333);--comp-quickAction-color-label-disabled: var(--semantic-color-text-primary-disabled, #d7d8d6);--comp-quickAction-color-label-hover: var(--semantic-color-text-primary-hover, #333);--comp-quickAction-color-label-pressed: var(--semantic-color-text-primary-pressed, #333);--comp-quickAction-color-large-background-default: var( --semantic-color-background-container-interactive-default, #fff );--comp-quickAction-color-large-background-disabled: var( --semantic-color-background-container-interactive-disabled, #fff );--comp-quickAction-color-large-background-hover: var( --semantic-color-background-container-interactive-hover, #f3f3f3 );--comp-quickAction-color-large-background-pressed: var( --semantic-color-background-container-interactive-pressed, #ededed );--comp-quickAction-color-large-border-default: var(--semantic-color-background-container-interactive-default, #fff);--comp-quickAction-color-large-border-disabled: var(--semantic-color-background-container-interactive-disabled, #fff);--comp-quickAction-color-large-border-hover: var(--semantic-color-background-container-interactive-hover, #f3f3f3);--comp-quickAction-color-large-border-pressed: var( --semantic-color-background-container-interactive-pressed, #ededed );--comp-quickAction-color-large-externalLink-icon-default: var(--semantic-color-icon-primary-default, #333);--comp-quickAction-color-large-externalLink-icon-disabled: var(--semantic-color-icon-primary-disabled, #d7d8d6);--comp-quickAction-color-large-externalLink-icon-hover: var(--semantic-color-icon-primary-hover, #333);--comp-quickAction-color-large-externalLink-icon-pressed: var(--semantic-color-icon-primary-pressed, #333);--comp-quickAction-color-large-label-default: var(--semantic-color-text-primary-default, #333);--comp-quickAction-color-large-label-disabled: var(--semantic-color-text-primary-disabled, #d7d8d6);--comp-quickAction-color-large-label-hover: var(--semantic-color-text-primary-hover, #333);--comp-quickAction-color-large-label-pressed: var(--semantic-color-text-primary-pressed, #333);--comp-quickAction-color-large-visual-background-default: var(--brand-hsbc-color-complementaryGrey-grey1, #f3f3f3);--comp-quickAction-color-large-visual-background-disabled: var(--brand-hsbc-color-complementaryGrey-grey1, #f3f3f3);--comp-quickAction-color-large-visual-background-hover: var(--brand-hsbc-color-complementaryGrey-grey1, #f3f3f3);--comp-quickAction-color-large-visual-background-pressed: var(--brand-hsbc-color-complementaryGrey-grey1, #f3f3f3);--comp-quickAction-color-large-visual-border-default: var(--semantic-color-border-container-static, #d7d8d6);--comp-quickAction-color-large-visual-border-disabled: var( --semantic-color-border-container-interactive-disabled, #d7d8d6 );--comp-quickAction-color-large-visual-border-hover: var(--semantic-color-border-container-static, #d7d8d6);--comp-quickAction-color-large-visual-border-pressed: var(--semantic-color-border-container-static, #d7d8d6);--comp-quickAction-color-large-visual-icon-default: var(--semantic-color-icon-primary-default, #333);--comp-quickAction-color-large-visual-icon-disabled: var(--semantic-color-icon-primary-disabled, #d7d8d6);--comp-quickAction-color-large-visual-icon-hover: var(--semantic-color-icon-primary-hover, #333);--comp-quickAction-color-large-visual-icon-pressed: var(--semantic-color-icon-primary-pressed, #333);--comp-quickAction-color-large-visual-text-default: var(--semantic-color-icon-primary-default, #333);--comp-quickAction-color-large-visual-text-disabled: var(--semantic-color-icon-primary-disabled, #d7d8d6);--comp-quickAction-color-large-visual-text-hover: var(--semantic-color-icon-primary-hover, #333);--comp-quickAction-color-large-visual-text-pressed: var(--semantic-color-icon-primary-pressed, #333);--comp-quickAction-color-small-background-default: var( --semantic-color-background-container-interactive-default, #fff );--comp-quickAction-color-small-background-disabled: var( --semantic-color-background-container-interactive-disabled, #fff );--comp-quickAction-color-small-background-hover: var( --semantic-color-background-container-interactive-hover, #f3f3f3 );--comp-quickAction-color-small-background-pressed: var( --semantic-color-background-container-interactive-pressed, #ededed );--comp-quickAction-color-small-border-default: var(--semantic-color-background-container-interactive-default, #fff);--comp-quickAction-color-small-border-disabled: var(--semantic-color-background-container-interactive-disabled, #fff);--comp-quickAction-color-small-border-hover: var(--semantic-color-background-container-interactive-hover, #f3f3f3);--comp-quickAction-color-small-border-pressed: var( --semantic-color-background-container-interactive-pressed, #ededed );--comp-quickAction-color-small-label-default: var(--semantic-color-text-primary-default, #333);--comp-quickAction-color-small-label-disabled: var(--semantic-color-text-primary-disabled, #d7d8d6);--comp-quickAction-color-small-label-hover: var(--semantic-color-text-primary-hover, #333);--comp-quickAction-color-small-label-pressed: var(--semantic-color-text-primary-pressed, #333);--comp-quickAction-color-small-externalLink-icon-default: var(--semantic-color-icon-primary-default, #333);--comp-quickAction-color-small-externalLink-icon-disabled: var(--semantic-color-icon-primary-disabled, #d7d8d6);--comp-quickAction-color-small-externalLink-icon-hover: var(--semantic-color-icon-primary-hover, #333);--comp-quickAction-color-small-externalLink-icon-pressed: var(--semantic-color-icon-primary-pressed, #333);--comp-quickAction-color-small-image-border-default: var(--semantic-color-border-container-static, #d7d8d6);--comp-quickAction-color-small-image-border-disabled: var(--semantic-color-border-container-static, #d7d8d6);--comp-quickAction-color-small-image-border-hover: var(--semantic-color-border-container-static, #d7d8d6);--comp-quickAction-color-small-image-border-pressed: var(--semantic-color-border-container-static, #d7d8d6);--comp-quickAction-color-small-visual-background-default: var(--brand-hsbc-color-complementaryGrey-grey1, #f3f3f3);--comp-quickAction-color-small-visual-background-disabled: var(--brand-hsbc-color-complementaryGrey-grey1, #f3f3f3);--comp-quickAction-color-small-visual-background-hover: var(--brand-hsbc-color-complementaryGrey-grey1, #f3f3f3);--comp-quickAction-color-small-visual-background-pressed: var(--brand-hsbc-color-complementaryGrey-grey1, #f3f3f3);--comp-quickAction-color-small-visual-border-default: var(--semantic-color-border-container-static, #d7d8d6);--comp-quickAction-color-small-visual-border-disabled: var( --semantic-color-border-container-interactive-disabled, #d7d8d6 );--comp-quickAction-color-small-visual-border-hover: var(--semantic-color-border-container-static, #d7d8d6);--comp-quickAction-color-small-visual-border-pressed: var(--semantic-color-border-container-static, #d7d8d6);--comp-quickAction-color-small-visual-icon-default: var(--semantic-color-icon-primary-default, #333);--comp-quickAction-color-small-visual-icon-disabled: var(--semantic-color-icon-primary-disabled, #d7d8d6);--comp-quickAction-color-small-visual-icon-hover: var(--semantic-color-icon-primary-hover, #333);--comp-quickAction-color-small-visual-icon-pressed: var(--semantic-color-icon-primary-pressed, #333);--comp-quickAction-color-small-visual-text-default: var(--semantic-color-text-primary-default, #333);--comp-quickAction-color-small-visual-text-disabled: var(--semantic-color-text-primary-disabled, #d7d8d6);--comp-quickAction-color-small-visual-text-hover: var(--semantic-color-text-primary-hover, #333);--comp-quickAction-color-small-visual-text-pressed: var(--semantic-color-text-primary-pressed, #333);--comp-quickAction-cornerRadius: 0rem;--comp-quickAction-cornerRadius-avatar: 62.4375rem;--comp-quickAction-cornerRadius-large: 0rem;--comp-quickAction-cornerRadius-large-visual: 62.4375rem;--comp-quickAction-cornerRadius-small: 0rem;--comp-quickAction-cornerRadius-small-visual: 62.4375rem;--comp-quickAction-opacity-visual-image-disabled: .3;--comp-quickAction-opacity-visual-slot-disabled: .3;--comp-quickAction-size-icon: var(--semantic-size-icon-s, 1.125rem);--comp-quickAction-size-image: var(--semantic-size-icon-l, 2.25rem);--comp-quickAction-size-initials: var(--semantic-size-icon-l, 2.25rem);--comp-quickAction-size-large-externalLink-icon: .75rem;--comp-quickAction-size-large-visual: 3.5rem;--comp-quickAction-size-large-visual-icon: var(--semantic-size-icon-m, 1.5rem);--comp-quickAction-size-large-visual-slot: var(--semantic-size-icon-m, 1.5rem);--comp-quickAction-size-small-externalLink-icon: .75rem;--comp-quickAction-size-small-visual: var(--semantic-size-icon-l, 2.25rem);--comp-quickAction-size-small-visual-icon: var(--semantic-size-icon-s, 1.125rem);--comp-quickAction-size-small-visual-image: var(--semantic-size-icon-m, 1.5rem);--comp-quickAction-space-gapVisualLabel: var(--semantic-space-general-fixed-150, .75rem);--comp-quickAction-space-paddingHorizontal: var(--semantic-space-general-fixed-200, 1rem);--comp-quickAction-space-paddingVertical: var(--semantic-space-general-fixed-200, 1rem);--comp-quickAction-space-large-gapLabelExternalLink: var(--semantic-space-general-fixed-50, .25rem);--comp-quickAction-space-large-gapVisualLabel: var(--semantic-space-general-fixed-150, .75rem);--comp-quickAction-space-large-paddingHorizontal: var(--semantic-space-general-fixed-200, 1rem);--comp-quickAction-space-large-paddingVertical: var(--semantic-space-general-fixed-200, 1rem);--comp-quickAction-space-small-gapLabelExternalLink: var(--semantic-space-general-fixed-50, .25rem);--comp-quickAction-space-small-gapVisualLabel: var(--semantic-space-general-fixed-150, .75rem);--comp-quickAction-space-small-paddingHorizontal: var(--semantic-space-general-fixed-200, 1rem);--comp-quickAction-space-small-paddingVertical: var(--semantic-space-general-fixed-200, 1rem);--comp-quickAction-typography-label: var( --semantic-typography-content-footnote-normal, 400 .75rem/1rem "Univers Next for HSBC", sans-serif );--comp-quickAction-typography-label-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem);--comp-quickAction-typography-small-label: var( --semantic-typography-content-footnote-normal, 400 .75rem/1rem "Univers Next for HSBC", sans-serif );--comp-quickAction-typography-small-label-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem);--comp-quickAction-typography-small-visual-initials: var( --semantic-typography-content-body-normal, 400 1rem/1.5rem "Univers Next for HSBC", sans-serif );--comp-quickAction-typography-small-visual-initials-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-quickAction-typography-large-label: var( --semantic-typography-content-footnote-normal, 400 .75rem/1rem "Univers Next for HSBC", sans-serif );--comp-quickAction-typography-large-label-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem);--comp-quickAction-typography-large-visual-initials: var( --semantic-typography-heading-subheadline-normal, 400 1.4375rem/1.875rem "Univers Next for HSBC", sans-serif );--comp-quickAction-typography-large-visual-initials-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem )}[data-bdl-theme=hsbc]{--comp-radioButton-borderWidth-selected-frame-error: .0625rem;--comp-radioButton-borderWidth-selected-frame-normal: .0625rem;--comp-radioButton-borderWidth-selected-indicator-error: 0rem;--comp-radioButton-borderWidth-selected-indicator-normal: 0rem;--comp-radioButton-borderWidth-unselected-frame-error: .0625rem;--comp-radioButton-borderWidth-unselected-frame-normal: .0625rem;--comp-radioButton-color-selected-background-error-default: var( --semantic-color-background-container-error-quiet, #f9f2f3 );--comp-radioButton-color-selected-background-error-hover: var( --semantic-color-background-container-error-quiet, #f9f2f3 );--comp-radioButton-color-selected-background-error-pressed: var( --semantic-color-background-container-error-quiet, #f9f2f3 );--comp-radioButton-color-selected-background-normal-default: var( --semantic-color-background-container-selected-default, #fff );--comp-radioButton-color-selected-background-normal-disabled: var( --semantic-color-background-container-selected-disabled, #fff );--comp-radioButton-color-selected-background-normal-hover: var( --semantic-color-background-container-selected-hover, #f3f3f3 );--comp-radioButton-color-selected-background-normal-pressed: var( --semantic-color-background-container-selected-pressed, #ededed );--comp-radioButton-color-selected-border-error-default: var(--semantic-color-border-container-error, #a8000b);--comp-radioButton-color-selected-border-error-hover: var(--semantic-color-border-container-error, #a8000b);--comp-radioButton-color-selected-border-error-pressed: var(--semantic-color-border-container-error, #a8000b);--comp-radioButton-color-selected-border-normal-default: var( --semantic-color-border-container-selected-default, #000 );--comp-radioButton-color-selected-border-normal-disabled: var( --semantic-color-border-container-selected-disabled, #d7d8d6 );--comp-radioButton-color-selected-border-normal-hover: var(--semantic-color-border-container-selected-hover, #000);--comp-radioButton-color-selected-border-normal-pressed: var( --semantic-color-border-container-selected-pressed, #000 );--comp-radioButton-color-selected-indicator-border-error-default: var(--semantic-color-fill-error, #a8000b);--comp-radioButton-color-selected-indicator-border-error-hover: var(--semantic-color-fill-error, #a8000b);--comp-radioButton-color-selected-indicator-border-error-pressed: var(--semantic-color-fill-error, #a8000b);--comp-radioButton-color-selected-indicator-border-normal-default: var(--semantic-color-fill-selected-default, #000);--comp-radioButton-color-selected-indicator-border-normal-disabled: var( --semantic-color-fill-selected-disabled, #d7d8d6 );--comp-radioButton-color-selected-indicator-border-normal-hover: var(--semantic-color-fill-selected-hover, #333);--comp-radioButton-color-selected-indicator-border-normal-pressed: var( --semantic-color-fill-selected-pressed, #767676 );--comp-radioButton-color-selected-indicator-fill-error-default: var(--semantic-color-fill-error, #a8000b);--comp-radioButton-color-selected-indicator-fill-error-hover: var(--semantic-color-fill-error, #a8000b);--comp-radioButton-color-selected-indicator-fill-error-pressed: var(--semantic-color-fill-error, #a8000b);--comp-radioButton-color-selected-indicator-fill-normal-default: var(--semantic-color-fill-selected-default, #000);--comp-radioButton-color-selected-indicator-fill-normal-disabled: var( --semantic-color-fill-selected-disabled, #d7d8d6 );--comp-radioButton-color-selected-indicator-fill-normal-hover: var(--semantic-color-fill-selected-default, #000);--comp-radioButton-color-selected-indicator-fill-normal-pressed: var(--semantic-color-fill-selected-default, #000);--comp-radioButton-color-unselected-background-error-default: var( --semantic-color-background-container-error-quiet, #f9f2f3 );--comp-radioButton-color-unselected-background-error-hover: var( --semantic-color-background-container-error-quiet, #f9f2f3 );--comp-radioButton-color-unselected-background-error-pressed: var( --semantic-color-background-container-error-quiet, #f9f2f3 );--comp-radioButton-color-unselected-background-normal-default: var(--brand-hsbc-color-core-white, #fff);--comp-radioButton-color-unselected-background-normal-disabled: var(--brand-hsbc-color-core-white, #fff);--comp-radioButton-color-unselected-background-normal-hover: var(--brand-hsbc-color-core-white, #fff);--comp-radioButton-color-unselected-background-normal-pressed: var(--brand-hsbc-color-core-white, #fff);--comp-radioButton-color-unselected-border-error-default: var(--semantic-color-border-container-error, #a8000b);--comp-radioButton-color-unselected-border-error-hover: var(--semantic-color-border-container-error, #a8000b);--comp-radioButton-color-unselected-border-error-pressed: var(--semantic-color-border-container-error, #a8000b);--comp-radioButton-color-unselected-border-normal-default: var( --semantic-color-border-container-interactive-default, #767676 );--comp-radioButton-color-unselected-border-normal-disabled: var( --semantic-color-border-container-interactive-disabled, #d7d8d6 );--comp-radioButton-color-unselected-border-normal-hover: var( --semantic-color-border-container-interactive-hover, #000 );--comp-radioButton-color-unselected-border-normal-pressed: var( --semantic-color-border-container-interactive-pressed, #000 );--comp-radioButton-cornerRadius-frame: 62.4375rem;--comp-radioButton-cornerRadius-indicator: 62.4375rem;--comp-radioButton-size-frame: var(--semantic-size-icon-m, 1.5rem);--comp-radioButton-size-indicator: .875rem}[data-bdl-theme=hsbc]{--comp-searchField-borderWidth-active-box: .0625rem;--comp-searchField-borderWidth-disabled-box: .0625rem;--comp-searchField-borderWidth-inactive-box: .0625rem;--comp-searchField-color-active-bar-fill-default: var(--brand-hsbc-color-core-black, #000);--comp-searchField-color-active-bar-fill-hover: var(--brand-hsbc-color-core-black, #000);--comp-searchField-color-active-bar-fill-pressed: var(--brand-hsbc-color-core-black, #000);--comp-searchField-color-active-box-background-default: var(--brand-hsbc-color-core-white, #fff);--comp-searchField-color-active-box-background-hover: var(--brand-hsbc-color-core-white, #fff);--comp-searchField-color-active-box-background-pressed: var(--brand-hsbc-color-core-white, #fff);--comp-searchField-color-active-box-border-default: var(--semantic-color-border-container-selected-default, #000);--comp-searchField-color-active-box-border-hover: var(--semantic-color-border-container-selected-hover, #000);--comp-searchField-color-active-box-border-pressed: var(--semantic-color-border-container-selected-pressed, #000);--comp-searchField-color-active-control-icon-default: var(--semantic-color-icon-primary-default, #333);--comp-searchField-color-active-control-icon-disabled: var(--semantic-color-icon-primary-disabled, #d7d8d6);--comp-searchField-color-active-control-icon-hover: var(--semantic-color-icon-primary-hover, #333);--comp-searchField-color-active-control-icon-pressed: var(--semantic-color-icon-primary-pressed, #333);--comp-searchField-color-active-input-text-placeholder: var(--semantic-color-text-placeholder, #767676);--comp-searchField-color-active-input-text-populated: var(--semantic-color-text-primary-default, #333);--comp-searchField-color-active-leadingIcon-default: var(--semantic-color-icon-primary-default, #333);--comp-searchField-color-active-leadingIcon-disabled: var(--semantic-color-icon-primary-disabled, #d7d8d6);--comp-searchField-color-active-leadingIcon-hover: var(--semantic-color-icon-primary-hover, #333);--comp-searchField-color-active-leadingIcon-pressed: var(--semantic-color-icon-primary-pressed, #333);--comp-searchField-color-active-subtitle-text: var(--semantic-color-text-secondary-default, #545454);--comp-searchField-color-active-title-text: var(--semantic-color-text-primary-default, #333);--comp-searchField-color-disabled-bar-fill: var(--semantic-color-border-container-interactive-disabled, #d7d8d6);--comp-searchField-color-disabled-box-background: var(--brand-hsbc-color-core-white, #fff);--comp-searchField-color-disabled-box-border: var(--semantic-color-border-container-interactive-disabled, #d7d8d6);--comp-searchField-color-disabled-input-text-placeholder: var(--semantic-color-text-primary-disabled, #d7d8d6);--comp-searchField-color-disabled-leadingIcon: var(--semantic-color-icon-primary-disabled, #d7d8d6);--comp-searchField-color-disabled-subtitle-text: var(--semantic-color-text-secondary-disabled, #d7d8d6);--comp-searchField-color-disabled-title-text: var(--semantic-color-text-primary-disabled, #d7d8d6);--comp-searchField-color-inactive-bar-fill-default: var( --semantic-color-border-container-interactive-default, #767676 );--comp-searchField-color-inactive-bar-fill-hover: var(--semantic-color-border-container-interactive-hover, #000);--comp-searchField-color-inactive-bar-fill-pressed: var(--semantic-color-border-container-interactive-pressed, #000);--comp-searchField-color-inactive-box-background-default: var(--brand-hsbc-color-core-white, #fff);--comp-searchField-color-inactive-box-background-hover: var(--brand-hsbc-color-core-white, #fff);--comp-searchField-color-inactive-box-background-pressed: var(--brand-hsbc-color-core-white, #fff);--comp-searchField-color-inactive-box-border-default: var( --semantic-color-border-container-interactive-default, #767676 );--comp-searchField-color-inactive-box-border-hover: var(--semantic-color-border-container-interactive-hover, #000);--comp-searchField-color-inactive-box-border-pressed: var( --semantic-color-border-container-interactive-pressed, #000 );--comp-searchField-color-inactive-control-icon-default: var(--semantic-color-icon-primary-default, #333);--comp-searchField-color-inactive-control-icon-disabled: var(--semantic-color-icon-primary-disabled, #d7d8d6);--comp-searchField-color-inactive-control-icon-hover: var(--semantic-color-icon-primary-hover, #333);--comp-searchField-color-inactive-control-icon-pressed: var(--semantic-color-icon-primary-pressed, #333);--comp-searchField-color-inactive-input-text-placeholder: var(--semantic-color-text-placeholder, #767676);--comp-searchField-color-inactive-input-text-populated: var(--semantic-color-text-primary-default, #333);--comp-searchField-color-inactive-leadingIcon-default: var(--semantic-color-icon-primary-default, #333);--comp-searchField-color-inactive-leadingIcon-disabled: var(--semantic-color-icon-primary-disabled, #d7d8d6);--comp-searchField-color-inactive-leadingIcon-hover: var(--semantic-color-icon-primary-hover, #333);--comp-searchField-color-inactive-leadingIcon-pressed: var(--semantic-color-icon-primary-pressed, #333);--comp-searchField-color-inactive-subtitle-text: var(--semantic-color-text-secondary-default, #545454);--comp-searchField-color-inactive-title-text: var(--semantic-color-text-primary-default, #333);--comp-searchField-cornerRadius-box: 0rem;--comp-searchField-size-bar-height-active: .125rem;--comp-searchField-size-bar-height-disabled: 0rem;--comp-searchField-size-bar-height-inactive: 0rem;--comp-searchField-size-control-icon: var(--semantic-size-icon-s, 1.125rem);--comp-searchField-size-leadingIcon: var(--semantic-size-icon-s, 1.125rem);--comp-searchField-space-box-paddingHorizontal: var(--semantic-space-general-fixed-200, 1rem);--comp-searchField-space-box-paddingVertical: var(--semantic-space-general-fixed-150, .75rem);--comp-searchField-space-gapIconInput: var(--semantic-space-general-fixed-100, .5rem);--comp-searchField-space-gapTitleBox: var(--semantic-space-general-fixed-100, .5rem);--comp-searchField-space-gapTitleSubtitle: var(--semantic-space-general-fixed-0, 0rem);--comp-searchField-typography-active-title: var( --semantic-typography-content-body-normal, 400 1rem/1.5rem "Univers Next for HSBC", sans-serif );--comp-searchField-typography-active-title-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem);--comp-searchField-typography-active-subtitle: var( --semantic-typography-content-caption-quiet, 350 .875rem/1.25rem "Univers Next for HSBC", sans-serif );--comp-searchField-typography-active-subtitle-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem);--comp-searchField-typography-active-input-populated: var( --semantic-typography-content-body-normal, 400 1rem/1.5rem "Univers Next for HSBC", sans-serif );--comp-searchField-typography-active-input-populated-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-searchField-typography-active-input-placeholder: var( --semantic-typography-content-body-quiet, 350 1rem/1.5rem "Univers Next for HSBC", sans-serif );--comp-searchField-typography-active-input-placeholder-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-searchField-typography-inactive-title: var( --semantic-typography-content-body-normal, 400 1rem/1.5rem "Univers Next for HSBC", sans-serif );--comp-searchField-typography-inactive-title-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem);--comp-searchField-typography-inactive-subtitle: var( --semantic-typography-content-caption-quiet, 350 .875rem/1.25rem "Univers Next for HSBC", sans-serif );--comp-searchField-typography-inactive-subtitle-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-searchField-typography-inactive-input-populated: var( --semantic-typography-content-body-normal, 400 1rem/1.5rem "Univers Next for HSBC", sans-serif );--comp-searchField-typography-inactive-input-populated-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-searchField-typography-inactive-input-placeholder: var( --semantic-typography-content-body-quiet, 350 1rem/1.5rem "Univers Next for HSBC", sans-serif );--comp-searchField-typography-inactive-input-placeholder-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-searchField-typography-disabled-title: var( --semantic-typography-content-body-normal, 400 1rem/1.5rem "Univers Next for HSBC", sans-serif );--comp-searchField-typography-disabled-title-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem);--comp-searchField-typography-disabled-subtitle: var( --semantic-typography-content-caption-quiet, 350 .875rem/1.25rem "Univers Next for HSBC", sans-serif );--comp-searchField-typography-disabled-subtitle-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-searchField-typography-disabled-input-placeholder: var( --semantic-typography-content-body-quiet, 350 1rem/1.5rem "Univers Next for HSBC", sans-serif );--comp-searchField-typography-disabled-input-placeholder-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem )}[data-bdl-theme=hsbc]{--comp-sectionHeader-color-link-leadingIcon-default: var(--semantic-color-icon-actionable-default, #000);--comp-sectionHeader-color-link-leadingIcon-disabled: var(--semantic-color-icon-actionable-disabled, #d7d8d6);--comp-sectionHeader-color-link-leadingIcon-hover: var(--semantic-color-icon-actionable-hover, #767676);--comp-sectionHeader-color-link-leadingIcon-pressed: var(--semantic-color-icon-actionable-pressed, #767676);--comp-sectionHeader-color-link-text-default: var(--semantic-color-text-actionable-default, #000);--comp-sectionHeader-color-link-text-disabled: var(--semantic-color-text-actionable-disabled, #d7d8d6);--comp-sectionHeader-color-link-text-hover: var(--semantic-color-text-actionable-hover, #767676);--comp-sectionHeader-color-link-text-pressed: var(--semantic-color-text-actionable-pressed, #767676);--comp-sectionHeader-color-link-trailingIcon-default: var(--semantic-color-icon-actionable-default, #000);--comp-sectionHeader-color-link-trailingIcon-disabled: var(--semantic-color-icon-actionable-disabled, #d7d8d6);--comp-sectionHeader-color-link-trailingIcon-hover: var(--semantic-color-icon-actionable-hover, #767676);--comp-sectionHeader-color-link-trailingIcon-pressed: var(--semantic-color-icon-actionable-pressed, #767676);--comp-sectionHeader-color-title-text: var(--semantic-color-text-primary-default, #333);--comp-sectionHeader-space-gapTitleLink: var(--semantic-space-item-gap-normal, 1rem);--comp-sectionHeader-space-link-gapLabelIcon: var(--semantic-space-item-gap-tight, .5rem);--comp-sectionHeader-space-paddingHorizontal: var(--semantic-space-container-padding-normal, 1rem);--comp-sectionHeader-space-paddingVertical: var(--semantic-space-general-fixed-100, .5rem);--comp-sectionHeader-typography-title-headline: var( --semantic-typography-heading-headline-normal, 400 1.75rem/2.25rem "Univers Next for HSBC", sans-serif );--comp-sectionHeader-typography-title-headline-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-sectionHeader-typography-title-subheadline: var( --semantic-typography-heading-subheadline-normal, 400 1.4375rem/1.875rem "Univers Next for HSBC", sans-serif );--comp-sectionHeader-typography-title-subheadline-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-sectionHeader-typography-title-sectionTitle: var( --semantic-typography-heading-sectionTitle-normal, 400 1.4375rem/1.875rem "Univers Next for HSBC", sans-serif );--comp-sectionHeader-typography-title-sectionTitle-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-sectionHeader-typography-title-contentTitle: var( --semantic-typography-heading-contentTitle-normal, 400 1.1875rem/1.6875rem "Univers Next for HSBC", sans-serif );--comp-sectionHeader-typography-title-contentTitle-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-sectionHeader-typography-link: var( --semantic-typography-content-caption-loud, 500 .875rem/1.25rem "Univers Next for HSBC", sans-serif );--comp-sectionHeader-typography-link-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem)}[data-bdl-theme=hsbc]{--comp-sectionSelector-borderWidth-standard-default: var( --semantic-borderWidth-container-interactive-default, .0625rem );--comp-sectionSelector-borderWidth-standard-disabled: var( --semantic-borderWidth-container-interactive-disabled, .0625rem );--comp-sectionSelector-borderWidth-standard-hover: var(--semantic-borderWidth-container-interactive-hover, .0625rem);--comp-sectionSelector-borderWidth-standard-pressed: var( --semantic-borderWidth-container-interactive-pressed, .0625rem );--comp-sectionSelector-color-standard-background-default: var( --semantic-color-background-container-interactive-default, #fff );--comp-sectionSelector-color-standard-background-disabled: var( --semantic-color-background-container-interactive-disabled, #fff );--comp-sectionSelector-color-standard-background-hover: var( --semantic-color-background-container-interactive-hover, #f3f3f3 );--comp-sectionSelector-color-standard-background-pressed: var( --semantic-color-background-container-interactive-pressed, #ededed );--comp-sectionSelector-color-standard-border-default: var(--semantic-color-border-container-static, #d7d8d6);--comp-sectionSelector-color-standard-border-disabled: var( --semantic-color-border-container-interactive-disabled, #d7d8d6 );--comp-sectionSelector-color-standard-border-hover: var(--semantic-color-border-container-interactive-hover, #000);--comp-sectionSelector-color-standard-border-pressed: var( --semantic-color-border-container-interactive-pressed, #000 );--comp-sectionSelector-color-standard-icon-default: var(--semantic-color-icon-primary-default, #333);--comp-sectionSelector-color-standard-icon-disabled: var(--semantic-color-icon-primary-disabled, #d7d8d6);--comp-sectionSelector-color-standard-icon-hover: var(--semantic-color-icon-primary-hover, #333);--comp-sectionSelector-color-standard-icon-pressed: var(--semantic-color-icon-primary-pressed, #333);--comp-sectionSelector-color-standard-subtitle-text-default: var(--semantic-color-text-secondary-default, #545454);--comp-sectionSelector-color-standard-subtitle-text-disabled: var(--semantic-color-text-secondary-disabled, #d7d8d6);--comp-sectionSelector-color-standard-subtitle-text-hover: var(--semantic-color-text-secondary-hover, #545454);--comp-sectionSelector-color-standard-subtitle-text-pressed: var(--semantic-color-text-secondary-pressed, #545454);--comp-sectionSelector-color-standard-title-text-default: var(--semantic-color-text-primary-default, #333);--comp-sectionSelector-color-standard-title-text-disabled: var(--semantic-color-text-primary-disabled, #d7d8d6);--comp-sectionSelector-color-standard-title-text-hover: var(--semantic-color-text-primary-hover, #333);--comp-sectionSelector-color-standard-title-text-pressed: var(--semantic-color-text-primary-pressed, #333);--comp-sectionSelector-color-subtle-background-default: var(--brand-hsbc-color-transparent-white, #fff0);--comp-sectionSelector-color-subtle-background-disabled: var(--brand-hsbc-color-transparent-white, #fff0);--comp-sectionSelector-color-subtle-background-hover: var( --semantic-color-background-container-interactive-hover, #f3f3f3 );--comp-sectionSelector-color-subtle-background-pressed: var( --semantic-color-background-container-interactive-pressed, #ededed );--comp-sectionSelector-color-subtle-icon-default: var(--semantic-color-icon-actionable-default, #000);--comp-sectionSelector-color-subtle-icon-disabled: var(--semantic-color-icon-actionable-disabled, #d7d8d6);--comp-sectionSelector-color-subtle-icon-hover: var(--semantic-color-icon-actionable-hover, #767676);--comp-sectionSelector-color-subtle-icon-pressed: var(--semantic-color-icon-actionable-pressed, #767676);--comp-sectionSelector-color-subtle-title-text-default: var(--semantic-color-text-actionable-default, #000);--comp-sectionSelector-color-subtle-title-text-disabled: var(--semantic-color-text-actionable-disabled, #d7d8d6);--comp-sectionSelector-color-subtle-title-text-hover: var(--semantic-color-text-actionable-hover, #767676);--comp-sectionSelector-color-subtle-title-text-pressed: var(--semantic-color-text-actionable-pressed, #767676);--comp-sectionSelector-cornerRadius-standard: 0rem;--comp-sectionSelector-cornerRadius-subtle: 0rem;--comp-sectionSelector-size-standard-icon: var(--semantic-size-icon-xs, 1rem);--comp-sectionSelector-size-subtle-icon: var(--semantic-size-icon-xs, 1rem);--comp-sectionSelector-space-standard-multipleLines-gapLabelIcon: var(--semantic-space-general-fixed-100, .5rem);--comp-sectionSelector-space-standard-multipleLines-gapTitleSubtitle: var(--semantic-space-general-fixed-0, 0rem);--comp-sectionSelector-space-standard-multipleLines-paddingHorizontal: var( --semantic-space-general-fixed-150, .75rem );--comp-sectionSelector-space-standard-multipleLines-paddingVertical: var(--semantic-space-general-fixed-100, .5rem);--comp-sectionSelector-space-standard-oneLine-gapLabelIcon: var(--semantic-space-general-fixed-100, .5rem);--comp-sectionSelector-space-standard-oneLine-paddingHorizontal: var(--semantic-space-general-fixed-150, .75rem);--comp-sectionSelector-space-standard-oneLine-paddingVertical: var(--semantic-space-general-fixed-100, .5rem);--comp-sectionSelector-space-subtle-gapLabelIcon: var(--semantic-space-general-fixed-100, .5rem);--comp-sectionSelector-space-subtle-paddingHorizontal: var(--semantic-space-general-fixed-150, .75rem);--comp-sectionSelector-space-subtle-paddingVertical: var(--semantic-space-general-fixed-100, .5rem);--comp-sectionSelector-typography-standard-title: var( --semantic-typography-content-caption-normal, 400 .875rem/1.25rem "Univers Next for HSBC", sans-serif );--comp-sectionSelector-typography-standard-title-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-sectionSelector-typography-standard-subtitle: var( --semantic-typography-content-footnote-quiet, 350 .75rem/1rem "Univers Next for HSBC", sans-serif );--comp-sectionSelector-typography-standard-subtitle-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-sectionSelector-typography-subtle-title: var( --semantic-typography-content-caption-normal, 400 .875rem/1.25rem "Univers Next for HSBC", sans-serif );--comp-sectionSelector-typography-subtle-title-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem )}[data-bdl-theme=hsbc]{--comp-segmentedControl-borderWidth-container: 0rem;--comp-segmentedControl-borderWidth-divider: 0rem;--comp-segmentedControl-borderWidth-segment-selected: .0625rem;--comp-segmentedControl-borderWidth-segment-unselected: 0rem;--comp-segmentedControl-color-container-background-default: var( --semantic-color-background-container-interactive-default );--comp-segmentedControl-color-container-background-disabled: var( --semantic-color-background-container-interactive-default );--comp-segmentedControl-color-container-border-default: var( --brand-hsbc-color-complementaryGrey-grey1 );--comp-segmentedControl-color-container-border-disabled: var( --brand-hsbc-color-complementaryGrey-grey1 );--comp-segmentedControl-color-divider: var( --semantic-color-divider );--comp-segmentedControl-color-segment-background-selected-default: var( --semantic-color-background-container-selected-default, #fff );--comp-segmentedControl-color-segment-background-selected-disabled: var( --semantic-color-background-container-selected-disabled, #fff );--comp-segmentedControl-color-segment-background-selected-hover: var( --semantic-color-background-container-selected-hover, #f3f3f3 );--comp-segmentedControl-color-segment-background-selected-pressed: var( --semantic-color-background-container-selected-pressed, #ededed );--comp-segmentedControl-color-segment-background-unselected-default: var( --brand-hsbc-color-darkModeGrey-grey3 );--comp-segmentedControl-color-segment-background-unselected-disabled: var( --brand-hsbc-color-darkModeGrey-grey3 );--comp-segmentedControl-color-segment-background-unselected-hover: var( --brand-hsbc-color-darkModeGrey-grey3 );--comp-segmentedControl-color-segment-background-unselected-pressed: var( --brand-hsbc-color-darkModeGrey-grey3 );--comp-segmentedControl-color-segment-border-selected-default: var( --brand-hsbc-color-darkModeGrey-grey1 );--comp-segmentedControl-color-segment-border-selected-disabled: var( --brand-hsbc-color-darkModeGrey-grey1 );--comp-segmentedControl-color-segment-border-selected-hover: var( --brand-hsbc-color-darkModeGrey-grey1 );--comp-segmentedControl-color-segment-border-selected-pressed: var( --brand-hsbc-color-darkModeGrey-grey1 );--comp-segmentedControl-color-segment-border-unselected-default: var( --brand-hsbc-color-darkModeGrey-grey1 );--comp-segmentedControl-color-segment-border-unselected-disabled: var( --brand-hsbc-color-darkModeGrey-grey1 );--comp-segmentedControl-color-segment-border-unselected-hover: var( --brand-hsbc-color-darkModeGrey-grey1 );--comp-segmentedControl-color-segment-border-unselected-pressed: var( --brand-hsbc-color-darkModeGrey-grey1 );--comp-segmentedControl-color-segment-icon-selected-default: var( --semantic-color-icon-primary-default );--comp-segmentedControl-color-segment-icon-selected-disabled: var( --semantic-color-icon-primary-disabled );--comp-segmentedControl-color-segment-icon-selected-hover: var( --semantic-color-icon-primary-hover );--comp-segmentedControl-color-segment-icon-selected-pressed: var( --semantic-color-icon-primary-pressed );--comp-segmentedControl-color-segment-icon-unselected-default: var( --semantic-color-icon-primary-default );--comp-segmentedControl-color-segment-icon-unselected-disabled: var( --semantic-color-icon-primary-disabled );--comp-segmentedControl-color-segment-icon-unselected-hover: var( --semantic-color-icon-primary-hover );--comp-segmentedControl-color-segment-icon-unselected-pressed: var( --semantic-color-icon-primary-pressed );--comp-segmentedControl-color-segment-text-selected-default: var( --semantic-color-text-primary-default );--comp-segmentedControl-color-segment-text-selected-disabled: var( --semantic-color-text-primary-disabled );--comp-segmentedControl-color-segment-text-selected-hover: var( --semantic-color-text-primary-hover );--comp-segmentedControl-color-segment-text-selected-pressed: var( --semantic-color-text-primary-pressed );--comp-segmentedControl-color-segment-text-unselected-default: var( --semantic-color-text-primary-default );--comp-segmentedControl-color-segment-text-unselected-disabled: var( --semantic-color-text-primary-disabled );--comp-segmentedControl-color-segment-text-unselected-hover: var( --semantic-color-text-primary-hover );--comp-segmentedControl-color-segment-text-unselected-pressed: var( --semantic-color-text-primary-pressed );--comp-segmentedControl-color-segmentBar-default: var( --brand-hsbc-color-complementaryGrey-grey1 );--comp-segmentedControl-color-segmentBar-disabled: var( --brand-hsbc-color-complementaryGrey-grey1 );--comp-segmentedControl-color-segmentBar-hover: var( --brand-hsbc-color-complementaryGrey-grey1 );--comp-segmentedControl-color-segmentBar-pressed: var( --brand-hsbc-color-complementaryGrey-grey1 );--comp-segmentedControl-cornerRadius-container: 0rem;--comp-segmentedControl-cornerRadius-segment: 0rem;--comp-segmentedControl-cornerRadius-segmentBar: 0rem;--comp-segmentedControl-size-divider-height: 0rem;--comp-segmentedControl-size-segment-icon: var( --semantic-size-icon-s, 1.125rem );--comp-segmentedControl-size-segmentBar-height: .0625rem;--comp-segmentedControl-space-container-paddingHorizontal: 0rem;--comp-segmentedControl-space-container-paddingVertical: 0rem;--comp-segmentedControl-space-segment-paddingHorizontal: var( --semantic-space-general-fixed-200, 1rem );--comp-segmentedControl-space-segment-paddingVertical: var( --semantic-space-general-fixed-100, .5rem );--comp-segmentedControl-space-segmentGroup-gapHorizontal: 0rem;--comp-segmentedControl-typography-segment-selected: var( --semantic-typography-content-caption-normal, 400 .875rem / 1.25rem "Univers Next for HSBC", sans-serif );--comp-segmentedControl-typography-segment-selected-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-segmentedControl-typography-segment-unselected: var( --semantic-typography-content-caption-normal, 400 .875rem / 1.25rem "Univers Next for HSBC", sans-serif );--comp-segmentedControl-typography-segment-unselected-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem )}[data-bdl-theme=hsbc]{--comp-slider-borderWidth-handle: var(--semantic-borderWidth-container-interactive-default, .0625rem);--comp-slider-color-handle-border-default: var(--semantic-color-border-container-interactive-default, #767676);--comp-slider-color-handle-border-disabled: var(--semantic-color-border-container-interactive-disabled, #d7d8d6);--comp-slider-color-handle-border-hover: var(--semantic-color-border-container-interactive-hover, #000);--comp-slider-color-handle-border-pressed: var(--semantic-color-border-container-interactive-pressed, #000);--comp-slider-color-handle-fill-default: var(--brand-hsbc-color-core-white, #fff);--comp-slider-color-handle-fill-disabled: var(--brand-hsbc-color-core-white, #fff);--comp-slider-color-handle-fill-hover: var(--brand-hsbc-color-core-white, #fff);--comp-slider-color-handle-fill-pressed: var(--brand-hsbc-color-core-white, #fff);--comp-slider-color-label-text-default: var(--semantic-color-text-primary-default, #333);--comp-slider-color-label-text-disabled: var(--semantic-color-text-primary-disabled, #d7d8d6);--comp-slider-color-mark-fill-default-major: var(--brand-hsbc-color-complementaryGrey-grey6, #767676);--comp-slider-color-mark-fill-default-minor: var(--brand-hsbc-color-complementaryGrey-grey6, #767676);--comp-slider-color-mark-fill-disabled-major: var(--brand-hsbc-color-complementaryGrey-grey3, #d7d8d6);--comp-slider-color-mark-fill-disabled-minor: var(--brand-hsbc-color-complementaryGrey-grey3, #d7d8d6);--comp-slider-color-range-fill-default: var(--semantic-color-fill-selected-default, #000);--comp-slider-color-range-fill-disabled: var(--semantic-color-fill-selected-disabled, #d7d8d6);--comp-slider-color-track-fill-default: var(--brand-hsbc-color-complementaryGrey-grey3, #d7d8d6);--comp-slider-color-track-fill-disabled: var(--brand-hsbc-color-complementaryGrey-grey2, #ededed);--comp-slider-cornerRadius-handle: 62.4375rem;--comp-slider-cornerRadius-mark: 0rem;--comp-slider-cornerRadius-track: 0rem;--comp-slider-size-handle: 2rem;--comp-slider-size-mark-height-major: .75rem;--comp-slider-size-mark-height-minor: .5rem;--comp-slider-size-mark-width-major: .0625rem;--comp-slider-size-mark-width-minor: .0625rem;--comp-slider-size-track-height: .5rem;--comp-slider-space-gapLabelTrack: var(--semantic-space-general-fixed-50, .25rem);--comp-slider-typography-label: var( --semantic-typography-content-body-normal, 400 1rem/1.5rem "Univers Next for HSBC", sans-serif );--comp-slider-typography-label-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem)}[data-bdl-theme=hsbc]{--comp-snackbar-borderWidth: .0625rem;--comp-snackbar-color-information-background: var( --semantic-color-background-container-information-quiet, #ebeff4 );--comp-snackbar-color-information-border: var( --semantic-color-border-container-information, #305a85 );--comp-snackbar-color-information-text: var( --semantic-color-text-primary-default, #333 );--comp-snackbar-color-success-background: var( --semantic-color-background-container-success-quiet, #e5f2f2 );--comp-snackbar-color-success-border: var( --semantic-color-border-container-success, #00847f );--comp-snackbar-color-success-text: var( --semantic-color-text-primary-default, #333 );--comp-snackbar-color-warning-background: var( --semantic-color-background-container-warning-quiet, #fff8ea );--comp-snackbar-color-warning-border: var( --semantic-color-border-container-warning, #fb3 );--comp-snackbar-color-warning-text: var( --brand-hsbc-color-complementaryGrey-grey1 );--comp-snackbar-cornerRadius: 0rem;--comp-snackbar-iconStyle-information: var( --brand-hsbc-number-iconStyle-onLight, onLight );--comp-snackbar-iconStyle-success: var( --brand-hsbc-number-iconStyle-onLight, onLight );--comp-snackbar-iconStyle-warning: var( --brand-hsbc-number-iconStyle-onLight, onLight );--comp-snackbar-size-icon: var(--semantic-size-icon-s, 1.125rem);--comp-snackbar-size-maxWidth: 31.25rem;--comp-snackbar-shadow: 0rem .1875rem .1875rem 0rem var(--brand-hsbc-color-translucent-black-30, #0000004d);--comp-snackbar-space-gapIconText: var( --semantic-space-general-fixed-100, .5rem );--comp-snackbar-space-marginHorizontal: var( --semantic-space-general-fixed-200, 1rem );--comp-snackbar-space-marginVertical: var( --semantic-space-general-fixed-200, 1rem );--comp-snackbar-space-paddingHorizontal: var( --semantic-space-general-fixed-200, 1rem );--comp-snackbar-space-paddingVertical: var( --semantic-space-general-fixed-150, .75rem );--comp-snackbar-typography-text: var( --semantic-typography-content-caption-normal, 400 .875rem / 1.25rem "Univers Next for HSBC", sans-serif );--comp-snackbar-typography-text-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem )}[data-bdl-theme=hsbc]{--comp-spinner-borderWidth-l: .1875rem;--comp-spinner-borderWidth-m: .125rem;--comp-spinner-borderWidth-s: .09375rem;--comp-spinner-borderWidth-xl: .25rem;--comp-spinner-color-determinate-progress: var( --brand-hsbc-color-complementaryGrey-grey1 );--comp-spinner-color-determinate-track: var( --brand-hsbc-color-darkModeGrey-grey3 );--comp-spinner-color-indeterminate-onDark: var( --brand-hsbc-color-darkModeGrey-grey3 );--comp-spinner-color-indeterminate-onLight: var( --brand-hsbc-color-complementaryGrey-grey1 );--comp-spinner-cornerRadius-l: 0rem;--comp-spinner-cornerRadius-m: 0rem;--comp-spinner-cornerRadius-s: 0rem;--comp-spinner-cornerRadius-xl: 0rem;--comp-spinner-size-l: var(--semantic-size-icon-l, 2.25rem);--comp-spinner-size-m: var(--semantic-size-icon-m, 1.5rem);--comp-spinner-size-s: var(--semantic-size-icon-s, 1.125rem);--comp-spinner-size-xl: var(--semantic-size-icon-xl, 3rem);--comp-spinner-lineCap: var(--brand-hsbc-number-lineCap-butt, butt)}[data-bdl-theme=hsbc]{--comp-statusIndicator-color-approved-indicator-border: var(--semantic-color-border-container-success, #00847f);--comp-statusIndicator-color-approved-indicator-fill: var(--semantic-color-fill-success, #00847f);--comp-statusIndicator-color-approved-label-text: var(--semantic-color-text-primary-default, #333);--comp-statusIndicator-color-cancelled-indicator-border: var(--semantic-color-fill-primary-disabled, #d7d8d6);--comp-statusIndicator-color-cancelled-indicator-fill: var(--semantic-color-fill-primary-disabled, #d7d8d6);--comp-statusIndicator-color-cancelled-label-text: var(--semantic-color-text-primary-default, #333);--comp-statusIndicator-color-declined-indicator-border: var(--semantic-color-border-container-error, #a8000b);--comp-statusIndicator-color-declined-indicator-fill: var(--semantic-color-fill-error, #a8000b);--comp-statusIndicator-color-declined-label-text: var(--semantic-color-text-primary-default, #333);--comp-statusIndicator-color-pending-indicator-border: var(--semantic-color-border-container-warning, #fb3);--comp-statusIndicator-color-pending-indicator-fill: var(--semantic-color-fill-warning, #fb3);--comp-statusIndicator-color-pending-label-text: var(--semantic-color-text-primary-default, #333);--comp-statusIndicator-size-borderWidth-indicator: 0rem;--comp-statusIndicator-size-cornerRadius-indicator: 62.4375rem;--comp-statusIndicator-size-indicator: .5rem;--comp-statusIndicator-size-indicator-medium: .5rem;--comp-statusIndicator-size-indicator-small: .5rem;--comp-statusIndicator-space-gapIndicatorLabel: var(--semantic-space-general-fixed-100, .5rem);--comp-statusIndicator-space-gapIndicatorLabel-medium: var(--semantic-space-general-fixed-100, .5rem);--comp-statusIndicator-space-gapIndicatorLabel-small: var(--semantic-space-general-fixed-50, .25rem);--comp-statusIndicator-typography-label: var( --semantic-typography-content-caption-normal, 400 .875rem/1.25rem "Univers Next for HSBC", sans-serif );--comp-statusIndicator-typography-label-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem);--comp-statusIndicator-typography-label-medium: var( --semantic-typography-content-caption-normal, 400 .875rem/1.25rem "Univers Next for HSBC", sans-serif );--comp-statusIndicator-typography-label-medium-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-statusIndicator-typography-label-small: var( --semantic-typography-content-footnote-normal, 400 .75rem/1rem "Univers Next for HSBC", sans-serif );--comp-statusIndicator-typography-label-small-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem)}[data-bdl-theme=hsbc]{--comp-stepTracker-borderWidth-connector: .0625rem;--comp-stepTracker-borderWidth-step-active: 0rem;--comp-stepTracker-borderWidth-step-completed: 0rem;--comp-stepTracker-borderWidth-step-inactive: .0625rem;--comp-stepTracker-color-connector-border: var( --semantic-color-border-container-static, #d7d8d6 );--comp-stepTracker-color-info-text-active: var( --semantic-color-text-secondary-default, #545454 );--comp-stepTracker-color-info-text-completed: var( --semantic-color-text-secondary-default, #545454 );--comp-stepTracker-color-info-text-inactive: var( --semantic-color-text-secondary-default, #545454 );--comp-stepTracker-color-label-text-active: var( --semantic-color-text-primary-default, #333 );--comp-stepTracker-color-label-text-completed: var( --semantic-color-text-primary-default, #333 );--comp-stepTracker-color-label-text-inactive: var( --semantic-color-text-primary-default, #333 );--comp-stepTracker-color-step-background-active: var( --semantic-color-fill-primary-default, #db0011 );--comp-stepTracker-color-step-background-completed: var( --brand-hsbc-color-complementaryGrey-grey1 );--comp-stepTracker-color-step-background-inactive: var( --brand-hsbc-color-darkModeGrey-grey6, #fff );--comp-stepTracker-color-step-border-active: var( --semantic-color-fill-primary-default, #db0011 );--comp-stepTracker-color-step-border-completed: var( --semantic-color-fill-completed, #000 );--comp-stepTracker-color-step-border-inactive: var( --brand-hsbc-color-complementaryGrey-grey8, #333 );--comp-stepTracker-color-step-icon-completed: var( --brand-hsbc-color-core-white, #fff );--comp-stepTracker-color-step-text-active: var( --brand-hsbc-color-core-white, #fff );--comp-stepTracker-color-step-text-inactive: var( --semantic-color-text-primary-default, #333 );--comp-stepTracker-cornerRadius-step: 62.4375rem;--comp-stepTracker-size-icon-completed: .875rem;--comp-stepTracker-size-step: 1.5rem;--comp-stepTracker-space-gapLabelInfo: var( --semantic-space-general-fixed-0, 0rem );--comp-stepTracker-space-gapStepLabel: var( --semantic-space-general-fixed-100, .5rem );--comp-stepTracker-typography-label-active: var( --semantic-typography-content-body-normal, 400 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-stepTracker-typography-label-active-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-stepTracker-typography-label-inactive: var( --semantic-typography-content-body-normal, 400 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-stepTracker-typography-label-inactive-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-stepTracker-typography-label-completed: var( --semantic-typography-content-body-normal, 400 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-stepTracker-typography-label-completed-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-stepTracker-typography-info-active: var( --semantic-typography-content-caption-quiet, 350 .875rem / 1.25rem "Univers Next for HSBC", sans-serif );--comp-stepTracker-typography-info-active-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-stepTracker-typography-info-inactive: var( --semantic-typography-content-caption-quiet, 350 .875rem / 1.25rem "Univers Next for HSBC", sans-serif );--comp-stepTracker-typography-info-inactive-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-stepTracker-typography-info-completed: var( --semantic-typography-content-caption-quiet, 350 .875rem / 1.25rem "Univers Next for HSBC", sans-serif );--comp-stepTracker-typography-info-completed-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-stepTracker-typography-step-active: var( --semantic-typography-content-caption-loud, 500 .875rem / 1.25rem "Univers Next for HSBC", sans-serif );--comp-stepTracker-typography-step-active-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-stepTracker-typography-step-inactive: var( --semantic-typography-content-caption-loud, 500 .875rem / 1.25rem "Univers Next for HSBC", sans-serif );--comp-stepTracker-typography-step-inactive-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem )}[data-bdl-theme=hsbc]{--comp-switch-color-active-default: var(--semantic-color-fill-selected-default, #000);--comp-switch-color-active-disabled: var(--semantic-color-fill-selected-disabled, #d7d8d6);--comp-switch-color-active-hover: var(--semantic-color-fill-selected-default, #000);--comp-switch-color-active-pressed: var(--semantic-color-fill-selected-default, #000);--comp-switch-color-active-handle-default: var(--brand-hsbc-color-core-white, #fff);--comp-switch-color-active-handle-disabled: var(--brand-hsbc-color-core-white, #fff);--comp-switch-color-active-handle-hover: var(--brand-hsbc-color-core-white, #fff);--comp-switch-color-active-handle-pressed: var(--brand-hsbc-color-core-white, #fff);--comp-switch-color-inactive-default: var(--semantic-color-fill-selected-disabled, #d7d8d6);--comp-switch-color-inactive-disabled: var(--semantic-color-fill-selected-disabled, #d7d8d6);--comp-switch-color-inactive-hover: var(--semantic-color-fill-selected-disabled, #d7d8d6);--comp-switch-color-inactive-pressed: var(--semantic-color-fill-selected-disabled, #d7d8d6);--comp-switch-color-inactive-handle-default: var(--brand-hsbc-color-core-white, #fff);--comp-switch-color-inactive-handle-disabled: var(--brand-hsbc-color-core-white, #fff);--comp-switch-color-inactive-handle-hover: var(--brand-hsbc-color-core-white, #fff);--comp-switch-color-inactive-handle-pressed: var(--brand-hsbc-color-core-white, #fff);--comp-switch-color-selected-handle-fill-default: var(--brand-hsbc-color-core-white, #fff);--comp-switch-color-selected-handle-fill-disabled: var(--brand-hsbc-color-core-white, #fff);--comp-switch-color-selected-handle-fill-hover: var(--brand-hsbc-color-core-white, #fff);--comp-switch-color-selected-handle-fill-pressed: var(--brand-hsbc-color-core-white, #fff);--comp-switch-color-selected-track-border-default: var(--semantic-color-border-container-selected-default, #000);--comp-switch-color-selected-track-border-disabled: var(--semantic-color-border-container-selected-disabled, #d7d8d6);--comp-switch-color-selected-track-border-hover: var(--semantic-color-border-container-selected-default, #000);--comp-switch-color-selected-track-border-pressed: var(--semantic-color-border-container-selected-default, #000);--comp-switch-color-selected-track-fill-default: var(--semantic-color-fill-selected-default, #000);--comp-switch-color-selected-track-fill-disabled: var(--semantic-color-fill-selected-disabled, #d7d8d6);--comp-switch-color-selected-track-fill-hover: var(--semantic-color-fill-selected-default, #000);--comp-switch-color-selected-track-fill-pressed: var(--semantic-color-fill-selected-default, #000);--comp-switch-color-unselected-handle-fill-default: var(--brand-hsbc-color-core-white, #fff);--comp-switch-color-unselected-handle-fill-disabled: var(--brand-hsbc-color-core-white, #fff);--comp-switch-color-unselected-handle-fill-hover: var(--brand-hsbc-color-core-white, #fff);--comp-switch-color-unselected-handle-fill-pressed: var(--brand-hsbc-color-core-white, #fff);--comp-switch-color-unselected-track-border-default: var(--brand-hsbc-color-complementaryGrey-grey6, #767676);--comp-switch-color-unselected-track-border-disabled: var(--brand-hsbc-color-complementaryGrey-grey2, #ededed);--comp-switch-color-unselected-track-border-hover: var(--brand-hsbc-color-complementaryGrey-grey6, #767676);--comp-switch-color-unselected-track-border-pressed: var(--brand-hsbc-color-complementaryGrey-grey6, #767676);--comp-switch-color-unselected-track-fill-default: var(--brand-hsbc-color-complementaryGrey-grey6, #767676);--comp-switch-color-unselected-track-fill-disabled: var(--brand-hsbc-color-complementaryGrey-grey2, #ededed);--comp-switch-color-unselected-track-fill-hover: var(--brand-hsbc-color-complementaryGrey-grey6, #767676);--comp-switch-color-unselected-track-fill-pressed: var(--brand-hsbc-color-complementaryGrey-grey6, #767676)}[data-bdl-theme=hsbc]{--comp-tabBar-borderWidth-active: 0rem;--comp-tabBar-borderWidth-inactive: 0rem;--comp-tabBar-color-bar-fill-active-default: var(--semantic-color-fill-primary-default, #db0011);--comp-tabBar-color-bar-fill-inactive-default: var(--brand-hsbc-color-complementaryGrey-grey1, #f3f3f3);--comp-tabBar-color-label-text-active-default: var(--semantic-color-text-primary-default, #333);--comp-tabBar-color-label-text-active-hover: var(--semantic-color-text-primary-hover, #333);--comp-tabBar-color-label-text-active-pressed: var(--semantic-color-text-primary-pressed, #333);--comp-tabBar-color-label-text-inactive-default: var(--semantic-color-text-primary-default, #333);--comp-tabBar-color-label-text-inactive-hover: var(--semantic-color-text-primary-hover, #333);--comp-tabBar-color-label-text-inactive-pressed: var(--semantic-color-text-primary-pressed, #333);--comp-tabBar-color-more-background-default: var(--semantic-color-background-container-interactive-default, #fff);--comp-tabBar-color-more-background-hover: var(--semantic-color-background-container-interactive-hover, #f3f3f3);--comp-tabBar-color-more-background-pressed: var(--semantic-color-background-container-interactive-pressed, #ededed);--comp-tabBar-color-more-border-default: var(--semantic-color-background-container-interactive-default, #fff);--comp-tabBar-color-more-border-hover: var(--semantic-color-background-container-interactive-hover, #f3f3f3);--comp-tabBar-color-more-border-pressed: var(--semantic-color-background-container-interactive-pressed, #ededed);--comp-tabBar-color-more-icon-default: var(--semantic-color-icon-primary-default, #333);--comp-tabBar-color-more-icon-hover: var(--semantic-color-icon-primary-hover, #333);--comp-tabBar-color-more-icon-pressed: var(--semantic-color-icon-primary-pressed, #333);--comp-tabBar-color-more-text-default: var(--semantic-color-text-primary-default, #333);--comp-tabBar-color-more-text-hover: var(--semantic-color-text-primary-hover, #333);--comp-tabBar-color-more-text-pressed: var(--semantic-color-text-primary-pressed, #333);--comp-tabBar-color-rule: var(--semantic-color-divider, #ededed);--comp-tabBar-color-tab-background-active-default: var(--semantic-color-background-container-selected-default, #fff);--comp-tabBar-color-tab-background-active-hover: var(--semantic-color-background-container-selected-hover, #f3f3f3);--comp-tabBar-color-tab-background-active-pressed: var( --semantic-color-background-container-selected-pressed, #ededed );--comp-tabBar-color-tab-background-inactive-default: var( --semantic-color-background-container-interactive-default, #fff );--comp-tabBar-color-tab-background-inactive-hover: var( --semantic-color-background-container-interactive-hover, #f3f3f3 );--comp-tabBar-color-tab-background-inactive-pressed: var( --semantic-color-background-container-interactive-pressed, #ededed );--comp-tabBar-color-tab-border-active-default: var(--semantic-color-background-container-selected-default, #fff);--comp-tabBar-color-tab-border-active-hover: var(--semantic-color-background-container-selected-hover, #f3f3f3);--comp-tabBar-color-tab-border-active-pressed: var(--semantic-color-background-container-selected-pressed, #ededed);--comp-tabBar-color-tab-border-inactive-default: var(--semantic-color-background-container-interactive-default, #fff);--comp-tabBar-color-tab-border-inactive-hover: var(--semantic-color-background-container-interactive-hover, #f3f3f3);--comp-tabBar-color-tab-border-inactive-pressed: var( --semantic-color-background-container-interactive-pressed, #ededed );--comp-tabBar-cornerRadius-bar: 0rem;--comp-tabBar-cornerRadius-rule: 0rem;--comp-tabBar-cornerRadius-tab: 0rem;--comp-tabBar-size-bar-height-active: var(--semantic-space-general-fixed-25, .125rem);--comp-tabBar-size-bar-height-inactive: var(--semantic-space-general-fixed-25, .125rem);--comp-tabBar-size-more-icon: var(--semantic-size-icon-s, 1.125rem);--comp-tabBar-size-rule-height: .0625rem;--comp-tabBar-shadow-more: -.125rem 0rem .125rem 0rem #0000001a;--comp-tabBar-space-bar-paddingHorizontal: 0rem;--comp-tabBar-space-bar-paddingBottom: 0rem;--comp-tabBar-space-gapBetweenTab: 0rem;--comp-tabBar-space-more-gapIconLabel: var(--semantic-space-general-fixed-100, .5rem);--comp-tabBar-space-more-paddingHorizontal: var(--semantic-space-general-fixed-200, 1rem);--comp-tabBar-space-more-paddingVertical: var(--semantic-space-general-fixed-150, .75rem);--comp-tabBar-space-tab-paddingHorizontal: var(--semantic-space-general-fixed-200, 1rem);--comp-tabBar-space-tab-paddingVertical: .6875rem;--comp-tabBar-typography-active-label-default: var( --semantic-typography-content-body-loud, 500 1rem/1.5rem "Univers Next for HSBC", sans-serif );--comp-tabBar-typography-active-label-default-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem);--comp-tabBar-typography-active-label-hover: var( --semantic-typography-content-body-loud, 500 1rem/1.5rem "Univers Next for HSBC", sans-serif );--comp-tabBar-typography-active-label-hover-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem);--comp-tabBar-typography-active-label-pressed: var( --semantic-typography-content-body-loud, 500 1rem/1.5rem "Univers Next for HSBC", sans-serif );--comp-tabBar-typography-active-label-pressed-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem);--comp-tabBar-typography-inactive-label-default: var( --semantic-typography-content-body-normal, 400 1rem/1.5rem "Univers Next for HSBC", sans-serif );--comp-tabBar-typography-inactive-label-default-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-tabBar-typography-inactive-label-hover: var( --semantic-typography-content-body-normal, 400 1rem/1.5rem "Univers Next for HSBC", sans-serif );--comp-tabBar-typography-inactive-label-hover-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem);--comp-tabBar-typography-inactive-label-pressed: var( --semantic-typography-content-body-normal, 400 1rem/1.5rem "Univers Next for HSBC", sans-serif );--comp-tabBar-typography-inactive-label-pressed-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-tabBar-typography-more-default: var( --semantic-typography-content-body-normal, 400 1rem/1.5rem "Univers Next for HSBC", sans-serif );--comp-tabBar-typography-more-default-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem);--comp-tabBar-typography-more-hover: var( --semantic-typography-content-body-normal, 400 1rem/1.5rem "Univers Next for HSBC", sans-serif );--comp-tabBar-typography-more-hover-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem);--comp-tabBar-typography-more-pressed: var( --semantic-typography-content-body-normal, 400 1rem/1.5rem "Univers Next for HSBC", sans-serif );--comp-tabBar-typography-more-pressed-letterSpacing: var(--brand-hsbc-typography-letterSpacing-default, 0rem)}[data-bdl-theme=hsbc]{--comp-table-borderWidth-cell-default: var( --semantic-borderWidth-container-interactive-default, .0625rem );--comp-table-borderWidth-header-default: var( --semantic-borderWidth-container-static, .0625rem );--comp-table-borderWidth-subheader-default: var( --semantic-borderWidth-container-static, .0625rem );--comp-table-color-cell-alternative-background-default: var( --brand-hsbc-color-complementaryGrey-grey1, #f3f3f3 );--comp-table-color-cell-border-default: var( --semantic-color-border-container-static, #d7d8d6 );--comp-table-color-cell-standard-background-default: var( --semantic-color-background-container-interactive-default, #fff );--comp-table-color-cell-text-default: var( --semantic-color-text-primary-default, #333 );--comp-table-color-header-background-default: var( --brand-hsbc-color-darkModeGrey-grey3, #404040 );--comp-table-color-header-border-default: var( --semantic-color-border-container-static, #d7d8d6 );--comp-table-color-header-text-default: var( --semantic-color-text-primary-default, #333 );--comp-table-color-subheader-background-default: var( --brand-hsbc-color-complementaryGrey-grey1, #f3f3f3 );--comp-table-color-subheader-border-default: var( --semantic-color-border-container-static, #d7d8d6 );--comp-table-color-subheader-text-default: var( --semantic-color-text-primary-default, #333 );--comp-table-size-header-sorting-icon-height: var( --semantic-size-icon-m, 1.5rem );--comp-table-size-header-sorting-icon-width: .75rem;--comp-table-space-cell-paddingHorizontal-normal: var( --semantic-space-general-fixed-150, .75rem );--comp-table-space-cell-paddingVertical-normal: var( --semantic-space-general-fixed-150, .75rem );--comp-table-space-header-paddingHorizontal-normal: var( --semantic-space-general-fixed-150, .75rem );--comp-table-space-header-paddingVertical-normal: var( --semantic-space-general-fixed-150, .75rem );--comp-table-space-subheader-paddingHorizontal-normal: var( --semantic-space-general-fixed-150, .75rem );--comp-table-space-subheader-paddingVertical-normal: var( --semantic-space-general-fixed-150, .75rem )}[data-bdl-theme=hsbc]{--comp-tag-borderWidth: 0rem;--comp-tag-color-background: var( --brand-hsbc-color-darkModeGrey-grey2 );--comp-tag-color-border: var( --brand-hsbc-color-darkModeGrey-grey2 );--comp-tag-color-text: var(--semantic-color-text-primary-default, #333);--comp-tag-cornerRadius: 0rem;--comp-tag-space-paddingHorizontal: var( --semantic-space-general-fixed-100, .5rem );--comp-tag-space-paddingVertical: var( --semantic-space-general-fixed-50, .25rem );--comp-tag-typography-s-label: var( --semantic-typography-content-footnote-normal, 400 .75rem / 1rem "Univers Next for HSBC", sans-serif );--comp-tag-typography-s-label-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-tag-typography-m-label: var( --semantic-typography-content-caption-normal, 400 .875rem / 1.25rem "Univers Next for HSBC", sans-serif );--comp-tag-typography-m-label-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem )}[data-bdl-theme=hsbc]{--comp-tile-borderWidth-divider: .0625rem;--comp-tile-color-background-default: var( --semantic-color-background-container-interactive-default, #fff );--comp-tile-color-background-disabled: var( --semantic-color-background-container-interactive-disabled, #fff );--comp-tile-color-background-hover: var( --semantic-color-background-container-interactive-hover, #404040 );--comp-tile-color-background-pressed: var( --semantic-color-background-container-interactive-pressed, #ededed );--comp-tile-color-chevron-icon-default: var( --semantic-color-icon-primary-default, #333 );--comp-tile-color-chevron-icon-disabled: var( --semantic-color-icon-primary-disabled, #d7d8d6 );--comp-tile-color-chevron-icon-hover: var( --semantic-color-icon-primary-default, #333 );--comp-tile-color-chevron-icon-pressed: var( --semantic-color-icon-primary-pressed, #333 );--comp-tile-color-detail-text-default: var( --semantic-color-text-primary-default, #333 );--comp-tile-color-detail-text-disabled: var( --semantic-color-text-primary-disabled, #d7d8d6 );--comp-tile-color-detail-text-hover: var( --semantic-color-text-primary-default, #333 );--comp-tile-color-detail-text-pressed: var( --semantic-color-text-primary-pressed, #333 );--comp-tile-color-divider: var(--semantic-color-divider, #ededed);--comp-tile-color-leadingVisual-icon-default: var( --semantic-color-icon-primary-default, #333 );--comp-tile-color-leadingVisual-icon-disabled: var( --semantic-color-icon-primary-disabled, #d7d8d6 );--comp-tile-color-leadingVisual-icon-hover: var( --semantic-color-icon-primary-default, #333 );--comp-tile-color-leadingVisual-icon-pressed: var( --semantic-color-icon-primary-pressed, #333 );--comp-tile-color-spinner: var( --semantic-color-icon-actionable-default );--comp-tile-color-subtitle-text-default: var( --semantic-color-text-secondary-default, #545454 );--comp-tile-color-subtitle-text-disabled: var( --semantic-color-text-secondary-disabled, #d7d8d6 );--comp-tile-color-subtitle-text-hover: var( --semantic-color-text-secondary-default, #545454 );--comp-tile-color-subtitle-text-pressed: var( --semantic-color-text-secondary-pressed, #545454 );--comp-tile-color-title-text-default: var( --semantic-color-text-primary-default, #333 );--comp-tile-color-title-text-disabled: var( --semantic-color-text-primary-disabled, #d7d8d6 );--comp-tile-color-title-text-hover: var( --semantic-color-text-primary-default, #333 );--comp-tile-color-title-text-pressed: var( --semantic-color-text-primary-pressed, #333 );--comp-tile-color-trailingIcon-icon-default: var( --semantic-color-icon-actionable-default, #000 );--comp-tile-color-trailingIcon-icon-disabled: var( --semantic-color-icon-actionable-disabled, #d7d8d6 );--comp-tile-color-trailingIcon-icon-hover: var( --semantic-color-icon-actionable-default, #767676 );--comp-tile-color-trailingIcon-icon-pressed: var( --semantic-color-icon-actionable-pressed, #767676 );--comp-tile-color-add-icon-default: var( --semantic-color-icon-actionable-default, #000 );--comp-tile-color-add-icon-disabled: var( --semantic-color-icon-actionable-disabled, #d7d8d6 );--comp-tile-color-add-icon-hover: var( --semantic-color-icon-actionable-default, #767676 );--comp-tile-color-add-icon-pressed: var( --semantic-color-icon-actionable-pressed, #767676 );--comp-tile-color-remove-icon-default: var( --semantic-color-icon-actionable-default, #000 );--comp-tile-color-remove-icon-disabled: var( --semantic-color-icon-actionable-disabled, #d7d8d6 );--comp-tile-color-remove-icon-hover: var( --semantic-color-icon-actionable-hover, #767676 );--comp-tile-color-remove-icon-pressed: var( --semantic-color-icon-actionable-pressed, #767676 );--comp-tile-opacity-extraInfo-disabled: .4;--comp-tile-opacity-contentSlot-disabled: .4;--comp-tile-size-chevron: var(--semantic-size-icon-s, 1.125rem);--comp-tile-size-leadingVisual-avatar: var(--semantic-size-visual-s, 2.25rem);--comp-tile-size-leadingVisual-icon: var(--semantic-size-icon-s, 1.125rem);--comp-tile-size-leadingVisual-image: var(--semantic-size-visual-m, 3rem);--comp-tile-size-spinner: var(--semantic-size-icon-m, 1.5rem);--comp-tile-size-trailingIcon: var(--semantic-size-icon-s, 1.125rem);--comp-tile-space-divider-paddingEnd: var( --semantic-space-container-padding-normal, 1rem );--comp-tile-space-divider-paddingStart: var( --semantic-space-container-padding-normal, 1rem );--comp-tile-space-gapContentControl: var( --semantic-space-general-responsive-150, .75rem );--comp-tile-space-gapContentDetailHorizontal: var( --semantic-space-item-gap-tight, .5rem );--comp-tile-space-gapContentDetailVertical: var( --semantic-space-general-responsive-50, .25rem );--comp-tile-space-gapContentExtraInfo: var( --semantic-space-general-responsive-150, .75rem );--comp-tile-space-gapTitleSubtitle: var( --semantic-space-general-responsive-0, 0rem );--comp-tile-space-gapTrailingIcons: var( --semantic-space-general-responsive-300, 1.5rem );--comp-tile-space-gapVisualContent: var( --semantic-space-general-responsive-150, .75rem );--comp-tile-space-paddingHorizontal: var( --semantic-space-container-padding-normal, 1rem );--comp-tile-space-paddingVertical: var( --semantic-space-container-padding-normal, 1rem );--comp-tile-typography-title: var( --semantic-typography-content-body-normal, 400 1rem / 1.5rem "Univers Next for HSBC", sans-serif );--comp-tile-typography-title-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-tile-typography-subtitle: var( --semantic-typography-content-caption-quiet, 350 .875rem / 1.25rem "Univers Next for HSBC", sans-serif );--comp-tile-typography-subtitle-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem );--comp-tile-typography-detail: var( --semantic-typography-content-caption-quiet, 350 .875rem / 1.25rem "Univers Next for HSBC", sans-serif );--comp-tile-typography-detail-letterSpacing: var( --brand-hsbc-typography-letterSpacing-default, 0rem )}body{background:var(--semantic-color-background-container-interactive-default);color:#e7e7e7}.bdl-checkbox>.bdl-checkbox__mask{background:#101010!important;border-color:#fff!important}.bdl-checkbox>.bdl-checkbox__mask>.bdl-checkbox__icon{color:#fff}html{color-scheme:dark}